@rivetjs/nx 0.0.0-stage → 0.1.0-alpha.0

package/generators/library/files/lib/package.json.template

@@ -0,0 +1,12 @@
+{
+  "name": "<%= importPath %>",
+  "version": "0.0.1",<% if (!publishable) { %>
+  "private": true,<% } %>
+  "type": "module",
+  "sideEffects": false,
+  "exports": <%- exportsJson %>,
+  "peerDependencies": {
+    "@rivetjs/reactivity": "<%= rivet %>",
+    "@rivetjs/runtime": "<%= rivet %>"
+  }
+}

package/generators/library/files/lib/src/__className__.tsx.template

@@ -0,0 +1,16 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+
+export interface <%= className %>Props {
+  title: string;
+  children?: Content;
+}
+
+/** <%= className %>: a titled box. */
+export function <%= className %>(props: <%= className %>Props) {
+  return (
+    <section class="<%= fileName %>">
+      <h2>{props.title}</h2>
+      {props.children}
+    </section>
+  );
+}

package/generators/library/files/lib/src/index.ts.template

@@ -0,0 +1 @@
+export { <%= className %>, type <%= className %>Props } from "./<%= className %>.tsx";

package/generators/library/files/lib/tsconfig.json.template

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["es2023", "dom", "dom.iterable"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    // TypeScript 6+ defaults this to true (TS2882 on `import "./styles.css"`); Vite handles side-effect imports.
+    "noUncheckedSideEffectImports": false,
+    "jsx": "preserve",
+    "jsxImportSource": "@rivetjs/runtime",
+    "types": ["node"],
+    "plugins": [{ "name": "@rivetjs/typescript-plugin" }]
+  },
+  "include": ["src", "*.ts"]
+}

package/generators/library/files/publishable/tsconfig.lib.json.template

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "rootDir": "src",
+    "rewriteRelativeImportExtensions": true,
+    "sourceMap": false,
+    "plugins": []
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+}

package/generators/library/files/subpath/src/__subpath__/__subpathClass__.tsx.template

@@ -0,0 +1,10 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+
+export interface <%= subpathClass %>Props {
+  children?: Content;
+}
+
+/** <%= subpathClass %> (`<%= importPath %>/<%= subpath %>`: imported alone, nothing else of the library is bundled). */
+export function <%= subpathClass %>(props: <%= subpathClass %>Props) {
+  return <div class="<%= subpath %>">{props.children}</div>;
+}

package/generators/library/files/subpath/src/__subpath__/index.ts.template

@@ -0,0 +1 @@
+export { <%= subpathClass %>, type <%= subpathClass %>Props } from "./<%= subpathClass %>.tsx";

package/generators/library/files/vitest/src/__className__.test.tsx.template

@@ -0,0 +1,13 @@
+import { expect, test } from "vitest";
+import { render } from "@rivetjs/runtime/testing";
+import { <%= className %> } from "./<%= className %>.tsx";
+
+test("<%= className %> renders its title and children", () => {
+  const view = render(() => (
+    <<%= className %> title="Hello">
+      <p>Body</p>
+    </<%= className %>>
+  ));
+  expect(view.find("h2").textContent).toBe("Hello");
+  expect(view.find("p").textContent).toBe("Body");
+});

package/generators/library/generator.d.ts

@@ -0,0 +1,13 @@
+import { type GeneratorCallback, type Tree } from "@nx/devkit";
+import type { LibraryGeneratorSchema } from "./schema.js";
+export type { LibraryGeneratorSchema } from "./schema.js";
+type Exports = Record<string, {
+    types: string;
+    default: string;
+}>;
+/** `.` + one entry per subpath, pointing at the sources (the package build maps them to the emitted files). */
+export declare function libraryExports(subpaths: string[]): Exports;
+/** `@scope/name` with the root package.json's scope (`@proj/source` → `@proj`). */
+export declare function defaultImportPath(tree: Tree, name: string): string;
+export declare function libraryGenerator(tree: Tree, schema: LibraryGeneratorSchema): Promise<GeneratorCallback>;
+export default libraryGenerator;

package/generators/library/generator.js

@@ -0,0 +1,116 @@
+// `nx g @rivetjs/nx:library libs/ui-kit [--publishable] [--subpaths=button,card]`: a Rivet component library.
+// Consumed from source inside the workspace (package manager workspaces resolve its `exports` to `.ts` / `.tsx`, the
+// app's Rivet compiler compiles them); `--publishable` adds the package build for npm.
+import { fileURLToPath } from "node:url";
+import { addDependenciesToPackageJson, formatFiles, generateFiles, getProjects, installPackagesTask, joinPathFragments, names, readJson, readNxJson, writeJson, } from "@nx/devkit";
+import { treeFacts } from "../../utils/facts.js";
+import { rivetTargets } from "../../utils/targets.js";
+import { HAPPY_DOM_VERSION, rivetRange, VITEST_VERSION } from "../../utils/versions.js";
+import { addToWorkspaces, isWorkspacePackage, offsetTo, shouldAddPlugin } from "../../utils/workspace.js";
+import { initGenerator } from "../init/generator.js";
+const FILES = fileURLToPath(new URL("./files", import.meta.url));
+const VITEST = fileURLToPath(new URL("../application/files/vitest", import.meta.url));
+/** `.` + one entry per subpath, pointing at the sources (the package build maps them to the emitted files). */
+export function libraryExports(subpaths) {
+    const exports = { ".": { types: "./src/index.ts", default: "./src/index.ts" } };
+    for (const subpath of subpaths)
+        exports[`./${subpath}`] = { types: `./src/${subpath}/index.ts`, default: `./src/${subpath}/index.ts` };
+    return exports;
+}
+/** `@scope/name` with the root package.json's scope (`@proj/source` → `@proj`). */
+export function defaultImportPath(tree, name) {
+    const root = tree.exists("package.json") ? readJson(tree, "package.json").name : undefined;
+    const scope = root?.startsWith("@") ? root.split("/")[0] : undefined;
+    return scope ? `${scope}/${name}` : name;
+}
+export async function libraryGenerator(tree, schema) {
+    const directory = schema.directory.replace(/\\/g, "/").replace(/^\.\//, "").replace(/\/+$/, "");
+    if (!directory)
+        throw new Error("library: directory is required (e.g. libs/ui-kit)");
+    const name = schema.name ?? names(directory.split("/").pop()).fileName;
+    if (getProjects(tree).has(name))
+        throw new Error(`library: a project named "${name}" already exists`);
+    if (tree.exists(directory) && tree.children(directory).length)
+        throw new Error(`library: ${directory} is not empty`);
+    const importPath = schema.importPath ?? defaultImportPath(tree, name);
+    const subpaths = (schema.subpaths ?? "")
+        .split(",")
+        .map((subpath) => names(subpath.trim()).fileName)
+        .filter(Boolean);
+    const publishable = Boolean(schema.publishable);
+    const vitest = (schema.unitTestRunner ?? "vitest") === "vitest";
+    const rivet = rivetRange(schema.rivetVersion);
+    const addPlugin = shouldAddPlugin(tree, schema.addPlugin);
+    const outputPath = `dist/${directory}`;
+    const { className, fileName } = names(name);
+    await initGenerator(tree, {
+        addPlugin,
+        skipFormat: true,
+        skipInstall: true,
+        ...(schema.rivetVersion ? { rivetVersion: schema.rivetVersion } : {}),
+        ...(schema.skipPackageJson ? { skipPackageJson: true } : {}),
+    });
+    const vars = {
+        name,
+        importPath,
+        className,
+        fileName,
+        publishable,
+        rivet,
+        outputPath,
+        subpaths: subpaths.map((subpath) => names(subpath)),
+        exportsJson: JSON.stringify(libraryExports(subpaths), null, 2).replace(/\n/g, "\n  "),
+    };
+    generateFiles(tree, joinPathFragments(FILES, "lib"), directory, vars);
+    for (const subpath of subpaths) {
+        generateFiles(tree, joinPathFragments(FILES, "subpath"), directory, { ...vars, subpath, subpathClass: names(subpath).className });
+    }
+    if (publishable)
+        generateFiles(tree, joinPathFragments(FILES, "publishable"), directory, vars);
+    const pkgPath = joinPathFragments(directory, "package.json");
+    const pkg = readJson(tree, pkgPath);
+    if (vitest) {
+        generateFiles(tree, VITEST, directory, {});
+        generateFiles(tree, joinPathFragments(FILES, "vitest"), directory, vars);
+        pkg.devDependencies = { "@rivetjs/testing": rivet, "happy-dom": HAPPY_DOM_VERSION, vitest: VITEST_VERSION };
+        writeJson(tree, pkgPath, pkg);
+    }
+    const targets = {};
+    const facts = treeFacts(tree, directory);
+    // Inference finds libraries through their Rivet vitest config; without one, check / typecheck go to project.json.
+    if (!addPlugin || !facts) {
+        Object.assign(targets, rivetTargets(facts ?? { kind: "lib", static: false, csr: false, test: false, tsconfig: true, serveScript: false, prerenderScript: false }));
+    }
+    if (publishable) {
+        targets["build"] = {
+            executor: "@rivetjs/nx:package",
+            cache: true,
+            dependsOn: ["^build"],
+            inputs: readNxJson(tree)?.namedInputs?.["production"]
+                ? ["production", "^production"]
+                : ["default", "^default", "!{projectRoot}/**/*.test.{ts,tsx}", "!{projectRoot}/vitest.config.{ts,mts,js,mjs}"],
+            outputs: ["{options.outputPath}"],
+            options: { tsConfig: "tsconfig.lib.json", outputPath },
+        };
+    }
+    writeJson(tree, joinPathFragments(directory, "project.json"), {
+        name,
+        $schema: `${offsetTo(directory)}/node_modules/nx/schemas/project-schema.json`,
+        projectType: "library",
+        sourceRoot: `${directory}/src`,
+        tags: (schema.tags ?? "")
+            .split(",")
+            .map((tag) => tag.trim())
+            .filter(Boolean),
+        targets,
+    });
+    addToWorkspaces(tree, directory);
+    const workspacePackage = isWorkspacePackage(tree, directory);
+    if (!schema.skipPackageJson) {
+        addDependenciesToPackageJson(tree, { "@rivetjs/reactivity": rivet, "@rivetjs/runtime": rivet }, workspacePackage ? {} : (pkg.devDependencies ?? {}));
+    }
+    if (!schema.skipFormat)
+        await formatFiles(tree);
+    return schema.skipInstall ? () => { } : () => installPackagesTask(tree, workspacePackage);
+}
+export default libraryGenerator;

package/generators/library/schema.d.ts

@@ -0,0 +1,19 @@
+export interface LibraryGeneratorSchema {
+  /** Project folder, workspace-relative (`libs/ui-kit`). */
+  directory: string;
+  /** Project name (default: the folder name). */
+  name?: string;
+  /** npm name (default `@<workspace scope>/<name>`, or `<name>` without a scope). */
+  importPath?: string;
+  /** Publishable: a `build` target (`@rivetjs/nx:package`) emitting `.js` / `.jsx` + `.d.ts` into `dist/<directory>`. */
+  publishable?: boolean;
+  /** Extra subpath exports (comma-separated: `button,card` → `<importPath>/button`, …), each tree-shakeable on its own. */
+  subpaths?: string;
+  unitTestRunner?: "vitest" | "none";
+  tags?: string;
+  rivetVersion?: string;
+  addPlugin?: boolean;
+  skipPackageJson?: boolean;
+  skipInstall?: boolean;
+  skipFormat?: boolean;
+}

package/generators/library/schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "RivetLibrary",
+  "title": "Rivet library",
+  "description": "Creates a Rivet component library: source exports per subpath (tree-shakeable, sideEffects false), Vitest with rivetTest(), and a package build when publishable.",
+  "type": "object",
+  "properties": {
+    "directory": {
+      "type": "string",
+      "description": "Project folder, relative to the workspace root (e.g. libs/ui-kit).",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which directory do you want to create the library in?"
+    },
+    "name": { "type": "string", "description": "Project name (default: the folder name).", "pattern": "^[a-zA-Z][^:]*$" },
+    "importPath": { "type": "string", "description": "npm name (default @<workspace scope>/<name>)." },
+    "publishable": {
+      "type": "boolean",
+      "default": false,
+      "description": "Add a build target (@rivetjs/nx:package) that emits .js / .jsx + .d.ts into dist/<directory>."
+    },
+    "subpaths": { "type": "string", "description": "Extra subpath exports, comma-separated (button,card → <importPath>/button, …)." },
+    "unitTestRunner": { "type": "string", "enum": ["vitest", "none"], "default": "vitest", "description": "Test runner." },
+    "tags": { "type": "string", "description": "Comma-separated project tags." },
+    "rivetVersion": { "type": "string", "description": "@rivetjs/* dependency spec (default: this plugin's version)." },
+    "addPlugin": { "type": "boolean", "x-priority": "internal", "description": "Use inferred targets (default: true unless NX_ADD_PLUGINS=false)." },
+    "skipPackageJson": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Do not add dependencies to the root package.json." },
+    "skipInstall": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Do not run the package manager install." },
+    "skipFormat": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Skip formatting files." }
+  },
+  "required": ["directory"],
+  "additionalProperties": false
+}

package/generators/preset/generator.d.ts

@@ -0,0 +1,5 @@
+import { type GeneratorCallback, type Tree } from "@nx/devkit";
+import type { PresetGeneratorSchema } from "./schema.js";
+export type { PresetGeneratorSchema } from "./schema.js";
+export declare function presetGenerator(tree: Tree, options: PresetGeneratorSchema): Promise<GeneratorCallback>;
+export default presetGenerator;

package/generators/preset/generator.js

@@ -0,0 +1,29 @@
+// `npx create-nx-workspace <name> --preset=@rivetjs/nx [--template=…]`: init + the first app, package-based
+// layout (npm / yarn / bun `workspaces: ["apps/*", "libs/*"]` unless the workspace already has a list).
+import { formatFiles, readJson, updateJson } from "@nx/devkit";
+import { applicationGenerator } from "../application/generator.js";
+import { initGenerator } from "../init/generator.js";
+export async function presetGenerator(tree, options) {
+    const appName = options.appName ?? options.name;
+    if (tree.exists("package.json") && !tree.exists("pnpm-workspace.yaml") && !readJson(tree, "package.json").workspaces) {
+        updateJson(tree, "package.json", (pkg) => ({ ...pkg, workspaces: ["apps/*", "libs/*"] }));
+    }
+    const rivet = options.rivetVersion ? { rivetVersion: options.rivetVersion } : {};
+    await initGenerator(tree, { skipFormat: true, skipInstall: true, ...rivet });
+    const install = await applicationGenerator(tree, {
+        directory: options.directory ?? `apps/${appName}`,
+        name: appName,
+        ...(options.template ? { template: options.template } : {}),
+        ...(options.adapter ? { adapter: options.adapter } : {}),
+        ...(options.deploy ? { deploy: options.deploy } : {}),
+        ...(options.tailwind !== undefined ? { tailwind: options.tailwind } : {}),
+        ...(options.unitTestRunner ? { unitTestRunner: options.unitTestRunner } : {}),
+        ...rivet,
+        skipFormat: true,
+        ...(options.skipInstall ? { skipInstall: true } : {}),
+    });
+    if (!options.skipFormat)
+        await formatFiles(tree);
+    return install;
+}
+export default presetGenerator;

package/generators/preset/schema.d.ts

@@ -0,0 +1,16 @@
+export interface PresetGeneratorSchema {
+  /** Workspace name (create-nx-workspace passes it); the default app name. */
+  name: string;
+  /** Name of the first app (default: the workspace name). */
+  appName?: string;
+  /** Folder of the first app (default `apps/<appName>`). */
+  directory?: string;
+  template?: "static" | "server" | "ui" | "minimal";
+  adapter?: "node" | "static";
+  deploy?: "vercel" | "netlify" | "cloudflare" | "bun" | "deno";
+  tailwind?: boolean;
+  unitTestRunner?: "vitest" | "none";
+  rivetVersion?: string;
+  skipInstall?: boolean;
+  skipFormat?: boolean;
+}

package/generators/preset/schema.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "RivetPreset",
+  "title": "Rivet workspace preset",
+  "description": "npx create-nx-workspace --preset=@rivetjs/nx: an Nx workspace with the Rivet plugin and a first Rivet app.",
+  "type": "object",
+  "properties": {
+    "name": { "type": "string", "description": "Workspace name; also the default app name.", "$default": { "$source": "argv", "index": 0 } },
+    "appName": { "type": "string", "description": "Name of the first app (default: the workspace name)." },
+    "directory": { "type": "string", "description": "Folder of the first app (default apps/<appName>)." },
+    "template": { "type": "string", "enum": ["static", "server", "ui", "minimal"], "default": "static", "description": "Starter of the first app." },
+    "adapter": {
+      "type": "string",
+      "enum": ["node", "static"],
+      "description": "node: pages render per request; static: prerendered HTML. Default: from the template."
+    },
+    "deploy": {
+      "type": "string",
+      "enum": ["vercel", "netlify", "cloudflare", "bun", "deno"],
+      "description": "Platform target of the first app (create-rivet --deploy). bun and deno need --template=server."
+    },
+    "tailwind": { "type": "boolean", "description": "Tailwind v4. Default: on, except the minimal starter." },
+    "unitTestRunner": { "type": "string", "enum": ["vitest", "none"], "default": "vitest", "description": "Test runner of the first app." },
+    "rivetVersion": { "type": "string", "description": "@rivetjs/* dependency spec (default: this plugin's version)." },
+    "skipInstall": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Do not run the package manager install." },
+    "skipFormat": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Skip formatting files." }
+  },
+  "required": ["name"],
+  "additionalProperties": true
+}

package/generators/route/files/__fileName__.tsx.template

@@ -0,0 +1,43 @@
+<% if (routerImports.length) { %>import { <%- routerImports.join(", ") %> } from "@rivetjs/router";
+<% } %><% if (guard) { %>
+/** Runs on the server before the loader. Return `redirect()`, `deny()` or `notFound()` to stop the request. */
+export const serverGuard = ({ url }: RequestEvent) => {
+  if (url.searchParams.has("deny")) return deny();
+};
+<% } %><% if (entries) { %>
+/** Parameter values to prerender (static mode): one page per entry. */
+export const serverEntries = () => [<%- entries %>];
+<% } %><% if (loader) { %>
+/** Data for the page, loaded on the server; removed from the browser build with everything only it uses. */
+export const serverLoad = (<% if (params.length) { %>{ params }<% } else { %>_event<% } %>: RequestEvent) => ({
+  title: <%- loaderTitle %>,
+});
+<% } %><% if (action) { %>
+export const serverActions = {
+  /** Handles `<form method="post" action="?/save">`. Works without JavaScript. */
+  save: async ({ request, url }: RequestEvent) => {
+    const text = String((await request.formData()).get("text") ?? "").trim();
+    console.log("saved", text.slice(0, 200));
+    // Post/redirect/get: reloading the page does not submit the form again.
+    return redirect(url.pathname, 303);
+  },
+};
+<% } %>
+export const head = { title: "<%= title %>" };
+
+/** <%= title %> (<%= url %>). */
+export default function <%= componentName %>(<%- props %>) {
+  return (
+    <main>
+      <h1><% if (loader) { %>{data.title}<% } else { %><%= title %><% } %></h1><% for (const param of params) { %>
+      <p>
+        <%= param.name %>: {params.<%= param.name %>}
+      </p><% } %><% if (action) { %>
+      <form method="post" action="?/save">
+        <label for="text">Text</label>
+        <input id="text" name="text" required />
+        <button>Save</button>
+      </form><% } %>
+    </main>
+  );
+}

package/generators/route/generator.d.ts

@@ -0,0 +1,10 @@
+import { type Tree } from "@nx/devkit";
+import { routeParams } from "../../utils/project.js";
+import type { RouteGeneratorSchema } from "./schema.js";
+export type { RouteGeneratorSchema } from "./schema.js";
+/** Sample `serverEntries` value of a route's params (`{ slug: "example" }`), or undefined without required params. */
+export declare function sampleEntry(params: ReturnType<typeof routeParams>): string | undefined;
+/** The URL pattern of route segments (`/blog/:slug`). */
+export declare function routeUrl(segments: string[]): string;
+export declare function routeGenerator(tree: Tree, options: RouteGeneratorSchema): Promise<void>;
+export default routeGenerator;

package/generators/route/generator.js

@@ -0,0 +1,67 @@
+// `nx g @rivetjs/nx:route blog/[slug] --project=web [--loader] [--action] [--guard] [--layout]`.
+import { fileURLToPath } from "node:url";
+import { formatFiles, generateFiles, joinPathFragments } from "@nx/devkit";
+import { routeComponentName, routedApp, routeParams, routeSegments } from "../../utils/project.js";
+import { layoutGenerator } from "../layout/generator.js";
+const FILES = fileURLToPath(new URL("./files", import.meta.url));
+/** Sample `serverEntries` value of a route's params (`{ slug: "example" }`), or undefined without required params. */
+export function sampleEntry(params) {
+    const required = params.filter((param) => param.kind !== "optional");
+    if (!required.length)
+        return undefined;
+    return `{ ${required.map((param) => `${param.name}: "${param.kind === "rest" ? "example/page" : "example"}"`).join(", ")} }`;
+}
+/** The URL pattern of route segments (`/blog/:slug`). */
+export function routeUrl(segments) {
+    const parts = segments
+        .filter((segment) => !/^\(.*\)$/.test(segment))
+        .map((segment) => segment
+        .replace(/^\[\[(.+)\]\]$/, ":$1?")
+        .replace(/^\[\.\.\.(.+)\]$/, "*$1")
+        .replace(/^\[(.+)\]$/, ":$1"));
+    return "/" + parts.join("/");
+}
+export async function routeGenerator(tree, options) {
+    const project = routedApp(tree, options.project, "route");
+    const segments = routeSegments(options.path);
+    const params = routeParams(segments);
+    if (options.action && project.facts?.static)
+        throw new Error('route: serverActions need a server; this app is prerendered (rivetRouter({ mode: "static" }))');
+    const index = !segments.length || /^\(.*\)$/.test(segments.at(-1)) || /(^|\/)index(\.\w+)?\/?$/.test(options.path) || options.path.endsWith("/");
+    const folder = joinPathFragments(project.routes, ...(index ? segments : segments.slice(0, -1)));
+    const fileName = index ? "index" : segments.at(-1);
+    for (const ext of [".tsx", ".jsx", ".ts"]) {
+        if (tree.exists(joinPathFragments(folder, fileName + ext)))
+            throw new Error(`route: ${joinPathFragments(folder, fileName + ext)} already exists`);
+    }
+    const name = routeComponentName(segments.filter((segment) => !/^\(.*\)$/.test(segment)));
+    const title = name.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+    const first = params[0];
+    const routerImports = [
+        ...(options.guard ? ["deny"] : []),
+        ...(options.action ? ["redirect"] : []),
+        ...(options.loader || params.length ? ["type PageProps"] : []),
+        ...(options.loader || options.action || options.guard ? ["type RequestEvent"] : []),
+    ];
+    const props = [...(options.loader ? ["data"] : []), ...(params.length ? ["params"] : [])];
+    generateFiles(tree, FILES, folder, {
+        fileName,
+        componentName: name + "Page",
+        title,
+        url: routeUrl(segments),
+        routerImports,
+        guard: Boolean(options.guard),
+        loader: Boolean(options.loader),
+        action: Boolean(options.action),
+        params,
+        entries: project.facts?.static ? (sampleEntry(params) ?? "") : "",
+        loaderTitle: first ? `\`${title}: \${params.${first.name} ?? ""}\`` : JSON.stringify(title),
+        props: props.length ? `{ ${props.join(", ")} }: PageProps${options.loader ? "<typeof serverLoad>" : ""}` : "",
+    });
+    if (options.layout && !tree.exists(joinPathFragments(folder, "_layout.tsx"))) {
+        await layoutGenerator(tree, { project: options.project, directory: folder.slice(project.routes.length + 1), skipFormat: true });
+    }
+    if (!options.skipFormat)
+        await formatFiles(tree);
+}
+export default routeGenerator;

package/generators/route/schema.d.ts

@@ -0,0 +1,15 @@
+export interface RouteGeneratorSchema {
+  /** Route path under `src/routes` (`about`, `blog/[slug]`, `docs/[[lang]]/[...path]`, `(marketing)/pricing`, `blog/index`). */
+  path: string;
+  /** The Rivet app. */
+  project: string;
+  /** `serverLoad` + typed `data` prop. */
+  loader?: boolean;
+  /** `serverActions` + a progressive-enhancement form (node adapter only). */
+  action?: boolean;
+  /** `serverGuard`. */
+  guard?: boolean;
+  /** Also create a `_layout.tsx` in the route's folder (when it has none). */
+  layout?: boolean;
+  skipFormat?: boolean;
+}

package/generators/route/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "RivetRoute",
+  "title": "Rivet route",
+  "description": "Adds a file route (page) to a Rivet app: dynamic segments ([param], [[optional]], [...rest]), groups ((name)), optional serverLoad / serverActions / serverGuard and a folder layout.",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Route path under src/routes: about, blog/[slug], docs/[[lang]]/[...path], (marketing)/pricing, blog/index.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Route path (under src/routes, e.g. blog/[slug])?"
+    },
+    "project": {
+      "type": "string",
+      "description": "The Rivet app.",
+      "$default": { "$source": "projectName" },
+      "x-dropdown": "projects",
+      "x-prompt": "Which project?"
+    },
+    "loader": { "type": "boolean", "default": false, "description": "Add serverLoad and a typed data prop." },
+    "action": { "type": "boolean", "default": false, "description": "Add serverActions and a form that posts to it (node adapter only)." },
+    "guard": { "type": "boolean", "default": false, "description": "Add serverGuard." },
+    "layout": { "type": "boolean", "default": false, "description": "Also create _layout.tsx in the route's folder (when it has none)." },
+    "skipFormat": { "type": "boolean", "default": false, "x-priority": "internal", "description": "Skip formatting files." }
+  },
+  "required": ["path", "project"],
+  "additionalProperties": false
+}

package/generators/ui-setup/generator.d.ts

@@ -0,0 +1,7 @@
+import { type GeneratorCallback, type Tree } from "@nx/devkit";
+import type { UiSetupGeneratorSchema } from "./schema.js";
+export type { UiSetupGeneratorSchema } from "./schema.js";
+/** `src/styles.css` with Tailwind first, then the ui styles (a `@import` must precede other rules). */
+export declare function uiStyles(css: string): string;
+export declare function uiSetupGenerator(tree: Tree, options: UiSetupGeneratorSchema): Promise<GeneratorCallback>;
+export default uiSetupGenerator;

package/generators/ui-setup/generator.js

@@ -0,0 +1,55 @@
+// `nx g @rivetjs/nx:ui-setup web`: @rivetjs/ui on an existing app, the way the `ui` starter
+// sets it up (Tailwind v4 plugin, `@import "tailwindcss"; @import "@rivetjs/ui/styles";`, ui + kit + lucide). Idempotent.
+import { addDependenciesToPackageJson, formatFiles, installPackagesTask, joinPathFragments, readJson, writeJson, } from "@nx/devkit";
+import { viteConfigPath } from "../../utils/facts.js";
+import { routedApp } from "../../utils/project.js";
+import { rivetRange, starterVersions, toolVersion } from "../../utils/versions.js";
+import { addImport, addPlugin, setRouterOption } from "../../utils/vite-config.js";
+import { isWorkspacePackage } from "../../utils/workspace.js";
+/** `src/styles.css` with Tailwind first, then the ui styles (a `@import` must precede other rules). */
+export function uiStyles(css) {
+    const ui = '@import "@rivetjs/ui/styles";';
+    if (css.includes("@rivetjs/ui/styles"))
+        return css;
+    const lines = css.split("\n");
+    const tailwind = lines.findIndex((line) => /@import\s+["']tailwindcss["']/.test(line));
+    if (tailwind >= 0) {
+        lines.splice(tailwind + 1, 0, ui);
+        return lines.join("\n");
+    }
+    return `@import "tailwindcss";\n${ui}\n/* Scan the app's source for class names (explicit, so it also works in ignored folders). */\n@source "./**/*.{ts,tsx}";\n\n${css}`;
+}
+export async function uiSetupGenerator(tree, options) {
+    const project = routedApp(tree, options.project, "ui-setup");
+    const vite = viteConfigPath(tree, project.root);
+    let config = tree.read(vite, "utf8");
+    config = addImport(config, 'import tailwindcss from "@tailwindcss/vite";');
+    config = addPlugin(config, "tailwindcss()", "last");
+    if (!/\bstyles\s*:/.test(config))
+        config = setRouterOption(config, "styles", '["src/styles.css"]');
+    tree.write(vite, config);
+    const styles = joinPathFragments(project.src, "styles.css");
+    tree.write(styles, uiStyles(tree.exists(styles) ? tree.read(styles, "utf8") : ""));
+    let install = () => { };
+    if (!options.skipPackageJson) {
+        const rivet = rivetRange(options.rivetVersion);
+        const ui = starterVersions("starter-ui");
+        const deps = { "@rivetjs/ui": rivet, "@rivetjs/kit": rivet, lucide: ui["lucide"] ?? toolVersion("lucide") };
+        const devDeps = { tailwindcss: toolVersion("tailwindcss"), "@tailwindcss/vite": toolVersion("@tailwindcss/vite") };
+        const pkgPath = joinPathFragments(project.root, "package.json");
+        if (tree.exists(pkgPath)) {
+            const pkg = readJson(tree, pkgPath);
+            pkg.dependencies = { ...pkg.dependencies, ...deps };
+            pkg.devDependencies = { ...pkg.devDependencies, ...devDeps };
+            writeJson(tree, pkgPath, pkg);
+        }
+        const workspacePackage = tree.exists(pkgPath) && isWorkspacePackage(tree, project.root);
+        if (!workspacePackage)
+            addDependenciesToPackageJson(tree, deps, devDeps);
+        install = () => installPackagesTask(tree, workspacePackage);
+    }
+    if (!options.skipFormat)
+        await formatFiles(tree);
+    return install;
+}
+export default uiSetupGenerator;

package/generators/ui-setup/schema.d.ts

@@ -0,0 +1,7 @@
+export interface UiSetupGeneratorSchema {
+  /** The Rivet app. */
+  project: string;
+  rivetVersion?: string;
+  skipPackageJson?: boolean;
+  skipFormat?: boolean;
+}