@rshono/create 1.0.0-rc.0

package/templates/biome/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
+  "files": { "includes": ["**", "!dist", "!wrangler.jsonc"] },
+  "formatter": { "indentStyle": "space", "indentWidth": 2, "lineWidth": 140 },
+  "javascript": { "formatter": { "quoteStyle": "single", "jsxQuoteStyle": "double" } },
+  "linter": { "enabled": true, "rules": { "preset": "recommended" } }
+}

package/templates/biome-tailwind/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
+  "files": { "includes": ["**", "!dist", "!wrangler.jsonc", "!**/*.css"] },
+  "formatter": { "indentStyle": "space", "indentWidth": 2, "lineWidth": 140 },
+  "javascript": { "formatter": { "quoteStyle": "single", "jsxQuoteStyle": "double" } },
+  "linter": { "enabled": true, "rules": { "preset": "recommended" } }
+}

package/templates/oxfmt/_oxfmtrc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "ignorePatterns": ["wrangler.jsonc"]
+}

package/templates/oxlint/_oxlintrc.json

@@ -0,0 +1,7 @@
+{
+  "plugins": ["typescript", "react"],
+  "categories": {
+    "correctness": "error"
+  },
+  "ignorePatterns": ["dist"]
+}

package/templates/prettier/_prettierignore

@@ -0,0 +1,10 @@
+node_modules/
+dist/
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+bun.lock
+
+# Written by `rshono build` for the Cloudflare target, in the shape the build decided. Yours to edit —
+# just not the formatter's to reflow on every build.
+wrangler.jsonc

package/templates/prettier/_prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://www.schemastore.org/prettierrc.json",
+  "printWidth": 140,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/templates/tailwind/postcss.config.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,45 @@
+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
+  // renderTimeout: 10_000, // ms deadline for a request (action + flight + SSR)
+  // compress: true,      // gzip; turn off behind a proxy that already does 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.
+   */
+  rspack(config) {
+    config.module!.rules!.push({ test: /\.css$/i, use: ['postcss-loader'], type: 'css/auto' });
+  },
+});

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

@@ -0,0 +1,50 @@
+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';
+
+/**
+ * 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>) {
+  return (
+    <Layout description="A new rshono app.">
+      <h1 className="mb-2 text-4xl font-semibold tracking-tight">{publicEnv.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.
+      </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>
+          <code>src/routes.ts</code> — the route table, the one file rshono requires
+        </li>
+        <li>
+          <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
+        </li>
+        <li>
+          <code>rshono.config.ts</code> — deploy target, security and build settings
+        </li>
+      </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>.
+      </p>
+    </Layout>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { NavigationProgress } from '@rshono/core/client';
+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 function Layout({ title, description, children }: { title?: string; description?: string; children: ReactNode }) {
+  const heading = title ? `${title} · ${publicEnv.appName}` : publicEnv.appName;
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{heading}</title>
+        {description && <meta name="description" content={description} />}
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+      </head>
+      <body className="bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-100">
+        {/* Paints during a soft navigation, so a slow page still feels answered. */}
+        <NavigationProgress />
+        <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}
+            </a>
+            {/* `data-prefetch` warms a page on hover; `data-native` opts a link out of soft navigation. */}
+            <a href="/api/health" data-native className="text-sm">
+              /api/health
+            </a>
+          </nav>
+        </header>
+        <main className="mx-auto max-w-2xl px-6 pt-4 pb-16">{children}</main>
+        <footer className="mx-auto max-w-2xl border-t border-zinc-200 px-6 py-8 text-sm text-zinc-500 dark:border-zinc-800 dark:text-zinc-400">
+          <p>
+            Built with <a href="https://github.com/rshono/rshono">rshono</a> — Hono + Rspack + React Server Components.
+          </p>
+        </footer>
+      </body>
+    </html>
+  );
+}

package/templates/tailwind/src/styles.css

@@ -0,0 +1,40 @@
+@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;
+  }
+
+  code {
+    @apply rounded border border-zinc-200 bg-white px-1.5 py-0.5 font-mono text-[0.875em] dark:border-zinc-800 dark:bg-zinc-900;
+  }
+
+  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;
+  }
+}