@component-hook/create-app 1.0.4 → 1.1.1

package/template-vue/playwright.config.ts

@@ -24,37 +24,26 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
     },
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+      },
     },
 
     {
       name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone SE'],
+      },
     },
-
-    /* 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

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

package/template-vue/src/__tests__/e2e/{IndexPage.spec.ts → home.spec.ts}

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -7,14 +7,16 @@ test.beforeEach(async ({ page }) => {
 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');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).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');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle('Vue.js - The Progressive JavaScript Framework | Vue.js');
 });
 
@@ -35,14 +37,16 @@ test('locale change interact', async ({ page }) => {
 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');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).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');
-  await newPage.waitForLoadState();
+
+  await newPage.waitForLoadState('load');
   await expect(newPage).toHaveTitle(
     'GitHub - vuejs/language-tools: ⚡ High-performance Vue language tooling based-on Volar.js',
   );

package/template-vue/src/__tests__/setup/unit-test.ts

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

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

@@ -1,9 +1,9 @@
-import { screen } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+import { screen } from '@testing-library/vue';
 import { renderComponent } from '@/__tests__/unit/render';
-import { useConfigStore } from '@/stores';
+import HelloWorld from '@/pages/home/components/HelloWorld.vue';
 import i18n from '@/plugins/i18n';
+import { useConfigStore } from '@/stores';
 
 describe('HelloWorld component', () => {
   const { t } = i18n.global;

package/template-vue/src/__tests__/unit/render/index.ts

@@ -1,10 +1,10 @@
-import type { Component } from 'vue';
-import { createRouter, createMemoryHistory } from 'vue-router';
 import { render } from '@testing-library/vue';
-import type { RenderOptions } from '@testing-library/vue/types';
-import { setActivePinia, createPinia } from 'pinia';
+import { createPinia, setActivePinia } from 'pinia';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import i18n from '@/plugins/i18n';
 import { routes } from '@/router';
+import type { RenderOptions } from '@testing-library/vue/types';
+import type { Component } from 'vue';
 
 interface RenderComponentOptions extends RenderOptions<unknown> {
   provide?: Record<PropertyKey, unknown>;

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

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

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

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

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

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

package/template-vue/src/main.ts

@@ -1,15 +1,14 @@
-import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import 'virtual:svg-icons-register';
+import { createApp } from 'vue';
+import i18NPlugin from '@/plugins/i18n';
 
-import '@/styles/tailwind.postcss';
-import '@/styles/index.postcss';
-import App from './App.vue';
 import router from '@/router';
-import i18NPlugin from '@/plugins/i18n';
+import App from './App.vue';
+import 'virtual:svg-icons-register';
+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();

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/svg-icon';
+import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <template>
@@ -24,11 +25,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/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/modules/{config.ts → config.ts.art}

@@ -9,7 +9,7 @@ const defaultState = {
   version: versionString,
 };
 
-export default defineStore('coding-standards-config', {
+export default defineStore('{{projectName}}-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

@@ -1,12 +1,13 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<any, {}, any>;
-  export default component;
-}
-
-interface ImportMetaEnv extends Readonly<Record<string, string>> {
-  readonly VITE_APP_VERSION: string;
-  readonly VITE_APP_BUILD_EPOCH?: string;
-}
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<any, {}, any>;
+  export default component;
+}
+
+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

@@ -1,13 +1,13 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "baseUrl": "./",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
-}
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/template-vue/tsconfig.json

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

package/template-vue/tsconfig.node.json

@@ -1,12 +1,12 @@
-{
-  "extends": "@tsconfig/node22/tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "types": ["node"]
-  },
-  "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts"]
-}
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "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,8 @@
-{
-  "extends": "./tsconfig.app.json",
-  "exclude": [],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node", "vitest/globals"]
-  }
-}
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node", "vitest/globals"]
+  }
+}

package/template-vue/vite.config.ts

@@ -1,15 +1,19 @@
-import { fileURLToPath, URL } from 'node:url';
 import { dirname, resolve } from 'node:path';
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import Components from 'unplugin-vue-components/vite';
+import { fileURLToPath, URL } from 'node:url';
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
 import { visualizer } from 'rollup-plugin-visualizer';
+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/images/svg-icons')],
     }),
     visualizer({ gzipSize: true }),
   ],

package/template-vue/vitest.config.ts

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { fileURLToPath, URL } from 'node:url';
-import { mergeConfig, defineConfig } from 'vitest/config';
+import { defineConfig, mergeConfig } from 'vitest/config';
 import viteConfig from './vite.config';
 
 export default mergeConfig(