@sveltejs/vite-plugin-svelte 1.3.0 → 1.4.0

package/src/utils/compile.ts

@@ -6,17 +6,41 @@ import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
 import { StatCollection } from './vite-plugin-svelte-stats';
+//eslint-disable-next-line node/no-missing-import
+import type { Processed } from 'svelte/types/compiler/preprocess';
+import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess';
+import path from 'path';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
+export type CompileSvelte = ReturnType<typeof _createCompileSvelte>;
+
+function mapSourcesToRelative(map: { sources?: string[] }, filename: string) {
+	// sourcemap sources are relative to the sourcemap itself
+	// assume the sourcemap location is the same as filename and turn absolute paths to relative
+	// to avoid leaking fs information like vite root
+	if (map?.sources) {
+		map.sources = map.sources.map((s) => {
+			if (path.isAbsolute(s)) {
+				const relative = path.relative(filename, s);
+				// empty string a source is not allowed, use simple filename
+				return relative === '' ? path.basename(filename) : relative;
+			} else {
+				return s;
+			}
+		});
+	}
+}
+
 const _createCompileSvelte = (makeHot: Function) => {
 	let stats: StatCollection | undefined;
+	const devStylePreprocessor = createInjectScopeEverythingRulePreprocessorGroup();
 	return async function compileSvelte(
 		svelteRequest: SvelteRequest,
 		code: string,
 		options: Partial<ResolvedOptions>
 	): Promise<CompileData> {
-		const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
+		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
 		const { emitCss = true } = options;
 		const dependencies = [];
 
@@ -47,7 +71,7 @@ const _createCompileSvelte = (makeHot: Function) => {
 
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
-			filename,
+			filename: normalizedFilename, // use normalized here to avoid bleeding absolute fs path
 			generate: ssr ? 'ssr' : 'dom',
 			format: 'esm'
 		};
@@ -65,10 +89,20 @@ const _createCompileSvelte = (makeHot: Function) => {
 		}
 
 		let preprocessed;
-
-		if (options.preprocess) {
+		let preprocessors = options.preprocess;
+		if (!options.isBuild && options.emitCss && options.hot) {
+			// inject preprocessor that ensures css hmr works better
+			if (!Array.isArray(preprocessors)) {
+				preprocessors = preprocessors
+					? [preprocessors, devStylePreprocessor]
+					: [devStylePreprocessor];
+			} else {
+				preprocessors = preprocessors.concat(devStylePreprocessor);
+			}
+		}
+		if (preprocessors) {
 			try {
-				preprocessed = await preprocess(code, options.preprocess, { filename });
+				preprocessed = await preprocess(code, preprocessors, { filename }); // full filename here so postcss works
 			} catch (e) {
 				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 				throw e;
@@ -77,6 +111,13 @@ const _createCompileSvelte = (makeHot: Function) => {
 			if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies);
 			if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
 		}
+		if (typeof preprocessed?.map === 'object') {
+			mapSourcesToRelative(preprocessed?.map, filename);
+		}
+		if (raw && svelteRequest.query.type === 'preprocessed') {
+			// shortcut
+			return { preprocessed: preprocessed ?? { code } } as CompileData;
+		}
 		const finalCode = preprocessed ? preprocessed.code : code;
 		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
 			filename,
@@ -100,24 +141,29 @@ const _createCompileSvelte = (makeHot: Function) => {
 		if (endStat) {
 			endStat();
 		}
+		mapSourcesToRelative(compiled.js?.map, filename);
+		mapSourcesToRelative(compiled.css?.map, filename);
+		if (!raw) {
+			// wire css import and code for hmr
+			const hasCss = compiled.css?.code?.trim().length > 0;
+			// compiler might not emit css with mode none or it may be empty
+			if (emitCss && hasCss) {
+				// TODO properly update sourcemap?
+				compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
+			}
 
-		const hasCss = compiled.css?.code?.trim().length > 0;
-		// compiler might not emit css with mode none or it may be empty
-		if (emitCss && hasCss) {
-			// TODO properly update sourcemap?
-			compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
-		}
-
-		// only apply hmr when not in ssr context and hot options are set
-		if (!ssr && makeHot) {
-			compiled.js.code = makeHot({
-				id: filename,
-				compiledCode: compiled.js.code,
-				hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
-				compiled,
-				originalCode: code,
-				compileOptions: finalCompileOptions
-			});
+			// only apply hmr when not in ssr context and hot options are set
+			if (!ssr && makeHot) {
+				compiled.js.code = makeHot({
+					id: filename,
+					compiledCode: compiled.js.code,
+					//@ts-expect-error hot isn't a boolean at this point
+					hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
+					compiled,
+					originalCode: code,
+					compileOptions: finalCompileOptions
+				});
+			}
 		}
 
 		compiled.js.dependencies = dependencies;
@@ -129,7 +175,8 @@ const _createCompileSvelte = (makeHot: Function) => {
 			// @ts-ignore
 			compiled,
 			ssr,
-			dependencies
+			dependencies,
+			preprocessed: preprocessed ?? { code }
 		};
 	};
 };
@@ -190,4 +237,5 @@ export interface CompileData {
 	compiled: Compiled;
 	ssr: boolean | undefined;
 	dependencies: string[];
+	preprocessed: Processed;
 }

package/src/utils/id.ts

@@ -3,19 +3,39 @@ import { createFilter } from 'vite';
 import { Arrayable, ResolvedOptions } from './options';
 import { normalizePath } from 'vite';
 import * as fs from 'fs';
+//eslint-disable-next-line node/no-missing-import
+import { CompileOptions } from 'svelte/types/compiler/interfaces';
+import { log } from './log';
 
 const VITE_FS_PREFIX = '/@fs/';
 const IS_WINDOWS = process.platform === 'win32';
 
-export type SvelteQueryTypes = 'style' | 'script';
+const SUPPORTED_COMPILER_OPTIONS = [
+	'generate',
+	'dev',
+	'css',
+	'hydratable',
+	'customElement',
+	'immutable',
+	'enableSourcemap'
+];
+const TYPES_WITH_COMPILER_OPTIONS = ['style', 'script', 'all'];
+
+export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all';
 
 export interface RequestQuery {
 	// our own
 	svelte?: boolean;
 	type?: SvelteQueryTypes;
+	sourcemap?: boolean;
+	compilerOptions?: Pick<
+		CompileOptions,
+		'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' | 'enableSourcemap'
+	>;
 	// vite specific
 	url?: boolean;
 	raw?: boolean;
+	direct?: boolean;
 }
 
 export interface SvelteRequest {
@@ -26,6 +46,7 @@ export interface SvelteRequest {
 	query: RequestQuery;
 	timestamp: number;
 	ssr: boolean;
+	raw: boolean;
 }
 
 function splitId(id: string) {
@@ -44,10 +65,12 @@ function parseToSvelteRequest(
 	ssr: boolean
 ): SvelteRequest | undefined {
 	const query = parseRequestQuery(rawQuery);
-	if (query.url || query.raw) {
+	const rawOrDirect = !!(query.raw || query.direct);
+	if (query.url || (!query.svelte && rawOrDirect)) {
 		// skip requests with special vite tags
 		return;
 	}
+	const raw = rawOrDirect;
 	const normalizedFilename = normalize(filename, root);
 	const cssId = createVirtualImportId(filename, root, 'style');
 
@@ -58,7 +81,8 @@ function parseToSvelteRequest(
 		cssId,
 		query,
 		timestamp,
-		ssr
+		ssr,
+		raw
 	};
 }
 
@@ -86,6 +110,34 @@ function parseRequestQuery(rawQuery: string): RequestQuery {
 			query[key] = true;
 		}
 	}
+	const compilerOptions = query.compilerOptions;
+	if (compilerOptions) {
+		if (!((query.raw || query.direct) && TYPES_WITH_COMPILER_OPTIONS.includes(query.type))) {
+			throw new Error(
+				`Invalid compilerOptions in query ${rawQuery}. CompilerOptions are only supported for raw or direct queries with type in "${TYPES_WITH_COMPILER_OPTIONS.join(
+					', '
+				)}" e.g. '?svelte&raw&type=script&compilerOptions={"generate":"ssr","dev":false}`
+			);
+		}
+		try {
+			const parsed = JSON.parse(compilerOptions);
+			const invalid = Object.keys(parsed).filter(
+				(key) => !SUPPORTED_COMPILER_OPTIONS.includes(key)
+			);
+			if (invalid.length) {
+				throw new Error(
+					`Invalid compilerOptions in query ${rawQuery}: ${invalid.join(
+						', '
+					)}. Supported: ${SUPPORTED_COMPILER_OPTIONS.join(', ')}`
+				);
+			}
+			query.compilerOptions = parsed;
+		} catch (e) {
+			log.error('failed to parse request query compilerOptions', e);
+			throw e;
+		}
+	}
+
 	return query as RequestQuery;
 }
 

package/src/utils/load-raw.ts

@@ -0,0 +1,132 @@
+import { ResolvedOptions } from './options';
+import fs from 'fs';
+import { toRollupError } from './error';
+import { log } from './log';
+import type { SvelteRequest } from './id';
+import { type CompileData, CompileSvelte } from './compile';
+
+/**
+ * utility function to compile ?raw and ?direct requests in load hook
+ */
+export async function loadRaw(
+	svelteRequest: SvelteRequest,
+	compileSvelte: CompileSvelte,
+	options: ResolvedOptions
+) {
+	const { id, filename, query } = svelteRequest;
+
+	// raw svelte subrequest, compile on the fly and return requested subpart
+	let compileData;
+	const source = fs.readFileSync(filename, 'utf-8');
+	try {
+		//avoid compileSvelte doing extra ssr stuff unless requested
+		svelteRequest.ssr = query.compilerOptions?.generate === 'ssr';
+		const type = query.type;
+		compileData = await compileSvelte(svelteRequest, source, {
+			...options,
+			// don't use dynamic vite-plugin-svelte defaults here to ensure stable result between ssr,dev and build
+			compilerOptions: {
+				dev: false,
+				css: false,
+				hydratable: false,
+				enableSourcemap: query.sourcemap
+					? {
+							js: type === 'script' || type === 'all',
+							css: type === 'style' || type === 'all'
+					  }
+					: false,
+				...svelteRequest.query.compilerOptions
+			},
+			hot: false,
+			emitCss: true
+		});
+	} catch (e) {
+		throw toRollupError(e, options);
+	}
+	let result;
+	if (query.type === 'style') {
+		result = compileData.compiled.css;
+	} else if (query.type === 'script') {
+		result = compileData.compiled.js;
+	} else if (query.type === 'preprocessed') {
+		result = compileData.preprocessed;
+	} else if (query.type === 'all' && query.raw) {
+		return allToRawExports(compileData, source);
+	} else {
+		throw new Error(
+			`invalid "type=${query.type}" in ${id}. supported are script, style, preprocessed, all`
+		);
+	}
+	if (query.direct) {
+		const supportedDirectTypes = ['script', 'style'];
+		if (!supportedDirectTypes.includes(query.type)) {
+			throw new Error(
+				`invalid "type=${
+					query.type
+				}" combined with direct in ${id}. supported are: ${supportedDirectTypes.join(', ')}`
+			);
+		}
+		log.debug(`load returns direct result for ${id}`);
+		let directOutput = result.code;
+		if (query.sourcemap && result.map?.toUrl) {
+			const map = `sourceMappingURL=${result.map.toUrl()}`;
+			if (query.type === 'style') {
+				directOutput += `\n\n/*# ${map} */\n`;
+			} else if (query.type === 'script') {
+				directOutput += `\n\n//# ${map}\n`;
+			}
+		}
+		return directOutput;
+	} else if (query.raw) {
+		log.debug(`load returns raw result for ${id}`);
+		return toRawExports(result);
+	} else {
+		throw new Error(`invalid raw mode in ${id}, supported are raw, direct`);
+	}
+}
+
+/**
+ * turn compileData and source into a flat list of raw exports
+ *
+ * @param compileData
+ * @param source
+ */
+function allToRawExports(compileData: CompileData, source: string) {
+	// flatten CompileData
+	const exports: Partial<CompileData & { source: string }> = {
+		...compileData,
+		...compileData.compiled,
+		source
+	};
+	delete exports.compiled;
+	delete exports.filename; // absolute path, remove to avoid it in output
+	return toRawExports(exports);
+}
+
+/**
+ * turn object into raw exports.
+ *
+ * every prop is returned as a const export, and if prop 'code' exists it is additionally added as default export
+ *
+ * eg {'foo':'bar','code':'baz'} results in
+ *
+ *  ```js
+ *  export const code='baz'
+ *  export const foo='bar'
+ *  export default code
+ *  ```
+ * @param object
+ */
+function toRawExports(object: object) {
+	let exports =
+		Object.entries(object)
+			//eslint-disable-next-line no-unused-vars
+			.filter(([key, value]) => typeof value !== 'function') // preprocess output has a toString function that's enumerable
+			.sort(([a], [b]) => (a < b ? -1 : a === b ? 0 : 1))
+			.map(([key, value]) => `export const ${key}=${JSON.stringify(value)}`)
+			.join('\n') + '\n';
+	if (Object.prototype.hasOwnProperty.call(object, 'code')) {
+		exports += `export default code\n`;
+	}
+	return exports;
+}

package/src/utils/options.ts

@@ -315,6 +315,9 @@ function handleDeprecatedOptions(options: ResolvedOptions) {
 			'experimental.prebundleSvelteLibraries is no longer experimental and has moved to prebundleSvelteLibraries'
 		);
 	}
+	if ((options.experimental as any)?.generateMissingPreprocessorSourcemaps) {
+		log.warn('experimental.generateMissingPreprocessorSourcemaps has been removed.');
+	}
 }
 
 // vite passes unresolved `root`option to config hook but we need the resolved value, so do it here
@@ -532,6 +535,15 @@ function buildExtraConfigForSvelte(config: UserConfig) {
 }
 
 export function patchResolvedViteConfig(viteConfig: ResolvedConfig, options: ResolvedOptions) {
+	if (options.preprocess) {
+		for (const preprocessor of arraify(options.preprocess)) {
+			if (preprocessor.style && '__resolvedConfig' in preprocessor.style) {
+				preprocessor.style.__resolvedConfig = viteConfig;
+			}
+		}
+	}
+
+	// replace facade esbuild plugin with a real one
 	const facadeEsbuildSveltePlugin = viteConfig.optimizeDeps.esbuildOptions?.plugins?.find(
 		(plugin) => plugin.name === facadeEsbuildSveltePluginName
 	);
@@ -540,6 +552,10 @@ export function patchResolvedViteConfig(viteConfig: ResolvedConfig, options: Res
 	}
 }
 
+function arraify<T>(value: T | T[]): T[] {
+	return Array.isArray(value) ? value : [value];
+}
+
 export type Options = Omit<SvelteOptions, 'vitePlugin'> & PluginOptionsInline;
 
 interface PluginOptionsInline extends PluginOptions {
@@ -680,15 +696,6 @@ export interface ExperimentalOptions {
 	 */
 	useVitePreprocess?: 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.
-	 *
-	 * @see https://github.com/google/diff-match-patch
-	 * @default false
-	 */
-	generateMissingPreprocessorSourcemaps?: boolean;
-
 	/**
 	 * A function to update `compilerOptions` before compilation
 	 *

package/src/utils/preprocess.ts

@@ -1,93 +1,17 @@
-import * as vite from 'vite';
-import type { ESBuildOptions, ResolvedConfig, Plugin } from 'vite';
+import type { ResolvedConfig, Plugin } from 'vite';
 import MagicString from 'magic-string';
 import { preprocess } from 'svelte/compiler';
-import { Preprocessor, PreprocessorGroup, Processed, ResolvedOptions } from './options';
+import { PreprocessorGroup, ResolvedOptions } from './options';
 import { log } from './log';
-import { buildSourceMap } from './sourcemap';
 import path from 'path';
-
-const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss'];
-
-const supportedScriptLangs = ['ts'];
-
-function createViteScriptPreprocessor(): Preprocessor {
-	return async ({ attributes, content, filename = '' }) => {
-		const lang = attributes.lang as string;
-		if (!supportedScriptLangs.includes(lang)) return;
-		const transformResult = await vite.transformWithEsbuild(content, filename, {
-			loader: lang as ESBuildOptions['loader'],
-			target: 'esnext',
-			tsconfigRaw: {
-				compilerOptions: {
-					// svelte typescript needs this flag to work with type imports
-					importsNotUsedAsValues: 'preserve',
-					preserveValueImports: true
-				}
-			}
-		});
-		return {
-			code: transformResult.code,
-			map: transformResult.map
-		};
-	};
-}
-
-function createViteStylePreprocessor(config: ResolvedConfig): Preprocessor {
-	const transform = getCssTransformFn(config);
-	return async ({ attributes, content, filename = '' }) => {
-		const lang = attributes.lang as string;
-		if (!supportedStyleLangs.includes(lang)) return;
-		const moduleId = `${filename}.${lang}`;
-		const result = await transform(content, moduleId);
-		// patch sourcemap source to point back to original filename
-		if (result.map?.sources?.[0] === moduleId) {
-			result.map.sources[0] = path.basename(filename);
-		}
-		return {
-			code: result.code,
-			map: result.map ?? undefined
-		};
-	};
-}
-
-// eslint-disable-next-line no-unused-vars
-type CssTransform = (code: string, filename: string) => Promise<{ code: string; map?: any }>;
-
-function getCssTransformFn(config: ResolvedConfig): CssTransform {
-	// API is only available in Vite 3.2 and above
-	// TODO: Remove Vite plugin hack when bump peer dep to Vite 3.2
-	if (vite.preprocessCSS) {
-		return async (code, filename) => {
-			return vite.preprocessCSS(code, filename, config);
-		};
-	} else {
-		const pluginName = 'vite:css';
-		const plugin = config.plugins.find((p) => p.name === pluginName);
-		if (!plugin) {
-			throw new Error(`failed to find plugin ${pluginName}`);
-		}
-		if (!plugin.transform) {
-			throw new Error(`plugin ${pluginName} has no transform`);
-		}
-		// @ts-expect-error
-		return plugin.transform.bind(null);
-	}
-}
+import { vitePreprocess } from '../preprocess';
 
 function createVitePreprocessorGroup(config: ResolvedConfig): PreprocessorGroup {
 	return {
 		markup({ content, filename }) {
-			return preprocess(
-				content,
-				{
-					script: createViteScriptPreprocessor(),
-					style: createViteStylePreprocessor(config)
-				},
-				{ filename }
-			);
+			return preprocess(content, vitePreprocess({ style: config }), { filename });
 		}
-	} as PreprocessorGroup;
+	};
 }
 
 /**
@@ -96,7 +20,7 @@ function createVitePreprocessorGroup(config: ResolvedConfig): PreprocessorGroup
  *
  * only used during dev with enabled css hmr
  */
-function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
+export function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 	return {
 		style({ content, filename }) {
 			const s = new MagicString(content);
@@ -117,7 +41,9 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 	const appendPreprocessors: PreprocessorGroup[] = [];
 
 	if (options.experimental?.useVitePreprocess) {
-		log.debug('adding vite preprocessor');
+		log.warn(
+			'`experimental.useVitePreprocess` is deprecated. Use the `vitePreprocess()` preprocessor instead. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.'
+		);
 		prependPreprocessors.push(createVitePreprocessorGroup(config));
 	}
 
@@ -175,10 +101,6 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 		appendPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.api.sveltePreprocess));
 	}
 
-	if (options.hot && options.emitCss) {
-		appendPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
-	}
-
 	return { prependPreprocessors, appendPreprocessors };
 }
 
@@ -194,67 +116,4 @@ export function addExtraPreprocessors(options: ResolvedOptions, config: Resolved
 			options.preprocess = [...prependPreprocessors, options.preprocess, ...appendPreprocessors];
 		}
 	}
-	const generateMissingSourceMaps = !!options.experimental?.generateMissingPreprocessorSourcemaps;
-	if (options.preprocess && generateMissingSourceMaps) {
-		options.preprocess = Array.isArray(options.preprocess)
-			? options.preprocess.map((p, i) => validateSourceMapOutputWrapper(p, i))
-			: validateSourceMapOutputWrapper(options.preprocess, 0);
-	}
-}
-
-function validateSourceMapOutputWrapper(group: PreprocessorGroup, i: number): PreprocessorGroup {
-	const wrapper: PreprocessorGroup = {};
-
-	for (const [processorType, processorFn] of Object.entries(group) as Array<
-		// eslint-disable-next-line no-unused-vars
-		[keyof PreprocessorGroup, (options: { filename?: string; content: string }) => Processed]
-	>) {
-		wrapper[processorType] = async (options) => {
-			const result = await processorFn(options);
-
-			if (result && result.code !== options.content) {
-				let invalidMap = false;
-				if (!result.map) {
-					invalidMap = true;
-					log.warn.enabled &&
-						log.warn.once(
-							`preprocessor at index ${i} did not return a sourcemap for ${processorType} transform`,
-							{
-								filename: options.filename,
-								type: processorType,
-								processor: processorFn.toString()
-							}
-						);
-				} else if ((result.map as any)?.mappings === '') {
-					invalidMap = true;
-					log.warn.enabled &&
-						log.warn.once(
-							`preprocessor at index ${i} returned an invalid empty sourcemap for ${processorType} transform`,
-							{
-								filename: options.filename,
-								type: processorType,
-								processor: processorFn.toString()
-							}
-						);
-				}
-				if (invalidMap) {
-					try {
-						const map = await buildSourceMap(options.content, result.code, options.filename);
-						if (map) {
-							log.debug.enabled &&
-								log.debug(
-									`adding generated sourcemap to preprocesor result for ${options.filename}`
-								);
-							result.map = map;
-						}
-					} catch (e) {
-						log.error(`failed to build sourcemap`, e);
-					}
-				}
-			}
-			return result;
-		};
-	}
-
-	return wrapper;
 }