@rsvelte/vite-plugin-svelte 0.1.0

package/src/utils/compile.js

@@ -0,0 +1,152 @@
+import * as svelte from '@rsvelte/compiler';
+import { safeBase64Hash } from './hash.js';
+import { log } from './log.js';
+
+import { mapToRelative } from './sourcemaps.js';
+import { enhanceCompileError } from './error.js';
+
+// TODO this is a patched version of https://github.com/sveltejs/vite-plugin-svelte/pull/796/files#diff-3bce0b33034aad4b35ca094893671f7e7ddf4d27254ae7b9b0f912027a001b15R10
+// which is closer to the other regexes in at least not falling into commented script
+// but ideally would be shared exactly with svelte and other tools that use it
+const scriptLangRE =
+	/<!--[^]*?-->|<script\s+(?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=(["'])?([^"' >]+)\1[^>]*>/g;
+
+/**
+ * @returns {import('../types/compile.d.ts').CompileSvelte}
+ */
+export function createCompileSvelte() {
+	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+	let stats;
+	/** @type {import('../types/compile.d.ts').CompileSvelte} */
+	return async function compileSvelte(svelteRequest, code, options, sourcemap) {
+		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
+		const { emitCss = true } = options;
+		/** @type {import('@rsvelte/compiler').Warning[]} */
+		const warnings = [];
+
+		if (options.stats) {
+			if (options.isBuild) {
+				if (!stats) {
+					// build is either completely ssr or csr, create stats collector on first compile
+					// it is then finished in the buildEnd hook.
+					stats = options.stats.startCollection(`${ssr ? 'ssr' : 'dom'} compile`, {
+						logInProgress: () => false
+					});
+				}
+			} else {
+				// dev time ssr, it's a ssr request and there are no stats, assume new page load and start collecting
+				if (ssr && !stats) {
+					stats = options.stats.startCollection('ssr compile');
+				}
+				// stats are being collected but this isn't an ssr request, assume page loaded and stop collecting
+				if (!ssr && stats) {
+					stats.finish();
+					stats = undefined;
+				}
+				// TODO find a way to trace dom compile during dev
+				// problem: we need to call finish at some point but have no way to tell if page load finished
+				// also they for hmr updates too
+			}
+		}
+
+		/** @type {import('@rsvelte/compiler').CompileOptions} */
+		const compileOptions = {
+			...options.compilerOptions,
+			filename,
+			generate: ssr ? 'server' : 'client'
+		};
+
+		let finalCode = code;
+		if (compileOptions.hmr && options.emitCss) {
+			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
+			compileOptions.cssHash = () => hash;
+			const closeStylePos = code.lastIndexOf('</style>');
+			if (closeStylePos > -1) {
+				// inject rule that forces compile to attach scope class to every node in the template
+				// this reduces the amount of js hot updates when editing css in .svelte files
+				finalCode = finalCode.slice(0, closeStylePos) + ' *{}' + finalCode.slice(closeStylePos);
+			}
+		}
+
+		const dynamicCompileOptions = await options?.dynamicCompileOptions?.({
+			filename,
+			code: finalCode,
+			compileOptions
+		});
+		if (dynamicCompileOptions && log.debug.enabled) {
+			log.debug(
+				`dynamic compile options for  ${filename}: ${JSON.stringify(dynamicCompileOptions)}`,
+				undefined,
+				'compile'
+			);
+		}
+		const finalCompileOptions = dynamicCompileOptions
+			? {
+					...compileOptions,
+					...dynamicCompileOptions
+				}
+			: compileOptions;
+		if (sourcemap) {
+			finalCompileOptions.sourcemap = sourcemap;
+		}
+		const endStat = stats?.start(filename);
+		/** @type {import('@rsvelte/compiler').CompileResult} */
+		let compiled;
+		try {
+			compiled = svelte.compile(finalCode, { ...finalCompileOptions, filename });
+
+			// patch output with partial accept until svelte does it
+			// TODO remove later
+			if (
+				options.server?.config.experimental.hmrPartialAccept &&
+				compiled.js.code.includes('import.meta.hot.accept(')
+			) {
+				compiled.js.code = compiled.js.code.replaceAll(
+					'import.meta.hot.accept(',
+					'import.meta.hot.acceptExports(["default"],'
+				);
+			}
+		} catch (e) {
+			enhanceCompileError(e, code, options.preprocess);
+			throw e;
+		}
+
+		if (endStat) {
+			endStat();
+		}
+		mapToRelative(compiled.js?.map, filename);
+		mapToRelative(compiled.css?.map, filename);
+		if (warnings.length) {
+			if (!compiled.warnings) {
+				compiled.warnings = [];
+			}
+			compiled.warnings.push(...warnings);
+		}
+		if (!raw) {
+			// wire css import and code for hmr
+			const hasCss = compiled.css?.code?.trim()?.length ?? 0 > 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`;
+			}
+		}
+
+		let lang = 'js';
+		for (const match of code.matchAll(scriptLangRE)) {
+			if (match[2]) {
+				lang = match[2];
+				break;
+			}
+		}
+
+		return {
+			filename,
+			normalizedFilename,
+			cssId,
+			lang,
+			compiled,
+			ssr
+		};
+	};
+}

package/src/utils/constants.js

@@ -0,0 +1,36 @@
+import { createRequire } from 'node:module';
+
+const sveltePkg = createRequire(import.meta.url)('svelte/package.json');
+
+// list of svelte runtime dependencies to optimize together with svelte itself
+export const SVELTE_RUNTIME_DEPENDENCIES = [
+	'clsx' // avoids dev server restart after page load with npm + vite6 (see #1067)
+].filter((dep) => !!sveltePkg.dependencies?.[dep]);
+
+export const SVELTE_IMPORTS = Object.entries(sveltePkg.exports)
+	.map(([name, config]) => {
+		// ignore type only
+		if (typeof config === 'object' && Object.keys(config).length === 1 && config.types) {
+			return '';
+		}
+		// ignore names
+		if (name === './package.json' || name === './compiler') {
+			return '';
+		}
+		return name.replace(/^\./, 'svelte');
+	})
+	.filter((s) => s.length > 0);
+
+export const SVELTE_EXPORT_CONDITIONS = ['svelte'];
+
+export const FAQ_LINK_MISSING_EXPORTS_CONDITION =
+	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition';
+
+export const LINK_TRANSFORM_WITH_PLUGIN =
+	'https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/advanced-usage.md#transform-svelte-files-with-vite-plugins';
+
+export const DEFAULT_SVELTE_EXT = ['.svelte'];
+export const DEFAULT_SVELTE_MODULE_INFIX = ['.svelte.'];
+export const DEFAULT_SVELTE_MODULE_EXT = ['.js', '.ts'];
+
+export const SVELTE_VIRTUAL_STYLE_ID_REGEX = /[?&]svelte&type=style&lang.css$/;

package/src/utils/dependencies.js

@@ -0,0 +1,60 @@
+const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
+	'@lukeed/uuid',
+	'@playwright/test',
+	'@sveltejs/kit',
+	'@sveltejs/package',
+	'@sveltejs/vite-plugin-svelte',
+	'autoprefixer',
+	'cookie',
+	'dotenv',
+	'esbuild',
+	'eslint',
+	'jest',
+	'mdsvex',
+	'playwright',
+	'postcss',
+	'prettier',
+	'svelte',
+	'svelte2tsx',
+	'svelte-check',
+	'svelte-preprocess',
+	'tslib',
+	'typescript',
+	'vite',
+	'vitest',
+	'__vite-browser-external' // see https://github.com/sveltejs/vite-plugin-svelte/issues/362
+];
+const COMMON_PREFIXES_WITHOUT_SVELTE_FIELD = [
+	'@fontsource/',
+	'@postcss-plugins/',
+	'@rollup/',
+	'@sveltejs/adapter-',
+	'@types/',
+	'@typescript-eslint/',
+	'eslint-',
+	'jest-',
+	'postcss-plugin-',
+	'prettier-plugin-',
+	'rollup-plugin-',
+	'vite-plugin-'
+];
+
+/**
+ * Test for common dependency names that tell us it is not a package including a svelte field, eg. eslint + plugins.
+ *
+ * This speeds up the find process as we don't have to try and require the package.json for all of them
+ *
+ * @param {string} dependency
+ * @returns {boolean} true if it is a dependency without a svelte field
+ */
+export function isCommonDepWithoutSvelteField(dependency) {
+	return (
+		COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD.includes(dependency) ||
+		COMMON_PREFIXES_WITHOUT_SVELTE_FIELD.some(
+			(prefix) =>
+				prefix.startsWith('@')
+					? dependency.startsWith(prefix)
+					: dependency.substring(dependency.lastIndexOf('/') + 1).startsWith(prefix) // check prefix omitting @scope/
+		)
+	);
+}

package/src/utils/error.js

@@ -0,0 +1,167 @@
+import { buildExtendedLogMessage } from './log.js';
+
+/**
+ * convert an error thrown by svelte.compile to a RollupError so that vite displays it in a user friendly way
+ * @param {import('@rsvelte/compiler').Warning & Error & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('vite').Rollup.RollupError} the converted error
+ */
+export function toRollupError(error, options) {
+	const { filename, frame, start, code, name, stack } = error;
+	/** @type {import('vite').Rollup.RollupError} */
+	const 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: options.isBuild || options.isDebug || !frame ? 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 {import('@rsvelte/compiler').Warning & Error  & {frame?: string}} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {any} the converted error as esbuild PartialMessage
+ *
+ * note: typed any to avoid esbuild devDependency for a single internal type import
+ */
+export function toESBuildError(error, options) {
+	const { filename, frame, start, stack } = error;
+	/** @type any */
+	const 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
+		};
+	}
+	if (options.isBuild || options.isDebug || !frame) {
+		partialMessage.detail = stack;
+	}
+	return partialMessage;
+}
+
+/**
+ * extract line with number from codeframe
+ *
+ * @param {number} lineNo
+ * @param {string} [frame]
+ * @returns {string}
+ */
+function lineFromFrame(lineNo, frame) {
+	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
+ * @param {string} [frame]
+ * @returns {string}
+ */
+function formatFrameForVite(frame) {
+	if (!frame) {
+		return '';
+	}
+	return frame
+		.split('\n')
+		.map((line) => (line.match(/^\s+\^/) ? '   ' + line : ' ' + line.replace(':', ' | ')))
+		.join('\n');
+}
+
+/**
+ *
+ * @param {string} code the svelte error code
+ * @see https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/compiler/errors.js
+ * @returns {boolean}
+ */
+function couldBeFixedByCssPreprocessor(code) {
+	return code === 'expected_token' || code === 'unexpected_eof' || code?.startsWith('css_');
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Warning & Error} err a svelte compiler error, which is a mix of Warning and an error
+ * @param {string} originalCode
+ * @param {import('../public.d.ts').Options['preprocess']} [preprocessors]
+ */
+export function enhanceCompileError(err, originalCode, preprocessors) {
+	preprocessors = arraify(preprocessors ?? []);
+
+	/** @type {string[]} */
+	const additionalMessages = [];
+
+	// Handle incorrect CSS preprocessor usage
+	if (couldBeFixedByCssPreprocessor(err.code)) {
+		// Reference from Svelte: https://github.com/sveltejs/svelte/blob/9926347ad9dbdd0f3324d5538e25dcb7f5e442f8/packages/svelte/src/compiler/preprocess/index.js#L257
+		const styleRe =
+			/<!--[^]*?-->|<style((?:\s+[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/g;
+
+		let m;
+		while ((m = styleRe.exec(originalCode))) {
+			if (m[0]?.startsWith('<!--')) {
+				continue;
+			}
+			// Warn missing lang attribute
+			if (!m[1]?.includes('lang=')) {
+				additionalMessages.push('Did you forget to add a lang attribute to your style tag?');
+			}
+			// Warn missing style preprocessor
+			if (
+				preprocessors.every((p) => p.style == null || p.name === 'inject-scope-everything-rule')
+			) {
+				const preprocessorType = m[1]?.match(/lang="(.+?)"/)?.[1] ?? 'style';
+				additionalMessages.push(
+					`Did you forget to add a ${preprocessorType} preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.`
+				);
+			}
+		}
+	}
+
+	if (additionalMessages.length) {
+		err.message += '\n\n- ' + additionalMessages.join('\n- ');
+	}
+
+	return err;
+}
+
+/**
+ * @param {T | T[]} value
+ * @template T
+ */
+function arraify(value) {
+	return Array.isArray(value) ? value : [value];
+}

package/src/utils/hash.js

@@ -0,0 +1,43 @@
+import crypto from 'node:crypto';
+
+const hashes = Object.create(null);
+
+//TODO shorter?
+const hash_length = 12;
+
+/**
+ * replaces +/= in base64 output so they don't interfere
+ *
+ * @param {string} input
+ * @returns {string} base64 hash safe to use in any context
+ */
+export function safeBase64Hash(input) {
+	if (hashes[input]) {
+		return hashes[input];
+	}
+	//TODO if performance really matters, use a faster one like xx-hash etc.
+	// should be evenly distributed because short input length and similarities in paths could cause collisions otherwise
+	// OR DON'T USE A HASH AT ALL, what about a simple counter?
+	const md5 = crypto.createHash('md5');
+	md5.update(input);
+	const hash = toSafe(md5.digest('base64')).slice(0, hash_length);
+	hashes[input] = hash;
+	return hash;
+}
+
+/** @type {Record<string, string>} */
+const replacements = {
+	'+': '-',
+	'/': '_',
+	'=': ''
+};
+
+const replaceRE = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
+
+/**
+ * @param {string} base64
+ * @returns {string}
+ */
+function toSafe(base64) {
+	return base64.replace(replaceRE, (x) => replacements[x]);
+}