@wular/pnext 0.1.7 → 0.1.8

package/src/api/dynamic.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
-import { h, type ComponentType } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { Component, h, type ComponentChildren, type ComponentType } from 'preact'
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'
 
 export type DynamicModule<Props> = ComponentType<Props> | { default: ComponentType<Props> }
 export type DynamicLoader<Props> = string | (() => Promise<DynamicModule<Props>>)
@@ -35,6 +35,7 @@ export function dynamic<Props extends object = object>(
 ) {
   let loaded: ComponentType<Props> | null = null
   let pending: Promise<ComponentType<Props>> | null = null
+  let failed = false
   const loadModule =
     typeof loader === 'string'
       ? () => {
@@ -50,11 +51,45 @@ export function dynamic<Props extends object = object>(
     return pending
   }
 
-  function DynamicComponent(props: Props) {
-    const [Component, setComponent] = useState<ComponentType<Props> | null>(() => loaded)
+  // Rendered on the server and hydrated from its markup: suspends until the module loads.
+  function Loaded(props: Props) {
+    const ref = useRef<HTMLElement>(null)
+    const [remounts, setRemounts] = useState(0)
+    // The server sent `loading` because its load failed: replace that markup, never hydrate it.
+    useLayoutEffect(() => {
+      if (ref.current?.hasAttribute('data-pnext-loading')) setRemounts(1)
+    }, [])
+    if (loaded)
+      return h('pnext-dynamic', { key: remounts, ref, style: HOST_STYLE }, h(loaded, props))
+    const Loading = options.loading
+    if (failed) {
+      return h(
+        'pnext-dynamic',
+        { ref, style: HOST_STYLE, 'data-pnext-loading': '' },
+        Loading ? h(Loading, props) : null,
+      )
+    }
+    // eslint-disable-next-line @typescript-eslint/only-throw-error
+    throw typeof window === 'undefined'
+      ? load().then(
+          () => undefined,
+          () => {
+            failed = true
+          },
+        )
+      : load()
+  }
+
+  function ClientDynamic(props: Props) {
+    const [Component, setComponent] = useState<ComponentType<Props> | null>(null)
     const [shouldLoad, setShouldLoad] = useState(() => options.load !== 'visible')
     const visibleRef = useRef<HTMLDivElement>(null)
 
+    // The server sent `loading`: hydrate it, then swap in a module that is already loaded.
+    useLayoutEffect(() => {
+      if (loaded) setComponent(() => loaded)
+    }, [])
+
     useEffect(() => {
       if (Component || shouldLoad) return
       const node = visibleRef.current
@@ -98,6 +133,18 @@ export function dynamic<Props extends object = object>(
     return Loading ? h(Loading, props) : null
   }
 
+  const DynamicComponent =
+    options.ssr === false || options.load === 'visible'
+      ? ClientDynamic
+      : (props: Props) =>
+          typeof window === 'undefined'
+            ? h(Loaded, props)
+            : h(
+                DynamicBoundary,
+                { fallback: options.loading ? h(options.loading, props) : null },
+                h(Loaded, props),
+              )
+
   ;(
     DynamicComponent as typeof DynamicComponent & {
       [dynamicReferenceSymbol]: DynamicReference<Props>
@@ -106,3 +153,36 @@ export function dynamic<Props extends object = object>(
 
   return DynamicComponent
 }
+
+const HOST_STYLE = { display: 'contents' }
+// preact's mangled MODE_HYDRATE flag on a vnode's `__u`.
+const MODE_HYDRATE = 32
+
+interface SuspendedVNode {
+  __u: number
+}
+
+// Suspense for one dynamic(): hydration keeps the server markup until the chunk loads, a fresh render
+// shows `fallback`. `__c` is compat's mangled `_childDidSuspend`, so compat suspends here too.
+class DynamicBoundary extends Component<
+  { fallback: ComponentChildren; children?: ComponentChildren },
+  { waiting?: boolean; held?: boolean }
+> {
+  __c(promise: Promise<unknown>, vnode: SuspendedVNode) {
+    this.setState({ waiting: true, held: (vnode.__u & MODE_HYDRATE) !== 0 })
+    void promise.then(() => this.setState({ waiting: false }))
+  }
+
+  componentDidCatch(error: unknown) {
+    if (!(error instanceof Promise)) throw error
+    this.__c(error, (this as unknown as { __v: { __k: SuspendedVNode[] } }).__v.__k[0]!)
+  }
+
+  shouldComponentUpdate(_props: unknown, state: { waiting?: boolean; held?: boolean }) {
+    return !(state.waiting && state.held)
+  }
+
+  render() {
+    return this.state.waiting && !this.state.held ? this.props.fallback : this.props.children
+  }
+}

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

@@ -29,10 +29,17 @@ import { existsSync } from 'node:fs'
 import { mkdir, readFile, rm } from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { DEFAULT_OUT_DIR, loadConfig, pathToFileHref, type ResolvedConfig } from '../../config'
+import {
+  DEFAULT_OUT_DIR,
+  loadConfig,
+  pathToFileHref,
+  standaloneOutSegment,
+  type ResolvedConfig,
+} from '../../config'
 import { bootstrapCompat } from '../../compat-bootstrap'
 import { compiledClientReferenceFiles, ssrClientReference } from '../../client/reference'
 import { hasUseClientDirective } from '../../client/reference-stub'
+import { moduleExportNames } from '../../resolve/scan-facts'
 import { globalCssSources } from '../../css/build'
 import {
   devClientModuleHref,
@@ -61,6 +68,8 @@ import {
   releaseSourceKey,
   serializeReleaseConfig,
   writeBuildIndex,
+  buildManifestFile,
+  buildIndexFile,
 } from '../../runtime/production'
 import { frameworkFingerprint } from '../../runtime/fingerprint'
 import { releaseDependencyLog } from '../../runtime/vendor-build'
@@ -716,33 +725,35 @@ async function writeRelease(
   }
   const source = (file: string) => readSourceSync(file)
   const proxy = releasedProxy(config)
-  await writeBuildIndex(
-    config,
-    {
-      version: BUILD_INDEX_VERSION,
-      framework: frameworkFingerprint(),
-      config: serializeReleaseConfig(config),
-      ...compat,
-      modules,
-      conventions,
-      clientConventions: conventionFiles
-        .filter(file => hasUseClientDirective(source(file)))
-        .map(fromRoot),
-      documentLayouts: conventionFiles
-        .filter(
-          file =>
-            path.basename(file).startsWith('layout.') && /\bexport\s+default\b/.test(source(file)),
-        )
-        .map(fromRoot),
-      globalCss: globalCss.map(fromRoot),
-      ...(proxy ? { proxy: { ...proxy, file: fromRoot(proxy.file) } } : {}),
-      ...(fonts ? { fonts } : {}),
-      ...(dependencies.length > 0
-        ? { dependencies: dependencies.map(file => toPosix(path.relative(config.outPath, file))) }
-        : {}),
-    },
-    DEFAULT_OUT_DIR,
-  )
+  await writeBuildIndex(config, {
+    version: BUILD_INDEX_VERSION,
+    framework: frameworkFingerprint(),
+    config: serializeReleaseConfig(config),
+    ...compat,
+    modules,
+    conventions,
+    clientConventions: conventionFiles
+      .filter(file => hasUseClientDirective(source(file)))
+      .map(fromRoot),
+    documentLayouts: conventionFiles
+      .filter(
+        file =>
+          path.basename(file).startsWith('layout.') &&
+          moduleExportNames(source(file), file).includes('default'),
+      )
+      .map(fromRoot),
+    globalCss: globalCss.map(fromRoot),
+    ...(proxy ? { proxy: { ...proxy, file: fromRoot(proxy.file) } } : {}),
+    ...(fonts ? { fonts } : {}),
+    ...(dependencies.length > 0
+      ? { dependencies: dependencies.map(file => toPosix(path.relative(config.outPath, file))) }
+      : {}),
+  })
+  // A build that moved outDir leaves no default-dir release behind for `pnext start` to serve.
+  const defaultRelease = path.join(config.root, DEFAULT_OUT_DIR, standaloneOutSegment)
+  if (path.resolve(config.outPath) !== defaultRelease) {
+    await rm(buildIndexFile(defaultRelease), { force: true })
+  }
 }
 
 /**
@@ -796,7 +807,7 @@ if (import.meta.main) {
   // A build that fails closes stdin without a go-ahead and never writes the manifest. There is
   // nothing to warm and nothing to report: exiting quietly keeps the failed build's own error the
   // only thing on stderr.
-  const manifestFile = path.join(config.outPath, 'manifest.json')
+  const manifestFile = buildManifestFile(config.outPath)
   if (!request.skip || !existsSync(manifestFile)) process.exit(0)
   const manifest = resolveManifest(
     JSON.parse(await readFile(manifestFile, 'utf8')) as BuildManifest,