CHANGELOG.md

@@ -1,3 +1,21 @@
+# [16.6.0](https://github.com/vuejs/vue-loader/compare/v16.5.0...v16.6.0) (2021-09-20)
+
+
+### Bug Fixes
+
+* generate treeshaking friendly code ([11e3cb8](https://github.com/vuejs/vue-loader/commit/11e3cb8a8a4a4e0aedc2978ce6d7e549a61de3d7))
+
+
+### Features
+
+* support ts in template expressions ([573fbd2](https://github.com/vuejs/vue-loader/commit/573fbd2e72c3246c2daadb8d8c053464c964cfe3))
+
+
+
+# [16.5.0](https://github.com/vuejs/vue-loader/compare/v16.4.1...v16.5.0) (2021-08-07)
+
+
+
 # [16.5.0](https://github.com/vuejs/vue-loader/compare/v16.4.1...v16.5.0) (2021-08-07)
 
 * Custom Elements mode behavior changed: now only inlines the CSS and no longer exports the custom element constructor (exports the component as in normal mode). Users now need to explicitly call `defineCustomElement` on the component. This allows the custom element to be defined using an async version of the source component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-loader",
-  "version": "16.6.0",
+  "version": "16.7.0",
   "license": "MIT",
   "author": "Evan You",
   "main": "dist/index.js",
@@ -37,14 +37,8 @@
     "loader-utils": "^2.0.0"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.2.12",
     "webpack": "^4.1.0 || ^5.0.0-0"
   },
-  "peerDependenciesMeta": {
-    "@vue/compiler-sfc": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.11.5",
@@ -86,7 +80,7 @@
     "ts-loader-v9": "npm:ts-loader@^9.2.4",
     "typescript": "^4.4.3",
     "url-loader": "^4.1.0",
-    "vue": "^3.2.12",
+    "vue": "^3.2.13",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",

src/compiler.ts

@@ -0,0 +1,25 @@
+// extend the descriptor so we can store the scopeId on it
+declare module '@vue/compiler-sfc' {
+  interface SFCDescriptor {
+    id: string
+  }
+}
+
+import * as _compiler from '@vue/compiler-sfc'
+
+export let compiler: typeof _compiler
+
+try {
+  // Vue 3.2.13+ ships the SFC compiler directly under the `vue` package
+  // making it no longer necessary to have @vue/compiler-sfc separately installed.
+  compiler = require('vue/compiler-sfc')
+} catch (e) {
+  try {
+    compiler = require('@vue/compiler-sfc')
+  } catch (e) {
+    throw new Error(
+      `@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc ` +
+        `to be present in the dependency tree.`
+    )
+  }
+}

src/descriptorCache.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs'
 import { SFCDescriptor } from '@vue/compiler-sfc'
-import { parse } from '@vue/compiler-sfc'
+import { compiler } from './compiler'
 
 const cache = new Map<string, SFCDescriptor>()
 
@@ -20,7 +20,7 @@ export function getDescriptor(filename: string): SFCDescriptor {
   // loaders being run in separate threads. The only way to deal with this is to
   // read from disk directly...
   const source = fs.readFileSync(filename, 'utf-8')
-  const { descriptor } = parse(source, {
+  const { descriptor } = compiler.parse(source, {
     filename,
     sourceMap: true,
   })

src/formatError.ts

@@ -1,4 +1,5 @@
-import { generateCodeFrame, CompilerError } from '@vue/compiler-sfc'
+import { CompilerError } from '@vue/compiler-sfc'
+import { compiler } from './compiler'
 import chalk = require('chalk')
 
 export function formatError(
@@ -12,7 +13,11 @@ export function formatError(
   }
   const locString = `:${loc.start.line}:${loc.start.column}`
   const filePath = chalk.gray(`at ${file}${locString}`)
-  const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
+  const codeframe = compiler.generateCodeFrame(
+    source,
+    loc.start.offset,
+    loc.end.offset
+  )
   err.message = `\n${chalk.red(
     `VueCompilerError: ${err.message}`
   )}\n${filePath}\n${chalk.yellow(codeframe)}\n`

src/index.ts

@@ -1,21 +1,12 @@
-try {
-  require.resolve('@vue/compiler-sfc')
-} catch (e) {
-  throw new Error(
-    'vue-loader requires @vue/compiler-sfc to be present in the dependency ' +
-      'tree.'
-  )
-}
-
 import webpack = require('webpack')
 import * as path from 'path'
 import * as qs from 'querystring'
 import * as loaderUtils from 'loader-utils'
 
 import hash = require('hash-sum')
 
+import { compiler } from './compiler'
 import {
-  parse,
   TemplateCompiler,
   CompilerOptions,
   SFCBlock,
@@ -102,7 +93,7 @@ export default function loader(
     mode === 'production' || process.env.NODE_ENV === 'production'
 
   const filename = resourcePath.replace(/\?.*$/, '')
-  const { descriptor, errors } = parse(source, {
+  const { descriptor, errors } = compiler.parse(source, {
     filename,
     sourceMap,
   })

src/resolveScript.ts

@@ -1,12 +1,12 @@
 import webpack = require('webpack')
 import {
-  compileScript,
   SFCDescriptor,
   SFCScriptBlock,
   TemplateCompiler,
 } from '@vue/compiler-sfc'
 import { VueLoaderOptions } from 'src'
 import { resolveTemplateTSOptions } from './util'
+import { compiler } from './compiler'
 
 const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
 const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -46,24 +46,24 @@ export function resolveScript(
 
   let resolved: SFCScriptBlock | null = null
 
-  let compiler: TemplateCompiler | undefined
+  let templateCompiler: TemplateCompiler | undefined
   if (typeof options.compiler === 'string') {
-    compiler = require(options.compiler)
+    templateCompiler = require(options.compiler)
   } else {
-    compiler = options.compiler
+    templateCompiler = options.compiler
   }
 
-  if (compileScript) {
+  if (compiler.compileScript) {
     try {
-      resolved = compileScript(descriptor, {
+      resolved = compiler.compileScript(descriptor, {
         id: scopeId,
         isProd,
         inlineTemplate: enableInline,
         refSugar: options.refSugar,
         babelParserPlugins: options.babelParserPlugins,
         templateOptions: {
           ssr: isServer,
-          compiler,
+          compiler: templateCompiler,
           compilerOptions: {
             ...options.compilerOptions,
             ...resolveTemplateTSOptions(descriptor, options.compilerOptions),

src/stylePostLoader.ts

@@ -1,13 +1,13 @@
 import * as qs from 'querystring'
-import { compileStyle } from '@vue/compiler-sfc'
+import { compiler } from './compiler'
 import webpack = require('webpack')
 
 // This is a post loader that handles scoped CSS transforms.
 // Injected right before css-loader by the global pitcher (../pitch.js)
 // for any <style scoped> selection requests initiated from within vue files.
 const StylePostLoader: webpack.loader.Loader = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
-  const { code, map, errors } = compileStyle({
+  const { code, map, errors } = compiler.compileStyle({
     source: source as string,
     filename: this.resourcePath,
     id: `data-v-${query.id}`,

src/templateLoader.ts

@@ -3,10 +3,11 @@ import * as qs from 'querystring'
 import * as loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
 import { formatError } from './formatError'
-import { compileTemplate, TemplateCompiler } from '@vue/compiler-sfc'
+import { TemplateCompiler } from '@vue/compiler-sfc'
 import { getDescriptor } from './descriptorCache'
 import { resolveScript } from './resolveScript'
 import { resolveTemplateTSOptions } from './util'
+import { compiler } from './compiler'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -40,14 +41,14 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
     loaderContext
   )
 
-  let compiler: TemplateCompiler | undefined
+  let templateCompiler: TemplateCompiler | undefined
   if (typeof options.compiler === 'string') {
-    compiler = require(options.compiler)
+    templateCompiler = require(options.compiler)
   } else {
-    compiler = options.compiler
+    templateCompiler = options.compiler
   }
 
-  const compiled = compileTemplate({
+  const compiled = compiler.compileTemplate({
     source,
     filename: loaderContext.resourcePath,
     inMap,
@@ -57,7 +58,7 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
     isProd,
     ssr: isServer,
     ssrCssVars: descriptor.cssVars,
-    compiler,
+    compiler: templateCompiler,
     compilerOptions: {
       ...options.compilerOptions,
       scopeId: query.scoped ? `data-v-${scopeId}` : undefined,