nukejs 0.0.12 → 0.0.14

package/dist/build-common.js

@@ -149,7 +149,7 @@ function collectServerPages(pagesDir) {
   return walkFiles(pagesDir).filter((relPath) => {
     const stem = path.basename(relPath, path.extname(relPath));
     if (stem === "layout" || stem === "_404" || stem === "_500") return false;
-    return isServerComponent(path.join(pagesDir, relPath));
+    return true;
   }).map((relPath) => ({
     ...analyzeFile(relPath, "page"),
     absPath: path.join(pagesDir, relPath)
@@ -426,7 +426,8 @@ function buildWrapperAttrString(attrs: Record<string, any>): string {
     .map(([key, value]) => {
       if (key === 'className') key = 'class';
       if (key === 'style' && typeof value === 'object') {
-        const css = Object.entries(value as Record<string, any>)
+        // Always prepend display:contents so the wrapper span is invisible to layout.
+        const css = 'display:contents;' + Object.entries(value as Record<string, any>)
           .map(([p, val]) => \`\${p.replace(/[A-Z]/g, m => \`-\${m.toLowerCase()}\`)}:\${escapeHtml(String(val))}\`)
           .join(';');
         return \`style="\${css}"\`;
@@ -436,6 +437,8 @@ function buildWrapperAttrString(attrs: Record<string, any>): string {
       return \`\${key}="\${escapeHtml(String(value))}"\`;
     })
     .filter(Boolean);
+  // When no style prop was passed, still emit display:contents.
+  if (!('style' in attrs)) parts.push('style="display:contents"');
   return parts.length ? ' ' + parts.join(' ') : '';
 }
 

package/dist/builder.js

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

package/dist/bundle.js

@@ -10,7 +10,7 @@ function setupLocationChangeMonitor() {
     originalReplaceState(...args);
     dispatch(args[2]);
   };
-  window.addEventListener("popstate", () => dispatch(window.location.pathname));
+  window.addEventListener("popstate", () => dispatch(window.location.pathname + window.location.search));
 }
 function makeLogger(level) {
   return {
@@ -248,7 +248,15 @@ function syncAttrs(live, next) {
     if (!next.hasAttribute(name)) live.removeAttribute(name);
 }
 function setupNavigation(log) {
+  let hmrNavPending = false;
   window.addEventListener("locationchange", async ({ detail: { href, hmr } }) => {
+    if (hmr) {
+      if (hmrNavPending) {
+        log.info("[HMR] Navigation already in flight \u2014 skipping duplicate for", href);
+        return;
+      }
+      hmrNavPending = true;
+    }
     try {
       const fetchUrl = hmr ? href + (href.includes("?") ? "&" : "?") + "__hmr=1" : href;
       const response = await fetch(fetchUrl, { headers: { Accept: "text/html" } });
@@ -279,7 +287,7 @@ function setupNavigation(log) {
       activeRoots.splice(0).forEach((r) => r.unmount());
       const navData = JSON.parse(currDataEl?.textContent ?? "{}");
       log.info("\u{1F504} Route \u2192", href, "\u2014 mounting", navData.hydrateIds?.length ?? 0, "component(s)");
-      const mods = await loadModules(navData.allIds ?? [], log, String(Date.now()));
+      const mods = await loadModules(navData.allIds ?? [], log, hmr ? String(Date.now()) : "");
       await mountNodes(mods, log);
       window.scrollTo(0, 0);
       log.info("\u{1F389} Navigation complete:", href);
@@ -287,6 +295,7 @@ function setupNavigation(log) {
       log.error("Navigation error, falling back to full reload:", err);
       window.location.href = href;
     } finally {
+      if (hmr) hmrNavPending = false;
       clientErrorPending = false;
     }
   });

package/dist/hmr-bundle.js

@@ -1,13 +1,25 @@
 import { log } from "./logger.js";
 function hmr() {
   const es = new EventSource("/__hmr");
+  let reconnecting = false;
   es.onopen = () => {
+    reconnecting = false;
     log.info("[HMR] Connected");
   };
   es.onerror = () => {
+    if (reconnecting) return;
+    reconnecting = true;
     es.close();
     waitForReconnect();
   };
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState !== "visible") return;
+    if (es.readyState === EventSource.OPEN) return;
+    if (reconnecting) return;
+    reconnecting = true;
+    es.close();
+    waitForReconnect(500, 20);
+  });
   es.onmessage = async (event) => {
     try {
       const msg = JSON.parse(event.data);
@@ -28,6 +40,16 @@ function hmr() {
         }
         return;
       }
+      if (msg.type === "layout-reload") {
+        const base = msg.base === "/" ? "" : msg.base;
+        const pathname = window.location.pathname;
+        const isUnder = pathname === (base || "/") || pathname.startsWith(base + "/");
+        if (isUnder) {
+          log.info("[HMR] Layout changed:", msg.base);
+          navigate(pathname + window.location.search);
+        }
+        return;
+      }
       if (msg.type === "replace") {
         log.info("[HMR] Component changed:", msg.component);
         navigate(window.location.pathname + window.location.search);
@@ -38,8 +60,18 @@ function hmr() {
     }
   };
 }
+let _navTimer = null;
+let _navHref = null;
 function navigate(href) {
-  window.dispatchEvent(new CustomEvent("locationchange", { detail: { href, hmr: true } }));
+  _navHref = href;
+  if (_navTimer) clearTimeout(_navTimer);
+  _navTimer = setTimeout(() => {
+    _navTimer = null;
+    if (_navHref !== null) {
+      window.dispatchEvent(new CustomEvent("locationchange", { detail: { href: _navHref, hmr: true } }));
+      _navHref = null;
+    }
+  }, 50);
 }
 function patternMatchesPathname(pattern, pathname) {
   const normPattern = pattern.length > 1 ? pattern.replace(/\/+$/, "") : pattern;

package/dist/hmr.js

@@ -29,6 +29,9 @@ function buildPayload(filename) {
       return { type: "replace", component: stem };
     }
     const url = pageFileToUrl(normalized);
+    if (stem === "layout") {
+      return { type: "layout-reload", base: url };
+    }
     return { type: "reload", url };
   }
   const ext = path.extname(filename).toLowerCase();

package/dist/html-store.d.ts

@@ -0,0 +1,128 @@
+/**
+ * html-store.ts — Per-Request HTML Head Store
+ *
+ * Provides a request-scoped store that server components can write to via
+ * `useHtml()` during SSR.  The accumulated values are flushed into the
+ * rendered HTML document after the component tree is fully rendered.
+ *
+ * Why globalThis?
+ *   Node's module system may import this file multiple times if the page
+ *   module and the nukejs package resolve to different copies (e.g. when
+ *   running from source in dev with tsx).  Using a well-known Symbol on
+ *   globalThis guarantees all copies share the same store instance.
+ *
+ * Request isolation:
+ *   runWithHtmlStore() creates a fresh store before rendering and clears it
+ *   in the `finally` block, so concurrent requests cannot bleed into each other.
+ *
+ * Title resolution:
+ *   Layouts and pages can both call useHtml({ title: … }).  Layouts typically
+ *   pass a template function:
+ *
+ *     useHtml({ title: (prev) => `${prev} | Acme` })
+ *
+ *   Operations are collected in render order (outermost layout first, page
+ *   last) then resolved *in reverse* so the page's string value is the base
+ *   and layout template functions wrap outward.
+ */
+/** A page sets a literal string; a layout wraps with a template function. */
+export type TitleValue = string | ((prev: string) => string);
+export interface HtmlAttrs {
+    lang?: string;
+    class?: string;
+    style?: string;
+    dir?: string;
+    [attr: string]: string | undefined;
+}
+export interface BodyAttrs {
+    class?: string;
+    style?: string;
+    [attr: string]: string | undefined;
+}
+export interface MetaTag {
+    name?: string;
+    property?: string;
+    httpEquiv?: string;
+    charset?: string;
+    content?: string;
+    [attr: string]: string | undefined;
+}
+export interface LinkTag {
+    rel?: string;
+    href?: string;
+    type?: string;
+    media?: string;
+    as?: string;
+    crossOrigin?: string;
+    integrity?: string;
+    hrefLang?: string;
+    sizes?: string;
+    [attr: string]: string | undefined;
+}
+export interface ScriptTag {
+    src?: string;
+    content?: string;
+    type?: string;
+    defer?: boolean;
+    async?: boolean;
+    crossOrigin?: string;
+    integrity?: string;
+    noModule?: boolean;
+    /**
+     * Where to inject the script in the document.
+     *   'head'  (default) — placed inside <head>, inside the <!--n-head--> block.
+     *   'body'            — placed at the very end of <body>, inside the
+     *                       <!--n-body-scripts--> block, just before </body>.
+     */
+    position?: 'head' | 'body';
+}
+export interface StyleTag {
+    content?: string;
+    media?: string;
+}
+export interface HtmlStore {
+    /** Collected in render order; resolved in reverse so the page title wins. */
+    titleOps: TitleValue[];
+    /** Attributes merged onto <html>; last write wins per attribute. */
+    htmlAttrs: HtmlAttrs;
+    /** Attributes merged onto <body>; last write wins per attribute. */
+    bodyAttrs: BodyAttrs;
+    /** Accumulated in render order: layouts first, page last. */
+    meta: MetaTag[];
+    link: LinkTag[];
+    script: ScriptTag[];
+    style: StyleTag[];
+}
+/**
+ * Runs `fn` inside a fresh HTML store and returns the collected values.
+ *
+ * Usage in SSR:
+ * ```ts
+ * const store = await runWithHtmlStore(async () => {
+ *   appHtml = await renderElementToHtml(element, ctx);
+ * });
+ * // store.titleOps, store.meta, etc. are now populated
+ * ```
+ */
+export declare function runWithHtmlStore(fn: () => Promise<void>): Promise<HtmlStore>;
+/**
+ * Returns the current request's store, or `undefined` if called outside of
+ * a `runWithHtmlStore` context (e.g. in the browser or in a test).
+ */
+export declare function getHtmlStore(): HtmlStore | undefined;
+/**
+ * Resolves the final page title from a list of title operations.
+ *
+ * Operations are walked in *reverse* so the page's value is the starting
+ * point and layout template functions wrap it outward:
+ *
+ * ```
+ * ops = [ (p) => `${p} | Acme`, 'About' ]   ← layout pushed first, page last
+ * Walk in reverse:
+ *   i=1: op = 'About'          → title = 'About'
+ *   i=0: op = (p) => …         → title = 'About | Acme'
+ * ```
+ *
+ * @param fallback  Used when ops is empty (e.g. a page that didn't call useHtml).
+ */
+export declare function resolveTitle(ops: TitleValue[], fallback?: string): string;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { useHtml } from './use-html';
-export type { HtmlOptions, TitleValue, HtmlAttrs, BodyAttrs, MetaTag, LinkTag, ScriptTag, StyleTag, } from './use-html';
+export type { HtmlOptions } from './use-html';
+export type { TitleValue, HtmlAttrs, BodyAttrs, MetaTag, LinkTag, ScriptTag, StyleTag, } from './html-store';
 export { default as useRouter } from './use-router';
 export { useRequest } from './use-request';
 export type { RequestContext } from './use-request';
-export { normaliseHeaders, sanitiseHeaders } from './request-store';
+export { normaliseHeaders, sanitiseHeaders, getRequestStore } from './request-store';
 export { default as Link } from './Link';
 export { setupLocationChangeMonitor, initRuntime } from './bundle';
 export type { RuntimeData } from './bundle';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useHtml } from "./use-html.js";
 import { default as default2 } from "./use-router.js";
 import { useRequest } from "./use-request.js";
-import { normaliseHeaders, sanitiseHeaders } from "./request-store.js";
+import { normaliseHeaders, sanitiseHeaders, getRequestStore } from "./request-store.js";
 import { default as default3 } from "./Link.js";
 import { setupLocationChangeMonitor, initRuntime } from "./bundle.js";
 import { escapeHtml } from "./utils.js";
@@ -12,6 +12,7 @@ export {
   c,
   escapeHtml,
   getDebugLevel,
+  getRequestStore,
   initRuntime,
   log,
   normaliseHeaders,

package/dist/renderer.js

@@ -20,7 +20,7 @@ function buildWrapperAttrString(attrs) {
   const parts = Object.entries(attrs).map(([key, value]) => {
     if (key === "className") key = "class";
     if (key === "style" && typeof value === "object") {
-      const css = Object.entries(value).map(([k, v]) => {
+      const css = "display:contents;" + Object.entries(value).map(([k, v]) => {
         const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
         const safeVal = String(v).replace(/[<>"'`\\]/g, "");
         return `${prop}:${safeVal}`;
@@ -31,6 +31,7 @@ function buildWrapperAttrString(attrs) {
     if (value == null) return "";
     return `${key}="${escapeHtml(String(value))}"`;
   }).filter(Boolean);
+  if (!("style" in attrs)) parts.push('style="display:contents"');
   return parts.length ? " " + parts.join(" ") : "";
 }
 async function renderElementToHtml(element, ctx) {

package/dist/request-store.d.ts

@@ -67,13 +67,9 @@ export declare function normaliseHeaders(raw: Record<string, string | string[] |
 export declare function sanitiseHeaders(raw: Record<string, string | string[] | undefined>): Record<string, string>;
 /**
  * Runs `fn` inside the context of the given request, then clears the store.
- *
- * Usage in the SSR pipeline:
- * ```ts
- * const store = await runWithRequestStore(ctx, async () => {
- *   appHtml = await renderElementToHtml(element, renderCtx);
- * });
- * ```
+ * The store is set synchronously before `fn` is called, so any code that
+ * reads getRequestStore() during the synchronous phase of a server component
+ * (before its first `await`) will always see the correct context.
  */
 export declare function runWithRequestStore<T>(ctx: RequestContext, fn: () => Promise<T>): Promise<T>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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",