@wular/pnext 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wular/pnext",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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/entry.ts

@@ -7,6 +7,7 @@ import { existsSync, readFileSync } from 'node:fs'
 import path from 'node:path'
 import { pathToFileURL } from 'node:url'
 import type { Plugin as EsbuildPlugin } from 'esbuild'
+import { frameworkFingerprint } from '../../runtime/fingerprint'
 
 const frameworkRoot = path.resolve(import.meta.dirname, '..', '..', '..')
 
@@ -20,8 +21,17 @@ function frameworkVersion(): string {
   }
 }
 
-function serverEntryDir(outPath: string): string {
-  return path.join(outPath, 'server', `bundle-${frameworkVersion()}`)
+/**
+ * Version AND framework fingerprint: the version alone let an edited `src` keep serving the bundle
+ * built from the previous source, so a fix appeared to have no effect until the app was rebuilt.
+ * The fingerprint is the same one every other compiled artifact is keyed on, taken through the
+ * cache-root record so a restart pays one stat per file rather than re-reading the tree.
+ */
+export function serverEntryDir(outPath: string): string {
+  // Cache root spelled inline, not imported: this module is parsed before anything else on the
+  // start path, and pulling in the module cache for one path.join would drag its whole graph along.
+  const generation = frameworkFingerprint(path.join(outPath, 'cache', 'server'))
+  return path.join(outPath, 'server', `bundle-${frameworkVersion()}-${generation}`)
 }
 
 function serverEntryFile(outPath: string): string {
@@ -30,7 +40,7 @@ function serverEntryFile(outPath: string): string {
 
 /**
  * The prebuilt entry for a project root, or undefined when there is none to
- * use (no build, a custom `outDir`, a version mismatch, or the opt-out). The
+ * use (no build, a custom `outDir`, a version or source-generation mismatch, or the opt-out). The
  * caller then falls back to importing src/cli/start.ts directly, so a miss only
  * costs speed. Deliberately cheap: one existsSync and one package.json read,
  * because it runs before anything else on the start path.
@@ -43,7 +53,7 @@ export function prebuiltServerEntry(root = process.cwd()): string | undefined {
 }
 
 /**
- * Bundle src/cli/start.ts under `<outPath>/server/bundle-<version>/`. Bare
+ * Bundle src/cli/start.ts under `<outPath>/server/bundle-<version>-<fingerprint>/`. Bare
  * specifiers stay external (the framework's deps are already plain JS), so only
  * the framework's own source is inlined. Splitting is on so the graph behind a
  * dynamic import (compat, dev, build) stays in its own chunk — folding it into

package/src/cli/serve/pipeline.ts

@@ -15,6 +15,7 @@ import type { ResolvedConfig } from '../../config'
 import { bootstrapCompat } from '../../compat-bootstrap'
 import { registerServerRuntime, serverBundleTargetForRuntime } from '../../runtime/loader'
 import { importModuleOnce } from '../../runtime/modules'
+import { abortUpstreamFetchOnDisconnect } from '../../runtime/fetch-host'
 import { applyProxyResponse, createProxyRunner } from '../../routing/proxy'
 import {
   isPprShellUpgradeEligible,
@@ -287,6 +288,9 @@ export async function createRequestHandler(
           },
         )
         const response = maybeCloseNodeFetchConnection(finalized, request)
+        // Wired before the close-observer wraps the body: the stream a handler
+        // passed through from fetch is still the one the abort map knows.
+        abortUpstreamFetchOnDisconnect(response.body, request.signal)
         return flushWorkUnitOnClose(response, unit, request.signal)
       } catch (error) {
         // A dropped promise here would close the socket without a response

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/start.ts

@@ -130,6 +130,15 @@ async function guardUnservableOutputMode(root?: string): Promise<ResolvedConfig>
     )
     process.exit(1)
   }
+  // Next warns on `next start` with standalone output; its standalone launcher re-execs this path
+  // with __NEXT_PRIVATE_STANDALONE_CONFIG set to suppress the warning. Mirror both.
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  if (mode === 'standalone' && !process.env.__NEXT_PRIVATE_STANDALONE_CONFIG) {
+    console.warn(
+      '"next start" does not work with "output: standalone" configuration. ' +
+        'Use "node .next/standalone/server.js" instead.',
+    )
+  }
   return config
 }
 

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/cli/typegen.ts

@@ -57,7 +57,10 @@ function routeEntry(route: RouteManifestEntry) {
 }
 
 async function writeChecks(config: ResolvedConfig, routes: RouteManifestEntry[]) {
-  const checksDir = path.join(config.typesPath, 'checks')
+  const checksDir = config.checksPath
+  // Checks used to live under typesPath, which the app's own tsconfig includes; a stale
+  // copy there fails the app's compiler on pnext internals, so heal that on every generate.
+  await rm(path.join(config.typesPath, 'checks'), { recursive: true, force: true })
   await rm(checksDir, { recursive: true, force: true })
   await ensureDir(checksDir)