@component-hook/create-app 1.0.4 → 1.1.1

package/README.md

@@ -1,82 +1,106 @@
-# @component-hook/create-app
-
-Scaffolding a basic `typescript` project.
-
-> **Compatibility Note:**
-> Requires [Node.js](https://nodejs.org/en/) version 18+, 20+. 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">
-    <img src="https://img.shields.io/npm/dm/@component-hook/create-app.svg" alt="npm"/>
-  </a>
-  <a href="https://www.npmjs.com/package/@component-hook/create-app">
-    <img src="https://img.shields.io/npm/v/@component-hook/create-app.svg" alt="npm"/>
-  </a>
-</p>
-
-## Create Project
-
-```bash
-$ npm create @component-hook/app@latest
-
-# or use yarn
-$ yarn create @component-hook/app
-
-# or use pnpm
-$ pnpm create @component-hook/app
-```
-
-Then follow the prompts!
-
-You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a project, run:
-
-```bash
-$ npm create @component-hook/app@latest basic-app -- --template vue
-
-# yarn
-$ yarn create @component-hook/app basic-app --template vue
-
-# pnpm
-$ pnpm create @component-hook/app basic-app --template vue
-```
-
-Currently supported template presets include:
-
-- `vue`
-
-## Project Default Setup
-
-- [Vite](https://cn.vite.dev/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Axios](https://github.com/axios/axios)
-- [TailwindcSS](https://tailwindcss.com/)
-- [PostCSS](https://postcss.org/) w/ `postcss-nesting` plugin
-- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
-- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
-- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
-- [Eslint](https://eslint.org/)
-  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- [Prettier](https://prettier.io/)
-- [Husky](https://www.npmjs.com/package/husky) to improves commits
-  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
-  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
-- Alias `@` to `<project_root>/src`
-- Mock use [msw](https://mswjs.io/)
-  - `npx msw init ./public`
-- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
-  - [jsdom](https://www.npmjs.com/package/jsdom)
-  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
-  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
-  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
-- E2E test use [playwright](https://playwright.dev/)
-- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
-- 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
-- Github workflows (default)
-  - ci - on workflow call and dispatch
-  - deploy - on push main branch
-  - preview - on pull request
-- Gitlab CI (use `--gitlab` command create project)
-  - run tests - on branches, merge request and manual
+# @component-hook/create-app
+
+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.
+
+<p>
+  <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">
+    <img src="https://img.shields.io/npm/dm/@component-hook/create-app.svg" alt="npm"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@component-hook/create-app">
+    <img src="https://img.shields.io/npm/v/@component-hook/create-app.svg" alt="npm"/>
+  </a>
+</p>
+
+## Create Project
+
+```bash
+$ npm create @component-hook/app@latest
+
+# or use yarn
+$ yarn create @component-hook/app
+
+# or use pnpm
+$ pnpm create @component-hook/app
+```
+
+Then follow the prompts!
+
+You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a project, run:
+
+```bash
+$ npm create @component-hook/app@latest basic-app -- --template vue
+
+# yarn
+$ yarn create @component-hook/app basic-app --template vue
+
+# pnpm
+$ pnpm create @component-hook/app basic-app --template vue
+```
+
+Currently supported template presets include:
+
+- `vue`
+
+## Project Features Overview
+
+This project leverages modern frontend practices and tooling, covering development experience, code quality, testing, and deployment.
+
+### 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.
+
+### API & Mocking
+
+- Handles HTTP requests using `axios`.
+- Uses `msw` (Mock Service Worker) for mocking APIs, enabling smooth local development and testing.
+
+### Code Quality
+
+- Enforces consistent code style with `ESLint` and `Prettier`.
+- Enhanced with:
+  - `husky`: For Git hooks.
+  - `lint-staged`: Only runs linters on staged files.
+  - `commitlint`: Ensures commit messages follow conventional format.
+
+### Testing
+
+- Unit testing with `Vitest` + `Testing Library`.
+- End-to-end (E2E) testing using `Playwright`.
+
+### Optimization
+
+- Minifies CSS with `cssnano`.
+- Converts px to rem using `postcss-pxtorem` for responsive design.
+- Uses `rollup-plugin-visualizer` to analyze bundle sizes.
+
+### CI / CD
+
+- Integrated `GitHub Actions` and `GitLab CI` for automated testing and deployment.
+
+### Project Structure & Conventions
+
+- The project root alias `@` points to the `src` directory (`<project_root>/src`).
+- ESLint uses a custom plugin: [`@component-hook/eslint-plugin`](https://www.npmjs.com/package/@component-hook/eslint-plugin).
+
+### Tip: Solving `npx: command not found`
+
+If you encounter `npx: command not found`, run the following command to create a symbolic link:
+
+```bash
+ln -s $(which npx) /usr/local/bin/npx
+```
+
+### Predefined Global Variables
+
+These variables are injected at build time and are fully typed:
+
+| Variable Name          | Description                                  |
+| ---------------------- | -------------------------------------------- |
+| `VITE_APP_VERSION`     | Read from `package.json` version             |
+| `VITE_APP_BUILD_EPOCH` | Timestamp generated at build time            |
+| `VITE_APP_MOCK`        | Indicates whether the mock environment is on |

package/dist/index.js

@@ -1,28 +1,29 @@
 // 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 { readdir, readFile, writeFile } from "node:fs/promises";
-import minimist from "minimist";
-import colors2 from "picocolors";
-import { copy, ensureDirSync } from "fs-extra/esm";
 import artTemplate from "art-template";
+import { copy, ensureDirSync } from "fs-extra/esm";
+import minimist from "minimist";
 import ora from "ora";
+import colors2 from "picocolors";
+
+// src/constants.ts
+var DEFAULT_PROJECT_NAME = "basic-project";
+var TEMPLATES = ["vue"];
+var GITHUB_ACTIONS = "GitHub Actions";
+var GITLAB_CI = "GitLab CI";
 
 // src/prompts.ts
 import { existsSync as existsSync2 } from "node:fs";
-import prompts from "prompts";
 import colors from "picocolors";
+import prompts from "prompts";
 
 // src/utils.ts
-import path from "node:path";
 import { existsSync, readdirSync } from "node:fs";
+import path from "node:path";
 import { remove } from "fs-extra/esm";
-
-// src/config.ts
-var DEFAULT_PROJECT_NAME = "basic-project";
-var TEMPLATES = ["vue"];
-
-// src/utils.ts
 function formatTargetDir(targetDir) {
   if (!targetDir) return targetDir;
   targetDir = targetDir.trim();
@@ -46,6 +47,9 @@ function isValidPackageName(projectName) {
 function toValidPackageName(projectName) {
   return projectName.trim().toLowerCase().replaceAll(/\s+/g, "-").replace(/^[._]/, "").replaceAll(/[^a-z\d\-~]+/g, "-");
 }
+function toUpperCasePackageName(projectName) {
+  return projectName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
+}
 function getPkgManagerInfo() {
   const userAgent = process.env.npm_config_user_agent;
   if (!userAgent) return;
@@ -108,7 +112,7 @@ function operationPrompts({ targetDir, template }) {
     type: (_, { projectName: nameAnswer }) => {
       return isValidPackageName(getProjectName(nameAnswer)) ? null : "text";
     },
-    name: "projectName",
+    name: "packageName",
     message: styleTitle("Package name:"),
     initial: (_, { projectName: nameAnswer }) => toValidPackageName(getProjectName(nameAnswer)),
     validate: (name) => {
@@ -154,7 +158,7 @@ Available templates:
   ${colors2.green("vue")}
 `;
 async function copyTemplateFolder(root, templateDir, packageName) {
-  const isGitlab = argv.lab || argv.gitlab;
+  const isGitlab = argv.l || argv.gitlab;
   const [files, pkgJson] = await Promise.all([
     readdir(templateDir),
     readFile(path2.join(templateDir, "package.json"), "utf-8")
@@ -172,11 +176,24 @@ async function copyTemplateFolder(root, templateDir, packageName) {
     }
     const templatePath = path2.join(templateDir, file);
     if (file.endsWith(".art")) {
-      const name = packageName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
-      const renderedResult = artTemplate(templatePath, { projectName: name });
-      return writeFile(targetPath.replace(".art", ""), renderedResult);
+      const isScript = file.endsWith(".js.art") || file.endsWith(".ts.art");
+      const name = isScript ? packageName : toUpperCasePackageName(packageName);
+      const replacedPath = targetPath.replace(".art", "");
+      const renderedResult = artTemplate(templatePath, {
+        projectName: name,
+        gitRepository: isGitlab ? GITLAB_CI : GITHUB_ACTIONS
+      });
+      ensureDirSync(path2.dirname(replacedPath));
+      return writeFile(replacedPath, renderedResult);
+    }
+    if (statSync(templatePath).isDirectory()) {
+      const subFiles = readdirSync2(templatePath);
+      const rewriteOrCopySubFilePromises = subFiles.map((subFile) => rewriteOrCopyFile(path2.join(file, subFile)));
+      return Promise.all(rewriteOrCopySubFilePromises).then(() => {
+      });
+    } else {
+      return copy(templatePath, targetPath);
     }
-    return copy(templatePath, targetPath);
   };
   pkg.name = packageName;
   return Promise.all([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",

package/template-vue/.github/actions/setup-environment/action.yml

@@ -1,45 +1,45 @@
-name: Setup environment
-
-description: Install dependencies
-
-runs:
-  using: composite
-  steps:
-    - name: install Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-
-    - name: install pnpm
-      uses: pnpm/action-setup@v4
-      with:
-        run_install: false
-
-    - name: get pnpm store directory
-      id: pnpm-cache
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-    - name: setup pnpm cache
-      uses: actions/cache@v4
-      with:
-        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
-
-    - name: setup node_modules cache
-      id: dependencies-cache
-      uses: actions/cache@v4
-      with:
-        path: |
-          **/node_modules
-        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-node-modules-
-
-    - name: install dependencies
-      if: steps.dependencies-cache.outputs.cache-hit != 'true'
-      shell: bash
-      run: pnpm install
+name: Setup environment
+
+description: Install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: install Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - name: setup pnpm cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: setup node_modules cache
+      id: dependencies-cache
+      uses: actions/cache@v4
+      with:
+        path: |
+          **/node_modules
+        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-node-modules-
+
+    - name: install dependencies
+      if: steps.dependencies-cache.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm install

package/template-vue/.github/renovate.json

@@ -1,12 +1,12 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", "group:allNonMajor", "schedule:weekly", ":semanticCommitTypeAll(chore)"],
-  "labels": ["dependencies"],
-  "rangeStrategy": "bump",
-  "packageRules": [
-    {
-      "depTypeList": ["peerDependencies"],
-      "enabled": false
-    }
-  ]
-}
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base", "group:allNonMajor", "schedule:weekly", ":semanticCommitTypeAll(chore)"],
+  "labels": ["dependencies"],
+  "rangeStrategy": "bump",
+  "packageRules": [
+    {
+      "depTypeList": ["peerDependencies"],
+      "enabled": false
+    }
+  ]
+}

package/template-vue/.github/workflows/ci.yml

@@ -1,22 +1,22 @@
-name: CI Pipeline
-
-on:
-  workflow_call:
-  workflow_dispatch:
-
-jobs:
-  CI:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: setup environment
-        uses: './.github/actions/setup-environment'
-
-      - name: install Playwright browsers
-        run: npx playwright install --with-deps
-
-      - name: run unit test
-        run: pnpm test:unit
-
-      - name: run e2e test
-        run: pnpm test:ci-e2e
+name: CI Pipeline
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  CI:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: setup environment
+        uses: './.github/actions/setup-environment'
+
+      - name: install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: run unit test
+        run: pnpm test:unit
+
+      - name: run e2e test
+        run: pnpm test:ci-e2e

package/template-vue/.github/workflows/deploy.yml

@@ -1,27 +1,27 @@
-name: Deploy to Production
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - 'src/**'
-      - 'pnpm-lock.yaml'
-      - 'package.json'
-
-jobs:
-  CI:
-    uses: './.github/workflows/ci.yml'
-
-  deploy:
-    runs-on: ubuntu-latest
-    needs: CI
-    steps:
-      - uses: actions/checkout@v4
-      # - name: setup environment
-      #   uses: './.github/actions/setup-environment'
-
-      # - name: build production
-      #   run: pnpm build:production
-
-      # - name: deploy to production
-      #   run: pnpm deploy
+name: Deploy to Production
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'src/**'
+      - 'pnpm-lock.yaml'
+      - 'package.json'
+
+jobs:
+  CI:
+    uses: './.github/workflows/ci.yml'
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: CI
+    steps:
+      - uses: actions/checkout@v4
+      # - name: setup environment
+      #   uses: './.github/actions/setup-environment'
+
+      # - name: build production
+      #   run: pnpm build:production
+
+      # - name: deploy to production
+      #   run: pnpm deploy

package/template-vue/.github/workflows/preview.yml

@@ -1,17 +1,17 @@
-name: Prewiew Pull Request
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-jobs:
-  CI:
-    uses: './.github/workflows/ci.yml'
-
-  preview:
-    runs-on: ubuntu-latest
-    needs: CI
-    steps:
-      - uses: actions/checkout@v4
-      # - name: setup environment
-      #   uses: './.github/actions/setup-environment'
+name: Prewiew Pull Request
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  CI:
+    uses: './.github/workflows/ci.yml'
+
+  preview:
+    runs-on: ubuntu-latest
+    needs: CI
+    steps:
+      - uses: actions/checkout@v4
+      # - name: setup environment
+      #   uses: './.github/actions/setup-environment'

package/template-vue/.gitlab/setup.yml

@@ -1,18 +1,18 @@
-variables:
-  NODE_VERSION: '20'
-  CACHE_KEY: '${CI_PROJECT_PATH_SLUG}-${CI_COMMIT_REF_SLUG}'
-
-image: node:${NODE_VERSION}-alpine
-
-cache:
-  key: ${CACHE_KEY}
-  paths:
-    - .pnpm-store
-    - node_modules/
-  policy: pull-push
-
-before_script:
-  - corepack enable
-  - corepack prepare --activate
-  - pnpm config set store-dir .pnpm-store
-  - pnpm install
+variables:
+  NODE_VERSION: '20'
+  CACHE_KEY: '${CI_PROJECT_PATH_SLUG}-${CI_COMMIT_REF_SLUG}'
+
+image: node:${NODE_VERSION}-alpine
+
+cache:
+  key: ${CACHE_KEY}
+  paths:
+    - .pnpm-store
+    - node_modules/
+  policy: pull-push
+
+before_script:
+  - corepack enable
+  - corepack prepare --activate
+  - pnpm config set store-dir .pnpm-store
+  - pnpm install

package/template-vue/.husky/commit-msg

@@ -1,3 +1,3 @@
-#!/bin/sh
-
-npx --no -- commitlint --edit ${1}
+#!/bin/sh
+
+npx --no -- commitlint --edit ${1}

package/template-vue/.husky/pre-commit

@@ -1,3 +1,3 @@
-#!/bin/sh
-
-npx lint-staged
+#!/bin/sh
+
+npx lint-staged

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

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