fix(plugin-vue): hmr got error by transformSFC to inject code (fix #301)

packages/plugin-vue/src/handleHotUpdate.ts

@@ -31,7 +31,7 @@ export async function handleHotUpdate(
  { file, modules, read }: HmrContext,
  options: ResolvedOptions,
 ): Promise<ModuleNode[] | void> {
- const prevDescriptor = getDescriptor(file, options, false, true)
+ const prevDescriptor = await getDescriptor(file, options, false, true)
  if (!prevDescriptor) {
  // file hasn't been requested yet (e.g. async component)
  return

packages/plugin-vue/src/index.ts

@@ -16,6 +16,7 @@ import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
 import {
  getDescriptor,
+ getReadCode,
  getSrcDescriptor,
  getTempSrcDescriptor,
 } from './utils/descriptorCache'
@@ -81,6 +82,7 @@ export interface ResolvedOptions extends Options {
  cssDevSourcemap: boolean
  devServer?: ViteDevServer
  devToolsEnabled?: boolean
+ readCode: ReturnType<typeof getReadCode>
 }
 
 export interface Api {
@@ -100,6 +102,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  sourceMap: true,
  cssDevSourcemap: false,
  devToolsEnabled: process.env.NODE_ENV !== 'production',
+ readCode: getReadCode([]),
  })
 
  const filter = computed(() =>
@@ -157,6 +160,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  configResolved(config) {
  options.value = {
  ...options.value,
+ readCode: getReadCode(config.plugins),
  root: config.root,
  sourceMap: config.command === 'build' ? !!config.build.sourcemap : true,
  cssDevSourcemap: config.css?.devSourcemap ?? false,
@@ -191,7 +195,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  }
  },
 
- load(id, opt) {
+ async load(id, opt) {
  const ssr = opt?.ssr === true
  if (id === EXPORT_HELPER_ID) {
  return helperCode
@@ -204,7 +208,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  if (query.src) {
  return fs.readFileSync(filename, 'utf-8')
  }
- const descriptor = getDescriptor(filename, options.value)!
+ const descriptor = (await getDescriptor(filename, options.value))!
  let block: SFCBlock | null | undefined
  if (query.type === 'script') {
  // handle <script> + <script setup> merge via compileScript()
@@ -225,7 +229,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  }
  },
 
- transform(code, id, opt) {
+ async transform(code, id, opt) {
  const ssr = opt?.ssr === true
  const { filename, query } = parseVueRequest(id)
 
@@ -252,7 +256,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
  const descriptor = query.src
  ? getSrcDescriptor(filename, query) ||
  getTempSrcDescriptor(filename, query)
- : getDescriptor(filename, options.value)!
+ : (await getDescriptor(filename, options.value))!
 
  if (query.type === 'template') {
  return transformTemplateAsModule(

packages/plugin-vue/src/main.ts

@@ -42,7 +42,7 @@ export async function transformMain(
 
  if (fs.existsSync(filename)) {
  // populate descriptor cache for HMR if it's not set yet
- getDescriptor(
+ await getDescriptor(
  filename,
  options,
  true,

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { createHash } from 'node:crypto'
 import slash from 'slash'
+import type { Plugin } from 'vite'
 import type { CompilerError, SFCDescriptor } from 'vue/compiler-sfc'
 import type { ResolvedOptions, VueQuery } from '..'
 
@@ -51,21 +52,21 @@ export function invalidateDescriptor(filename: string, hmr = false): void {
  }
 }
 
-export function getDescriptor(
+export async function getDescriptor(
  filename: string,
  options: ResolvedOptions,
  createIfNotFound = true,
  hmr = false,
  code?: string,
-): SFCDescriptor | undefined {
+): Promise<SFCDescriptor | undefined> {
  const _cache = hmr ? hmrCache : cache
  if (_cache.has(filename)) {
  return _cache.get(filename)!
  }
  if (createIfNotFound) {
  const { descriptor, errors } = createDescriptor(
  filename,
- code ?? fs.readFileSync(filename, 'utf-8'),
+ code ?? await options.readCode(filename),
  options,
  hmr,
  )
@@ -119,6 +120,25 @@ export function setSrcDescriptor(
  cache.set(filename, entry)
 }
 
+type TransformCode = (filename: string, code: string) => Promise<string | null>
+
+export function getReadCode(plugins: readonly Plugin<{ transformCode?: TransformCode }>[]): (filename: string) => Promise<string> {
+ const transformCodeFns = (plugins || []).reduce<TransformCode[]>((fns, plugin) => {
+ if (plugin.name.endsWith(':api') && typeof plugin.api?.transformCode === 'function') {
+ fns.push(plugin.api.transformCode)
+ }
+ return fns
+ }, [])
+
+ return async (filename: string) => {
+ let code = fs.readFileSync(filename, 'utf-8')
+ for (const transformCode of transformCodeFns) {
+ code = (await transformCode(filename, code)) || code
+ }
+ return code
+ }
+}
+
 function getHash(text: string): string {
  return createHash('sha256').update(text).digest('hex').substring(0, 8)
 }