@wular/pnext 0.0.22 → 0.0.24

package/package.json

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

package/src/cli/create.ts

@@ -27,11 +27,11 @@ export async function createApp(dir: string | undefined, options: CreateAppOptio
   const name = sanitizePackageName(path.basename(target))
   console.log(`${cyan('▲')} ${bold('pnext create')} ${dim(`— scaffolding ${name}`)}\n`)
 
-  const files = scaffoldFiles(name, await latestPnextVersionRange('create'))
+  const files = await scaffoldFiles(name, await latestPnextVersionRange('create'))
   await Promise.all(
     Object.entries(files).map(([file, source]) => Bun.write(path.join(target, file), source)),
   )
-  for (const file of Object.keys(files)) console.log(`  ${green('+')} ${dim(file)}`)
+  for (const file of Object.keys(files).sort()) console.log(`  ${green('+')} ${dim(file)}`)
 
   let installed = false
   if (options.install) {
@@ -112,43 +112,28 @@ function printNextSteps(dir: string, installed: boolean) {
   console.log(dim(`└${'─'.repeat(width + 2)}┘`))
 }
 
-function scaffoldFiles(name: string, pnextRange: string): Record<string, string> {
-  return {
-    'package.json': `${JSON.stringify(
-      {
-        name,
-        private: true,
-        scripts: {
-          dev: 'pnext dev',
-          build: 'pnext build',
-          start: 'pnext start',
-          analyze: 'pnext analyze',
-        },
-        dependencies: { preact: '^10' },
-        devDependencies: {
-          '@wular/pnext': pnextRange,
-          typescript: '^5',
-          '@types/bun': '^1',
-        },
-      },
-      null,
-      2,
-    )}\n`,
-    'pnext.config.ts': `// See node_modules/@wular/pnext/reference/config.md for available options.\nexport default {};\n`,
-    'tsconfig.json': `${JSON.stringify(
-      {
-        extends: '@wular/pnext/config/ts/react.json',
-        compilerOptions: { jsxImportSource: 'preact', paths: { '#gen/*': ['./.pnext/types/*'] } },
-        include: ['**/*.ts', '**/*.tsx', '.pnext/types/**/*.ts'],
-      },
-      null,
-      2,
-    )}\n`,
-    'app/layout.tsx': `import type { LayoutProps } from '@wular/pnext';\nimport './globals.css';\n\nexport const metadata = {\n  title: '${name}',\n};\n\nexport default function RootLayout({ children }: LayoutProps) {\n  return (\n    <html>\n      <body>{children}</body>\n    </html>\n  );\n}\n`,
-    'app/page.tsx': `import Counter from './counter';\n\nexport default async function Home() {\n  return (\n    <>\n      <h1>Welcome to ${name}</h1>\n      <p>Edit app/page.tsx to get started.</p>\n      <Counter />\n    </>\n  );\n}\n`,
-    'app/counter.tsx': `'use client';\n\nimport { useState } from 'preact/hooks';\n\nexport default function Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;\n}\n`,
-    'app/globals.css': `body {\n  margin: 0;\n  font-family: system-ui, sans-serif;\n}\n`,
-    '.gitignore': `node_modules\n.pnext\n`,
-    'README.md': `# ${name}\n\nA pnext app.\n\n\`\`\`\nbun install\nbun dev\n\`\`\`\n\nDocs: node_modules/@wular/pnext/reference/getting-started.md\n`,
+// The template is a real runnable app in src/cli/template; files are copied verbatim with the
+// placeholder name swapped, and package.json gets the app name and pnext version stamped in.
+const TEMPLATE_DIR = path.join(import.meta.dir, 'template')
+const PLACEHOLDER_NAME = 'pnext-app'
+
+async function scaffoldFiles(name: string, pnextRange: string): Promise<Record<string, string>> {
+  const files: Record<string, string> = {}
+  for (const entry of await readdir(TEMPLATE_DIR, { recursive: true, withFileTypes: true })) {
+    if (!entry.isFile()) continue
+    const rel = path.relative(TEMPLATE_DIR, path.join(entry.parentPath, entry.name))
+    const source = await Bun.file(path.join(TEMPLATE_DIR, rel)).text()
+    // npm strips .gitignore from published tarballs, so the template stores it unprefixed.
+    if (rel === 'gitignore') {
+      files['.gitignore'] = source
+    } else if (rel === 'package.json') {
+      const pkg = JSON.parse(source) as { name: string; devDependencies: Record<string, string> }
+      pkg.name = name
+      pkg.devDependencies['@wular/pnext'] = pnextRange
+      files[rel] = `${JSON.stringify(pkg, null, 2)}\n`
+    } else {
+      files[rel] = source.replaceAll(PLACEHOLDER_NAME, name)
+    }
   }
+  return files
 }

package/src/cli/serve/ui.ts

@@ -138,7 +138,7 @@ export function openBrowser(url: string) {
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   const browser = process.env.BROWSER
   // eslint-disable-next-line turbo/no-undeclared-env-vars
-  if (browser === 'none' || process.env.CI) return
+  if (browser === 'none' || process.env.CI || process.env.NODE_ENV === 'test') return
 
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   const browserArgs = process.env.BROWSER_ARGS?.split(/\s+/).filter(Boolean) ?? []

package/src/cli/template/README.md

@@ -0,0 +1,10 @@
+# pnext-app
+
+A pnext app.
+
+```
+bun install
+bun dev
+```
+
+Docs: node_modules/@wular/pnext/reference/getting-started.md

package/src/cli/template/app/client/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useState } from 'preact/hooks'
+
+export default function ClientPage() {
+  const [text, setText] = useState('')
+  const words = text.trim() ? text.trim().split(/\s+/).length : 0
+  return (
+    <div class="page">
+      <span class="chip">client component</span>
+      <h1>Running in the browser</h1>
+      <input
+        class="field"
+        placeholder="Type something…"
+        value={text}
+        onInput={e => setText(e.currentTarget.value)}
+      />
+      <dl class="panel">
+        <div>
+          <dt>Characters</dt>
+          <dd>{text.length}</dd>
+        </div>
+        <div>
+          <dt>Words</dt>
+          <dd>{words}</dd>
+        </div>
+      </dl>
+    </div>
+  )
+}

package/src/cli/template/app/globals.css

@@ -0,0 +1,322 @@
+:root {
+  --bg: #ffffff;
+  --ink: #111111;
+  --muted: #6b6b6b;
+  --line: #e4e4e4;
+  --card: #f7f7f7;
+  --accent: #4f46e5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0a0a0a;
+    --ink: #ededed;
+    --muted: #8f8f8f;
+    --line: #262626;
+    --card: #141414;
+    --accent: #8583ff;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  overflow-x: hidden;
+}
+
+/* One quiet accent glow, top center. */
+body::before {
+  content: '';
+  position: fixed;
+  z-index: -1;
+  top: -24rem;
+  left: 50%;
+  width: 64rem;
+  height: 48rem;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  background: radial-gradient(
+    ellipse,
+    color-mix(in srgb, var(--accent) 10%, transparent),
+    transparent 70%
+  );
+  filter: blur(60px);
+  pointer-events: none;
+}
+
+.container {
+  width: min(72rem, 100% - 4rem);
+  margin: 0 auto;
+}
+
+.site-header {
+  border-bottom: 1px solid var(--line);
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  text-decoration: none;
+}
+
+.mark {
+  color: var(--accent);
+}
+
+.site-header nav {
+  display: flex;
+  gap: 1.75rem;
+}
+
+.site-header nav a {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 0.92rem;
+  font-weight: 500;
+  transition: color 130ms ease;
+}
+
+.site-header nav a:hover {
+  color: var(--ink);
+}
+
+main {
+  flex: 1;
+  display: grid;
+  align-content: center;
+  padding: 3rem 0 5rem;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  align-items: center;
+  gap: 4rem;
+}
+
+.hero > * {
+  animation: rise 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+.hero > :last-child {
+  animation-delay: 120ms;
+}
+
+@media (max-width: 52rem) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+}
+
+h1 {
+  margin: 0 0 1rem;
+  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.08;
+}
+
+.lede {
+  margin: 0 0 2rem;
+  color: var(--muted);
+  font-size: 1.15rem;
+  max-width: 32rem;
+}
+
+a {
+  color: inherit;
+}
+
+.button-link,
+.field {
+  font: inherit;
+  font-weight: 500;
+  padding: 0.55rem 1.3rem;
+  border-radius: 8px;
+}
+
+.button-link {
+  display: inline-block;
+  text-decoration: none;
+  background: var(--ink);
+  color: var(--bg);
+  border: 1px solid var(--ink);
+  transition:
+    background 150ms ease,
+    border-color 150ms ease;
+}
+
+.button-link:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #ffffff;
+}
+
+.panel {
+  margin: 0;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  max-width: 26rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.panel > div,
+.panel > a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 0.85rem 1.2rem;
+}
+
+.panel > * + * {
+  border-top: 1px solid var(--line);
+}
+
+.panel > a {
+  text-decoration: none;
+  transition: background 130ms ease;
+}
+
+.panel > a:hover {
+  background: color-mix(in srgb, var(--accent) 8%, var(--card));
+}
+
+.panel .path {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.92rem;
+}
+
+.panel .desc {
+  display: block;
+  margin-top: 0.15rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.panel .arrow {
+  color: var(--muted);
+  transition:
+    transform 130ms ease,
+    color 130ms ease;
+}
+
+.panel > a:hover .arrow {
+  color: var(--accent);
+  transform: translateX(3px);
+}
+
+.panel dt {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.panel dd {
+  margin: 0;
+  font-size: 0.92rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+.page {
+  max-width: 36rem;
+  animation: rise 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+.chip {
+  display: inline-block;
+  margin-bottom: 1.1rem;
+  padding: 0.18rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--card);
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+}
+
+.page h1 {
+  margin-bottom: 1.75rem;
+}
+
+.page .panel {
+  margin-top: 1.25rem;
+}
+
+.field {
+  display: block;
+  width: 100%;
+  max-width: 24rem;
+  background: var(--card);
+  color: var(--ink);
+  border: 1px solid var(--line);
+}
+
+.field:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.field::placeholder {
+  color: var(--muted);
+}
+
+.hint {
+  margin: 0.9rem 0 0;
+  min-height: 1.5em;
+  color: var(--muted);
+  font-size: 0.95rem;
+  font-variant-numeric: tabular-nums;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/src/cli/template/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { LayoutProps } from '@wular/pnext'
+import './globals.css'
+
+export const metadata = {
+  title: 'pnext-app',
+}
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html>
+      <body>
+        <header class="site-header">
+          <div class="container bar">
+            <a class="brand" href="/">
+              <span class="mark">▲</span> pnext-app
+            </a>
+            <nav>
+              <a href="/server">Server component</a>
+              <a href="/client">Client component</a>
+              <a href="https://www.pnext.dev/docs" target="_blank" rel="noopener">
+                Docs
+              </a>
+              <a href="https://github.com/muzam1l/pnext" target="_blank" rel="noopener">
+                GitHub
+              </a>
+            </nav>
+          </div>
+        </header>
+        <main class="container">{children}</main>
+      </body>
+    </html>
+  )
+}

package/src/cli/template/app/page.tsx

@@ -0,0 +1,29 @@
+export default async function Home() {
+  return (
+    <div class="hero">
+      <div>
+        <h1>Hello, world.</h1>
+        <p class="lede">Your app is up and running.</p>
+        <a class="button-link" href="https://www.pnext.dev/docs" target="_blank" rel="noopener">
+          Read the docs
+        </a>
+      </div>
+      <nav class="panel">
+        <a href="/server">
+          <span>
+            <span class="path">/server</span>
+            <span class="desc">Server component, rendered per request</span>
+          </span>
+          <span class="arrow">→</span>
+        </a>
+        <a href="/client">
+          <span>
+            <span class="path">/client</span>
+            <span class="desc">Client component, interactive in the browser</span>
+          </span>
+          <span class="arrow">→</span>
+        </a>
+      </nav>
+    </div>
+  )
+}

package/src/cli/template/app/server/page.tsx

@@ -0,0 +1,27 @@
+export const metadata = {
+  title: 'Server component',
+}
+
+export default async function ServerPage() {
+  const renderedAt = new Date().toLocaleTimeString('en-US', { hour12: false })
+  return (
+    <div class="page">
+      <span class="chip">server component</span>
+      <h1>Rendered on the server</h1>
+      <dl class="panel">
+        <div>
+          <dt>Rendered at</dt>
+          <dd>{renderedAt}</dd>
+        </div>
+        <div>
+          <dt>Runtime</dt>
+          <dd>Bun {Bun.version}</dd>
+        </div>
+        <div>
+          <dt>Client JS</dt>
+          <dd>none</dd>
+        </div>
+      </dl>
+    </div>
+  )
+}

package/src/cli/template/gitignore

@@ -0,0 +1,2 @@
+node_modules
+.pnext

package/src/cli/template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "pnext-app",
+  "private": true,
+  "scripts": {
+    "dev": "pnext dev",
+    "build": "pnext build",
+    "start": "pnext start",
+    "analyze": "pnext analyze"
+  },
+  "dependencies": {
+    "preact": "^10"
+  },
+  "devDependencies": {
+    "@wular/pnext": "latest",
+    "typescript": "^5",
+    "@types/bun": "^1"
+  }
+}

package/src/cli/template/pnext.config.ts

@@ -0,0 +1,2 @@
+// See node_modules/@wular/pnext/reference/config.md for available options.
+export default {}

package/src/cli/template/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@wular/pnext/config/ts/react.json",
+  "compilerOptions": {
+    "jsxImportSource": "preact",
+    "paths": {
+      "#gen/*": ["./.pnext/types/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".pnext/types/**/*.ts"]
+}

package/src/dev/server.ts

@@ -32,7 +32,12 @@ import {
   serverBundleTargetForRuntime,
 } from '../runtime/loader'
 import { applyProxyResponse, createProxyRunner, validateProxyFiles } from '../routing/proxy'
-import { errorLogTrace, renderGlobalNotFoundResponse, renderPageResponse } from '../render/renderer'
+import {
+  errorLogTrace,
+  renderGlobalNotFoundResponse,
+  renderPageResponse,
+  withDevReloadScript,
+} from '../render/renderer'
 import { markErrorLogged } from '../utils/error-log'
 import { escapeHtml } from '../utils/html'
 import { internalErrorHtml } from './internal-error'
@@ -792,10 +797,15 @@ function devLastResortResponse(error: unknown, request: Request): Response {
   } catch {
     // A malformed URL is exactly the kind of request that gets here; keep the raw text.
   }
-  return devLastResortError(error, route, request.url)
+  return devLastResortError(error, route, request.url, request)
 }
 
-function devLastResortError(error: unknown, route = '(unknown)', url = route): Response {
+export function devLastResortError(
+  error: unknown,
+  route = '(unknown)',
+  url = route,
+  request?: Request,
+): Response {
   const resolved = error instanceof Error ? error : new Error(String(error))
   if (markErrorLogged(resolved)) console.error(errorLogTrace(resolved))
   let html: string
@@ -809,7 +819,7 @@ function devLastResortError(error: unknown, route = '(unknown)', url = route): R
   } catch {
     html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>pnext error</title></head><body><h1>pnext could not render this request</h1><pre>${escapeHtml(resolved.stack ?? resolved.message)}</pre></body></html>`
   }
-  return new Response(html, {
+  return new Response(withDevReloadScript(html, request), {
     status: 500,
     headers: { 'content-type': 'text/html; charset=utf-8' },
   })

package/src/render/renderer.ts

@@ -3060,6 +3060,7 @@ async function pageRender(options: RenderOptions, stream: boolean): Promise<Page
             url: String(options.url),
             digest: (resolved as Error & { digest?: string }).digest,
           }),
+          options,
         )
       }
     }
@@ -3161,6 +3162,7 @@ async function renderGlobalErrorPage(
         withGlobalErrorReportScript(`<!DOCTYPE html>${rendered}`, errorProps),
         options.config,
       ),
+      options,
     )
   }
   try {
@@ -3190,6 +3192,7 @@ async function renderGlobalErrorPage(
         withGlobalErrorReportScript(`<!DOCTYPE html>${rendered}`, errorProps),
         options.config,
       ),
+      options,
     )
   } catch {
     const defaultUi = nextCompatEnabled(options.config)
@@ -3202,6 +3205,7 @@ async function renderGlobalErrorPage(
         withGlobalErrorReportScript(`<!DOCTYPE html>${rendered}`, errorProps),
         options.config,
       ),
+      options,
     )
   }
 }
@@ -3216,7 +3220,19 @@ async function renderGlobalErrorPage(
 function withGlobalErrorReportScript(html: string, error: SerializedError): string {
   const script = getRenderExtensions().globalErrorReportScript(error)
   if (!script) return html
-  return html.includes('</body>') ? html.replace('</body>', `${script}</body>`) : html + script
+  return appendToDocumentBody(html, script)
+}
+
+function appendToDocumentBody(html: string, content: string): string {
+  const closingBodies = [...html.matchAll(/<\/body\s*>/gi)]
+  const closingBody = closingBodies.at(-1)?.index
+  if (closingBody === undefined) return html + content
+  return html.slice(0, closingBody) + content + html.slice(closingBody)
+}
+
+/** Keep a standalone development document connected to the dev server's reload stream. */
+export function withDevReloadScript(html: string, request?: Request): string {
+  return appendToDocumentBody(html, devReloadScript(documentNonce(request)))
 }
 
 function withGlobalErrorStylesheet(html: string, config: ResolvedConfig): string {
@@ -3227,13 +3243,16 @@ function withGlobalErrorStylesheet(html: string, config: ResolvedConfig): string
   return html.replace(/<html(?:\s[^>]*)?>/i, tag => `${tag}<head>${link}</head>`)
 }
 
-// A pre-rendered document (its own <html>/<body>) served verbatim. The document
-// shell is skipped entirely: renderGlobalDocument wraps the markup, not
-// renderDocumentStart/End.
-function globalErrorPage(html: string): PageRender {
+// A pre-rendered document (its own <html>/<body>). The ordinary document shell
+// is skipped entirely, so development adds its reload client directly.
+function globalErrorPage(
+  html: string,
+  options: Pick<RenderOptions, 'dev' | 'request'>,
+): PageRender {
+  const body = options.dev ? withDevReloadScript(html, options.request) : html
   return {
     shell: 'global-error',
-    body: html,
+    body,
     htmlProps: {},
     bodyProps: {},
     head: '',
@@ -4535,15 +4554,17 @@ async function renderTreeOrFallback(
   try {
     return await renderTree(options, tree, stream, metadata, extra)
   } catch {
-    return generatedFallbackPage(tree, metadata, extra.status ?? 500)
+    return generatedFallbackPage(options, tree, metadata, extra.status ?? 500)
   }
 }
 
 function generatedFallbackPage(
+  options: RenderOptions,
   tree: ComponentChildren,
   metadata: Metadata,
   status: number,
 ): PageRender {
+  const nonce = documentNonce(options.request)
   return {
     shell: 'generated',
     body: serializeNeutralClientIslands(renderToString(h(Fragment, null, tree))),
@@ -4557,11 +4578,12 @@ function generatedFallbackPage(
     propsScript: '',
     routeScript: '',
     clientScript: '',
-    devScript: '',
+    devScript: options.dev ? devReloadScript() : '',
     streamChunks: [],
     status,
     viewport: {},
     fontCss: '',
+    ...(nonce ? { nonce } : {}),
   }
 }
 
@@ -7679,12 +7701,13 @@ function componentChildren(value: ServerComponentResult): ComponentChildren {
 
 // data-pnext-dev tells the soft-navigation runtime to skip this script on
 // body swaps — the current document already holds an open event stream.
-function devReloadScript() {
+function devReloadScript(nonce?: string) {
   // css-update swaps every same-origin stylesheet for a cache-busted copy and
   // drops the old one once the new one has loaded, so the page never flashes
   // unstyled and never loses client state. Anything the server could not prove
   // was CSS-only still arrives as `reload`.
-  return `<script data-pnext-dev>
+  const nonceAttribute = nonce ? ` nonce="${escapeHtml(nonce)}"` : ''
+  return `<script${nonceAttribute} data-pnext-dev>
 let events;
 let generation;
 // The stream is a long-lived connection counted against the browser's per-origin

package/tsconfig.json

@@ -6,5 +6,5 @@
     "allowImportingTsExtensions": true
   },
   "include": ["."],
-  "exclude": ["node_modules", ".pnext", "bench/fixtures"]
+  "exclude": ["node_modules", ".pnext", "bench/fixtures", "src/cli/template"]
 }