@component-hook/create-app 1.5.1 → 1.6.0

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

@@ -0,0 +1,59 @@
+: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;
+
+  overscroll-behavior: none none;
+  touch-action: manipulation;
+  user-select: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -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) {
+  :root {
+    background-color: #ffffff;
+    color: #213547;
+  }
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+#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/test-utils/index.ts

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/vue';
+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>;
+}
+
+const pinia = createTestPinia();
+const router = createRouter({ history: createMemoryHistory(), routes });
+
+function createTestPinia() {
+  const testPinia = createPinia();
+
+  setActivePinia(testPinia);
+  return testPinia;
+}
+
+export function renderComponent(testComponent: Component, options?: RenderComponentOptions) {
+  const { provide, ...componentOptions } = options ?? {};
+
+  return render(testComponent, {
+    ...componentOptions,
+    global: {
+      plugins: [pinia, i18n, router],
+      provide,
+    },
+  });
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:svg-icons-register';
+
+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

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/**/*.test.*", "src/test-utils"]
+}

package/template-vue/tsconfig.vitest.json

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

package/template-vue/vite.config.ts

@@ -0,0 +1,46 @@
+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 { defineConfig } from 'vite';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import './scripts/build-info';
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue(),
+    tailwindcss(),
+    vueI18nPlugin({
+      include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), 'src/assets/svg-icons')],
+    }),
+    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',
+        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

@@ -0,0 +1,18 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      include: ['src/**/*.test.ts'],
+      setupFiles: ['./vitest.setup.ts'],
+      coverage: {
+        provider: 'v8',
+        include: ['!src/main.ts', 'src/**/*.ts', 'src/**/*.vue'],
+      },
+    },
+  }),
+);

package/template-vue/vitest.setup.ts

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