create-zerotal 1.0.0

package/templates/react/tests/smoke.test.ts

@@ -0,0 +1,69 @@
+/**
+ * The scaffold boots, serves its pages, and validates its form.
+ *
+ * A template ships with a `test` script, so it ships with something for that
+ * script to run — and this is the assertion that catches a broken starter:
+ * providers register, routes resolve, and a request completes. Delete it once
+ * you have real tests, or keep it as the shape to copy.
+ */
+import { beforeAll, afterAll, describe, test, expect } from 'bun:test';
+import { createTestApp, type TestApp } from '@zerotal/testing';
+
+let app: TestApp;
+
+beforeAll(async () => {
+  // Session encryption needs a key. Seed a deterministic one for tests; `??=`
+  // leaves a real key alone when the app's .env is present.
+  Bun.env.APP_KEY ??= 'test-app-key-aaaaaaaaaaaaaaaaaaaaaaaa';
+  app = await createTestApp(() => import('../bootstrap/app.ts').then((m) => m.default));
+});
+
+afterAll(() => app.close());
+
+describe('scaffold', () => {
+  test('boots and serves the home page', async () => {
+    const res = await app.get('/');
+
+    res.assertOk();
+    res.assertInertia('home');
+  });
+
+  test('renders the other pages', async () => {
+    (await app.get('/about')).assertInertia('about');
+    (await app.get('/contact')).assertInertia('contact');
+  });
+
+  test('answers HEAD on the home route, as probes and load balancers do', async () => {
+    const res = await app.head('/');
+    expect(res.status).toBeLessThan(400);
+  });
+
+  test('returns 404 for an unregistered path', async () => {
+    (await app.get('/definitely-not-a-route')).assertNotFound();
+  });
+});
+
+/**
+ * The contact form's round trip, which is the pattern the starter exists to
+ * show: validate on the server, and on failure redirect back carrying the
+ * messages and the input.
+ */
+describe('contact form', () => {
+  test('sends the visitor back with errors when the input is bad', async () => {
+    const res = await app.postForm('/contact', { name: 'A', email: 'nope', message: 'short' });
+
+    res.assertRedirect('/contact');
+    res.assertInvalid(['name', 'email', 'message']);
+  });
+
+  test('accepts a valid submission', async () => {
+    const res = await app.postForm('/contact', {
+      name: 'Ada Lovelace',
+      email: 'ada@example.com',
+      message: 'This message is comfortably long enough to pass validation.',
+    });
+
+    res.assertRedirect('/contact');
+    res.assertValid();
+  });
+});

package/templates/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "emitDecoratorMetadata": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "skipLibCheck": true,
+    "paths": {
+      "@app/*": ["./app/*"],
+      "@pages/*": ["./resources/js/pages/*"]
+    }
+  },
+  "exclude": ["node_modules", ".zerotal"]
+}

package/templates/react/zt.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env bun
+// zt.ts — Zerotal CLI entry point.
+// ─────────────────────────────────────────────────────────────────
+// Managed by the framework. All orchestration lives in @zerotal/core's
+// startZerotal(); this file just hands it the app's bootstrap module.
+//
+// Run commands with:  bun zt <command>
+//   bun zt serve [--port=3000] [--dev]   Start the HTTP server
+//   bun zt worker                        Start the background worker
+//   bun zt test                          Run tests with the app booted
+//   bun zt list                          Show all available commands
+// ─────────────────────────────────────────────────────────────────
+import { startZerotal } from "zerotal";
+
+await startZerotal(() => import("./bootstrap/app"));

package/templates/vue/_env.example

@@ -0,0 +1,4 @@
+APP_ENV=development
+APP_KEY={{app_key}}
+APP_URL=http://localhost:3000
+ASSET_VERSION=1

package/templates/vue/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.zerotal/
+*.sqlite
+.env
+public/assets/

package/templates/vue/app/routes/about.ts

@@ -0,0 +1,7 @@
+import { Inertia } from "@zerotal/inertia";
+
+export const GET = async () => {
+  return Inertia.render("about", {
+    title: "About",
+  });
+};

package/templates/vue/app/routes/contact.ts

@@ -0,0 +1,7 @@
+import { Inertia } from "@zerotal/inertia";
+
+export const GET = async () => {
+  return Inertia.render("contact", {
+    title: "Contact",
+  });
+};

package/templates/vue/app/routes/index.ts

@@ -0,0 +1,8 @@
+import { Inertia } from "@zerotal/inertia";
+
+export const GET = async () => {
+  return Inertia.render("home", {
+    title: "Welcome to Zerotal Vue!",
+    message: "This is a sample page for your Zerotal Vue application.",
+  });
+};

package/templates/vue/bootstrap/app.ts

@@ -0,0 +1,8 @@
+import { Application, basePath } from "zerotal";
+import providers from "./providers";
+
+const app = Application.create({ providers }).fileBasedRouting({
+  web: basePath("app/routes"),
+});
+
+export default app;

package/templates/vue/bootstrap/providers.ts

@@ -0,0 +1,6 @@
+import { LogProvider } from "zerotal/logger";
+import { InertiaProvider } from "@zerotal/inertia";
+
+const providers = [LogProvider, InertiaProvider];
+
+export default providers;

package/templates/vue/config/app.ts

@@ -0,0 +1,25 @@
+import { env, requireEnv } from "zerotal";
+import { AppConfig } from "zerotal/config";
+
+export default AppConfig({
+  name: "{{name}}",
+  url: env("APP_URL", "http://localhost:3000"),
+  /**
+   * The APP_KEY is used for encryption and should be set to a random 32
+   * character string. Use `bun zt key:generate` to generate a secure key.
+   */
+  key: requireEnv("APP_KEY"),
+
+  cors: {
+    origin: env("CORS_ORIGIN", "*"),
+    credentials: false,
+  },
+
+  throttle: {
+    maxAttempts: 120,
+    windowSeconds: 60,
+  },
+
+  // Frontend assets are built by the Inertia pipeline (`bun zt inertia:build`),
+  // not the generic asset bundler — so no `assets` block is needed here.
+});

package/templates/vue/config/inertia.ts

@@ -0,0 +1,7 @@
+import { env } from "zerotal";
+import { InertiaConfig } from "@zerotal/inertia";
+
+export default InertiaConfig({
+  htmlTemplate: "./resources/app.html",
+  version: env("ASSET_VERSION", "1"),
+});

package/templates/vue/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "zt": "bun zt.ts",
+    "dev": "bun zt.ts serve --dev",
+    "start": "bun zt.ts serve",
+    "build": "bun zt.ts inertia:build --production",
+    "test": "bun zt.ts test"
+  },
+  "dependencies": {
+    "@inertiajs/vue3": "^2.0.0",
+    "@zerotal/inertia": "{{zerotal_version}}",
+    "vue": "^3.5.0",
+    "zerotal": "{{zerotal_version}}"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.5.0",
+    "bun-plugin-tailwind": "latest",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/templates/vue/resources/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Zerotal Example</title>
+    <link rel="stylesheet" href="/assets/app.css" />
+    <script type="module" src="/assets/app.js"></script>
+  </head>
+  <body>
+    <!-- @inertia -->
+  </body>
+</html>

package/templates/vue/resources/css/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/vue/resources/js/Layouts/AppLayout.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Link, usePage } from "@inertiajs/vue3";
+
+/**
+ * Shared application shell — sticky header with active-aware navigation.
+ *
+ * Use it as an Inertia persistent layout so the header survives client-side
+ * navigations and only the page body re-renders — in a page's script setup:
+ *   defineOptions({ layout: AppLayout });
+ */
+const NAV = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" },
+];
+
+const navLink =
+  "rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900";
+const activeLink = "bg-indigo-50 text-indigo-700";
+
+const page = usePage();
+const url = computed(() => page.url);
+
+const isActive = (href: string): boolean =>
+  href === "/" ? url.value === "/" : url.value.startsWith(href);
+</script>
+
+<template>
+  <div
+    class="min-h-screen bg-linear-to-b from-white via-white to-indigo-50 text-gray-900 antialiased"
+  >
+    <header
+      class="sticky top-0 z-10 border-b border-gray-200/70 bg-white/80 backdrop-blur"
+    >
+      <nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-3">
+        <Link href="/" class="flex items-center gap-2 font-bold tracking-tight">
+          <span
+            class="grid h-7 w-7 place-items-center rounded-lg bg-indigo-600 text-sm text-white"
+          >
+            K
+          </span>
+          <span>Zerotal</span>
+        </Link>
+
+        <div class="flex items-center gap-1">
+          <Link
+            v-for="item in NAV"
+            :key="item.href"
+            :href="item.href"
+            :class="[navLink, isActive(item.href) ? activeLink : '']"
+          >
+            {{ item.label }}
+          </Link>
+        </div>
+      </nav>
+    </header>
+
+    <main class="mx-auto max-w-3xl px-6 py-14">
+      <slot />
+    </main>
+  </div>
+</template>

package/templates/vue/resources/js/app.tsx

@@ -0,0 +1,19 @@
+import { createInertiaApp } from "@inertiajs/vue3";
+import { createApp, h, type DefineComponent } from "vue";
+import { pages } from "./pages.generated.ts";
+import "../css/app.css";
+
+createInertiaApp({
+  // Map a component name (e.g. "Users/Index") to its lazily-loaded module.
+  // `pages` is generated from the configured pages dir by `inertia:build`.
+  resolve: async (name): Promise<DefineComponent> => {
+    const page = pages[name];
+    if (!page) throw new Error(`Inertia page not found: "${name}"`);
+    return (await page()).default as DefineComponent;
+  },
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .mount(el as Element);
+  },
+});

package/templates/vue/resources/js/env.d.ts

@@ -0,0 +1,20 @@
+// Ambient declarations for non-code assets imported from TypeScript and bundled
+// by `bun zt serve` (see the `assets` block in config/app.ts). These let
+// side-effect imports like `import "../css/app.css"` type-check.
+// Vue Single-File Components, compiled by @zerotal/inertia's Bun plugin.
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}
+
+declare module "*.css";
+declare module "*.scss";
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.webp";
+declare module "*.woff";
+declare module "*.woff2";

package/templates/vue/resources/js/pages/about.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import AppLayout from "../Layouts/AppLayout.vue";
+
+defineOptions({ layout: AppLayout });
+
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <section class="py-4">
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+      {{ title }}
+    </h1>
+    <div class="mt-6 space-y-4 text-lg leading-relaxed text-gray-600">
+      <p>
+        This is an example app built with
+        <span class="font-medium text-gray-900">Zerotal</span> and its
+        <span class="font-medium text-gray-900">Inertia + Vue</span> frontend stack.
+      </p>
+      <p>
+        Each file under
+        <code
+          class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-indigo-600"
+        >
+          resources/js/pages
+        </code>
+        becomes a component you can render from a route — this page lives in
+        <code
+          class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-indigo-600"
+        >
+          about.vue
+        </code>
+        and is served at <span class="font-medium text-gray-900">/about</span>.
+        Navigation between pages is handled by Inertia, so it feels instant — no
+        full reloads.
+      </p>
+    </div>
+  </section>
+</template>

package/templates/vue/resources/js/pages/contact.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import AppLayout from "../Layouts/AppLayout.vue";
+
+defineOptions({ layout: AppLayout });
+
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <section class="py-4">
+    <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+      {{ title }}
+    </h1>
+    <p class="mt-4 text-lg leading-relaxed text-gray-600">
+      Have a question or feedback? We'd love to hear from you.
+    </p>
+
+    <div class="mt-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+      <dl class="space-y-4 text-sm">
+        <div class="flex items-center justify-between gap-4">
+          <dt class="font-medium text-gray-500">Email</dt>
+          <dd>
+            <a
+              href="mailto:hello@example.com"
+              class="font-medium text-indigo-600 hover:text-indigo-700"
+            >
+              hello@example.com
+            </a>
+          </dd>
+        </div>
+        <div class="flex items-center justify-between gap-4">
+          <dt class="font-medium text-gray-500">GitHub</dt>
+          <dd>
+            <a
+              href="https://github.com"
+              class="font-medium text-indigo-600 hover:text-indigo-700"
+            >
+              github.com/your-org
+            </a>
+          </dd>
+        </div>
+      </dl>
+
+      <a
+        href="mailto:hello@example.com"
+        class="mt-6 inline-block w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700"
+      >
+        Email us
+      </a>
+    </div>
+  </section>
+</template>

package/templates/vue/resources/js/pages/home.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Link } from "@inertiajs/vue3";
+import AppLayout from "../Layouts/AppLayout.vue";
+
+// Inertia persistent layout — preserved across client-side navigations.
+defineOptions({ layout: AppLayout });
+
+defineProps<{
+  title: string;
+  message: string;
+}>();
+</script>
+
+<template>
+  <section class="py-10 text-center">
+    <span
+      class="inline-flex items-center gap-2 rounded-full bg-green-50 px-3 py-1 text-sm font-medium text-green-700 ring-1 ring-green-600/20"
+    >
+      <span class="h-2 w-2 rounded-full bg-green-500"></span>
+      The install worked successfully!
+    </span>
+
+    <h1
+      class="mx-auto mt-6 max-w-2xl text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+    >
+      {{ title.replace(/!$/, "") }} with <span class="text-indigo-600">Vue</span>
+    </h1>
+
+    <p class="mx-auto mt-4 max-w-xl text-lg leading-relaxed text-gray-600">
+      {{ message }} Edit
+      <code
+        class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-indigo-600"
+      >
+        resources/js/pages/home.vue
+      </code>
+      to get started.
+    </p>
+
+    <div class="mt-8 flex items-center justify-center gap-3">
+      <Link
+        href="/about"
+        class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700"
+      >
+        Learn more
+      </Link>
+      <Link
+        href="/contact"
+        class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50"
+      >
+        Get in touch
+      </Link>
+    </div>
+  </section>
+</template>

package/templates/vue/resources/js/pages.generated.ts

@@ -0,0 +1,12 @@
+// Auto-generated by @zerotal/inertia — do not edit manually.
+// Regenerate with: bun zt inertia:build
+//
+// IMPORTANT: These are dynamic import THUNKS, not static imports.
+// Bun.build with splitting:true creates one .js chunk per page.
+// Converting to static imports will bundle ALL pages into app.js.
+
+export const pages: Record<string, () => Promise<{ default: unknown }>> = {
+  'about': () => import('./pages/about.vue'),
+  'contact': () => import('./pages/contact.vue'),
+  'home': () => import('./pages/home.vue'),
+};

package/templates/vue/tests/smoke.test.ts

@@ -0,0 +1,46 @@
+/**
+ * The scaffold boots and serves its pages.
+ *
+ * A template ships with a `test` script, so it ships with something for that
+ * script to run — and this is the assertion that catches a broken starter:
+ * providers register, routes resolve, and a request completes. Delete it once
+ * you have real tests, or keep it as the shape to copy.
+ */
+import { beforeAll, afterAll, describe, test, expect } from 'bun:test';
+import { createTestApp, type TestApp } from '@zerotal/testing';
+
+let app: TestApp;
+
+beforeAll(async () => {
+  // Session encryption needs a key. Seed a deterministic one for tests; `??=`
+  // leaves a real key alone when the app's .env is present.
+  Bun.env.APP_KEY ??= 'test-app-key-aaaaaaaaaaaaaaaaaaaaaaaa';
+  app = await createTestApp(() => import('../bootstrap/app.ts').then((m) => m.default));
+});
+
+afterAll(() => app.close());
+
+describe('scaffold', () => {
+  test('boots and serves the home page', async () => {
+    const res = await app.get('/');
+
+    res.assertOk();
+    // assertInertia reads the page object out of the response, so the test says
+    // which component rendered rather than matching on markup that will change.
+    res.assertInertia('home');
+  });
+
+  test('renders the other pages', async () => {
+    (await app.get('/about')).assertInertia('about');
+    (await app.get('/contact')).assertInertia('contact');
+  });
+
+  test('answers HEAD on the home route, as probes and load balancers do', async () => {
+    const res = await app.head('/');
+    expect(res.status).toBeLessThan(400);
+  });
+
+  test('returns 404 for an unregistered path', async () => {
+    (await app.get('/definitely-not-a-route')).assertNotFound();
+  });
+});

package/templates/vue/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "emitDecoratorMetadata": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "vue",
+    "skipLibCheck": true,
+    "paths": {
+      "@app/*": ["./app/*"],
+      "@pages/*": ["./resources/js/pages/*"]
+    }
+  },
+  "exclude": ["node_modules", ".zerotal"]
+}

package/templates/vue/zt.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env bun
+// zt.ts — Zerotal CLI entry point.
+// ─────────────────────────────────────────────────────────────────
+// Managed by the framework. All orchestration lives in @zerotal/core's
+// startZerotal(); this file just hands it the app's bootstrap module.
+//
+// Run commands with:  bun zt <command>
+//   bun zt serve [--port=3000] [--dev]   Start the HTTP server
+//   bun zt worker                        Start the background worker
+//   bun zt test                          Run tests with the app booted
+//   bun zt list                          Show all available commands
+// ─────────────────────────────────────────────────────────────────
+import { startZerotal } from "zerotal";
+
+await startZerotal(() => import("./bootstrap/app"));