@rshono/create 1.0.0-rc.4 → 1.0.0-rc.6

package/README.md

@@ -50,21 +50,20 @@ presets — a target added to rshono appears here with no edit.
 ## What you get
 
 ```
-rshono.config.ts        the chosen deploy target; everything else commented with its default
+rshono.config.ts        the chosen deploy target; every other setting takes its default
 tsconfig.json           strict, with @/* → ./src/*
 .env                    committed defaults; secrets go in .env.local
 public/                 favicon.svg, robots.txt
-src/routes.ts           one page, a 404 and a 500, with the other route kinds commented
-src/server.ts           AppEnv, request-id middleware, error reporting, /api/health, redirects, AppType
-src/actions.ts          a 'use server' action, called from a form that works without JavaScript
-src/components/         layout, home, greet-form ('use client'), 404, 500
-src/lib/env.ts          both sides of the PUBLIC_ boundary in one place
+src/routes.ts           one page, a 404 and a 500
+src/server.ts           error reporting, trailing-slash and old-path redirects, AppType
+src/components/         layout, home, 404, 500
 src/styles.css          element-level CSS, or the Tailwind entry
 pnpm-workspace.yaml     pnpm only: which dependency install scripts this app runs (none of them)
 ```
 
-Then, if the dependencies were installed, the scaffold is run through its own formatter — so a fresh
-project passes its own `format:check` rather than reporting a diff nobody made.
+Scaffolding runs the install and nothing else — no formatter, no linter. The templates are written to
+satisfy every formatter option at its configured width, so a fresh project passes its own `format:check`
+without a write pass first.
 
 `react` and `react-dom` are pinned **exactly**, at the versions the framework is tested against, and those
 pins are generated from rshono's own manifest. That is not tidiness: the RSC runtime reaches into React's

package/dist/api.mjs

@@ -79,7 +79,7 @@ __webpack_require__.d(__webpack_exports__, {
 
 ;// CONCATENATED MODULE: ./src/generated/framework.ts
 // GENERATED by scripts/codegen.mjs from packages/core — do not edit. Run `pnpm --filter @rshono/create codegen`.
-/** The framework release a scaffolded app is pinned to: this package and rshono ship together. */ const RSHONO_VERSION = '1.0.0-rc.4';
+/** The framework release a scaffolded app is pinned to: this package and rshono ship together. */ const RSHONO_VERSION = '1.0.0-rc.6';
 /**
  * The Node range rshono itself declares, restated in every scaffolded app's `engines` — so a CI image
  * or a contributor on an older Node hears it from their package manager rather than from a stack trace.
@@ -743,12 +743,6 @@ function packageManager(name, version) {
  */ function runInstall(pm, cwd) {
     return run(pm, pm.install, cwd);
 }
-/** `<pm> run <script>` — the one form every package manager accepts, Yarn v1 included. */ function runScript(pm, script, cwd) {
-    return run(pm, [
-        'run',
-        script
-    ], cwd);
-}
 function run(pm, args, cwd) {
     const result = spawnSync(pm.name, args, {
         cwd,

package/dist/cli.mjs

@@ -2943,7 +2943,7 @@ function hasGit(cwd) {
 
 ;// CONCATENATED MODULE: ./src/generated/framework.ts
 // GENERATED by scripts/codegen.mjs from packages/core — do not edit. Run `pnpm --filter @rshono/create codegen`.
-/** The framework release a scaffolded app is pinned to: this package and rshono ship together. */ const RSHONO_VERSION = '1.0.0-rc.4';
+/** The framework release a scaffolded app is pinned to: this package and rshono ship together. */ const RSHONO_VERSION = '1.0.0-rc.6';
 /**
  * The Node range rshono itself declares, restated in every scaffolded app's `engines` — so a CI image
  * or a contributor on an older Node hears it from their package manager rather than from a stack trace.
@@ -3628,12 +3628,6 @@ function packageManager(name, version) {
  */ function runInstall(pm, cwd) {
     return run(pm, pm.install, cwd);
 }
-/** `<pm> run <script>` — the one form every package manager accepts, Yarn v1 included. */ function runScript(pm, script, cwd) {
-    return run(pm, [
-        'run',
-        script
-    ], cwd);
-}
 function run(pm, args, cwd) {
     const result = spawnSync(pm.name, args, {
         cwd,
@@ -3846,7 +3840,7 @@ function fail(message) {
 async function main() {
     const { values, positionals } = parse();
     if (values.help) return console.log(HELP);
-    if (values.version) return console.log("1.0.0-rc.4");
+    if (values.version) return console.log("1.0.0-rc.6");
     /*
    * A pipe, a CI job or an agent gets the defaults rather than a prompt nothing can answer. Both streams
    * have to be a terminal: the prompts draw on stdout but *read from stdin*, so `echo | npx @rshono/create`
@@ -3986,16 +3980,6 @@ async function main() {
         installed = runInstall(pm, targetDir);
         if (!installed) log.warn(`${pm.name} install failed — the files are all written, so run it yourself in the project.`);
     }
-    /*
-   * Format the scaffold with the tool it was scaffolded with, so a fresh project passes its own
-   * `format:check` instead of reporting a diff nobody made. Needs the install, since the formatter is a
-   * devDependency — hence the skip, rather than a failure, when there is none.
-   *
-   * Whether there is a `format` script is the plan's answer, not the formatter answer's: `--formatter
-   * none --linter biome` has no formatter and a `format` script all the same, because Biome brings one.
-   */ if (installed && plan.features.some((feature)=>feature.scripts?.format)) {
-        if (!runScript(pm, 'format', targetDir)) log.warn(`\`${pm.run} format\` failed — the scaffold is written, just not formatted.`);
-    }
     if (git) {
         if (!hasGit(targetDir)) {
             log.warn('git was not found on PATH — skipped.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rshono/create",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.6",
   "description": "Scaffold a new rshono app — Hono + Rspack + React Server Components",
   "author": "Lasse <lasse@lassetange.com> (https://www.lassetange.com)",
   "license": "ISC",
@@ -46,7 +46,7 @@
     "@rspack/core": "2.1.5",
     "@types/node": "^26.1.1",
     "typescript": "^7.0.2",
-    "@rshono/core": "1.0.0-rc.4"
+    "@rshono/core": "1.0.0-rc.6"
   },
   "scripts": {
     "build": "node scripts/codegen.mjs && node scripts/build.mjs",

package/templates/base/README.md

@@ -1,7 +1,5 @@
 # {{PROJECT_NAME}}
 
-A [rshono](https://github.com/rshono/rshono) app — [Hono](https://hono.dev) + [Rspack](https://rspack.rs) + [React Server Components](https://react.dev/reference/rsc/server-components).
-
 ```bash
 {{PM_RUN}} dev        # dev server with HMR, http://localhost:3000
 {{PM_RUN}} build      # production build for {{DEPLOY_TARGET}}
@@ -18,9 +16,7 @@ public/            served verbatim at the web root (favicon.svg → /favicon.svg
 src/
   routes.ts        the route table — the one file rshono requires
   server.ts        a Hono app: middleware, API routes, redirects, error reporting
-  actions.ts       'use server' functions the browser can call
   components/      pages and components
-  lib/             everything else
   styles.css       imported by the layout, so it loads with the page
 ```
 
@@ -31,7 +27,7 @@ Interactive parts are `'use client'` components a page imports — only those sh
 
 `.env` holds committed defaults; `.env.local` overrides it and is gitignored. Only `PUBLIC_`-prefixed
 variables reach the browser — everything else is server-only, and a stray read of it in client code
-compiles to `undefined` rather than shipping. `src/lib/env.ts` is where both sides are read.
+compiles to `undefined` rather than shipping. `src/components/layout.tsx` reads `PUBLIC_APP_NAME` that way.
 
 ## Deploying
 

package/templates/base/_env

@@ -1,7 +1,4 @@
-# Committed defaults — safe to share, and the values a fresh clone starts with.
-#
-# Secrets go in `.env.local`, which is gitignored and loaded first, so a value there wins over this
-# file. The real environment wins over both.
+# Every variable here is on `process.env` — the layout reads `process.env.PUBLIC_APP_NAME`.
 #
 # Only `PUBLIC_`-prefixed variables are compiled into the browser bundle. Anything else is server-only:
 # a stray read of it in client code compiles to `undefined` rather than shipping.

package/templates/base/rshono.config.ts

@@ -1,33 +1,5 @@
 import { defineConfig } from '@rshono/core';
 
-/**
- * Every field is optional — delete this file to accept all the defaults. The commented lines are the
- * defaults, kept as documentation of what is there to change.
- *
- * The framework settings are compiled into the server bundle at build time, so changing one means a
- * rebuild; there is no env-var interface for them. `--port`/`PORT` and `HOST` are the two exceptions,
- * and they win over what is written here.
- */
 export default defineConfig({
-  /** Where `build` targets. Overridable per build with `--deploy` or `RSHONO_DEPLOY`. */
   deploy: '{{DEPLOY_TARGET}}',
-
-  // The public origin, baked into prerendered pages' absolute URLs. Set it if you use `render: 'static'`
-  // and build canonical tags, `og:url` or absolute links — there is no request to read a Host from.
-  // siteUrl: 'https://example.com',
-
-  // port: 3000,          // default for dev/start
-  // host: '0.0.0.0',     // bind address for start
-
-  // trustProxy: false,   // honour X-Forwarded-Host/-Proto — only behind a proxy you control
-  // checkOrigin: true,   // CSRF origin check on server-action POSTs
-  // allowedOrigins: [],  // extra origins allowed to post actions
-  // csp: false,          // strict per-request-nonce Content-Security-Policy
-  // cspDirectives: {},   // widen it, e.g. { 'img-src': "'self' https://cdn.example.com" }
-  // bodySizeLimit: '1mb',// request body cap before a 413; false disables it
-
-  // Escape hatch: mutate the generated Rspack config just before it compiles. Called once per compiler.
-  // rspack(config, { isServer, isDev }) {
-  //   return config;
-  // },
 });

package/templates/base/src/components/404.tsx

@@ -1,7 +1,6 @@
 import type { PageProps } from '@rshono/core';
 import { Layout } from './layout';
 
-/** Declared as `notFound` in routes.ts. Answers unmatched paths, and any `notFound()` call, with a 404. */
 export default function NotFound({ url }: PageProps) {
   return (
     <Layout title="Not found">

package/templates/base/src/components/500.tsx

@@ -1,12 +1,6 @@
 import type { ErrorPageProps } from '@rshono/core';
 import { Layout } from './layout';
 
-/**
- * Declared as `error` in routes.ts. Answers a request that threw, with a 500.
- *
- * `error.message` is the real message in development and a generic `'Internal Server Error'` in
- * production, where `error.stack` is absent — so this component can show it without leaking anything.
- */
 export default function ServerError({ error }: ErrorPageProps) {
   return (
     <Layout title="Something went wrong">

package/templates/base/src/components/home.tsx

@@ -1,29 +1,14 @@
 import type { PageProps } from '@rshono/core';
-import { publicEnv } from '../lib/env';
-import type { AppEnv } from '../server';
-import { GreetForm } from './greet-form';
-import { Layout } from './layout';
+import { appName, Layout } from './layout';
 
-/**
- * A page is a React **server component**: it runs on the server only, may be `async`, and can await data
- * directly — no loaders, no client bundle for any of this.
- *
- * The `AppEnv` type argument is what types `ctx.var` key by key; without it `ctx.var` is an open record.
- */
-export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
+export default function Home({ url }: PageProps<'/'>) {
   return (
     <Layout description="A new rshono app.">
-      <h1>{publicEnv.appName}</h1>
+      <h1>{appName}</h1>
       <p>
-        Edit <code>src/components/home.tsx</code> and save. The page re-renders in place — the form below keeps whatever you have typed in it.
+        Edit <code>src/components/home.tsx</code> and save — the page re-renders in place.
       </p>
 
-      <h2>Server actions</h2>
-      <p>
-        This form calls a <code>'use server'</code> function in <code>src/actions.ts</code>. It works before hydration and with JavaScript disabled.
-      </p>
-      <GreetForm />
-
       <h2>Where things are</h2>
       <ul>
         <li>
@@ -33,7 +18,7 @@ export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
           <code>src/server.ts</code> — a Hono app for middleware and API routes, mounted ahead of the pages
         </li>
         <li>
-          <code>src/components/</code> — pages and components; <code>src/lib/</code> — everything else
+          <code>src/components/</code> — pages and components
         </li>
         <li>
           <code>rshono.config.ts</code> — deploy target, security and build settings
@@ -41,9 +26,7 @@ export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
       </ul>
 
       <p>
-        {/* `ctx` is the request context — cookies, headers, env, middleware variables — handed to the page as a
-            prop, so reading it needs no import. It is server-only and never crosses into a client component. */}
-        Rendered on the server for <code>{url.pathname}</code>, request <code>{ctx.var.requestId}</code>.
+        Rendered on the server for <code>{url.pathname}</code>.
       </p>
     </Layout>
   );

package/templates/base/src/components/layout.tsx

@@ -1,13 +1,10 @@
 import type { ReactNode } from 'react';
-import { publicEnv } from '../lib/env';
 import '../styles.css';
 
-/**
- * A page renders the whole document, so the shell lives in one component every page wraps its content
- * in. Importing the stylesheet here is what attaches it to each of those pages.
- */
+export const appName = process.env.PUBLIC_APP_NAME ?? '{{PROJECT_NAME}}';
+
 export function Layout({ title, description, children }: { title?: string; description?: string; children: ReactNode }) {
-  const heading = title ? `${title} · ${publicEnv.appName}` : publicEnv.appName;
+  const heading = title ? `${title} · ${appName}` : appName;
 
   return (
     <html lang="en">
@@ -22,9 +19,8 @@ export function Layout({ title, description, children }: { title?: string; descr
         <header>
           <nav>
             <a href="/">
-              <strong>{publicEnv.appName}</strong>
+              <strong>{appName}</strong>
             </a>
-            {/* `data-native` opts a link out of soft navigation and does a full browser load. */}
             <a href="/api/health" data-native>
               /api/health
             </a>

package/templates/base/src/routes.ts

@@ -1,32 +1,7 @@
 import { defineRoutes } from '@rshono/core';
 
-/**
- * The one file rshono requires. It only ever runs on the server, so importing server-only modules from
- * it — inside `staticPaths`, say — is safe.
- *
- * Write each page as the inline `component: () => import('…')` thunk you see below: the build detects
- * that exact form and attaches the page's own JS and CSS to it, which is what makes assets code-split
- * per route.
- */
 export const routes = defineRoutes({
-  routes: [
-    { path: '/', component: () => import('./components/home') },
-
-    // A page with params. `PageProps<'/posts/:slug'>` types `params.slug` for the component.
-    // { path: '/posts/:slug', component: () => import('./components/post') },
-
-    // Prerendered at build time, one file per param set, served from disk.
-    // {
-    //   path: '/docs/:slug',
-    //   render: 'static',
-    //   component: () => import('./components/doc'),
-    //   staticPaths: async () => [{ slug: 'getting-started' }],
-    // },
-
-    // A raw Hono handler instead of a page — for anything that isn't HTML. The other place for these
-    // is src/server.ts, which is the better home for a group of them.
-    // { type: 'endpoint', path: '/api/posts', server: () => import('./api/posts') },
-  ],
+  routes: [{ path: '/', component: () => import('./components/home') }],
   notFound: { component: () => import('./components/404') },
   error: { component: () => import('./components/500') },
 });

package/templates/base/src/server.ts

@@ -3,20 +3,12 @@ import { Hono } from 'hono';
 import { trimTrailingSlash } from 'hono/trailing-slash';
 
 /**
- * What this app's middleware puts on the Hono context. Pass it to `PageProps<path, AppEnv>` (or
- * `getRequestContext<AppEnv>()`) and `ctx.var` is typed key by key instead of an open record — see
- * `components/home.tsx`.
+ * Mounted at `/` ahead of the page routes, so middleware registered here wraps page requests too — auth,
+ * logging, headers. The flip side: a terminal handler at a page's path shadows the page.
  */
-export type AppEnv = { Variables: { requestId: string } };
+const server = new Hono();
 
-const server = new Hono<AppEnv>();
-const startedAt = Date.now();
-
-/**
- * Where an error tracker goes. Registered at module load — this file is imported as the server starts —
- * so every error the framework catches reaches one place: a thrown action, a failed render, SSR falling
- * over. Swap the log for `Sentry.captureException(error)` or whatever you use.
- */
+/** Every error the framework catches lands here: a thrown action, a failed render, SSR falling over. */
 onServerError((error, { source, request }) => {
   const message = error instanceof Error ? error.message : String(error);
   console.error(`[error] ${source} ${new URL(request.url).pathname}: ${message}`);
@@ -25,35 +17,14 @@ onServerError((error, { source, request }) => {
 /** `/about/` and `/about` should not be two pages. */
 server.use(trimTrailingSlash({ alwaysRedirect: true }));
 
-/**
- * This sub-app is mounted at `/` *ahead of* the page routes, so middleware registered here wraps page
- * requests too — auth, logging, headers. The flip side: a terminal handler at the same path as a page
- * route shadows the page.
- */
-server.use('*', async (c, next) => {
-  c.set('requestId', crypto.randomUUID());
-  const start = performance.now();
-  await next();
-  c.res.headers.set('X-Response-Time', `${(performance.now() - start).toFixed(1)} ms`);
-});
-
 /** Old paths that should keep working. One place to add to, rather than a handler each. */
-const REDIRECTS: Record<string, string> = {
-  '/home': '/',
-};
+const REDIRECTS: Record<string, string> = { '/home': '/' };
 
 for (const [from, to] of Object.entries(REDIRECTS)) {
   server.get(from, (c) => c.redirect(to, 301));
 }
 
-server.get('/api/health', (c) => {
-  return c.json({ status: 'ok', uptime: (Date.now() - startedAt) / 1000, requestId: c.var.requestId });
-});
-
 export default server;
 
-/**
- * End-to-end types for a client that calls this app: `hc<AppType>('/')` from `hono/client` gives typed
- * paths, params and responses, checked against the handlers above.
- */
+/** `hc<AppType>('/')` from `hono/client` gives paths, params and responses typed against the handlers above. */
 export type AppType = typeof server;

package/templates/base/src/styles.css

@@ -1,12 +1,3 @@
-/*
- * Deliberately element-level: nothing here names a class, so the markup in src/components stays plain
- * HTML you can restyle or replace wholesale without hunting for selectors.
- *
- * Rspack compiles this natively — there is no PostCSS anywhere in the framework. If you want a plugin
- * chain, add the loader in `rshono.config.ts`'s `rspack` hook; that, plus the packages, is all the
- * Tailwind setup is.
- */
-
 *,
 *::before,
 *::after {
@@ -38,12 +29,7 @@
 }
 
 body {
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    sans-serif;
+  font-family: ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
   line-height: 1.6;
   color: var(--text);
   background: var(--bg);
@@ -127,52 +113,3 @@ pre {
   background: var(--surface);
   font-size: 0.8125rem;
 }
-
-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-label {
-  flex-basis: 100%;
-  font-size: 0.875rem;
-  color: var(--muted);
-}
-
-input {
-  flex: 1 1 12rem;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: inherit;
-  font: inherit;
-}
-
-button {
-  padding: 0.5rem 1rem;
-  border: 0;
-  border-radius: 6px;
-  background: var(--accent);
-  color: #fff;
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-button:disabled {
-  opacity: 0.6;
-  cursor: progress;
-}
-
-output {
-  flex-basis: 100%;
-  font-size: 0.9375rem;
-  color: var(--muted);
-}

package/templates/biome/biome.json

@@ -3,5 +3,6 @@
   "files": { "includes": ["**", "!dist", "!.wrangler", "!.vercel", "!.netlify", "!wrangler.jsonc"] },
   "formatter": { "indentStyle": "space", "indentWidth": 2, "lineWidth": 140 },
   "javascript": { "formatter": { "quoteStyle": "single", "jsxQuoteStyle": "double" } },
+  "css": { "formatter": { "quoteStyle": "single" } },
   "linter": { "enabled": true, "rules": { "preset": "recommended" } }
 }

package/templates/eslint/eslint.config.mjs

@@ -2,30 +2,15 @@ import js from '@eslint/js';
 import reactHooks from 'eslint-plugin-react-hooks';
 import tseslint from 'typescript-eslint';
 
-/**
- * Flat config, with type-aware rules — the reason to run ESLint over a syntax-only linter. `projectService`
- * builds the same program `tsc` does from tsconfig.json, so a rule can ask what a value actually *is*:
- * an unawaited promise, a `catch` that swallows an error, a `String()` around something that is not one.
- *
- * The cost is that ESLint needs TypeScript to answer, which is why this app pins TypeScript 6 —
- * typescript-eslint reads the compiler API directly and accepts nothing newer. `npm run typecheck` is
- * still the thing that decides whether the app compiles; these rules only see what it sees.
- */
 export default tseslint.config(
-  // ESLint's own default ignores cover node_modules and nothing else, so the build output — and whatever
-  // the deploy target leaves beside it — would otherwise be linted as if you had written it.
   { ignores: ['dist/**', '.wrangler/**', '.vercel/**', '.netlify/**'] },
   js.configs.recommended,
   tseslint.configs.recommendedTypeChecked,
-  // The rules of hooks: the one class of React mistake no type checker catches, and the reason a React
-  // app wants a linter at all.
   reactHooks.configs.flat['recommended-latest'],
   {
     languageOptions: {
       parserOptions: { projectService: true, tsconfigRootDir: import.meta.dirname },
     },
   },
-  // This file and any other plain JavaScript sits outside the TypeScript program, so the type-aware rules
-  // have nothing to run against and would report every file as unconfigured.
   { files: ['**/*.{js,mjs,cjs}'], extends: [tseslint.configs.disableTypeChecked] },
 );

package/templates/oxfmt/_oxfmtrc.json

@@ -3,5 +3,5 @@
   "printWidth": 140,
   "singleQuote": true,
   "trailingComma": "all",
-  "ignorePatterns": ["dist", ".wrangler", ".vercel", ".netlify", "wrangler.jsonc"]
+  "ignorePatterns": ["dist", ".wrangler", ".vercel", ".netlify", "wrangler.jsonc", "package.json"]
 }

package/templates/tailwind/postcss.config.mjs

@@ -1,7 +1,3 @@
-/**
- * The plugin list. postcss-loader finds this file on its own; what puts postcss-loader in front of
- * Rspack's CSS parser in the first place is the rule in `rshono.config.ts`.
- */
 export default {
   plugins: {
     '@tailwindcss/postcss': {},

package/templates/tailwind/rshono.config.ts

@@ -1,42 +1,8 @@
 import { defineConfig } from '@rshono/core';
 
-/**
- * Every field is optional — delete this file to accept all the defaults. The commented lines are the
- * defaults, kept as documentation of what is there to change.
- *
- * The framework settings are compiled into the server bundle at build time, so changing one means a
- * rebuild; there is no env-var interface for them. `--port`/`PORT` and `HOST` are the two exceptions,
- * and they win over what is written here.
- */
 export default defineConfig({
-  /** Where `build` targets. Overridable per build with `--deploy` or `RSHONO_DEPLOY`. */
   deploy: '{{DEPLOY_TARGET}}',
-
-  // The public origin, baked into prerendered pages' absolute URLs. Set it if you use `render: 'static'`
-  // and build canonical tags, `og:url` or absolute links — there is no request to read a Host from.
-  // siteUrl: 'https://example.com',
-
-  // port: 3000,          // default for dev/start
-  // host: '0.0.0.0',     // bind address for start
-
-  // trustProxy: false,   // honour X-Forwarded-Host/-Proto — only behind a proxy you control
-  // checkOrigin: true,   // CSRF origin check on server-action POSTs
-  // allowedOrigins: [],  // extra origins allowed to post actions
-  // csp: false,          // strict per-request-nonce Content-Security-Policy
-  // cspDirectives: {},   // widen it, e.g. { 'img-src': "'self' https://cdn.example.com" }
-  // bodySizeLimit: '1mb',// request body cap before a 413; false disables it
-
-  /**
-   * Tailwind, and the only thing the build needs to know about it.
-   *
-   * Rspack compiles CSS natively, which is fast and is all a plain stylesheet needs — but that parser
-   * reads *finished* CSS, and `@import 'tailwindcss'`, `@theme` and `@apply` are not that. Tailwind is a
-   * PostCSS plugin, so it has to run in front of the parser, which is what this rule does. The plugin
-   * list itself is in `postcss.config.mjs`, where postcss-loader looks for it.
-   *
-   * The hook is called once per compiler, so the rule reaches the client and the server graph both.
-   * Delete all of this, and the four Tailwind packages, to go back to plain CSS.
-   */
+  /** Tailwind is a PostCSS plugin, so postcss-loader has to run ahead of Rspack's native CSS parser. */
   rspack(config) {
     config.module!.rules!.push({ test: /\.css$/i, use: ['postcss-loader'], type: 'css/auto' });
   },

package/templates/tailwind/src/components/home.tsx

@@ -1,29 +1,14 @@
 import type { PageProps } from '@rshono/core';
-import { publicEnv } from '../lib/env';
-import type { AppEnv } from '../server';
-import { GreetForm } from './greet-form';
-import { Layout } from './layout';
+import { appName, Layout } from './layout';
 
-/**
- * A page is a React **server component**: it runs on the server only, may be `async`, and can await data
- * directly — no loaders, no client bundle for any of this.
- *
- * The `AppEnv` type argument is what types `ctx.var` key by key; without it `ctx.var` is an open record.
- */
-export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
+export default function Home({ url }: PageProps<'/'>) {
   return (
     <Layout description="A new rshono app.">
-      <h1 className="mb-2 text-4xl font-semibold tracking-tight">{publicEnv.appName}</h1>
+      <h1 className="mb-2 text-4xl font-semibold tracking-tight">{appName}</h1>
       <p className="mb-4">
-        Edit <code>src/components/home.tsx</code> and save. The page re-renders in place — the form below keeps whatever you have typed in it.
+        Edit <code>src/components/home.tsx</code> and save — the page re-renders in place.
       </p>
 
-      <h2 className="mt-10 mb-2 text-lg font-semibold">Server actions</h2>
-      <p className="mb-4">
-        This form calls a <code>'use server'</code> function in <code>src/actions.ts</code>. It works before hydration and with JavaScript disabled.
-      </p>
-      <GreetForm />
-
       <h2 className="mt-10 mb-2 text-lg font-semibold">Where things are</h2>
       <ul className="mb-4 list-disc space-y-1 pl-5">
         <li>
@@ -33,7 +18,7 @@ export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
           <code>src/server.ts</code> — a Hono app for middleware and API routes, mounted ahead of the pages
         </li>
         <li>
-          <code>src/components/</code> — pages and components; <code>src/lib/</code> — everything else
+          <code>src/components/</code> — pages and components
         </li>
         <li>
           <code>rshono.config.ts</code> — deploy target, security and build settings
@@ -41,9 +26,7 @@ export default function Home({ url, ctx }: PageProps<'/', AppEnv>) {
       </ul>
 
       <p className="text-sm text-zinc-500 dark:text-zinc-400">
-        {/* `ctx` is the request context — cookies, headers, env, middleware variables — handed to the page as a
-            prop, so reading it needs no import. It is server-only and never crosses into a client component. */}
-        Rendered on the server for <code>{url.pathname}</code>, request <code>{ctx.var.requestId}</code>.
+        Rendered on the server for <code>{url.pathname}</code>.
       </p>
     </Layout>
   );

package/templates/tailwind/src/components/layout.tsx

@@ -1,13 +1,10 @@
 import type { ReactNode } from 'react';
-import { publicEnv } from '../lib/env';
 import '../styles.css';
 
-/**
- * A page renders the whole document, so the shell lives in one component every page wraps its content
- * in. Importing the stylesheet here is what attaches it to each of those pages.
- */
+export const appName = process.env.PUBLIC_APP_NAME ?? '{{PROJECT_NAME}}';
+
 export function Layout({ title, description, children }: { title?: string; description?: string; children: ReactNode }) {
-  const heading = title ? `${title} · ${publicEnv.appName}` : publicEnv.appName;
+  const heading = title ? `${title} · ${appName}` : appName;
 
   return (
     <html lang="en">
@@ -22,9 +19,8 @@ export function Layout({ title, description, children }: { title?: string; descr
         <header className="mx-auto max-w-2xl px-6 py-5">
           <nav className="flex items-center justify-between gap-4">
             <a href="/" className="font-semibold no-underline">
-              {publicEnv.appName}
+              {appName}
             </a>
-            {/* `data-native` opts a link out of soft navigation and does a full browser load. */}
             <a href="/api/health" data-native className="text-sm">
               /api/health
             </a>

package/templates/tailwind/src/styles.css

@@ -1,10 +1,5 @@
 @import 'tailwindcss';
 
-/*
- * Element defaults for the parts of the app whose markup carries no classes — the form in
- * `components/greet-form.tsx`, and code and links wherever they appear. Everything else is styled with
- * utilities in the markup; see `components/layout.tsx` and `components/home.tsx`.
- */
 @layer base {
   a {
     @apply text-blue-600 underline decoration-1 underline-offset-2 dark:text-blue-400;
@@ -17,24 +12,4 @@
   pre {
     @apply overflow-x-auto rounded-lg border border-zinc-200 bg-white p-4 font-mono text-xs dark:border-zinc-800 dark:bg-zinc-900;
   }
-
-  form {
-    @apply flex flex-wrap items-center gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900;
-  }
-
-  label {
-    @apply basis-full text-sm text-zinc-500 dark:text-zinc-400;
-  }
-
-  input {
-    @apply flex-1 basis-48 rounded-md border border-zinc-200 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950;
-  }
-
-  button {
-    @apply cursor-pointer rounded-md bg-blue-600 px-4 py-2 font-medium text-white disabled:cursor-progress disabled:opacity-60;
-  }
-
-  output {
-    @apply basis-full text-zinc-500 dark:text-zinc-400;
-  }
 }

package/templates/base/src/actions.ts

@@ -1,22 +0,0 @@
-'use server';
-
-/**
- * A server action: an ordinary async function the browser can call. React hands the client an id for
- * this export and posts to it, so **every `'use server'` export is a public HTTP endpoint** —
- * authenticate, authorize and validate the arguments exactly as you would in a route handler. The
- * framework's CSRF check proves a request came from your own site; it says nothing about who sent it.
- *
- * The signature is the one `useActionState` expects: previous state first, then the form data.
- */
-export async function greet(_previous: string | null, formData: FormData): Promise<string> {
-  // A form field is a string or a File, never only a string — a file input posted under this name would
-  // stringify to "[object File]" rather than fail. Narrowing is the validation the endpoint owes itself.
-  const field = formData.get('name');
-  const name = typeof field === 'string' ? field.trim() : '';
-  if (!name) return 'Type a name first.';
-
-  // Where real work goes — a database write, an email, a queue push.
-  await new Promise((resolve) => setTimeout(resolve, 300));
-
-  return `Hello, ${name}. This ran on the server.`;
-}

package/templates/base/src/components/greet-form.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import { useActionState } from 'react';
-import { greet } from '../actions';
-
-/**
- * The client half. `'use client'` is the boundary: this module ships to the browser and hydrates, while
- * everything that only renders it stays on the server.
- *
- * Wiring the action to `<form action>` means it works before hydration and with JavaScript switched off
- * — the browser posts the form, the server runs the action and answers with a fresh page. That is what
- * progressive enhancement buys, and it costs nothing here.
- */
-export function GreetForm() {
-  const [message, action, pending] = useActionState(greet, null);
-
-  return (
-    <form action={action}>
-      <label htmlFor="name">Your name</label>
-      <input id="name" name="name" placeholder="Ada" autoComplete="off" />
-      <button type="submit" disabled={pending}>
-        {pending ? 'Saying hello…' : 'Say hello'}
-      </button>
-      {message && <output>{message}</output>}
-    </form>
-  );
-}

package/templates/base/src/lib/env.ts

@@ -1,26 +0,0 @@
-/**
- * Environment access in one place, on the right side of the client/server line.
- *
- * The boundary is the RSC directives, not filenames. In a `'use client'` module — and in its SSR pass —
- * `process.env` is replaced at build time with a literal holding `NODE_ENV` and the `PUBLIC_`-prefixed
- * variables only, so a secret read there compiles to `undefined` and cannot ship. Server components and
- * `'use server'` actions read the real environment.
- */
-
-/** Safe anywhere: `PUBLIC_` variables are the ones compiled into the browser bundle. */
-export const publicEnv = {
-  appName: process.env.PUBLIC_APP_NAME ?? '{{PROJECT_NAME}}',
-};
-
-/**
- * Server-only. Throws rather than handing back `undefined`, so a missing secret fails at the point of
- * use with a name in the message instead of turning into a confusing error further down.
- *
- * Calling this from a client component would always throw — that view of `process.env` holds nothing but
- * `NODE_ENV` and the `PUBLIC_` set. Read secrets in server code and pass derived values down as props.
- */
-export function requireEnv(name: string): string {
-  const value = process.env[name];
-  if (!value) throw new Error(`Missing environment variable ${name} — add it to .env.local`);
-  return value;
-}