@component-hook/create-app 1.0.4 → 1.1.1

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

@@ -1,27 +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"]
-}
+{
+  "[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

@@ -1,21 +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.
+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

@@ -1,100 +1,81 @@
-# {{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
-```
+# {{projectName}}
+
+This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/), using [pnpm](https://pnpm.io/) for package management and [pinia](https://pinia.vuejs.org/) for state management.
+
+## Features
+
+- **Development Experience**: Written in [typeScript](https://www.typescriptlang.org/), styled with [tailwindcss](https://tailwindcss.com/), and structured with [vue-router](https://router.vuejs.org/), and [vue-i18n](https://vue-i18n.intlify.dev/). 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), 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`
+- Store persistedstate use [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
+- 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__/
+│   ├── setup/
+│   │   └── unitTest.ts
+│   ├── e2e/*
+│   └── unit/*
+├── apis/*
+├── assets/*
+│   └── images/
+│       └── svg-icons
+│          └── vue.svg
+├── components/
+│   └── svg-icon/
+│       ├── src
+│       │   └── index.vue
+│       └── index.ts
+├── constants/*
+├── hooks/*
+├── locales/
+│   ├── en-US.json
+│   └── zh-CN.json
+├── mocks/
+│   ├── handlers/*
+│   │   ├── apis/*
+│   │   └── index.ts
+│   │── browser.ts
+│   └── server.ts
+├── pages/
+│   └── home/
+│       ├── components
+│       │   └── HelloWorld.vue
+│       └── index.vue
+├── plugins/
+│   └── i18n.ts
+├── router/
+│   └── index.ts
+├── stores/
+│   ├── modules
+│   │   └── config.ts
+│   └── index.ts
+├── styles/
+│   ├── common/
+|   │   ├── all.css
+|   │   └── button.css
+│   ├── base.css
+│   ├── index.css
+│   └── tailwind.css
+├── types/*
+├── utils/*
+├── App.vue
+├── vite-env.d.ts
+└── main.ts
+```

package/template-vue/_gitignore

@@ -1,38 +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
+# 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

@@ -1,22 +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
+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/index.html.art

@@ -1,26 +1,28 @@
-<!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>
+<!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>
+      <h1>Opinionated, production ready template for Vite and Vue 3</h1>
+
+      <p>This site requires JavaScript to work.</p>
+    </noscript>
+  </body>
+</html>

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

@@ -1,3 +1,5 @@
+/** @type {import('lint-staged').Configuration} */
+
 export default {
   '*.{ts,vue}': () => 'pnpm typecheck',
   '*.{ts,js,vue}': () => 'pnpm lint',

package/template-vue/package.json

@@ -1,73 +1,71 @@
-{
-  "name": "vue-starter",
-  "version": "0.0.0",
-  "license": "MIT",
-  "type": "module",
-  "packageManager": "pnpm@10.6.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.8.3",
-    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.2.0",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
-  },
-  "devDependencies": {
-    "@component-hook/eslint-plugin": "1.0.1",
-    "@intlify/unplugin-vue-i18n": "^6.0.3",
-    "@playwright/test": "^1.51.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.6.1",
-    "@testing-library/vue": "^8.1.0",
-    "@tsconfig/node22": "22.0.0",
-    "@types/node": "^22.13.10",
-    "@vitejs/plugin-vue": "^5.2.2",
-    "@vitest/coverage-v8": "^2.1.9",
-    "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.21",
-    "cssnano": "^7.0.6",
-    "eslint": "^9.22.0",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
-    "postcss": "^8.5.3",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^13.0.1",
-    "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2",
-    "unplugin-vue-components": "^0.28.0",
-    "vite": "^5.4.14",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^2.1.9",
-    "vue-tsc": "^2.2.8"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "msw": {
-    "workerDirectory": "public"
-  },
-  "optionalDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^15.5.0"
-  }
-}
+{
+  "name": "vue-starter",
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "packageManager": "pnpm@10.10.0",
+  "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.9.0",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.3.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.3",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@component-hook/eslint-plugin": "1.1.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@playwright/test": "^1.52.0",
+    "@tailwindcss/vite": "^4.1.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.15.17",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^3.1.3",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.0.7",
+    "eslint": "^9.26.0",
+    "jsdom": "^26.1.0",
+    "msw": "^2.8.2",
+    "postcss": "^8.5.3",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.13.1",
+    "tailwindcss": "^4.1.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^3.1.3",
+    "vue-tsc": "^2.2.10"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "optionalDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.0.0"
+  }
+}