JSX Compiler (render-jsx-to-client-jsx.js)
Examine the server-side JSX element walker, asynchronous component resolver, and client reference binders.
Key File Location: ./dinou/core/render-jsx-to-client-jsx.js💡 Overview
In a standard React application, components are executed in the browser. In React 19 Server Components, however, Server Components must execute exclusively on the server, producing a JSON-like representation of transitional elements, while preserving references to Client Components (annotated with "use client") for the browser to hydratize.
The render-jsx-to-client-jsx.js file executes this traversal. It runs Server Component functions, resolves async data promises, and returns clean client transitional elements.
📊 JSX Compiler Flow
The flowchart below traces how React nodes are recursively evaluated:
⚛️ Client References & Hydration
How does the compiler distinguish between Server and Client components?
- Client References: When a file starts with
"use client", the bundler generates a special pointer object instead of importing the code directly. This object contains a $$typeof field set toSymbol.for("react.client.reference"). - Bypassing Execution: When the JSX compiler detects a client reference via
isClientComponent(), it bypasses component execution and returns the transitional element descriptor as-is. This informs the React client runtime where to import and mount the client-side module in the browser. - Recursive Resolving: If the node is a Server Component, the compiler invokes it (e.g.
returnedJsx = await Component(props)) and repeats the compilation process on the returned nodes, resolving nested Server Components.
⚙️ Complete Code Walkthrough
Below is the full code of render-jsx-to-client-jsx.js:
// Function to check if a component is a client component ('use client')
function isClientComponent(type) {
if (!type) {
return false;
}
const CLIENT_REFERENCE = Symbol.for("react.client.reference");
return (
(typeof type === "function" && type.$$typeof === CLIENT_REFERENCE) ||
(typeof type === "object" && type.$$typeof === CLIENT_REFERENCE)
);
}
// 1. Synchronous JSX compiler
function renderJSXToClientJSX(jsx, key = null) {
if (
typeof jsx === "string" ||
typeof jsx === "number" ||
typeof jsx === "boolean" ||
typeof jsx === "function" ||
typeof jsx === "undefined" ||
jsx == null
) {
return jsx;
} else if (Array.isArray(jsx)) {
return jsx.map((child, i) =>
renderJSXToClientJSX(
child,
i + (typeof child?.type === "string" ? "_" + child?.type : "")
)
);
} else if (typeof jsx === "symbol") {
if (jsx === Symbol.for("react.fragment")) {
return {
$$typeof: Symbol.for("react.transitional.element"),
type: Symbol.for("react.fragment"),
props: {},
key: key,
};
}
throw new Error("Unsupported symbol: " + String(jsx));
} else if (typeof jsx === "object") {
if (jsx.$$typeof === Symbol.for("react.transitional.element")) {
if (
jsx.type === Symbol.for("react.fragment") ||
jsx.type === Symbol.for("react.suspense") ||
typeof jsx.type === "string"
) {
return {
...jsx,
props: renderJSXToClientJSX(jsx.props),
key: key ?? jsx.key,
};
} else if (typeof jsx.type === "function") {
const Component = jsx.type;
const props = jsx.props;
if (isClientComponent(Component)) {
return {
...jsx,
$$typeof: Symbol.for("react.transitional.element"),
type: Component,
props: renderJSXToClientJSX(props),
key: key ?? jsx.key,
};
} else {
// Server component: execute and process
const returnedJsx = Component(props);
return renderJSXToClientJSX(returnedJsx, key ?? jsx.key);
}
} else {
throw new Error("Unsupported JSX type");
}
} else if (jsx instanceof Promise) {
return jsx;
} else {
return Object.fromEntries(
Object.entries(jsx).map(([propName, value]) => [
propName,
renderJSXToClientJSX(value),
])
);
}
} else {
throw new Error("Not implemented");
}
}
// 2. Asynchronous JSX compiler (resolving async components)
async function asyncRenderJSXToClientJSX(jsx, key = null) {
if (
typeof jsx === "string" ||
typeof jsx === "number" ||
typeof jsx === "boolean" ||
typeof jsx === "function" ||
typeof jsx === "undefined" ||
jsx === null
) {
return jsx;
} else if (Array.isArray(jsx)) {
return await Promise.all(
jsx.map((child, i) =>
asyncRenderJSXToClientJSX(
child,
i + (typeof child?.type === "string" ? "_" + child?.type : "")
)
)
);
} else if (typeof jsx === "symbol") {
if (jsx === Symbol.for("react.fragment")) {
return {
$$typeof: Symbol.for("react.transitional.element"),
type: Symbol.for("react.fragment"),
props: { key },
};
}
throw new Error("Unsupported symbol: " + String(jsx));
} else if (typeof jsx === "object") {
if (jsx.$$typeof === Symbol.for("react.transitional.element")) {
if (
jsx.type === Symbol.for("react.fragment") ||
jsx.type === Symbol.for("react.suspense") ||
typeof jsx.type === "string"
) {
return {
...jsx,
props: {
...(await asyncRenderJSXToClientJSX(jsx.props, key ?? jsx.key)),
key: key ?? jsx.key,
},
};
} else if (typeof jsx.type === "function") {
const Component = jsx.type;
const props = jsx.props;
if (isClientComponent(Component)) {
return {
...jsx,
$$typeof: Symbol.for("react.transitional.element"),
type: Component,
props: {
...(await asyncRenderJSXToClientJSX(props, key ?? jsx.key)),
key: key ?? jsx.key,
},
};
} else {
// Server component: execute and process
const returnedJsx = await Component(props);
return await asyncRenderJSXToClientJSX(returnedJsx, key ?? jsx.key);
}
} else {
throw new Error("Unsupported JSX type");
}
} else if (jsx instanceof Promise) {
return jsx;
} else {
return Object.fromEntries(
await Promise.all(
Object.entries(jsx).map(async ([propName, value]) => [
propName,
await asyncRenderJSXToClientJSX(value),
])
)
);
}
} else {
throw new Error("Not implemented");
}
}
module.exports = {
renderJSXToClientJSX,
asyncRenderJSXToClientJSX,
};