@component-hook/create-app 1.1.1 → 1.1.3

package/template-react/vitest.setup.ts

@@ -0,0 +1,13 @@
+import { cleanup } from '@testing-library/react';
+import { mswServer } from '@/mocks/server';
+import '@testing-library/jest-dom';
+import '@/plugins/i18n';
+
+beforeAll(() => mswServer.listen());
+
+afterEach(() => {
+  cleanup();
+  mswServer.resetHandlers();
+});
+
+afterAll(() => mswServer.close());

package/template-shared/.browserslistrc

@@ -0,0 +1,10 @@
+# Click this link to view browser coverage https://browsersl.ist/#q=%3E+1.5%25%0Aios+%3E%3D+12%0Achrome+%3E%3D+49%0Anot+ie+%3C%3D+11%0Alast+2+versions%0Anot+dead
+
+# Browsers that support
+
+> 1.5%
+ios >= 12
+chrome >= 49
+not ie <= 11
+last 2 versions
+not dead

package/{template-vue → template-shared}/.github/workflows/preview.yml

@@ -1,4 +1,4 @@
-name: Prewiew Pull Request
+name: Preview Pull Request
 
 on:
   pull_request:

package/{template-vue → template-shared}/.husky/commit-msg

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

package/{template-vue → template-shared}/.husky/pre-commit

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

package/{template-vue → template-shared}/_gitignore

@@ -25,9 +25,6 @@ dist-ssr
 *.sln
 *.sw?
 
-# Component auto import
-/src/components.d.ts
-
 # Test reports
 coverage
 /test-results/

package/{template-vue → template-shared}/postcss.config.js

@@ -1,5 +1,6 @@
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
 import postcssPxtorem from 'postcss-pxtorem';
 
 export default {
@@ -10,6 +11,7 @@ export default {
       propList: ['*'],
       selectorBlackList: ['norem'],
     }),
+    postcssPresetEnv({ stage: 3 }),
     ...(process.env.NODE_ENV === 'production' ? [cssnano({ preset: 'default' })] : []),
   ],
 };

package/{template-vue → template-shared}/tsconfig.node.json

@@ -2,10 +2,10 @@
   "extends": "@tsconfig/node22/tsconfig.json",
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "resolveJsonModule": true,
     "types": ["node"]
   },
   "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts"]

package/template-vue/README.md.art

@@ -8,7 +8,7 @@ This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/
 - **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).
+- **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
@@ -28,19 +28,17 @@ This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/
 src/
 ├── __tests__/
 │   ├── __mocks__/
-│   ├── setup/
-│   │   └── unitTest.ts
 │   ├── e2e/*
 │   └── unit/*
-├── apis/*
 ├── assets/*
-│   └── images/
-│       └── svg-icons
+│   └── svg-icons
 │          └── vue.svg
 ├── components/
-│   └── svg-icon/
-│       ├── src
-│       │   └── index.vue
+│   └── common
+│       ├── svg-icon/
+│       │   ├── src
+│       │   │   └── index.vue
+│       │   └── index.ts
 │       └── index.ts
 ├── constants/*
 ├── hooks/*
@@ -49,7 +47,7 @@ src/
 │   └── zh-CN.json
 ├── mocks/
 │   ├── handlers/*
-│   │   ├── apis/*
+│   │   ├── modules/*
 │   │   └── index.ts
 │   │── browser.ts
 │   └── server.ts

package/template-vue/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vue-starter",
   "version": "0.0.0",
-  "license": "MIT",
+  "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.13.1",
   "scripts": {
     "dev": "vite",
     "dev:mock": "MOCK=true vite",
@@ -18,47 +18,43 @@
     "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",
+    "axios": "^1.10.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@component-hook/eslint-plugin": "1.1.0",
+    "@component-hook/eslint-plugin": "1.1.2",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@playwright/test": "^1.52.0",
-    "@tailwindcss/vite": "^4.1.6",
+    "@playwright/test": "^1.54.0",
+    "@tailwindcss/vite": "^4.1.11",
     "@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",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.16.3",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.7",
-    "eslint": "^9.26.0",
+    "eslint": "^9.30.1",
     "jsdom": "^26.1.0",
-    "msw": "^2.8.2",
-    "postcss": "^8.5.3",
+    "msw": "^2.10.3",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.13.1",
-    "tailwindcss": "^4.1.6",
+    "prettier": "^3.6.2",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.4",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^3.1.3",
-    "vue-tsc": "^2.2.10"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.1"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
   "msw": {
     "workerDirectory": "public"
   },
@@ -66,6 +62,6 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "husky": "^9.1.7",
-    "lint-staged": "^16.0.0"
+    "lint-staged": "^16.1.2"
   }
 }

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

@@ -4,20 +4,24 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-test('click Vite logo open Vite official website blank tab', async ({ page, context }) => {
-  await page.getByRole('link', { name: 'Vite logo' }).click();
-  const newPage = await context.waitForEvent('page');
+test('click Vite logo open Vite official website blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: /vite logo/i });
 
-  await newPage.waitForLoadState('load');
-  await expect(newPage).toHaveTitle('Vite | Next Generation Frontend Tooling');
+  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, context }) => {
-  await page.getByTitle('#icon-vue').click();
-  const newPage = await context.waitForEvent('page');
+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 newPage.waitForLoadState('load');
-  await expect(newPage).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
 });
 
 test('homepage count button interact', async ({ page }) => {
@@ -34,20 +38,24 @@ test('locale change interact', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'English' })).toBeVisible();
 });
 
-test('click create-vue link open Vue quick start blank tab', async ({ page, context }) => {
-  await page.getByRole('link', { name: 'create-vue' }).click();
-  const newPage = await context.waitForEvent('page');
+test('click create-vue link open Vue quick start blank tab', async ({ page }) => {
+  const link = page.getByRole('link', { name: 'create-vue' });
 
-  await newPage.waitForLoadState('load');
-  await expect(newPage).toHaveTitle('Quick Start | Vue.js');
+  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, context }) => {
-  await page.getByRole('link', { name: 'Volar' }).click();
-  const newPage = await context.waitForEvent('page');
+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 newPage.waitForLoadState('load');
-  await expect(newPage).toHaveTitle(
+  await popup.waitForLoadState();
+  await expect(popup).toHaveTitle(
     'GitHub - vuejs/language-tools: ⚡ High-performance Vue language tooling based-on Volar.js',
   );
 });

package/template-vue/src/__tests__/unit/{components/home → pages/home/components}/HelloWorld.test.ts

@@ -5,7 +5,7 @@ import HelloWorld from '@/pages/home/components/HelloWorld.vue';
 import i18n from '@/plugins/i18n';
 import { useConfigStore } from '@/stores';
 
-describe('HelloWorld component', () => {
+describe('home page HelloWorld component', () => {
   const { t } = i18n.global;
 
   it('renders the correct content', () => {

package/template-vue/src/__tests__/unit/pages/home/index.test.ts

@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/vue';
+import { renderComponent } from '@/__tests__/unit/render';
+import Home from '@/pages/home/index.vue';
+
+describe('home page', () => {
+  it('renders the correct content', () => {
+    renderComponent(Home);
+    const viteLink = screen.getByRole('link', { name: /vite logo/i });
+    const vueLink = screen.getByLabelText(/vue link/i);
+
+    expect(viteLink).toHaveAttribute('href', 'https://vitejs.dev');
+    expect(viteLink).toHaveAttribute('target', '_blank');
+
+    expect(vueLink).toHaveAttribute('href', 'https://vuejs.org/');
+    expect(vueLink).toHaveAttribute('target', '_blank');
+  });
+});

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

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

package/template-vue/src/main.ts

@@ -1,10 +1,9 @@
-import { createPinia } from 'pinia';
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 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';
 
@@ -14,10 +13,9 @@ if (import.meta.env.VITE_APP_MOCK === 'service-worker') {
   worker.start();
 }
 
-const pinia = createPinia();
 const app = createApp(App);
+const pinia = createPinia();
 
-pinia.use(piniaPluginPersistedstate);
 app.use(pinia);
 app.use(router);
 app.use(i18NPlugin);

package/template-vue/src/pages/home/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SvgIcon } from '@/components/svg-icon';
+import { SvgIcon } from '@/components/common';
 import HelloWorld from './components/HelloWorld.vue';
 </script>
 
@@ -18,6 +18,7 @@ import HelloWorld from './components/HelloWorld.vue';
     <a
       href="https://vuejs.org/"
       target="_blank"
+      aria-label="Vue link"
     >
       <svg-icon
         name="vue"

package/template-vue/src/plugins/i18n.ts

@@ -1,15 +1,11 @@
+import messages from '@intlify/unplugin-vue-i18n/messages';
 import { createI18n } from 'vue-i18n';
-import enUS from '@/locales/en-US.json';
-import zhTW from '@/locales/zh-TW.json';
 
 const i18n = createI18n({
   legacy: import.meta.env.MODE === 'test',
   locale: navigator.language,
   fallbackLocale: 'en-US',
-  messages: {
-    'zh-TW': zhTW,
-    'en-US': enUS,
-  },
+  messages,
 });
 
 export default i18n;

package/template-vue/src/stores/constants.ts.art

@@ -0,0 +1 @@
+export const STORAGE_PREFIX = '{{projectName}}';

package/template-vue/src/stores/index.ts

@@ -1,3 +1,15 @@
-import useConfigStore from '@/stores/modules/config';
+import { createPinia as create } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+import { STORAGE_PREFIX } from './constants';
+export { useConfigStore } from './modules/config';
 
-export { useConfigStore };
+export function createPinia() {
+  const pinia = create();
+  const persistedState = createPersistedState({
+    key: storeKey => `${STORAGE_PREFIX}-${storeKey}`,
+  });
+
+  pinia.use(persistedState);
+
+  return pinia;
+}

package/template-vue/src/stores/modules/{config.ts.art → config.ts}

@@ -9,7 +9,7 @@ const defaultState = {
   version: versionString,
 };
 
-export default defineStore('{{projectName}}-config', {
+export const useConfigStore = defineStore('config', {
   state: () => defaultState,
   getters: {},
   actions: {},

package/template-vue/src/styles/base.css

@@ -7,11 +7,16 @@
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
-  font-synthesis: none;
+  overscroll-behavior: none none;
+  touch-action: manipulation;
+  user-select: none;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+  -moz-touch-callout: none;
+  -ms-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-touch-callout: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (prefers-color-scheme: light) {
@@ -29,6 +34,12 @@ body {
   min-height: 100vh;
 }
 
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 #app {
   max-width: 80rem;
   margin: auto;

package/template-vue/tsconfig.app.json

@@ -4,10 +4,9 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
-    "noEmit": true,
-    "baseUrl": "./",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   }
 }

package/template-vue/tsconfig.vitest.json

@@ -1,8 +1,10 @@
 {
   "extends": "./tsconfig.app.json",
-  "exclude": [],
   "compilerOptions": {
     "composite": true,
-    "types": ["node", "vitest/globals"]
-  }
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+    "types": ["vitest/globals"]
+  },
+  "exclude": [],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vitest.setup.ts"]
 }

package/template-vue/vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
       include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
     }),
     createSvgIconsPlugin({
-      iconDirs: [resolve(process.cwd(), 'src/assets/images/svg-icons')],
+      iconDirs: [resolve(process.cwd(), 'src/assets/svg-icons')],
     }),
     visualizer({ gzipSize: true }),
   ],
@@ -44,6 +44,12 @@ export default defineConfig({
     rollupOptions: {
       output: {
         chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'assets/[name].[hash].[ext]',
+        entryFileNames: 'entries/[name].[hash].js',
+        manualChunks: {
+          core: ['vue', 'vue-router', 'pinia', 'pinia-plugin-persistedstate', 'vue-i18n'],
+          vender: ['axios', '@intlify/unplugin-vue-i18n/messages'],
+        },
       },
     },
   },

package/template-vue/vitest.config.ts

@@ -1,5 +1,3 @@
-/// <reference types="vitest" />
-import { fileURLToPath, URL } from 'node:url';
 import { defineConfig, mergeConfig } from 'vitest/config';
 import viteConfig from './vite.config';
 
@@ -10,8 +8,7 @@ export default mergeConfig(
       globals: true,
       environment: 'jsdom',
       include: ['src/__tests__/unit/**/*.test.ts'],
-      root: fileURLToPath(new URL('./', import.meta.url)),
-      setupFiles: ['src/__tests__/setup/unit-test.ts'],
+      setupFiles: ['./vitest.setup.ts'],
       coverage: {
         provider: 'v8',
         include: ['!src/main.ts', 'src/**/*.ts', 'src/**/*.vue'],

package/template-vue/{src/__tests__/setup/unit-test.ts → vitest.setup.ts}

@@ -1,6 +1,12 @@
+import { cleanup } from '@testing-library/vue';
 import { mswServer } from '@/mocks/server';
 import '@testing-library/jest-dom';
 
 beforeAll(() => mswServer.listen());
-afterEach(() => mswServer.resetHandlers());
+
+afterEach(() => {
+  cleanup();
+  mswServer.resetHandlers();
+});
+
 afterAll(() => mswServer.close());