@wular/pnext 0.1.6 → 0.1.8

package/dist/server/compat/react/server-component-use.js

@@ -0,0 +1,14 @@
+// @bun
+import {
+  invokeServerComponentWithUse
+} from "../../_chunks/index-b6wtkdp4.js";
+import"../../_chunks/index-tgcakdxc.js";
+import"../../_chunks/index-h4xy648y.js";
+import"../../_chunks/index-68m3mwbd.js";
+import"../../_chunks/index-w6h8m6vp.js";
+import"../../_chunks/index-j2zrcp1k.js";
+import"../../_chunks/index-79ngvam8.js";
+import"../../_chunks/index-rt9qq1va.js";
+export {
+  invokeServerComponentWithUse
+};

package/dist/server/compat/react/server-inserted-html.js

@@ -0,0 +1,14 @@
+// @bun
+import {
+  clearServerInsertedHTML,
+  renderServerInsertedHTML,
+  setServerInsertedHTMLScope,
+  useServerInsertedHTML
+} from "../../_chunks/index-nqh3xhdc.js";
+import"../../_chunks/index-rt9qq1va.js";
+export {
+  clearServerInsertedHTML,
+  renderServerInsertedHTML,
+  setServerInsertedHTMLScope,
+  useServerInsertedHTML
+};

package/dist/server/compat/react/server.js

@@ -0,0 +1,194 @@
+// @bun
+import {
+  ReactClientInternals,
+  ReactSharedInternals,
+  attachReactInternals
+} from "../../_chunks/index-e88tyv35.js";
+import {
+  Children,
+  Component,
+  Fragment,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
+  createContext,
+  createElement,
+  createFactory,
+  createPortal,
+  createRef,
+  findDOMNode,
+  flushSync,
+  forwardRef,
+  hydrate,
+  isFragment,
+  isMemo,
+  isValidElement,
+  lazy,
+  memo,
+  preact_default,
+  render,
+  startTransition,
+  unmountComponentAtNode,
+  unstable_batchedUpdates,
+  useId,
+  version
+} from "../../_chunks/index-tgcakdxc.js";
+import {
+  use
+} from "../../_chunks/index-h4xy648y.js";
+import {
+  useActionState
+} from "../../_chunks/index-68m3mwbd.js";
+import"../../_chunks/index-w6h8m6vp.js";
+import {
+  useOptimistic
+} from "../../_chunks/index-j2zrcp1k.js";
+import"../../_chunks/index-kqyy1d4f.js";
+import"../../_chunks/index-79ngvam8.js";
+import {
+  currentPrerenderScope
+} from "../../_chunks/index-kresp2n8.js";
+import"../../_chunks/index-e3a6yx84.js";
+import {
+  ViewTransition,
+  addTransitionType
+} from "../../_chunks/index-9ch50vtq.js";
+import"../../_chunks/index-rt9qq1va.js";
+
+// src/compat/react/server.ts
+import { cache as serverCache } from "../../../../src/api/cache.ts";
+import { currentCacheSignal } from "../../../../src/request/cache.ts";
+import { cache } from "../../../../src/api/cache.ts";
+attachReactInternals(preact_default);
+var useEffect = () => {
+  return;
+};
+var useLayoutEffect = () => {
+  return;
+};
+var useInsertionEffect = () => {
+  return;
+};
+var useDebugValue = () => {
+  return;
+};
+var useImperativeHandle = () => {
+  return;
+};
+function useState(initialState) {
+  return [
+    typeof initialState === "function" ? initialState() : initialState,
+    () => {
+      return;
+    }
+  ];
+}
+function useReducer(reducer, initialArg, init) {
+  return [init ? init(initialArg) : initialArg, () => {
+    return;
+  }];
+}
+function useRef(initialValue) {
+  return { current: initialValue };
+}
+function useMemo(factory) {
+  return factory();
+}
+function useCallback(callback) {
+  return callback;
+}
+function useDeferredValue(value) {
+  return value;
+}
+function useTransition() {
+  return [false, (callback) => callback()];
+}
+function useSyncExternalStore(_subscribe, _getSnapshot, getServerSnapshot) {
+  if (!getServerSnapshot)
+    throw new Error("Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.");
+  return getServerSnapshot();
+}
+function useContext(context) {
+  return preact_default.useContext(context);
+}
+function cacheSignal() {
+  const prerender = currentPrerenderScope();
+  if (prerender)
+    return prerender.signal;
+  return currentCacheSignal();
+}
+var ReactServer = { ...preact_default };
+delete ReactServer.useState;
+ReactServer.cache = serverCache;
+ReactServer.cacheSignal = cacheSignal;
+ReactServer.useEffect = useEffect;
+ReactServer.useLayoutEffect = useLayoutEffect;
+ReactServer.useInsertionEffect = useInsertionEffect;
+ReactServer.useDebugValue = useDebugValue;
+ReactServer.useImperativeHandle = useImperativeHandle;
+ReactServer.useReducer = useReducer;
+ReactServer.useRef = useRef;
+ReactServer.useMemo = useMemo;
+ReactServer.useCallback = useCallback;
+ReactServer.useDeferredValue = useDeferredValue;
+ReactServer.useTransition = useTransition;
+ReactServer.useSyncExternalStore = useSyncExternalStore;
+ReactServer.useContext = useContext;
+Object.assign(ReactServer, { ViewTransition, addTransitionType });
+var server_default = ReactServer;
+export {
+  Children,
+  Component,
+  Fragment,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  ViewTransition,
+  ReactClientInternals as __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+  ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  addTransitionType,
+  cache,
+  cacheSignal,
+  cloneElement,
+  createContext,
+  createElement,
+  createFactory,
+  createPortal,
+  createRef,
+  server_default as default,
+  findDOMNode,
+  flushSync,
+  forwardRef,
+  hydrate,
+  isFragment,
+  isMemo,
+  isValidElement,
+  lazy,
+  memo,
+  render,
+  startTransition,
+  unmountComponentAtNode,
+  unstable_batchedUpdates,
+  use,
+  useActionState,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+  version
+};

package/dist/server/compat/react/style-values.js

@@ -0,0 +1,10 @@
+// @bun
+import {
+  applyReactStyleValues,
+  reactStyleValue
+} from "../../_chunks/index-kqyy1d4f.js";
+import"../../_chunks/index-rt9qq1va.js";
+export {
+  applyReactStyleValues,
+  reactStyleValue
+};

package/dist/server/compat/react/use.js

@@ -0,0 +1,10 @@
+// @bun
+import {
+  use,
+  withUseThenableState
+} from "../../_chunks/index-h4xy648y.js";
+import"../../_chunks/index-rt9qq1va.js";
+export {
+  use,
+  withUseThenableState
+};

package/dist/server/compat/react/view-transition.js

@@ -0,0 +1,12 @@
+// @bun
+import {
+  ViewTransition,
+  addTransitionType,
+  takeTransitionTypes
+} from "../../_chunks/index-9ch50vtq.js";
+import"../../_chunks/index-rt9qq1va.js";
+export {
+  ViewTransition,
+  addTransitionType,
+  takeTransitionTypes
+};

package/dist/server/generation.json

@@ -0,0 +1 @@
+{"version":"0.1.8","fingerprint":"64aaa993cbaa58df","source":["src/api/cache.ts","src/api/client-navigation.ts","src/api/dynamic.tsx","src/api/link.tsx","src/api/navigation.ts","src/api/server.ts","src/api/suspense.ts","src/client/router/events.ts","src/client/router/history.ts","src/client/router/hub.ts","src/client/router/index.ts","src/client/router/page-slot.ts","src/client/router/policies.ts","src/client/router/runtime.ts","src/index.ts","src/internal.ts","src/request/cache.ts","src/routing/href.ts","src/utils/decode.ts"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wular/pnext",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A fast little framework for server-first React apps, fully compatible with Next.js",
   "type": "module",
   "bin": {
@@ -26,6 +26,7 @@
   "files": [
     "bin",
     "config",
+    "dist",
     "src",
     "tsconfig.json",
     "reference"
@@ -53,6 +54,8 @@
     "bench": "bun bench/run.ts",
     "clean": "rm -rf .turbo .pnext node_modules",
     "prepublishOnly": "bun run lint",
+    "prepack": "NODE_ENV=production bun scripts/prebundle.ts",
+    "postpack": "rm -rf dist",
     "version-bump:patch": "bun scripts/bump.mjs patch",
     "version-bump:minor": "bun scripts/bump.mjs minor",
     "version-bump:major": "bun scripts/bump.mjs major"

package/reference/compat.md

@@ -125,4 +125,4 @@ A route or proxy declaring an edge runtime, and a Pages Router handler configure
 
 `output: 'export'` writes a static tree to `out/`, or to `distDir` when the app configures a custom one. The tree carries the HTML and the flat per-page artifacts the client router fetches when no pnext server is present, the client runtime under `_next/static/chunks/`, the build manifests, the `public/` tree, and the not-found page. Dynamic routes without `generateStaticParams`, pages forcing dynamic rendering, and route handlers with disallowed segment config are build errors, as they are in Next.
 
-`output: 'standalone'` writes `.next/standalone/` with a `server.js` that boots on `PORT` and `HOSTNAME`, along with a `.nft.json` trace beside each page entry and a middleware manifest. Because pnext's production server runs under Bun, that launcher is a thin Node script that re-executes the real pnext server pointed back at the original build directory. The folder is therefore not a self-contained bundle you can ship on its own, because the build tree has to travel with it.
+`output: 'standalone'` writes the same `standalone/` folder as every build (see [Deploy](./dev.md#deploy)), at `.next/standalone/`, with `.nft.json` traces, a middleware manifest and a `server.js` that serves it on `PORT` and `HOSTNAME` via `node server.js`. Bun must be installed. `public/` and static files are already inside.

package/reference/config.md

@@ -21,7 +21,7 @@ This is the form `pnext create` scaffolds. With `compat.next`, pnext also loads
 
 | Field                         | Default     | What it does                                                                                               |
 | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------- |
-| `outDir`                      | `'.pnext'`  | Build output for HTML, client assets, cache files, and `manifest.json`.                                    |
+| `outDir`                      | `'.pnext'`  | Build output: the shippable `standalone/` folder, the build `cache/`, and generated `types/`.              |
 | `basePath`                    | `''`        | Path prefix for an app served below the domain root.                                                       |
 | `assetPrefix`                 | `basePath`  | URL prefix for emitted assets. Set it when assets come from a CDN.                                         |
 | `trailingSlash`               | `false`     | Canonicalizes URLs to a trailing slash and redirects the form without one.                                 |
@@ -51,7 +51,7 @@ Both `compat.next` and `compat.reactCompiler` imply `compat.react`. Direct Preac
 
 ## Deployment adapter
 
-`exclude` and `keep` are string lists that adjust which directories and file suffixes an adapter packs. The Vercel adapter consumes them.
+`exclude` drops matching directories and file suffixes from `standalone/`. `keep` ships matching app files the server reads at runtime. Both apply to the Vercel function.
 
 ```ts
 export default {

package/reference/dev.md

@@ -48,7 +48,7 @@ Debug flags: `--experimental-build-mode compile|generate` splits the build into
 
 ## Deploy
 
-pnext deploys anywhere Bun runs: a VPS, a container, or any host you control. Run `pnext build` on the machine or in CI, then `pnext start` serves the app on your port.
+pnext deploys anywhere Bun runs: a VPS, a container, or any host you control. Run `pnext build`, then ship `<outDir>/standalone`; it needs nothing else. Serve it with `pnext start`, or import `standalone/server/entry.js` in your own server and call `createRequestHandler()`. To use a CDN, upload `standalone/static/` as-is.
 
 Vercel has a dedicated adapter: `pnext build --adapter vercel` writes Build Output to `.vercel/output`. Static pages and static route-handler responses are emitted as files; everything dynamic runs in a single `_pnext` function on Vercel's Bun runtime.
 

package/reference/getting-started.md

@@ -41,7 +41,7 @@ pnext start
 
 `pnext build` makes the production build and `pnext start` serves it. Routes render on the server per request; ones that never read the request are prerendered to static HTML at build time.
 
-That deploys anywhere Bun runs. For Vercel, build with `pnext build --adapter vercel` and it writes ready-to-deploy Build Output.
+Ship `.pnext/standalone` to any host with Bun. For Vercel, build with `pnext build --adapter vercel` and it writes ready-to-deploy Build Output.
 
 ## A quick tour
 

package/reference/rendering.md

@@ -40,7 +40,7 @@ Put the directive at the top of a page when the whole page needs browser-only be
 
 ## Lazy loading
 
-`dynamic()` defers loading a component. It works in Server Components and Client Components alike, and inside a Client Component it is a browser lazy loader. The loader can also be a literal module path for a default export.
+`dynamic()` defers loading a component in Server and Client Components. The loader can also be a literal module path for a default export.
 
 ```tsx
 import { dynamic } from '@wular/pnext/dynamic'
@@ -50,10 +50,10 @@ const Chart = dynamic(() => import('./chart').then(m => m.Chart), {
 })
 ```
 
-A Client Component target renders on the server and hydrates by default. The options change that:
+The component renders on the server and hydrates by default. The options change that:
 
-- `ssr: false` produces browser-only output.
-- `load: 'visible'` waits for the island to enter view, and accepts `rootMargin` and `threshold`. It is browser-only as well unless `ssr` is true.
+- `ssr: false` renders only in the browser.
+- `load: 'visible'` waits for the component to enter view, and accepts `rootMargin` and `threshold`. It renders only in the browser, except with `ssr: true` in a Server Component.
 - `loading` supplies fallback UI.
 
 ## Props that cross the boundary

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>>)
@@ -9,6 +9,8 @@ export const dynamicReferenceSymbol = Symbol.for('pnext.dynamic')
 export interface DynamicTarget {
   file: string
   exportName: string
+  /** The client-reference id the build derived, so a moved build matches without the path. */
+  id?: string
 }
 
 export interface DynamicReference<Props extends object = object> {
@@ -33,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'
       ? () => {
@@ -48,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
@@ -96,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>
@@ -104,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/api/server.ts

@@ -1,5 +1,5 @@
 import { safeDecode } from '../utils/decode'
-import { getProxyExtensions, getProxyResponseProtocol } from '../extensions'
+import type { ExtensionHost } from '../extensions'
 import { getBasePathPrefix } from '../routing/href'
 import type {
   NextRequest as NextRequestLike,
@@ -11,6 +11,24 @@ import type {
 
 const nextResponseMetaSymbol = Symbol.for('pnext.nextResponse')
 
+/** Core's proxy response headers (extensions.ts), until a host is active. */
+const coreProxyResponseProtocol = {
+  nextHeader: 'x-pnext-middleware-next',
+  rewriteHeader: 'x-pnext-middleware-rewrite',
+}
+
+// Through the host's globalThis anchor, not an import: an embedded host loads this module from
+// source, and the prebundled runtime it shares the module with carries its own registry copy.
+function proxyHost() {
+  return (globalThis as Record<symbol, Pick<ExtensionHost, 'proxy' | 'proxyResponse'> | undefined>)[
+    Symbol.for('pnext.extensionHost')
+  ]
+}
+
+function proxyResponseProtocol() {
+  return proxyHost()?.proxyResponse ?? coreProxyResponseProtocol
+}
+
 export type { NextFetchEvent } from '../types'
 
 export interface NextRequestGeo {
@@ -73,14 +91,14 @@ export class NextResponse extends Response {
 
   static next(init?: NextResponseInit) {
     const response = new NextResponse(null, init)
-    response.headers.set(getProxyResponseProtocol().nextHeader, '1')
+    response.headers.set(proxyResponseProtocol().nextHeader, '1')
     defineMeta(response, { kind: 'next', ...requestMeta(init) })
     return response
   }
 
   static rewrite(url: string | URL, init?: NextResponseInit) {
     const response = new NextResponse(null, init)
-    response.headers.set(getProxyResponseProtocol().rewriteHeader, String(url))
+    response.headers.set(proxyResponseProtocol().rewriteHeader, String(url))
     defineMeta(response, { kind: 'rewrite', url: String(url), ...requestMeta(init) })
     return response
   }
@@ -122,7 +140,7 @@ export function nextResponseMeta(response: Response): NextResponseMeta | undefin
   ]
   if (meta) return meta
 
-  const protocol = getProxyResponseProtocol()
+  const protocol = proxyResponseProtocol()
   const rewrite = response.headers.get(protocol.rewriteHeader)
   if (rewrite) return { kind: 'rewrite', url: rewrite }
   if (response.headers.get(protocol.nextHeader)) return { kind: 'next' }
@@ -165,7 +183,7 @@ export function forwardMiddlewareRequestHeaders(from: Response, request: Request
 }
 
 function proxyInternalHeaders() {
-  const protocol = getProxyResponseProtocol()
+  const protocol = proxyResponseProtocol()
   return new Set([protocol.nextHeader, protocol.rewriteHeader])
 }
 
@@ -222,7 +240,7 @@ function createNextUrl(url: string | URL): NextURL {
   // `req.nextUrl.basePath` reads as a falsy '' rather than the string
   // "undefined" when forwarded through a header.
   nextUrl.basePath = getBasePathPrefix()
-  nextUrl.locale = getProxyExtensions().locale(nextUrl)
+  nextUrl.locale = proxyHost()?.proxy.locale(nextUrl) ?? ''
   return nextUrl
 }