nukejs 0.0.25 → 0.0.27

package/dist/build-cloudflare.js

@@ -12,6 +12,7 @@ import {
   findPageLayouts,
   buildPerPageRegistry,
   makePageAdapterSource,
+  buildClientComponentTagImports,
   buildCombinedBundle,
   copyPublicFiles
 } from "./build-common.js";
@@ -572,6 +573,7 @@ if (serverPages.length > 0 || ["_404.tsx", "_500.tsx"].some((f) => fs.existsSync
         pageImport: JSON.stringify("./" + path.basename(page.absPath)),
         layoutImports,
         clientComponentNames,
+        clientComponentTagImports: buildClientComponentTagImports(registry, adapterDir),
         allClientIds: [...registry.keys()],
         layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
         prerenderedHtml: prerenderedRecord,
@@ -609,6 +611,7 @@ if (serverPages.length > 0 || ["_404.tsx", "_500.tsx"].some((f) => fs.existsSync
         pageImport: JSON.stringify("./" + path.basename(src)),
         layoutImports,
         clientComponentNames,
+        clientComponentTagImports: buildClientComponentTagImports(registry, adapterDir),
         allClientIds: [...registry.keys()],
         layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
         prerenderedHtml: prerenderedRecord,

package/dist/build-common.js

@@ -209,8 +209,8 @@ async function buildPages(pagesDir, staticDir, outPagesDir) {
     const bundleText = await bundlePageHandler({
       absPath: page.absPath,
       pagesDir,
+      registry,
       clientComponentNames,
-      allClientIds: [...registry.keys()],
       layoutPaths,
       prerenderedHtml: prerenderedRecord,
       routeParamNames: page.paramNames,
@@ -292,11 +292,20 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
 }
 `;
 }
+function buildClientComponentTagImports(registry, adapterDir) {
+  return [...registry.entries()].map(([id, absPath], i) => {
+    const rel = path.relative(adapterDir, absPath).replace(/\\/g, "/");
+    const spec = JSON.stringify(rel.startsWith(".") ? rel : "./" + rel);
+    return `import __cc_tag_${i}__ from ${spec};
+if (typeof __cc_tag_${i}__ === 'function') (__cc_tag_${i}__ as any).__nukeClientId = ${JSON.stringify(id)};`;
+  }).join("\n");
+}
 function makePageAdapterSource(opts) {
   const {
     pageImport,
     layoutImports,
     clientComponentNames,
+    clientComponentTagImports,
     allClientIds,
     layoutArrayItems,
     prerenderedHtml,
@@ -309,6 +318,7 @@ import { createElement as __createElement__ } from 'react';
 import { renderToString as __renderToString__ } from 'react-dom/server';
 import * as __page__ from ${pageImport};
 ${layoutImports}
+${clientComponentTagImports}
 
 const CLIENT_COMPONENTS: Record<string, string> = ${JSON.stringify(clientComponentNames)};
 const ALL_CLIENT_IDS: string[] = ${JSON.stringify(allClientIds)};
@@ -485,27 +495,83 @@ function buildWrapperAttrString(attrs: Record<string, any>): string {
   return parts.length ? ' ' + parts.join(' ') : '';
 }
 
-function serializeProps(value: any): any {
-  if (typeof value === 'function') return undefined;   // must come before the object check
-  if (value == null || typeof value !== 'object') return value;
-  if (Array.isArray(value)) return value.map(serializeProps).filter((v: any) => v !== undefined);
-  if ((value as any).$$typeof) {
-    const { type, props: p } = value as any;
-    if (typeof type === 'string') return { __re: 'html', tag: type, props: serializeProps(p) };
-    if (typeof type === 'function') {
-      const cid = CLIENT_COMPONENTS[type.name];
-      if (cid) return { __re: 'client', componentId: cid, props: serializeProps(p) };
-    }
-    return undefined;
-  }
-  const out: any = {};
-  for (const [k, v] of Object.entries(value as Record<string, any>)) {
-    const s = serializeProps(v);
-    if (s !== undefined) out[k] = s;
+function prepareProps(props, hydrated) {
+  if (!props || typeof props !== 'object') return Promise.resolve({ real: props, json: props });
+  const entries = Object.entries(props);
+  return Promise.all(entries.map(([, v]) => prepareValue(v, hydrated))).then((results) => {
+    const real = {};
+    const json = {};
+    entries.forEach(([key], i) => {
+      real[key] = results[i].real;
+      if (results[i].json !== undefined) json[key] = results[i].json;
+    });
+    return { real, json };
+  });
+}
+
+async function prepareValue(value, hydrated) {
+  if (value === null || value === undefined) return { real: value, json: value };
+  if (typeof value === 'function') return { real: value, json: undefined };
+  if (typeof value !== 'object') return { real: value, json: value };
+
+  if (Array.isArray(value)) {
+    const items = await Promise.all(value.map((v) => prepareValue(v, hydrated)));
+    return {
+      real: items.map((i) => i.real),
+      json: items.map((i) => i.json).filter((i) => i !== undefined),
+    };
   }
+
+  if (value.$$typeof) return prepareElement(value, hydrated);
+
+  const out = await prepareProps(value, hydrated);
   return out;
 }
 
+// Resolves a single React element found inside a client component's props.
+// Native elements and fragments recurse into their own props. Client
+// components are left untouched for 'real' (react-dom/server renders them
+// normally within the boundary's own renderToString call below) and wired
+// through as { __re: 'client', componentId, props } for the browser to
+// mount for real. Server components can't run in the browser at all, so
+// they're rendered once with this same file's renderNode() (handles async
+// components and any nested client boundaries inside them) and wrapped in
+// an inert <span style="display:contents"> carrying that HTML \u2014
+// identically on both 'real' and 'json', so the SSR markup and the
+// browser's reconstructed tree have the same shape and hydrateRoot() can
+// reconcile them without a mismatch.
+async function prepareElement(element, hydrated) {
+  const { type, props } = element;
+
+  if (type === Symbol.for('react.fragment')) {
+    const p = await prepareProps(props, hydrated);
+    return { real: __createElement__(Symbol.for('react.fragment'), p.real), json: { __re: 'fragment', props: p.json } };
+  }
+
+  if (typeof type === 'string') {
+    const p = await prepareProps(props, hydrated);
+    return { real: __createElement__(type, p.real), json: { __re: 'html', tag: type, props: p.json } };
+  }
+
+  if (typeof type === 'function') {
+    const cid = type.__nukeClientId ?? CLIENT_COMPONENTS[type.name];
+    if (cid) {
+      const p = await prepareProps(props, hydrated);
+      return { real: element, json: { __re: 'client', componentId: cid, props: p.json } };
+    }
+
+    const html = await renderNode(element, hydrated);
+    const wrapperProps = {
+      style: { display: 'contents' },
+      'data-n-static': true,
+      dangerouslySetInnerHTML: { __html: html },
+    };
+    return { real: __createElement__('span', wrapperProps), json: { __re: 'static', html } };
+  }
+
+  return { real: element, json: undefined };
+}
+
 async function renderNode(node: any, hydrated: Set<string>): Promise<string> {
   if (node == null || typeof node === 'boolean') return '';
   if (typeof node === 'string') return escapeHtml(node);
@@ -542,15 +608,15 @@ async function renderNode(node: any, hydrated: Set<string>): Promise<string> {
   }
 
   if (typeof type === 'function') {
-    const clientId = CLIENT_COMPONENTS[type.name];
+    const clientId = (type as any).__nukeClientId ?? CLIENT_COMPONENTS[type.name];
     if (clientId) {
       hydrated.add(clientId);
       const { wrapperAttrs, componentProps } = splitWrapperAttrs(props);
       const wrapperAttrStr  = buildWrapperAttrString(wrapperAttrs);
-      const serializedProps = serializeProps(componentProps ?? {});
+      const { real: hydrationSafeProps, json: serializedProps } = await prepareProps(componentProps ?? {}, hydrated);
       let ssrHtml: string;
       try {
-        ssrHtml = __renderToString__(__createElement__(type as any, componentProps || {}));
+        ssrHtml = __renderToString__(__createElement__(type as any, hydrationSafeProps || {}));
       } catch {
         ssrHtml = PRERENDERED_HTML[clientId] ?? '';
       }
@@ -715,8 +781,8 @@ async function bundleApiHandler(absPath) {
 async function bundlePageHandler(opts) {
   const {
     absPath,
+    registry,
     clientComponentNames,
-    allClientIds,
     layoutPaths,
     prerenderedHtml,
     routeParamNames,
@@ -733,7 +799,8 @@ async function bundlePageHandler(opts) {
     pageImport: JSON.stringify("./" + path.basename(absPath)),
     layoutImports,
     clientComponentNames,
-    allClientIds,
+    clientComponentTagImports: buildClientComponentTagImports(registry, adapterDir),
+    allClientIds: [...registry.keys()],
     layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
     prerenderedHtml,
     routeParamNames,
@@ -835,8 +902,8 @@ async function buildErrorPages(pagesDir, outPagesDir, prerenderedHtml) {
     const bundleText = await bundlePageHandler({
       absPath: src,
       pagesDir,
+      registry,
       clientComponentNames,
-      allClientIds: [...registry.keys()],
       layoutPaths,
       prerenderedHtml,
       routeParamNames: [],
@@ -922,6 +989,7 @@ function copyPublicFiles(publicDir, destDir) {
 }
 export {
   analyzeFile,
+  buildClientComponentTagImports,
   buildCombinedBundle,
   buildErrorPages,
   buildPages,

package/dist/build-vercel.js

@@ -12,6 +12,7 @@ import {
   findPageLayouts,
   buildPerPageRegistry,
   makePageAdapterSource,
+  buildClientComponentTagImports,
   buildCombinedBundle,
   copyPublicFiles
 } from "./build-common.js";
@@ -294,6 +295,7 @@ if (serverPages.length > 0 || hasErrorPages) {
         pageImport: JSON.stringify("./" + path.basename(page.absPath)),
         layoutImports,
         clientComponentNames,
+        clientComponentTagImports: buildClientComponentTagImports(registry, adapterDir),
         allClientIds: [...registry.keys()],
         layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
         prerenderedHtml: prerenderedRecord,
@@ -328,6 +330,7 @@ if (serverPages.length > 0 || hasErrorPages) {
       pageImport: JSON.stringify("./" + path.basename(src)),
       layoutImports,
       clientComponentNames,
+      clientComponentTagImports: buildClientComponentTagImports(registry, adapterDir),
       allClientIds: [...registry.keys()],
       layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
       prerenderedHtml: prerenderedRecord,

package/dist/bundle.js

@@ -50,6 +50,20 @@ async function reconstructElement(node, mods) {
     const React = await import("react");
     return React.default.createElement(n.tag, await reconstructProps(n.props, mods));
   }
+  if (node.__re === "fragment") {
+    const n = node;
+    const React = await import("react");
+    return React.default.createElement(React.default.Fragment, await reconstructProps(n.props, mods));
+  }
+  if (node.__re === "static") {
+    const n = node;
+    const React = await import("react");
+    return React.default.createElement("span", {
+      style: { display: "contents" },
+      "data-n-static": true,
+      dangerouslySetInnerHTML: { __html: n.html }
+    });
+  }
   return node;
 }
 async function reconstructProps(props, mods) {

package/dist/renderer.js

@@ -81,14 +81,18 @@ async function renderFunctionComponent(type, props, ctx) {
   for (const [id, filePath] of ctx.registry.entries()) {
     const info = componentCache.get(filePath);
     if (!info?.isClientComponent) continue;
-    if (!info.exportedName || type.name !== info.exportedName) continue;
+    if (type.__nukeClientId === id) {
+    } else {
+      if (!info.exportedName || type.name !== info.exportedName) continue;
+      type.__nukeClientId = id;
+    }
     try {
       ctx.hydrated.add(id);
       const { wrapperAttrs, componentProps } = splitWrapperAttrs(props);
       const wrapperAttrStr = buildWrapperAttrString(wrapperAttrs);
-      const serializedProps = serializePropsForHydration(componentProps, ctx.registry);
+      const { real: hydrationSafeProps, json: serializedProps } = await prepareProps(componentProps, ctx);
       log.verbose(`Client component rendered for hydration: ${id} (${path.basename(filePath)})`);
-      const html = ctx.skipClientSSR ? "" : renderToString(createElement(type, componentProps));
+      const html = ctx.skipClientSSR ? "" : renderToString(createElement(type, hydrationSafeProps));
       return `<span data-hydrate-id="${id}"${wrapperAttrStr} data-hydrate-props="${escapeHtml(
         JSON.stringify(serializedProps)
       )}">${html}</span>`;
@@ -101,50 +105,72 @@ async function renderFunctionComponent(type, props, ctx) {
   const resolved = result?.then ? await result : result;
   return renderElementToHtml(resolved, ctx);
 }
-function serializePropsForHydration(props, registry) {
-  if (!props || typeof props !== "object") return props;
-  const out = {};
+async function prepareProps(props, ctx) {
+  if (!props || typeof props !== "object") return { real: props, json: props };
+  const real = {};
+  const json = {};
   for (const [key, value] of Object.entries(props)) {
-    const s = serializeValue(value, registry);
-    if (s !== void 0) out[key] = s;
+    const p = await prepareValue(value, ctx);
+    real[key] = p.real;
+    if (p.json !== void 0) json[key] = p.json;
   }
-  return out;
+  return { real, json };
 }
-function serializeValue(value, registry) {
-  if (value === null || value === void 0) return value;
-  if (typeof value === "function") return void 0;
-  if (typeof value !== "object") return value;
-  if (Array.isArray(value))
-    return value.map((v) => serializeValue(v, registry)).filter((v) => v !== void 0);
-  if (value.$$typeof)
-    return serializeReactElement(value, registry);
-  const out = {};
+async function prepareValue(value, ctx) {
+  if (value === null || value === void 0) return { real: value, json: value };
+  if (typeof value === "function") return { real: value, json: void 0 };
+  if (typeof value !== "object") return { real: value, json: value };
+  if (Array.isArray(value)) {
+    const items = await Promise.all(value.map((v) => prepareValue(v, ctx)));
+    return {
+      real: items.map((i) => i.real),
+      json: items.map((i) => i.json).filter((i) => i !== void 0)
+    };
+  }
+  if (value.$$typeof) return prepareElement(value, ctx);
+  const real = {};
+  const json = {};
   for (const [k, v] of Object.entries(value)) {
-    const s = serializeValue(v, registry);
-    if (s !== void 0) out[k] = s;
+    const p = await prepareValue(v, ctx);
+    real[k] = p.real;
+    if (p.json !== void 0) json[k] = p.json;
   }
-  return out;
+  return { real, json };
 }
-function serializeReactElement(element, registry) {
+async function prepareElement(element, ctx) {
   const { type, props } = element;
+  if (type === Fragment) {
+    const p = await prepareProps(props, ctx);
+    return { real: createElement(Fragment, p.real), json: { __re: "fragment", props: p.json } };
+  }
   if (typeof type === "string") {
-    return { __re: "html", tag: type, props: serializePropsForHydration(props, registry) };
+    const p = await prepareProps(props, ctx);
+    return { real: createElement(type, p.real), json: { __re: "html", tag: type, props: p.json } };
   }
   if (typeof type === "function") {
     const componentCache = getComponentCache();
-    for (const [id, filePath] of registry.entries()) {
+    for (const [id, filePath] of ctx.registry.entries()) {
       const info = componentCache.get(filePath);
       if (!info?.isClientComponent) continue;
-      if (info.exportedName && type.name === info.exportedName) {
+      if (type.__nukeClientId === id || info.exportedName && type.name === info.exportedName) {
+        type.__nukeClientId = id;
+        const p = await prepareProps(props, ctx);
         return {
-          __re: "client",
-          componentId: id,
-          props: serializePropsForHydration(props, registry)
+          real: element,
+          // untouched — React renders it directly within the outer renderToString call
+          json: { __re: "client", componentId: id, props: p.json }
         };
       }
     }
+    const html = await renderElementToHtml(element, ctx);
+    const wrapperProps = {
+      style: { display: "contents" },
+      "data-n-static": true,
+      dangerouslySetInnerHTML: { __html: html }
+    };
+    return { real: createElement("span", wrapperProps), json: { __re: "static", html } };
   }
-  return void 0;
+  return { real: element, json: void 0 };
 }
 export {
   renderElementToHtml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "A minimal, opinionated full-stack React framework on Node.js that server-renders everything and hydrates only interactive parts.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",