From 573fbd2e72c3246c2daadb8d8c053464c964cfe3 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 20 Sep 2021 11:21:06 -0400
Subject: [PATCH] feat: support ts in template expressions

---
 example/App.vue           |   5 +-
 example/ScriptSetup.vue   |  20 ++--
 example/TypeScript.vue    |   7 ++
 example/tsconfig.json     |   6 ++
 example/webpack.config.js |  63 ++++++-----
 package.json              |  10 +-
 src/index.ts              |  18 ++--
 src/pluginWebpack4.ts     |   7 +-
 src/pluginWebpack5.ts     |   8 +-
 src/resolveScript.ts      |   6 +-
 src/templateLoader.ts     |   8 ++
 src/util.ts               |  17 +++
 yarn.lock                 | 220 +++++++++++++++++++-------------------
 13 files changed, 229 insertions(+), 166 deletions(-)
 create mode 100644 example/TypeScript.vue
 create mode 100644 example/tsconfig.json
 create mode 100644 src/util.ts

diff --git a/example/App.vue b/example/App.vue
index d4db4374f..1d4ab3add 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -5,12 +5,14 @@
     <span>{{ count }}</span>
     <Button foo="hello!"><span>slot</span></Button>
     <ScriptSetup/>
+    <TypeScript/>
   </div>
 </template>
 
 <script>
 import Button from './Button.vue'
 import ScriptSetup from './ScriptSetup.vue'
+import TypeScript from './TypeScript.vue'
 
 export default {
   data() {
@@ -21,7 +23,8 @@ export default {
   },
   components: {
     Button,
-    ScriptSetup
+    ScriptSetup,
+    TypeScript
   }
 }
 </script>
diff --git a/example/ScriptSetup.vue b/example/ScriptSetup.vue
index 3cc768ba6..d71bc2433 100644
--- a/example/ScriptSetup.vue
+++ b/example/ScriptSetup.vue
@@ -1,17 +1,8 @@
-<template>
-  <h2>{{ hello }}</h2>
-  <div>
-    {{ count }} <button @click="inc">+</button>
-    <button @click="changeColor">change color</button>
-    <Button />
-  </div>
-</template>
-
 <script setup>
 import { ref } from 'vue'
 import Button from './Button.vue'
 
-ref: count = 100
+let count = $ref(100)
 
 function inc() {
   count++
@@ -25,6 +16,15 @@ const changeColor = () => {
 }
 </script>
 
+<template>
+  <h2>{{ hello }}</h2>
+  <div>
+    ref sugar count: {{ count }} <button @click="inc">+</button>
+    <button @click="changeColor">change color</button>
+    <Button />
+  </div>
+</template>
+
 <style>
 h2 {
   color: v-bind(color);
diff --git a/example/TypeScript.vue b/example/TypeScript.vue
new file mode 100644
index 000000000..6e8dfc5b1
--- /dev/null
+++ b/example/TypeScript.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+let a: number = 12
+</script>
+
+<template>
+  <p>From TS: {{ a?.toFixed(2) }}</p>
+</template>
diff --git a/example/tsconfig.json b/example/tsconfig.json
new file mode 100644
index 000000000..f27872932
--- /dev/null
+++ b/example/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "sourceMap": true
+  }
+}
\ No newline at end of file
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 31fa405da..a7869ab87 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -80,38 +80,49 @@ module.exports = (env = {}) => {
               'css-loader',
             ],
           },
+          // {
+          //   test: /\.js$/,
+          //   use: [
+          //     {
+          //       loader: 'cache-loader',
+          //       options: {
+          //         cacheIdentifier: hash(
+          //           // deps
+          //           fs.readFileSync(
+          //             path.resolve(__dirname, '../package.json')
+          //           ) +
+          //             // env
+          //             JSON.stringify(env) +
+          //             // client vs. server build
+          //             isServerBuild
+          //         ),
+          //         cacheDirectory: path.resolve(__dirname, '../.cache'),
+          //       },
+          //     },
+          //     ...(useBabel
+          //       ? [
+          //           {
+          //             loader: 'babel-loader',
+          //             options: {
+          //               // use yarn build-example --env.noMinimize to verify that
+          //               // babel is properly applied to all js code, including the
+          //               // render function compiled from SFC templates.
+          //               presets: ['@babel/preset-env'],
+          //             },
+          //           },
+          //         ]
+          //       : []),
+          //   ],
+          // },
           {
-            test: /\.js$/,
+            test: /\.ts$/,
             use: [
               {
-                loader: 'cache-loader',
+                loader: 'ts-loader',
                 options: {
-                  cacheIdentifier: hash(
-                    // deps
-                    fs.readFileSync(
-                      path.resolve(__dirname, '../package.json')
-                    ) +
-                      // env
-                      JSON.stringify(env) +
-                      // client vs. server build
-                      isServerBuild
-                  ),
-                  cacheDirectory: path.resolve(__dirname, '../.cache'),
+                  appendTsSuffixTo: [/\.vue$/],
                 },
               },
-              ...(useBabel
-                ? [
-                    {
-                      loader: 'babel-loader',
-                      options: {
-                        // use yarn build-example --env.noMinimize to verify that
-                        // babel is properly applied to all js code, including the
-                        // render function compiled from SFC templates.
-                        presets: ['@babel/preset-env'],
-                      },
-                    },
-                  ]
-                : []),
             ],
           },
           // target <docs> custom blocks
diff --git a/package.json b/package.json
index 22e18ea06..013e3d41b 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "loader-utils": "^2.0.0"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.0.8",
+    "@vue/compiler-sfc": "^3.2.12",
     "webpack": "^4.1.0 || ^5.0.0-0"
   },
   "peerDependenciesMeta": {
@@ -51,12 +51,12 @@
     "@types/estree": "^0.0.45",
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.13",
-    "@types/jsdom": "^16.2.4",
+    "@types/jsdom": "^16.2.13",
     "@types/loader-utils": "^2.0.1",
     "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
-    "@vue/compiler-sfc": "^3.0.8",
+    "@vue/compiler-sfc": "^3.2.12",
     "babel-loader": "^8.1.0",
     "cache-loader": "^4.1.0",
     "conventional-changelog-cli": "^2.1.1",
@@ -84,9 +84,9 @@
     "ts-jest": "^26.2.0",
     "ts-loader": "^8.0.6",
     "ts-loader-v9": "npm:ts-loader@^9.2.4",
-    "typescript": "^4.0.2",
+    "typescript": "^4.4.3",
     "url-loader": "^4.1.0",
-    "vue": "^3.0.8",
+    "vue": "^3.2.12",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
diff --git a/src/index.ts b/src/index.ts
index 3e007f63f..a0d30444c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -57,6 +57,12 @@ export default function loader(
 ) {
   const loaderContext = this
 
+  if (!/\.vue(\.html)?$/.test(loaderContext.resourcePath)) {
+    // ts-loader does some really weird stuff which causes vue-loader to
+    // somehow be applied on non-vue files... ignore them
+    return source
+  }
+
   // check if plugin is installed
   if (
     !errorEmitted &&
@@ -150,8 +156,11 @@ export default function loader(
 
   // script
   let scriptImport = `const script = {}`
+  let isTS = false
   const { script, scriptSetup } = descriptor
   if (script || scriptSetup) {
+    const lang = script?.lang || scriptSetup?.lang
+    isTS = !!(lang && /tsx?/.test(lang))
     const src = (script && !scriptSetup && script.src) || resourcePath
     const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
     const query = `?vue&type=script${attrsQuery}${resourceQuery}`
@@ -172,13 +181,8 @@ export default function loader(
     const idQuery = `&id=${id}`
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(descriptor.template.attrs)
-    // const bindingsQuery = script
-    //   ? `&bindings=${JSON.stringify(script.bindings ?? {})}`
-    //   : ``
-    // const varsQuery = descriptor.cssVars
-    //   ? `&vars=${qs.escape(generateCssVars(descriptor, id, isProduction))}`
-    //   : ``
-    const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${resourceQuery}`
+    const tsQuery = isTS ? `&ts=true` : ``
+    const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`
     templateRequest = stringifyRequest(src + query)
     templateImport = `import { ${renderFnName} } from ${templateRequest}`
   }
diff --git a/src/pluginWebpack4.ts b/src/pluginWebpack4.ts
index 940f86b06..f4a7f5107 100644
--- a/src/pluginWebpack4.ts
+++ b/src/pluginWebpack4.ts
@@ -75,13 +75,14 @@ class VueLoaderPlugin implements webpack.Plugin {
       options: vueLoaderOptions,
     }
 
-    // for each rule that matches plain .js files, also create a clone and
+    // for each rule that matches plain .js/.ts files, also create a clone and
     // match it against the compiled template code inside *.vue files, so that
     // compiled vue render functions receive the same treatment as user code
     // (mostly babel)
     const matchesJS = createMatcher(`test.js`)
+    const matchesTS = createMatcher(`test.ts`)
     const jsRulesForRenderFn = rules
-      .filter((r) => r !== vueRule && matchesJS(r))
+      .filter((r) => r !== vueRule && (matchesJS(r) || matchesTS(r)))
       .map(cloneRuleForRenderFn)
 
     // pitcher for block requests (for injecting stylePostLoader and deduping
@@ -175,7 +176,7 @@ function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
       if (parsed.vue == null || parsed.type !== 'template') {
         return false
       }
-      const fakeResourcePath = `${currentResource}.js`
+      const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`
       if (resource && !resource(fakeResourcePath)) {
         return false
       }
diff --git a/src/pluginWebpack5.ts b/src/pluginWebpack5.ts
index 84056e961..0334c4bff 100644
--- a/src/pluginWebpack5.ts
+++ b/src/pluginWebpack5.ts
@@ -195,7 +195,11 @@ class VueLoaderPlugin implements Plugin {
     // compiled vue render functions receive the same treatment as user code
     // (mostly babel)
     const jsRulesForRenderFn = rules
-      .filter((r) => r !== rawVueRule && match(r, 'test.js').length > 0)
+      .filter(
+        (r) =>
+          r !== rawVueRule &&
+          (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)
+      )
       .map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource))
 
     // global pitcher (responsible for injecting template compiler loader & CSS
@@ -259,7 +263,7 @@ const jsRuleCheck = (query: qs.ParsedUrlQuery): boolean => {
 }
 
 const jsRuleResource = (query: qs.ParsedUrlQuery, resource: string): string =>
-  `${resource}.js`
+  `${resource}.${query.ts ? `ts` : `js`}`
 
 let uid = 0
 
diff --git a/src/resolveScript.ts b/src/resolveScript.ts
index fe3348846..3a50f53bf 100644
--- a/src/resolveScript.ts
+++ b/src/resolveScript.ts
@@ -6,6 +6,7 @@ import {
   TemplateCompiler,
 } from '@vue/compiler-sfc'
 import { VueLoaderOptions } from 'src'
+import { resolveTemplateTSOptions } from './util'
 
 const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
 const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -63,7 +64,10 @@ export function resolveScript(
         templateOptions: {
           ssr: isServer,
           compiler,
-          compilerOptions: options.compilerOptions,
+          compilerOptions: {
+            ...options.compilerOptions,
+            ...resolveTemplateTSOptions(descriptor, options.compilerOptions),
+          },
           transformAssetUrls: options.transformAssetUrls || true,
         },
       })
diff --git a/src/templateLoader.ts b/src/templateLoader.ts
index b5a66285b..3acc49ae1 100644
--- a/src/templateLoader.ts
+++ b/src/templateLoader.ts
@@ -6,6 +6,7 @@ import { formatError } from './formatError'
 import { compileTemplate, TemplateCompiler } from '@vue/compiler-sfc'
 import { getDescriptor } from './descriptorCache'
 import { resolveScript } from './resolveScript'
+import { resolveTemplateTSOptions } from './util'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -14,6 +15,12 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
   source = String(source)
   const loaderContext = this
 
+  if (/\.[jt]sx?$/.test(loaderContext.resourcePath)) {
+    // ts-loader does some really weird stuff which causes vue-loader to
+    // somehow be applied on non-vue files... ignore them
+    return source
+  }
+
   // although this is not the main vue-loader, we can get access to the same
   // vue-loader options because we've set an ident in the plugin and used that
   // ident to create the request for this loader in the pitcher.
@@ -55,6 +62,7 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
       ...options.compilerOptions,
       scopeId: query.scoped ? `data-v-${scopeId}` : undefined,
       bindingMetadata: script ? script.bindings : undefined,
+      ...resolveTemplateTSOptions(descriptor, options.compilerOptions),
     },
     transformAssetUrls: options.transformAssetUrls || true,
   })
diff --git a/src/util.ts b/src/util.ts
new file mode 100644
index 000000000..a6ce1be30
--- /dev/null
+++ b/src/util.ts
@@ -0,0 +1,17 @@
+import { SFCDescriptor, CompilerOptions } from '@vue/compiler-sfc'
+
+export function resolveTemplateTSOptions(
+  descriptor: SFCDescriptor,
+  options: CompilerOptions | null | undefined
+): CompilerOptions {
+  const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang
+  const isTS = !!(lang && /tsx?$/.test(lang))
+  let expressionPlugins = (options && options.expressionPlugins) || []
+  if (isTS && !expressionPlugins.includes('typescript')) {
+    expressionPlugins = [...expressionPlugins, 'typescript']
+  }
+  return {
+    isTS,
+    expressionPlugins,
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 55270a3d2..07e7f84d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -228,10 +228,10 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
-"@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
 "@babel/helper-wrap-function@^7.10.4":
   version "7.10.4"
@@ -266,15 +266,10 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
   integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
 
-"@babel/parser@^7.12.0":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.7.tgz#fee7b39fe809d0e73e5b25eecaf5780ef3d73056"
-  integrity sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==
-
-"@babel/parser@^7.13.9":
-  version "7.13.13"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
-  integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
+"@babel/parser@^7.15.0":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
+  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
 
 "@babel/plugin-proposal-async-generator-functions@^7.10.4":
   version "7.10.5"
@@ -857,22 +852,12 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.0":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
-  integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    lodash "^4.17.19"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.13.0":
-  version "7.13.13"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.13.tgz#dcd8b815b38f537a3697ce84c8e3cc62197df96f"
-  integrity sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==
+"@babel/types@^7.15.0":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
+  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    lodash "^4.17.19"
+    "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
 "@bcoe/v8-coverage@^0.2.3":
@@ -1196,6 +1181,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
   integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
 
+"@types/estree@^0.0.48":
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
+  integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
+
 "@types/estree@^0.0.50":
   version "0.0.50"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
@@ -1261,10 +1251,10 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
-"@types/jsdom@^16.2.4":
-  version "16.2.4"
-  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.4.tgz#527ca99943e00561ca4056b1904fd5f4facebc3b"
-  integrity sha512-RssgLa5ptjVKRkHho/Ex0+DJWkVsYuV8oh2PSG3gKxFp8n/VNyB7kOrZGQkk2zgPlcBkIKOItUc/T5BXit9uhg==
+"@types/jsdom@^16.2.13":
+  version "16.2.13"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.13.tgz#126c8b7441b159d6234610a48de77b6066f1823f"
+  integrity sha512-8JQCjdeAidptSsOcRWk2iTm9wCcwn9l+kRG6k5bzUacrnm1ezV4forq0kWjUih/tumAeoG+OspOvQEbbRucBTw==
   dependencies:
     "@types/node" "*"
     "@types/parse5" "*"
@@ -1409,38 +1399,40 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@vue/compiler-core@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.8.tgz#8e24a63877232f7c5d00e97201609da7de1a3191"
-  integrity sha512-TFusP6wemgJPgmXyxHiYshtYci1PdAjX0bOSJqxPDXf2ykojRGq9RcTKj85b1fWyC9fnT5HK73OHe6rqZUa8vA==
+"@vue/compiler-core@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.12.tgz#23998d6986a45e1ab0424130cc0ad00e33da1101"
+  integrity sha512-IGJ0JmrAaAl5KBBegPAKkoXvsfDFgN/h7K1t/+0MxqpZF1fTDVUOp3tG7q9gWa7fwzGEaIsPhjtT5C3qztdLKg==
   dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/shared" "3.0.8"
-    estree-walker "^2.0.1"
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@vue/shared" "3.2.12"
+    estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.8.tgz#97b1a56998472247b8944b6ef71dacbdd708eb6c"
-  integrity sha512-uMUtpFqWOXlbnV167ihPJehVa/84k5xfTrYHJh2bqKaSL7sA2b1bkhFjTXAfOss9LcrGnQSk/CjOPZGZfExEVw==
-  dependencies:
-    "@vue/compiler-core" "3.0.8"
-    "@vue/shared" "3.0.8"
-
-"@vue/compiler-sfc@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.8.tgz#f3515814708895406c5215329c57f30571e39f01"
-  integrity sha512-KDSvOVopKwwxdVlktkUlCYv2KUvJz/2sgkflb1LmqSSNMwQ1Yso934fNstd4Su0u25JIYl1piqISBIcBnxtFBA==
-  dependencies:
-    "@babel/parser" "^7.13.9"
-    "@babel/types" "^7.13.0"
-    "@vue/compiler-core" "3.0.8"
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/compiler-ssr" "3.0.8"
-    "@vue/shared" "3.0.8"
+"@vue/compiler-dom@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.12.tgz#d6ba00114e73adb8b18940c3ff18797cc2b0514f"
+  integrity sha512-MulvKilA2USm8ubPfvXvNY55HVTn+zHERsXeNg437TXrmM4FRCis6zjWW47QZ3ZyxEkCdqOmuiFCtXbpnuthyw==
+  dependencies:
+    "@vue/compiler-core" "3.2.12"
+    "@vue/shared" "3.2.12"
+
+"@vue/compiler-sfc@^3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.12.tgz#39555550d96051508753ba934f7260dc5ee5211e"
+  integrity sha512-EjzeMQ7H2ICj+JRw2buSFXTocdCg8e5yWQTlNM/6h/u68sTwMbIfiOJBFEwBhG/wCG7Nb6Nnz888AfHTU3hdrA==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@types/estree" "^0.0.48"
+    "@vue/compiler-core" "3.2.12"
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/compiler-ssr" "3.2.12"
+    "@vue/ref-transform" "3.2.12"
+    "@vue/shared" "3.2.12"
     consolidate "^0.16.0"
-    estree-walker "^2.0.1"
+    estree-walker "^2.0.2"
     hash-sum "^2.0.0"
     lru-cache "^5.1.1"
     magic-string "^0.25.7"
@@ -1450,42 +1442,53 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.8.tgz#2be3221c82873c47a9d71311efe19f8de0f459aa"
-  integrity sha512-9xQO9IOK3B+7jCPIkqe8MmoRd17UxDvyjnsGXQfMkGrK+eONPB5/Ic6b1P2oZTXuTI2IAdnXnwDWXBSB6Cphag==
+"@vue/compiler-ssr@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.12.tgz#32e5d4bc31c371c125b43e9d07b8a8f70442b080"
+  integrity sha512-sY+VbLQ17FPr1CgirnqEgY+jbC7wI5c2Ma6u8le0+b4UKMYF9urI2pybAZc1nKz6O78FWA3OSnQFxTTLppe+9Q==
   dependencies:
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/shared" "3.2.12"
 
-"@vue/reactivity@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.8.tgz#c09afb698af2fc30fe47d2a9a918e7262e59288a"
-  integrity sha512-W0oEQ005rUa6r1Rq/fEw/Nx3FN+AoAYV2Kf+qI8RGOXHYuUdgVEf//o0UUmlT7ocnniOEf46l+eLfgvilWYJoA==
+"@vue/reactivity@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.12.tgz#b482a737cbdc891f9b1ec3100f3c1804b56d080b"
+  integrity sha512-Lr5CTQjFm5mT/6DGnVNhptmba/Qg1DbD6eNWWmiHLMlpPt4q2ww9A2orEjVw0qNcdTJ04JLPEVAz5jhTZTCfIg==
   dependencies:
-    "@vue/shared" "3.0.8"
+    "@vue/shared" "3.2.12"
 
-"@vue/runtime-core@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.8.tgz#d17860ab416fd483ffe768a53b1065d9d5180789"
-  integrity sha512-H7d+s56RPFMWT7SOwabRo9Rx6auQ4AsoY7dZ0lmT2fmgwQ+knEnqmL1KWSPQIruleYU5yCtbgyqByVz8ej5e1A==
+"@vue/ref-transform@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.12.tgz#6f7fa46dd84447ddcf54adfb1b689b1cf4243de0"
+  integrity sha512-lS7TDda61iSf3ljokXVfN0VbOsQdmpST6MZLjxzBydFCECCJaEAr6o+K8VZ7NhUCSrl+gKXHpdXxmcvwdk66aQ==
   dependencies:
-    "@vue/reactivity" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.12"
+    "@vue/shared" "3.2.12"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/runtime-core@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.12.tgz#422662fd5b85f787222d2aea840264ba97e84a13"
+  integrity sha512-LO+ztgcmsomavYUaSq7BTteh8pmnUmvUnXUFVYdlcg3VCdYRS0ImlclpYsNHqjAk2gU+H09dr2PP0kL961xUfQ==
+  dependencies:
+    "@vue/reactivity" "3.2.12"
+    "@vue/shared" "3.2.12"
 
-"@vue/runtime-dom@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.8.tgz#6d39d1304a1b14f9a1422b394e8d3a5a7af7f0ad"
-  integrity sha512-ijW6ycxydtE92rx4nRZDLONhNxtPqX09fQXEukHYv2bNnvO1Q4qY/KZ0E6wqOG0d4ZEmIabjAzG9IbNzalkFnQ==
+"@vue/runtime-dom@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.12.tgz#d9fe865dca36f9ca33ba327afdeb89ae2aa03f4c"
+  integrity sha512-+NSDqivgihvoPYbKFDmzFu1tW7SOzwc7r0b7T8vsJtooVPGxwtfAFZ6wyLtteOXXrCpyTR3kpyTCIp31uY7aJg==
   dependencies:
-    "@vue/runtime-core" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/runtime-core" "3.2.12"
+    "@vue/shared" "3.2.12"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.8.tgz#b18d3a912299c0360c41bb42f03f502c5016bb1e"
-  integrity sha512-zDdHjJjzgWYFw8TTUW08JjdERTlBik5/N5LuTAqU0e4wS6wElcvftiNHrD0ONr79O3fi66Z3Ug4jgPhBomPQUA==
+"@vue/shared@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
+  integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
 
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
@@ -2603,15 +2606,10 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-caniuse-lite@^1.0.30001125:
-  version "1.0.30001131"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz#afad8a28fc2b7a0d3ae9407e71085a0ead905d54"
-  integrity sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==
-
-caniuse-lite@^1.0.30001154:
-  version "1.0.30001154"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001154.tgz#f3bbc245ce55e4c1cd20fa731b097880181a7f17"
-  integrity sha512-y9DvdSti8NnYB9Be92ddMZQrcOe04kcQtcxtBx4NkB04+qZ+JUWotnXBJTmxlKudhxNTQ3RRknMwNU2YQl/Org==
+caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001154:
+  version "1.0.30001258"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001258.tgz"
+  integrity sha512-RBByOG6xWXUp0CR2/WU2amXz3stjKpSl5J1xU49F1n2OxD//uBZO4wCKUiG+QMGf7CHGfDDcqoKriomoGVxTeA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3974,10 +3972,10 @@ estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
-estree-walker@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
-  integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -9440,10 +9438,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
-  integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==
+typescript@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
+  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
 
 uglify-js@^2.6.1:
   version "2.8.29"
@@ -9670,14 +9668,14 @@ void-elements@^2.0.1:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-vue@^3.0.8:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
-  integrity sha512-EE6mfGnPkQgTl1A9Vl2Jld9i4cN7KUDYTC0xPSfNRff6mwYDAqjtesdFo+Sk4/BkRfFSPgR1VnzNB7YbMLdrjw==
+vue@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.12.tgz#b44f55506fb6a7c4b65635e609deb5f9368aa2ce"
+  integrity sha512-VV14HtubmB56uuQaSvLkJZgoocPiN8CJI3zZA9y8h7q/Z5hcknDIFkbq5d8ku0ukZ6AJPQqMsZWcq0qryF0jgg==
   dependencies:
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/runtime-dom" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/runtime-dom" "3.2.12"
+    "@vue/shared" "3.2.12"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"