@sveltejs/vite-plugin-svelte - npm Package Compare versions

Comparing version 4.0.0-next.0 to 4.0.0-next.1

package.json

 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "4.0.0-next.0",
+  "version": "4.0.0-next.1",
   "license": "MIT",
@@ -44,3 +44,3 @@ "author": "dominikg",
     "vitefu": "^0.2.5",
-    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0"
+    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.1"
   },
@@ -47,0 +47,0 @@ "peerDependencies": {

src/index.js

@@ -203,2 +203,3 @@ import fs from 'node:fs';
 					const compileResult = svelteCompiler.compileModule(code, {
+						dev: !viteConfig.isProduction,
 						generate: ssr ? 'server' : 'client',
@@ -205,0 +206,0 @@ filename: moduleRequest.filename

src/public.d.ts

@@ -178,2 +178,11 @@ import type { InlineConfig, ResolvedConfig } from 'vite';
 interface CompileModuleOptions {
+	/**
+	 * infix that must be present in filename
+	 * @default ['.svelte.']
+	 */
+	infixes?: string[];
+	/**
+	 * module extensions
+	 * @default ['.ts','.js']
+	 */
 	extensions?: string[];
@@ -180,0 +189,0 @@ include?: Arrayable<string>;

src/utils/compile.js

@@ -131,3 +131,2 @@ import * as svelte from 'svelte/compiler';
 			: compileOptions;
-
 		const endStat = stats?.start(filename);
@@ -137,3 +136,3 @@ /** @type {import('svelte/compiler').CompileResult} */
 		try {
-			compiled = svelte.compile(finalCode, finalCompileOptions);
+			compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename: filename });
 			// patch output with partial accept until svelte does it
@@ -140,0 +139,0 @@ // TODO remove later

src/utils/constants.js

@@ -23,1 +23,5 @@ export const VITE_RESOLVE_MAIN_FIELDS = ['browser', 'module', 'jsnext:main', 'jsnext'];
 	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition';
+
+export const DEFAULT_SVELTE_EXT = ['.svelte'];
+export const DEFAULT_SVELTE_MODULE_INFIX = ['.svelte.'];
+export const DEFAULT_SVELTE_MODULE_EXT = ['.js', '.ts'];

src/utils/esbuild.js

@@ -12,5 +12,4 @@ import { readFileSync } from 'node:fs';
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
+export const facadeEsbuildSvelteModulePluginName = 'vite-plugin-svelte-module:facade';
 
-const svelteModuleExtension = '.svelte.js';
-
 /**
@@ -28,14 +27,11 @@ * @param {import('../types/options.d.ts').ResolvedOptions} options
 
-			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
-			svelteExtensions.push(svelteModuleExtension.slice(1));
-
-			const svelteFilter = new RegExp('\\.(' + svelteExtensions.join('|') + ')(\\?.*)?$');
+			const filter = /\.svelte(?:\?.*)?$/;
 			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
 			let statsCollection;
 			build.onStart(() => {
-				statsCollection = options.stats?.startCollection('prebundle libraries', {
+				statsCollection = options.stats?.startCollection('prebundle library components', {
 					logResult: (c) => c.stats.length > 1
 				});
 			});
-			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
+			build.onLoad({ filter }, async ({ path: filename }) => {
 				const code = readFileSync(filename, 'utf8');
@@ -63,15 +59,2 @@ try {
 async function compileSvelte(options, { filename, code }, statsCollection) {
-	if (filename.endsWith(svelteModuleExtension)) {
-		const endStat = statsCollection?.start(filename);
-		const compiled = svelte.compileModule(code, {
-			filename,
-			generate: 'client'
-		});
-		if (endStat) {
-			endStat();
-		}
-		return compiled.js.map
-			? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
-			: compiled.js.code;
-	}
 	let css = options.compilerOptions.css;
@@ -84,2 +67,3 @@ if (css !== 'injected') {
 	const compileOptions = {
+		dev: true, // default to dev: true because prebundling is only used in dev
 		...options.compilerOptions,
@@ -134,1 +118,58 @@ css,
 }
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {EsbuildPlugin}
+ */
+export function esbuildSvelteModulePlugin(options) {
+	return {
+		name: 'vite-plugin-svelte-module:optimize-svelte',
+		setup(build) {
+			// Skip in scanning phase as Vite already handles scanning Svelte files.
+			// Otherwise this would heavily slow down the scanning phase.
+			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
+
+			const filter = /\.svelte\.[jt]s(?:\?.*)?$/;
+			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+			let statsCollection;
+			build.onStart(() => {
+				statsCollection = options.stats?.startCollection('prebundle library modules', {
+					logResult: (c) => c.stats.length > 1
+				});
+			});
+			build.onLoad({ filter }, async ({ path: filename }) => {
+				const code = readFileSync(filename, 'utf8');
+				try {
+					const contents = await compileSvelteModule(options, { filename, code }, statsCollection);
+					return { contents };
+				} catch (e) {
+					return { errors: [toESBuildError(e, options)] };
+				}
+			});
+			build.onEnd(() => {
+				statsCollection?.finish();
+			});
+		}
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {{ filename: string; code: string }} input
+ * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
+ * @returns {Promise<string>}
+ */
+async function compileSvelteModule(options, { filename, code }, statsCollection) {
+	const endStat = statsCollection?.start(filename);
+	const compiled = svelte.compileModule(code, {
+		dev: options.compilerOptions?.dev ?? true, // default to dev: true because prebundling is only used in dev
+		filename,
+		generate: 'client'
+	});
+	if (endStat) {
+		endStat();
+	}
+	return compiled.js.map
+		? compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl()
+		: compiled.js.code;
+}

src/utils/id.js

 import { createFilter, normalizePath } from 'vite';
 import * as fs from 'node:fs';
 import { log } from './log.js';
+import { DEFAULT_SVELTE_MODULE_EXT, DEFAULT_SVELTE_MODULE_INFIX } from './constants.js';
 
@@ -173,2 +174,17 @@ const VITE_FS_PREFIX = '/@fs/';
 /**
+ * @param {import('../public.d.ts').Options['include'] | undefined} include
+ * @param {import('../public.d.ts').Options['exclude'] | undefined} exclude
+ * @param {string[]} infixes
+ * @param {string[]} extensions
+ * @returns {(filename: string) => boolean}
+ */
+function buildModuleFilter(include, exclude, infixes, extensions) {
+	const rollupFilter = createFilter(include, exclude);
+	return (filename) =>
+		rollupFilter(filename) &&
+		infixes.some((infix) => filename.includes(infix)) &&
+		extensions.some((ext) => filename.endsWith(ext));
+}
+
+/**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
@@ -194,6 +210,11 @@ * @returns {import('../types/id.d.ts').IdParser}
 export function buildModuleIdParser(options) {
-	const { include, exclude, extensions } = options?.experimental?.compileModule ?? {};
+	const {
+		include,
+		exclude,
+		infixes = DEFAULT_SVELTE_MODULE_INFIX,
+		extensions = DEFAULT_SVELTE_MODULE_EXT
+	} = options?.experimental?.compileModule ?? {};
 	const root = options.root;
 	const normalizedRoot = normalizePath(root);
-	const filter = buildFilter(include, exclude, extensions ?? ['.svelte.js', '.svelte.ts']);
+	const filter = buildModuleFilter(include, exclude, infixes, extensions);
 	return (id, ssr, timestamp = Date.now()) => {
@@ -200,0 +221,0 @@ const { filename, rawQuery } = splitId(id);

src/utils/options.js

@@ -6,2 +6,3 @@ /* eslint-disable no-unused-vars */
 import {
+	DEFAULT_SVELTE_EXT,
 	FAQ_LINK_MISSING_EXPORTS_CONDITION,
@@ -15,3 +16,8 @@ SVELTE_EXPORT_CONDITIONS,
 import path from 'node:path';
-import { esbuildSveltePlugin, facadeEsbuildSveltePluginName } from './esbuild.js';
+import {
+	esbuildSvelteModulePlugin,
+	esbuildSveltePlugin,
+	facadeEsbuildSvelteModulePluginName,
+	facadeEsbuildSveltePluginName
+} from './esbuild.js';
 import { addExtraPreprocessors } from './preprocess.js';
@@ -142,3 +148,3 @@ import deepmerge from 'deepmerge';
 	const defaultOptions = {
-		extensions: ['.svelte'],
+		extensions: DEFAULT_SVELTE_EXT,
 		emitCss: true,
@@ -389,3 +395,6 @@ prebundleSvelteLibraries: !isBuild
 			esbuildOptions: {
-				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
+				plugins: [
+					{ name: facadeEsbuildSveltePluginName, setup: () => {} },
+					{ name: facadeEsbuildSvelteModulePluginName, setup: () => {} }
+				]
 			}
@@ -590,2 +599,8 @@ };
 	}
+	const facadeEsbuildSvelteModulePlugin = viteConfig.optimizeDeps.esbuildOptions?.plugins?.find(
+		(plugin) => plugin.name === facadeEsbuildSvelteModulePluginName
+	);
+	if (facadeEsbuildSvelteModulePlugin) {
+		Object.assign(facadeEsbuildSvelteModulePlugin, esbuildSvelteModulePlugin(options));
+	}
 }
@@ -592,0 +607,0 @@

types/index.d.ts

@@ -176,2 +176,11 @@ declare module '@sveltejs/vite-plugin-svelte' {
 	interface CompileModuleOptions {
+		/**
+		 * infix that must be present in filename
+		 * @default ['.svelte.']
+		 */
+		infixes?: string[];
+		/**
+		 * module extensions
+		 * @default ['.ts','.js']
+		 */
 		extensions?: string[];
@@ -178,0 +187,0 @@ include?: Arrayable<string>;

New alerts

License Policy Violation

License

This 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

License

This 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

122252

increased by2.71%

Lines of code

3689

increased by2.7%

Dependency changes

• Updated@sveltejs/vite-plugin-svelte-inspector@^3.0.0-next.1