feat: hmr support for vite 2.0

Author: yyx990803

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "debug": "^4.1.1",
     "hash-sum": "^2.0.0",
-    "rollup-pluginutils": "^2.8.2"
+    "@rollup/pluginutils": "^4.1.0"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "*"

src/handleHotUpdate.ts

@@ -0,0 +1,148 @@
+import fs from 'fs'
+import { parse, SFCBlock } from '@vue/compiler-sfc'
+import { getDescriptor, setDescriptor } from './utils/descriptorCache'
+
+/**
+ * Vite-specific HMR handling
+ */
+export async function handleHotUpdate(file: string, modules: any[]) {
+  if (!file.endsWith('.vue')) {
+    return
+  }
+
+  const prevDescriptor = getDescriptor(file)
+  if (!prevDescriptor) {
+    // file hasn't been requested yet (e.g. async component)
+    return
+  }
+
+  let content = fs.readFileSync(file, 'utf-8')
+  if (!content) {
+    await untilModified(file)
+    content = fs.readFileSync(file, 'utf-8')
+  }
+
+  const { descriptor } = parse(content, {
+    filename: file,
+    sourceMap: true,
+    sourceRoot: process.cwd(),
+  })
+  setDescriptor(file, descriptor)
+
+  let needRerender = false
+  const filteredModules = []
+
+  const reload = () => {
+    console.log(`[vue:reload] ${file}`)
+    return modules.filter((m) => /type=script/.test(m.id))
+  }
+
+  if (
+    !isEqualBlock(descriptor.script, prevDescriptor.script) ||
+    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
+  ) {
+    return reload()
+  }
+
+  if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
+    needRerender = true
+  }
+
+  let didUpdateStyle = false
+  const prevStyles = prevDescriptor.styles || []
+  const nextStyles = descriptor.styles || []
+
+  // css modules update causes a reload because the $style object is changed
+  // and it may be used in JS. It also needs to trigger a vue-style-update
+  // event so the client busts the sw cache.
+  if (
+    prevStyles.some((s) => s.module != null) ||
+    nextStyles.some((s) => s.module != null)
+  ) {
+    return reload()
+  }
+
+  // force reload if CSS vars injection changed
+  if (descriptor.cssVars) {
+    if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
+      return reload()
+    }
+  }
+
+  // force reload if scoped status has changed
+  if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
+    return reload()
+  }
+
+  // only need to update styles if not reloading, since reload forces
+  // style updates as well.
+  nextStyles.forEach((_, i) => {
+    if (!prevStyles[i] || !isEqualBlock(prevStyles[i], nextStyles[i])) {
+      didUpdateStyle = true
+      filteredModules.push(modules.find((m) => m.id.includes(`index=${i}`)))
+    }
+  })
+
+  const prevCustoms = prevDescriptor.customBlocks || []
+  const nextCustoms = descriptor.customBlocks || []
+
+  // custom blocks update causes a reload
+  // because the custom block contents is changed and it may be used in JS.
+  if (
+    nextCustoms.some(
+      (_, i) => !prevCustoms[i] || !isEqualBlock(prevCustoms[i], nextCustoms[i])
+    )
+  ) {
+    return reload()
+  }
+
+  if (needRerender) {
+    filteredModules.push(modules.find((m) => /type=template/.test(m.id)))
+  }
+
+  let updateType = []
+  if (needRerender) {
+    updateType.push(`template`)
+  }
+  if (didUpdateStyle) {
+    updateType.push(`style`)
+  }
+  if (updateType.length) {
+    console.log(`[vue:update(${updateType.join('&')})] ${file}`)
+  }
+  return filteredModules
+}
+
+// vitejs/vite#610 when hot-reloading Vue files, we read immediately on file
+// change event and sometimes this can be too early and get an empty buffer.
+// Poll until the file's modified time has changed before reading again.
+async function untilModified(file: string) {
+  const mtime = fs.statSync(file).mtimeMs
+  return new Promise((r) => {
+    let n = 0
+    const poll = async () => {
+      n++
+      const newMtime = fs.statSync(file).mtimeMs
+      if (newMtime !== mtime || n > 10) {
+        r(0)
+      } else {
+        setTimeout(poll, 10)
+      }
+    }
+    setTimeout(poll, 10)
+  })
+}
+
+function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  // src imports will trigger their own updates
+  if (a.src && b.src && a.src === b.src) return true
+  if (a.content !== b.content) return false
+  const keysA = Object.keys(a.attrs)
+  const keysB = Object.keys(b.attrs)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  return keysA.every((key) => a.attrs[key] === b.attrs[key])
+}

src/index.ts

@@ -14,7 +14,7 @@ import {
 import fs from 'fs'
 import createDebugger from 'debug'
 import { Plugin } from 'rollup'
-import { createFilter } from 'rollup-pluginutils'
+import { createFilter } from '@rollup/pluginutils'
 import { transformSFCEntry } from './sfc'
 import { transformTemplate } from './template'
 import { transformStyle } from './style'
@@ -23,13 +23,15 @@ import { getDescriptor, setDescriptor } from './utils/descriptorCache'
 import { parseVuePartRequest } from './utils/query'
 import { normalizeSourceMap } from './utils/sourceMap'
 import { getResolvedScript } from './script'
+import { handleHotUpdate } from './handleHotUpdate'
 
 const debug = createDebugger('rollup-plugin-vue')
 
 export interface Options {
   include: string | RegExp | (string | RegExp)[]
   exclude: string | RegExp | (string | RegExp)[]
   target: 'node' | 'browser'
+  hmr: boolean
   exposeFilename: boolean
 
   customBlocks?: string[]
@@ -58,6 +60,7 @@ export interface Options {
 const defaultOptions: Options = {
   include: /\.vue$/,
   exclude: [],
+  hmr: false,
   target: 'browser',
   exposeFilename: false,
   customBlocks: [],
@@ -173,6 +176,9 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
       }
       return null
     },
+
+    // @ts-ignore
+    handleHotUpdate,
   }
 }
 

src/script.ts

@@ -40,7 +40,7 @@ export function resolveScript(
       resolved = compileScript(descriptor, {
         id: scopeId,
         isProd,
-        inlineTemplate: true,
+        inlineTemplate: !options.hmr,
         templateOptions: getTemplateCompilerOptions(
           options,
           descriptor,

src/sfc.ts

@@ -42,9 +42,11 @@ export function transformSFCEntry(
   // feature information
   const hasScoped = descriptor.styles.some((s) => s.scoped)
 
-  const isTemplateInlined =
-    descriptor.scriptSetup && !(descriptor.template && descriptor.template.src)
-  const hasTemplateImport = descriptor.template && !isTemplateInlined
+  const useInlineTemplate =
+    !options.hmr &&
+    descriptor.scriptSetup &&
+    !(descriptor.template && descriptor.template.src)
+  const hasTemplateImport = descriptor.template && !useInlineTemplate
 
   const templateImport = hasTemplateImport
     ? genTemplateCode(descriptor, scopeId, isServer)
@@ -84,6 +86,17 @@ export function transformSFCEntry(
     )
   }
   output.push('export default script')
+
+  if (options.hmr) {
+    output.push(`script.__hmrId = ${JSON.stringify(scopeId)}`)
+    output.push(`__VUE_HMR_RUNTIME__.createRecord(script.__hmrId, script)`)
+    output.push(
+      `import.meta.hot.accept(({ default: script }) => {
+  __VUE_HMR_RUNTIME__.reload(script.__hmrId, script)
+})`
+    )
+  }
+
   return {
     code: output.join('\n'),
     map: {

src/template.ts

@@ -46,8 +46,15 @@ export function transformTemplate(
     )
   }
 
+  let returnCode = result.code
+  if (options.hmr) {
+    returnCode += `\nimport.meta.hot.accept(({ render }) => {
+      __VUE_HMR_RUNTIME__.rerender(${JSON.stringify(query.id)}, render)
+    })`
+  }
+
   return {
-    code: result.code,
+    code: returnCode,
     map: normalizeSourceMap(result.map!, request),
   }
 }

src/utils/error.ts

@@ -5,6 +5,7 @@ export function createRollupError(
   id: string,
   error: CompilerError | SyntaxError
 ): RollupError {
+  debugger
   if ('code' in error) {
     return {
       id,

yarn.lock

@@ -523,6 +523,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
+  integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"