fix: fix lang matching

Author: h-a-n-a

Diff for: src/index.ts

@@ -20,7 +20,12 @@ import { formatError } from './formatError'
 import VueLoaderPlugin from './plugin'
 import { canInlineTemplate } from './resolveScript'
 import { setDescriptor } from './descriptorCache'
-import { getOptions, stringifyRequest as _stringifyRequest } from './util'
+import {
+  getOptions,
+  stringifyRequest as _stringifyRequest,
+  genMatchResource,
+  testWebpack5,
+} from './util'
 
 export { VueLoaderPlugin }
 
@@ -94,14 +99,11 @@ export default function loader(
     _compiler,
   } = loaderContext
 
-  const webpackVersion = _compiler?.webpack?.version
-  const isWebpack5 = webpackVersion && webpackVersion[0] > '4'
-
+  const isWebpack5 = testWebpack5(_compiler)
   const rawQuery = _resourceQuery.slice(1)
   const incomingQuery = qs.parse(rawQuery)
   const resourceQuery = rawQuery ? `&${rawQuery}` : ''
   const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
-
   const enableInlineMatchResource =
     isWebpack5 && Boolean(options.experimentalInlineMatchResource)
 
@@ -392,30 +394,3 @@ function attrsToQuery(attrs: SFCBlock['attrs'], langFallback?: string): string {
   }
   return query
 }
-
-function genMatchResource(
-  context: LoaderContext<VueLoaderOptions>,
-  resourcePath: string,
-  resourceQuery?: string,
-  lang?: string,
-  additionalLoaders?: string[]
-) {
-  resourceQuery = resourceQuery || ''
-  additionalLoaders = additionalLoaders || []
-
-  const loaders = [...additionalLoaders]
-  const parsedQuery = qs.parse(resourceQuery.slice(1))
-
-  // process non-external resources
-  if ('vue' in parsedQuery && !('external' in parsedQuery)) {
-    const currentRequest = context.loaders
-      .slice(context.loaderIndex)
-      .map((obj) => obj.request)
-    loaders.push(...currentRequest)
-  }
-  const loaderString = loaders.join('!')
-
-  return `${resourcePath}${lang ? `.${lang}` : ''}${resourceQuery}!=!${
-    loaderString ? `${loaderString}!` : ''
-  }${resourcePath}${resourceQuery}`
-}

Diff for: src/pitcher.ts

@@ -1,6 +1,6 @@
 import type { LoaderDefinitionFunction, LoaderContext } from 'webpack'
 import * as qs from 'querystring'
-import { stringifyRequest } from './util'
+import { getOptions, stringifyRequest, testWebpack5 } from './util'
 import { VueLoaderOptions } from '.'
 
 const selfPath = require.resolve('./index')
@@ -58,8 +58,7 @@ export const pitch = function () {
   })
 
   // Inject style-post-loader before css-loader for scoped CSS and trimming
-  const webpackVersion = context._compiler?.webpack?.version
-  const isWebpack5 = webpackVersion && webpackVersion[0] > '4'
+  const isWebpack5 = testWebpack5(context._compiler)
   if (query.type === `style`) {
     if (isWebpack5 && context._compiler?.options.experiments.css) {
       if (query.inline || query.module) {
@@ -103,15 +102,21 @@ export const pitch = function () {
 
   // Rewrite request. Technically this should only be done when we have deduped
   // loaders. But somehow this is required for block source maps to work.
-  return genProxyModule(loaders, context, query.type !== 'template')
+  return genProxyModule(
+    loaders,
+    context,
+    query.type !== 'template',
+    query.ts ? 'ts' : (query.lang as string)
+  )
 }
 
 function genProxyModule(
   loaders: (Loader | string)[],
   context: LoaderContext<VueLoaderOptions>,
-  exportDefault = true
+  exportDefault = true,
+  lang = 'js'
 ) {
-  const request = genRequest(loaders, context)
+  const request = genRequest(loaders, lang, context)
   // return a proxy module which simply re-exports everything from the
   // actual request. Note for template blocks the compiled module has no
   // default export.
@@ -123,12 +128,28 @@ function genProxyModule(
 
 function genRequest(
   loaders: (Loader | string)[],
+  lang: string,
   context: LoaderContext<VueLoaderOptions>
 ) {
+  const isWebpack5 = testWebpack5(context._compiler)
+  const options = (getOptions(context) || {}) as VueLoaderOptions
+  const enableInlineMatchResource =
+    isWebpack5 && options.experimentalInlineMatchResource
+
   const loaderStrings = loaders.map((loader) => {
     return typeof loader === 'string' ? loader : loader.request
   })
   const resource = context.resourcePath + context.resourceQuery
+
+  if (enableInlineMatchResource) {
+    return stringifyRequest(
+      context,
+      `${context.resourcePath}${lang ? `.${lang}` : ''}${
+        context.resourceQuery
+      }!=!-!${[...loaderStrings, resource].join('!')}`
+    )
+  }
+
   return stringifyRequest(
     context,
     '-!' + [...loaderStrings, resource].join('!')

Diff for: src/plugin.ts

@@ -1,4 +1,5 @@
 import type { Compiler } from 'webpack'
+import { testWebpack5 } from './util'
 
 declare class VueLoaderPlugin {
   static NS: string
@@ -11,7 +12,7 @@ class Plugin {
   static NS = NS
   apply(compiler: Compiler) {
     let Ctor: typeof VueLoaderPlugin
-    if (compiler.webpack?.version && compiler.webpack.version[0] > '4') {
+    if (testWebpack5(compiler)) {
       // webpack5 and upper
       Ctor = require('./pluginWebpack5').default
     } else {

Diff for: src/pluginWebpack5.ts

@@ -223,6 +223,7 @@ class VueLoaderPlugin {
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null
       },
+      options: vueLoaderOptions,
     }
 
     // replace original rules

Diff for: src/util.ts

@@ -1,4 +1,5 @@
 import type { Compiler, LoaderContext } from 'webpack'
+import qs from 'querystring'
 import type { SFCDescriptor, CompilerOptions } from 'vue/compiler-sfc'
 import type { VueLoaderOptions } from '.'
 import * as path from 'path'
@@ -163,3 +164,38 @@ export function stringifyRequest(
       .join('!')
   )
 }
+
+export function genMatchResource(
+  context: LoaderContext<VueLoaderOptions>,
+  resourcePath: string,
+  resourceQuery?: string,
+  lang?: string,
+  additionalLoaders?: string[]
+) {
+  resourceQuery = resourceQuery || ''
+  additionalLoaders = additionalLoaders || []
+
+  const loaders = [...additionalLoaders]
+  const parsedQuery = qs.parse(resourceQuery.slice(1))
+
+  // process non-external resources
+  if ('vue' in parsedQuery && !('external' in parsedQuery)) {
+    const currentRequest = context.loaders
+      .slice(context.loaderIndex)
+      .map((obj) => obj.request)
+    loaders.push(...currentRequest)
+  }
+  const loaderString = loaders.join('!')
+
+  return `${resourcePath}${lang ? `.${lang}` : ''}${resourceQuery}!=!${
+    loaderString ? `${loaderString}!` : ''
+  }${resourcePath}${resourceQuery}`
+}
+
+export const testWebpack5 = (compiler?: Compiler) => {
+  if (!compiler) {
+    return false
+  }
+  const webpackVersion = compiler?.webpack?.version
+  return Boolean(webpackVersion && webpackVersion[0] > '4')
+}