@sveltejs/vite-plugin-svelte 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -4,6 +4,73 @@ export { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
 import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 export { MarkupPreprocessor, Preprocessor, PreprocessorGroup, Processed } from 'svelte/types/compiler/preprocess';
 
+interface InspectorOptions {
+    /**
+     * define a key combo to toggle inspector,
+     * @default 'meta-shift' on mac, 'control-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;
+    /**
+     * define keys to select elements with via keyboard
+     * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
+     *
+     * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
+     * due to tight wrapping
+     *
+     * A note for users of screen-readers:
+     * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
+     * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
+     *
+     *
+     * parent: select closest parent
+     * child: select first child (or grandchild)
+     * next: next sibling (or parent if no next sibling exists)
+     * prev: previous sibling (or parent if no prev sibling exists)
+     */
+    navKeys?: {
+        parent: string;
+        child: string;
+        next: string;
+        prev: string;
+    };
+    /**
+     * define key to open the editor for the currently selected dom node
+     *
+     * @default 'Enter'
+     */
+    openKey?: string;
+    /**
+     * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
+     * @default true
+     */
+    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;
+    /**
+     * internal options that are automatically set, not to be set or used by users
+     */
+    __internal?: {
+        base: string;
+    };
+}
+
 type Options = Omit<SvelteOptions, 'vitePlugin'> & PluginOptionsInline;
 interface PluginOptionsInline extends PluginOptions {
     /**
@@ -85,6 +152,12 @@ interface PluginOptions {
      * @default true for dev, false for build
      */
     prebundleSvelteLibraries?: boolean;
+    /**
+     * toggle/configure Svelte Inspector
+     *
+     * @default true
+     */
+    inspector?: InspectorOptions | boolean;
     /**
      * These options are considered experimental and breaking changes to them can occur in any release
      */
@@ -148,10 +221,6 @@ interface ExperimentalOptions {
         code: string;
         compileOptions: Partial<CompileOptions>;
     }) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
-    /**
-     * enable svelte inspector
-     */
-    inspector?: InspectorOptions | boolean;
     /**
      * send a websocket message with svelte compiler warnings during dev
      *
@@ -164,74 +233,6 @@ interface ExperimentalOptions {
      */
     disableSvelteResolveWarnings?: 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;
-    /**
-     * define keys to select elements with via keyboard
-     * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
-     *
-     * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
-     * due to tight wrapping
-     *
-     * A note for users of screen-readers:
-     * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
-     * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
-     *
-     *
-     * parent: select closest parent
-     * child: select first child (or grandchild)
-     * next: next sibling (or parent if no next sibling exists)
-     * prev: previous sibling (or parent if no prev sibling exists)
-     */
-    navKeys?: {
-        parent: string;
-        child: string;
-        next: string;
-        prev: string;
-    };
-    /**
-     * define key to open the editor for the currently selected dom node
-     *
-     * @default 'Enter'
-     */
-    openKey?: 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;
-}
 type ModuleFormat = NonNullable<CompileOptions['format']>;
 type CssHashGetter = NonNullable<CompileOptions['cssHash']>;
 type Arrayable<T> = T | T[];

package/dist/index.js

@@ -1169,16 +1169,11 @@ var allowedPluginOptions = /* @__PURE__ */ new Set([
   "ignorePluginPreprocessors",
   "disableDependencyReinclusion",
   "prebundleSvelteLibraries",
+  "inspector",
   "experimental"
 ]);
 var knownRootOptions = /* @__PURE__ */ new Set(["extensions", "compilerOptions", "preprocess", "onwarn"]);
-var allowedInlineOptions = /* @__PURE__ */ new Set([
-  "configFile",
-  "kit",
-  // only for internal use by sveltekit
-  ...allowedPluginOptions,
-  ...knownRootOptions
-]);
+var allowedInlineOptions = /* @__PURE__ */ new Set(["configFile", ...allowedPluginOptions, ...knownRootOptions]);
 function validateInlineOptions(inlineOptions) {
   const invalidKeys = Object.keys(inlineOptions || {}).filter(
     (key) => !allowedInlineOptions.has(key)
@@ -1300,7 +1295,6 @@ function resolveOptions(preResolveOptions2, viteConfig, cache) {
   const merged = mergeConfigs(defaultOptions, preResolveOptions2, extraOptions);
   removeIgnoredOptions(merged);
   handleDeprecatedOptions(merged);
-  addSvelteKitOptions(merged);
   addExtraPreprocessors(merged, viteConfig);
   enforceOptionsForHmr(merged);
   enforceOptionsForProduction(merged);
@@ -1382,21 +1376,21 @@ function removeIgnoredOptions(options) {
     });
   }
 }
-function addSvelteKitOptions(options) {
-  if (options?.kit != null && options.compilerOptions.hydratable == null) {
-    log.debug(`Setting compilerOptions.hydratable = true for SvelteKit`);
-    options.compilerOptions.hydratable = true;
-  }
-}
 function handleDeprecatedOptions(options) {
-  if (options.experimental?.prebundleSvelteLibraries) {
-    options.prebundleSvelteLibraries = options.experimental?.prebundleSvelteLibraries;
-    log.warn(
-      "experimental.prebundleSvelteLibraries is no longer experimental and has moved to prebundleSvelteLibraries"
-    );
-  }
-  if (options.experimental?.generateMissingPreprocessorSourcemaps) {
-    log.warn("experimental.generateMissingPreprocessorSourcemaps has been removed.");
+  const experimental = options.experimental;
+  if (experimental) {
+    for (const promoted of ["prebundleSvelteLibraries", "inspector"]) {
+      if (experimental[promoted]) {
+        options[promoted] = experimental[promoted];
+        delete experimental[promoted];
+        log.warn(
+          `Option "vitePlugin.experimental.${promoted}" is no longer experimental and has moved to "vitePlugin.${promoted}". Please update your svelte config.`
+        );
+      }
+    }
+    if (experimental.generateMissingPreprocessorSourcemaps) {
+      log.warn("experimental.generateMissingPreprocessorSourcemaps has been removed.");
+    }
   }
 }
 function resolveViteRoot(viteConfig) {
@@ -1763,16 +1757,67 @@ function idToFile(id) {
   return id.replace(hashRE, "").replace(queryRE, "");
 }
 
-// src/ui/inspector/plugin.ts
+// src/ui/inspector/options.ts
+import * as process2 from "process";
+import { loadEnv } from "vite";
 var defaultInspectorOptions = {
-  toggleKeyCombo: process.platform === "win32" ? "control-shift" : "meta-shift",
+  toggleKeyCombo: process2.platform === "darwin" ? "meta-shift" : "control-shift",
   navKeys: { parent: "ArrowUp", child: "ArrowDown", next: "ArrowRight", prev: "ArrowLeft" },
   openKey: "Enter",
-  holdMode: false,
+  holdMode: true,
   showToggleButton: "active",
   toggleButtonPos: "top-right",
   customStyles: true
 };
+function parseEnvironmentOptions(config) {
+  const env = loadEnv(config.mode, config.envDir ?? process2.cwd(), "SVELTE_INSPECTOR");
+  const options = env?.SVELTE_INSPECTOR_OPTIONS;
+  const toggle = env?.SVELTE_INSPECTOR_TOGGLE;
+  if (options) {
+    try {
+      const parsed = JSON.parse(options);
+      const parsedType = typeof parsed;
+      if (parsedType === "boolean") {
+        return parsed;
+      } else if (parsedType === "object") {
+        if (Array.isArray(parsed)) {
+          throw new Error("invalid type, expected object map but got array");
+        }
+        const parsedKeys = Object.keys(parsed);
+        const defaultKeys = Object.keys(defaultInspectorOptions);
+        const unknownKeys = parsedKeys.filter((k) => !defaultKeys.includes(k));
+        if (unknownKeys.length) {
+          log.warn(
+            `ignoring unknown options in environment SVELTE_INSPECTOR_OPTIONS:  ${unknownKeys.join(
+              ", "
+            )}.`,
+            void 0,
+            "inspector"
+          );
+          for (const key of unknownKeys) {
+            delete parsed[key];
+          }
+        }
+        log.debug("loaded environment config", parsed, "inspector");
+        return parsed;
+      }
+    } catch (e) {
+      log.error(
+        `failed to parse inspector options from environment SVELTE_INSPECTOR_OPTIONS="${options}"`,
+        e,
+        "inspector"
+      );
+    }
+  } else if (toggle) {
+    const keyConfig = {
+      toggleKeyCombo: toggle
+    };
+    log.debug("loaded environment config", keyConfig, "inspector");
+    return keyConfig;
+  }
+}
+
+// src/ui/inspector/plugin.ts
 function getInspectorPath() {
   const pluginPath = normalizePath5(path9.dirname(fileURLToPath(import.meta.url)));
   return pluginPath.replace(/\/vite-plugin-svelte\/dist$/, "/vite-plugin-svelte/src/ui/inspector/");
@@ -1781,7 +1826,6 @@ function svelteInspector() {
   const inspectorPath = getInspectorPath();
   log.debug.enabled && log.debug(`svelte inspector path: ${inspectorPath}`);
   let inspectorOptions;
-  let appendTo;
   let disabled = false;
   return {
     name: "vite-plugin-svelte:inspector",
@@ -1789,21 +1833,30 @@ function svelteInspector() {
     enforce: "pre",
     configResolved(config) {
       const vps = config.plugins.find((p) => p.name === "vite-plugin-svelte");
-      const options = vps?.api?.options?.experimental?.inspector;
-      if (!vps || !options) {
-        log.debug("inspector disabled, could not find config");
+      if (!vps) {
+        log.warn("vite-plugin-svelte is missing, inspector disabled", void 0, "inspector");
         disabled = true;
         return;
       }
-      inspectorOptions = {
-        ...defaultInspectorOptions,
-        ...options
-      };
-      const isSvelteKit = config.plugins.some((p) => p.name.startsWith("vite-plugin-sveltekit"));
-      if (isSvelteKit && !inspectorOptions.appendTo) {
-        inspectorOptions.appendTo = `/generated/root.svelte`;
+      const configFileOptions = vps?.api?.options?.inspector;
+      const environmentOptions = parseEnvironmentOptions(config);
+      if (!configFileOptions && !environmentOptions) {
+        log.debug("no options found, inspector disabled", void 0, "inspector");
+        disabled = true;
+        return;
+      }
+      if (environmentOptions === true) {
+        inspectorOptions = defaultInspectorOptions;
+      } else {
+        inspectorOptions = {
+          ...defaultInspectorOptions,
+          ...configFileOptions,
+          ...environmentOptions || {}
+        };
       }
-      appendTo = inspectorOptions.appendTo;
+      inspectorOptions.__internal = {
+        base: config.base?.replace(/\/$/, "") || ""
+      };
     },
     async resolveId(importee, importer, options) {
       if (options?.ssr || disabled) {
@@ -1813,7 +1866,7 @@ function svelteInspector() {
         return importee;
       } else if (importee.startsWith("virtual:svelte-inspector-path:")) {
         const resolved = importee.replace("virtual:svelte-inspector-path:", inspectorPath);
-        log.debug.enabled && log.debug(`resolved ${importee} with ${resolved}`);
+        log.debug.enabled && log.debug(`resolved ${importee} with ${resolved}`, void 0, "inspector");
         return resolved;
       }
     },
@@ -1828,37 +1881,22 @@ function svelteInspector() {
         if (fs6.existsSync(file)) {
           return await fs6.promises.readFile(file, "utf-8");
         } else {
-          log.error(`failed to find file for svelte-inspector: ${file}, referenced by id ${id}.`);
+          log.error(
+            `failed to find file for svelte-inspector: ${file}, referenced by id ${id}.`,
+            void 0,
+            "inspector"
+          );
         }
       }
     },
     transform(code, id, options) {
-      if (options?.ssr || disabled || !appendTo) {
+      if (options?.ssr || disabled) {
         return;
       }
-      if (id.endsWith(appendTo)) {
+      if (id.includes("vite/dist/client/client.mjs")) {
         return { code: `${code}
-import 'virtual:svelte-inspector-path:load-inspector.js'` };
-      }
-    },
-    transformIndexHtml(html) {
-      if (disabled || appendTo) {
-        return;
+import('virtual:svelte-inspector-path:load-inspector.js')` };
       }
-      return {
-        html,
-        tags: [
-          {
-            tag: "script",
-            injectTo: "body",
-            attrs: {
-              type: "module",
-              // /@id/ is needed, otherwise the virtual: is seen as protocol by browser and cors error happens
-              src: "/@id/virtual:svelte-inspector-path:load-inspector.js"
-            }
-          }
-        ]
-      };
     }
   };
 }
@@ -2377,10 +2415,10 @@ Please see ${FAQ_LINK_CONFLICTS_IN_SVELTE_RESOLVE} for details.`
           );
         }
       }
-    }
+    },
+    svelteInspector()
   ];
-  plugins.push(svelteInspector());
-  return plugins.filter(Boolean);
+  return plugins;
 }
 export {
   loadSvelteConfig,