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

package/template-vue/public/mockServiceWorker.js

@@ -0,0 +1,307 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}

package/template-vue/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+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 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 expect(newPage).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, context }) => {
+  await page.getByRole('link', { name: 'create-vue' }).click();
+  const newPage = await context.waitForEvent('page');
+  await newPage.waitForLoadState();
+  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 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

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

package/template-vue/src/__tests__/unit/components/indexPage/HelloWorld.test.ts

@@ -0,0 +1,57 @@
+import { screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import HelloWorld from '@/components/indexPage/HelloWorld.vue';
+import { renderComponent } from '@/__tests__/unit/render';
+import { useConfigStore } from '@/stores';
+import i18n from '@/plugins/i18n';
+
+describe('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/__tests__/unit/render/index.ts

@@ -0,0 +1,28 @@
+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 i18n from '@/plugins/i18n';
+import { routes } from '@/router';
+
+interface RenderComponentOptions extends RenderOptions<unknown> {
+  provide?: Record<PropertyKey, unknown>;
+}
+
+const pinia = createPinia();
+const router = createRouter({ history: createMemoryHistory(), routes });
+
+setActivePinia(pinia);
+
+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/assets/images/svgIcons/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template-vue/src/components/common/SvgIcon.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  name: string;
+  prefix?: string;
+  color?: string;
+}
+
+defineOptions({ name: 'SvgIcon' });
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'icon',
+  color: '#333',
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    :title="symbolId"
+  >
+    <use
+      :href="symbolId"
+      :fill="color"
+    />
+  </svg>
+</template>

package/template-vue/src/components/indexPage/HelloWorld.vue

@@ -0,0 +1,59 @@
+<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
+      type="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="postcss" scoped>
+.read-the-docs {
+  @apply text-[#888];
+}
+</style>

package/template-vue/src/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./components/common/SvgIcon.vue')['default']
+  }
+}

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

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

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

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

package/template-vue/src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import 'virtual:svg-icons-register';
+
+import '@/styles/tailwind.postcss';
+import '@/styles/index.postcss';
+import App from './App.vue';
+import router from '@/router';
+import i18NPlugin from '@/plugins/i18n';
+
+if (process.env.NODE_ENV === 'mockServiceWorker') {
+  const { worker } = await import('@/mocks/browser');
+
+  worker.start();
+}
+
+const pinia = createPinia();
+const app = createApp(App);
+
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
+app.use(router);
+app.use(i18NPlugin);
+app.mount('#app');

package/template-vue/src/mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from '@/mocks/handlers';
+
+export const worker = setupWorker(...handlers);

package/template-vue/src/mocks/handlers/index.ts

@@ -0,0 +1 @@
+export const handlers = [];

package/template-vue/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from '@/mocks/handlers';
+
+export const mswServer = setupServer(...handlers);

package/template-vue/src/pages/IndexPage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import HelloWorld from '@/components/indexPage/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"
+    >
+      <svg-icon
+        name="vue"
+        class="logo hover:drop-shadow-[0_0_2em_#42b883aa]"
+      />
+    </a>
+  </div>
+  <hello-world msg="Vite + Vue" />
+</template>
+
+<style lang="postcss" 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];
+}
+</style>

package/template-vue/src/plugins/i18n.ts

@@ -0,0 +1,15 @@
+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,
+  },
+});
+
+export default i18n;