nukejs 0.0.26 → 0.0.27

package/dist/build-common.js

@@ -495,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 = (type as any).__nukeClientId ?? 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);
@@ -557,10 +613,10 @@ async function renderNode(node: any, hydrated: Set<string>): Promise<string> {
       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] ?? '';
       }

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

@@ -90,9 +90,9 @@ async function renderFunctionComponent(type, props, ctx) {
       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>`;
@@ -105,51 +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 (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.26",
+  "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",