remove flash of unrendered content for hmr

FredKSchott · Jun 12, 2020 · 9012752 · 9012752
1 parent a4111a4
commit 9012752
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 50 deletions.
diff --git a/assets/hmr.js b/assets/hmr.js
@@ -86,13 +86,16 @@ export function createHotContext(fullUrl) {
   const existing = REGISTERED_MODULES[id];
   if (existing) {
     existing.lock();
+    runModuleDispose(id);
     return existing;
   }
   const state = new HotModuleState(id);
   REGISTERED_MODULES[id] = state;
   return state;
 }
-async function applyUpdate(id) {
+
+/** Called when a new module is loaded, to pass the updated module to the "active" module */
+async function runModuleAccept(id) {
   const state = REGISTERED_MODULES[id];
   if (!state) {
     return false;
@@ -101,10 +104,6 @@ async function applyUpdate(id) {
     return false;
   }
   const acceptCallbacks = state.acceptCallbacks;
-  const disposeCallbacks = state.disposeCallbacks;
-  state.disposeCallbacks = [];
-  state.data = {};
-  disposeCallbacks.map((callback) => callback());
   const updateID = Date.now();
   for (const {deps, callback: acceptCallback} of acceptCallbacks) {
     const [module, ...depModules] = await Promise.all([
@@ -115,6 +114,22 @@ async function applyUpdate(id) {
   }
   return true;
 }
+
+/** Called when a new module is loaded, to run cleanup on the old module (if needed) */
+async function runModuleDispose(id) {
+  const state = REGISTERED_MODULES[id];
+  if (!state) {
+    return false;
+  }
+  if (state.isDeclined) {
+    return false;
+  }
+  const disposeCallbacks = state.disposeCallbacks;
+  state.disposeCallbacks = [];
+  state.data = {};
+  disposeCallbacks.map((callback) => callback());
+  return true;
+}
 socket.addEventListener('message', ({data: _data}) => {
   if (!_data) {
     return;
@@ -132,7 +147,7 @@ socket.addEventListener('message', ({data: _data}) => {
   }
   debug('message: update', data);
   debug(data.url, Object.keys(REGISTERED_MODULES));
-  applyUpdate(data.url)
+  runModuleAccept(data.url)
     .then((ok) => {
       if (!ok) {
         reload();

diff --git a/src/commands/build-util.ts b/src/commands/build-util.ts
@@ -71,7 +71,20 @@ export async function wrapCssModuleResponse({
   const {injectableSource, exportTokens} = await _cssModuleLoader.load(code, url, undefined, () => {
     throw new Error('Imports in CSS Modules are not yet supported.');
   });
-  return `
+  return `${
+    hasHmr
+      ? `
+import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
+import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
+import.meta.hot.accept(({module}) => {
+  code = module.code;
+  json = module.default;
+});
+import.meta.hot.dispose(() => {
+  document.head.removeChild(styleEl);
+});\n`
+      : ``
+  }
 export let code = ${JSON.stringify(injectableSource)};
 let json = ${JSON.stringify(exportTokens)};
 export default json;
@@ -81,22 +94,7 @@ const codeEl = document.createTextNode(code);
 styleEl.type = 'text/css';
 
 styleEl.appendChild(codeEl);
-document.head.appendChild(styleEl);
-${
-  hasHmr
-    ? `
-import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
-import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
-import.meta.hot.accept(({module}) => {
-  code = module.code;
-  json = module.default;
-});
-import.meta.hot.dispose(() => {
-  document.head.removeChild(styleEl);
-});
-`
-    : ``
-}`;
+document.head.appendChild(styleEl);`;
 }
 
 export function wrapHtmlResponse({
@@ -131,44 +129,39 @@ export function wrapEsmProxyResponse({
   config: SnowpackConfig;
 }) {
   if (ext === '.json') {
-    return `
+    return `${
+      hasHmr
+        ? `
+    import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
+    import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
+    import.meta.hot.accept(({module}) => {
+      json = module.default;
+    });`
+        : ''
+    }
 let json = ${JSON.stringify(JSON.parse(code))};
-export default json;
-${
-  hasHmr
-    ? `
-import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
-import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
-import.meta.hot.accept(({module}) => {
-  json = module.default;
-});
-`
-    : ''
-}`;
+export default json;`;
   }
 
   if (ext === '.css') {
-    return `
+    return `${hasHmr
+        ? `
+import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
+import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
+import.meta.hot.accept();
+import.meta.hot.dispose(() => {
+  document.head.removeChild(styleEl);
+});\n`
+        : ''
+    }
 const code = ${JSON.stringify(code)};
 
 const styleEl = document.createElement("style");
 const codeEl = document.createTextNode(code);
 styleEl.type = 'text/css';
 
 styleEl.appendChild(codeEl);
-document.head.appendChild(styleEl);
-${
-  hasHmr
-    ? `
-import * as __SNOWPACK_HMR_API__ from '/${buildOptions.metaDir}/hmr.js';
-import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
-import.meta.hot.accept();
-import.meta.hot.dispose(() => {
-  document.head.removeChild(styleEl);
-});
-`
-    : ''
-}`;
+document.head.appendChild(styleEl);`;
   }
 
   return `export default ${JSON.stringify(url)};`;