@component-hook/create-app 1.1.1 → 1.1.3

package/README.md

@@ -3,7 +3,7 @@
 Scaffolding a basic `typescript` project.
 
 > **Compatibility Note:**
-> Requires [Node.js](https://nodejs.org/en/) version 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+> Requires [Node.js](https://nodejs.org/en/) version 20.19+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
 
 <p>
   <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">
@@ -43,6 +43,7 @@ $ pnpm create @component-hook/app basic-app --template vue
 Currently supported template presets include:
 
 - `vue`
+- `react`
 
 ## Project Features Overview
 
@@ -50,9 +51,9 @@ This project leverages modern frontend practices and tooling, covering developme
 
 ### Development Experience
 
-- **Written in TypeScript**: Provides type safety and better maintainability.
-- **Styled with Tailwind CSS**: Utility-first CSS framework for fast and consistent UI styling.
-- **SVG Support**: Integrated [`vite-plugin-svg-icons`](https://github.com/vbenjs/vite-plugin-svg-icons) to use SVGs as Vue components.
+- `Written in TypeScript`: Provides type safety and better maintainability.
+- `Styled with Tailwind CSS`: Utility-first CSS framework for fast and consistent UI styling.
+- `SVG Support`: Integrated [`vite-plugin-svg-icons`](https://github.com/vbenjs/vite-plugin-svg-icons) to use SVGs as Vue components.
 
 ### API & Mocking
 
@@ -76,6 +77,7 @@ This project leverages modern frontend practices and tooling, covering developme
 
 - Minifies CSS with `cssnano`.
 - Converts px to rem using `postcss-pxtorem` for responsive design.
+- Convert modern CSS into something most browsers can understand with `postcss-preset-env`.
 - Uses `rollup-plugin-visualizer` to analyze bundle sizes.
 
 ### CI / CD

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/index.ts
-import { readdirSync as readdirSync2, statSync } from "node:fs";
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import path2 from "node:path";
-import { fileURLToPath } from "node:url";
+import { readdirSync as readdirSync2, statSync } from "fs";
+import { readdir, readFile, writeFile } from "fs/promises";
+import path2 from "path";
+import { fileURLToPath } from "url";
 import artTemplate from "art-template";
 import { copy, ensureDirSync } from "fs-extra/esm";
 import minimist from "minimist";
@@ -11,18 +11,18 @@ import colors2 from "picocolors";
 
 // src/constants.ts
 var DEFAULT_PROJECT_NAME = "basic-project";
-var TEMPLATES = ["vue"];
+var TEMPLATES = ["vue", "react"];
 var GITHUB_ACTIONS = "GitHub Actions";
 var GITLAB_CI = "GitLab CI";
 
 // src/prompts.ts
-import { existsSync as existsSync2 } from "node:fs";
+import { existsSync as existsSync2 } from "fs";
 import colors from "picocolors";
 import prompts from "prompts";
 
 // src/utils.ts
-import { existsSync, readdirSync } from "node:fs";
-import path from "node:path";
+import { existsSync, readdirSync } from "fs";
+import path from "path";
 import { remove } from "fs-extra/esm";
 function formatTargetDir(targetDir) {
   if (!targetDir) return targetDir;
@@ -125,8 +125,8 @@ function operationPrompts({ targetDir, template }) {
     message: template ? styleTitle(`${colors.red(template)} isn't a valid template. Please choose from below:`) : styleTitle("Select a framework:"),
     initial: 0,
     choices: [
-      { title: colors.green("Vue"), value: "vue" }
-      // { title: 'colors.blue('React'), value: 'react' },
+      { title: colors.green("Vue"), value: "vue" },
+      { title: colors.blue("React"), value: "react" }
     ]
   };
   return prompts([projectName, overwrite, overwriteChecker, packageName, framework], { onCancel });
@@ -156,25 +156,27 @@ Options:
 
 Available templates:
   ${colors2.green("vue")}
+  ${colors2.blue("react")}
 `;
-async function copyTemplateFolder(root, templateDir, packageName) {
+async function writePackageJson(root, dir, packageName) {
+  const pkgJson = await readFile(path2.join(dir, "package.json"), "utf-8");
+  const pkg = JSON.parse(pkgJson);
+  const targetPath = path2.join(root, "package.json");
+  pkg.name = packageName;
+  return writeFile(targetPath, `${JSON.stringify(pkg, null, 2)}
+`);
+}
+async function copyFolder(root, dir, packageName) {
   const isGitlab = argv.l || argv.gitlab;
-  const [files, pkgJson] = await Promise.all([
-    readdir(templateDir),
-    readFile(path2.join(templateDir, "package.json"), "utf-8")
-  ]);
+  const files = await readdir(dir);
   const filterFiles = files.filter((file) => {
     const filterCi = isGitlab ? ".github" : ".gitlab";
     const filterCiYml = isGitlab ? "" : "_gitlab-ci.yml";
     return file !== "package.json" && file !== filterCi && file !== filterCiYml;
   });
-  const pkg = JSON.parse(pkgJson);
-  const rewriteOrCopyFile = (file, content) => {
+  const rewriteOrCopyFile = (file) => {
     const targetPath = path2.join(root, renameFiles?.[file] ?? file);
-    if (content) {
-      return writeFile(targetPath, content);
-    }
-    const templatePath = path2.join(templateDir, file);
+    const templatePath = path2.join(dir, file);
     if (file.endsWith(".art")) {
       const isScript = file.endsWith(".js.art") || file.endsWith(".ts.art");
       const name = isScript ? packageName : toUpperCasePackageName(packageName);
@@ -195,13 +197,7 @@ async function copyTemplateFolder(root, templateDir, packageName) {
       return copy(templatePath, targetPath);
     }
   };
-  pkg.name = packageName;
-  return Promise.all([
-    ...filterFiles.map((file) => rewriteOrCopyFile(file)),
-    rewriteOrCopyFile("package.json", `${JSON.stringify(pkg, null, 2)}
-`),
-    new Promise((resolve) => setTimeout(resolve, 300))
-  ]);
+  return Promise.all(filterFiles.map((file) => rewriteOrCopyFile(file)));
 }
 async function createApp() {
   const help = argv.h || argv.help;
@@ -225,8 +221,16 @@ async function createApp() {
   } else {
     ensureDirSync(root);
   }
-  const templateDir = path2.resolve(fileURLToPath(import.meta.url), "../..", `template-${framework}`);
-  copyTemplateFolder(root, templateDir, packageName).then(() => {
+  const filePath = fileURLToPath(import.meta.url);
+  const sharedDir = path2.resolve(filePath, "../..", "template-shared");
+  const templateDir = path2.resolve(filePath, "../..", `template-${framework}`);
+  const copyPromises = Promise.all([
+    copyFolder(root, sharedDir, packageName),
+    copyFolder(root, templateDir, packageName),
+    writePackageJson(root, templateDir, packageName),
+    new Promise((resolve) => setTimeout(resolve, 300))
+  ]);
+  copyPromises.then(() => {
     const cdProjectName = path2.relative(cwd, root);
     const formattedCdProjectName = cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName;
     spinner.succeed(`${colors2.green("Scaffolded project in")} ${root}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "engines": {
-    "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+    "node": ">=20.19.3"
   },
   "repository": {
     "type": "git",

package/template-react/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "csstools.postcss",
+    "cpylua.language-postcss",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

package/template-react/.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "[nginx]": {
+    "editor.defaultFormatter": "raynigon.nginx-formatter"
+  },
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "debug.javascript.autoAttachFilter": "smart",
+  "editor.formatOnSave": true,
+  "[dart]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "editor.rulers": [120],
+    "editor.selectionHighlight": false,
+    "editor.suggest.snippetsPreventQuickSuggestions": false,
+    "editor.suggestSelection": "first",
+    "editor.tabCompletion": "onlySnippets",
+    "editor.wordBasedSuggestions": "off"
+  },
+  "workbench.editor.splitInGroupLayout": "vertical",
+  "terminal.integrated.shellIntegration.enabled": true,
+  "files.associations": {},
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["dotenv", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem", "partialize"]
+}

package/template-react/README.md.art

@@ -0,0 +1,86 @@
+# {{projectName}}
+
+This project is built with [react](https://react.dev/) + [vite](https://vite.dev/), using [pnpm](https://pnpm.io/) for package management and [zustand](https://zustand-demo.pmnd.rs/) for state management.
+
+## Features
+
+- **Development Experience**: Written in [typeScript](https://www.typescriptlang.org/), styled with [tailwindcss](https://tailwindcss.com/), and structured with [react-router-dom](https://reactrouter.com/), and [react-i18next](https://react.i18next.com/). Supports SVGs ([vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons)).
+- **API & Mocking**: Handles requests with [axios](https://axios-http.com/docs/intro) and mocks APIs using [msw](https://mswjs.io/).
+- **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
+- **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
+- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/), converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
+- **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
+
+## Code Features / Opinions
+
+- Project root aliased as `@` to `<project_root>/src`
+- ESlint plugin use [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
+- if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
+- Predefined and fully typed global variables:
+  - `VITE_APP_VERSION` is read from `package.json` version at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
+  - `VITE_APP_MOCK` is use mock environment
+
+## Project Files
+
+```text
+src/
+├── __tests__/
+│   ├── __mocks__/
+│   ├── e2e/*
+│   └── unit/*
+├── assets/*
+│   └── svg-icons
+│          └── react.svg
+├── components/
+│   └── common
+│       ├── svg-icon/
+│       │   ├── src
+│       │   │   └── index.tsx
+│       │   └── index.ts
+│       └── index.ts
+├── constants/*
+├── hooks/*
+├── locales/
+│   ├── en-US.json
+│   └── zh-CN.json
+├── mocks/
+│   ├── handlers/*
+│   │   ├── modules/*
+│   │   └── index.ts
+│   │── browser.ts
+│   └── server.ts
+├── pages/
+│   └── home/
+│       ├── components
+│       │   └── hello-world
+│       │       └── index.tsx
+│       ├── index.module.css
+│       └── index.tsx
+├── plugins/
+│   └── i18n
+│       ├── locales
+│       │   ├── es-US.json
+│       │   └── zh-TW.json
+│       └── index.ts
+├── router/
+│   └── index.tsx
+├── stores/
+│   ├── modules
+│   │   └── config.ts
+│   ├── constants.ts
+│   ├── index.ts
+│   └── middleware.ts
+├── styles/
+│   ├── common/
+|   │   ├── all.css
+|   │   └── button.css
+│   ├── base.css
+│   ├── index.css
+│   └── tailwind.css
+├── types/*
+├── utils/*
+├── App.tsx
+├── vite-env.d.ts
+└── main.tsx
+```

package/template-react/eslint.config.js

@@ -0,0 +1,18 @@
+import componentHookPlugin from '@component-hook/eslint-plugin';
+
+export default [
+  ...componentHookPlugin.configs.basic,
+  ...componentHookPlugin.configs.react,
+  componentHookPlugin.configs.prettier,
+  ...componentHookPlugin.configs.sonarjs,
+  componentHookPlugin.configs.security,
+  ...componentHookPlugin.configs.markdown,
+  {
+    files: ['**/__tests__/unit/**/*.test.[jt]s?(x)'],
+    ...componentHookPlugin.configs['testing-library/react'],
+  },
+  {
+    files: ['**/__tests__/e2e/**/*.spec.[jt]s?(x)'],
+    ...componentHookPlugin.configs.playwright,
+  },
+];

package/template-react/index.html.art

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-react/lint-staged.config.js

@@ -0,0 +1,6 @@
+/** @type {import('lint-staged').Configuration} */
+
+export default {
+  '*.{ts,tsx}': () => 'pnpm typecheck',
+  '*.{ts,js,tsx,jsx}': () => 'pnpm lint',
+};

package/template-react/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "packageManager": "pnpm@10.13.1",
+  "scripts": {
+    "dev": "vite",
+    "dev:mock": "MOCK=true vite",
+    "build": "pnpm typecheck && vite build",
+    "lint": "eslint --fix .",
+    "test:unit": "vitest --coverage",
+    "test:e2e": "playwright test --headed",
+    "test:ui-e2e": "playwright test --ui",
+    "test:ci-e2e": "playwright test",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.10.0",
+    "i18next": "^25.3.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^15.6.0",
+    "react-router-dom": "^7.6.3",
+    "zustand": "^5.0.6"
+  },
+  "devDependencies": {
+    "@component-hook/eslint-plugin": "^1.1.2",
+    "@playwright/test": "^1.54.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.16.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.0.7",
+    "eslint": "^9.30.1",
+    "jsdom": "^26.1.0",
+    "msw": "^2.10.3",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.4",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^3.2.4"
+  },
+  "optionalDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}