@wular/pnext 0.0.17 → 0.0.19

package/package.json

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

package/src/cli/adapters/vercel-warm.ts

@@ -26,15 +26,16 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { loadConfig, pathToFileHref, type ResolvedConfig } from '../../config'
 import { bootstrapCompat } from '../../compat-bootstrap'
-import { ssrClientReference } from '../../client/reference'
+import { compiledClientReferenceFiles, ssrClientReference } from '../../client/reference'
 import {
   devClientModuleHref,
   devServerModuleHref,
   setEmitCompiledSpecifiersManifest,
 } from '../../runtime/modules'
 import { getCompatModeExtensions } from '../../extensions'
+import { getFontExtensions } from '../../render/hooks'
 import { findConventionFiles, findLayouts } from '../../routing/routes'
-import { registerServerRuntime } from '../../runtime/loader'
+import { registerServerRuntime, serverBundleTargetForRuntime } from '../../runtime/loader'
 import { namedBunBinary } from '../boot/named-bin'
 import type { VerboseLogger } from '../../utils/verbose'
 import type { BuildManifest } from '../../types'
@@ -281,6 +282,7 @@ export async function warmRouteModules(
 ) {
   const clientFiles = new Set<string>()
   const handlers: BuildManifest['routes'] = []
+  const pages: BuildManifest['routes'] = []
   const pageRoutes: string[] = []
 
   for (const route of manifest.routes) {
@@ -288,6 +290,7 @@ export async function warmRouteModules(
       if (!skip.has(route.file)) handlers.push(route)
       continue
     }
+    pages.push(route)
     pageRoutes.push(route.file)
     for (const reference of route.clientReferences) {
       if (ssrClientReference(reference) && existsSync(reference.file)) {
@@ -327,11 +330,93 @@ export async function warmRouteModules(
     // process' lifetime anyway, so a retry could not succeed either).
     report(route.file)
     try {
-      await import(pathToFileHref(route.file))
+      await import(await handlerModuleHref(config, route))
     } catch (error) {
       console.warn(`vercel adapter: importing ${route.file} failed during warmup:`, error)
     }
   }
+
+  // Pages last, one at a time: a module's vendor bundles are written when it is IMPORTED, not when
+  // it compiles, and a bundle this pass misses is one the read-only function cannot create later.
+  await importPageModules(config, pages, skip)
+
+  // Client modules for the same reason, plus the references only the compile saw - a 'use client'
+  // module inside a dependency is reached from a server component, so no route owns it. Vendoring
+  // one late is worse than failing: it is a second copy, whose React context the render never holds.
+  await importClientModules(
+    config,
+    new Set([...clientFiles, ...compiledClientReferenceFiles()]),
+    skip,
+  )
+
+  // Fonts resolve during a render, so a fully dynamic app emits none at build. The imports above ran
+  // the module-scope loader calls that declare them; flush to disk while it is still writable.
+  try {
+    await getFontExtensions().prewarmFontAssets(config, {})
+  } catch (error) {
+    console.warn('vercel adapter: emitting next/font assets failed during warmup:', error)
+  }
+}
+
+/** Import each SSR-eligible client module through its compiled href, the way the render does. */
+async function importClientModules(
+  config: ResolvedConfig,
+  clientFiles: ReadonlySet<string>,
+  skip: ReadonlySet<string>,
+) {
+  if (!getCompatModeExtensions().reactEnabled(config)) return
+  for (const file of clientFiles) {
+    if (skip.has(file)) continue
+    const href = await devClientModuleHref(config, file, 'build')
+    report(file, fileURLToPath(href))
+    try {
+      await import(href)
+    } catch (error) {
+      console.warn(`vercel adapter: importing ${file} failed during warmup:`, error)
+    }
+  }
+}
+
+/**
+ * Where the serve pipeline imports a route handler's module from — mirrors `moduleHrefForRoute` in
+ * cli/serve/pipeline.ts, guard included. Warming through the raw source instead leaves the compiled
+ * artifact unwritten, and the function then tries to compile it on the first request, against a
+ * read-only filesystem.
+ */
+function handlerModuleHref(config: ResolvedConfig, route: BuildManifest['routes'][number]) {
+  return config.compat?.next || config.compat?.react || config.compat?.reactCompiler
+    ? devServerModuleHref(config, route.file, 'build', {
+        conditionTarget: serverBundleTargetForRuntime(route.segmentConfig?.runtime),
+      })
+    : Promise.resolve(pathToFileHref(route.file))
+}
+
+/**
+ * Import every server module the page routes reach, deduped across routes so a shared layout is
+ * evaluated once. Reported with its artifact before the import, exactly like the handler loop: one
+ * that takes the process down is unambiguous and must not run again on the restart.
+ */
+async function importPageModules(
+  config: ResolvedConfig,
+  pages: BuildManifest['routes'],
+  skip: ReadonlySet<string>,
+) {
+  if (!getCompatModeExtensions().reactEnabled(config)) return
+  const imported = new Set<string>()
+  for (const route of pages) {
+    registerServerRuntime(config, route.sourceFiles)
+    for (const file of pageServerFiles(config, [route.file])) {
+      if (skip.has(file) || imported.has(file)) continue
+      imported.add(file)
+      const href = await devServerModuleHref(config, file, 'build')
+      report(file, fileURLToPath(href))
+      try {
+        await import(href)
+      } catch (error) {
+        console.warn(`vercel adapter: importing ${file} failed during warmup:`, error)
+      }
+    }
+  }
 }
 
 /**

package/src/cli/adapters/vercel.ts

@@ -167,15 +167,6 @@ export async function writeVercelOutput(
   const warm = options.warm ?? startWarmChild(config)
   await log.step('prepare output directory', () => emptyDir(outputPath))
 
-  await log.step('copy static files', () =>
-    copyStaticFiles(
-      path.join(config.outPath, 'public'),
-      path.join(outputPath, 'static'),
-      relative => !staticFiles[relative] || canServeStaticOnVercel(staticFiles[relative]),
-    ),
-  )
-  const overrides = await staticOverrides(path.join(config.outPath, 'public'), staticFiles)
-
   // The compiled set is already final once the child reaches its handler
   // phase, so `onCompiled` resolves this ahead of full completion and
   // writeServerFunction starts tracing while the child's handler imports
@@ -196,6 +187,17 @@ export async function writeVercelOutput(
   const functionPath = path.join(outputPath, 'functions', `${SERVER_FUNCTION}.func`)
   await writeServerFunction(config, manifest, functionPath, warmedModules, warmSettled, log)
 
+  // After the warm pass, never before: it is what emits next/font bytes under public/, and a fully
+  // dynamic app renders nothing at build, so copying earlier ships a CDN with no fonts.
+  await log.step('copy static files', () =>
+    copyStaticFiles(
+      path.join(config.outPath, 'public'),
+      path.join(outputPath, 'static'),
+      relative => !staticFiles[relative] || canServeStaticOnVercel(staticFiles[relative]),
+    ),
+  )
+  const overrides = await staticOverrides(path.join(config.outPath, 'public'), staticFiles)
+
   const routes: NonNullable<VercelConfig['routes']> = [
     // Chunk and font filenames are content-hashed; serve them immutable.
     {

package/src/client/reference.ts

@@ -1,4 +1,22 @@
 import { createHash } from 'node:crypto'
+import path from 'node:path'
+
+/**
+ * Every file this process stubbed as a client reference. The route manifest only records what the
+ * scan attributes to a route, so a `'use client'` module inside a dependency - which only the vendor
+ * pass sees, the package entry carrying no directive - is missing from it.
+ */
+const compiledClientReferences = new Set<string>()
+
+/** @internal */
+export function noteCompiledClientReference(file: string) {
+  compiledClientReferences.add(path.resolve(file))
+}
+
+/** @internal Read by the vercel adapter's warm pass, so it compiles these before the deploy. */
+export function compiledClientReferenceFiles(): ReadonlySet<string> {
+  return compiledClientReferences
+}
 
 export interface ClientReference {
   id: string

package/src/compat/next/font/runtime.ts

@@ -98,15 +98,28 @@ interface NormalizedLocalSource {
   weight?: string
 }
 
-const fontStorageKey = Symbol.for('pnext.compat.font.storage')
-const fontRuntimeGlobal = globalThis as typeof globalThis &
-  Record<symbol, AsyncLocalStorage<FontScope> | undefined>
-const fontStorage = (fontRuntimeGlobal[fontStorageKey] ??= new AsyncLocalStorage<FontScope>())
+/**
+ * State every copy of this module must agree on: the app reaches next/font through the COMPILED
+ * runtime, the framework through node_modules, so a plain module-level value exists once per copy.
+ */
+const fontRuntimeGlobal = globalThis as typeof globalThis & Record<symbol, unknown>
+const sharedAcrossInstances = <T>(key: symbol, create: () => T) =>
+  (fontRuntimeGlobal[key] ??= create()) as T
+
+const fontStorage = sharedAcrossInstances(
+  Symbol.for('pnext.compat.font.storage'),
+  () => new AsyncLocalStorage<FontScope>(),
+)
 const allowedDisplayValues = new Set(['auto', 'block', 'swap', 'fallback', 'optional'])
 const require = createRequire(import.meta.url)
 const googleCssCache = new Map<string, Promise<string>>()
 const googleFontFileCache = new Map<string, Promise<Uint8Array>>()
-const resolvedFontCache = new Map<string, Promise<ResolvedFont>>()
+// Shared for the same reason as declaredFonts below, and so a request-time render reuses the
+// build's resolution instead of re-fetching the Google stylesheet on every cold start.
+const resolvedFontCache = sharedAcrossInstances(
+  Symbol.for('pnext.compat.font.resolved'),
+  () => new Map<string, Promise<ResolvedFont>>(),
+)
 let googleMetadataCache: Record<string, GoogleFontMetadata> | undefined
 
 /**
@@ -114,7 +127,10 @@ let googleMetadataCache: Record<string, GoogleFontMetadata> | undefined
  * Definitions are created when the app's font module evaluates - well before the render that registers
  * them - which is what makes the resolve prewarmable.
  */
-const declaredFonts = new Map<string, FontDefinition>()
+const declaredFonts = sharedAcrossInstances(
+  Symbol.for('pnext.compat.font.declared'),
+  () => new Map<string, FontDefinition>(),
+)
 
 /**
  * Resolve the declared fonts ahead of the render that will ask for them. Fire-and-forget: this only
@@ -751,12 +767,19 @@ async function emitFontBytes(
   const mediaSegments = ['_next', 'static', 'media']
   const outDir = path.join(context.config.outPath, 'public', ...mediaSegments)
   const file = path.join(outDir, filename)
-  await mkdir(outDir, { recursive: true })
-  if (!existsSync(file)) {
-    if (sourceFile) await copyFile(sourceFile, file)
-    else await writeFile(file, bytes)
+  const asset = {
+    ext,
+    file,
+    type: fontMimeType(ext),
+    url: `/${mediaSegments.join('/')}/${filename}`,
   }
-  return { ext, file, type: fontMimeType(ext), url: `/${mediaSegments.join('/')}/${filename}` }
+  // Existence first, mkdir second: at request time the filesystem is read-only, and an
+  // unconditional mkdir throws EROFS just to discover the build already emitted these bytes.
+  if (existsSync(file)) return asset
+  await mkdir(outDir, { recursive: true })
+  if (sourceFile) await copyFile(sourceFile, file)
+  else await writeFile(file, bytes)
+  return asset
 }
 
 function normalizeLocalSources(

package/src/config.ts

@@ -193,18 +193,27 @@ export function pathToFileHref(filePath: string) {
 }
 
 export function publicEnvDefines() {
-  return Object.fromEntries(
-    [
-      // eslint-disable-next-line turbo/no-undeclared-env-vars
-      ['NODE_ENV', process.env.NODE_ENV ?? 'production'],
-      ...Object.entries(process.env).filter(
-        ([key]) => key.startsWith('NEXT_PUBLIC_') || key.startsWith('PNEXT_PUBLIC_'),
-      ),
-    ].map(([key, value]) => [
-      `process.env.${key}`,
-      value === undefined ? 'undefined' : JSON.stringify(value),
-    ]),
-  )
+  const publicEnv = Object.fromEntries([
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    ['NODE_ENV', process.env.NODE_ENV ?? 'production'],
+    ...Object.entries(process.env).filter(
+      ([key]) => key.startsWith('NEXT_PUBLIC_') || key.startsWith('PNEXT_PUBLIC_'),
+    ),
+  ]) as Record<string, string>
+  return {
+    // The whole object, not just the keys that happen to be SET at build time. A browser has no
+    // `process`, so a `NEXT_PUBLIC_*` the source reads but the environment never defined would
+    // otherwise survive as a bare reference and throw ReferenceError on first evaluation - taking
+    // hydration, and every event handler on the page, down with it. Reading a missing key off this
+    // yields undefined, which is what Next inlines for one.
+    'process.env': JSON.stringify(publicEnv),
+    ...Object.fromEntries(
+      Object.entries(publicEnv).map(([key, value]) => [
+        `process.env.${key}`,
+        JSON.stringify(value),
+      ]),
+    ),
+  }
 }
 
 type FrameworkRuntimeAlias =

package/src/runtime/modules.ts

@@ -12,6 +12,7 @@ import {
   clientReferenceModuleSource,
   hasUseClientDirective,
 } from '../client/reference-stub'
+import { noteCompiledClientReference } from '../client/reference'
 import { getClientActionBundler } from '../dev/client-actions'
 import { deferredDynamicImportSpecifiers, devDynamicSplitEnabled } from '../resolve/dynamic'
 import { noteModuleGeneration, noteModuleImported } from './module-generations'
@@ -2190,6 +2191,7 @@ async function writeClientReferenceModules(
       await writeClientReferenceModule(stub, reference.file, [...reference.exports].sort())
       specifiers.set(specifier, stub)
       files.add(path.resolve(reference.file))
+      noteCompiledClientReference(reference.file)
     }),
   )
 

package/src/runtime/vendor-build.ts

@@ -26,7 +26,7 @@ import {
   type ServerEsbuildPluginOptions,
 } from '../extensions'
 import { pathToFileHref, type CompatAliasTarget, type ResolvedConfig } from '../config'
-import { devArtifactUsable, noteDevArtifactWritten } from './module-cache'
+import { devArtifactUsable, devSourceIdentity, noteDevArtifactWritten } from './module-cache'
 import {
   getExternalPackagePolicy,
   isEsmModuleEntry,
@@ -47,6 +47,7 @@ import {
   clientReferenceModuleSource,
   hasUseClientDirective,
 } from '../client/reference-stub'
+import { noteCompiledClientReference } from '../client/reference'
 import { reactCompatEnabled } from '../render/hooks'
 import { writeFileAtomic } from '../utils/fs'
 import { formatDuration } from '../utils/verbose'
@@ -156,6 +157,11 @@ export async function externalServerPackageHref(
  * Artifact identity: what the bundle is compiled FROM, never who asked. Keying on the importer's
  * directory (what `require.resolve` fell back to when a package publishes no `require` condition)
  * split one package into one build per importing directory.
+ *
+ * Every path in it is workspace-relative, never absolute — for the same reason the module graph
+ * names artifacts that way (see `portableSourcePath`). This key names the file, and a deployed
+ * function replays the same workspace from a different root: an absolute key misses the whole
+ * shipped vendor cache and re-vendors onto a read-only filesystem.
  */
 function vendorArtifactKey(
   config: ResolvedConfig,
@@ -163,9 +169,12 @@ function vendorArtifactKey(
   conditionTarget: ServerBundleTarget,
   source: string,
 ) {
-  return `${config.outPath}\0${target}\0${conditionTarget}\0${source}`
+  return `${vendorPortablePath(config, config.outPath)}\0${target}\0${conditionTarget}\0${source}`
 }
 
+const vendorPortablePath = (config: ResolvedConfig, file: string) =>
+  devSourceIdentity(file, config.workspaceRoot)
+
 function vendorArtifactFile(config: ResolvedConfig, key: string) {
   return path.join(config.outPath, 'cache', 'server', 'vendor', `${hashBundleSpecifier(key)}.mjs`)
 }
@@ -214,7 +223,9 @@ function vendorBuildPlan(
     config,
     target,
     conditionTarget,
-    entry ?? `${path.resolve(resolveDir)}\0${specifier}`,
+    entry
+      ? vendorPortablePath(config, entry)
+      : `${vendorPortablePath(config, path.resolve(resolveDir))}\0${specifier}`,
   )
   const file = vendorArtifactFile(config, key)
   return {
@@ -1290,6 +1301,10 @@ function vendorClientBoundaryLoad(config: ResolvedConfig) {
   const scan = async (file: string): Promise<OnLoadResult | undefined> => {
     const source = await readFile(file, 'utf8').catch(() => undefined)
     if (source === undefined || !hasUseClientDirective(source)) return undefined
+    // A 'use client' file the vendor pass found inside a package — the render will import it as a
+    // client module, and nothing else records it (the server-source scan only sees the package
+    // entry, which carries no directive). The vercel warm pass reads this to compile it at build.
+    noteCompiledClientReference(file)
     return {
       contents: clientReferenceModuleSource(
         file,