npm - @pylonsync/functions - Versions diffs - 0.3.246 → 0.3.247 - Mend

@pylonsync/functions 0.3.246 → 0.3.247

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/runtime.ts +7 -1
package/src/ssr-client-bundler.ts +39 -3
package/src/ssr-runtime.test.ts +47 -1
package/src/ssr-runtime.ts +44 -5

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/functions",
-  "version": "0.3.246",
+  "version": "0.3.247",
   "description": "TypeScript function runtime for pylon — defines server-side queries, mutations, and actions.",
   "type": "module",
   "main": "src/index.ts",

package/src/runtime.ts CHANGED Viewed

@@ -223,11 +223,17 @@ function dispatch(line: string): void {
         ),
       )
       .catch((err) => {
+        const devMode =
+          process.env.PYLON_DEV_MODE === "1" ||
+          process.env.PYLON_DEV_MODE === "true";
         send({
           type: "error",
           call_id: (msg as unknown as { call_id: string }).call_id,
           code: "SSR_RUNTIME_CRASH",
-          message: err?.message || String(err),
+          // Dev: full stack for the host's error overlay. Prod: message only.
+          message:
+            (devMode && err?.stack ? String(err.stack) : err?.message) ||
+            String(err),
         });
       });
   } else if (msg.type === "bundle_client") {

package/src/ssr-client-bundler.ts CHANGED Viewed

@@ -382,6 +382,27 @@ export function hydrate(component, Page, Layouts) {
   // only need to populate the cache (already done above).
 }
+// Swap the page's SEO/social <head> tags on a client-side navigation.
+// The SSR runtime marks every page-metadata <meta>/<link> with
+// data-pylon-meta; we drop the current set and import the incoming page's
+// set, so description / canonical / og:* / twitter:* / icons track the new
+// route. The layout's charset/viewport and Pylon's injected stylesheet
+// links carry no marker, so they survive untouched (no FOUC). The page
+// component never renders these tags on the client, so React doesn't own
+// them — this manual swap can't fight hydration.
+function syncHeadMeta(doc) {
+  const head = document.head;
+  if (!head) return;
+  const current = head.querySelectorAll("[data-pylon-meta]");
+  for (let i = 0; i < current.length; i++) current[i].remove();
+  const incoming = doc.head
+    ? doc.head.querySelectorAll("[data-pylon-meta]")
+    : [];
+  for (let i = 0; i < incoming.length; i++) {
+    head.appendChild(document.importNode(incoming[i], true));
+  }
+}
 async function navigate(href, opts) {
   const push = !opts || opts.push !== false;
   const url = new URL(href, location.href);
@@ -426,11 +447,19 @@ async function navigate(href, opts) {
     return;
   }
   document.title = doc.title || document.title;
+  syncHeadMeta(doc);
   const tree = buildTree(route.Page, route.Layouts, withClientProps(data));
   activeRoot.render(tree);
-  if (push) {
-    history.pushState({ component: data.component }, "", url.pathname + url.search);
+  const target = url.pathname + url.search;
+  if (opts && opts.replace) {
+    history.replaceState({ component: data.component }, "", target);
+  } else if (push) {
+    history.pushState({ component: data.component }, "", target);
   }
+  // Notify the router hooks (useSearchParams / usePathname) so deep children
+  // re-read location after a Link click or a router.push(). popstate already
+  // covers back/forward, but pushState/replaceState fire no event.
+  window.dispatchEvent(new Event("pylon:navigation"));
   // After a successful nav, scroll to top (Next.js default).
   window.scrollTo(0, 0);
 }
@@ -635,7 +664,14 @@ async function buildTailwind(
   // Mix in the discovered routes so adding/removing pages changes
   // the hash (Tailwind v4 auto-discovers `@source` paths; we still
   // want the cache to bust on layout changes).
-  const stylesName = `styles-${hash.toString(36)}.css`;
+  //
+  // Pad the base36 hash to 8 chars: the runtime's `is_hashed_name`
+  // (frontend.rs) only sends `Cache-Control: immutable` for hashes ≥8
+  // chars (Bun's JS chunk convention). A 32-bit base36 hash is ≤7 chars,
+  // so WITHOUT the pad the content-hashed CSS was served `no-cache` —
+  // browsers + any CDN refetched it on every page load (defeats the cache
+  // and, behind Cloudflare, needlessly wakes an autostopped origin).
+  const stylesName = `styles-${hash.toString(36).padStart(8, "0")}.css`;
   const outPath = path.join(outdir, stylesName);
   // Spawn the CLI. Bun is already running; reuse it as the

package/src/ssr-runtime.test.ts CHANGED Viewed

@@ -4,7 +4,21 @@ import { afterEach, describe, expect, test } from "bun:test";
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { applyAutoIcons, applyAutoSocialImages } from "./ssr-runtime";
+import { applyAutoIcons, applyAutoSocialImages, renderMetadata } from "./ssr-runtime";
+// `react` isn't a dependency of @pylonsync/functions — the SSR runtime
+// imports it dynamically from the host project at render time. For unit
+// tests we hand renderMetadata a fake React that records each created
+// element's shape, which is all renderMetadata touches.
+const FAKE_FRAGMENT = Symbol("Fragment");
+const fakeReact = {
+  Fragment: FAKE_FRAGMENT,
+  createElement: (type: any, props: any, ...children: any[]) => ({
+    type,
+    props: props ?? {},
+    children,
+  }),
+};
 // A minimal PNG: 8-byte signature + an IHDR chunk carrying width/height.
 // `readSocialImageMeta` only reads the first 32 bytes, so a full valid
@@ -180,3 +194,35 @@ describe("icon / apple-icon / favicon file convention", () => {
     expect(applyAutoIcons("app/page", input)).toEqual(input);
   });
 });
+describe("renderMetadata head-tag marking (client-nav sync)", () => {
+  test("every <meta>/<link> carries data-pylon-meta; <title> does not", () => {
+    const frag = renderMetadata(fakeReact, {
+      title: "Hello",
+      description: "A page",
+      canonical: "https://x.test/p",
+      openGraph: { title: "OG", image: "https://x.test/og.png" },
+      twitter: { card: "summary" },
+      icons: { icon: { url: "/icon.png" } },
+    });
+    expect(frag.type).toBe(FAKE_FRAGMENT);
+    const kids: any[] = frag.children;
+    const metaLink = kids.filter((k) => k.type === "meta" || k.type === "link");
+    const titles = kids.filter((k) => k.type === "title");
+    expect(metaLink.length).toBeGreaterThan(0);
+    // The marker is what the client runtime swaps on navigation — without it,
+    // SEO/social tags go stale on client-side nav. Every meta/link must carry
+    // it; <title> must NOT (the client syncs document.title separately).
+    for (const el of metaLink) {
+      expect(el.props["data-pylon-meta"]).toBe("");
+    }
+    expect(titles.length).toBe(1);
+    expect(titles[0].props["data-pylon-meta"]).toBeUndefined();
+    expect(titles[0].children).toEqual(["Hello"]);
+  });
+  test("returns null when there's nothing to emit", () => {
+    expect(renderMetadata(fakeReact, undefined)).toBeNull();
+    expect(renderMetadata(fakeReact, {})).toBeNull();
+  });
+});

package/src/ssr-runtime.ts CHANGED Viewed

@@ -306,9 +306,19 @@ export interface SsrMetadata {
  * host's </head> splice preserves them. React escapes all text/attrs, so
  * there's no manual XSS handling. Returns null when there's nothing to emit.
  */
-function renderMetadata(React: any, m: SsrMetadata | undefined): any {
+export function renderMetadata(React: any, m: SsrMetadata | undefined): any {
   if (!m) return null;
-  const el = React.createElement;
+  // Mark every emitted <meta>/<link> with `data-pylon-meta` so the client
+  // runtime can swap exactly these tags on a client-side navigation — and
+  // leave the layout's charset/viewport and Pylon's injected stylesheet
+  // links untouched. <title> is excluded (the client syncs document.title
+  // directly). The metadata fragment is server-only (the client renders the
+  // page component alone), so React on the client never owns these nodes;
+  // this manual marking is what makes the nav-time swap safe.
+  const el = (type: any, props: any, ...children: any[]) =>
+    type === "meta" || type === "link"
+      ? React.createElement(type, { "data-pylon-meta": "", ...props }, ...children)
+      : React.createElement(type, props, ...children);
   const kids: any[] = [];
   if (m.title != null) kids.push(el("title", { key: "t" }, m.title));
   if (m.description != null) {
@@ -1191,14 +1201,37 @@ export async function handleRenderRoute(
       // hydration: `serverData` (an RPC handle — the client rebuilds its
       // own from `ssrData`) and `response` (a server-only controller — the
       // client gets a no-op). Their resolved data rides along in `ssrData`.
-      const { serverData: _sd, response: _resp, ...serializableProps } = props;
+      //
+      // SECURITY: also strip the request `headers` + `cookies`. They were
+      // passed to the page for SERVER-side reads, but serializing them into
+      // the page HTML exposes the request's `Cookie` (the HttpOnly session
+      // token), `Authorization`, and client IP to any client-side JS —
+      // defeating HttpOnly and handing a same-page XSS an exfil target. The
+      // client gets empty maps (shape preserved so `props.headers`/`.cookies`
+      // aren't `undefined`); a page that must surface a request value to the
+      // browser should pass it explicitly via a prop or `serverData`.
+      const {
+        serverData: _sd,
+        response: _resp,
+        headers: _h,
+        cookies: _c,
+        ...restProps
+      } = props;
+      const serializableProps = { ...restProps, headers: {}, cookies: {} };
       const hydrationPayload = {
         component: msg.component,
         layouts: msg.layouts ?? [],
         props: serializableProps,
         ssrData: ssrValueCache,
       };
-      const json = JSON.stringify(hydrationPayload).replaceAll("<", "\\u003c");
+      // Escape `<` (closes the </script> breakout) AND the U+2028/U+2029 line
+      // separators — valid in JSON but statement terminators in JS, so they'd
+      // break the page if the blob were ever read as executable JS rather than
+      // application/json. Defense-in-depth.
+      const json = JSON.stringify(hydrationPayload)
+        .replaceAll("<", "\\u003c")
+        .replaceAll(" ", "\\u2028")
+        .replaceAll(" ", "\\u2029");
       let tail = `<script id="__PYLON_DATA__" type="application/json">${json}</script>`;
       if (preloadManifestRoute) {
@@ -1299,11 +1332,17 @@ export async function handleRenderRoute(
     ) {
       return;
     }
+    // In dev, send the full stack as the message so the host can paint a
+    // useful error overlay instead of an opaque 500. In prod, send only the
+    // message (the host shows a generic page; the stack stays in logs).
+    const devMode =
+      process.env.PYLON_DEV_MODE === "1" || process.env.PYLON_DEV_MODE === "true";
     send({
       type: "error",
       call_id: msg.call_id,
       code: err?.code ?? "SSR_RENDER_FAILED",
-      message: err?.message ?? String(err),
+      message:
+        devMode && err?.stack ? String(err.stack) : err?.message ?? String(err),
     });
   }
 }