campfire.js
    Preparing search index...

    Type Alias RenderFunction<Elem, Deps>

    RenderFunction: (
        props: UnwrapStore<Deps>,
        opts: {
            b: RenderBuilder<Elem, Deps>;
            elt: Elem;
            event?: StoreEventFromObject<Deps> & { triggeredBy: string };
            first: boolean;
        },
    ) => string
    | RenderBuilder<Elem, Deps>
    | void

    Function signature for rendering reactive content.

    Type Parameters

    • Elem extends HTMLElement

      The type of HTML element being rendered

    • Deps extends Record<string, Store<any>>

      The type of the dependencies object

    Type declaration

      • (
            props: UnwrapStore<Deps>,
            opts: {
                b: RenderBuilder<Elem, Deps>;
                elt: Elem;
                event?: StoreEventFromObject<Deps> & { triggeredBy: string };
                first: boolean;
            },
        ): string
        | RenderBuilder<Elem, Deps>
        | void

      • Parameters

        • props: UnwrapStore<Deps>

          The unwrapped values from the store dependencies

        • opts: {
              b: RenderBuilder<Elem, Deps>;
              elt: Elem;
              event?: StoreEventFromObject<Deps> & { triggeredBy: string };
              first: boolean;
          }

          Additional options and utilities for rendering:

          • event: The event that triggered this render (if applicable)
          • b: A builder instance for fluent element modification
          • elt: Reference to the element being rendered
          • first: Boolean flag indicating whether this is the first render (true) or a re-render (false)

        Returns string | RenderBuilder<Elem, Deps> | void

        A string, builder instance, or void

    // Using the first parameter to conditionally render initial state
    const [element] = cf.nu("div")
      .deps({ count: counterStore })
      .render(({ count }, { b, first }) => {
        // Do one-time setup on first render
        if (first) {
          b.attr("data-initialized", "true");
          b.style("transition", "all 0.3s ease");
        }
        
        return b.content(`Count is: ${count}`);
      })
      .done();

    Settings

    Member Visibility