@component-hook/create-app 1.5.0 → 1.6.0

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

@@ -0,0 +1 @@
+npx --no -- commitlint --edit ${1}

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

@@ -0,0 +1 @@
+npx lint-staged

package/{LICENSE → template-shared/LICENSE}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Tzuyi 
+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

package/template-shared/_gitignore

@@ -0,0 +1,32 @@
+# 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
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Test reports
+coverage
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Visualizer
+stats.html

package/template-shared/_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-shared/commitlint.config.js

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

package/template-shared/playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './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: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone SE'],
+      },
+    },
+  ],
+});

package/template-shared/postcss.config.js

@@ -0,0 +1,15 @@
+import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssPxtorem from 'postcss-pxtorem';
+
+export default {
+  plugins: [
+    postcssPresetEnv({ stage: 3 }),
+    postcssPxtorem({
+      rootValue: 16,
+      propList: ['*'],
+      selectorBlackList: ['norem'],
+    }),
+    ...(process.env.NODE_ENV === 'production' ? [cssnano({ preset: 'default' })] : []),
+  ],
+};

package/template-shared/prettier.config.js

@@ -0,0 +1,13 @@
+/** @type {import('prettier').RequiredOptions} */
+
+export default {
+  $schema: 'https://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  semi: true,
+  endOfLine: 'lf',
+  printWidth: 120,
+  proseWrap: 'preserve',
+  arrowParens: 'avoid',
+  singleAttributePerLine: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};

package/template-shared/scripts/build-info/index.ts

@@ -0,0 +1,21 @@
+import { execFileSync } from 'node:child_process';
+import os from 'node:os';
+import packageJson from '../../package.json' with { type: 'json' };
+
+const platform = os.platform();
+const git = platform === 'win32' ? String.raw`C:\Program Files\Git\bin\git.exe` : '/usr/bin/git';
+let hash = 'unknown';
+
+try {
+  hash = execFileSync(git, ['rev-parse', 'HEAD']).toString().trim().slice(0, 7);
+} catch {
+  hash = 'no-git-detected';
+}
+
+process.env.VITE_APP_VERSION = packageJson.version;
+process.env.VITE_APP_LAST_COMMIT_HASH = hash;
+process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
+
+if (process.env.MOCK) {
+  process.env.VITE_APP_MOCK = 'service-worker';
+}

package/template-shared/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "files": []
+}

package/template-shared/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts", "scripts/**/*.ts"]
+}

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,18 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+
+  "debug.javascript.autoAttachFilter": "smart",
+
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  "workbench.editor.splitInGroupLayout": "vertical",
+  "terminal.integrated.shellIntegration.enabled": true,
+
+  "cSpell.words": ["dotenv", "pinia", "persistedstate", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem"]
+}

package/template-vue/README.md.art

@@ -0,0 +1,81 @@
+# {{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), 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).
+{{ciContent}}
+
+## 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_LAST_COMMIT_HASH` is last commit hash at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `Date.now()` at build time
+  - `VITE_APP_MOCK` is use mock environment
+
+## Project Files
+
+```text
+e2e/*
+src/
+├── assets/*
+│   └── svg-icons
+│          └── vue.svg
+├── components/
+│   └── common
+│       ├── svg-icon/
+│       │   ├── src
+│       │   │   └── index.vue
+│       │   └── 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
+│       │   ├── HelloWorld.test.ts
+│       │   └── HelloWorld.vue
+│       ├── index.test.ts
+│       └── 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
+├── test-utils/
+│   └── index.ts
+├── types/*
+├── utils/*
+├── App.vue
+├── vite-env.d.ts
+└── main.ts
+```

package/template-vue/e2e/home.spec.ts

@@ -0,0 +1,59 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test('click Vite logo open Vite official website blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: /vite logo/i });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Vite | Next Generation Frontend Tooling');
+});
+
+test('click Vue logo open Vue official website blank tab', async ({ page }) => {
+  const link = page.getByLabel(/vue link/i);
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
+});
+
+test('homepage count button interact', async ({ page }) => {
+  await page.getByRole('button', { name: 'count is 0' }).click();
+  await expect(page.getByRole('button', { name: 'count is 1' })).toBeVisible();
+  await page.getByRole('button', { name: 'count is 1' }).click();
+  await expect(page.getByRole('button', { name: 'count is 2' })).toBeVisible();
+});
+
+test('locale change interact', async ({ page }) => {
+  await page.getByRole('button', { name: 'English' }).click();
+  await expect(page.getByRole('button', { name: '中文' })).toBeVisible();
+  await page.getByRole('button', { name: '中文' }).click();
+  await expect(page.getByRole('button', { name: 'English' })).toBeVisible();
+});
+
+test('click create-vue link open Vue quick start blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: 'create-vue' });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Quick Start | Vue.js');
+});
+
+test('click Volar link open language-tools github blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: 'Volar' });
+
+  await expect(link).toBeVisible();
+  const [popup] = await Promise.all([page.waitForEvent('popup'), link.evaluate((node: HTMLElement) => node.click())]);
+
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle(/vuejs\/language-tools/);
+});

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: ['**/*.test.[jt]s?(x)'],
+    ...componentHookPlugin.configs['testing-library/vue'],
+  },
+  {
+    files: ['**/e2e/**/*.spec.[jt]s?(x)'],
+    ...componentHookPlugin.configs.playwright,
+  },
+];

package/template-vue/index.html.art

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

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

package/template-vue/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vue-starter",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:mock": "cross-env 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.20.0",
+    "pinia": "^4.0.3",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.43",
+    "vue-i18n": "^11.4.12",
+    "vue-router": "^5.3.1"
+  },
+  "devDependencies": {
+    "@component-hook/eslint-plugin": "^1.5.1",
+    "@intlify/unplugin-vue-i18n": "^11.2.5",
+    "@playwright/test": "^1.63.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node24": "^24.0.5",
+    "@types/node": "^24.13.5",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/coverage-v8": "^5.0.1",
+    "@vue/tsconfig": "^0.9.1",
+    "cross-env": "^10.1.0",
+    "cssnano": "^9.0.5",
+    "eslint": "^9.39.5",
+    "fast-glob": "^3.3.3",
+    "jsdom": "^30.1.0",
+    "msw": "^2.15.0",
+    "postcss": "^8.5.28",
+    "postcss-preset-env": "^11.5.3",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.9.8",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "rollup-plugin-visualizer": "^7.1.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^5.0.1",
+    "vue-tsc": "^3.3.11"
+  },
+  "optionalDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1"
+  },
+  "packageManager": "pnpm@12.4.2",
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

package/template-vue/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>

package/template-vue/src/assets/svg-icons/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template-vue/src/components/common/index.ts

@@ -0,0 +1 @@
+export * from './svg-icon';

package/template-vue/src/components/common/svg-icon/index.ts

@@ -0,0 +1 @@
+export { default as SvgIcon } from './src/index.vue';

package/template-vue/src/components/common/svg-icon/src/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  name: string;
+  prefix?: string;
+  color?: string;
+}
+
+defineOptions({ name: 'SvgIcon' });
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'icon',
+  color: '#333',
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    :title="symbolId"
+  >
+    <use
+      :href="symbolId"
+      :fill="color"
+    />
+  </svg>
+</template>

package/template-vue/src/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+  "language": "English"
+}

package/template-vue/src/locales/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "language": "中文"
+}

package/template-vue/src/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from 'vue';
+import i18NPlugin from '@/plugins/i18n';
+import router from '@/router';
+import App from './App.vue';
+import { createPinia } from './stores';
+import 'virtual:svg-icons-register';
+import '@/styles/index.css';
+
+if (import.meta.env.VITE_APP_MOCK === 'service-worker') {
+  const { worker } = await import('@/mocks/browser');
+
+  worker.start();
+}
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+app.use(i18NPlugin);
+app.mount('#app');

package/template-vue/src/mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from '@/mocks/handlers';
+
+export const worker = setupWorker(...handlers);

package/template-vue/src/mocks/handlers/index.ts

@@ -0,0 +1 @@
+export const handlers = [];

package/template-vue/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from '@/mocks/handlers';
+
+export const mswServer = setupServer(...handlers);