expose adapter path (for vite + pnpm)

Author: rixo

lib/make-hot.js

@@ -1,3 +1,8 @@
+const path = require('path')
+
+const globalName = '___SVELTE_HMR_HOT_API'
+const globalAdapterName = '___SVELTE_HMR_HOT_API_PROXY_ADAPTER'
+
 const defaultHotOptions = {
   // don't preserve local state
   noPreserveState: false,
@@ -26,59 +31,58 @@ const defaultHotOptions = {
   native: false,
   // Vite mode
   compatVite: false,
-
+  // name of the adapter import binding
+  importAdapterName: globalAdapterName,
   // use absolute file paths to import runtime deps of svelte-hmr
   // (see https://github.com/rixo/svelte-hmr/issues/11)
-  absoluteImports: false,
+  absoluteImports: true,
 }
 
-const defaultHotApi = 'svelte-hmr/runtime/hot-api-esm.js'
-
-const nativeAdapter = require.resolve(
-  '../runtime/svelte-native/proxy-adapter-native.js'
-)
+const defaultHotApi = 'hot-api-esm.js'
 
 const quote = JSON.stringify
 
 const posixify = file => file.replace(/[/\\]/g, '/')
 
-const globalName = '___SVELTE_HMR_HOT_API'
-const globalAdapterName = '___SVELTE_HMR_HOT_API_PROXY_ADAPTER'
+const applyAbsoluteImports = (absoluteImports, target) => {
+  const base = absoluteImports
+    ? path.resolve(__dirname, '../runtime') + '/'
+    : 'svelte-hmr/runtime/'
+  return base + target
+}
 
 // NOTE Native adapter cannot be required in code (as opposed to this
 // generated code) because it requires modules from NativeScript's code that
 // are not resolvable for non-native users (and those missing modules would
 // prevent webpack from building).
 //
-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)
-  return { importAdapterName, adapterPath }
+const resolveAdapterImport = ({ native, absoluteImports }) => {
+  // careful with relative paths
+  // (see https://github.com/rixo/svelte-hmr/issues/11)
+  const file = native
+    ? 'svelte-native/proxy-adapter-native.js'
+    : 'proxy-adapter-dom.js'
+  return posixify(applyAbsoluteImports(absoluteImports, file))
 }
 
+const resolveHotApiImport = ({ absoluteImports }, hotApiOpt) =>
+  posixify(hotApiOpt || applyAbsoluteImports(absoluteImports, defaultHotApi))
+
 const renderApplyHmr = ({
   id,
   cssId,
   nonCssHash,
   hotOptions: { injectCss, compatVite }, // object
   options, // serialized
-  hotApi,
-  adapterPath,
+  hotApiImport,
+  adapterImport,
   importAdapterName,
   meta,
   compileData,
   compileOptions,
   imports = [
-    `import * as ${globalName} from '${posixify(hotApi)}'`,
-    `import ${importAdapterName} from '${adapterPath}'`,
+    `import * as ${globalName} from '${hotApiImport}'`,
+    `import ${importAdapterName} from '${adapterImport}'`,
   ],
 }) =>
   // this silly formatting keeps all original characters in their position,
@@ -149,14 +153,12 @@ const parseCssId = (code, parseHash) => {
   return { cssId, nonCssHash }
 }
 
+// NOTE hotOptions can be customized by end user through plugin options, while
+// options passed to this function can only customized by the plugin implementer
+//
 // meta can be 'import.meta' or 'module'
-const createMakeHot = (hotApi = defaultHotApi, options) => {
-  if (typeof hotApi !== 'string') {
-    options = hotApi
-    hotApi = defaultHotApi
-  }
-  const { meta = 'import.meta', walk } = options || {}
-
+// const createMakeHot = (hotApi = defaultHotApi, options) => {
+const createMakeHot = ({ walk, meta = 'import.meta', hotApi, adapter }) => {
   const hasAccessors = compiled => {
     if (!compiled.ast || !compiled.ast.html) return
     let accessors = false
@@ -183,6 +185,8 @@ const createMakeHot = (hotApi = defaultHotApi, options) => {
   ) {
     const hotOptions = Object.assign({}, defaultHotOptions, hotOptionsArg)
 
+    const { importAdapterName } = hotOptions
+
     const noPreserveState =
       hotOptions.noPreserveState ||
       (hotOptions.noPreserveStateKey &&
@@ -200,7 +204,9 @@ const createMakeHot = (hotApi = defaultHotApi, options) => {
         : null
     )
 
-    const { adapterPath, importAdapterName } = resolveImportAdapter(hotOptions)
+    const adapterImport = adapter || resolveAdapterImport(hotOptions)
+
+    const hotApiImport = resolveHotApiImport(hotOptions, hotApi)
 
     const { cssId, nonCssHash } = parseCssId(compiledCode, hotOptions.injectCss)
 
@@ -210,8 +216,8 @@ const createMakeHot = (hotApi = defaultHotApi, options) => {
       nonCssHash,
       hotOptions,
       options,
-      hotApi,
-      adapterPath,
+      hotApiImport,
+      adapterImport,
       importAdapterName,
       meta,
       compileData,