@wular/pnext 0.0.7 → 0.0.9

package/src/render/static-slots.ts

@@ -1,8 +1,9 @@
 import { h, type VNode } from 'preact'
 import { isElementLike } from '../utils/serialize'
+import { ISLAND_STATIC_SLOT_ATTRIBUTE, ISLAND_STATIC_SLOT_MARKER } from './static-slots-revive'
 
-export const ISLAND_STATIC_SLOT_ATTRIBUTE = 'data-pnext-static-slot'
-export const ISLAND_STATIC_SLOT_MARKER = '$$pnext_slot'
+// The client half lives in ./static-slots-revive (preact-free); re-exported so importers keep one entry point.
+export * from './static-slots-revive'
 
 type Props = Record<string, unknown>
 
@@ -52,55 +53,3 @@ function mapSlots(
   if (Array.isArray(value)) return mapped.map(([, item]) => item)
   return Object.fromEntries(mapped)
 }
-
-/** Cheap gate on the raw props attribute so islands with no element props skip the revive walk. */
-export function hasIslandStaticSlots(raw: string) {
-  return raw.includes(ISLAND_STATIC_SLOT_MARKER)
-}
-
-/**
- * Client mount: swap each `$$pnext_slot` marker for a `pnext-static-slot` host holding the matching
- * server-rendered DOM, converted to vnodes by the entry's DOM walker (so nested islands inside the
- * adopted subtree become real island vnodes and hydrate on their own). The content is static server
- * markup - it never re-renders, same as element children.
- */
-export async function reviveIslandStaticSlots(
-  props: Props,
-  root: ParentNode,
-  toChildren: (node: ParentNode) => unknown,
-): Promise<Props> {
-  return (await reviveSlots(props, root, toChildren, new Set())) as Props
-}
-
-async function reviveSlots(
-  value: unknown,
-  root: ParentNode,
-  toChildren: (node: ParentNode) => unknown,
-  seen: Set<object>,
-): Promise<unknown> {
-  if (value === null || typeof value !== 'object' || seen.has(value)) return value
-  const marker = (value as Props)[ISLAND_STATIC_SLOT_MARKER]
-  if (typeof marker === 'string') {
-    const node = root.querySelector(`[${ISLAND_STATIC_SLOT_ATTRIBUTE}="${cssEscape(marker)}"]`)
-    // No server markup for this slot (the island never rendered the prop, or it was skipped for
-    // SSR): nothing to adopt, so the prop arrives null rather than as an empty host.
-    if (!node) return null
-    return h(
-      'pnext-static-slot',
-      { [ISLAND_STATIC_SLOT_ATTRIBUTE]: marker, style: { display: 'contents' } },
-      (await toChildren(node)) as VNode,
-    )
-  }
-  const proto = Object.getPrototypeOf(value) as object | null
-  if (!Array.isArray(value) && proto !== Object.prototype && proto !== null) return value
-  seen.add(value)
-  const target = value as Props
-  for (const key of Object.keys(target)) {
-    target[key] = await reviveSlots(target[key], root, toChildren, seen)
-  }
-  return value
-}
-
-function cssEscape(value: string) {
-  return value.replace(/["\\]/g, '\\$&')
-}

package/src/utils/serialize.ts

@@ -19,6 +19,12 @@ const SET_MARKER = '$$pnext_set'
 // restoring identity. Only true cycles are encoded this way - a value that merely appears twice in different
 // branches is still expanded, so every acyclic payload is byte-identical to what it was before.
 const REF_MARKER = '$$pnext_ref'
+// Promise-valued island props ride as `{__pnextPromise: resolved}` so the value keeps its PROMISE
+// IDENTITY across the wire - top level (page params) and nested in plain containers (a react-query
+// dehydrated state carries its pending-query promise inside `state.queries[n].promise`). The render
+// half writes the marker (render/slots promiseMarker); both revive halves live here so the
+// preact-free client entry can import them.
+export const PROMISE_MARKER_KEY = '__pnextPromise'
 
 type TypedArray =
   | Int8Array
@@ -197,6 +203,49 @@ function refTarget(root: unknown, node: Record<string, unknown>): unknown {
   return current
 }
 
+/** Cheap gate: an island whose raw props carry no marker skips the revive walk entirely. */
+export function hasPromiseProps(raw: string) {
+  return raw.includes(PROMISE_MARKER_KEY)
+}
+
+/**
+ * Revive every `promiseMarker` in `props` - top level and nested inside plain objects/arrays - into a
+ * PRE-FULFILLED promise (React `use()` protocol: status/value readable synchronously). A bare
+ * `Promise.resolve` would make `use()` suspend during hydration, and a suspended hydration re-render
+ * appends fragment siblings instead of reusing the server DOM.
+ *
+ * Nested containers are rewritten in place (the client just parsed them; the server already
+ * serialized the wire bytes before this runs), the root is not.
+ */
+export function revivePromiseMarkers<T>(props: T): T {
+  return reviveMarkers(props, new Set()) as T
+}
+
+function reviveMarkers(value: unknown, seen: Set<object>): unknown {
+  if (value === null || typeof value !== 'object' || seen.has(value)) return value
+  if (PROMISE_MARKER_KEY in value) {
+    return fulfilledPromise((value as Record<string, unknown>)[PROMISE_MARKER_KEY])
+  }
+  seen.add(value)
+  if (Array.isArray(value)) {
+    for (let index = 0; index < value.length; index++) {
+      value[index] = reviveMarkers(value[index], seen)
+    }
+    return value
+  }
+  if (Object.getPrototypeOf(value) !== Object.prototype) return value
+  const target = value as Record<string, unknown>
+  for (const key of Object.keys(target)) target[key] = reviveMarkers(target[key], seen)
+  return value
+}
+
+function fulfilledPromise(value: unknown) {
+  const promise = Promise.resolve(value) as Promise<unknown> & { status: string; value: unknown }
+  promise.status = 'fulfilled'
+  promise.value = value
+  return promise
+}
+
 /** A preact vnode: `h` sets `constructor` to undefined on every one it makes. */
 export function isElementLike(value: unknown): boolean {
   if (value === null || typeof value !== 'object') return false
@@ -227,6 +276,14 @@ export function assertSerializable(
   if (value instanceof Date || value instanceof URL) {
     throw new Error(`${path} must be a plain JSON value`)
   }
+  // A promise the render half could not await: island props are awaited at the top level and inside
+  // plain objects/arrays/Maps/Sets, so anything left here sits behind a class instance (or is a
+  // server-action argument, where promises are never allowed). Say so instead of "plain object".
+  if (typeof (value as { then?: unknown }).then === 'function') {
+    throw new Error(
+      `${path} is a Promise: a promise prop must be reachable at the top level of the props or nested in plain objects/arrays/Maps/Sets - one held by a class instance cannot be awaited or serialized, and server actions take no promises at all`,
+    )
+  }
   if (typeof value !== 'object') return
   // A value that contains ITSELF is serializable: encodeBinary writes it as a
   // `$$pnext_ref` back-reference (React flight does the same), so stop walking
@@ -241,8 +298,8 @@ export function assertSerializable(
     return
   }
 
-  // The slot walk (render/static-slots) never enters Map/Set, so elements inside them must
-  // still throw rather than ship mangled.
+  // Elements stay illegal inside Map/Set: the slot walk (render/static-slots) does not enter
+  // them, so allowing one would silently ship a JSON-mangled vnode instead of a `$$pnext_slot`.
   if (value instanceof Map) {
     let index = 0
     for (const [key, item] of value.entries()) {