create-lumen 1.1.3 → 1.1.4

package/README.md

@@ -17,9 +17,9 @@ npm run dev
 Non-interactive Quick Setup (TypeScript + Tailwind + Feature-based + Router + ESLint + Prettier + Vitest), no prompts:
 
 ```bash
-npm create lumen my-app -y
+npm create lumen my-app -- -y
 # or
-npm create lumen -y my-app
+npm create lumen -- -y my-app
 ```
 
 The CLI ignores flag arguments when resolving the project name, so `-y` can appear before or after the app name without being mistaken for the folder name.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lumen",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Scaffold a React + Vite project with architecture choice: feature-based or component-based.",
   "type": "module",
   "bin": {
@@ -15,7 +15,13 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --import ./register.js --test \"tests/unit/*.test.mjs\" \"tests/smoke/*.test.mjs\""
+    "test": "node --import ./register.js --test \"tests/unit/*.test.mjs\" \"tests/smoke/*.test.mjs\"",
+    "verify:vendor": "node --import ./register.js tests/verify/install-vendor.mjs",
+    "verify:offline": "node --import ./register.js tests/verify/verify-offline.mjs",
+    "verify:installed": "node --import ./register.js tests/verify/verify-installed.mjs",
+    "verify": "npm run verify:vendor && npm run verify:offline",
+    "verify:full": "npm run verify:vendor && npm run verify:offline && npm run verify:installed",
+    "verify:matrix": "FULL=1 npm run verify:offline"
   },
   "keywords": [
     "scaffold",

package/src/configure.js

@@ -31,8 +31,13 @@ async function configureTsconfig(projectPath) {
     const config = JSON.parse(content);
 
     if (!config.compilerOptions) config.compilerOptions = {};
-    config.compilerOptions.baseUrl = ".";
+    config.compilerOptions.strict = true;
     config.compilerOptions.paths = paths;
+    if (config.compilerOptions.types?.length && !config.compilerOptions.types.includes("vite/client")) {
+      config.compilerOptions.types.push("vite/client");
+    } else if (!config.compilerOptions.types) {
+      config.compilerOptions.types = ["vite/client"];
+    }
 
     await fsp.writeFile(
       tsconfigAppPath,
@@ -58,7 +63,7 @@ async function configureTsconfig(projectPath) {
         noUnusedLocals: true,
         noUnusedParameters: true,
         noFallthroughCasesInSwitch: true,
-        baseUrl: ".",
+        types: ["vite/client"],
         paths,
       },
       include: ["src"],
@@ -70,11 +75,19 @@ async function configureTsconfig(projectPath) {
     );
   }
 
-  // Create/update root tsconfig.json with references
+  // Create/update root tsconfig.json with references.
+  // Preserve the ./tsconfig.node.json reference (Vite config) when present.
   const rootTsconfigPath = path.join(projectPath, "tsconfig.json");
+  const nodeConfigPath = path.join(projectPath, "tsconfig.node.json");
+  const references = [{ path: "./tsconfig.app.json" }];
+  try {
+    await fsp.access(nodeConfigPath);
+    references.push({ path: "./tsconfig.node.json" });
+  } catch {}
+
   const rootTsconfig = {
     files: [],
-    references: [{ path: "./tsconfig.app.json" }],
+    references,
   };
   await fsp.writeFile(
     rootTsconfigPath,
@@ -100,7 +113,7 @@ async function addPathAliasesToViteConfig(projectPath, ext) {
   try {
     let content = await readFileContent(viteConfigPath);
 
-    if (content.includes("tsconfigPaths")) return;
+    if (content.includes("find: '@'")) return;
 
     const lines = content.split("\n");
 
@@ -112,8 +125,8 @@ async function addPathAliasesToViteConfig(projectPath, ext) {
 
     // Insert path/fileURLToPath imports after last import
     const newImports = [
-      'import path from "path";',
-      'import { fileURLToPath } from "url";',
+      "import path from 'path';",
+      "import { fileURLToPath } from 'url';",
       "const __dirname = path.dirname(fileURLToPath(import.meta.url));",
     ];
     lines.splice(lastImportIdx + 1, 0, ...newImports);
@@ -121,13 +134,10 @@ async function addPathAliasesToViteConfig(projectPath, ext) {
     let result = lines.join("\n");
 
     const aliasArray = getViteAliases()
-      .map(
-        (a) =>
-          `{ find: "${a.find}", replacement: ${a.replacement} }`
-      )
-      .join(",\n              ");
+      .map((a) => `{ find: '${a.find}', replacement: ${a.replacement} }`)
+      .join(",\n      ");
 
-    const resolveBlock = `resolve: {\n    tsconfigPaths: true,\n    alias: [\n              ${aliasArray}\n    ],\n  }`;
+    const resolveBlock = `resolve: {\n    alias: [\n      ${aliasArray},\n    ],\n  }`;
 
     if (result.includes("resolve:")) {
       result = result.replace(/resolve:\s*\{/, resolveBlock);

package/src/css.js

@@ -14,6 +14,18 @@ export async function setupCssFramework({
   process.chdir(projectPath);
   const cssDir = path.join(templatesDir, "css");
   const indexCssPath = path.join(projectPath, "src", "index.css");
+  // Feature-based main.* imports ./styles/globals.css; component-based main.*
+  // imports ./index.css. The chosen framework's styles must land in the file
+  // the architecture actually imports.
+  const globalsCssPath = path.join(projectPath, "src", "styles", "globals.css");
+
+  async function writeCss(content) {
+    await fsp.writeFile(indexCssPath, content, "utf8");
+    try {
+      await fsp.access(globalsCssPath);
+      await fsp.writeFile(globalsCssPath, content, "utf8");
+    } catch {}
+  }
 
   if (cssFramework === "tailwind") {
     const viteConfigFile = `vite.config.${language === "ts" ? "ts" : "js"}`;
@@ -28,7 +40,7 @@ export async function setupCssFramework({
       path.join(cssDir, "tailwind", "src", "index.css"),
       "utf8"
     );
-    await fsp.writeFile(indexCssPath, indexCssContent, "utf8");
+    await writeCss(indexCssContent);
   } else if (cssFramework === "bootstrap") {
     const mainFile = path.join(projectPath, "src", `main.${ext}`);
     if (fs.existsSync(mainFile)) {
@@ -45,13 +57,13 @@ export async function setupCssFramework({
       path.join(cssDir, "bootstrap", "src", "index.css"),
       "utf8"
     );
-    await fsp.writeFile(indexCssPath, indexCssContent, "utf8");
+    await writeCss(indexCssContent);
   } else {
     const indexCssContent = await fsp.readFile(
       path.join(cssDir, "none", "src", "index.css"),
       "utf8"
     );
-    await fsp.writeFile(indexCssPath, indexCssContent, "utf8");
+    await writeCss(indexCssContent);
   }
 
   // Clean up Vite's default App.css

package/src/dependencies.js

@@ -71,11 +71,14 @@ export async function installAllDeps(responses, pkg, cwd) {
   } else if (responses.testing === "jest") {
     devDeps.push(
       "jest",
-      "ts-jest",
-      "@types/jest",
+      "jest-environment-jsdom",
       "@testing-library/react",
       "@testing-library/jest-dom",
-      "jsdom"
+      "jsdom",
+      "babel-jest",
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
     );
   }
 
@@ -84,6 +87,8 @@ export async function installAllDeps(responses, pkg, cwd) {
     devDeps.push("eslint", "@eslint/js", "eslint-plugin-react-hooks", "eslint-plugin-react-refresh", "globals");
     if (responses.language === "ts") {
       devDeps.push("typescript-eslint");
+      // ESLint >= 10 loads TS config files (eslint.config.ts) via jiti.
+      devDeps.push("jiti");
     }
   } else if (responses.linter === "oxlint") {
     devDeps.push("oxlint");

package/src/format.js

@@ -0,0 +1,28 @@
+import path from "path";
+import { execa } from "execa";
+import { promises as fsp } from "fs";
+
+async function exists(p) {
+  try {
+    await fsp.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Runs the project-local formatter (installed as a devDependency) so a freshly
+// generated project is canonical under its chosen formatter by construction.
+// Falls back to the bare command name so the same helper works when the binary
+// is already on PATH (e.g. verification harnesses resolving from a vendored
+// node_modules symlink).
+export async function runProjectFormat(projectPath, responses) {
+  if (!responses.formatter || responses.formatter === "none") return;
+
+  const formatter = responses.formatter;
+  const bin = path.join(projectPath, "node_modules", ".bin", formatter);
+  const command = (await exists(bin)) ? bin : formatter;
+  const args = formatter === "prettier" ? ["--write", "."] : ["."];
+
+  await execa(command, args, { cwd: projectPath, stdio: "pipe" });
+}

package/src/injector.js

@@ -72,6 +72,7 @@ export async function injectFormatter(projectPath, templatesDir, responses) {
       pkg.scripts["format:check"] = "prettier --check .";
     } else if (responses.formatter === "oxfmt") {
       pkg.scripts.format = "oxfmt .";
+      pkg.scripts["format:check"] = "oxfmt --check .";
     }
     await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
   } catch {}
@@ -105,11 +106,14 @@ async function wireEslintPrettier(projectPath, language) {
 
     let result = lines.join("\n");
 
-    // Append ...prettier as the LAST element of the eslint config.
+    // Append prettier as the LAST element of the eslint config.
+    // eslint-config-prettier exports a flat-config object (not an iterable),
+    // so it must be passed by reference, not spread — passing `...prettier`
+    // breaks under ESLint's jiti-based TS config loading.
     // The JS template exports an array (`export default [...]`); the TS
     // template uses a function call (`export default tseslint.config(...)`).
     const pushLast = (_, head, tail) =>
-      head.replace(/,\s*$/, "") + ",\n  ...prettier," + tail;
+      head.replace(/,\s*$/, "") + ",\n  prettier," + tail;
     if (result.includes("tseslint.config(")) {
       result = result.replace(
         /(export default tseslint\.config\([\s\S]*?)(\n\s*\);)/,
@@ -247,11 +251,18 @@ async function injectTesting(projectPath, templatesDir, framework, language, arc
       await fsp.access(jestSetupSrc);
       await fsp.copyFile(jestSetupSrc, path.join(projectPath, `jest.setup.${configExt}`));
     } catch {}
+
+    // Unified Babel transform config for Jest (env + react + typescript presets).
+    const babelSrc = path.join(testingDir, "babel.config.cjs");
+    try {
+      await fsp.access(babelSrc);
+      await fsp.copyFile(babelSrc, path.join(projectPath, "babel.config.cjs"));
+    } catch {}
   }
 
-  // Copy test file
+  // Copy test file (architecture-scoped so the App import path resolves)
   const testExt = language === "ts" ? "tsx" : "jsx";
-  const testSrc = path.join(testingDir, `src/__tests__/App.test.${testExt}`);
+  const testSrc = path.join(testingDir, architecture, `src/__tests__/App.test.${testExt}`);
   try {
     await fsp.access(testSrc);
     const testDest = path.join(projectPath, "src", "__tests__", `App.test.${testExt}`);

package/src/main.js

@@ -15,6 +15,7 @@ import { getUserInputs, onCancel } from "@/prompts.js";
 import { runBaseInstall, runGitInit, runViteCreate } from "@/scaffold.js";
 import { installAllDeps } from "@/dependencies.js";
 import { generateReadme } from "@/readme.js";
+import { runProjectFormat } from "@/format.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -215,6 +216,19 @@ export async function main(options = {}) {
     }
   }
 
+  // 13.5 Format the freshly generated project so it is canonical on init
+  if (responses.formatter && responses.formatter !== "none") {
+    const fmtPassSpin = spinner();
+    fmtPassSpin.start(`Formatting project with ${responses.formatter}...`);
+    try {
+      await runProjectFormat(projectPath, responses);
+      fmtPassSpin.stop(chalk.green("Project formatted."));
+    } catch (err) {
+      fmtPassSpin.stop(chalk.red("Failed to format project."));
+      throw err;
+    }
+  }
+
   log.step(chalk.green("\nProject setup complete!"));
   log.message(
     chalk.gray(

package/src/readme.js

@@ -77,6 +77,7 @@ function buildScripts(responses) {
 
   if (responses.formatter === "prettier" || responses.formatter === "oxfmt") {
     rows.push("| `npm run format` | Format code |");
+    rows.push("| `npm run format:check` | Verify code is formatted |");
   }
 
   return rows.join("\n");

package/templates/architectures/component-based/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles/globals.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

package/templates/architectures/component-based/src/App.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 

package/templates/architectures/component-based/src/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 

package/templates/architectures/component-based/src/components/common/Button.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Button({
   variant = "primary",
   children,

package/templates/architectures/component-based/src/components/common/Button.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
   children: React.ReactNode;

package/templates/architectures/component-based/src/config/constants.js

@@ -1,2 +1 @@
-export const APP_NAME = "Lumen";
 export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/component-based/src/config/constants.ts

@@ -1,2 +1 @@
-export const APP_NAME = "Lumen";
 export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/component-based/src/context/AppContext.jsx

@@ -1,6 +1,5 @@
-import React, { createContext, useState } from "react";
-
-export const AppContext = createContext(null);
+import { useState } from "react";
+import { AppContext } from "./app-context";
 
 export function AppProvider({ children }) {
   const [theme, setTheme] = useState("light");
@@ -10,4 +9,4 @@ export function AppProvider({ children }) {
       {children}
     </AppContext.Provider>
   );
-}
+}

package/templates/architectures/component-based/src/context/AppContext.tsx

@@ -1,13 +1,18 @@
-import React, { createContext, useState, useEffect } from "react";
+import { useState, useEffect, type ReactNode } from "react";
+import { AppContext, type AppContextValue } from "./app-context";
 
-export const AppContext = createContext(null);
+export function AppProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState(() => localStorage.getItem("theme") ?? "light");
 
-export function AppProvider({ children }) {
-  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const value: AppContextValue = { theme, setTheme };
 
   return (
-    <AppContext.Provider value={{ theme, setTheme }}>
+    <AppContext.Provider value={value}>
       {children}
     </AppContext.Provider>
   );
-}
+}

package/templates/architectures/component-based/src/context/app-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+// React Fast Refresh requires contexts to live in a separate file from
+// components, so the AppProvider component exports from AppContext.jsx.
+export const AppContext = createContext(null);

package/templates/architectures/component-based/src/context/app-context.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+// React Fast Refresh requires contexts to live in a separate file from
+// components, so the AppProvider component exports from AppContext.tsx.
+export interface AppContextValue {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+export const AppContext = createContext<AppContextValue | null>(null);

package/templates/architectures/component-based/src/hooks/useLocalStorage.ts

@@ -1,17 +1,17 @@
 import { useState, useCallback } from "react";
 
-export function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      return item ? (JSON.parse(item) as T) : initialValue;
     } catch {
       return initialValue;
     }
   });
 
   const setValue = useCallback(
-    (value) => {
+    (value: T | ((prev: T) => T)) => {
       try {
         const valueToStore =
           value instanceof Function ? value(storedValue) : value;
@@ -24,5 +24,5 @@ export function useLocalStorage(key, initialValue) {
     [key, storedValue]
   );
 
-  return [storedValue, setValue];
+  return [storedValue, setValue] as const;
 }

package/templates/architectures/component-based/src/layouts/MainLayout.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function MainLayout({ children }) {
   return (
     <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>

package/templates/architectures/component-based/src/layouts/MainLayout.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface MainLayoutProps {
   children: React.ReactNode;
 }

package/templates/architectures/component-based/src/pages/Home/Home.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/common";
 
 export function HomePage() {

package/templates/architectures/component-based/src/pages/Home/Home.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/common";
 
 export function HomePage() {

package/templates/architectures/component-based/src/utils/cn.ts

@@ -1,3 +1,5 @@
-export function cn(...inputs) {
+type ClassValue = string | false | null | undefined;
+
+export function cn(...inputs: ClassValue[]): string {
   return inputs.filter(Boolean).join(" ");
 }

package/templates/architectures/feature-based/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "@/app/App";
 import "./styles/globals.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

package/templates/architectures/feature-based/src/app/App.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { HomePage } from "@/features/home/pages/HomePage";
 
 export default function App() {

package/templates/architectures/feature-based/src/app/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { HomePage } from "@/features/home/pages/HomePage";
 
 export default function App() {

package/templates/architectures/feature-based/src/app/providers/ThemeProvider.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function ThemeProvider({ children }) {
   return <>{children}</>;
 }

package/templates/architectures/feature-based/src/app/providers/ThemeProvider.tsx

@@ -1,5 +1,5 @@
-import React from "react";
+import type { ReactNode } from "react";
 
-export function ThemeProvider({ children }) {
+export function ThemeProvider({ children }: { children: ReactNode }) {
   return <>{children}</>;
 }

package/templates/architectures/feature-based/src/components/ui/Button.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Button({
   variant = "primary",
   children,

package/templates/architectures/feature-based/src/components/ui/Button.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
   children: React.ReactNode;

package/templates/architectures/feature-based/src/config/constants.js

@@ -1,2 +1 @@
-export const APP_NAME = "Lumen";
 export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/feature-based/src/config/constants.ts

@@ -1,2 +1 @@
-export const APP_NAME = "Lumen";
 export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";

package/templates/architectures/feature-based/src/features/home/pages/HomePage.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/ui";
 
 export function HomePage() {

package/templates/architectures/feature-based/src/features/home/pages/HomePage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/ui";
 
 export function HomePage() {

package/templates/architectures/feature-based/src/hooks/useLocalStorage.ts

@@ -1,17 +1,17 @@
 import { useState, useCallback } from "react";
 
-export function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      return item ? (JSON.parse(item) as T) : initialValue;
     } catch {
       return initialValue;
     }
   });
 
   const setValue = useCallback(
-    (value) => {
+    (value: T | ((prev: T) => T)) => {
       try {
         const valueToStore =
           value instanceof Function ? value(storedValue) : value;
@@ -24,5 +24,5 @@ export function useLocalStorage(key, initialValue) {
     [key, storedValue]
   );
 
-  return [storedValue, setValue];
+  return [storedValue, setValue] as const;
 }

package/templates/architectures/feature-based/src/utils/cn.ts

@@ -1,6 +1,5 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+type ClassValue = string | false | null | undefined;
 
-export function cn(...inputs) {
-  return twMerge(clsx(inputs));
+export function cn(...inputs: ClassValue[]): string {
+  return inputs.filter(Boolean).join(" ");
 }

package/templates/conditional/formatter/oxfmt/.oxfmtrc.json

@@ -4,4 +4,4 @@
   "singleQuote": true,
   "semi": true,
   "trailingComma": "all"
-}
+}

package/templates/conditional/formatter/prettier/.prettierrc

@@ -2,6 +2,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 80
-}
+}

package/templates/conditional/icons/huge/component-based/src/pages/Home/Home.jsx

@@ -1,14 +1,14 @@
-import React from "react";
-import { Sun, Moon, Github } from "@hugeicons/react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
 import { Button } from "@/components/common";
 
 export function HomePage() {
   return (
     <div className="text-center">
       <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+        <HugeiconsIcon icon={Sun01Icon} className="w-8 h-8 text-yellow-500" />
+        <HugeiconsIcon icon={Moon01Icon} className="w-8 h-8 text-blue-500" />
+        <HugeiconsIcon icon={Github01Icon} className="w-8 h-8 text-gray-800" />
       </div>
       <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
       <p className="text-gray-600 mb-8">