@sveltejs/vite-plugin-svelte 1.3.1 → 2.0.0-beta.0

package/package.json

@@ -1,24 +1,19 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.3.1",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
     "dist",
     "src",
-    "README.md",
-    "LICENSE",
-    "package.json"
+    "*.d.ts"
   ],
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json",
     "./src/ui/*": "./src/ui/*"
@@ -45,33 +40,25 @@
     "debug": "^4.3.4",
     "deepmerge": "^4.2.2",
     "kleur": "^4.1.5",
-    "magic-string": "^0.26.7",
+    "magic-string": "^0.27.0",
     "svelte-hmr": "^0.15.1",
     "vitefu": "^0.2.2"
   },
   "peerDependencies": {
-    "diff-match-patch": "^1.0.5",
     "svelte": "^3.44.0",
-    "vite": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "diff-match-patch": {
-      "optional": true
-    }
+    "vite": "^4.0.0-beta.1"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "@types/diff-match-patch": "^1.0.32",
-    "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.15.14",
+    "esbuild": "^0.15.18",
     "rollup": "^2.79.1",
     "svelte": "^3.53.1",
     "tsup": "^6.5.0",
-    "vite": "^3.2.3"
+    "vite": "^4.0.0-beta.1"
   },
   "scripts": {
     "dev": "pnpm build:ci --sourcemap --watch src",
-    "build:ci": "rimraf dist && tsup-node src/index.ts --format esm,cjs --no-splitting --shims",
+    "build:ci": "rimraf dist && tsup-node src/index.ts --format esm",
     "build": "pnpm build:ci --dts --sourcemap"
   }
 }

package/src/handle-hot-update.ts

@@ -20,7 +20,7 @@ export async function handleHotUpdate(
 		log.debug(`handleHotUpdate called before initial transform for ${svelteRequest.id}`);
 		return;
 	}
-	const { read, server } = ctx;
+	const { read, server, modules } = ctx;
 
 	const cachedJS = cache.getJS(svelteRequest);
 	const cachedCss = cache.getCSS(svelteRequest);
@@ -35,41 +35,41 @@ export async function handleHotUpdate(
 		throw e;
 	}
 
-	const affectedModules = new Set<ModuleNode | undefined>();
+	const affectedModules = [...modules];
 
-	const cssModule = server.moduleGraph.getModuleById(svelteRequest.cssId);
-	const mainModule = server.moduleGraph.getModuleById(svelteRequest.id);
-	const cssUpdated = cssModule && cssChanged(cachedCss, compileData.compiled.css);
-	if (cssUpdated) {
-		log.debug(`handleHotUpdate css changed for ${svelteRequest.cssId}`);
-		affectedModules.add(cssModule);
+	const cssIdx = modules.findIndex((m) => m.id === svelteRequest.cssId);
+	if (cssIdx > -1) {
+		const cssUpdated = cssChanged(cachedCss, compileData.compiled.css);
+		if (!cssUpdated) {
+			log.debug(`skipping unchanged css for ${svelteRequest.cssId}`);
+			affectedModules.splice(cssIdx, 1);
+		}
 	}
-	const jsUpdated =
-		mainModule && jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
-	if (jsUpdated) {
-		log.debug(`handleHotUpdate js changed for ${svelteRequest.id}`);
-		affectedModules.add(mainModule);
+	const jsIdx = modules.findIndex((m) => m.id === svelteRequest.id);
+	if (jsIdx > -1) {
+		const jsUpdated = jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
+		if (!jsUpdated) {
+			log.debug(`skipping unchanged js for ${svelteRequest.id}`);
+			affectedModules.splice(jsIdx, 1);
+			// transform won't be called, log warnings here
+			logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
+		}
 	}
 
-	if (!jsUpdated) {
-		// transform won't be called, log warnings here
-		logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
-	}
-
-	const result = [...affectedModules].filter(Boolean) as ModuleNode[];
-
 	// TODO is this enough? see also: https://github.com/vitejs/vite/issues/2274
-	const ssrModulesToInvalidate = result.filter((m) => !!m.ssrTransformResult);
+	const ssrModulesToInvalidate = affectedModules.filter((m) => !!m.ssrTransformResult);
 	if (ssrModulesToInvalidate.length > 0) {
 		log.debug(`invalidating modules ${ssrModulesToInvalidate.map((m) => m.id).join(', ')}`);
 		ssrModulesToInvalidate.forEach((moduleNode) => server.moduleGraph.invalidateModule(moduleNode));
 	}
-	if (result.length > 0) {
+	if (affectedModules.length > 0) {
 		log.debug(
-			`handleHotUpdate for ${svelteRequest.id} result: ${result.map((m) => m.id).join(', ')}`
+			`handleHotUpdate for ${svelteRequest.id} result: ${affectedModules
+				.map((m) => m.id)
+				.join(', ')}`
 		);
 	}
-	return result;
+	return affectedModules;
 }
 
 function cssChanged(prev?: Code, next?: Code): boolean {

package/src/index.ts

@@ -4,8 +4,8 @@ import { HmrContext, ModuleNode, Plugin, ResolvedConfig, UserConfig } from 'vite
 import { isDepExcluded } from 'vitefu';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
-import { CompileData, createCompileSvelte } from './utils/compile';
-import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
+import { type CompileSvelte, createCompileSvelte } from './utils/compile';
+import { buildIdParser, IdParser } from './utils/id';
 import {
 	buildExtraViteConfig,
 	validateInlineOptions,
@@ -23,6 +23,7 @@ import { toRollupError } from './utils/error';
 import { saveSvelteMetadata } from './utils/optimizer';
 import { svelteInspector } from './ui/inspector/plugin';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
+import { loadRaw } from './utils/load-raw';
 
 interface PluginAPI {
 	/**
@@ -45,11 +46,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 	let options: ResolvedOptions;
 	let viteConfig: ResolvedConfig;
 	/* eslint-disable no-unused-vars */
-	let compileSvelte: (
-		svelteRequest: SvelteRequest,
-		code: string,
-		options: Partial<ResolvedOptions>
-	) => Promise<CompileData>;
+	let compileSvelte: CompileSvelte;
 	/* eslint-enable no-unused-vars */
 
 	let resolvedSvelteSSR: Promise<PartialResolvedId | null>;
@@ -103,23 +100,26 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				setupWatchers(options, cache, requestParser);
 			},
 
-			load(id, opts) {
+			async load(id, opts) {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(id, !!ssr);
 				if (svelteRequest) {
-					const { filename, query } = svelteRequest;
-					// virtual css module
-					if (query.svelte && query.type === 'style') {
-						const css = cache.getCSS(svelteRequest);
-						if (css) {
-							log.debug(`load returns css for ${filename}`);
-							return css;
+					const { filename, query, raw } = svelteRequest;
+					if (raw) {
+						return loadRaw(svelteRequest, compileSvelte, options);
+					} else {
+						if (query.svelte && query.type === 'style') {
+							const css = cache.getCSS(svelteRequest);
+							if (css) {
+								log.debug(`load returns css for ${filename}`);
+								return css;
+							}
+						}
+						// prevent vite asset plugin from loading files as url that should be compiled in transform
+						if (viteConfig.assetsInclude(filename)) {
+							log.debug(`load returns raw content for ${filename}`);
+							return fs.readFileSync(filename, 'utf-8');
 						}
-					}
-					// prevent vite asset plugin from loading files as url that should be compiled in transform
-					if (viteConfig.assetsInclude(filename)) {
-						log.debug(`load returns raw content for ${filename}`);
-						return fs.readFileSync(filename, 'utf-8');
 					}
 				}
 			},
@@ -128,14 +128,12 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(importee, ssr);
 				if (svelteRequest?.query.svelte) {
-					if (svelteRequest.query.type === 'style') {
+					if (svelteRequest.query.type === 'style' && !svelteRequest.raw) {
 						// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
 						// see https://github.com/sveltejs/vite-plugin-svelte/issues/14
 						log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
 						return svelteRequest.cssId;
 					}
-					log.debug(`resolveId resolved ${importee}`);
-					return importee; // query with svelte tag, an id we generated, no need for further analysis
 				}
 
 				if (ssr && importee === 'svelte') {
@@ -188,7 +186,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 			async transform(code, id, opts) {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(id, ssr);
-				if (!svelteRequest || svelteRequest.query.svelte) {
+				if (!svelteRequest || svelteRequest.query.type === 'style' || svelteRequest.raw) {
 					return;
 				}
 				let compileData;
@@ -238,6 +236,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 	return plugins.filter(Boolean);
 }
 
+export { vitePreprocess } from './preprocess';
 export { loadSvelteConfig } from './utils/load-svelte-config';
 
 export {

package/src/preprocess.ts

@@ -0,0 +1,114 @@
+import path from 'path';
+import * as vite from 'vite';
+import type { ESBuildOptions, ResolvedConfig } from 'vite';
+// eslint-disable-next-line node/no-missing-import
+import type { Preprocessor, PreprocessorGroup } from 'svelte/types/compiler/preprocess';
+
+const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss', 'sss'];
+const supportedScriptLangs = ['ts'];
+
+export function vitePreprocess(opts?: {
+	script?: boolean;
+	style?: boolean | vite.InlineConfig | vite.ResolvedConfig;
+}) {
+	const preprocessor: PreprocessorGroup = {};
+	if (opts?.script !== false) {
+		preprocessor.script = viteScript().script;
+	}
+	if (opts?.style !== false) {
+		const styleOpts = typeof opts?.style == 'object' ? opts?.style : undefined;
+		preprocessor.style = viteStyle(styleOpts).style;
+	}
+	return preprocessor;
+}
+
+function viteScript(): { script: Preprocessor } {
+	return {
+		async script({ 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 viteStyle(config: vite.InlineConfig | vite.ResolvedConfig = {}): {
+	style: Preprocessor;
+} {
+	let transform: CssTransform;
+	const style: Preprocessor = async ({ attributes, content, filename = '' }) => {
+		const lang = attributes.lang as string;
+		if (!supportedStyleLangs.includes(lang)) return;
+		if (!transform) {
+			let resolvedConfig: vite.ResolvedConfig;
+			// @ts-expect-error special prop added if running in v-p-s
+			if (style.__resolvedConfig) {
+				// @ts-expect-error
+				resolvedConfig = style.__resolvedConfig;
+			} else if (isResolvedConfig(config)) {
+				resolvedConfig = config;
+			} else {
+				resolvedConfig = await vite.resolveConfig(
+					config,
+					process.env.NODE_ENV === 'production' ? 'build' : 'serve'
+				);
+			}
+			transform = getCssTransformFn(resolvedConfig);
+		}
+		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
+		};
+	};
+	// @ts-expect-error tag so can be found by v-p-s
+	style.__resolvedConfig = null;
+	return { style };
+}
+
+// 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);
+	}
+}
+
+function isResolvedConfig(config: any): config is vite.ResolvedConfig {
+	return !!config.inlineConfig;
+}

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;
 }