@component-hook/create-app 0.2.4-alpha.0

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

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
+import IndexPage from '@/pages/IndexPage.vue';
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/',
+  },
+  {
+    path: '/',
+    component: IndexPage,
+    meta: {
+      title: 'Vue3 Coding Standards',
+    },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

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

@@ -0,0 +1,3 @@
+import useConfigStore from '@/stores/modules/config';
+
+export { useConfigStore };

package/template-vue/src/stores/modules/config.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+const versionString = import.meta.env.DEV
+  ? `${import.meta.env.VITE_APP_VERSION}-dev`
+  : import.meta.env.VITE_APP_VERSION;
+
+const defaultState = {
+  isDev: import.meta.env.DEV,
+  version: versionString,
+};
+
+export default defineStore('coding-standards-config', {
+  state: () => defaultState,
+  getters: {},
+  actions: {},
+  persist: {
+    storage: localStorage,
+    pick: [],
+  },
+});

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

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

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

@@ -0,0 +1,12 @@
+button {
+  @apply
+  rounded-lg
+  p-2
+  border-[1px]
+  border-transparent
+  transition-[border-color]
+  duration-300
+  hover:border-[#646cff]
+  focus:outline-4
+  focus:outline-[-webkit-focus-ring-color];
+}

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

@@ -0,0 +1 @@
+@import './common/all.postcss';

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

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :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%;
+  }
+  
+  body {
+    @apply m-0 flex place-items-center min-w-[320px] min-h-screen; 
+  }
+
+  #app {
+    @apply max-w-7xl mx-auto p-8 text-center;
+  }
+
+  a {
+    @apply font-medium text-[#646cff] decoration-inherit hover:text-[#535bf2];
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      @apply bg-white text-[#213547];
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+/// <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;
+}

package/template-vue/tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    // fontFamily: {
+    //   sans: ["Monda", "Noto Sans TC", "sans-serif"],
+    // },
+    extend: {
+      colors: {
+        primary: '',
+        secondary: '',
+      },
+      backgroundImage: {},
+      animation: {},
+      keyframes: {},
+    },
+  },
+  plugins: [],
+};

package/template-vue/tsconfig.app.json

@@ -0,0 +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/*"]
+    }
+  }
+}

package/template-vue/tsconfig.json

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

package/template-vue/tsconfig.node.json

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

package/template-vue/tsconfig.vitest.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node", "vitest/globals"]
+  }
+}

package/template-vue/vite.config.ts

@@ -0,0 +1,49 @@
+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 vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import { visualizer } from 'rollup-plugin-visualizer';
+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.NODE_ENV === 'production') {
+  process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
+}
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue(),
+    Components({
+      dirs: ['src/components/common'],
+      dts: 'src/components.d.ts',
+    }),
+    vueI18nPlugin({
+      include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), 'src/assets/images/svgIcons')],
+    }),
+    visualizer({ gzipSize: true }),
+  ],
+  esbuild: {
+    pure: ['console.log'],
+    drop: ['debugger'],
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'chunks/[name]-[hash].js',
+      },
+    },
+  },
+});

package/template-vue/vitest.config.ts

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