@component-hook/create-app 0.2.4-alpha.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@component-hook/create-app",
+  "version": "0.2.4-alpha.0",
+  "description": "Scaffolding a basic typescript project",
+  "type": "module",
+  "license": "MIT",
+  "author": "Tzuyi",
+  "bin": {
+    "create-component-hook": "bin/index.js"
+  },
+  "files": [
+    "bin",
+    "template-*",
+    "dist"
+  ],
+  "engines": {
+    "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tzuyi0817/component-hook.git",
+    "directory": "packages/create-app"
+  },
+  "bugs": {
+    "url": "https://github.com/tzuyi0817/component-hook/issues"
+  },
+  "homepage": "https://github.com/tzuyi0817/component-hook/tree/master/packages/create-app#readme",
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/minimist": "^1.2.5",
+    "@types/prompts": "^2.4.9",
+    "art-template": "^4.13.2",
+    "cross-spawn": "^7.0.6",
+    "fs-extra": "^11.2.0",
+    "minimist": "^1.2.8",
+    "ora": "^8.1.1",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2",
+    "unbuild": "^3.2.0"
+  },
+  "scripts": {
+    "dev": "unbuild --stub",
+    "build": "unbuild",
+    "typecheck": "tsc --noEmit"
+  }
+}

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

@@ -0,0 +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

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

@@ -0,0 +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
+    }
+  ]
+}

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

@@ -0,0 +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

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

@@ -0,0 +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

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

@@ -0,0 +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'

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

@@ -0,0 +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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+{
+  "[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,
+  "volar.format.initialIndent": {
+    "html": true
+  },
+  "files.associations": {},
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["dotenv", "pinia", "persistedstate", "unplugin", "Sonarjs", "typecheck"]
+}

package/template-vue/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template-vue/README.md.art

@@ -0,0 +1,100 @@
+# {{projectName}}
+
+## Features
+
+- Vue 3
+- Pnpm 9
+- Vite 5
+- [Pinia](https://pinia.vuejs.org/) store
+  - [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
+- Routing using [vue-router 4](https://router.vuejs.org/)
+- TypeScript 5
+- Axios
+- Tailwind CSS 3
+- Vue-i18n 9
+- PostCSS 8 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
+- [Unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) auto importing for common components
+- Eslint
+  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
+- Prettier
+- [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/vue](https://testing-library.com/docs/vue-testing-library/intro/)
+  - [@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
+  - ci - on workflow call and dispatch
+  - deploy - on push main branch
+  - preview - on pull request
+- Gitlab CI
+  - run tests - on branches, merge request and manual
+
+## Project Files
+
+```text
+src/
+├── __tests__/
+│   ├── __mocks__/
+│   ├── setup/
+│   │   └── unitTest.ts
+│   ├── e2e/*
+│   └── unit/*
+├── apis/*
+├── assets/*
+│   └── images/
+│       └── svgIcons
+│          └── vue.svg
+├── components/
+│   ├── common/
+│   │   └── SvgIcon.vue
+│   └── indexPage/
+│       └── HelloWorld.vue
+├── configs/*
+├── hooks/*
+├── locales/
+│   ├── en-US.json
+│   └── zh-CN.json
+├── mocks/
+│   ├── handlers/*
+│   │   ├── apis/*
+│   │   └── index.ts
+│   │── browser.ts
+│   └── server.ts
+├── pages/
+│   └── IndexPage.vue
+├── plugins/
+│   └── i18n.ts
+├── router/
+│   └── index.ts
+├── stores/
+│   ├── modules
+│   │   └── config.ts
+│   └── index.ts
+├── styles/
+│   ├── common/
+|   │   ├── all.postcss
+|   │   └── button.postcss
+│   ├── index.postcss
+│   └── tailwind.postcss
+├── types/*
+├── utils/*
+├── App.vue
+├── vite-env.d.ts
+└── main.ts
+```

package/template-vue/_gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Component auto import
+/src/components.d.ts
+
+# Test reports
+coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Visualizer
+stats.html

package/template-vue/_gitlab-ci.yml

@@ -0,0 +1,22 @@
+stages:
+  - test
+  # - deploy
+
+include:
+  - local: '.gitlab/setup.yml'
+
+run_test:
+  stage: test
+  image: mcr.microsoft.com/playwright:focal
+  script:
+    - npx playwright install --with-deps
+    - pnpm test:unit
+    - pnpm test:ci-e2e
+  rules:
+    - if: $CI_COMMIT_BRANCH
+      changes:
+        - 'src/**'
+        - 'pnpm-lock.yaml'
+        - 'package.json'
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+    - when: manual

package/template-vue/commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+};

package/template-vue/eslint.config.js

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

package/template-vue/index.html.art

@@ -0,0 +1,26 @@
+<!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="app"></div>
+    <script
+      type="module"
+      src="/src/main.ts"
+    ></script>
+    <noscript>
+      <p>This site requires JavaScript to work.</p>
+    </noscript>
+  </body>
+</html>

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

@@ -0,0 +1,4 @@
+export default {
+  '*.{ts,vue}': () => 'pnpm typecheck',
+  '*.{ts,js,vue}': () => 'pnpm lint',
+};

package/template-vue/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "vue-starter",
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "packageManager": "pnpm@9.15.3",
+  "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": "vue-tsc --noEmit",
+    "prepare": "husky",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "pinia": "^2.3.0",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.0.1",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@component-hook/eslint-plugin": "0.2.4",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@playwright/test": "^1.49.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node22": "22.0.0",
+    "@types/node": "^22.10.5",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.17.0",
+    "jsdom": "^25.0.1",
+    "msw": "^2.7.0",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.4.2",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^5.4.11",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.2.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "optionalDependencies": {
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0"
+  }
+}

package/template-vue/playwright.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src/__tests__/e2e',
+  /* If gets stuck during the test, it will fail if it exceeds the timeout time. */
+  timeout: 30 * 1000,
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'pnpm dev:mock',
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+});

package/template-vue/postcss.config.js

@@ -0,0 +1,14 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    'postcss-nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-pxtorem': {
+      rootValue: 16,
+      propList: ['*'],
+    },
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
+  },
+};

package/template-vue/prettier.config.js

@@ -0,0 +1,11 @@
+/** @type {import('prettier').RequiredOptions} */
+
+export default {
+  singleQuote: true,
+  semi: true,
+  endOfLine: 'lf',
+  printWidth: 120,
+  proseWrap: 'preserve',
+  arrowParens: 'avoid',
+  singleAttributePerLine: true,
+};