add injectCss option to avoid recreating components when only css changes

Author: rixo

lib/make-hot.js

@@ -17,6 +17,10 @@ const defaultHotOptions = {
   // true, or no component will be hot reloaded (but there are a lot of edge
   // cases that HMR can't support correctly with accessors)
   acceptAccessors: true,
+  // only inject CSS instead of recreating components when only CSS changes
+  injectCss: true,
+  // to mitigate FOUC between dispose (remove stylesheet) and accept
+  cssEjectDelay: 100,
 }
 
 const domAdapter = require.resolve('../runtime/proxy-adapter-dom.js')
@@ -50,7 +54,9 @@ const resolveImportAdapter = (
 const renderApplyHmr = ({
   id,
   cssId,
-  options,
+  nonCssHash,
+  hotOptions, // object
+  options, // serialized
   hotApi,
   adapterPath,
   importAdapterName,
@@ -78,18 +84,52 @@ export default $2
         compileData: ${compileData},
         compileOptions: ${compileOptions},
         cssId: ${quote(cssId)},
+        nonCssHash: ${quote(nonCssHash)},
       })
     : $2;
+${
+  // NOTE when doing CSS only voodoo, we have to inject the stylesheet as soon
+  // as the component is loaded because Svelte normally do that when a component
+  // is instantiated, but we might already have instances in the large when a
+  // component is loaded with HMR
+  hotOptions.injectCss && cssId
+    ? `
+if (typeof add_css !== 'undefined' && !document.getElementById(${quote(
+        cssId
+      )})) add_css();`
+    : ``
+}
 `
 
-const parseCssId = code => {
+// https://github.com/darkskyapp/string-hash/blob/master/index.js
+// (via https://github.com/sveltejs/svelte/blob/91d758e35b2b2154512ddd11e6b6d9d65708a99e/src/compiler/compile/utils/hash.ts#L2)
+const stringHashcode = str => {
+  let hash = 5381
+  let i = str.length
+  while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i)
+  return (hash >>> 0).toString(36)
+}
+
+const parseCssId = (code, parseHash) => {
   // the regex matching is very pretty conservative 'cause I don't want to
   // match something else by error... I'm probably make it more lax if I have
   // to fix it 3 times in a single week ¯\_(ツ)_/¯
   let match = /^function add_css\(\) \{[\s\S]*?^}/m.exec(code)
-  if (!match) return null
+  if (!match) return {}
+  const codeExceptCSS =
+    code.slice(0, match.index) + code.slice(match.index + match[0].length)
+
   match = /\bstyle\.id\s*=\s*(['"])([^'"]*)\1/.exec(match[0])
-  return match ? match[2] : null
+  const cssId = match ? match[2] : null
+
+  if (!parseHash || !cssId) return { cssId }
+
+  const cssHash = cssId.split('-')[1]
+  const nonCssHash = stringHashcode(
+    codeExceptCSS.replace(new RegExp('\\b' + cssHash + '\\b', 'g'), '')
+  )
+
+  return { cssId, nonCssHash }
 }
 
 // meta can be 'import.meta' or 'module'
@@ -139,9 +179,13 @@ const createMakeHot = (hotApi, { meta = 'import.meta', walk } = {}) => {
 
     const { adapterPath, importAdapterName } = resolveImportAdapter(hotOptions)
 
+    const { cssId, nonCssHash } = parseCssId(compiledCode, hotOptions.injectCss)
+
     const replacement = renderApplyHmr({
       id,
-      cssId: parseCssId(compiledCode),
+      cssId,
+      nonCssHash,
+      hotOptions,
       options,
       hotApi,
       adapterPath,

runtime/hot-api.js

@@ -1,3 +1,5 @@
+/* eslint-env browser */
+
 import { createProxy, hasFatalError } from './proxy'
 
 const logPrefix = '[HMR:Svelte]'
@@ -16,6 +18,30 @@ const domReload = () => {
   }
 }
 
+const replaceCss = (previousId, newId) => {
+  if (typeof document === 'undefined') return false
+  if (!previousId) return false
+  if (!newId) return false
+  // svelte-xxx-style => svelte-xxx
+  const previousClass = previousId.slice(0, -6)
+  const newClass = newId.slice(0, -6)
+  // eslint-disable-next-line no-undef
+  document.querySelectorAll('.' + previousClass).forEach(el => {
+    el.classList.remove(previousClass)
+    el.classList.add(newClass)
+  })
+  return true
+}
+
+const removeStylesheet = cssId => {
+  if (cssId == null) return
+  if (typeof document === 'undefined') return
+  // eslint-disable-next-line no-undef
+  const el = document.getElementById(cssId)
+  if (el) el.remove()
+  return
+}
+
 const defaultArgs = {
   reload: domReload,
 }
@@ -33,6 +59,7 @@ function applyHmr(args) {
   const {
     id,
     cssId,
+    nonCssHash,
     reload = domReload,
     // normalized hot API (must conform to rollup-plugin-hot)
     hot,
@@ -77,7 +104,17 @@ function applyHmr(args) {
   const r =
     existing || createProxy(ProxyAdapter, id, Component, hotOptions, canAccept)
 
-  r.update({ Component, hotOptions, canAccept })
+  const cssOnly =
+    hotOptions.injectCss &&
+    existing &&
+    nonCssHash &&
+    existing.current.nonCssHash === nonCssHash
+
+  if (!cssOnly) {
+    r.update({ Component })
+  }
+
+  r.update({ hotOptions, canAccept, cssId, nonCssHash, cssOnly })
 
   hot.dispose(data => {
     // handle previous fatal errors
@@ -91,16 +128,28 @@ function applyHmr(args) {
 
     data.record = r
 
-    if (cssId != null && typeof document !== 'undefined') {
-      // eslint-disable-next-line no-undef
-      const el = document.getElementById(cssId)
-      if (el) el.remove()
+    if (r.current.cssId !== cssId) {
+      if (hotOptions.cssEjectDelay) {
+        setTimeout(() => removeStylesheet(cssId), hotOptions.cssEjectDelay)
+      } else {
+        removeStylesheet(cssId)
+      }
     }
   })
 
   if (canAccept) {
     hot.accept(async () => {
+      const newCssId = r.current.cssId
+      const cssChanged = newCssId !== cssId
+      // ensure old style sheet has been removed by now
+      if (cssChanged) removeStylesheet(cssId)
+      // guard: css only change
+      if (r.current.cssOnly && (!cssChanged || replaceCss(cssId, newCssId))) {
+        return
+      }
+
       const success = await r.reload()
+
       if (hasFatalError() || (!success && !hotOptions.optimistic)) {
         needsReload = true
       }