nukejs 0.0.29 → 0.0.31

package/dist/builder.js

@@ -41,6 +41,7 @@ function processDist(dir) {
 }
 const PUBLIC_STEMS = /* @__PURE__ */ new Set([
   "index",
+  "server",
   "html-store",
   // exported types (TitleValue, LinkTag, MetaTag, …) live here
   "use-html",

package/dist/render-component.js

@@ -0,0 +1,23 @@
+import { createElement } from "react";
+import { renderDocument } from "./render-document.js";
+async function renderComponent(Component, props = {}, options = {}) {
+  const layouts = options.layouts ?? [];
+  let element = createElement(Component, props);
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    element = createElement(layouts[i], { children: element });
+  }
+  return renderDocument({
+    element,
+    // No clientRegistry / resolveComponentCache — pure SSR, see module doc.
+    url: options.url ?? "/",
+    params: options.params,
+    query: options.query,
+    headers: options.headers,
+    isDev: options.isDev ?? process.env.ENVIRONMENT !== "production",
+    skipClientSSR: false,
+    defaultTitle: options.title ?? "NukeJS"
+  });
+}
+export {
+  renderComponent
+};

package/dist/render-document.js

@@ -0,0 +1,165 @@
+import { renderElementToHtml } from "./renderer.js";
+import { runWithRequestStore, normaliseHeaders, sanitiseHeaders } from "./request-store.js";
+import { runWithCacheStore } from "./cache-store.js";
+import {
+  runWithHtmlStore,
+  resolveTitle
+} from "./html-store.js";
+import { getDebugLevel } from "./logger.js";
+function toClientDebugLevel(level) {
+  if (level === true) return "verbose";
+  if (level === "info") return "info";
+  if (level === "error") return "error";
+  return "silent";
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&").replace(/"/g, """);
+}
+function renderAttrs(attrs) {
+  return Object.entries(attrs).filter(([, v]) => v !== void 0 && v !== false).map(([k, v]) => v === true ? k : `${k}="${escapeAttr(String(v))}"`).join(" ");
+}
+function openTag(tag, attrs) {
+  const str = renderAttrs(attrs);
+  return str ? `<${tag} ${str}>` : `<${tag}>`;
+}
+function metaKey(k) {
+  return k === "httpEquiv" ? "http-equiv" : k;
+}
+function linkKey(k) {
+  if (k === "hrefLang") return "hreflang";
+  if (k === "crossOrigin") return "crossorigin";
+  return k;
+}
+function renderMetaTag(tag) {
+  const attrs = {};
+  for (const [k, v] of Object.entries(tag)) if (v !== void 0) attrs[metaKey(k)] = v;
+  return `  <meta ${renderAttrs(attrs)} />`;
+}
+function renderLinkTag(tag) {
+  const attrs = {};
+  for (const [k, v] of Object.entries(tag)) if (v !== void 0) attrs[linkKey(k)] = v;
+  return `  <link ${renderAttrs(attrs)} />`;
+}
+function renderScriptTag(tag) {
+  const attrs = {
+    src: tag.src,
+    type: tag.type,
+    crossorigin: tag.crossOrigin,
+    integrity: tag.integrity,
+    defer: tag.defer,
+    async: tag.async,
+    nomodule: tag.noModule
+  };
+  const attrStr = renderAttrs(attrs);
+  const open = attrStr ? `<script ${attrStr}>` : "<script>";
+  return `  ${open}${tag.src ? "" : tag.content ?? ""}</script>`;
+}
+function renderStyleTag(tag) {
+  const media = tag.media ? ` media="${escapeAttr(tag.media)}"` : "";
+  return `  <style${media}>${tag.content ?? ""}</style>`;
+}
+function renderManagedHeadTags(store) {
+  const headScripts = store.script.filter((s) => (s.position ?? "head") === "head");
+  const tags = [
+    ...store.meta.map(renderMetaTag),
+    ...store.link.map(renderLinkTag),
+    ...store.style.map(renderStyleTag),
+    ...headScripts.map(renderScriptTag)
+  ];
+  if (tags.length === 0) return [];
+  return ["  <!--n-head-->", ...tags, "  <!--/n-head-->"];
+}
+function renderManagedBodyScripts(store) {
+  const bodyScripts = store.script.filter((s) => s.position === "body");
+  if (bodyScripts.length === 0) return [];
+  return ["  <!--n-body-scripts-->", ...bodyScripts.map(renderScriptTag), "  <!--/n-body-scripts-->"];
+}
+async function renderDocument(options) {
+  const {
+    element,
+    clientRegistry,
+    resolveComponentCache,
+    url,
+    params = {},
+    query = {},
+    headers = {},
+    isDev = false,
+    skipClientSSR = false,
+    defaultTitle = "NukeJS"
+  } = options;
+  const cleanUrl = url.split("?")[0];
+  const normHeaders = normaliseHeaders(headers);
+  const safeHeaders = sanitiseHeaders(headers);
+  const registry = clientRegistry ?? /* @__PURE__ */ new Map();
+  const ctx = {
+    registry,
+    hydrated: /* @__PURE__ */ new Set(),
+    skipClientSSR,
+    getComponentCache: resolveComponentCache
+  };
+  let appHtml = "";
+  const store = await runWithRequestStore(
+    {
+      url,
+      pathname: cleanUrl,
+      params,
+      query,
+      headers: normHeaders
+    },
+    () => runWithCacheStore(() => runWithHtmlStore(async () => {
+      appHtml = await renderElementToHtml(element, ctx);
+    }))
+  );
+  const pageTitle = resolveTitle(store.titleOps, defaultTitle);
+  const headLines = [
+    '  <meta charset="utf-8" />',
+    '  <meta name="viewport" content="width=device-width, initial-scale=1" />',
+    `  <title>${escapeAttr(pageTitle)}</title>`,
+    ...renderManagedHeadTags(store)
+  ];
+  const runtimeData = JSON.stringify({
+    hydrateIds: [...ctx.hydrated],
+    allIds: [...registry.keys()],
+    url,
+    params,
+    query,
+    headers: safeHeaders,
+    debug: toClientDebugLevel(getDebugLevel())
+  }).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+  const bodyScriptLines = renderManagedBodyScripts(store);
+  const bodyScriptsHtml = bodyScriptLines.length > 0 ? "\n" + bodyScriptLines.join("\n") + "\n" : "";
+  return `<!DOCTYPE html>
+${openTag("html", store.htmlAttrs)}
+<head>
+${headLines.join("\n")}
+</head>
+${openTag("body", store.bodyAttrs)}
+  <div id="app">${appHtml}</div>
+
+  <script id="__n_data" type="application/json">${runtimeData}</script>
+
+  <script type="importmap">
+{
+  "imports": {
+    "react":             "/__react.js",
+    "react-dom/client":  "/__react.js",
+    "react/jsx-runtime": "/__react.js",
+    "nukejs":            "/__n.js"
+  }
+}
+  </script>
+
+  <script type="module">
+    await import('react');
+    const { initRuntime } = await import('nukejs');
+    const data = JSON.parse(document.getElementById('__n_data').textContent);
+    initRuntime(data);
+  </script>
+
+  ${isDev ? '<script type="module" src="/__hmr.js"></script>' : ""}
+${bodyScriptsHtml}</body>
+</html>`;
+}
+export {
+  renderDocument
+};

package/dist/renderer.js

@@ -1,8 +1,6 @@
-import path from "path";
 import { createElement, Fragment } from "react";
 import { renderToString } from "react-dom/server";
 import { log } from "./logger.js";
-import { getComponentCache } from "./component-analyzer.js";
 import { escapeHtml } from "./utils.js";
 function isWrapperAttr(key) {
   return key === "className" || key === "style" || key === "id" || key.startsWith("data-") || key.startsWith("aria-");
@@ -77,7 +75,7 @@ async function renderHtmlElement(type, props, ctx) {
   return `<${type}${attrStr}>${childrenHtml}</${type}>`;
 }
 async function renderFunctionComponent(type, props, ctx) {
-  const componentCache = getComponentCache();
+  const componentCache = ctx.getComponentCache ? ctx.getComponentCache() : /* @__PURE__ */ new Map();
   for (const [id, filePath] of ctx.registry.entries()) {
     const info = componentCache.get(filePath);
     if (!info?.isClientComponent) continue;
@@ -91,7 +89,7 @@ async function renderFunctionComponent(type, props, ctx) {
       const { wrapperAttrs, componentProps } = splitWrapperAttrs(props);
       const wrapperAttrStr = buildWrapperAttrString(wrapperAttrs);
       const { real: hydrationSafeProps, json: serializedProps } = await prepareProps(componentProps, ctx);
-      log.verbose(`Client component rendered for hydration: ${id} (${path.basename(filePath)})`);
+      log.verbose(`Client component rendered for hydration: ${id} (${filePath.split(/[\\/]/).pop()})`);
       const html = ctx.skipClientSSR ? "" : renderToString(createElement(type, hydrationSafeProps));
       return `<span data-hydrate-id="${id}"${wrapperAttrStr} data-hydrate-props="${escapeHtml(
         JSON.stringify(serializedProps)
@@ -148,7 +146,7 @@ async function prepareElement(element, ctx) {
     return { real: createElement(type, p.real), json: { __re: "html", tag: type, props: p.json } };
   }
   if (typeof type === "function") {
-    const componentCache = getComponentCache();
+    const componentCache = ctx.getComponentCache ? ctx.getComponentCache() : /* @__PURE__ */ new Map();
     for (const [id, filePath] of ctx.registry.entries()) {
       const info = componentCache.get(filePath);
       if (!info?.isClientComponent) continue;

package/dist/server.d.ts

@@ -0,0 +1,13 @@
+/**
+ * server.ts — server-only public API.
+ *
+ * Kept separate from index.ts on purpose: index.ts is the entry point the
+ * client component bundler (bundler.ts, platform: 'browser') resolves
+ * whenever a "use client" file imports from 'nukejs'. renderComponent()
+ * pulls in tsx/esm/api and, transitively, ssr.ts's Node built-ins (fs,
+ * node:worker_threads, …) — none of which esbuild can (or should) resolve
+ * for a browser bundle. Anything server-only belongs here, under
+ * 'nukejs/server', not in the shared index.
+ */
+export { renderComponent } from './render-component';
+export type { RenderComponentOptions } from './render-component';

package/dist/server.js

@@ -0,0 +1,4 @@
+import { renderComponent } from "./render-component.js";
+export {
+  renderComponent
+};

package/dist/ssr.js

@@ -3,16 +3,10 @@ import fs from "fs";
 import { createElement } from "react";
 import { pathToFileURL } from "url";
 import { tsImport } from "tsx/esm/api";
-import { log, getDebugLevel } from "./logger.js";
+import { log } from "./logger.js";
 import { matchRoute, findLayoutsForRoute } from "./router.js";
-import { findClientComponentsInTree } from "./component-analyzer.js";
-import { renderElementToHtml } from "./renderer.js";
-import { runWithRequestStore, normaliseHeaders, sanitiseHeaders } from "./request-store.js";
-import { runWithCacheStore } from "./cache-store.js";
-import {
-  runWithHtmlStore,
-  resolveTitle
-} from "./html-store.js";
+import { findClientComponentsInTree, getComponentCache } from "./component-analyzer.js";
+import { renderDocument } from "./render-document.js";
 async function wrapWithLayouts(pageElement, layoutPaths) {
   let element = pageElement;
   for (let i = layoutPaths.length - 1; i >= 0; i--) {
@@ -24,76 +18,7 @@ async function wrapWithLayouts(pageElement, layoutPaths) {
   }
   return element;
 }
-function toClientDebugLevel(level) {
-  if (level === true) return "verbose";
-  if (level === "info") return "info";
-  if (level === "error") return "error";
-  return "silent";
-}
-function escapeAttr(str) {
-  return str.replace(/&/g, "&").replace(/"/g, """);
-}
-function renderAttrs(attrs) {
-  return Object.entries(attrs).filter(([, v]) => v !== void 0 && v !== false).map(([k, v]) => v === true ? k : `${k}="${escapeAttr(String(v))}"`).join(" ");
-}
-function openTag(tag, attrs) {
-  const str = renderAttrs(attrs);
-  return str ? `<${tag} ${str}>` : `<${tag}>`;
-}
-function metaKey(k) {
-  return k === "httpEquiv" ? "http-equiv" : k;
-}
-function linkKey(k) {
-  if (k === "hrefLang") return "hreflang";
-  if (k === "crossOrigin") return "crossorigin";
-  return k;
-}
-function renderMetaTag(tag) {
-  const attrs = {};
-  for (const [k, v] of Object.entries(tag)) if (v !== void 0) attrs[metaKey(k)] = v;
-  return `  <meta ${renderAttrs(attrs)} />`;
-}
-function renderLinkTag(tag) {
-  const attrs = {};
-  for (const [k, v] of Object.entries(tag)) if (v !== void 0) attrs[linkKey(k)] = v;
-  return `  <link ${renderAttrs(attrs)} />`;
-}
-function renderScriptTag(tag) {
-  const attrs = {
-    src: tag.src,
-    type: tag.type,
-    crossorigin: tag.crossOrigin,
-    integrity: tag.integrity,
-    defer: tag.defer,
-    async: tag.async,
-    nomodule: tag.noModule
-  };
-  const attrStr = renderAttrs(attrs);
-  const open = attrStr ? `<script ${attrStr}>` : "<script>";
-  return `  ${open}${tag.src ? "" : tag.content ?? ""}</script>`;
-}
-function renderStyleTag(tag) {
-  const media = tag.media ? ` media="${escapeAttr(tag.media)}"` : "";
-  return `  <style${media}>${tag.content ?? ""}</style>`;
-}
-function renderManagedHeadTags(store) {
-  const headScripts = store.script.filter((s) => (s.position ?? "head") === "head");
-  const tags = [
-    ...store.meta.map(renderMetaTag),
-    ...store.link.map(renderLinkTag),
-    ...store.style.map(renderStyleTag),
-    ...headScripts.map(renderScriptTag)
-  ];
-  if (tags.length === 0) return [];
-  return ["  <!--n-head-->", ...tags, "  <!--/n-head-->"];
-}
-function renderManagedBodyScripts(store) {
-  const bodyScripts = store.script.filter((s) => s.position === "body");
-  if (bodyScripts.length === 0) return [];
-  return ["  <!--n-body-scripts-->", ...bodyScripts.map(renderScriptTag), "  <!--/n-body-scripts-->"];
-}
 async function renderFile(filePath, params, url, pagesDir, isDev, res, req, statusCode, skipClientSSR) {
-  const cleanUrl = url.split("?")[0];
   const searchParams = new URL(url, "http://localhost").searchParams;
   const queryParams = {};
   searchParams.forEach((_, k) => {
@@ -103,9 +28,6 @@ async function renderFile(filePath, params, url, pagesDir, isDev, res, req, stat
     }
   });
   const mergedParams = { ...queryParams, ...params };
-  const rawHeaders = req?.headers ?? {};
-  const normHeaders = normaliseHeaders(rawHeaders);
-  const safeHeaders = sanitiseHeaders(rawHeaders);
   const layoutPaths = findLayoutsForRoute(filePath, pagesDir);
   const { default: PageComponent } = await tsImport(
     pathToFileURL(filePath).href,
@@ -115,75 +37,22 @@ async function renderFile(filePath, params, url, pagesDir, isDev, res, req, stat
     createElement(PageComponent, mergedParams),
     layoutPaths
   );
-  const registry = /* @__PURE__ */ new Map();
-  for (const [id, p] of findClientComponentsInTree(filePath, pagesDir))
-    registry.set(id, p);
-  for (const layoutPath of layoutPaths)
-    for (const [id, p] of findClientComponentsInTree(layoutPath, pagesDir))
-      registry.set(id, p);
-  const ctx = { registry, hydrated: /* @__PURE__ */ new Set(), skipClientSSR };
-  let appHtml = "";
-  const store = await runWithRequestStore(
-    {
-      url,
-      pathname: cleanUrl,
-      params,
-      query: queryParams,
-      headers: normHeaders
-    },
-    () => runWithCacheStore(() => runWithHtmlStore(async () => {
-      appHtml = await renderElementToHtml(wrappedElement, ctx);
-    }))
-  );
-  const pageTitle = resolveTitle(store.titleOps, "NukeJS");
-  const headLines = [
-    '  <meta charset="utf-8" />',
-    '  <meta name="viewport" content="width=device-width, initial-scale=1" />',
-    `  <title>${escapeAttr(pageTitle)}</title>`,
-    ...renderManagedHeadTags(store)
-  ];
-  const runtimeData = JSON.stringify({
-    hydrateIds: [...ctx.hydrated],
-    allIds: [...registry.keys()],
+  const clientRegistry = /* @__PURE__ */ new Map();
+  for (const entryFile of [filePath, ...layoutPaths])
+    for (const [id, p] of findClientComponentsInTree(entryFile, pagesDir))
+      clientRegistry.set(id, p);
+  const html = await renderDocument({
+    element: wrappedElement,
+    clientRegistry,
+    resolveComponentCache: getComponentCache,
     url,
     params,
     query: queryParams,
-    headers: safeHeaders,
-    debug: toClientDebugLevel(getDebugLevel())
-  }).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
-  const bodyScriptLines = renderManagedBodyScripts(store);
-  const bodyScriptsHtml = bodyScriptLines.length > 0 ? "\n" + bodyScriptLines.join("\n") + "\n" : "";
-  const html = `<!DOCTYPE html>
-${openTag("html", store.htmlAttrs)}
-<head>
-${headLines.join("\n")}
-</head>
-${openTag("body", store.bodyAttrs)}
-  <div id="app">${appHtml}</div>
-
-  <script id="__n_data" type="application/json">${runtimeData}</script>
-
-  <script type="importmap">
-{
-  "imports": {
-    "react":             "/__react.js",
-    "react-dom/client":  "/__react.js",
-    "react/jsx-runtime": "/__react.js",
-    "nukejs":            "/__n.js"
-  }
-}
-  </script>
-
-  <script type="module">
-    await import('react');
-    const { initRuntime } = await import('nukejs');
-    const data = JSON.parse(document.getElementById('__n_data').textContent);
-    initRuntime(data);
-  </script>
-
-  ${isDev ? '<script type="module" src="/__hmr.js"></script>' : ""}
-${bodyScriptsHtml}</body>
-</html>`;
+    headers: req?.headers ?? {},
+    isDev,
+    skipClientSSR,
+    defaultTitle: "NukeJS"
+  });
   res.statusCode = statusCode;
   res.setHeader("Content-Type", "text/html");
   res.end(html);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "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",
@@ -8,6 +8,10 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
     }
   },
   "bin": {