@component-hook/create-app 1.1.0 → 1.1.2

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

@@ -0,0 +1,61 @@
+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(
+    'GitHub - vuejs/language-tools: ⚡ High-performance Vue language tooling based-on Volar.js',
+  );
+});

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

@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/vue';
 import { renderComponent } from '@/__tests__/unit/render';
-import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+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/components/common/svg-icon/index.ts

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

package/template-vue/src/main.ts

@@ -1,24 +1,21 @@
-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/tailwind.postcss';
-import '@/styles/index.postcss';
+import '@/styles/index.css';
 
-if (process.env.NODE_ENV === 'mockServiceWorker') {
+if (import.meta.env.VITE_APP_MOCK === 'service-worker') {
   const { worker } = await import('@/mocks/browser');
 
   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/{components/indexPage → pages/home/components}/HelloWorld.vue

@@ -18,12 +18,7 @@ function changeLocale() {
   <h1>{{ msg }}</h1>
 
   <div class="p-8">
-    <button
-      type="button"
-      @click="count++"
-    >
-      count is {{ count }}
-    </button>
+    <button @click="count++">count is {{ count }}</button>
   </div>
 
   <p>
@@ -52,8 +47,8 @@ function changeLocale() {
   </button>
 </template>
 
-<style lang="postcss" scoped>
+<style lang="css" scoped>
 .read-the-docs {
-  @apply text-[#888];
+  color: #888;
 }
 </style>

package/template-vue/src/pages/{IndexPage.vue → home/index.vue}

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+import { SvgIcon } from '@/components/common';
+import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <template>
@@ -17,6 +18,7 @@ import HelloWorld from '@/components/indexPage/HelloWorld.vue';
     <a
       href="https://vuejs.org/"
       target="_blank"
+      aria-label="Vue link"
     >
       <svg-icon
         name="vue"
@@ -24,11 +26,21 @@ import HelloWorld from '@/components/indexPage/HelloWorld.vue';
       />
     </a>
   </div>
+
   <hello-world msg="Vite + Vue" />
 </template>
 
-<style lang="postcss" scoped>
+<style lang="css" scoped>
 .logo {
-  @apply w-24 h-24 p-6 mx-auto will-change-[filter] transition-[filter] duration-300 hover:drop-shadow-[0_0_2em_#646cffaa];
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+  padding: 24px;
+  will-change: filter;
+  transition: filter 300ms;
+
+  &:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
 }
 </style>

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/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
-import IndexPage from '@/pages/IndexPage.vue';
+import HomePage from '@/pages/home/index.vue';
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -8,7 +8,7 @@ export const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/',
-    component: IndexPage,
+    component: HomePage,
     meta: {
       title: 'Vue3 Coding Standards',
     },

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

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

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

@@ -0,0 +1,48 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #ffffff;
+    color: #213547;
+  }
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 80rem;
+  margin: auto;
+  padding: 32px;
+  text-align: center;
+}
+
+a {
+  font-weight: 500;
+  text-decoration-color: inherit;
+  color: #646cff;
+  transition: color 150ms;
+
+  &:hover {
+    color: #535bf2;
+  }
+}

package/template-vue/src/styles/common/all.css

@@ -0,0 +1 @@
+@import './button.css';

package/template-vue/src/styles/common/button.css

@@ -0,0 +1,15 @@
+button {
+  border-radius: 8px;
+  padding: 8px;
+  border-width: 1px;
+  border-color: transparent;
+  transition-property: border-color;
+  transition-duration: 300ms;
+  &:hover {
+    border-color: #646cff;
+  }
+  &:focus {
+    outline-width: 4px;
+    outline-color: -webkit-focus-ring-color;
+  }
+}

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

@@ -0,0 +1,3 @@
+@import './tailwind.css';
+@import './base.css';
+@import './common/all.css';

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

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/template-vue/src/vite-env.d.ts

@@ -9,4 +9,5 @@ declare module '*.vue' {
 interface ImportMetaEnv extends Readonly<Record<string, string>> {
   readonly VITE_APP_VERSION: string;
   readonly VITE_APP_BUILD_EPOCH?: string;
+  readonly VITE_APP_MOCK?: string;
 }

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.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/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

@@ -1,15 +1,19 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath, URL } from 'node:url';
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import { visualizer } from 'rollup-plugin-visualizer';
-import Components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import packageJson from './package.json' with { type: 'json' };
 
 process.env.VITE_APP_VERSION = packageJson.version;
-process.env.NODE_ENV = process.env.MOCK ? 'mockServiceWorker' : process.env.NODE_ENV;
+
+if (process.env.MOCK) {
+  process.env.VITE_APP_MOCK = 'service-worker';
+}
+
 if (process.env.NODE_ENV === 'production') {
   process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
 }
@@ -18,15 +22,12 @@ export default defineConfig({
   base: './',
   plugins: [
     vue(),
-    Components({
-      dirs: ['src/components/common'],
-      dts: 'src/components.d.ts',
-    }),
+    tailwindcss(),
     vueI18nPlugin({
       include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
     }),
     createSvgIconsPlugin({
-      iconDirs: [resolve(process.cwd(), 'src/assets/images/svgIcons')],
+      iconDirs: [resolve(process.cwd(), 'src/assets/svg-icons')],
     }),
     visualizer({ gzipSize: true }),
   ],
@@ -43,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());