create-yerd 0.0.0-stage → 0.2.2

package/templates/minimal/src/routes/home.tsx

@@ -0,0 +1,44 @@
+import { Region, action, get, route, session, type Session } from "@toyz/yerd";
+
+/** What this page keeps in the visitor's session. No cookie until it changes. */
+class Visit {
+  clicks = 0;
+}
+
+/** The count, as a Region: the action sends back just this. */
+function Clicks({ count }: { count: number }) {
+  return (
+    <Region id="clicks" as="p">
+      Clicked {count} {count === 1 ? "time" : "times"}
+    </Region>
+  );
+}
+
+@route("/", { meta: { title: "Home" } })
+export class Home {
+  @session(Visit) accessor visit!: Session<Visit>;
+
+  @get page() {
+    return (
+      <>
+        <h1>Hello from yerd</h1>
+        <p>
+          Edit <code>src/routes/home.tsx</code> and save to see it change.
+        </p>
+        <Clicks count={this.visit.clicks} />
+        {/* Posts without a reload when the runtime is loaded, as a plain form when it isn't. */}
+        <form action={this.click}>
+          <button>Click</button>
+        </form>
+        <p>
+          <a href="https://toyz.github.io/yerd/">Read the guides</a>
+        </p>
+      </>
+    );
+  }
+
+  @action click() {
+    this.visit.clicks++;
+    return <Clicks count={this.visit.clicks} />;
+  }
+}

package/templates/minimal/src/styles.css

@@ -0,0 +1,32 @@
+/* Linked with <Stylesheet href="src/styles.css" />; hashed by `vite build`. */
+:root {
+  --bg: #fafaf9;
+  --text: #1c1917;
+  --muted: #78716c;
+  --accent: #c2410c;
+  --accent-ink: #ffffff;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1c1917;
+    --text: #f5f5f4;
+    --muted: #a8a29e;
+    --accent: #fb923c;
+    --accent-ink: #1c1917;
+  }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 ui-sans-serif, system-ui, sans-serif; }
+main { max-width: 640px; margin: 0 auto; padding: 64px 20px; }
+h1 { font-size: 2.4rem; line-height: 1.1; margin: 0 0 16px; }
+a { color: var(--accent); }
+code { font-size: 0.9em; }
+button {
+  font: inherit; padding: 8px 18px; border: 0; border-radius: 8px;
+  background: var(--accent); color: var(--accent-ink); cursor: pointer;
+}
+#clicks { font-variant-numeric: tabular-nums; color: var(--muted); }
+.error .status { font-size: 3rem; font-weight: 700; margin: 0; color: var(--muted); }

package/templates/minimal/test/app.test.ts

@@ -0,0 +1,35 @@
+import { afterAll, beforeAll, expect, it } from "vitest";
+import { createApp } from "../src/app.js";
+import "../src/routes/home.js";
+
+// The app main.ts serves, with the routes this file imports. No port is opened.
+const app = createApp({ handleSignals: false });
+beforeAll(() => app.boot());
+afterAll(() => app.stop());
+
+const html = { accept: "text/html" };
+
+it("renders the home page inside the layout", async () => {
+  const res = await app.request("/", { headers: html });
+  expect(res.status).toBe(200);
+  const body = await res.text();
+  expect(body).toContain("<title>Home · {{name}}</title>");
+  expect(body).toContain("Clicked 0 times");
+});
+
+it("counts clicks in the visitor's session", async () => {
+  const client = app.client();
+  await client.action("/", {});
+  const res = await client.action("/", {});
+  expect(res.status).toBe(200);
+  expect(await res.text()).toContain("Clicked 2 times");
+
+  // Another visitor has a session of their own.
+  expect(await app.client().page("/")).toContain("Clicked 0 times");
+});
+
+it("answers an unknown path with the error page", async () => {
+  const res = await app.request("/nope", { headers: html });
+  expect(res.status).toBe(404);
+  expect(await res.text()).toContain("Page not found");
+});

package/templates/minimal/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "lib": ["ES2023", "esnext.decorators", "DOM"],
+    "types": ["node"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@toyz/yerd"
+  },
+  "include": ["src", "test", "*.config.ts"]
+}

package/templates/minimal/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import yerd from "@toyz/yerd/vite";
+
+export default defineConfig({
+  // `client`: files `vite build` hashes; <Stylesheet> links them through the manifest.
+  plugins: [yerd({ entry: "/src/main.ts", client: ["src/styles.css"] })],
+});

package/templates/tailwind/_shared/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import yerd from "@toyz/yerd/vite";
+
+export default defineConfig({
+  // Tailwind builds src/styles.css; `client` makes `vite build` hash it for <Stylesheet>.
+  plugins: [tailwindcss(), yerd({ entry: "/src/main.ts", client: ["src/styles.css"] })],
+});

package/templates/tailwind/full/src/styles.css

@@ -0,0 +1,49 @@
+/*
+ * Linked with <Stylesheet href="src/styles.css" />. Tailwind builds it; `vite build` hashes it.
+ * The pages keep short class names, made of utilities here; utilities work in the TSX too.
+ */
+@import "tailwindcss";
+
+@layer base {
+  body { @apply bg-stone-50 text-stone-900 antialiased dark:bg-stone-950 dark:text-stone-100; }
+  h1 { @apply mb-4 text-3xl font-bold tracking-tight; }
+  a { @apply text-sky-800 underline-offset-2 hover:underline dark:text-sky-300; }
+  input { @apply rounded-lg border border-stone-300 bg-white px-3 py-1.5 dark:border-stone-700 dark:bg-stone-900; }
+  button { @apply cursor-pointer rounded-lg bg-sky-800 px-3.5 py-1.5 font-medium text-white hover:bg-sky-700 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-sky-300 dark:text-sky-950 dark:hover:bg-sky-200; }
+}
+
+@layer components {
+  .button { @apply inline-block rounded-lg bg-sky-800 px-3.5 py-1.5 font-medium text-white no-underline hover:bg-sky-700 hover:no-underline dark:bg-sky-300 dark:text-sky-950 dark:hover:bg-sky-200; }
+  button.link { @apply bg-transparent p-0 font-normal text-sky-800 underline hover:bg-transparent dark:bg-transparent dark:text-sky-300 dark:hover:bg-transparent; }
+
+  .top { @apply mx-auto flex max-w-3xl items-center gap-4 px-4 py-5; }
+  .brand { @apply mr-auto text-xl font-bold text-stone-900 no-underline hover:no-underline dark:text-stone-100; }
+  .cart-badge { @apply no-underline hover:no-underline; }
+  .badge { @apply inline-block min-w-[1.6em] rounded-full bg-sky-800 px-1.5 text-center text-white dark:bg-sky-300 dark:text-sky-950; }
+  .account { @apply flex items-center gap-2; }
+  main { @apply mx-auto max-w-3xl px-4 pb-12; }
+  .narrow { @apply max-w-md; }
+
+  .search { @apply mb-4 flex gap-2; }
+  .search input { @apply flex-1; }
+  .products { @apply grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3; }
+  .card { @apply grid content-start gap-1 rounded-xl border border-stone-200 bg-white p-3.5 dark:border-stone-800 dark:bg-stone-900; }
+  .price { @apply tabular-nums; }
+  .sold-out, .empty, .hint, .stock { @apply text-stone-500 dark:text-stone-400; }
+  .hint { @apply mt-4; }
+
+  .product { @apply grid justify-items-start gap-2; }
+  .product h1 { @apply m-0; }
+
+  .lines { @apply grid gap-2; }
+  .lines li { @apply flex flex-wrap items-center gap-3 border-b border-stone-200 py-2.5 dark:border-stone-800; }
+  .lines li > a { @apply flex-1; }
+  .total { @apply my-3 font-bold; }
+  .summary { @apply list-disc pl-5; }
+
+  .field { @apply mb-3 grid gap-1; }
+  .field-error, .form-error { @apply text-sm text-red-700 empty:hidden dark:text-red-400; }
+  [aria-invalid="true"] { @apply border-red-700 dark:border-red-400; }
+
+  .error-page .status { @apply m-0 text-5xl font-bold text-stone-500; }
+}

package/templates/tailwind/minimal/src/layouts.tsx

@@ -0,0 +1,33 @@
+import { Scripts, Stylesheet, type ErrorPageProps, type LayoutProps } from "@toyz/yerd";
+
+/** The document around every HTML response, error pages included. */
+export function RootLayout({ children, meta }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <title>{meta.title ? `${meta.title} · {{name}}` : "{{name}}"}</title>
+        {/* Tailwind's output: served by Vite in dev, the hashed file after `vite build`. */}
+        <Stylesheet href="src/styles.css" />
+        <Scripts />
+      </head>
+      <body class="min-h-dvh bg-stone-50 text-stone-900 antialiased dark:bg-stone-950 dark:text-stone-100">
+        <main class="mx-auto max-w-2xl px-5 py-16">{children}</main>
+      </body>
+    </html>
+  );
+}
+
+/** app.errorPage(): 404s and crashes render here, inside RootLayout. */
+export function ErrorPage({ status, message }: ErrorPageProps) {
+  return (
+    <section class="flex flex-col gap-3">
+      <p class="text-5xl font-bold text-stone-400">{status}</p>
+      <h1 class="text-3xl font-bold">{status === 404 ? "Page not found" : "Something went wrong"}</h1>
+      <p class="text-stone-600 dark:text-stone-400">{message}</p>
+      <a class="text-orange-700 underline dark:text-orange-400" href="/">Home</a>
+    </section>
+  );
+}

package/templates/tailwind/minimal/src/routes/home.tsx

@@ -0,0 +1,48 @@
+import { Region, action, get, route, session, type Session } from "@toyz/yerd";
+
+/** What this page keeps in the visitor's session. No cookie until it changes. */
+class Visit {
+  clicks = 0;
+}
+
+/** The count, as a Region: the action sends back just this. */
+function Clicks({ count }: { count: number }) {
+  return (
+    <Region id="clicks" as="p" class="mt-8 tabular-nums text-stone-500 dark:text-stone-400">
+      Clicked {count} {count === 1 ? "time" : "times"}
+    </Region>
+  );
+}
+
+@route("/", { meta: { title: "Home" } })
+export class Home {
+  @session(Visit) accessor visit!: Session<Visit>;
+
+  @get page() {
+    return (
+      <>
+        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+          Hello from <span class="text-orange-600">yerd</span>
+        </h1>
+        <p class="mt-4 text-lg text-stone-600 dark:text-stone-400">
+          Edit <code class="font-mono text-base">src/routes/home.tsx</code> and save to see it change.
+        </p>
+        <Clicks count={this.visit.clicks} />
+        {/* Posts without a reload when the runtime is loaded, as a plain form when it isn't. */}
+        <form class="mt-3" action={this.click}>
+          <button class="rounded-lg bg-orange-600 px-4 py-2 font-semibold text-white shadow-sm transition hover:bg-orange-500 active:translate-y-px">
+            Click
+          </button>
+        </form>
+        <p class="mt-10">
+          <a class="text-orange-700 underline dark:text-orange-400" href="https://toyz.github.io/yerd/">Read the guides</a>
+        </p>
+      </>
+    );
+  }
+
+  @action click() {
+    this.visit.clicks++;
+    return <Clicks count={this.visit.clicks} />;
+  }
+}

package/templates/tailwind/minimal/src/styles.css

@@ -0,0 +1,2 @@
+/* Linked with <Stylesheet href="src/styles.css" />. Tailwind builds it from the classes in src/; `vite build` hashes it. */
+@import "tailwindcss";