@wular/pnext 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wular/pnext",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A fast little framework for server-first React apps, fully compatible with Next.js",
   "type": "module",
   "bin": {

package/src/cli/analyze.ts

@@ -9,7 +9,6 @@ import { listFiles } from '../utils/fs'
 import type { BuildManifest, RouteManifestEntry } from '../types'
 
 export interface AnalyzeResult {
-  mode: 'production' | 'development'
   root: string
   compression: AnalyzeCompression
   files: AnalyzeFile[]
@@ -43,6 +42,10 @@ export interface AnalyzeBundleFile {
 }
 
 export interface AnalyzeDynamicBundleFile extends AnalyzeBundleFile {
+  /** Island's client-reference id, as emitted in the entry's island table. */
+  id: string
+  /** Display name: the reference's named export, or its module basename. */
+  component: string
   exportName: string
   load: 'render' | 'visible'
 }
@@ -63,11 +66,10 @@ export async function analyzeProject(
     throw new Error(`No PNext output found at ${config.outPath}. Run pnext build first.`)
   }
 
+  // Dev output is unminified, so its sizes say nothing about what ships; analyze is production-only.
   const target = analyzeTarget(config.outPath)
   if (!target) {
-    throw new Error(
-      `No PNext build or dev output found at ${config.outPath}. Run pnext build or pnext dev first.`,
-    )
+    throw new Error(`No production build found at ${config.outPath}. Run pnext build first.`)
   }
 
   const compression = options.compression ?? 'gzip'
@@ -83,13 +85,9 @@ export async function analyzeProject(
       }
     }),
   )
-  const routeBundles =
-    target.mode === 'production'
-      ? await analyzeRouteBundles(config.outPath, target.root, rows, options.route)
-      : []
+  const routeBundles = await analyzeRouteBundles(config.outPath, target.root, rows, options.route)
 
   return {
-    mode: target.mode,
     root: path.relative(config.root, target.root),
     compression,
     files: rows,
@@ -115,7 +113,9 @@ async function analyzeRouteBundles(
 
   const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as BuildManifest
   const pages = manifest.routes.filter(route => route.kind === 'page')
-  const selected = routeFilter ? filterAnalyzeRoutes(pages, routeFilter) : pages
+  const selected: AnalyzeRouteSelection[] = routeFilter
+    ? filterAnalyzeRoutes(pages, routeFilter)
+    : pages.map(route => ({ route }))
   if (routeFilter && selected.length === 0) {
     throw new Error(
       `No route matches ${routeFilter}. Routes:\n  ${pages
@@ -135,22 +135,29 @@ async function analyzeRouteBundles(
   }
 
   const bundles: AnalyzeRouteBundle[] = []
-  for (const route of selected) {
-    bundles.push(await analyzeRouteBundle(route, sizes, js))
+  for (const { route, pathname } of selected) {
+    bundles.push(await analyzeRouteBundle(route, sizes, js, pathname))
   }
   return bundles
 }
 
+interface AnalyzeRouteSelection {
+  route: RouteManifestEntry
+  /** Concrete pathname the filter matched, for a param route's prerendered HTML. */
+  pathname?: string
+}
+
 // Accepts the route in ':id' or '[id]' template form, or a concrete pathname
-// (e.g. /users/ada) matched through the route patterns.
-function filterAnalyzeRoutes(pages: RouteManifestEntry[], filter: string) {
+// (e.g. /users/ada) matched through the route patterns. A concrete pathname is
+// carried through so the bundle reports that page's prerendered HTML.
+function filterAnalyzeRoutes(pages: RouteManifestEntry[], filter: string): AnalyzeRouteSelection[] {
   const normalized = filter === '/' ? filter : filter.replace(/\/+$/, '')
   const direct = pages.filter(
     route => route.route === normalized || publicRoutePath(route.route) === normalized,
   )
-  if (direct.length > 0) return direct
+  if (direct.length > 0) return direct.map(route => ({ route }))
   const matched = matchRoute(pages, normalized)
-  return matched ? [matched.route] : []
+  return matched ? [{ route: matched.route, pathname: normalized }] : []
 }
 
 function publicRoutePath(route: string) {
@@ -161,14 +168,30 @@ async function analyzeRouteBundle(
   route: RouteManifestEntry,
   sizes: Map<string, AnalyzeFile>,
   js: (path: string) => Promise<string>,
+  pathname?: string,
 ): Promise<AnalyzeRouteBundle> {
   const initial = new Set<string>()
-  addIfExists(initial, sizes, routeHtmlPath(route))
+  addIfExists(initial, sizes, routeHtmlPath(route, pathname))
   addIfExists(initial, sizes, 'assets/global.css')
-  addIfExists(initial, sizes, `assets/${route.id}.css`)
+  // Mirrors the renderer's stylesheet list: compat cssChunking splits a route's
+  // CSS into `<id>-<n>.css` and records them in cssAssets; `<id>.css` is emitted
+  // only when it is unset.
+  for (const asset of route.cssAssets ?? (route.cssImports.length ? [`${route.id}.css`] : []))
+    addIfExists(initial, sizes, `assets/${asset}`)
+  // Every compat page loads this with a blocking <script>. The sibling
+  // `_ssgManifest.js` (router-fetched, never in the document) and the
+  // `polyfills-*.js` chunk (noModule: legacy browsers only) are deliberately
+  // not initial weight for a modern client.
+  addIfExists(initial, sizes, '_next/static/pnext/_buildManifest.js')
 
   if (route.clientEntry) {
     addIfExists(initial, sizes, route.clientEntry)
+    // The build records the entry's chunk closure from the esbuild metafile and
+    // the renderer modulepreloads exactly this set. Chunk folding hoists imports
+    // out of the entry module, so walking its source alone under-reports; the
+    // walk stays as a union for dev-style single-bundle entries, which never
+    // populate clientEntryImports.
+    for (const asset of route.clientEntryImports ?? []) addIfExists(initial, sizes, asset)
     for (const dependency of await staticDependencies(route.clientEntry, sizes, js))
       initial.add(dependency)
   }
@@ -180,17 +203,21 @@ async function analyzeRouteBundle(
 
   if (route.clientEntry && sizes.has(toPosix(route.clientEntry))) {
     const entrySource = await js(route.clientEntry)
-    const imports = dynamicImports(entrySource, route.clientEntry)
-    for (const imported of imports) {
-      const reference = route.clientReferences.find(item => item.exportName === imported.exportName)
+    for (const island of islandImports(entrySource, route.clientEntry)) {
+      const row = sizes.get(island.path)
+      if (!row) continue
+      // Keyed by island id: every island's loader resolves `module.default`, so
+      // matching on the export name collapses them all onto one reference.
+      const reference = route.clientReferences.find(item => item.id === island.id)
       const load: AnalyzeDynamicBundleFile['load'] =
         reference?.dynamic?.load === 'visible' ? 'visible' : 'render'
-      const row = sizes.get(imported.path)
-      if (!row) continue
-      dynamicTargets.add(imported.path)
+      dynamicTargets.add(island.path)
+      const exportName = reference?.exportName ?? 'default'
       const item: AnalyzeDynamicBundleFile = {
-        path: imported.path,
-        exportName: imported.exportName,
+        path: island.path,
+        id: island.id,
+        component: islandComponent(exportName, reference?.file, island.path),
+        exportName,
         load,
         rawBytes: row.rawBytes,
         compressedBytes: row.compressedBytes,
@@ -198,12 +225,22 @@ async function analyzeRouteBundle(
       if (load === 'visible') visibleDynamic.push(item)
       else dynamic.push(item)
 
-      for (const dependency of await staticDependencies(imported.path, sizes, js)) {
+      // An island with its own CSS loads `assets/<referenceId>.css` alongside its
+      // chunk (loadIslandCss); it is deferred weight, so it belongs here rather
+      // than in initial.
+      if (reference?.cssImports?.length) addIfExists(lazyShared, sizes, `assets/${island.id}.css`)
+      for (const dependency of await staticDependencies(island.path, sizes, js)) {
         if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency)
       }
     }
 
-    for (const importedPath of dynamicImportPaths(entrySource, route.clientEntry)) {
+    // Same metafile closure as the renderer's low-priority preloads, unioned
+    // with the entry-source walk for the same reason as the static side above.
+    for (const asset of [
+      ...(route.clientDynamicImports ?? []),
+      ...dynamicImportPaths(entrySource, route.clientEntry),
+    ]) {
+      const importedPath = toPosix(asset)
       if (initial.has(importedPath) || dynamicTargets.has(importedPath)) continue
       if (sizes.has(importedPath)) lazyShared.add(importedPath)
       for (const dependency of await staticDependencies(importedPath, sizes, js)) {
@@ -222,6 +259,12 @@ async function analyzeRouteBundle(
   }
 }
 
+function islandComponent(exportName: string, file: string | undefined, chunkPath: string) {
+  if (exportName !== 'default') return exportName
+  const source = file ?? chunkPath.replace(/-[A-Z0-9]{8}\.js$/, '.js')
+  return path.posix.basename(toPosix(source)).replace(/\.[^.]+$/, '')
+}
+
 async function staticDependencies(
   entry: string,
   sizes: Map<string, AnalyzeFile>,
@@ -244,17 +287,22 @@ async function staticDependencies(
   return dependencies
 }
 
-function dynamicImports(source: string, from: string) {
-  const imports: { path: string; exportName: string }[] = []
+// Entries of the entry module's island table, as emitted by client/entry.ts:
+//   { id: "c-...", options: {...}, load: () => import("./chunk.js").then(m => m.default) }
+// The CSS variant wraps the import in `Promise.all([...])`. Statically-bundled
+// islands carry `Component:` instead of `load:` and are part of the entry's own
+// closure, so they are not matched here.
+function islandImports(source: string, from: string) {
+  const imports: { path: string; id: string }[] = []
   const pattern =
-    /import\("([^"]+)"\)\.then\([A-Za-z_$][\w$]*=>[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)\)/g
+    /\bid\s*:\s*"([^"]+)"\s*,\s*options\s*:\s*\{[^{}]*\}\s*,\s*load\s*:\s*\(\)\s*=>\s*(?:Promise\.all\(\[\s*)?import\(\s*"([^"]+)"\s*\)/g
   let match: RegExpExecArray | null
   while ((match = pattern.exec(source))) {
-    const specifier = match[1]
-    const exportName = match[2]
-    if (!specifier || !exportName) continue
+    const id = match[1]
+    const specifier = match[2]
+    if (!id || !specifier) continue
     const resolved = resolveBuiltImport(from, specifier)
-    if (resolved) imports.push({ path: resolved, exportName })
+    if (resolved) imports.push({ path: resolved, id })
   }
   return imports
 }
@@ -306,18 +354,27 @@ function bundleFiles(paths: string[], sizes: Map<string, AnalyzeFile>) {
     .sort((a, b) => b.compressedBytes - a.compressedBytes)
 }
 
-function routeHtmlPath(route: RouteManifestEntry) {
-  return route.route === '/' ? 'index.html' : `${route.route.replace(/^\/+/, '')}/index.html`
+function routeHtmlPath(route: RouteManifestEntry, pathname?: string) {
+  const target = pathname ?? prerenderedPathname(route) ?? route.route
+  return target === '/' ? 'index.html' : `${target.replace(/^\/+/, '')}/index.html`
+}
+
+// A param route prerenders one file per param set, never `posts/:slug/index.html`.
+// Report the first as the representative page instead of dropping HTML entirely.
+function prerenderedPathname(route: RouteManifestEntry) {
+  const params = route.prerenderedParams?.[0]
+  if (!params) return undefined
+  return route.route.replace(/:([a-zA-Z0-9_]+)\*?/g, (_match, name: string) => {
+    const value = params[name]
+    return Array.isArray(value) ? value.join('/') : (value ?? '')
+  })
 }
 
 function analyzeTarget(outPath: string) {
+  // PPR shells live in `.pnext/ppr`, outside `public`: they are resumed
+  // server-side and never downloaded, so they are not shipped weight.
   const publicPath = path.join(outPath, 'public')
-  if (existsSync(publicPath)) return { mode: 'production' as const, root: publicPath }
-
-  const cachePath = path.join(outPath, 'cache')
-  if (existsSync(cachePath)) return { mode: 'development' as const, root: cachePath }
-
-  return null
+  return existsSync(publicPath) ? { root: publicPath } : null
 }
 
 function compressedSize(bytes: Buffer, compression: AnalyzeCompression) {
@@ -344,9 +401,7 @@ export function printAnalyzeResult(
   result: AnalyzeResult,
   options: { route?: string; files: boolean },
 ) {
-  console.log(
-    `PNext analyze: ${result.mode === 'production' ? 'production build' : 'dev server cache'} at ${dim(result.root)} (${result.compression})`,
-  )
+  console.log(`PNext analyze: production build at ${dim(result.root)} (${result.compression})`)
   printRouteBundles(result)
   // With a route filter, the remaining files are mostly other routes' bundles —
   // listing them as "other" would misread as unowned weight.
@@ -385,11 +440,11 @@ function printDynamicBundleGroup(
   if (files.length === 0) return
   console.log(`\n  ${bold(label)}`)
   const columns = rowColumns(files)
-  const componentWidth = Math.max(...files.map(file => file.exportName.length))
+  const componentWidth = Math.max(...files.map(file => file.component.length))
   const pathWidth = Math.max(...files.map(file => file.path.length))
   for (const file of files) {
     console.log(
-      `    ${file.exportName.padEnd(componentWidth)}  ${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
+      `    ${file.component.padEnd(componentWidth)}  ${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
     )
   }
 }

package/src/client/entry.ts

@@ -91,7 +91,9 @@ function islandContextModulePath() {
 // Wire-marker revival shared with the server encoder (utils/serialize.ts):
 // island props carrying a CYCLE travel as `$$pnext_ref` back-references.
 function staticSlotsModulePath() {
-  return path.join(import.meta.dirname, '../render/static-slots.ts')
+  // The preact-free half: entries import it eagerly, so it must not drag preact into a
+  // visible-dynamic entry's static graph.
+  return path.join(import.meta.dirname, '../render/static-slots-revive.ts')
 }
 
 function serializeModulePath() {
@@ -296,10 +298,12 @@ import { hasIslandStaticSlots as __pnextHasIslandSlots, reviveIslandStaticSlots
 // Element-valued props: the wire carries a \`$$pnext_slot\` id per element and the server rendered it
 // inside a matching \`pnext-static-slot\` host, adopted here exactly like element children. Islands
 // with no element props skip the walk on a substring test of the raw attribute.
-function islandProps(raw, root, toChildren) {
+// \`h\` is threaded in rather than imported by the slot reviver: that would put preact in the static
+// graph of entries (visible-dynamic) that otherwise only lazy-import it.
+function islandProps(raw, root, toChildren, h) {
   const props = parseIslandProps(raw);
   if (!__pnextHasIslandSlots(raw)) return props;
-  return __pnextReviveIslandSlots(props, root, toChildren);
+  return __pnextReviveIslandSlots(props, root, toChildren, h);
 }
 function parseIslandProps(raw) {
   const props = JSON.parse(raw || '{}');${
@@ -978,7 +982,7 @@ async function mountIslandTree(root, island) {
   ]);
 ${facts.suspense !== false ? '  islandBoundary = Suspense;\n' : ''}  const rawProps = root.getAttribute('data-pnext-props') ?? '{}';
   const source = preservedSource(root, render);
-  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node)), await staticChildren(h, source, island.id));
+  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id));
   const wrapped = ${facts.suspense !== false ? 'h(Suspense, { fallback: null }, pnextClientBoundary(h, vnode))' : 'pnextClientBoundary(h, vnode)'};
   if (source !== root) adoptPreserved(render, root, wrapped);
   else mount(hydrate, render, root, wrapped);
@@ -991,7 +995,7 @@ async function mountIslandTree(root, island) {
   const [{ h, hydrate, render }, Component] = await Promise.all([import('preact'), island.load()]);
   const rawProps = root.getAttribute('data-pnext-props') ?? '{}';
   const source = preservedSource(root, render);
-  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node)), await staticChildren(h, source, island.id));
+  const vnode = islandVNode(h, Component, await islandProps(rawProps, source, node => domChildren(h, node), h), await staticChildren(h, source, island.id));
   if (source !== root) adoptPreserved(render, root, vnode);
   else mount(hydrate, render, root, vnode);
 }`
@@ -1077,7 +1081,7 @@ async function domNode(h, node) {
     if (!island) return h(element.localName, domProps(element), await domChildren(h, element));
     const Component = island.Component ?? await island.load();
     const rawProps = element.getAttribute('data-pnext-props') ?? '{}';
-    const vnode = islandVNode(h, Component, await islandProps(rawProps, element, node => domChildren(h, node)), await staticChildren(h, element, island.id));
+    const vnode = islandVNode(h, Component, await islandProps(rawProps, element, node => domChildren(h, node), h), await staticChildren(h, element, island.id));
     return ${nextCompat ? 'islandBoundary ? h(islandBoundary, { fallback: null }, pnextClientBoundary(h, vnode)) : pnextClientBoundary(h, vnode)' : 'vnode'};
   }
 
@@ -1364,7 +1368,7 @@ async function mountIslandTree(root, island) {
     // Preserved across a soft navigation: re-render in place with the incoming
     // document's props/children so component state survives while the routed
     // content under the island updates.
-    const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, incoming, domChildren)', 'await staticChildren(incoming, island.id)', 'root', nextCompat)};
+    const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, incoming, domChildren, h)', 'await staticChildren(incoming, island.id)', 'root', nextCompat)};
     render(${wrapInBoundary('vnode', nextCompat)}, root);
     pnextMountedRoots.add(root);
     return;
@@ -1375,7 +1379,7 @@ async function mountIslandTree(root, island) {
     root.replaceChildren(...incoming.childNodes);
     root.__pnextLive = undefined;
   }
-  const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, root, domChildren)', 'await staticChildren(root, island.id)', 'root', nextCompat)};
+  const vnode = ${islandVNodeExpr('Component', 'await islandProps(rawProps, root, domChildren, h)', 'await staticChildren(root, island.id)', 'root', nextCompat)};
   mount(root, ${wrapInBoundary('vnode', nextCompat)});
 }
 
@@ -1448,7 +1452,7 @@ async function domNode(node) {
         : ''
     }
     const Component = island.Component ?? await island.load();
-    return ${wrapInBoundary(islandVNodeExpr('Component', 'await islandProps(rawProps, element, domChildren)', 'children', 'element', nextCompat), nextCompat)};
+    return ${wrapInBoundary(islandVNodeExpr('Component', 'await islandProps(rawProps, element, domChildren, h)', 'children', 'element', nextCompat), nextCompat)};
   }
 
   if (Page && element.id === 'pnext-page') {

package/src/render/static-slots-revive.ts

@@ -0,0 +1,65 @@
+import type { h, VNode } from 'preact'
+
+// Client half of the static-slot protocol, split out of ./static-slots so it stays PREACT-FREE:
+// entries import it eagerly, and a visible-dynamic entry must not pull preact into its static graph
+// (preact declares no `sideEffects: false`, so even an unused binding keeps the chunk import alive).
+// `createElement` is therefore threaded in from the island mount, where preact is lazily imported.
+
+export const ISLAND_STATIC_SLOT_ATTRIBUTE = 'data-pnext-static-slot'
+export const ISLAND_STATIC_SLOT_MARKER = '$$pnext_slot'
+
+type Props = Record<string, unknown>
+
+/** 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,
+  createElement: typeof h,
+): Promise<Props> {
+  return (await reviveSlots(props, root, toChildren, createElement, new Set())) as Props
+}
+
+async function reviveSlots(
+  value: unknown,
+  root: ParentNode,
+  toChildren: (node: ParentNode) => unknown,
+  createElement: typeof h,
+  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 createElement(
+      '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, createElement, seen)
+  }
+  return value
+}
+
+function cssEscape(value: string) {
+  return value.replace(/["\\]/g, '\\$&')
+}

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, '\\$&')
-}