@pyreon/runtime-server 0.15.0 → 0.18.0

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"ffdc8719-1"}]}],"isRoot":true},"nodeParts":{"ffdc8719-1":{"renderedLength":15632,"gzipLength":5082,"brotliLength":0,"metaUid":"ffdc8719-0"}},"nodeMetas":{"ffdc8719-0":{"id":"/src/index.ts","moduleParts":{"index.js":"ffdc8719-1"},"imported":[{"uid":"ffdc8719-2"},{"uid":"ffdc8719-3"}],"importedBy":[],"isEntry":true},"ffdc8719-2":{"id":"node:async_hooks","moduleParts":{},"imported":[],"importedBy":[{"uid":"ffdc8719-0"}]},"ffdc8719-3":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"ffdc8719-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"2a32a0fd-1"}]}],"isRoot":true},"nodeParts":{"2a32a0fd-1":{"renderedLength":16920,"gzipLength":5559,"brotliLength":0,"metaUid":"2a32a0fd-0"}},"nodeMetas":{"2a32a0fd-0":{"id":"/src/index.ts","moduleParts":{"index.js":"2a32a0fd-1"},"imported":[{"uid":"2a32a0fd-2"},{"uid":"2a32a0fd-3"}],"importedBy":[],"isEntry":true},"2a32a0fd-2":{"id":"node:async_hooks","moduleParts":{},"imported":[],"importedBy":[{"uid":"2a32a0fd-0"}]},"2a32a0fd-3":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"2a32a0fd-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,5 +1,5 @@
 import { AsyncLocalStorage } from "node:async_hooks";
-import { ForSymbol, Fragment, Suspense, cx, makeReactiveProps, normalizeStyleValue, runWithHooks, setContextStackProvider } from "@pyreon/core";
+import { ForSymbol, Fragment, Suspense, captureContextStack, cx, makeReactiveProps, normalizeStyleValue, popContext, runWithHooks, setContextStackProvider } from "@pyreon/core";
 
 //#region src/index.ts
 /**
@@ -116,6 +116,7 @@ async function streamComponentNode(vnode, enqueue) {
 		return;
 	}
 	if (__DEV__) _countSink.__pyreon_count__?.("runtime-server.component");
+	const stackLenBefore = captureContextStack().length;
 	try {
 		const { vnode: output } = runWithHooks(vnode.type, mergeChildrenIntoProps(vnode));
 		const resolved = output instanceof Promise ? await output : output;
@@ -128,6 +129,8 @@ async function streamComponentNode(vnode, enqueue) {
 		const ctx = _streamCtxAls.getStore();
 		if (ctx && ctx.suspenseDepth > 0) throw err;
 		enqueue("<!--pyreon-error-->");
+	} finally {
+		trimContextStack(stackLenBefore);
 	}
 }
 async function streamElementNode(vnode, enqueue) {
@@ -182,11 +185,18 @@ async function streamSuspenseBoundary(vnode, enqueue) {
 	if (__DEV__) _countSink.__pyreon_count__?.("runtime-server.suspense.boundary");
 	const ctx = _streamCtxAls.getStore();
 	const { fallback, children } = vnode.props;
+	/* c8 ignore start */
 	if (!ctx) {
+		const stackLenBefore = captureContextStack().length;
 		const { vnode: output } = runWithHooks(Suspense, vnode.props);
-		if (output !== null) await streamNode(output, enqueue);
+		try {
+			if (output !== null) await streamNode(output, enqueue);
+		} finally {
+			trimContextStack(stackLenBefore);
+		}
 		return;
 	}
+	/* c8 ignore stop */
 	const id = ctx.nextId();
 	const { mainEnqueue } = ctx;
 	if (id === 0) mainEnqueue(SUSPENSE_SWAP_FN);
@@ -250,14 +260,39 @@ async function renderChildren(children) {
 }
 async function renderComponent(vnode) {
 	if (__DEV__) _countSink.__pyreon_count__?.("runtime-server.component");
+	const stackLenBefore = captureContextStack().length;
 	const { vnode: output } = runWithHooks(vnode.type, mergeChildrenIntoProps(vnode));
-	if (output instanceof Promise) {
-		const resolved = await output;
-		if (resolved === null) return "";
-		return renderNode(resolved);
+	let html;
+	try {
+		if (output instanceof Promise) {
+			const resolved = await output;
+			html = resolved === null ? "" : await renderNode(resolved);
+		} else if (output === null) html = "";
+		else html = await renderNode(output);
+	} finally {
+		trimContextStack(stackLenBefore);
+	}
+	return html;
+}
+/**
+* Pop context frames pushed during a component's render. Trims the global
+* context stack back to the snapshot length captured before the component
+* ran. Each iteration calls `popContext` once — symmetric with `provide()`'s
+* `pushContext()` so frames pop in LIFO order even when a single component
+* called `provide()` multiple times.
+*
+* Why not run user unmount hooks here? See `renderComponent` for the full
+* architectural rationale — TL;DR: SSR has no unmount phase, `useHead` uses
+* `onUnmount` to clear head entries that the post-render extraction still
+* needs, etc. The structural fix is to clean up the ONE SSR-visible side
+* effect of `provide()` (its context frame) without firing other hooks.
+*/
+function trimContextStack(targetLen) {
+	let current = captureContextStack().length;
+	while (current > targetLen) {
+		popContext();
+		current--;
 	}
-	if (output === null) return "";
-	return renderNode(output);
 }
 async function renderElement(vnode) {
 	const tag = vnode.type;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-server",
-  "version": "0.15.0",
+  "version": "0.18.0",
   "description": "SSR/SSG renderer for Pyreon — streaming HTML + static generation",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-server#readme",
   "bugs": {
@@ -43,7 +43,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.15.0",
-    "@pyreon/reactivity": "^0.15.0"
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0"
   }
 }

package/src/index.ts

@@ -16,11 +16,13 @@
 import { AsyncLocalStorage } from 'node:async_hooks'
 import type { ClassValue, ComponentFn, ForProps, VNode, VNodeChild } from '@pyreon/core'
 import {
+  captureContextStack,
   cx,
   ForSymbol,
   Fragment,
   makeReactiveProps,
   normalizeStyleValue,
+  popContext,
   runWithHooks,
   Suspense,
   setContextStackProvider,
@@ -187,8 +189,19 @@ async function streamComponentNode(vnode: VNode, enqueue: (s: string) => void):
     return
   }
   if (__DEV__) _countSink.__pyreon_count__?.('runtime-server.component')
+  // Snapshot the context stack BEFORE the component renders so we can pop
+  // any frames pushed via `provide()` after children stream. We do NOT run
+  // user-registered unmount hooks during SSR — that would clear state still
+  // needed by post-render extraction (e.g. `useHead` uses `onUnmount` to
+  // remove its registered tags from the head store; running it during SSR
+  // wipes the entries before `renderWithHead` reads them). See `renderComponent`
+  // for the full architectural rationale.
+  const stackLenBefore = captureContextStack().length
   try {
-    const { vnode: output } = runWithHooks(vnode.type as ComponentFn, mergeChildrenIntoProps(vnode))
+    const { vnode: output } = runWithHooks(
+      vnode.type as ComponentFn,
+      mergeChildrenIntoProps(vnode),
+    )
     const resolved = output instanceof Promise ? await output : output
     if (resolved !== null) await streamNode(resolved, enqueue)
   } catch (err) {
@@ -202,6 +215,8 @@ async function streamComponentNode(vnode: VNode, enqueue: (s: string) => void):
     const ctx = _streamCtxAls.getStore()
     if (ctx && ctx.suspenseDepth > 0) throw err
     enqueue('<!--pyreon-error-->')
+  } finally {
+    trimContextStack(stackLenBefore)
   }
 }
 
@@ -282,12 +297,28 @@ async function streamSuspenseBoundary(vnode: VNode, enqueue: (s: string) => void
   const ctx = _streamCtxAls.getStore()
   const { fallback, children } = vnode.props as { fallback: VNodeChild; children?: VNodeChild }
 
-  // No streaming context (e.g. called from renderToString) — render children inline
+  // Defensive: the streaming pipeline only enters this function via
+  // `_streamCtxAls.run(ctx, ...)` (set up in `renderToStream`), so `ctx`
+  // is always defined when `streamSuspenseBoundary` runs. Kept as a safety
+  // net in case a future entry point bypasses the streaming context — the
+  // block performs the same context-stack hygiene as `renderComponent` /
+  // `streamComponentNode` so a Suspense `provide()` wouldn't leak into
+  // siblings if it ever fires. Excluded from coverage because no public-API
+  // path reaches it; including a unit test would either require exporting
+  // `streamSuspenseBoundary` (leaks an internal) or stubbing the ALS (false
+  // signal).
+  /* c8 ignore start */
   if (!ctx) {
+    const stackLenBefore = captureContextStack().length
     const { vnode: output } = runWithHooks(Suspense as ComponentFn, vnode.props)
-    if (output !== null) await streamNode(output, enqueue)
+    try {
+      if (output !== null) await streamNode(output, enqueue)
+    } finally {
+      trimContextStack(stackLenBefore)
+    }
     return
   }
+  /* c8 ignore stop */
 
   const id = ctx.nextId()
   const { mainEnqueue } = ctx
@@ -408,17 +439,61 @@ async function renderChildren(children: VNodeChild[]): Promise<string> {
 
 async function renderComponent(vnode: VNode & { type: ComponentFn }): Promise<string> {
   if (__DEV__) _countSink.__pyreon_count__?.('runtime-server.component')
+  // Snapshot the context stack length BEFORE the component renders. After
+  // children render, trim back to this length — that pops every frame the
+  // component pushed via `provide(ctx, value)` (which calls `pushContext` +
+  // registers `onUnmount(popContext)`). Without this, every provider during
+  // SSR leaks its frame onto the global stack and subsequent siblings see
+  // the wrong context value (Bug 4 — bokisch.com `<PyreonUI inversed>`
+  // inside `<Intro>` flipped every later section to dark).
+  //
+  // We trim the stack DIRECTLY instead of running the component's unmount
+  // hooks because users register `onUnmount` for things still load-bearing
+  // at post-render time during SSR — `useHead({ title })` uses `onUnmount`
+  // to remove its head entries, and running it here wipes the head store
+  // before `renderWithHead` extracts it. SSR has no real "unmount" phase
+  // (the response ships, the process moves on); user-registered cleanup
+  // is for the CSR lifecycle. `provide()`'s frame cleanup is the only
+  // SSR-visible side effect and we handle it structurally below.
+  const stackLenBefore = captureContextStack().length
   const { vnode: output } = runWithHooks(vnode.type, mergeChildrenIntoProps(vnode))
 
   // Async component function (async function Component()) — await the promise
-  if (output instanceof Promise) {
-    const resolved = await output
-    if (resolved === null) return ''
-    return renderNode(resolved)
+  let html: string
+  try {
+    if (output instanceof Promise) {
+      const resolved = await output
+      html = resolved === null ? '' : await renderNode(resolved)
+    } else if (output === null) {
+      html = ''
+    } else {
+      html = await renderNode(output)
+    }
+  } finally {
+    trimContextStack(stackLenBefore)
   }
+  return html
+}
 
-  if (output === null) return ''
-  return renderNode(output)
+/**
+ * Pop context frames pushed during a component's render. Trims the global
+ * context stack back to the snapshot length captured before the component
+ * ran. Each iteration calls `popContext` once — symmetric with `provide()`'s
+ * `pushContext()` so frames pop in LIFO order even when a single component
+ * called `provide()` multiple times.
+ *
+ * Why not run user unmount hooks here? See `renderComponent` for the full
+ * architectural rationale — TL;DR: SSR has no unmount phase, `useHead` uses
+ * `onUnmount` to clear head entries that the post-render extraction still
+ * needs, etc. The structural fix is to clean up the ONE SSR-visible side
+ * effect of `provide()` (its context frame) without firing other hooks.
+ */
+function trimContextStack(targetLen: number): void {
+  let current = captureContextStack().length
+  while (current > targetLen) {
+    popContext()
+    current--
+  }
 }
 
 async function renderElement(vnode: VNode): Promise<string> {

package/src/tests/ssr.test.ts

@@ -1,5 +1,15 @@
 import type { ComponentFn, VNode } from '@pyreon/core'
-import { createContext, For, Fragment, h, pushContext, Suspense, useContext } from '@pyreon/core'
+import {
+  createContext,
+  For,
+  Fragment,
+  h,
+  onUnmount,
+  provide,
+  pushContext,
+  Suspense,
+  useContext,
+} from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import {
   configureStoreIsolation,
@@ -1106,6 +1116,140 @@ describe('renderToString — For key markers', () => {
 
 // ─── For SSR — key markers in stream ─────────────────────────────────────────
 
+// ─── Bug 4: SSR provide() context cleanup across siblings ───────────────────
+//
+// Regression: pre-fix, `renderComponent` invoked `runWithHooks(...)` to render
+// each component but DESTRUCTURED only the vnode — never invoked the
+// component's unmount hooks. `provide(context, value)` registers
+// `onUnmount(popContext)` to clean up its pushed context frame on unmount.
+// Without unmount-hook invocation during SSR, every `provide()` call left
+// its context frame on the global stack permanently. Subsequent siblings
+// saw the leaked context value instead of the outer provider's value.
+//
+// Real-world manifestation (bokisch.com): a `<PyreonUI inversed>` inside an
+// `<Intro>` section flipped mode to dark and pushed it as context. After
+// Intro rendered, every subsequent section (`<Quote>`, `<Companies>`, etc.)
+// saw the inverted dark mode → all sections rendered in dark even though
+// the page was in light mode → wrong colors everywhere.
+
+describe('SSR — provide() context cleanup across siblings (Bug 4)', () => {
+  test('sibling AFTER a provide() call sees the OUTER context value, not the leak', async () => {
+    const Ctx = createContext('outer')
+
+    // Component that pushes a NEW context value via `provide()`.
+    const Inner: ComponentFn = () => {
+      provide(Ctx, 'inner')
+      return h('span', { 'data-testid': 'inner' }, () => useContext(Ctx))
+    }
+
+    // Sibling rendered AFTER Inner — should see 'outer', not 'inner'.
+    const Sibling: ComponentFn = () => {
+      return h('span', { 'data-testid': 'sibling' }, () => useContext(Ctx))
+    }
+
+    // Outer wrapper: <div><Inner /><Sibling /></div>. Pre-fix, Sibling
+    // sees 'inner' because Inner's provide() was never popped.
+    const App: ComponentFn = () => {
+      return h(Fragment, null, h(Inner, null), h(Sibling, null))
+    }
+
+    const html = await renderToString(h(App, null))
+
+    expect(html).toContain('data-testid="inner">inner<')
+    expect(html).toContain('data-testid="sibling">outer<') // not "inner"
+  })
+
+  test('multiple sequential provide() calls each clean up their own frame', async () => {
+    const Ctx = createContext('default')
+
+    const First: ComponentFn = () => {
+      provide(Ctx, 'first')
+      return h('span', { 'data-testid': 'first' }, () => useContext(Ctx))
+    }
+    const Second: ComponentFn = () => {
+      provide(Ctx, 'second')
+      return h('span', { 'data-testid': 'second' }, () => useContext(Ctx))
+    }
+    const Third: ComponentFn = () => {
+      return h('span', { 'data-testid': 'third' }, () => useContext(Ctx))
+    }
+
+    const html = await renderToString(
+      h(Fragment, null, h(First, null), h(Second, null), h(Third, null)),
+    )
+
+    expect(html).toContain('data-testid="first">first<')
+    expect(html).toContain('data-testid="second">second<')
+    // Third sees 'default' — no leakage from First or Second.
+    expect(html).toContain('data-testid="third">default<')
+  })
+
+  test('nested provide() — child sees parent provide, sibling outside sees outer', async () => {
+    const Ctx = createContext('outer')
+
+    const InnerChild: ComponentFn = () =>
+      h('span', { 'data-testid': 'inner-child' }, () => useContext(Ctx))
+
+    const Provider: ComponentFn = () => {
+      provide(Ctx, 'provider-value')
+      return h('div', null, h(InnerChild, null))
+    }
+
+    const Sibling: ComponentFn = () =>
+      h('span', { 'data-testid': 'sibling' }, () => useContext(Ctx))
+
+    const html = await renderToString(
+      h(Fragment, null, h(Provider, null), h(Sibling, null)),
+    )
+
+    // Inner child sees the provider's value (correct).
+    expect(html).toContain('data-testid="inner-child">provider-value<')
+    // Sibling outside the provider sees outer (must NOT see leaked
+    // provider-value).
+    expect(html).toContain('data-testid="sibling">outer<')
+  })
+
+  // Bug 4 follow-up: the FIRST attempt at the fix (running runUnmountHooks
+  // during SSR) overshot — it fired ALL user-registered onUnmount hooks,
+  // not just `provide()`'s `popContext`. That broke @pyreon/head, where
+  // `useHead({ title })` registers `onUnmount(() => removeFromHeadStore())`
+  // to clean up on CSR unmount; running it during SSR cleared the head
+  // store BEFORE `renderWithHead` extracted it → 38 head tests failed,
+  // every SSR'd page lost its <title>/<meta>/<link> tags.
+  //
+  // Architectural rule: SSR has no real unmount phase (the response
+  // ships, the process moves on). User-registered `onUnmount` hooks are
+  // for the CSR lifecycle. The ONE SSR-visible side effect of `provide()`
+  // is its context frame, and we clean that up structurally (snapshot +
+  // trim the stack) without firing user hooks.
+  test('user-registered onUnmount hooks DO NOT fire during SSR (head store contract)', async () => {
+    // Simulate `useHead({ title })`-style registration: register an entry
+    // in a per-render store, register `onUnmount` to clean it up. Real
+    // `@pyreon/head` does this via a context'd HeadStore; we use a
+    // module-local for the test.
+    const store: { title?: string } = {}
+
+    const TitleRegister: ComponentFn = () => {
+      store.title = 'Hello SSR'
+      onUnmount(() => {
+        delete store.title
+      })
+      return null
+    }
+
+    const App: ComponentFn = () =>
+      h('html', null, h('head', null, h(TitleRegister, null)), h('body', null))
+
+    await renderToString(h(App, null))
+
+    // After SSR completes, the head-style store entry MUST still be
+    // present — `renderWithHead` and similar post-render extractors
+    // need it. If `runUnmountHooks` were called here, `store.title`
+    // would be undefined.
+    expect(store.title).toBe('Hello SSR')
+  })
+})
+
 describe('renderToStream — For key markers', () => {
   test('emits key markers for each item in stream', async () => {
     const items = [