@sveltejs/vite-plugin-svelte 1.0.0-next.42 → 1.0.0-next.43

package/dist/index.d.ts

@@ -8,7 +8,7 @@ interface Options {
     /**
      * Path to a svelte config file, either absolute or relative to Vite root
      *
-     * set to `false` to skip reading config from a file
+     * set to `false` to ignore the svelte config file
      *
      * @see https://vitejs.dev/config/#root
      */
@@ -150,11 +150,54 @@ interface ExperimentalOptions {
         code: string;
         compileOptions: Partial<CompileOptions>;
     }) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+    /**
+     * enable svelte inspector
+     */
+    inspector?: InspectorOptions | boolean;
+}
+interface InspectorOptions {
+    /**
+     * define a key combo to toggle inspector,
+     * @default 'control-shift' on windows, 'meta-shift' on other os
+     *
+     * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
+     * examples: control-shift, control-o, control-alt-s  meta-x control-meta
+     * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
+     * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
+     */
+    toggleKeyCombo?: string;
+    /**
+     * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
+     * @default false
+     */
+    holdMode?: boolean;
+    /**
+     * when to show the toggle button
+     * @default 'active'
+     */
+    showToggleButton?: 'always' | 'active' | 'never';
+    /**
+     * where to display the toggle button
+     * @default top-right
+     */
+    toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * inject custom styles when inspector is active
+     */
+    customStyles?: boolean;
+    /**
+     * append an import to the module id ending with `appendTo` instead of adding a script into body
+     * useful for frameworks that do not support trannsformIndexHtml hook
+     *
+     * WARNING: only set this if you know exactly what it does.
+     * Regular users of vite-plugin-svelte or SvelteKit do not need it
+     */
+    appendTo?: string;
 }
 declare type ModuleFormat = NonNullable<CompileOptions['format']>;
 declare type CssHashGetter = NonNullable<CompileOptions['cssHash']>;
 declare type Arrayable<T> = T | T[];
 
-declare function svelte(inlineOptions?: Partial<Options>): Plugin;
+declare function svelte(inlineOptions?: Partial<Options>): Plugin[];
 
 export { Arrayable, CssHashGetter, ModuleFormat, Options, svelte };

package/dist/index.js

@@ -272,8 +272,9 @@ function toSafe(base64) {
 }
 
 // src/utils/compile.ts
+var scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 var _createCompileSvelte = (makeHot) => async function compileSvelte2(svelteRequest, code, options) {
-  var _a, _b;
+  var _a, _b, _c;
   const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
   const { emitCss = true } = options;
   const dependencies = [];
@@ -336,6 +337,7 @@ import ${JSON.stringify(cssId)};
   return {
     filename,
     normalizedFilename,
+    lang: ((_c = code.match(scriptLangRE)) == null ? void 0 : _c[1]) || "js",
     compiled,
     ssr,
     dependencies
@@ -1053,6 +1055,7 @@ function validateSourceMapOutputWrapper(group, i) {
 }
 
 // src/utils/options.ts
+import deepmerge from "deepmerge";
 var knownOptions = /* @__PURE__ */ new Set([
   "configFile",
   "include",
@@ -1065,7 +1068,8 @@ var knownOptions = /* @__PURE__ */ new Set([
   "hot",
   "ignorePluginPreprocessors",
   "disableDependencyReinclusion",
-  "experimental"
+  "experimental",
+  "kit"
 ]);
 function validateInlineOptions(inlineOptions) {
   const invalidKeys = Object.keys(inlineOptions || {}).filter((key) => !knownOptions.has(key));
@@ -1085,19 +1089,27 @@ async function preResolveOptions(inlineOptions = {}, viteUserConfig, viteEnv) {
     }
   };
   const svelteConfig = await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions);
-  const merged = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, defaultOptions), svelteConfig), inlineOptions), {
-    compilerOptions: __spreadValues(__spreadValues(__spreadValues({}, defaultOptions == null ? void 0 : defaultOptions.compilerOptions), svelteConfig == null ? void 0 : svelteConfig.compilerOptions), inlineOptions == null ? void 0 : inlineOptions.compilerOptions),
-    experimental: __spreadValues(__spreadValues(__spreadValues({}, defaultOptions == null ? void 0 : defaultOptions.experimental), svelteConfig == null ? void 0 : svelteConfig.experimental), inlineOptions == null ? void 0 : inlineOptions.experimental),
+  const extraOptions = {
     root: viteConfigWithResolvedRoot.root,
     isBuild: viteEnv.command === "build",
     isServe: viteEnv.command === "serve",
     isDebug: process.env.DEBUG != null
-  });
+  };
+  const merged = mergeConfigs(defaultOptions, svelteConfig, inlineOptions, extraOptions);
   if (svelteConfig == null ? void 0 : svelteConfig.configFile) {
     merged.configFile = svelteConfig.configFile;
   }
   return merged;
 }
+function mergeConfigs(...configs) {
+  let result = {};
+  for (const config of configs.filter(Boolean)) {
+    result = deepmerge(result, config, {
+      arrayMerge: (target, source) => source ?? target
+    });
+  }
+  return result;
+}
 function resolveOptions(preResolveOptions2, viteConfig) {
   const defaultOptions = {
     hot: viteConfig.isProduction ? false : { injectCss: !preResolveOptions2.emitCss },
@@ -1106,11 +1118,11 @@ function resolveOptions(preResolveOptions2, viteConfig) {
       dev: !viteConfig.isProduction
     }
   };
-  const merged = __spreadProps(__spreadValues(__spreadValues({}, defaultOptions), preResolveOptions2), {
-    compilerOptions: __spreadValues(__spreadValues({}, defaultOptions.compilerOptions), preResolveOptions2.compilerOptions),
+  const extraOptions = {
     root: viteConfig.root,
     isProduction: viteConfig.isProduction
-  });
+  };
+  const merged = mergeConfigs(defaultOptions, preResolveOptions2, extraOptions);
   addExtraPreprocessors(merged, viteConfig);
   enforceOptionsForHmr(merged);
   enforceOptionsForProduction(merged);
@@ -1163,6 +1175,7 @@ function resolveViteRoot(viteConfig) {
   return normalizePath2(viteConfig.root ? path4.resolve(viteConfig.root) : process.cwd());
 }
 function buildExtraViteConfig(options, config) {
+  var _a;
   const svelteDeps = findRootSvelteDependencies(options.root);
   const extraViteConfig = {
     resolve: {
@@ -1173,7 +1186,7 @@ function buildExtraViteConfig(options, config) {
   if (options.isServe) {
     extraViteConfig.optimizeDeps = buildOptimizeDepsForSvelte(svelteDeps, options, config.optimizeDeps);
   }
-  if (options.experimental.prebundleSvelteLibraries) {
+  if ((_a = options.experimental) == null ? void 0 : _a.prebundleSvelteLibraries) {
     extraViteConfig.optimizeDeps = __spreadProps(__spreadValues({}, extraViteConfig.optimizeDeps), {
       extensions: options.extensions ?? [".svelte"],
       esbuildOptions: {
@@ -1186,15 +1199,16 @@ function buildExtraViteConfig(options, config) {
   return extraViteConfig;
 }
 function buildOptimizeDepsForSvelte(svelteDeps, options, optimizeDeps) {
+  var _a;
   const include = [];
   const exclude = ["svelte-hmr"];
   const isIncluded = (dep) => {
-    var _a;
-    return include.includes(dep) || ((_a = optimizeDeps == null ? void 0 : optimizeDeps.include) == null ? void 0 : _a.includes(dep));
+    var _a2;
+    return include.includes(dep) || ((_a2 = optimizeDeps == null ? void 0 : optimizeDeps.include) == null ? void 0 : _a2.includes(dep));
   };
   const isExcluded = (dep) => {
-    var _a;
-    return exclude.includes(dep) || ((_a = optimizeDeps == null ? void 0 : optimizeDeps.exclude) == null ? void 0 : _a.some((id) => dep === id || id.startsWith(`${dep}/`)));
+    var _a2;
+    return exclude.includes(dep) || ((_a2 = optimizeDeps == null ? void 0 : optimizeDeps.exclude) == null ? void 0 : _a2.some((id) => dep === id || id.startsWith(`${dep}/`)));
   };
   if (!isExcluded("svelte")) {
     const svelteImportsToInclude = SVELTE_IMPORTS.filter((x) => x !== "svelte/ssr");
@@ -1203,7 +1217,7 @@ function buildOptimizeDepsForSvelte(svelteDeps, options, optimizeDeps) {
   } else {
     log.debug('"svelte" is excluded in optimizeDeps.exclude, skipped adding it to include.');
   }
-  if (options.experimental.prebundleSvelteLibraries) {
+  if ((_a = options.experimental) == null ? void 0 : _a.prebundleSvelteLibraries) {
     return { include, exclude };
   }
   svelteDeps = svelteDeps.filter((dep) => dep.type === "component-library");
@@ -1382,27 +1396,29 @@ function setupWatchers(options, cache, requestParser) {
       server.restart();
     }
   };
-  const possibleSvelteConfigs = knownSvelteConfigNames.map((cfg) => path5.join(root, cfg));
-  const restartOnConfigAdd = (filename) => {
-    if (possibleSvelteConfigs.includes(filename)) {
-      triggerViteRestart(filename);
-    }
-  };
-  const restartOnConfigChange = (filename) => {
-    if (filename === svelteConfigFile) {
-      triggerViteRestart(filename);
-    }
-  };
   const listenerCollection = {
     add: [],
     change: [emitChangeEventOnDependants],
     unlink: [removeUnlinkedFromCache, emitChangeEventOnDependants]
   };
-  if (svelteConfigFile) {
-    listenerCollection.change.push(restartOnConfigChange);
-    listenerCollection.unlink.push(restartOnConfigChange);
-  } else {
-    listenerCollection.add.push(restartOnConfigAdd);
+  if (svelteConfigFile !== false) {
+    const possibleSvelteConfigs = knownSvelteConfigNames.map((cfg) => path5.join(root, cfg));
+    const restartOnConfigAdd = (filename) => {
+      if (possibleSvelteConfigs.includes(filename)) {
+        triggerViteRestart(filename);
+      }
+    };
+    const restartOnConfigChange = (filename) => {
+      if (filename === svelteConfigFile) {
+        triggerViteRestart(filename);
+      }
+    };
+    if (svelteConfigFile) {
+      listenerCollection.change.push(restartOnConfigChange);
+      listenerCollection.unlink.push(restartOnConfigChange);
+    } else {
+      listenerCollection.add.push(restartOnConfigAdd);
+    }
   }
   Object.entries(listenerCollection).forEach(([evt, listeners]) => {
     if (listeners.length > 0) {
@@ -1489,6 +1505,95 @@ function generateSvelteMetadata(options) {
   return metadata;
 }
 
+// src/ui/inspector/plugin.ts
+import { createRequire as createRequire5 } from "module";
+var defaultInspectorOptions = {
+  toggleKeyCombo: process.platform === "win32" ? "control-shift" : "meta-shift",
+  holdMode: false,
+  showToggleButton: "active",
+  toggleButtonPos: "top-right",
+  customStyles: true
+};
+function svelteInspector() {
+  let root;
+  let rootRequire;
+  let inspectorOptions;
+  let append_to;
+  return {
+    name: "vite-plugin-svelte:inspector",
+    apply: "serve",
+    enforce: "pre",
+    configResolved(config) {
+      var _a, _b, _c;
+      const vps = config.plugins.find((p) => p.name === "vite-plugin-svelte");
+      if ((_c = (_b = (_a = vps == null ? void 0 : vps.api) == null ? void 0 : _a.options) == null ? void 0 : _b.experimental) == null ? void 0 : _c.inspector) {
+        inspectorOptions = __spreadValues(__spreadValues({}, defaultInspectorOptions), vps.api.options.experimental.inspector);
+      }
+      if (!vps || !inspectorOptions) {
+        this.resolveId = this.load = this.transformIndexHtml = this.transform = () => {
+        };
+      } else {
+        root = config.root || process.cwd();
+        rootRequire = createRequire5(root);
+        if (vps.api.options.kit && !inspectorOptions.appendTo) {
+          const out_dir = vps.api.options.kit.outDir || ".svelte-kit";
+          inspectorOptions.appendTo = `${out_dir}/runtime/client/start.js`;
+        }
+        append_to = inspectorOptions.appendTo;
+      }
+    },
+    async resolveId(importee, importer, options) {
+      if (options == null ? void 0 : options.ssr) {
+        return;
+      }
+      if (importee === "virtual:svelte-inspector-options") {
+        return importee;
+      }
+      if (importee.startsWith("virtual:svelte-inspector:")) {
+        const file = importee.replace("virtual:svelte-inspector:", "@sveltejs/vite-plugin-svelte/src/ui/inspector/");
+        const path8 = rootRequire.resolve(file);
+        if (path8) {
+          return path8;
+        } else {
+          log.error.once(`failed to resolve ${file} for ${importee} from ${root}`);
+        }
+      }
+    },
+    load(id) {
+      if (id === "virtual:svelte-inspector-options") {
+        return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
+      }
+    },
+    transform(code, id, options) {
+      if ((options == null ? void 0 : options.ssr) || !append_to) {
+        return;
+      }
+      if (id.endsWith(append_to)) {
+        return { code: `${code}
+import 'virtual:svelte-inspector:load-inspector.ts'` };
+      }
+    },
+    transformIndexHtml(html) {
+      if (append_to) {
+        return;
+      }
+      return {
+        html,
+        tags: [
+          {
+            tag: "script",
+            injectTo: "body",
+            attrs: {
+              type: "module",
+              src: "/@id/virtual:svelte-inspector:load-inspector.ts"
+            }
+          }
+        ]
+      };
+    }
+  };
+}
+
 // src/index.ts
 function svelte(inlineOptions) {
   if (process.env.DEBUG != null) {
@@ -1501,124 +1606,138 @@ function svelte(inlineOptions) {
   let viteConfig;
   let compileSvelte2;
   let resolvedSvelteSSR;
-  return {
-    name: "vite-plugin-svelte",
-    enforce: "pre",
-    async config(config, configEnv) {
-      if (process.env.DEBUG) {
-        log.setLevel("debug");
-      } else if (config.logLevel) {
-        log.setLevel(config.logLevel);
-      }
-      options = await preResolveOptions(inlineOptions, config, configEnv);
-      const extraViteConfig = buildExtraViteConfig(options, config);
-      log.debug("additional vite config", extraViteConfig);
-      return extraViteConfig;
-    },
-    async configResolved(config) {
-      options = resolveOptions(options, config);
-      patchResolvedViteConfig(config, options);
-      requestParser = buildIdParser(options);
-      compileSvelte2 = createCompileSvelte(options);
-      viteConfig = config;
-      log.debug("resolved options", options);
-    },
-    async buildStart() {
-      if (!options.experimental.prebundleSvelteLibraries)
-        return;
-      const isSvelteMetadataChanged = await saveSvelteMetadata(viteConfig.cacheDir, options);
-      if (isSvelteMetadataChanged) {
-        viteConfig.server.force = true;
-      }
-    },
-    configureServer(server) {
-      options.server = server;
-      setupWatchers(options, cache, requestParser);
-    },
-    load(id, opts) {
-      const ssr = opts === true || (opts == null ? void 0 : opts.ssr);
-      const svelteRequest = requestParser(id, !!ssr);
-      if (svelteRequest) {
-        const { filename, query } = svelteRequest;
-        if (query.svelte && query.type === "style") {
-          const css = cache.getCSS(svelteRequest);
-          if (css) {
-            log.debug(`load returns css for ${filename}`);
-            return css;
+  const api = {};
+  const plugins = [
+    {
+      name: "vite-plugin-svelte",
+      enforce: "pre",
+      api,
+      async config(config, configEnv) {
+        if (process.env.DEBUG) {
+          log.setLevel("debug");
+        } else if (config.logLevel) {
+          log.setLevel(config.logLevel);
+        }
+        options = await preResolveOptions(inlineOptions, config, configEnv);
+        const extraViteConfig = buildExtraViteConfig(options, config);
+        log.debug("additional vite config", extraViteConfig);
+        return extraViteConfig;
+      },
+      async configResolved(config) {
+        options = resolveOptions(options, config);
+        patchResolvedViteConfig(config, options);
+        requestParser = buildIdParser(options);
+        compileSvelte2 = createCompileSvelte(options);
+        viteConfig = config;
+        api.options = options;
+        log.debug("resolved options", options);
+      },
+      async buildStart() {
+        var _a;
+        if (!((_a = options.experimental) == null ? void 0 : _a.prebundleSvelteLibraries))
+          return;
+        const isSvelteMetadataChanged = await saveSvelteMetadata(viteConfig.cacheDir, options);
+        if (isSvelteMetadataChanged) {
+          viteConfig.server.force = true;
+        }
+      },
+      configureServer(server) {
+        options.server = server;
+        setupWatchers(options, cache, requestParser);
+      },
+      load(id, opts) {
+        const ssr = opts === true || (opts == null ? void 0 : opts.ssr);
+        const svelteRequest = requestParser(id, !!ssr);
+        if (svelteRequest) {
+          const { filename, query } = svelteRequest;
+          if (query.svelte && query.type === "style") {
+            const css = cache.getCSS(svelteRequest);
+            if (css) {
+              log.debug(`load returns css for ${filename}`);
+              return css;
+            }
+          }
+          if (viteConfig.assetsInclude(filename)) {
+            log.debug(`load returns raw content for ${filename}`);
+            return fs7.readFileSync(filename, "utf-8");
           }
         }
-        if (viteConfig.assetsInclude(filename)) {
-          log.debug(`load returns raw content for ${filename}`);
-          return fs7.readFileSync(filename, "utf-8");
+      },
+      async resolveId(importee, importer, opts) {
+        const ssr = !!(opts == null ? void 0 : opts.ssr);
+        const svelteRequest = requestParser(importee, ssr);
+        if (svelteRequest == null ? void 0 : svelteRequest.query.svelte) {
+          if (svelteRequest.query.type === "style") {
+            log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
+            return svelteRequest.cssId;
+          }
+          log.debug(`resolveId resolved ${importee}`);
+          return importee;
         }
-      }
-    },
-    async resolveId(importee, importer, opts) {
-      const ssr = !!(opts == null ? void 0 : opts.ssr);
-      const svelteRequest = requestParser(importee, ssr);
-      if (svelteRequest == null ? void 0 : svelteRequest.query.svelte) {
-        if (svelteRequest.query.type === "style") {
-          log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
-          return svelteRequest.cssId;
+        if (ssr && importee === "svelte") {
+          if (!resolvedSvelteSSR) {
+            resolvedSvelteSSR = this.resolve("svelte/ssr", void 0, { skipSelf: true }).then((svelteSSR) => {
+              log.debug("resolved svelte to svelte/ssr");
+              return svelteSSR;
+            }, (err) => {
+              log.debug("failed to resolve svelte to svelte/ssr. Update svelte to a version that exports it", err);
+              return null;
+            });
+          }
+          return resolvedSvelteSSR;
         }
-        log.debug(`resolveId resolved ${importee}`);
-        return importee;
-      }
-      if (ssr && importee === "svelte") {
-        if (!resolvedSvelteSSR) {
-          resolvedSvelteSSR = this.resolve("svelte/ssr", void 0, { skipSelf: true }).then((svelteSSR) => {
-            log.debug("resolved svelte to svelte/ssr");
-            return svelteSSR;
-          }, (err) => {
-            log.debug("failed to resolve svelte to svelte/ssr. Update svelte to a version that exports it", err);
-            return null;
-          });
+        try {
+          const resolved = resolveViaPackageJsonSvelte(importee, importer, cache);
+          if (resolved) {
+            log.debug(`resolveId resolved ${resolved} via package.json svelte field of ${importee}`);
+            return resolved;
+          }
+        } catch (e) {
+          log.debug.once(`error trying to resolve ${importee} from ${importer} via package.json svelte field `, e);
         }
-        return resolvedSvelteSSR;
-      }
-      try {
-        const resolved = resolveViaPackageJsonSvelte(importee, importer, cache);
-        if (resolved) {
-          log.debug(`resolveId resolved ${resolved} via package.json svelte field of ${importee}`);
-          return resolved;
+      },
+      async transform(code, id, opts) {
+        var _a;
+        const ssr = !!(opts == null ? void 0 : opts.ssr);
+        const svelteRequest = requestParser(id, ssr);
+        if (!svelteRequest || svelteRequest.query.svelte) {
+          return;
         }
-      } catch (e) {
-        log.debug.once(`error trying to resolve ${importee} from ${importer} via package.json svelte field `, e);
-      }
-    },
-    async transform(code, id, opts) {
-      var _a;
-      const ssr = !!(opts == null ? void 0 : opts.ssr);
-      const svelteRequest = requestParser(id, ssr);
-      if (!svelteRequest || svelteRequest.query.svelte) {
-        return;
-      }
-      let compileData;
-      try {
-        compileData = await compileSvelte2(svelteRequest, code, options);
-      } catch (e) {
-        throw toRollupError(e, options);
-      }
-      logCompilerWarnings(compileData.compiled.warnings, options);
-      cache.update(compileData);
-      if (((_a = compileData.dependencies) == null ? void 0 : _a.length) && options.server) {
-        compileData.dependencies.forEach((d) => {
-          ensureWatchedFile(options.server.watcher, d, options.root);
+        let compileData;
+        try {
+          compileData = await compileSvelte2(svelteRequest, code, options);
+        } catch (e) {
+          throw toRollupError(e, options);
+        }
+        logCompilerWarnings(compileData.compiled.warnings, options);
+        cache.update(compileData);
+        if (((_a = compileData.dependencies) == null ? void 0 : _a.length) && options.server) {
+          compileData.dependencies.forEach((d) => {
+            ensureWatchedFile(options.server.watcher, d, options.root);
+          });
+        }
+        log.debug(`transform returns compiled js for ${svelteRequest.filename}`);
+        return __spreadProps(__spreadValues({}, compileData.compiled.js), {
+          meta: {
+            vite: {
+              lang: compileData.lang
+            }
+          }
         });
-      }
-      log.debug(`transform returns compiled js for ${svelteRequest.filename}`);
-      return compileData.compiled.js;
-    },
-    handleHotUpdate(ctx) {
-      if (!options.hot || !options.emitCss) {
-        return;
-      }
-      const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
-      if (svelteRequest) {
-        return handleHotUpdate(compileSvelte2, ctx, svelteRequest, cache, options);
+      },
+      handleHotUpdate(ctx) {
+        if (!options.hot || !options.emitCss) {
+          return;
+        }
+        const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
+        if (svelteRequest) {
+          return handleHotUpdate(compileSvelte2, ctx, svelteRequest, cache, options);
+        }
       }
     }
-  };
+  ];
+  plugins.push(svelteInspector());
+  return plugins.filter(Boolean);
 }
 export {
   svelte