workflow: support custom TS version for playground (#8735)

2023-07-10 00:18:59 +08:00 · 2023-07-10 00:18:59 +08:00 · 788527e29c
parent eee709081b
commit 788527e29c
6 changed files with 404 additions and 133 deletions
--- a/packages/sfc-playground/package.json
+++ b/packages/sfc-playground/package.json
@ -9,10 +9,10 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.3.9"
+    "vite": "^4.4.2"
  },
  "dependencies": {
-    "@vue/repl": "^2.4.0",
+    "@vue/repl": "^2.5.4",
    "file-saver": "^2.0.5",
    "jszip": "^3.6.0",
    "vue": "workspace:*"
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@ -73,7 +73,7 @@ function toggleSSR() {
  store.setFiles(store.getFiles())
 }

-const theme = ref('dark')
+const theme = ref<'dark' | 'light'>('dark')
 function toggleTheme(isDark: boolean) {
  theme.value = isDark ? 'dark' : 'light'
 }
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@ -1,44 +1,35 @@
 <script setup lang="ts">
 import { downloadProject } from './download/download'
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 import type { ReplStore } from '@vue/repl'
+import VersionSelect from './VersionSelect.vue'

 const props = defineProps<{
  store: ReplStore
  dev: boolean
  ssr: boolean
 }>()
+const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])

 const { store } = props

 const currentCommit = __COMMIT__
-const activeVersion = ref(`@${currentCommit}`)
-const publishedVersions = ref<string[]>()
-const expanded = ref(false)
-
-async function toggle() {
-  expanded.value = !expanded.value
-  if (!publishedVersions.value) {
-    publishedVersions.value = await fetchVersions()
-  }
-}
+const vueVersion = ref(`@${currentCommit}`)

 async function setVueVersion(v: string) {
-  activeVersion.value = `loading...`
+  vueVersion.value = `loading...`
  await store.setVueVersion(v)
-  activeVersion.value = `v${v}`
-  expanded.value = false
+  vueVersion.value = `v${v}`
 }

 function resetVueVersion() {
  store.resetVueVersion()
-  activeVersion.value = `@${currentCommit}`
-  expanded.value = false
+  vueVersion.value = `@${currentCommit}`
 }

 async function copyLink(e: MouseEvent) {
@ -51,54 +42,14 @@ async function copyLink(e: MouseEvent) {
  alert('Sharable URL has been copied to clipboard.')
 }

-const emit = defineEmits(['toggle-theme', 'toggle-ssr','toggle-dev'])
- function toggleDark() {
+function toggleDark() {
  const cls = document.documentElement.classList
-   cls.toggle('dark')
-   localStorage.setItem(
-     'vue-sfc-playground-prefer-dark',
-     String(cls.contains('dark'))
+  cls.toggle('dark')
+  localStorage.setItem(
+    'vue-sfc-playground-prefer-dark',
+    String(cls.contains('dark'))
  )
-   emit('toggle-theme', cls.contains('dark'))
- }
-
-onMounted(async () => {
-  window.addEventListener('click', () => {
-    expanded.value = false
-  })
-  window.addEventListener('blur', () => {
-    if (document.activeElement?.tagName === 'IFRAME') {
-      expanded.value = false
-    }
-  })
-})
-
-async function fetchVersions(): Promise<string[]> {
-  const res = await fetch(
-    `https://api.github.com/repos/vuejs/core/releases?per_page=100`
-  )
-  const releases: any[] = await res.json()
-  const versions = releases.map(r =>
-    /^v/.test(r.tag_name) ? r.tag_name.slice(1) : r.tag_name
-  )
-  // if the latest version is a pre-release, list all current pre-releases
-  // otherwise filter out pre-releases
-  let isInPreRelease = versions[0].includes('-')
-  const filteredVersions: string[] = []
-  for (const v of versions) {
-    if (v.includes('-')) {
-      if (isInPreRelease) {
-        filteredVersions.push(v)
-      }
-    } else {
-      filteredVersions.push(v)
-      isInPreRelease = false
-    }
-    if (filteredVersions.length >= 30 || v === '3.0.10') {
-      break
-    }
-  }
-  return filteredVersions
+  emit('toggle-theme', cls.contains('dark'))
 }
 </script>

@ -109,28 +60,28 @@ async function fetchVersions(): Promise<string[]> {
      <span>Vue SFC Playground</span>
    </h1>
    <div class="links">
-      <div class="version" @click.stop>
-        <span class="active-version" @click="toggle">
-          Version
-          <span class="number">{{ activeVersion }}</span>
-        </span>
-        <ul class="versions" :class="{ expanded }">
-          <li v-if="!publishedVersions"><a>loading versions...</a></li>
-          <li v-for="version of publishedVersions">
-            <a @click="setVueVersion(version)">v{{ version }}</a>
-          </li>
-          <li>
-            <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
-          </li>
-          <li>
-            <a
-              href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
-              target="_blank"
-              >Commits History</a
-            >
-          </li>
-        </ul>
-      </div>
+      <VersionSelect
+        v-model="store.state.typescriptVersion"
+        pkg="typescript"
+        label="TypeScript Version"
+      />
+      <VersionSelect
+        :model-value="vueVersion"
+        @update:model-value="setVueVersion"
+        pkg="vue"
+        label="Vue Version"
+      >
+        <li>
+          <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
+        </li>
+        <li>
+          <a
+            href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
+            target="_blank"
+            >Commits History</a
+          >
+        </li>
+      </VersionSelect>
      <button
        title="Toggle development production mode"
        class="toggle-dev"
@ -147,7 +98,7 @@ async function fetchVersions(): Promise<string[]> {
      >
        <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
      </button>
-       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
        <Sun class="light" />
        <Moon class="dark" />
      </button>
@ -235,33 +186,6 @@ h1 img {
  display: flex;
 }

-.version {
-  margin-right: 12px;
-  position: relative;
-}
-
-.active-version {
-  cursor: pointer;
-  position: relative;
-  display: inline-flex;
-  place-items: center;
-}
-
-.active-version .number {
-  color: var(--green);
-  margin-left: 4px;
-}
-
-.active-version::after {
-  content: '';
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 6px solid #aaa;
-  margin-left: 8px;
-}
-
 .toggle-dev span,
 .toggle-ssr span {
  font-size: 12px;
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const expanded = ref(false)
+const versions = ref<string[]>()
+
+const version = defineModel()
+const props = defineProps<{
+  pkg: string
+  label: string
+}>()
+
+async function toggle() {
+  expanded.value = !expanded.value
+  if (!versions.value) {
+    versions.value = await fetchVersions()
+  }
+}
+
+async function fetchVersions(): Promise<string[]> {
+  const res = await fetch(
+    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`
+  )
+  const { versions } = (await res.json()) as { versions: string[] }
+
+  if (props.pkg === 'vue') {
+    // if the latest version is a pre-release, list all current pre-releases
+    // otherwise filter out pre-releases
+    let isInPreRelease = versions[0].includes('-')
+    const filteredVersions: string[] = []
+    for (const v of versions) {
+      if (v.includes('-')) {
+        if (isInPreRelease) {
+          filteredVersions.push(v)
+        }
+      } else {
+        filteredVersions.push(v)
+        isInPreRelease = false
+      }
+      if (filteredVersions.length >= 30 || v === '3.0.10') {
+        break
+      }
+    }
+    return filteredVersions
+  } else if (props.pkg === 'typescript') {
+    return versions.filter(v => !v.includes('dev') && !v.includes('insiders'))
+  }
+  return versions
+}
+
+function setVersion(v: string) {
+  version.value = v
+  expanded.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', () => {
+    expanded.value = false
+  })
+  window.addEventListener('blur', () => {
+    if (document.activeElement?.tagName === 'IFRAME') {
+      expanded.value = false
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="version" @click.stop>
+    <span class="active-version" @click="toggle">
+      {{ label }}
+      <span class="number">{{ version }}</span>
+    </span>
+
+    <ul class="versions" :class="{ expanded }">
+      <li v-if="!versions"><a>loading versions...</a></li>
+      <li v-for="version of versions">
+        <a @click="setVersion(version)">v{{ version }}</a>
+      </li>
+      <div @click="expanded = false">
+        <slot />
+      </div>
+    </ul>
+  </div>
+</template>
+
+<style>
+.version {
+  margin-right: 12px;
+  position: relative;
+}
+
+.active-version {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  place-items: center;
+}
+
+.active-version .number {
+  color: var(--green);
+  margin-left: 4px;
+}
+
+.active-version::after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid #aaa;
+  margin-left: 8px;
+}
+</style>
--- a/packages/sfc-playground/vite.config.ts
+++ b/packages/sfc-playground/vite.config.ts
@ -10,6 +10,7 @@ export default defineConfig({
  plugins: [
    vue({
      script: {
+        defineModel: true,
        fs: {
          fileExists: fs.existsSync,
          readFile: file => fs.readFileSync(file, 'utf-8')
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -333,8 +333,8 @@ importers:
  packages/sfc-playground:
    dependencies:
      '@vue/repl':
-        specifier: ^2.4.0
-        version: 2.4.0
+        specifier: ^2.5.4
+        version: 2.5.4
      file-saver:
        specifier: ^2.0.5
        version: 2.0.5
@ -347,10 +347,10 @@ importers:
    devDependencies:
      '@vitejs/plugin-vue':
        specifier: ^4.2.3
-        version: 4.2.3(vite@4.3.9)(vue@packages+vue)
+        version: 4.2.3(vite@4.4.2)(vue@packages+vue)
      vite:
-        specifier: ^4.3.9
-        version: 4.3.9(@types/node@16.18.38)(terser@5.18.2)
+        specifier: ^4.4.2
+        version: 4.4.2(@types/node@16.18.38)(terser@5.18.2)

  packages/shared: {}

@ -627,6 +627,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/android-arm64@0.18.11:
+    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/android-arm@0.17.19:
    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
    engines: {node: '>=12'}
@ -636,6 +645,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/android-arm@0.18.11:
+    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/android-x64@0.17.19:
    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
    engines: {node: '>=12'}
@ -645,6 +663,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/android-x64@0.18.11:
+    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/darwin-arm64@0.17.19:
    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
    engines: {node: '>=12'}
@ -654,6 +681,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/darwin-arm64@0.18.11:
+    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/darwin-x64@0.17.19:
    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
    engines: {node: '>=12'}
@ -663,6 +699,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/darwin-x64@0.18.11:
+    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/freebsd-arm64@0.17.19:
    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
    engines: {node: '>=12'}
@ -672,6 +717,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/freebsd-arm64@0.18.11:
+    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/freebsd-x64@0.17.19:
    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
    engines: {node: '>=12'}
@ -681,6 +735,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/freebsd-x64@0.18.11:
+    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-arm64@0.17.19:
    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
    engines: {node: '>=12'}
@ -690,6 +753,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-arm64@0.18.11:
+    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-arm@0.17.19:
    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
    engines: {node: '>=12'}
@ -699,6 +771,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-arm@0.18.11:
+    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-ia32@0.17.19:
    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
    engines: {node: '>=12'}
@ -708,6 +789,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-ia32@0.18.11:
+    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-loong64@0.17.19:
    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
    engines: {node: '>=12'}
@ -717,6 +807,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-loong64@0.18.11:
+    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-mips64el@0.17.19:
    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
    engines: {node: '>=12'}
@ -726,6 +825,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-mips64el@0.18.11:
+    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-ppc64@0.17.19:
    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
    engines: {node: '>=12'}
@ -735,6 +843,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-ppc64@0.18.11:
+    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-riscv64@0.17.19:
    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
    engines: {node: '>=12'}
@ -744,6 +861,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-riscv64@0.18.11:
+    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-s390x@0.17.19:
    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
    engines: {node: '>=12'}
@ -753,6 +879,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-s390x@0.18.11:
+    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/linux-x64@0.17.19:
    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
    engines: {node: '>=12'}
@ -762,6 +897,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/linux-x64@0.18.11:
+    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/netbsd-x64@0.17.19:
    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
    engines: {node: '>=12'}
@ -771,6 +915,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/netbsd-x64@0.18.11:
+    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/openbsd-x64@0.17.19:
    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
    engines: {node: '>=12'}
@ -780,6 +933,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/openbsd-x64@0.18.11:
+    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/sunos-x64@0.17.19:
    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
    engines: {node: '>=12'}
@ -789,6 +951,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/sunos-x64@0.18.11:
+    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/win32-arm64@0.17.19:
    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
    engines: {node: '>=12'}
@ -798,6 +969,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/win32-arm64@0.18.11:
+    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/win32-ia32@0.17.19:
    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
    engines: {node: '>=12'}
@ -807,6 +987,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/win32-ia32@0.18.11:
+    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@esbuild/win32-x64@0.17.19:
    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
    engines: {node: '>=12'}
@ -816,6 +1005,15 @@ packages:
    dev: true
    optional: true

+  /@esbuild/win32-x64@0.18.11:
+    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /@eslint/eslintrc@1.4.1:
    resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -1244,14 +1442,14 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

-  /@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@packages+vue):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.2)(vue@packages+vue):
    resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
    engines: {node: ^14.18.0 || >=16.0.0}
    peerDependencies:
      vite: ^4.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 4.3.9(@types/node@16.18.38)(terser@5.18.2)
+      vite: 4.4.2(@types/node@16.18.38)(terser@5.18.2)
      vue: link:packages/vue
    dev: true

@ -1315,8 +1513,9 @@ packages:
    engines: {node: '>= 0.12.0'}
    dev: true

-  /@vue/repl@2.4.0:
-    resolution: {integrity: sha512-vXXEysYTCZdJo3kECwKDTxd6GI3F9RzJ3dkslY6fpdGn7q+aCizLqcWiEnWaeBjbqOh31rMsPPUxhhC3jhaiXQ==}
+  /@vue/repl@2.5.4:
+    resolution: {integrity: sha512-rUcoebQQDG/T0oXkj+QGGuVHtWdvmT76CuPjZKgYMhXQiRkydnxPsW8iBdsZ5hHFuLRukuO83Crh5itByDOe5w==}
+    requiresBuild: true
    dev: false

  /@zeit/schemas@2.6.0:
@ -2386,6 +2585,36 @@ packages:
      '@esbuild/win32-x64': 0.17.19
    dev: true

+  /esbuild@0.18.11:
+    resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.11
+      '@esbuild/android-arm64': 0.18.11
+      '@esbuild/android-x64': 0.18.11
+      '@esbuild/darwin-arm64': 0.18.11
+      '@esbuild/darwin-x64': 0.18.11
+      '@esbuild/freebsd-arm64': 0.18.11
+      '@esbuild/freebsd-x64': 0.18.11
+      '@esbuild/linux-arm': 0.18.11
+      '@esbuild/linux-arm64': 0.18.11
+      '@esbuild/linux-ia32': 0.18.11
+      '@esbuild/linux-loong64': 0.18.11
+      '@esbuild/linux-mips64el': 0.18.11
+      '@esbuild/linux-ppc64': 0.18.11
+      '@esbuild/linux-riscv64': 0.18.11
+      '@esbuild/linux-s390x': 0.18.11
+      '@esbuild/linux-x64': 0.18.11
+      '@esbuild/netbsd-x64': 0.18.11
+      '@esbuild/openbsd-x64': 0.18.11
+      '@esbuild/sunos-x64': 0.18.11
+      '@esbuild/win32-arm64': 0.18.11
+      '@esbuild/win32-ia32': 0.18.11
+      '@esbuild/win32-x64': 0.18.11
+    dev: true
+
  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
@ -4373,8 +4602,8 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2

-  /postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+  /postcss@8.4.25:
+    resolution: {integrity: sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==}
    engines: {node: ^10 || ^12 || >=14}
    dependencies:
      nanoid: 3.3.6
@ -4816,8 +5045,8 @@ packages:
      fsevents: 2.3.2
    dev: true

-  /rollup@3.25.1:
-    resolution: {integrity: sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==}
+  /rollup@3.26.2:
+    resolution: {integrity: sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==}
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
    hasBin: true
    optionalDependencies:
@ -5585,13 +5814,14 @@ packages:
      fsevents: 2.3.2
    dev: true

-  /vite@4.3.9(@types/node@16.18.38)(terser@5.18.2):
-    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
+  /vite@4.4.2(@types/node@16.18.38)(terser@5.18.2):
+    resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
    peerDependencies:
      '@types/node': '>= 14'
      less: '*'
+      lightningcss: ^1.21.0
      sass: '*'
      stylus: '*'
      sugarss: '*'
@ -5601,6 +5831,8 @@ packages:
        optional: true
      less:
        optional: true
+      lightningcss:
+        optional: true
      sass:
        optional: true
      stylus:
@ -5611,9 +5843,9 @@ packages:
        optional: true
    dependencies:
      '@types/node': 16.18.38
-      esbuild: 0.17.19
-      postcss: 8.4.24
-      rollup: 3.25.1
+      esbuild: 0.18.11
+      postcss: 8.4.25
+      rollup: 3.26.2
      terser: 5.18.2
    optionalDependencies:
      fsevents: 2.3.2