@sveltejs/vite-plugin-svelte 1.0.0-next.3 → 1.0.0-next.33

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,102 @@
+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 const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
+
+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,
+		format: 'esm',
+		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/hash.ts

@@ -0,0 +1,32 @@
+import * as crypto from 'crypto';
+
+const hashes = Object.create(null);
+
+//TODO shorter?
+const hash_length = 12;
+
+export function safeBase64Hash(input: string) {
+	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')).substr(0, hash_length);
+	hashes[input] = hash;
+	return hash;
+}
+
+const replacements: { [key: string]: string } = {
+	'+': '-',
+	'/': '_',
+	'=': ''
+};
+
+const replaceRE = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
+
+function toSafe(base64: string) {
+	return base64.replace(replaceRE, (x) => replacements[x]);
+}

package/src/utils/id.ts

@@ -0,0 +1,135 @@
+/* eslint-disable no-unused-vars */
+import { createFilter } from '@rollup/pluginutils';
+import { Arrayable, ResolvedOptions } from './options';
+import { normalizePath } from 'vite';
+import * as fs from 'fs';
+
+const VITE_FS_PREFIX = '/@fs/';
+const IS_WINDOWS = process.platform === 'win32';
+
+export type SvelteQueryTypes = 'style' | 'script';
+
+export interface RequestQuery {
+	// our own
+	svelte?: boolean;
+	type?: SvelteQueryTypes;
+	// vite specific
+	url?: boolean;
+	raw?: boolean;
+}
+
+export interface SvelteRequest {
+	id: string;
+	cssId: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+}
+
+function splitId(id: string) {
+	const parts = id.split(`?`, 2);
+	const filename = parts[0];
+	const rawQuery = parts[1];
+	return { filename, rawQuery };
+}
+
+function parseToSvelteRequest(
+	id: string,
+	filename: string,
+	rawQuery: string,
+	root: string,
+	timestamp: number,
+	ssr: boolean
+): SvelteRequest | undefined {
+	const query = parseRequestQuery(rawQuery);
+	if (query.url || query.raw) {
+		// skip requests with special vite tags
+		return;
+	}
+	const normalizedFilename = normalize(filename, root);
+	const cssId = createVirtualImportId(filename, root, 'style');
+
+	return {
+		id,
+		filename,
+		normalizedFilename,
+		cssId,
+		query,
+		timestamp,
+		ssr
+	};
+}
+
+function createVirtualImportId(filename: string, root: string, type: SvelteQueryTypes) {
+	const parts = ['svelte', `type=${type}`];
+	if (type === 'style') {
+		parts.push('lang.css');
+	}
+	if (existsInRoot(filename, root)) {
+		filename = root + filename;
+	} else if (filename.startsWith(VITE_FS_PREFIX)) {
+		filename = IS_WINDOWS
+			? filename.slice(VITE_FS_PREFIX.length) // remove /@fs/ from /@fs/C:/...
+			: filename.slice(VITE_FS_PREFIX.length - 1); // remove /@fs from /@fs/home/user
+	}
+	// return same virtual id format as vite-plugin-vue eg ...App.svelte?svelte&type=style&lang.css
+	return `${filename}?${parts.join('&')}`;
+}
+
+function parseRequestQuery(rawQuery: string): RequestQuery {
+	const query = Object.fromEntries(new URLSearchParams(rawQuery));
+	for (const key in query) {
+		if (query[key] === '') {
+			// @ts-ignore
+			query[key] = true;
+		}
+	}
+	return query as RequestQuery;
+}
+
+/**
+ * posixify and remove root at start
+ *
+ * @param filename
+ * @param normalizedRoot
+ */
+function normalize(filename: string, normalizedRoot: string) {
+	return stripRoot(normalizePath(filename), normalizedRoot);
+}
+
+function existsInRoot(filename: string, root: string) {
+	if (filename.startsWith(VITE_FS_PREFIX)) {
+		return false; // vite already tagged it as out of root
+	}
+	return fs.existsSync(root + filename);
+}
+
+function stripRoot(normalizedFilename: string, normalizedRoot: string) {
+	return normalizedFilename.startsWith(normalizedRoot + '/')
+		? normalizedFilename.slice(normalizedRoot.length)
+		: normalizedFilename;
+}
+
+function buildFilter(
+	include: Arrayable<string> | undefined,
+	exclude: Arrayable<string> | undefined,
+	extensions: string[]
+): (filename: string) => boolean {
+	const rollupFilter = createFilter(include, exclude);
+	return (filename) => rollupFilter(filename) && extensions.some((ext) => filename.endsWith(ext));
+}
+
+export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined;
+export function buildIdParser(options: ResolvedOptions): IdParser {
+	const { include, exclude, extensions, root } = options;
+	const normalizedRoot = normalizePath(root);
+	const filter = buildFilter(include, exclude, extensions!);
+	return (id, ssr, timestamp = Date.now()) => {
+		const { filename, rawQuery } = splitId(id);
+		if (filter(filename)) {
+			return parseToSvelteRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
+		}
+	};
+}

package/src/utils/load-svelte-config.ts

@@ -0,0 +1,108 @@
+import { createRequire } from 'module';
+import path from 'path';
+import fs from 'fs';
+import { pathToFileURL } from 'url';
+import { log } from './log';
+import { Options } from './options';
+import { UserConfig } from 'vite';
+
+// used to require cjs config in esm.
+// NOTE dynamic import() cjs technically works, but timestamp query cache bust
+// have no effect, likely because it has another internal cache?
+let esmRequire: NodeRequire;
+
+export const knownSvelteConfigNames = [
+	'svelte.config.js',
+	'svelte.config.cjs',
+	'svelte.config.mjs'
+];
+
+// hide dynamic import from ts transform to prevent it turning into a require
+// see https://github.com/microsoft/TypeScript/issues/43329#issuecomment-811606238
+// also use timestamp query to avoid caching on reload
+const dynamicImportDefault = new Function(
+	'path',
+	'return import(path + "?t=" + Date.now()).then(m => m.default)'
+);
+
+export async function loadSvelteConfig(
+	viteConfig: UserConfig,
+	inlineOptions: Partial<Options>
+): Promise<Partial<Options> | undefined> {
+	const configFile = findConfigToLoad(viteConfig, inlineOptions);
+	if (configFile) {
+		let err;
+		// try to use dynamic import for svelte.config.js first
+		if (configFile.endsWith('.js') || configFile.endsWith('.mjs')) {
+			try {
+				const result = await dynamicImportDefault(pathToFileURL(configFile).href);
+				if (result != null) {
+					return {
+						...result,
+						configFile
+					};
+				} else {
+					throw new Error(`invalid export in ${configFile}`);
+				}
+			} catch (e) {
+				log.error(`failed to import config ${configFile}`, e);
+				err = e;
+			}
+		}
+		// cjs or error with dynamic import
+		if (!configFile.endsWith('.mjs')) {
+			try {
+				// identify which require function to use (esm and cjs mode)
+				const _require = import.meta.url
+					? (esmRequire ??= createRequire(import.meta.url))
+					: require;
+
+				// avoid loading cached version on reload
+				delete _require.cache[_require.resolve(configFile)];
+				const result = _require(configFile);
+				if (result != null) {
+					return {
+						...result,
+						configFile
+					};
+				} else {
+					throw new Error(`invalid export in ${configFile}`);
+				}
+			} catch (e) {
+				log.error(`failed to require config ${configFile}`, e);
+				if (!err) {
+					err = e;
+				}
+			}
+		}
+		// failed to load existing config file
+		throw err;
+	}
+}
+
+function findConfigToLoad(viteConfig: UserConfig, inlineOptions: Partial<Options>) {
+	const root = viteConfig.root || process.cwd();
+	if (inlineOptions.configFile) {
+		const abolutePath = path.isAbsolute(inlineOptions.configFile)
+			? inlineOptions.configFile
+			: path.resolve(root, inlineOptions.configFile);
+		if (!fs.existsSync(abolutePath)) {
+			throw new Error(`failed to find svelte config file ${abolutePath}.`);
+		}
+		return abolutePath;
+	} else {
+		const existingKnownConfigFiles = knownSvelteConfigNames
+			.map((candidate) => path.resolve(root, candidate))
+			.filter((file) => fs.existsSync(file));
+		if (existingKnownConfigFiles.length === 0) {
+			log.debug(`no svelte config found at ${root}`);
+			return;
+		} else if (existingKnownConfigFiles.length > 1) {
+			log.warn(
+				`found more than one svelte config file, using ${existingKnownConfigFiles[0]}. you should only have one!`,
+				existingKnownConfigFiles
+			);
+		}
+		return existingKnownConfigFiles[0];
+	}
+}

package/src/utils/log.ts

@@ -0,0 +1,170 @@
+/* eslint-disable no-unused-vars,no-console */
+import { cyan, yellow, red } from 'kleur/colors';
+import debug from 'debug';
+import { ResolvedOptions, Warning } from './options';
+
+const levels: string[] = ['debug', 'info', 'warn', 'error', 'silent'];
+const prefix = 'vite-plugin-svelte';
+const loggers: { [key: string]: any } = {
+	debug: {
+		log: debug(`vite:${prefix}`),
+		enabled: false,
+		isDebug: true
+	},
+	info: {
+		color: cyan,
+		log: console.log,
+		enabled: true
+	},
+	warn: {
+		color: yellow,
+		log: console.warn,
+		enabled: true
+	},
+	error: {
+		color: red,
+		log: console.error,
+		enabled: true
+	},
+	silent: {
+		enabled: false
+	}
+};
+
+let _level: string = 'info';
+function setLevel(level: string) {
+	if (level === _level) {
+		return;
+	}
+	const levelIndex = levels.indexOf(level);
+	if (levelIndex > -1) {
+		_level = level;
+		for (let i = 0; i < levels.length; i++) {
+			loggers[levels[i]].enabled = i >= levelIndex;
+		}
+	} else {
+		_log(loggers.error, `invalid log level: ${level} `);
+	}
+}
+
+function _log(logger: any, message: string, payload?: any) {
+	if (!logger.enabled) {
+		return;
+	}
+	if (logger.isDebug) {
+		payload !== undefined ? logger.log(message, payload) : logger.log(message);
+	} else {
+		logger.log(logger.color(`${new Date().toLocaleTimeString()} [${prefix}] ${message}`));
+		if (payload) {
+			logger.log(payload);
+		}
+	}
+}
+
+export interface LogFn {
+	(message: string, payload?: any): void;
+	enabled: boolean;
+	once: (message: string, payload?: any) => void;
+}
+
+function createLogger(level: string): LogFn {
+	const logger = loggers[level];
+	const logFn: LogFn = _log.bind(null, logger) as LogFn;
+	const logged = new Set<String>();
+	const once = function (message: string, payload?: any) {
+		if (logged.has(message)) {
+			return;
+		}
+		logged.add(message);
+		logFn.apply(null, [message, payload]);
+	};
+	Object.defineProperty(logFn, 'enabled', {
+		get() {
+			return logger.enabled;
+		}
+	});
+	Object.defineProperty(logFn, 'once', {
+		get() {
+			return once;
+		}
+	});
+	return logFn;
+}
+
+export const log = {
+	debug: createLogger('debug'),
+	info: createLogger('info'),
+	warn: createLogger('warn'),
+	error: createLogger('error'),
+	setLevel
+};
+
+export function logCompilerWarnings(warnings: Warning[], options: ResolvedOptions) {
+	const { emitCss, onwarn, isBuild } = options;
+	const warn = isBuild ? warnBuild : warnDev;
+	const notIgnoredWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	const extraWarnings = buildExtraWarnings(warnings, isBuild);
+	[...notIgnoredWarnings, ...extraWarnings].forEach((warning) => {
+		if (onwarn) {
+			onwarn(warning, warn);
+		} else {
+			warn(warning);
+		}
+	});
+}
+
+function ignoreCompilerWarning(
+	warning: Warning,
+	isBuild: boolean,
+	emitCss: boolean | undefined
+): boolean {
+	return (
+		(!emitCss && warning.code === 'css-unused-selector') || // same as rollup-plugin-svelte
+		(!isBuild && isNoScopableElementWarning(warning))
+	);
+}
+
+function isNoScopableElementWarning(warning: Warning) {
+	// see https://github.com/sveltejs/vite-plugin-svelte/issues/153
+	return warning.code === 'css-unused-selector' && warning.message.includes('"*"');
+}
+
+function buildExtraWarnings(warnings: Warning[], isBuild: boolean): Warning[] {
+	const extraWarnings = [];
+	if (!isBuild) {
+		const noScopableElementWarnings = warnings.filter((w) => isNoScopableElementWarning(w));
+		if (noScopableElementWarnings.length > 0) {
+			// in case there are multiple, use last one as that is the one caused by our *{} rule
+			const noScopableElementWarning =
+				noScopableElementWarnings[noScopableElementWarnings.length - 1];
+			extraWarnings.push({
+				...noScopableElementWarning,
+				code: 'vite-plugin-svelte-css-no-scopable-elements',
+				message: `No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.`
+			});
+		}
+	}
+	return extraWarnings;
+}
+
+function warnDev(w: Warning) {
+	log.info.enabled && log.info(buildExtendedLogMessage(w));
+}
+
+function warnBuild(w: Warning) {
+	log.warn.enabled && log.warn(buildExtendedLogMessage(w), w.frame);
+}
+
+export function buildExtendedLogMessage(w: Warning) {
+	const parts = [];
+	if (w.filename) {
+		parts.push(w.filename);
+	}
+	if (w.start) {
+		parts.push(':', w.start.line, ':', w.start.column);
+	}
+	if (w.message) {
+		parts.push(' ', w.message);
+	}
+	return parts.join('');
+}