Fix HMR for Vue

Author: CompuIves

packages/app/src/sandbox/eval/transpiled-module.js

@@ -77,7 +77,8 @@ export type LoaderContext = {
     title: string,
     code: string,
     currentPath?: string,
-    overwrite?: boolean
+    overwrite?: boolean,
+    isChild?: boolean
   ) => TranspiledModule,
   emitFile: (name: string, content: string, sourceMap: SourceMap) => void,
   options: {
@@ -249,6 +250,7 @@ export default class TranspiledModule {
   }
 
   resetTranspilation() {
+    console.log('resetting', this);
     Array.from(this.transpilationInitiators)
       .filter(t => t.source)
       .forEach(dep => {
@@ -432,7 +434,8 @@ export default class TranspiledModule {
         path: string,
         code: string,
         directoryPath: string = pathUtils.dirname(this.module.path),
-        overwrite?: boolean = true
+        overwrite?: boolean = true,
+        isChild?: boolean = true
       ) => {
         const queryPath = path.split('!');
         // pop() mutates queryPath, queryPath is now just the loaders
@@ -463,7 +466,9 @@ export default class TranspiledModule {
           transpiledModule ||
           manager.addTranspiledModule(moduleCopy, queryPath.join('!'));
 
-        this.childModules.push(transpiledModule);
+        if (isChild) {
+          this.childModules.push(transpiledModule);
+        }
         this.dependencies.add(transpiledModule);
         transpiledModule.initiators.add(this);
 
@@ -798,6 +803,7 @@ export default class TranspiledModule {
     }
 
     const hotData = this.hmrConfig ? this.hmrConfig.data : undefined;
+    console.log(hotData);
 
     this.compilation = this.compilation || {
       id: this.getId(),
@@ -1118,4 +1124,4 @@ export default class TranspiledModule {
       this.asyncDependencies.push(Promise.resolve(loadModule(depId)));
     });
   }
-}
+}

packages/app/src/sandbox/eval/transpilers/vue/css-loader/loader.js

@@ -13,7 +13,7 @@ export default function transpile(
   content: string,
   loaderContext: LoaderContext
 ) {
-  loaderContext.emitModule(CSSBasePath, CSSBaseRaw, '/', false);
+  loaderContext.emitModule(CSSBasePath, CSSBaseRaw, '/', false, false);
 
   let result = '';
   result += `exports = module.exports = require("${CSSBasePath}")(false);\n\n`;

packages/app/src/sandbox/eval/transpilers/vue/loader.js

@@ -37,7 +37,13 @@ const rewriterInjectRE = /\b(css(?:-loader)?(?:\?[^!]+)?)(?:!|$)/;
 
 export default function(content: string, loaderContext: LoaderContext) {
   // Emit the vue-hot-reload-api so it's available in the sandbox
-  loaderContext.emitModule(hotReloadAPIPath, vueHotReloadAPIRaw, '/', false);
+  loaderContext.emitModule(
+    hotReloadAPIPath,
+    vueHotReloadAPIRaw,
+    '/',
+    false,
+    false
+  );
 
   const { path, _module } = loaderContext;
   const query = loaderContext.options;
@@ -213,6 +219,7 @@ export default function(content: string, loaderContext: LoaderContext) {
     '!noop-loader!/node_modules/component-normalizer.js',
     componentNormalizerRaw,
     '/',
+    false,
     false
   );
 
@@ -403,7 +410,7 @@ export default function(content: string, loaderContext: LoaderContext) {
       // getFileName(type, part, index);
       rawRequest;
 
-    // loaderContext.emitModule(rawPath, part.content, dirname(filePath), false);
+    // loaderContext.emitModule(rawPath, part.content, dirname(filePath), false, false);
 
     const depPath = loaderUtils.stringifyRequest(loaderContext, rawPath);
     loaderContext.addDependency(JSON.parse(depPath));

packages/app/src/sandbox/eval/transpilers/vue/style-loader/loader.js

@@ -17,8 +17,20 @@ export default function(content: string, loaderContext) {
   const isServer = false;
   const isProduction = false;
 
-  loaderContext.emitModule(addStylesClientPath, addStylesClientRaw, '/', false);
-  loaderContext.emitModule(listToStylesPath, listToStylesRaw, '/', false);
+  loaderContext.emitModule(
+    addStylesClientPath,
+    addStylesClientRaw,
+    '/',
+    false,
+    false
+  );
+  loaderContext.emitModule(
+    listToStylesPath,
+    listToStylesRaw,
+    '/',
+    false,
+    false
+  );
 
   const request = loaderUtils.stringifyRequest(
     loaderContext,

packages/app/src/sandbox/eval/transpilers/vue/template-compiler/loader.js

@@ -9,7 +9,13 @@ import transformSrcset from './modules/transform-srcset';
 
 const hotReloadAPIPath = '!noop-loader!/node_modules/vue-hot-reload-api.js';
 export default function(html: string, loaderContext: LoaderContext) {
-  loaderContext.emitModule(hotReloadAPIPath, vueHotReloadAPIRaw, '/', false);
+  loaderContext.emitModule(
+    hotReloadAPIPath,
+    vueHotReloadAPIRaw,
+    '/',
+    false,
+    false
+  );
 
   const options = loaderContext.options;
   const vueOptions = options.vueOptions || {};