@sveltejs/vite-plugin-svelte
Advanced tools
@sveltejs/vite-plugin-svelte - npm Package Compare versions
Comparing version 2.1.1 to 2.2.0
@@ -7,2 +7,69 @@ import { InlineConfig, ResolvedConfig, UserConfig, Plugin } from 'vite'; | ||
| 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; | ||
@@ -90,2 +157,8 @@ interface PluginOptionsInline extends PluginOptions { | ||
| /** | ||
| * toggle/configure Svelte Inspector | ||
| * | ||
| * @default true | ||
| */ | ||
| inspector?: InspectorOptions | boolean; | ||
| /** | ||
| * These options are considered experimental and breaking changes to them can occur in any release | ||
@@ -154,6 +227,2 @@ */ | ||
| /** | ||
| * enable svelte inspector | ||
| */ | ||
| inspector?: InspectorOptions | boolean; | ||
| /** | ||
| * send a websocket message with svelte compiler warnings during dev | ||
@@ -170,70 +239,2 @@ * | ||
| } | ||
| 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']>; | ||
@@ -240,0 +241,0 @@ type CssHashGetter = NonNullable<CompileOptions['cssHash']>; |
| { | ||
| "name": "@sveltejs/vite-plugin-svelte", | ||
| "version": "2.1.1", | ||
| "version": "2.2.0", | ||
| "license": "MIT", | ||
@@ -53,7 +53,7 @@ "author": "dominikg", | ||
| "@types/debug": "^4.1.7", | ||
| "esbuild": "^0.17.17", | ||
| "rollup": "^2.79.1", | ||
| "esbuild": "^0.17.18", | ||
| "rollup": "^3.21.2", | ||
| "svelte": "^3.58.0", | ||
| "tsup": "^6.7.0", | ||
| "vite": "^4.3.1" | ||
| "vite": "^4.3.3" | ||
| }, | ||
@@ -60,0 +60,0 @@ "scripts": { |
@@ -276,6 +276,6 @@ import fs from 'fs'; | ||
| } | ||
| } | ||
| }, | ||
| svelteInspector() | ||
| ]; | ||
| plugins.push(svelteInspector()); | ||
| return plugins.filter(Boolean); | ||
| return plugins; | ||
| } | ||
@@ -282,0 +282,0 @@ |
@@ -11,3 +11,3 @@ // eslint-disable-next-line node/no-missing-import | ||
| el.setAttribute('id', id); | ||
| document.getElementsByTagName('body')[0].appendChild(el); | ||
| document.documentElement.appendChild(el); | ||
| return el; | ||
@@ -14,0 +14,0 @@ } |
| import { Plugin, normalizePath } from 'vite'; | ||
| import { log } from '../../utils/log'; | ||
| import { InspectorOptions } from '../../utils/options'; | ||
| import path from 'path'; | ||
@@ -8,13 +7,4 @@ import { fileURLToPath } from 'url'; | ||
| import { idToFile } from './utils'; | ||
| import { defaultInspectorOptions, type InspectorOptions, parseEnvironmentOptions } from './options'; | ||
| const defaultInspectorOptions: InspectorOptions = { | ||
| toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift', | ||
| navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }, | ||
| openKey: 'Enter', | ||
| holdMode: false, | ||
| showToggleButton: 'active', | ||
| toggleButtonPos: 'top-right', | ||
| customStyles: true | ||
| }; | ||
| function getInspectorPath() { | ||
@@ -29,3 +19,2 @@ const pluginPath = normalizePath(path.dirname(fileURLToPath(import.meta.url))); | ||
| let inspectorOptions: InspectorOptions; | ||
| let appendTo: string | undefined; | ||
| let disabled = false; | ||
@@ -40,19 +29,26 @@ | ||
| 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', undefined, 'inspector'); | ||
| disabled = true; | ||
| return; | ||
| } | ||
| inspectorOptions = { | ||
| ...defaultInspectorOptions, | ||
| ...options | ||
| const configFileOptions = vps?.api?.options?.inspector; | ||
| const environmentOptions = parseEnvironmentOptions(config); | ||
| if (!configFileOptions && !environmentOptions) { | ||
| log.debug('no options found, inspector disabled', undefined, 'inspector'); | ||
| disabled = true; | ||
| return; | ||
| } | ||
| if (environmentOptions === true) { | ||
| inspectorOptions = defaultInspectorOptions; | ||
| } else { | ||
| inspectorOptions = { | ||
| ...defaultInspectorOptions, | ||
| ...configFileOptions, | ||
| ...(environmentOptions || {}) | ||
| }; | ||
| } | ||
| inspectorOptions.__internal = { | ||
| base: config.base?.replace(/\/$/, '') || '' | ||
| }; | ||
| const isSvelteKit = config.plugins.some((p) => p.name.startsWith('vite-plugin-sveltekit')); | ||
| if (isSvelteKit && !inspectorOptions.appendTo) { | ||
| // this could append twice if a user had a file that ends with /generated/root.svelte | ||
| // but that should be rare and inspector doesn't execute twice | ||
| inspectorOptions.appendTo = `/generated/root.svelte`; | ||
| } | ||
| appendTo = inspectorOptions.appendTo; | ||
| }, | ||
@@ -68,3 +64,4 @@ | ||
| 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}`, undefined, 'inspector'); | ||
| return resolved; | ||
@@ -86,3 +83,7 @@ } | ||
| } 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}.`, | ||
| undefined, | ||
| 'inspector' | ||
| ); | ||
| } | ||
@@ -92,30 +93,11 @@ } | ||
| transform(code: string, id: string, options?: { ssr?: boolean }) { | ||
| if (options?.ssr || disabled || !appendTo) { | ||
| transform(code, id, options) { | ||
| if (options?.ssr || disabled) { | ||
| return; | ||
| } | ||
| if (id.endsWith(appendTo)) { | ||
| return { code: `${code}\nimport 'virtual:svelte-inspector-path:load-inspector.js'` }; | ||
| if (id.includes('vite/dist/client/client.mjs')) { | ||
| return { code: `${code}\nimport('virtual:svelte-inspector-path:load-inspector.js')` }; | ||
| } | ||
| }, | ||
| transformIndexHtml(html) { | ||
| if (disabled || appendTo) { | ||
| return; | ||
| } | ||
| 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' | ||
| } | ||
| } | ||
| ] | ||
| }; | ||
| } | ||
| }; | ||
| } |
| /* eslint-disable no-unused-vars */ | ||
| import { ConfigEnv, ResolvedConfig, UserConfig, ViteDevServer, normalizePath } from 'vite'; | ||
| import { ConfigEnv, normalizePath, ResolvedConfig, UserConfig, ViteDevServer } from 'vite'; | ||
| import { isDebugNamespaceEnabled, log } from './log'; | ||
@@ -38,2 +38,3 @@ import { loadSvelteConfig } from './load-svelte-config'; | ||
| import { VitePluginSvelteCache } from './vite-plugin-svelte-cache'; | ||
| import type { InspectorOptions } from '../ui/inspector/options'; | ||
@@ -48,2 +49,3 @@ const allowedPluginOptions = new Set([ | ||
| 'prebundleSvelteLibraries', | ||
| 'inspector', | ||
| 'experimental' | ||
@@ -54,8 +56,3 @@ ]); | ||
| const allowedInlineOptions = new Set([ | ||
| 'configFile', | ||
| 'kit', // only for internal use by sveltekit | ||
| ...allowedPluginOptions, | ||
| ...knownRootOptions | ||
| ]); | ||
| const allowedInlineOptions = new Set(['configFile', ...allowedPluginOptions, ...knownRootOptions]); | ||
@@ -209,3 +206,2 @@ export function validateInlineOptions(inlineOptions?: Partial<Options>) { | ||
| handleDeprecatedOptions(merged); | ||
| addSvelteKitOptions(merged); | ||
| addExtraPreprocessors(merged, viteConfig); | ||
@@ -298,21 +294,19 @@ enforceOptionsForHmr(merged); | ||
| // some SvelteKit options need compilerOptions to work, so set them here. | ||
| function addSvelteKitOptions(options: ResolvedOptions) { | ||
| // @ts-expect-error kit is not typed to avoid dependency on sveltekit | ||
| if (options?.kit != null && options.compilerOptions.hydratable == null) { | ||
| log.debug(`Setting compilerOptions.hydratable = true for SvelteKit`); | ||
| options.compilerOptions.hydratable = true; | ||
| } | ||
| } | ||
| function handleDeprecatedOptions(options: ResolvedOptions) { | ||
| if ((options.experimental as any)?.prebundleSvelteLibraries) { | ||
| options.prebundleSvelteLibraries = (options.experimental as any)?.prebundleSvelteLibraries; | ||
| log.warn( | ||
| 'experimental.prebundleSvelteLibraries is no longer experimental and has moved to prebundleSvelteLibraries' | ||
| ); | ||
| const experimental = options.experimental as any; | ||
| if (experimental) { | ||
| for (const promoted of ['prebundleSvelteLibraries', 'inspector']) { | ||
| if (experimental[promoted]) { | ||
| //@ts-expect-error untyped assign | ||
| 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.'); | ||
| } | ||
| } | ||
| if ((options.experimental as any)?.generateMissingPreprocessorSourcemaps) { | ||
| log.warn('experimental.generateMissingPreprocessorSourcemaps has been removed.'); | ||
| } | ||
| } | ||
@@ -652,2 +646,9 @@ | ||
| /** | ||
| * toggle/configure Svelte Inspector | ||
| * | ||
| * @default true | ||
| */ | ||
| inspector?: InspectorOptions | boolean; | ||
| /** | ||
| * These options are considered experimental and breaking changes to them can occur in any release | ||
@@ -723,7 +724,2 @@ */ | ||
| /** | ||
| * enable svelte inspector | ||
| */ | ||
| inspector?: InspectorOptions | boolean; | ||
| /** | ||
| * send a websocket message with svelte compiler warnings during dev | ||
@@ -742,72 +738,2 @@ * | ||
| export 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; | ||
| } | ||
| export interface PreResolvedOptions extends Options { | ||
@@ -814,0 +740,0 @@ // these options are non-nullable after resolve |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.19%
390532
- Number of package files
- increased by2.7%
38
- Lines of code
- increased by1.25%
6215
No dependency changes