create-reactivite 1.2.0 → 1.4.0

package/README.md

@@ -4,12 +4,13 @@ A modern frontend boilerplate generator. On run it asks which template you want,
 
 ## 🚀 Templates
 
-When you run the CLI you pick one of two templates:
+When you run the CLI you pick one of three templates:
 
 | Template | Stack |
 | --- | --- |
 | **React + Vite** | React 19, Vite 8 (Rolldown), Tailwind v4, shadcn/ui, React Router v7, Recharts |
 | **Next.js 16** | Next.js 16 (App Router), React 19, Tailwind v4, shadcn/ui, i18n, TanStack Query, axios + orval, Zustand, react-hook-form + zod, husky, Vitest + MSW |
+| **Rspack** | React 19 + TypeScript, Rspack bundler (SWC). Minimal starter — grow it yourself. |
 
 ```
 $ npx create-reactivite my-app
@@ -18,6 +19,7 @@ $ npx create-reactivite my-app
 ? Pick a template: ›
 ❯ React + Vite (Tailwind v4, shadcn/ui, React Router)
   Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)
+  Rspack (minimal React + TypeScript starter)
 ```
 
 ## 📦 Installation
@@ -46,6 +48,32 @@ npx create-reactivite .
 
 Dependencies install automatically (`pnpm`, falling back to `npm`).
 
+## 🛠️ CLI usage
+
+The CLI runs interactively (prompts) or non-interactively (flags) — flags skip the matching prompt, so it works in scripts and CI.
+
+```
+npx create-reactivite [name] [options]
+```
+
+| Argument / Flag | Alias | Description |
+| --- | --- | --- |
+| `name` | | Project folder. Use `.` to scaffold into the current directory. Omit to be prompted. Must be lowercase letters, digits, `-` `.` `_` `~`. |
+| `--template <name>` | `-t` | `template` · `template2` · `template3`. Omit to be prompted. |
+| `--help` | `-h` | Print usage and exit. |
+| `--version` | `-v` | Print version and exit. |
+
+```bash
+# fully non-interactive (no prompts)
+npx create-reactivite my-app --template template2
+npx create-reactivite my-app -t template3
+
+npx create-reactivite --help
+npx create-reactivite --version
+```
+
+After copying the template the CLI sets `name` in the new `package.json`, removes any bundled lockfile (fresh resolve), runs `git init`, then installs dependencies.
+
 ---
 
 ## ⚛️ Template 1 — React + Vite
@@ -169,15 +197,79 @@ my-app/
 
 ---
 
+## 🦀 Template 3 — Rspack (minimal)
+
+A deliberately bare **React + TypeScript** starter on [Rspack](https://rspack.dev/) (Rust-based bundler, built-in SWC). No router, no UI kit — a clean base to build on.
+
+### Scripts
+
+- `pnpm dev` — dev server (port 5174)
+- `pnpm build` — production build → `dist/`
+- `pnpm preview` — serve the production build
+
+### Structure
+
+```
+my-app/
+├── index.html
+├── rspack.config.mjs       # entry, swc loader, html plugin, native CSS
+├── tsconfig.json
+└── src/
+    ├── main.tsx
+    ├── App.tsx
+    ├── index.css
+    └── components/author-credit.tsx
+```
+
+---
+
+## 👤 Author
+
+Every template renders a small credit linking to the author. Built by **Javid Salimov** —
+[GitHub](https://github.com/javidselimov) ·
+[LinkedIn](https://www.linkedin.com/in/javidsalim/) ·
+[npm](https://www.npmjs.com/~ubuligan).
+
+---
+
 ## 🎨 Adding shadcn/ui Components
 
-Both templates use shadcn/ui (new-york, lucide icons):
+The React + Vite and Next.js templates use shadcn/ui (new-york, lucide icons):
 
 ```bash
 npx shadcn@latest add button
 npx shadcn@latest add form
 ```
 
+## 🔄 Maintaining template versions
+
+This repo ships a Claude Code skill that bumps every template's dependencies to their latest published versions in one shot — useful when keeping the scaffolds current.
+
+```
+/update-template-deps
+```
+
+It runs `npm-check-updates` inside `template/`, `template2/` and `template3/`, rewrites each `package.json` to the latest, and reports what changed — flagging **major** bumps that need a build check. The generator's own root `package.json` is left untouched.
+
+You can also run the helper directly:
+
+```bash
+# all templates, latest (includes majors)
+node .claude/skills/update-template-deps/update-deps.mjs
+
+# safe — no major bumps
+node .claude/skills/update-template-deps/update-deps.mjs --target minor
+
+# a single template
+node .claude/skills/update-template-deps/update-deps.mjs --template template2
+```
+
+After a major bump, verify the affected template still builds before publishing:
+
+```bash
+cd template2 && pnpm install && pnpm build
+```
+
 ## 🤝 Contributing
 
 Contributions welcome — open a PR.
@@ -188,7 +280,7 @@ MIT
 
 ## 🔗 Links
 
-- [React](https://react.dev/) · [Next.js](https://nextjs.org/) · [Vite](https://vite.dev/)
+- [React](https://react.dev/) · [Next.js](https://nextjs.org/) · [Vite](https://vite.dev/) · [Rspack](https://rspack.dev/)
 - [Tailwind CSS](https://tailwindcss.com/) · [shadcn/ui](https://ui.shadcn.com/)
 - [React Router](https://reactrouter.com/) · [TanStack Query](https://tanstack.com/query) · [orval](https://orval.dev/)
 - [Zustand](https://zustand.docs.pmnd.rs/) · [Recharts](https://recharts.org/) · [TypeScript](https://www.typescriptlang.org/)

package/index.js

@@ -6,41 +6,160 @@ import { fileURLToPath } from "url";
 import { copy } from "fs-extra";
 import prompts from "prompts";
 import { execa } from "execa";
+import figlet from "figlet";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// ANSI rəng köməkçiləri (xarici asılılıq olmadan)
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
+const dim = (s) => `\x1b[2m${s}\x1b[0m`;
+
+// Mövcud template-lər (CLI seçim + --template flag validasiyası üçün)
+const TEMPLATES = ["template", "template2", "template3"];
+
+// 🧩 argv parse — `name` positional + `--template/-t <val>` + `--help/--version`
+const parseArgs = (argv) => {
+  const args = { _: [], template: undefined, help: false, version: false };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--help" || a === "-h") args.help = true;
+    else if (a === "--version" || a === "-v") args.version = true;
+    else if (a === "--template" || a === "-t") args.template = argv[++i];
+    else if (a.startsWith("--template=")) args.template = a.split("=")[1];
+    else if (!a.startsWith("-")) args._.push(a);
+  }
+  return args;
+};
+
+const printHelp = () => {
+  console.log(`
+  ${cyan("create-reactivite")} — scaffold React / Next.js / Rspack apps
+
+  ${dim("Usage:")}
+    npx create-reactivite [name] [options]
+
+  ${dim("Options:")}
+    -t, --template <name>   ${TEMPLATES.join(" | ")}
+    -h, --help              Show this help
+    -v, --version           Show version
+
+  ${dim("Examples:")}
+    npx create-reactivite my-app
+    npx create-reactivite my-app --template template2
+    npx create-reactivite .
+`);
+};
+
+const getVersion = () => {
+  try {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(__dirname, "package.json"), "utf8")
+    );
+    return pkg.version;
+  } catch {
+    return "unknown";
+  }
+};
+
+// 🧩 Banner — CLI açılışında göstərilir
+const printBanner = () => {
+  try {
+    console.log(cyan(figlet.textSync("Reactivite", { font: "Standard" })));
+  } catch {
+    // figlet uğursuz olsa sadə mətnə keç
+    console.log(cyan("\n  create-reactivite"));
+  }
+  console.log(dim("  Scaffold React / Next.js / Rspack apps · by Javid Salimov\n"));
+};
+
 (async () => {
-  const { projectName } = await prompts({
-    type: "text",
-    name: "projectName",
-    message: "Project name:",
-    initial: "my-react-app",
-  });
-
-  // 🧩 0. Hansı template istifadə olunacaq — istifadəçi seçir
-  const { template } = await prompts({
-    type: "select",
-    name: "template",
-    message: "Pick a template:",
-    choices: [
-      {
-        title: "React + Vite (Tailwind v4, shadcn/ui, React Router)",
-        value: "template",
-      },
-      {
-        title:
-          "Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)",
-        value: "template2",
-      },
-    ],
-    initial: 0,
-  });
-
-  // İstifadəçi seçimi ləğv etdisə (Ctrl+C) — çıx
-  if (!template) {
-    console.log("❌ Operation cancelled.");
-    process.exit(1);
+  const argv = parseArgs(process.argv.slice(2));
+
+  // --version / --help erkən çıxış (banner olmadan)
+  if (argv.version) {
+    console.log(getVersion());
+    process.exit(0);
+  }
+  if (argv.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  printBanner();
+
+  const nameRegex = /^[a-z0-9-~][a-z0-9-._~]*$/;
+
+  // 🧩 Layihə adı — argv-dən gəlirsə validasiya et, yoxsa soruş
+  let projectName = argv._[0];
+  if (projectName !== undefined) {
+    if (
+      projectName !== "." &&
+      projectName !== "./" &&
+      !nameRegex.test(projectName)
+    ) {
+      console.error(
+        `❌ Invalid project name "${projectName}" (lowercase letters, digits, - . _ ~ only)`
+      );
+      process.exit(1);
+    }
+  } else {
+    const res = await prompts({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "my-react-app",
+      // npm paket adı qaydası: kiçik hərf, rəqəm, - . _ ~ (və `.` current dir)
+      validate: (name) =>
+        name === "." || name === "./" || nameRegex.test(name)
+          ? true
+          : "Invalid name (lowercase letters, digits, - . _ ~ only)",
+    });
+    projectName = res.projectName;
+    // Ctrl+C name promptunda — çıx
+    if (projectName === undefined) {
+      console.log("❌ Operation cancelled.");
+      process.exit(1);
+    }
+  }
+
+  // 🧩 0. Template — argv-dən gəlirsə validasiya et, yoxsa soruş
+  let template = argv.template;
+  if (template !== undefined) {
+    if (!TEMPLATES.includes(template)) {
+      console.error(
+        `❌ Unknown template "${template}". Valid: ${TEMPLATES.join(", ")}`
+      );
+      process.exit(1);
+    }
+  } else {
+    const res = await prompts({
+      type: "select",
+      name: "template",
+      message: "Pick a template:",
+      choices: [
+        {
+          title: "React + Vite (Tailwind v4, shadcn/ui, React Router)",
+          value: "template",
+        },
+        {
+          title:
+            "Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)",
+          value: "template2",
+        },
+        {
+          title: "Rspack (minimal React + TypeScript starter)",
+          value: "template3",
+        },
+      ],
+      initial: 0,
+    });
+    template = res.template;
+    // İstifadəçi seçimi ləğv etdisə (Ctrl+C) — çıx
+    if (!template) {
+      console.log("❌ Operation cancelled.");
+      process.exit(1);
+    }
   }
 
   // 🧩 1. Target folderı müəyyən edirik
@@ -86,6 +205,32 @@ const __dirname = path.dirname(__filename);
     fs.renameSync(gitignoreSrc, path.join(targetPath, ".gitignore"));
   }
 
+  // 🧩 3a. Layihənin adını target package.json-a yazırıq
+  // (template-dən gələn ad `template`/`template2`/`template3` olur)
+  const pkgPath = path.join(targetPath, "package.json");
+  if (!isCurrentDir && fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+      pkg.name = projectName;
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+    } catch {
+      // package.json oxunmadı — keç
+    }
+  }
+
+  // 🧩 3b. Köhnə lockfile-ları silirik ki, fresh resolve olsun
+  for (const lock of ["pnpm-lock.yaml", "package-lock.json", "yarn.lock"]) {
+    const lockPath = path.join(targetPath, lock);
+    if (fs.existsSync(lockPath)) fs.rmSync(lockPath);
+  }
+
+  // 🧩 3c. git repo init (husky `prepare` skriptinin də işləməsi üçün)
+  try {
+    await execa("git", ["init"], { cwd: targetPath });
+  } catch {
+    // git yoxdursa — keç
+  }
+
   // 🧩 4. Asılılıqları quraşdırırıq
   console.log("📥 Installing dependencies...");
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-reactivite",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "⚡ Scaffold modern frontend projects in seconds — pick a template: React + Vite or Next.js 16 (App Router). Both ship Tailwind v4, shadcn/ui, TypeScript and a clean, production-ready structure. The Next.js template adds i18n, TanStack Query, axios/orval, Zustand, husky and Vitest. Zero setup hassle.",
   "bin": {
     "create-reactivite": "./index.js"
@@ -9,12 +9,14 @@
   "files": [
     "index.js",
     "template/",
-    "template2/"
+    "template2/",
+    "template3/"
   ],
   "dependencies": {
     "prompts": "^2.4.2",
     "fs-extra": "^11.2.0",
-    "execa": "^7.1.0"
+    "execa": "^7.1.0",
+    "figlet": "^1.9.3"
   },
   "repository": {
     "type": "git",
@@ -49,4 +51,4 @@
     "url": "https://github.com/jsznpm"
   },
   "license": "MIT"
-}
+}

package/template/src/App.tsx

@@ -5,6 +5,7 @@ import { createBrowserRouter } from "react-router";
 import { RouterProvider } from "react-router/dom";
 import Home from './pages/Homepage/Homepage';
 import DashboardPage from './pages/Dashboard/Dashboard';
+import { AuthorCredit } from './components/author-credit';
 const router = createBrowserRouter([
   {
     path: "/",
@@ -20,8 +21,12 @@ const router = createBrowserRouter([
   },
 ]);
 function App() {
-  return   <RouterProvider router={router} />
-
+  return (
+    <>
+      <RouterProvider router={router} />
+      <AuthorCredit />
+    </>
+  );
 }
 
 export default App

package/template/src/components/author-credit.tsx

@@ -0,0 +1,25 @@
+const links = [
+  { label: "GitHub", href: "https://github.com/javidselimov" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/javidsalim/" },
+  { label: "npm", href: "https://www.npmjs.com/~ubuligan" },
+];
+
+export function AuthorCredit() {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-full border bg-background/80 px-4 py-2 text-sm shadow-lg backdrop-blur">
+      <span className="font-medium">Javid Salimov</span>
+      <span className="text-muted-foreground">·</span>
+      {links.map((l) => (
+        <a
+          key={l.label}
+          href={l.href}
+          target="_blank"
+          rel="noreferrer"
+          className="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {l.label}
+        </a>
+      ))}
+    </div>
+  );
+}

package/template2/app/[locale]/layout.tsx

@@ -9,6 +9,7 @@ import { TranslationProvider } from '@/contexts/translation-context';
 import { Toaster } from '@/components/ui/sonner';
 import { QueryProvider } from '@/hoc/provider';
 import { AuthEventListener } from '@/components/AuthEventListener';
+import { AuthorCredit } from '@/components/author-credit';
 import { LOCALES, type Locale } from '@/config/constants';
 import { getDictionary } from './locales';
 
@@ -46,6 +47,7 @@ export default async function LocaleLayout({
             <TranslationProvider locale={locale} messages={messages}>
               <AuthEventListener />
               <Suspense fallback={null}>{children}</Suspense>
+              <AuthorCredit />
             </TranslationProvider>
             <Toaster />
           </ThemeProvider>

package/template2/components/author-credit.tsx

@@ -0,0 +1,25 @@
+const links = [
+  { label: 'GitHub', href: 'https://github.com/javidselimov' },
+  { label: 'LinkedIn', href: 'https://www.linkedin.com/in/javidsalim/' },
+  { label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
+];
+
+export function AuthorCredit() {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-full border bg-background/80 px-4 py-2 text-sm shadow-lg backdrop-blur">
+      <span className="font-medium">Javid Salimov</span>
+      <span className="text-muted-foreground">·</span>
+      {links.map((l) => (
+        <a
+          key={l.label}
+          href={l.href}
+          target="_blank"
+          rel="noreferrer"
+          className="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {l.label}
+        </a>
+      ))}
+    </div>
+  );
+}