@component-hook/create-app 1.5.0 → 1.6.0

package/template-vue/src/pages/home/components/HelloWorld.test.ts

@@ -0,0 +1,57 @@
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/vue';
+import HelloWorld from '@/pages/home/components/HelloWorld.vue';
+import i18n from '@/plugins/i18n';
+import { useConfigStore } from '@/stores';
+import { renderComponent } from '@/test-utils';
+
+describe('home page HelloWorld component', () => {
+  const { t } = i18n.global;
+
+  it('renders the correct content', () => {
+    const msg = 'Hello World!';
+    const { version } = useConfigStore();
+
+    renderComponent(HelloWorld, { props: { msg } });
+    expect(screen.getByRole('heading', { name: msg })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /count is 0/i })).toBeInTheDocument();
+    expect(screen.getByText(/check out , the official vue \+ vite starter/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /create-vue/i })).toBeInTheDocument();
+    expect(screen.getByText(/install in your ide for a better dx/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /volar/i })).toBeInTheDocument();
+    expect(screen.getByText(/click on the vite and vue logos to learn more/i)).toBeInTheDocument();
+    expect(screen.getByText(version)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: t('language') })).toBeInTheDocument();
+  });
+
+  it('count button interact', async () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const countButton = screen.getByRole('button', { name: /count is 0/i });
+
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 1/i);
+    await userEvent.click(countButton);
+    await userEvent.click(countButton);
+    expect(countButton).toHaveTextContent(/count is 3/i);
+  });
+
+  it('link correct attribute', () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const createVueLink = screen.getByRole('link', { name: /create-vue/i });
+    const volarLink = screen.getByRole('link', { name: /volar/i });
+
+    expect(createVueLink).toHaveAttribute('href', 'https://vuejs.org/guide/quick-start.html#local');
+    expect(createVueLink).toHaveAttribute('target', '_blank');
+    expect(volarLink).toHaveAttribute('href', 'https://github.com/vuejs/language-tools');
+    expect(volarLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('locale change interact', async () => {
+    renderComponent(HelloWorld, { props: { msg: '' } });
+    const localeButton = screen.getByRole('button', { name: t('language') });
+
+    expect(localeButton).toHaveTextContent('English');
+    await userEvent.click(localeButton);
+    expect(localeButton).toHaveTextContent('中文');
+  });
+});

package/template-vue/src/pages/home/components/HelloWorld.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useConfigStore } from '@/stores';
+
+defineProps<{ msg: string }>();
+
+const { locale } = useI18n();
+const { version } = useConfigStore();
+const count = ref(0);
+
+function changeLocale() {
+  locale.value = locale.value === 'en-US' ? 'zh-TW' : 'en-US';
+}
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="p-8">
+    <button @click="count++">count is {{ count }}</button>
+  </div>
+
+  <p>
+    Check out
+    <a
+      href="https://vuejs.org/guide/quick-start.html#local"
+      target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a
+      href="https://github.com/vuejs/language-tools"
+      target="_blank"
+      >Volar</a
+    >
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <p class="read-the-docs">
+    {{ version }}
+  </p>
+  <button @click="changeLocale">
+    {{ $t('language') }}
+  </button>
+</template>
+
+<style lang="css" scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

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

@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/vue';
+import Home from '@/pages/home/index.vue';
+import { renderComponent } from '@/test-utils';
+
+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/pages/home/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { SvgIcon } from '@/components/common';
+import HelloWorld from './components/HelloWorld.vue';
+</script>
+
+<template>
+  <div>
+    <a
+      href="https://vitejs.dev"
+      target="_blank"
+    >
+      <img
+        src="/vite.svg"
+        class="logo"
+        alt="Vite logo"
+      />
+    </a>
+    <a
+      href="https://vuejs.org/"
+      target="_blank"
+      aria-label="Vue link"
+    >
+      <svg-icon
+        name="vue"
+        class="logo hover:drop-shadow-[0_0_2em_#42b883aa]"
+      />
+    </a>
+  </div>
+
+  <hello-world msg="Vite + Vue" />
+</template>
+
+<style lang="css" scoped>
+.logo {
+  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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { createPinia as create } from 'pinia';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+import { STORAGE_PREFIX } from './constants';
+export { useConfigStore } from './modules/config';
+
+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

@@ -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 const useConfigStore = defineStore('config', {
+  state: () => defaultState,
+  getters: {},
+  actions: {},
+  persist: {
+    storage: localStorage,
+    pick: [],
+  },
+});

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());