create-rango 0.1.0

package/templates/vercel/src/components/pages/HomePage.tsx

@@ -0,0 +1,52 @@
+import { Meta, type HandlerContext } from "@rangojs/router";
+import { Link } from "@rangojs/router/client";
+
+export function HomePage(ctx: HandlerContext) {
+  const meta = ctx.use(Meta);
+  meta({ title: "Home — Rango" });
+  meta({
+    name: "description",
+    content: "A React Server Components app powered by @rangojs/router",
+  });
+
+  const greetingUrl = ctx.reverse("greeting", { name: "world" });
+  const counterUrl = ctx.reverse("counter");
+
+  return (
+    <main>
+      <h1 className="text-3xl font-semibold tracking-tight">
+        Welcome to Rango
+      </h1>
+      <p className="mt-4 leading-7 text-zinc-600 dark:text-zinc-400">
+        This starter renders React Server Components with streaming SSR, typed
+        routes, and Tailwind CSS. Handlers run on the server; client components
+        hydrate where you opt in with <code>"use client"</code>.
+      </p>
+      <ul className="mt-8 space-y-3">
+        <li className="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
+          <Link
+            to={greetingUrl}
+            className="font-medium text-blue-600 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-600 dark:text-blue-400 dark:focus-visible:outline-blue-400"
+          >
+            Dynamic route
+          </Link>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+            <code>/hello/:name</code> — read path params from the handler
+            context.
+          </p>
+        </li>
+        <li className="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
+          <Link
+            to={counterUrl}
+            className="font-medium text-blue-600 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-600 dark:text-blue-400 dark:focus-visible:outline-blue-400"
+          >
+            Server actions
+          </Link>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+            A client component calling <code>"use server"</code> functions.
+          </p>
+        </li>
+      </ul>
+    </main>
+  );
+}

package/templates/vercel/src/data/counter.ts

@@ -0,0 +1,11 @@
+// In-memory state for demo purposes: it resets on restart and is per-instance.
+// Use a database or KV store in a real app.
+let count = 0;
+
+export function getCount(): number {
+  return count;
+}
+
+export function updateCount(delta: number): void {
+  count += delta;
+}

package/templates/vercel/src/router.gen.ts

@@ -0,0 +1,8 @@
+// Auto-generated by @rangojs/router - do not edit
+export const routes = {
+  about: "/about",
+  counter: "/counter",
+  greeting: "/hello/:name",
+  home: "/",
+} as const;
+export type routes = typeof routes;

package/templates/vercel/src/router.named-routes.gen.ts

@@ -0,0 +1,17 @@
+// Auto-generated by @rangojs/router - do not edit
+export const NamedRoutes = {
+  about: "/about",
+  counter: "/counter",
+  greeting: "/hello/:name",
+  home: "/",
+} as const;
+
+// Aliased so the augmentation below does not pay a homomorphic mapped-type
+// instantiation per route; `as const` already makes the members readonly.
+type NamedRoutesShape = typeof NamedRoutes;
+
+declare global {
+  namespace Rango {
+    interface GeneratedRouteMap extends NamedRoutesShape {}
+  }
+}

package/templates/vercel/src/router.tsx

@@ -0,0 +1,33 @@
+import { createRouter, urls } from "@rangojs/router";
+import { updateCount } from "./actions/counter.js";
+import { Document } from "./components/Document.js";
+import { ErrorFallback, NotFoundPage } from "./components/Fallbacks.js";
+import { HomePage } from "./components/pages/HomePage.js";
+import { AboutPage } from "./components/pages/AboutPage.js";
+import { GreetingPage } from "./components/pages/GreetingPage.js";
+import { CounterPage } from "./components/pages/CounterPage.js";
+
+export const urlpatterns = urls(({ path, revalidate }) => [
+  path("/", HomePage, { name: "home" }),
+  path("/about", AboutPage, { name: "about" }),
+  path("/hello/:name", GreetingPage, { name: "greeting" }),
+  path("/counter", CounterPage, { name: "counter" }, () => [
+    revalidate((ctx) => ctx.isAction(updateCount) || undefined),
+  ]),
+]);
+
+export const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  defaultErrorBoundary: ErrorFallback,
+  defaultNotFoundBoundary: NotFoundPage,
+  notFound: NotFoundPage,
+});
+
+type AppRoutes = typeof router.routeMap;
+
+declare global {
+  namespace Rango {
+    interface RegisteredRoutes extends AppRoutes {}
+  }
+}

package/templates/vercel/src/styles.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light dark;
+}

package/templates/vercel/test/router.test.ts

@@ -0,0 +1,8 @@
+import { assertGeneratedRoutesMatch } from "@rangojs/router/testing";
+import { test } from "vitest";
+import { NamedRoutes } from "../src/router.named-routes.gen.js";
+import { router } from "../src/router.js";
+
+test("generated routes match the runtime router", async () => {
+  await assertGeneratedRoutesMatch(router, NamedRoutes);
+});

package/templates/vercel/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/vercel/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { rango } from "@rangojs/router/vite";
+
+// The vercel preset builds like the node preset (Vercel runs Node Functions),
+// folds NODE_ENV for the SSR/RSC build, and assembles .vercel/output
+// (Build Output API v3) from dist/ after `vite build`.
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    // runtime: the preset default is still nodejs22.x; this app targets
+    // Node 24 (see package.json engines), so pin the function runtime to match.
+    rango({ preset: "vercel", vercel: { runtime: "nodejs24.x" } }),
+  ],
+});

package/templates/vercel/vitest.config.ts

@@ -0,0 +1,10 @@
+import { rangoTestConfig } from "@rangojs/router/testing/vitest";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["test/**/*.test.{ts,tsx}"],
+    ...rangoTestConfig(),
+  },
+});