feat: enableTsInTemplate option

Author: yyx990803

README.md

@@ -9,9 +9,16 @@
 - `refSugar: boolean`: enable experimental ref sugar.
 
 - `customElement: boolean | RegExp`: enable custom elements mode. An SFC loaded in custom elements mode inlines its `<style>` tags as strings under the component's `styles` option. When used with `defineCustomElement` from Vue core, the styles will be injected into the custom element's shadow root.
+
   - Default is `/\.ce\.vue$/`
   - Setting to `true` will process all `.vue` files in custom element mode.
 
+- `enableTsInTemplate: boolean` (16.8+): allow TS expressions in templates when `<script>` has `lang="ts"`. Defaults to `true`.
+
+  - When used with `ts-loader`, due to `ts-loader`'s cache invalidation behavior, it sometimes prevents the template from being hot-reloaded in isolation, causing the component to reload despite only the template being edited. If this is annoying, you can set this option to `false` (and avoid using TS expressions in templates).
+
+  - Alternatively, leave this option on (by default) and use [`esbuild-loader`](https://github.com/privatenumber/esbuild-loader) to transpile TS instead, which doesn't suffer from this problem (it's also a lot faster). However, do note you will need to rely on TS type checking from other sources (e.g. IDE or `vue-tsc`).
+
 ## What is Vue Loader?
 
 `vue-loader` is a loader for [webpack](https://webpack.js.org/) that allows you to author Vue components in a format called [Single-File Components (SFCs)](./docs/spec.md):

example/TypeScript.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-let a: number = 12
+import { ref, Ref } from 'vue'
+const a: Ref<number> = ref(12)
 </script>
 
 <template>
-  <p>From TS: {{ a?.toFixed(2) }}</p>
+  <p @click="a++">From TSssss: {{ a.toFixed(2) }}</p>
 </template>

example/webpack.config.js

@@ -55,6 +55,7 @@ module.exports = (env = {}) => {
             loader: 'vue-loader',
             options: {
               refSugar: true,
+              enableTsInTemplate: false,
             },
           },
           {

src/index.ts

@@ -36,6 +36,7 @@ export interface VueLoaderOptions {
   hotReload?: boolean
   exposeFilename?: boolean
   appendExtension?: boolean
+  enableTsInTemplate?: boolean
 
   isServerBuild?: boolean
 }
@@ -178,7 +179,8 @@ export default function loader(
     const idQuery = `&id=${id}`
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(descriptor.template.attrs)
-    const tsQuery = isTS ? `&ts=true` : ``
+    const tsQuery =
+      options.enableTsInTemplate !== false && isTS ? `&ts=true` : ``
     const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`
     templateRequest = stringifyRequest(src + query)
     templateImport = `import { ${renderFnName} } from ${templateRequest}`

src/resolveScript.ts

@@ -66,7 +66,9 @@ export function resolveScript(
           compiler: templateCompiler,
           compilerOptions: {
             ...options.compilerOptions,
-            ...resolveTemplateTSOptions(descriptor, options.compilerOptions),
+            ...(options.enableTsInTemplate
+              ? resolveTemplateTSOptions(descriptor, options.compilerOptions)
+              : null),
           },
           transformAssetUrls: options.transformAssetUrls || true,
         },

src/templateLoader.ts

@@ -63,7 +63,9 @@ 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),
+      ...(options.enableTsInTemplate
+        ? resolveTemplateTSOptions(descriptor, options.compilerOptions)
+        : null),
     },
     transformAssetUrls: options.transformAssetUrls || true,
   })