@sveltejs/vite-plugin-svelte 1.0.0-next.9 → 1.0.2

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,115 @@
+import { createRequire } from 'module';
+import path from 'path';
+import fs from 'fs';
+import { pathToFileURL } from 'url';
+import { log } from './log';
+import { Options, SvelteOptions } 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',
+	'timestamp',
+	'return import(path + "?t=" + timestamp).then(m => m.default)'
+);
+
+export async function loadSvelteConfig(
+	viteConfig?: UserConfig,
+	inlineOptions?: Partial<Options>
+): Promise<Partial<SvelteOptions> | undefined> {
+	if (inlineOptions?.configFile === false) {
+		return;
+	}
+	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,
+					fs.statSync(configFile).mtimeMs
+				);
+				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,211 @@
+/* eslint-disable no-unused-vars,no-console */
+import { cyan, yellow, red } from 'kleur/colors';
+import debug from 'debug';
+import { ResolvedOptions, Warning } from './options';
+import { SvelteRequest } from './id';
+
+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 type SvelteWarningsMessage = {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	timestamp: number;
+	warnings: Warning[]; // allWarnings filtered by warnings where onwarn did not call the default handler
+	allWarnings: Warning[]; // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+	rawWarnings: Warning[]; // raw compiler output
+};
+
+export function logCompilerWarnings(
+	svelteRequest: SvelteRequest,
+	warnings: Warning[],
+	options: ResolvedOptions
+) {
+	const { emitCss, onwarn, isBuild } = options;
+	const sendViaWS = !isBuild && options.experimental?.sendWarningsToBrowser;
+	let warn = isBuild ? warnBuild : warnDev;
+	const handledByDefaultWarn: Warning[] = [];
+	const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	const extra = buildExtraWarnings(warnings, isBuild);
+	const allWarnings = [...notIgnored, ...extra];
+	if (sendViaWS) {
+		const _warn = warn;
+		warn = (w: Warning) => {
+			handledByDefaultWarn.push(w);
+			_warn(w);
+		};
+	}
+	allWarnings.forEach((warning) => {
+		if (onwarn) {
+			onwarn(warning, warn);
+		} else {
+			warn(warning);
+		}
+	});
+	if (sendViaWS) {
+		const message: SvelteWarningsMessage = {
+			id: svelteRequest.id,
+			filename: svelteRequest.filename,
+			normalizedFilename: svelteRequest.normalizedFilename,
+			timestamp: svelteRequest.timestamp,
+			warnings: handledByDefaultWarn, // allWarnings filtered by warnings where onwarn did not call the default handler
+			allWarnings, // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+			rawWarnings: warnings // raw compiler output
+		};
+		log.debug(`sending svelte:warnings message for ${svelteRequest.normalizedFilename}`);
+		options.server?.ws?.send('svelte:warnings', message);
+	}
+}
+
+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) {
+		if (parts.length > 0) {
+			parts.push(' ');
+		}
+		parts.push(w.message);
+	}
+	return parts.join('');
+}

package/src/utils/optimizer.ts

@@ -0,0 +1,45 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { ResolvedOptions } from './options';
+
+// List of options that changes the prebundling result
+const PREBUNDLE_SENSITIVE_OPTIONS: (keyof ResolvedOptions)[] = [
+	'compilerOptions',
+	'configFile',
+	'experimental',
+	'extensions',
+	'ignorePluginPreprocessors',
+	'preprocess'
+];
+
+/**
+ * @returns Whether the Svelte metadata has changed
+ */
+export async function saveSvelteMetadata(cacheDir: string, options: ResolvedOptions) {
+	const svelteMetadata = generateSvelteMetadata(options);
+	const svelteMetadataPath = path.resolve(cacheDir, '_svelte_metadata.json');
+
+	const currentSvelteMetadata = JSON.stringify(svelteMetadata, (_, value) => {
+		// Handle preprocessors
+		return typeof value === 'function' ? value.toString() : value;
+	});
+
+	let existingSvelteMetadata: string | undefined;
+	try {
+		existingSvelteMetadata = await fs.readFile(svelteMetadataPath, 'utf8');
+	} catch {
+		// ignore
+	}
+
+	await fs.mkdir(cacheDir, { recursive: true });
+	await fs.writeFile(svelteMetadataPath, currentSvelteMetadata);
+	return currentSvelteMetadata !== existingSvelteMetadata;
+}
+
+function generateSvelteMetadata(options: ResolvedOptions) {
+	const metadata: Record<string, any> = {};
+	for (const key of PREBUNDLE_SENSITIVE_OPTIONS) {
+		metadata[key] = options[key];
+	}
+	return metadata;
+}