Function createElement

packages/beth-stack/src/jsx/index.ts:35–119

(
  name: string | Component | typeof Fragment,
  attributes: PropsWithChildren<unknown> | null,
  ...children: Children[]
)

const Fragment: unique symbol = Symbol.for("beth-stack-fragment");

async function createElement(
  name: string | Component | typeof Fragment,
  attributes: PropsWithChildren<unknown> | null,
  ...children: Children[]
): Promise<string> {
  children = deepFlatten(children);

  const hasAnyPromiseChildren = children.reduce(
    (acc, child) => acc || child instanceof Promise,
    false,
  );
  const hasAnyUnresolvedPromiseChildren = children.reduce(
    (acc, child) => acc || Bun.peek.status(child) !== "fulfilled",
    false,
  );

  const insideStreamCall =
    BETH_GLOBAL_RENDER_CACHE.streamController !== undefined;

  if (
    name === Suspense &&
    hasAnyUnresolvedPromiseChildren &&
    insideStreamCall
  ) {
    const id = BETH_GLOBAL_RENDER_CACHE.registerChild(children);

    if (attributes !== null && "fallback" in attributes) {
      attributes.fallback = `
        <div id="B:${id}" data-fallback>
        ${await attributes.fallback}
        </div>
      `;
    }
  } else if (name !== ErrorBoundary) {
    if (hasAnyPromiseChildren) {
      // Converts children to a string if they are promises.
      children = await Promise.all(children);
    }
  }

  // Adds the children to the attributes if it is not present.
  if (attributes === null) {
    attributes = { children };
  }

  // Calls the element creator function if the name is a function
  if (typeof name === "function") {
    // In case the children attributes is not present, add it as a property.
    if (attributes.children === undefined) {
      attributes.children = children;
    }

    return name(attributes);
  }

  if (name === Fragment) {
    return contentsToString(children);
  }