add vite support

Author: rixo

lib/make-hot.js

@@ -21,11 +21,16 @@ const defaultHotOptions = {
   injectCss: true,
   // to mitigate FOUC between dispose (remove stylesheet) and accept
   cssEjectDelay: 100,
-}
 
-// careful with relative paths (see https://github.com/rixo/svelte-hmr/issues/11)
-const domAdapter = require.resolve('../runtime/proxy-adapter-dom.js')
-// const domAdapter = 'svelte-hmr/runtime/proxy-adapter-dom.js'
+  // Svelte Native mode
+  native: false,
+  // Vite mode
+  compatVite: false,
+
+  // use absolute file paths to import runtime deps of svelte-hmr
+  // (see https://github.com/rixo/svelte-hmr/issues/11)
+  absoluteImports: false,
+}
 
 const nativeAdapter = require.resolve(
   '../runtime/svelte-native/proxy-adapter-native.js'
@@ -47,6 +52,10 @@ const resolveImportAdapter = (
   hotOptions,
   importAdapterName = globalAdapterName
 ) => {
+  // careful with relative paths (see https://github.com/rixo/svelte-hmr/issues/11)
+  const domAdapter = hotOptions.absoluteImports
+    ? require.resolve('../runtime/proxy-adapter-dom.js')
+    : 'svelte-hmr/runtime/proxy-adapter-dom.js'
   const adapterPath = hotOptions.native
     ? posixify(nativeAdapter)
     : posixify(domAdapter)
@@ -57,7 +66,7 @@ const renderApplyHmr = ({
   id,
   cssId,
   nonCssHash,
-  hotOptions, // object
+  hotOptions: { injectCss, compatVite }, // object
   options, // serialized
   hotApi,
   adapterPath,
@@ -71,13 +80,10 @@ const renderApplyHmr = ({
   ],
 }) =>
   // this silly formatting keeps all original characters in their position,
-  // except for the ';' in `export default Foo;`, and except if this is the
-  // first line (very unlikely) -- thus saving us from having to provide a
-  // sourcemap
-  `${imports.join(';')};
-export default $2
-  = ${meta} && ${meta}.hot
-    ? ${globalName}.applyHmr({
+  // thus saving us from having to provide a sourcemap
+  `${imports.join(';')};${`
+    if (${compatVite ? '' : 'import.meta && '}import.meta.hot) {
+      $2 = ${globalName}.applyHmr({
         m: ${meta},
         id: ${quote(id)},
         hotOptions: ${options},
@@ -87,14 +93,21 @@ export default $2
         compileOptions: ${compileOptions},
         cssId: ${quote(cssId)},
         nonCssHash: ${quote(nonCssHash)},
-      })
-    : $2;
+      });
+      ${compatVite ? 'import.meta.hot.accept();' : ''}
+    }
+  `
+    .split('\n')
+    .map(x => x.trim())
+    .filter(Boolean)
+    .join(' ')}
+export default $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
+  injectCss && cssId
     ? `
 if (typeof add_css !== 'undefined' && !document.getElementById(${quote(
         cssId
@@ -135,7 +148,13 @@ const parseCssId = (code, parseHash) => {
 }
 
 // meta can be 'import.meta' or 'module'
-const createMakeHot = (hotApi, { meta = 'import.meta', walk } = {}) => {
+const createMakeHot = (_hotApi, options) => {
+  if (typeof _hotApi !== 'string') {
+    options = _hotApi
+    _hotApi = null
+  }
+  const { meta = 'import.meta', walk } = options || {}
+
   const hasAccessors = compiled => {
     if (!compiled.ast || !compiled.ast.html) return
     let accessors = false
@@ -162,6 +181,9 @@ const createMakeHot = (hotApi, { meta = 'import.meta', walk } = {}) => {
   ) {
     const hotOptions = Object.assign({}, defaultHotOptions, hotOptionsArg)
 
+    const hotApi =
+      _hotApi || (hotOptions.compatVite && 'svelte-hmr/runtime/esm.js')
+
     const noPreserveState =
       hotOptions.noPreserveState ||
       (hotOptions.noPreserveStateKey &&

runtime/esm.js

@@ -0,0 +1,7 @@
+import { makeApplyHmr } from '../runtime/index.js'
+
+export const applyHmr = makeApplyHmr(args =>
+  Object.assign({}, args, {
+    hot: args.m.hot,
+  })
+)