feat: basic hmr

Author: yyx990803

example/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <Button/>
+  <Button/>
+  <Button/>
+</template>
+
+<script>
+import Button from './Button.vue'
+
+export default {
+  components: {
+    Button
+  }
+}
+</script>

example/source.vue example/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="inc">{{ count }}</button>
+  <button @click="inc">{{ count }}!</button>
 </template>
 
 <script>

example/main.js

@@ -1,4 +1,4 @@
-import App from './source.vue'
+import App from './App.vue'
 import { createApp } from 'vue'
 
 createApp().mount(App, '#app')

package.json

@@ -10,7 +10,8 @@
   ],
   "scripts": {
     "build": "tsc",
-    "dev": "webpack-dev-server --config example/webpack.config.js --inline --hot"
+    "dev": "webpack-dev-server --config example/webpack.config.js --inline --hot",
+    "build-example": "webpack --config example/webpack.config.js --mode=production"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.0-alpha.0"

src/hotReload.ts

@@ -0,0 +1,25 @@
+// __VUE_HMR_RUNTIME__ is injected to global scope by @vue/runtime-core
+
+export function genHotReloadCode(id: string, templateRequest?: string): string {
+  return `
+/* hot reload */
+if (module.hot) {
+  const api = __VUE_HMR_RUNTIME__
+  module.hot.accept()
+  if (!api.isRecorded('${id}')) {
+    api.createRecord('${id}', script)
+  } else {
+    api.reload('${id}', script)
+  }
+  ${templateRequest ? genTemplateHotReloadCode(id, templateRequest) : ''}
+}
+`
+}
+
+function genTemplateHotReloadCode(id: string, request: string) {
+  return `
+  module.hot.accept(${request}, () => {
+    api.rerender('${id}', render)
+  })
+`
+}

src/index.ts

@@ -11,6 +11,7 @@ import {
   TemplateCompileOptions
 } from '@vue/compiler-sfc'
 import { selectBlock } from './select'
+import { genHotReloadCode } from './hotReload'
 
 const VueLoaderPlugin = require('./plugin')
 
@@ -147,8 +148,8 @@ const loader: webpack.loader.Loader = function(source) {
   }
 
   if (needsHotReload) {
-    // TODO hot reload
-    templateRequest
+    code += `\nscript.__hmrId = "${id}"`
+    code += genHotReloadCode(id, templateRequest)
   }
 
   // Expose filename. This is used by the devtools and Vue runtime warnings.

src/pitcher.ts

@@ -4,7 +4,7 @@ import loaderUtils from 'loader-utils'
 import hash from 'hash-sum'
 import { VueLoaderOptions } from 'src'
 
-const selfPath = require.resolve('../index')
+const selfPath = require.resolve('./index')
 const templateLoaderPath = require.resolve('./templateLoader')
 const stylePostLoaderPath = require.resolve('./stylePostLoader')
 
@@ -163,8 +163,7 @@ pitcher.pitch = function() {
       ...preLoaders
     ])
     // console.log(request)
-    // the template compiler uses esm exports
-    return `export * from ${request}`
+    return `import mod from ${request}; export default mod;`
   }
 
   // if a custom block has no other matching loader other than vue-loader itself