From 108c1c189fbe0f8f2c4c9360de5e7b3be1a60ebb Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 12 Dec 2019 12:43:05 -0500
Subject: [PATCH] feat: basic hmr

---
 example/App.vue                    | 15 +++++++++++++++
 example/{source.vue => Button.vue} |  2 +-
 example/main.js                    |  2 +-
 package.json                       |  3 ++-
 src/hotReload.ts                   | 25 +++++++++++++++++++++++++
 src/index.ts                       |  5 +++--
 src/pitcher.ts                     |  5 ++---
 7 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 example/App.vue
 rename example/{source.vue => Button.vue} (81%)
 create mode 100644 src/hotReload.ts

diff --git a/example/App.vue b/example/App.vue
new file mode 100644
index 00000000..af646624
--- /dev/null
+++ b/example/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <Button/>
+  <Button/>
+  <Button/>
+</template>
+
+<script>
+import Button from './Button.vue'
+
+export default {
+  components: {
+    Button
+  }
+}
+</script>
diff --git a/example/source.vue b/example/Button.vue
similarity index 81%
rename from example/source.vue
rename to example/Button.vue
index 05ee07ff..c7eaac0d 100644
--- a/example/source.vue
+++ b/example/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="inc">{{ count }}</button>
+  <button @click="inc">{{ count }}!</button>
 </template>
 
 <script>
diff --git a/example/main.js b/example/main.js
index 487b363a..e77d2f93 100644
--- a/example/main.js
+++ b/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')
diff --git a/package.json b/package.json
index d1a038c9..e0a73b7c 100644
--- a/package.json
+++ b/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"
diff --git a/src/hotReload.ts b/src/hotReload.ts
new file mode 100644
index 00000000..ad433da8
--- /dev/null
+++ b/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)
+  })
+`
+}
diff --git a/src/index.ts b/src/index.ts
index 8e141912..7aa94db8 100644
--- a/src/index.ts
+++ b/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.
diff --git a/src/pitcher.ts b/src/pitcher.ts
index 4e7530c2..84e17460 100644
--- a/src/pitcher.ts
+++ b/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