@sveltejs/vite-plugin-svelte 1.0.0-next.28 → 1.0.0-next.31

package/src/utils/compile.ts

@@ -26,6 +26,13 @@ const _createCompileSvelte = (makeHot: Function) =>
 			log.debug(`setting cssHash ${hash} for ${normalizedFilename}`);
 			compileOptions.cssHash = () => hash;
 		}
+		if (ssr && compileOptions.enableSourcemap !== false) {
+			if (typeof compileOptions.enableSourcemap === 'object') {
+				compileOptions.enableSourcemap.css = false;
+			} else {
+				compileOptions.enableSourcemap = { js: true, css: false };
+			}
+		}
 
 		let preprocessed;
 

package/src/utils/error.ts

@@ -0,0 +1,92 @@
+import { RollupError } from 'rollup';
+import { Warning } from './options';
+import { buildExtendedLogMessage } from './log';
+import { PartialMessage } from 'esbuild';
+
+/**
+ * convert an error thrown by svelte.compile to a RollupError so that vite displays it in a user friendly way
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {RollupError} the converted error
+ */
+export function toRollupError(error: Warning & Error): RollupError {
+	const { filename, frame, start, code, name } = error;
+	const rollupError: RollupError = {
+		name, // needed otherwise sveltekit coalesce_to_error turns it into a string
+		id: filename,
+		message: buildExtendedLogMessage(error), // include filename:line:column so that it's clickable
+		frame: formatFrameForVite(frame),
+		code,
+		stack: ''
+	};
+	if (start) {
+		rollupError.loc = {
+			line: start.line,
+			column: start.column,
+			file: filename
+		};
+	}
+	return rollupError;
+}
+
+/**
+ * convert an error thrown by svelte.compile to an esbuild PartialMessage
+ * @param error a svelte compiler error, which is a mix of Warning and an error
+ * @returns {PartialMessage} the converted error
+ */
+export function toESBuildError(error: Warning & Error): PartialMessage {
+	const { filename, frame, start } = error;
+	const partialMessage: PartialMessage = {
+		text: buildExtendedLogMessage(error)
+	};
+	if (start) {
+		partialMessage.location = {
+			line: start.line,
+			column: start.column,
+			file: filename,
+			lineText: lineFromFrame(start.line, frame) // needed to get a meaningful error message on cli
+		};
+	}
+	return partialMessage;
+}
+
+/**
+ * extract line with number from codeframe
+ */
+function lineFromFrame(lineNo: number, frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	const lines = frame.split('\n');
+	const errorLine = lines.find((line) => line.trimStart().startsWith(`${lineNo}: `));
+	return errorLine ? errorLine.substring(errorLine.indexOf(': ') + 3) : '';
+}
+
+/**
+ * vite error overlay expects a specific format to show frames
+ * this reformats svelte frame (colon separated, less whitespace)
+ * to one that vite displays on overlay ( pipe separated, more whitespace)
+ * e.g.
+ * ```
+ * 1: foo
+ * 2: bar;
+ *       ^
+ * 3: baz
+ * ```
+ * to
+ * ```
+ *  1 | foo
+ *  2 | bar;
+ *         ^
+ *  3 | baz
+ * ```
+ * @see https://github.com/vitejs/vite/blob/96591bf9989529de839ba89958755eafe4c445ae/packages/vite/src/client/overlay.ts#L116
+ */
+function formatFrameForVite(frame?: string): string {
+	if (!frame) {
+		return '';
+	}
+	return frame
+		.split('\n')
+		.map((line) => (line.match(/^\s+\^/) ? '   ' + line : ' ' + line.replace(':', ' | ')))
+		.join('\n');
+}

package/src/utils/esbuild.ts

@@ -0,0 +1,99 @@
+import { promises as fs } from 'fs';
+import { compile, preprocess } from 'svelte/compiler';
+import { DepOptimizationOptions } from 'vite';
+import { Compiled } from './compile';
+import { log } from './log';
+import { CompileOptions, ResolvedOptions } from './options';
+import { toESBuildError } from './error';
+
+type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
+type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
+type EsbuildPluginBuild = Parameters<EsbuildPlugin['setup']>[0];
+
+export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
+	return {
+		name: 'vite-plugin-svelte:optimize-svelte',
+		setup(build) {
+			disableVitePrebundleSvelte(build);
+
+			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
+			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
+
+			build.onLoad({ filter: svelteFilter }, async ({ path: filename }) => {
+				const code = await fs.readFile(filename, 'utf8');
+				try {
+					const contents = await compileSvelte(options, { filename, code });
+					return { contents };
+				} catch (e) {
+					return { errors: [toESBuildError(e)] };
+				}
+			});
+		}
+	};
+}
+
+function disableVitePrebundleSvelte(build: EsbuildPluginBuild) {
+	const viteDepPrebundlePlugin = build.initialOptions.plugins?.find(
+		(v) => v.name === 'vite:dep-pre-bundle'
+	);
+
+	if (!viteDepPrebundlePlugin) return;
+
+	// Prevent vite:dep-pre-bundle from externalizing svelte files
+	const _setup = viteDepPrebundlePlugin.setup.bind(viteDepPrebundlePlugin);
+	viteDepPrebundlePlugin.setup = function (build) {
+		const _onResolve = build.onResolve.bind(build);
+		build.onResolve = function (options, callback) {
+			if (options.filter.source.includes('svelte')) {
+				options.filter = new RegExp(
+					options.filter.source.replace('|svelte', ''),
+					options.filter.flags
+				);
+			}
+			return _onResolve(options, callback);
+		};
+		return _setup(build);
+	};
+}
+
+async function compileSvelte(
+	options: ResolvedOptions,
+	{ filename, code }: { filename: string; code: string }
+): Promise<string> {
+	const compileOptions: CompileOptions = {
+		...options.compilerOptions,
+		css: true,
+		filename,
+		generate: 'dom'
+	};
+
+	let preprocessed;
+
+	if (options.preprocess) {
+		preprocessed = await preprocess(code, options.preprocess, { filename });
+		if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
+	}
+
+	const finalCode = preprocessed ? preprocessed.code : code;
+
+	const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
+		filename,
+		code: finalCode,
+		compileOptions
+	});
+
+	if (dynamicCompileOptions && log.debug.enabled) {
+		log.debug(`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`);
+	}
+
+	const finalCompileOptions = dynamicCompileOptions
+		? {
+				...compileOptions,
+				...dynamicCompileOptions
+		  }
+		: compileOptions;
+
+	const compiled = compile(finalCode, finalCompileOptions) as Compiled;
+
+	return compiled.js.code + '//# sourceMappingURL=' + compiled.js.map.toUrl();
+}

package/src/utils/log.ts

@@ -155,7 +155,7 @@ function warnBuild(w: Warning) {
 	log.warn.enabled && log.warn(buildExtendedLogMessage(w), w.frame);
 }
 
-function buildExtendedLogMessage(w: Warning) {
+export function buildExtendedLogMessage(w: Warning) {
 	const parts = [];
 	if (w.filename) {
 		parts.push(w.filename);

package/src/utils/options.ts

@@ -15,6 +15,7 @@ import {
 import path from 'path';
 import { findRootSvelteDependencies, needsOptimization, SvelteDependency } from './dependencies';
 import { createRequire } from 'module';
+import { esbuildSveltePlugin } from './esbuild';
 
 const knownOptions = new Set([
 	'configFile',
@@ -217,8 +218,6 @@ function buildOptimizeDepsForSvelte(
 	options: ResolvedOptions,
 	optimizeDeps?: DepOptimizationOptions
 ): DepOptimizationOptions {
-	// only svelte component libraries needs to be processed for optimizeDeps, js libraries work fine
-	svelteDeps = svelteDeps.filter((dep) => dep.type === 'component-library');
 	// include svelte imports for optimization unless explicitly excluded
 	const include: string[] = [];
 	const exclude: string[] = ['svelte-hmr'];
@@ -241,6 +240,20 @@ function buildOptimizeDepsForSvelte(
 		log.debug('"svelte" is excluded in optimizeDeps.exclude, skipped adding it to include.');
 	}
 
+	// If we prebundle svelte libraries, we can skip the whole prebundling dance below
+	if (options.experimental.prebundleSvelteLibraries) {
+		return {
+			include,
+			exclude,
+			esbuildOptions: {
+				plugins: [esbuildSveltePlugin(options)]
+			}
+		};
+	}
+
+	// only svelte component libraries needs to be processed for optimizeDeps, js libraries work fine
+	svelteDeps = svelteDeps.filter((dep) => dep.type === 'component-library');
+
 	const svelteDepsToExclude = Array.from(new Set(svelteDeps.map((dep) => dep.name))).filter(
 		(dep) => !isIncluded(dep)
 	);
@@ -420,6 +433,13 @@ export interface ExperimentalOptions {
 	 */
 	useVitePreprocess?: boolean;
 
+	/**
+	 * Force Vite to pre-bundle Svelte libraries
+	 *
+	 * @default false
+	 */
+	prebundleSvelteLibraries?: boolean;
+
 	/**
 	 * If a preprocessor does not provide a sourcemap, a best-effort fallback sourcemap will be provided.
 	 * This option requires `diff-match-patch` to be installed as a peer dependency.