wip

oven-sh · Feb 6, 2025 · 6aa4393 · 6aa4393
1 parent 9b37d56
commit 6aa4393
Show file tree

Hide file tree

Showing 19 changed files with 621 additions and 175 deletions.
diff --git a/src/cli/create_command.zig b/src/cli/create_command.zig
@@ -310,7 +310,7 @@ pub const CreateCommand = struct {
                 var analyzer = Analyzer{
                     .ctx = ctx,
                     .example_tag = example_tag,
-                    .entry_point = destination,
+                    .entry_point = template,
                     .progress = &progress,
                     .node = node,
                 };

diff --git a/src/create/SourceFileProjectGenerator.zig b/src/create/SourceFileProjectGenerator.zig
diff --git a/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts b/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts
@@ -0,0 +1,44 @@
+import { build } from "bun";
+import plugin from "bun-plugin-tailwind";
+import { existsSync } from "fs";
+import { rm } from "fs/promises";
+import path from "path";
+
+const outdir = path.join(import.meta.dir, process.argv.length > 2 ? process.argv[2] : "dist");
+
+if (existsSync(outdir)) {
+  console.log(`Removing existing dist directory ${outdir}`);
+  await rm(outdir, { recursive: true, force: true });
+}
+
+const start = performance.now();
+
+// Scan for all HTML files in the project
+const entrypoints = [...new Bun.Glob("*.html").scanSync(import.meta.dir)];
+
+// Build all the HTML files
+const result = await build({
+  entrypoints,
+  outdir,
+  plugins: [plugin],
+  minify: true,
+  target: "browser",
+  sourcemap: "linked",
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
+});
+
+// Print the results
+const end = performance.now();
+console.log(`[${(end - start).toFixed(2)}ms] Bundled ${result.outputs.length} files to ${outdir}`);
+
+const number = new Intl.NumberFormat({
+  style: "decimal",
+  maximumFractionDigits: 2,
+  unit: "B",
+});
+
+console.table(
+  result.outputs.map(o => ({ name: path.relative(process.cwd(), o.name), size: number.format(o.size / 1024) + " KB" })),
+);
diff --git a/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx b/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx
@@ -0,0 +1,27 @@
+import { createRoot } from "react-dom/client";
+import * as App from "./REPLACE_ME_WITH_YOUR_APP_BASE_NAME";
+import React from "react";
+
+const Component = App.default || App["REPLACE_ME_WITH_YOUR_APP_BASE_NAME"];
+
+function mount(root: HTMLElement) {
+  createRoot(root).render(
+    <React.StrictMode>
+      <Component />
+    </React.StrictMode>,
+  );
+}
+
+let root = document.getElementById("root");
+if (root) {
+  mount(root);
+} else {
+  document.addEventListener("DOMContentLoaded", () => {
+    root = document.getElementById("root");
+    if (root) {
+      mount(root);
+    } else {
+      throw new Error("No root element found");
+    }
+  });
+}
diff --git a/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.css b/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.css
@@ -0,0 +1 @@
+@import "@/src/index.css";
diff --git a/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.html b/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>REPLACE_ME_WITH_YOUR_APP_BASE_NAME | Powered by Bun</title>
+    <link rel="stylesheet" href="./REPLACE_ME_WITH_YOUR_APP_BASE_NAME.css" />
+    <link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./REPLACE_ME_WITH_YOUR_APP_BASE_NAME.client.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_NAME.html b/src/create/projects/react-shadcn-spa/REPLACE_ME_WITH_YOUR_APP_NAME.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>REPLACE_ME_WITH_YOUR_APP_FILE_NAME | Powered by Bun</title>
+    <link rel="stylesheet" href="/src/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.css" />
+    <link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/src/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/src/create/projects/react-shadcn-spa/bunfig.toml b/src/create/projects/react-shadcn-spa/bunfig.toml
@@ -0,0 +1,2 @@
+[serve.static]
+plugins = ["bun-plugin-tailwind"]
diff --git a/src/create/projects/react-shadcn-spa/components.json b/src/create/projects/react-shadcn-spa/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/src/create/projects/react-shadcn-spa/package.json b/src/create/projects/react-shadcn-spa/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "react-tailwind-spa",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "bun './src/**/*.html'",
+    "build": "bun src/*.build.ts"
+  }
+}
diff --git a/src/create/projects/react-shadcn-spa/src/index.css b/src/create/projects/react-shadcn-spa/src/index.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "../styles/globals.css";
diff --git a/src/create/projects/react-shadcn-spa/src/lib/utils.ts b/src/create/projects/react-shadcn-spa/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/create/projects/react-shadcn-spa/styles/globals.css b/src/create/projects/react-shadcn-spa/styles/globals.css
@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 215 20.2% 65.1%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 216 34% 17%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply font-sans antialiased bg-background text-foreground;
+  }
+}
diff --git a/src/create/projects/react-shadcn-spa/tailwind.config.js b/src/create/projects/react-shadcn-spa/tailwind.config.js
@@ -0,0 +1,49 @@
+module.exports = {
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
diff --git a/src/create/projects/react-shadcn-spa/tsconfig.json b/src/create/projects/react-shadcn-spa/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "module": "preserve",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts", "REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx", "REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts", "REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx"]
+}
diff --git a/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts b/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts
@@ -1,9 +1,8 @@
 import { build } from "bun";
-import { path } from "bun";
-import path from "path";
-import { rm } from "fs/promises";
 import plugin from "bun-plugin-tailwind";
 import { existsSync } from "fs";
+import { rm } from "fs/promises";
+import path from "path";
 
 const outdir = path.join(import.meta.dir, process.argv.length > 2 ? process.argv[2] : "dist");
 

diff --git a/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx b/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx
@@ -1,8 +1,8 @@
 import { createRoot } from "react-dom/client";
-import * as App from "./REPLACE_ME_WITH_YOUR_APP_FILE_NAME";
+import * as App from "./REPLACE_ME_WITH_YOUR_APP_BASE_NAME";
 import React from "react";
 
-const Component = App.default || App["REPLACE_ME_WITH_YOUR_APP_FILE_NAME"];
+const Component = App.default || App["REPLACE_ME_WITH_YOUR_APP_BASE_NAME"];
 
 function mount(root: HTMLElement) {
   createRoot(root).render(

diff --git a/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.html b/src/create/projects/react-tailwind-spa/REPLACE_ME_WITH_YOUR_APP_FILE_NAME.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>REPLACE_ME_WITH_YOUR_APP_FILE_NAME | Powered by Bun</title>
-    <link rel="stylesheet" href="REPLACE_ME_WITH_YOUR_APP_FILE_NAME.css" />
+    <title>REPLACE_ME_WITH_YOUR_APP_BASE_NAME | Powered by Bun</title>
+    <link rel="stylesheet" href="./REPLACE_ME_WITH_YOUR_APP_BASE_NAME.css" />
     <link rel="icon" type="image/x-icon" href="https://bun.sh/favicon.ico" />
   </head>
   <body>
     <div id="root"></div>
-    <script src="REPLACE_ME_WITH_YOUR_APP_FILE_NAME.client.tsx" type="module"></script>
+    <script src="./REPLACE_ME_WITH_YOUR_APP_BASE_NAME.client.tsx" type="module"></script>
   </body>
 </html>
diff --git a/src/create/projects/react-tailwind-spa/package.json b/src/create/projects/react-tailwind-spa/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "bun './*.html'",
-    "build": "bun *.build.ts"
+    "dev": "bun './**/*.html'",
+    "build": "bun REPLACE_ME_WITH_YOUR_APP_FILE_NAME.build.ts"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		[serve.static]
		plugins = ["bun-plugin-tailwind"]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "tailwindcss";
		@import "../styles/globals.css";