create-sprinkles 0.2.4 → 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mark Malstrom
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# create-sprinkles
+
+Get started with development by creating projects from templates quickly.
+
+## Prerequisites
+
+create-sprinkles requires [Vite+](https://viteplus.dev). Install it with Homebrew on macOS:
+
+```sh
+brew install markmals/tap/vite-plus
+```
+
+Or use the official installer script:
+
+```sh
+# macOS/Linux
+curl -fsSL https://vite.plus | bash
+
+# Windows
+irm https://vite.plus/ps1 | iex
+```
+
+## Usage
+
+```sh
+vp create sprinkles
+```
+
+The interactive prompts will guide you through:
+
+1. **Directory** — where to create the project
+2. **Project kind** — choose a template (see below)
+3. **Optional features** — add-ons specific to the chosen template
+4. **GitHub owner** — your GitHub user or organization
+
+## Templates
+
+### React Router — SPA
+
+Single-page app with React Router, Tailwind CSS, and Vite+.
+
+- Optional: [Convex](https://convex.dev) backend
+
+### React Router — SSR
+
+Server-rendered app with React Router, Tailwind CSS, Vite+, and Cloudflare deployment.
+
+- Optional: [Convex](https://convex.dev) backend
+
+### React Router — RSC
+
+React Server Components with React Router, Tailwind CSS, Vite+, and Cloudflare deployment.
+
+- Optional: Content-layer plugin for MDX-based content
+- Optional: Single Executable Application (SEA) — bundles the server and all client assets into a single portable Node.js binary via `node:sea`
+
+## License
+
+MIT

package/dist/bin.mjs

@@ -4,6 +4,7 @@ import { createTemplate, runTemplate } from "bingo";
 import path from "node:path";
 import { handlebars } from "bingo-handlebars";
 import { z } from "zod";
+import { readFileSync } from "node:fs";
 //#region src/metadata.ts
 const NAME = "create-sprinkles";
 //#endregion
@@ -16,6 +17,7 @@ function buildContext(opts) {
 		...opts,
 		hasContentLayer: isRSC && Boolean(opts.contentLayer),
 		hasConvex: (isSPA || isSSR) && Boolean(opts.convex),
+		hasSEA: isRSC && Boolean(opts.sea),
 		isPackage: opts.kind === "ts-package",
 		isRSC,
 		isReactRouter: opts.kind !== "ts-package",
@@ -58,6 +60,7 @@ const options = {
 };
 //#endregion
 //#region src/scripts.ts
+const faviconBase64 = readFileSync(path.join(import.meta.dirname, "assets/favicon.ico")).toString("base64");
 function buildDependencyCommands(context) {
 	const commands = [];
 	commands.push("vp add -D @types/node @typescript/native-preview");
@@ -65,12 +68,16 @@ function buildDependencyCommands(context) {
 		commands.push("vp add react react-dom react-router");
 		commands.push("vp add -D @types/react @types/react-dom @react-router/dev @tailwindcss/vite tailwindcss vite-plugin-devtools-json");
 		commands.push("vp add -D @rolldown/plugin-babel @vitejs/plugin-react babel-plugin-react-compiler");
-		commands.push("vp add -D @cloudflare/vite-plugin wrangler");
+		if (!context.hasSEA) commands.push("vp add -D @cloudflare/vite-plugin wrangler");
 		commands.push("vp add -D eslint-plugin-perfectionist eslint-plugin-react-hooks");
 	}
 	if (context.isReactRouter) commands.push("vp add @react-router/node isbot");
 	if (context.hasConvex) commands.push("vp add convex @convex-dev/react-query @tanstack/react-query");
 	if (context.isRSC) commands.push("vp add -D @vitejs/plugin-rsc");
+	if (context.hasSEA) {
+		commands.push("vp add @remix-run/node-fetch-server mime");
+		commands.push("vp add -D tsdown");
+	}
 	if (context.hasContentLayer) {
 		commands.push("vp add jsr:@std/jsonc jsr:@std/yaml gray-matter github-slugger @remix-run/data-schema");
 		commands.push("vp add -D @mdx-js/rollup");
@@ -89,7 +96,7 @@ function buildScripts(context) {
 		commands: phase0Commands,
 		phase: 0
 	});
-	if (context.isRSC) scripts.push({
+	if (context.isRSC && !context.hasSEA) scripts.push({
 		commands: ["vpx wrangler types -c wrangler.rsc.jsonc"],
 		phase: 1
 	});
@@ -106,6 +113,10 @@ function buildScripts(context) {
 		phase: 3,
 		silent: true
 	});
+	if (context.isReactRouter) scripts.push({
+		commands: ["mkdir -p public", `echo '${faviconBase64}' | base64 -d > public/favicon.ico`],
+		phase: 3
+	});
 	scripts.push({
 		commands: [
 			"ln -sf AGENTS.md CLAUDE.md",
@@ -122,7 +133,8 @@ function buildScripts(context) {
 function buildSuggestions(context) {
 	const suggestions = [];
 	if (context.hasConvex) suggestions.push("Open the Convex dashboard: https://dashboard.convex.dev");
-	if (context.isSSR || context.isRSC) suggestions.push("Log in to Cloudflare: vpx wrangler login");
+	if ((context.isSSR || context.isRSC) && !context.hasSEA) suggestions.push("Log in to Cloudflare: vpx wrangler login");
+	if (context.hasSEA) suggestions.push("Build the executable: vp run build");
 	if (context.isReactRouter) suggestions.push("Start the dev server: vp dev");
 	else suggestions.push("Start development: vp run dev");
 	return suggestions;
@@ -150,6 +162,8 @@ async function collectAddonLayers(context) {
 	if (context.isPackage && context.sea) addons.push(await tryHandlebars("ts-package-sea", context));
 	if (context.hasConvex) addons.push(await tryHandlebars("react-router-convex", context));
 	if (context.isSSR && context.hasConvex) addons.push(await tryHandlebars("react-router-ssr-convex", context));
+	if (context.isRSC && !context.hasSEA) addons.push(await tryHandlebars("react-router-rsc-cloudflare", context));
+	if (context.hasSEA) addons.push(await tryHandlebars("react-router-rsc-sea", context));
 	if (context.hasContentLayer) addons.push(await tryHandlebars("react-router-rsc-content-layer", context));
 	return addons;
 }
@@ -225,12 +239,20 @@ if (kind === "react-router-spa" || kind === "react-router-ssr") {
 	convex = answer;
 }
 if (kind === "react-router-rsc") {
-	const answer = await prompts.confirm({
-		initialValue: false,
-		message: "Include content-layer plugin?"
+	const features = await prompts.multiselect({
+		message: "Include optional features?",
+		options: [{
+			label: "Content-layer plugin",
+			value: "contentLayer"
+		}, {
+			label: "Single Executable Application (SEA)",
+			value: "sea"
+		}],
+		required: false
 	});
-	if (prompts.isCancel(answer)) process.exit(0);
-	contentLayer = answer;
+	if (prompts.isCancel(features)) process.exit(0);
+	contentLayer = features.includes("contentLayer");
+	sea = features.includes("sea");
 }
 if (kind === "ts-package") {
 	const features = await prompts.multiselect({

package/dist/index.d.mts

@@ -36,6 +36,7 @@ interface TemplateContext extends Options {
   isReactRouter: boolean;
   hasConvex: boolean;
   hasContentLayer: boolean;
+  hasSEA: boolean;
   ssr: boolean;
 }
 declare function buildContext(opts: Options): TemplateContext;

package/dist/index.mjs

@@ -2,6 +2,7 @@ import { createTemplate } from "bingo";
 import { handlebars } from "bingo-handlebars";
 import path from "node:path";
 import { z } from "zod";
+import { readFileSync } from "node:fs";
 //#region src/context.ts
 function buildContext(opts) {
 	const isSPA = opts.kind === "react-router-spa";
@@ -11,6 +12,7 @@ function buildContext(opts) {
 		...opts,
 		hasContentLayer: isRSC && Boolean(opts.contentLayer),
 		hasConvex: (isSPA || isSSR) && Boolean(opts.convex),
+		hasSEA: isRSC && Boolean(opts.sea),
 		isPackage: opts.kind === "ts-package",
 		isRSC,
 		isReactRouter: opts.kind !== "ts-package",
@@ -20,9 +22,6 @@ function buildContext(opts) {
 	};
 }
 //#endregion
-//#region src/metadata.ts
-const NAME = "create-sprinkles";
-//#endregion
 //#region src/merge.ts
 function isDirectory(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -37,6 +36,9 @@ function mergeFiles(...layers) {
 	return result;
 }
 //#endregion
+//#region src/metadata.ts
+const NAME = "create-sprinkles";
+//#endregion
 //#region src/options.ts
 const kind = z.enum([
 	"react-router-spa",
@@ -56,6 +58,7 @@ const options = {
 };
 //#endregion
 //#region src/scripts.ts
+const faviconBase64 = readFileSync(path.join(import.meta.dirname, "assets/favicon.ico")).toString("base64");
 function buildDependencyCommands(context) {
 	const commands = [];
 	commands.push("vp add -D @types/node @typescript/native-preview");
@@ -63,12 +66,16 @@ function buildDependencyCommands(context) {
 		commands.push("vp add react react-dom react-router");
 		commands.push("vp add -D @types/react @types/react-dom @react-router/dev @tailwindcss/vite tailwindcss vite-plugin-devtools-json");
 		commands.push("vp add -D @rolldown/plugin-babel @vitejs/plugin-react babel-plugin-react-compiler");
-		commands.push("vp add -D @cloudflare/vite-plugin wrangler");
+		if (!context.hasSEA) commands.push("vp add -D @cloudflare/vite-plugin wrangler");
 		commands.push("vp add -D eslint-plugin-perfectionist eslint-plugin-react-hooks");
 	}
 	if (context.isReactRouter) commands.push("vp add @react-router/node isbot");
 	if (context.hasConvex) commands.push("vp add convex @convex-dev/react-query @tanstack/react-query");
 	if (context.isRSC) commands.push("vp add -D @vitejs/plugin-rsc");
+	if (context.hasSEA) {
+		commands.push("vp add @remix-run/node-fetch-server mime");
+		commands.push("vp add -D tsdown");
+	}
 	if (context.hasContentLayer) {
 		commands.push("vp add jsr:@std/jsonc jsr:@std/yaml gray-matter github-slugger @remix-run/data-schema");
 		commands.push("vp add -D @mdx-js/rollup");
@@ -87,7 +94,7 @@ function buildScripts(context) {
 		commands: phase0Commands,
 		phase: 0
 	});
-	if (context.isRSC) scripts.push({
+	if (context.isRSC && !context.hasSEA) scripts.push({
 		commands: ["vpx wrangler types -c wrangler.rsc.jsonc"],
 		phase: 1
 	});
@@ -104,6 +111,10 @@ function buildScripts(context) {
 		phase: 3,
 		silent: true
 	});
+	if (context.isReactRouter) scripts.push({
+		commands: ["mkdir -p public", `echo '${faviconBase64}' | base64 -d > public/favicon.ico`],
+		phase: 3
+	});
 	scripts.push({
 		commands: [
 			"ln -sf AGENTS.md CLAUDE.md",
@@ -120,7 +131,8 @@ function buildScripts(context) {
 function buildSuggestions(context) {
 	const suggestions = [];
 	if (context.hasConvex) suggestions.push("Open the Convex dashboard: https://dashboard.convex.dev");
-	if (context.isSSR || context.isRSC) suggestions.push("Log in to Cloudflare: vpx wrangler login");
+	if ((context.isSSR || context.isRSC) && !context.hasSEA) suggestions.push("Log in to Cloudflare: vpx wrangler login");
+	if (context.hasSEA) suggestions.push("Build the executable: vp run build");
 	if (context.isReactRouter) suggestions.push("Start the dev server: vp dev");
 	else suggestions.push("Start development: vp run dev");
 	return suggestions;
@@ -148,6 +160,8 @@ async function collectAddonLayers(context) {
 	if (context.isPackage && context.sea) addons.push(await tryHandlebars("ts-package-sea", context));
 	if (context.hasConvex) addons.push(await tryHandlebars("react-router-convex", context));
 	if (context.isSSR && context.hasConvex) addons.push(await tryHandlebars("react-router-ssr-convex", context));
+	if (context.isRSC && !context.hasSEA) addons.push(await tryHandlebars("react-router-rsc-cloudflare", context));
+	if (context.hasSEA) addons.push(await tryHandlebars("react-router-rsc-sea", context));
 	if (context.hasContentLayer) addons.push(await tryHandlebars("react-router-rsc-content-layer", context));
 	return addons;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-sprinkles",
-    "version": "0.2.4",
+    "version": "0.3.1",
     "description": "Get started with development by creating projects from templates quickly.",
     "homepage": "https://github.com/withsprinkles/create-sprinkles#readme",
     "bugs": {

package/templates/react-router-rsc-sea/scripts/build-exe.ts.hbs

@@ -0,0 +1,53 @@
+import { readdirSync, writeFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { build } from "tsdown";
+
+import packageJson from "../package.json" with { type: "json" };
+
+const CLIENT_DIR = "dist/client";
+
+// ── Collect every file under dist/client/ ──────────────────────
+function collectFiles(dir: string, base = dir) {
+    const files = [] as string[];
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...collectFiles(full, base));
+        } else {
+            // Key = path relative to CLIENT_DIR, e.g. "assets/index-abc123.js"
+            files.push(relative(base, full));
+        }
+    }
+    return files;
+}
+
+let clientFiles = collectFiles(CLIENT_DIR);
+
+// ── Write manifest so server.ts knows which keys exist ──────────
+writeFileSync("dist/asset-manifest.json", JSON.stringify(clientFiles, null, 2));
+
+// ── Build the SEA asset map: key → file path on disk ────────────
+// node:sea's getAsset(key) uses these keys at runtime
+let assets = Object.fromEntries(clientFiles.map(file => [file, join(CLIENT_DIR, file)]));
+
+console.log(`Embedding ${clientFiles.length} client assets into executable`);
+
+// ── Run tsdown with exe enabled ─────────────────────────────────
+await build({
+    entry: ["server.ts"],
+    outDir: "build",
+    format: "esm",
+    target: "node25",
+    // Bundle everything — the React Router server build, @remix-run/node-fetch-server, etc.
+    noExternal: [/.*/],
+    exe: {
+        fileName: packageJson.name,
+        seaConfig: {
+            disableExperimentalSEAWarning: true,
+            useCodeCache: false,
+            assets, // ← every client file, keyed by its URL path
+        },
+    },
+});
+
+console.log(`Done — executable written to build/${packageJson.name}`);

package/templates/react-router-rsc-sea/server.ts.hbs

@@ -0,0 +1,52 @@
+import { createRequestListener } from "@remix-run/node-fetch-server";
+import mime from "mime";
+import * as http from "node:http";
+import sea from "node:sea";
+
+// @ts-expect-error: tsdown bundles this — it's the output of `vp build`
+import app from "./dist/server/index.js";
+
+// Generated by scripts/build-exe.ts before tsdown runs
+import assetManifest from "./dist/asset-manifest.json" with { type: "json" };
+
+function mimeType(path: string): string {
+    let ext = path.substring(path.lastIndexOf("."));
+    return mime.getType(ext) ?? "application/octet-stream";
+}
+
+// Set of embedded asset paths for O(1) lookup
+let embeddedAssets = new Set<string>(assetManifest);
+
+async function handler(request: Request): Promise<Response> {
+    let url = new URL(request.url);
+    // Strip leading slash to match SEA asset keys
+    let assetPath = url.pathname.slice(1);
+
+    // Serve embedded client assets straight from the binary
+    if (sea.isSea() && embeddedAssets.has(assetPath)) {
+        let body = sea.getAsset(assetPath); // ArrayBuffer
+
+        // Vite fingerprints asset filenames, so anything under /assets/
+        // is safe to cache forever. Everything else gets a shorter TTL.
+        let immutable = assetPath.startsWith("assets/");
+
+        return new Response(body, {
+            headers: {
+                "Content-Type": mimeType(assetPath),
+                "Cache-Control": immutable
+                    ? "public, max-age=31536000, immutable"
+                    : "public, max-age=3600",
+            },
+        });
+    }
+
+    // Everything else → React Router RSC
+    return app.fetch(request);
+}
+
+const port = Number.parseInt(process.env.PORT || "1612");
+const server = http.createServer(createRequestListener(handler));
+
+server.listen(port, () => {
+    console.log(`Listening on http://localhost:${port}`);
+});

package/templates/react-shared/react-router.config.ts.hbs

@@ -1,6 +1,9 @@
 import type { Config } from "@react-router/dev/config";
 
 export default {
+{{#if hasSEA}}
+    buildDirectory: "dist",
+{{/if}}
     future: {
         v8_middleware: true,
         v8_viteEnvironmentApi: true,

package/templates/shared/vite.config.ts.hbs

@@ -1,5 +1,7 @@
 {{#if isRSC}}
+{{#unless hasSEA}}
 import { cloudflare } from "@cloudflare/vite-plugin";
+{{/unless}}
 {{#if hasContentLayer}}
 import mdx from "@mdx-js/rollup";
 {{/if}}
@@ -26,7 +28,9 @@ import { defineConfig } from "vite-plus";
 {{/if}}
 
 {{#if isReactRouter}}
+{{#unless hasSEA}}
 const IS_TEST = Boolean(process.env.VITEST);
+{{/unless}}
 
 {{/if}}
 export default defineConfig({
@@ -107,7 +111,9 @@ export default defineConfig({
             node: true,
         },
 {{#if isRSC}}
+{{#unless hasSEA}}
         ignorePatterns: ["**/worker-configuration.d.ts"],
+{{/unless}}
 {{/if}}
 {{#if isReactRouter}}
         jsPlugins: [
@@ -281,6 +287,19 @@ export default defineConfig({
     },
 {{/if}}
 {{#if isRSC}}
+{{#if hasSEA}}
+    plugins: [
+{{#if hasContentLayer}}
+        contentLayer(),
+        mdx(),
+{{/if}}
+        reactRouter(),
+        rsc(),
+        reactCompiler(),
+        tailwindcss(),
+        devtoolsJson(),
+    ],
+{{else}}
     plugins: [
 {{#if hasContentLayer}}
         contentLayer(),
@@ -307,6 +326,7 @@ export default defineConfig({
         tailwindcss(),
         devtoolsJson(),
     ],
+{{/if}}
 {{else if isSSR}}
     plugins: [
         tailwindcss(),
@@ -338,6 +358,22 @@ export default defineConfig({
     run: {
         tasks: {
 {{#if isRSC}}
+{{#if hasSEA}}
+            build: {
+                // Compound command — each half is cached independently.
+                // vp build runs React Router's production build,
+                // then the script bundles everything into a SEA.
+                command: "vp build && node scripts/build-exe.ts",
+                env: ["NODE_ENV"],
+            },
+            typecheck: {
+                command: "tsgo --noEmit",
+                dependsOn: ["typegen:react-router"],
+            },
+            "typegen:react-router": {
+                command: "react-router typegen",
+            },
+{{else}}
             deploy: {
                 cache: false,
                 command: "vp build && wrangler deploy",
@@ -352,6 +388,7 @@ export default defineConfig({
             "typegen:react-router": {
                 command: "react-router typegen",
             },
+{{/if}}
 {{else if isReactRouter}}
             deploy: {
                 cache: false,