@rsvelte/vite-plugin-svelte 0.1.0

package/src/utils/id.js

@@ -0,0 +1,274 @@
+import { normalizePath } from 'vite';
+import fs from 'node:fs';
+import process from 'node:process';
+import { log } from './log.js';
+import {
+	DEFAULT_SVELTE_EXT,
+	DEFAULT_SVELTE_MODULE_EXT,
+	DEFAULT_SVELTE_MODULE_INFIX,
+	SVELTE_VIRTUAL_STYLE_ID_REGEX
+} from './constants.js';
+import { arraify } from './options.js';
+
+const VITE_FS_PREFIX = '/@fs/';
+const IS_WINDOWS = process.platform === 'win32';
+
+const SUPPORTED_COMPILER_OPTIONS = ['generate', 'dev', 'css', 'customElement', 'immutable'];
+const TYPES_WITH_COMPILER_OPTIONS = ['style', 'script', 'all'];
+
+/**
+ * @param {string} id
+ * @returns {{ filename: string, rawQuery: string }}
+ */
+function splitId(id) {
+	const parts = id.split('?', 2);
+	const filename = parts[0];
+	const rawQuery = parts[1];
+	return { filename, rawQuery };
+}
+
+/**
+ * @param {string} id
+ * @param {string} filename
+ * @param {string} rawQuery
+ * @param {string} root
+ * @param {number} timestamp
+ * @param {boolean} ssr
+ * @returns {import('../types/id.d.ts').SvelteRequest | undefined}
+ */
+function parseToSvelteRequest(id, filename, rawQuery, root, timestamp, ssr) {
+	const query = parseRequestQuery(rawQuery);
+	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');
+
+	return {
+		id,
+		filename,
+		normalizedFilename,
+		cssId,
+		query,
+		timestamp,
+		ssr,
+		raw
+	};
+}
+
+/**
+ * @param {string} filename
+ * @param {string} root
+ * @param {import('../types/id.d.ts').SvelteQueryTypes} type
+ * @returns {string}
+ */
+function createVirtualImportId(filename, root, type) {
+	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('&')}`;
+}
+
+/**
+ * @param {string} rawQuery
+ * @returns {import('../types/id.d.ts').RequestQuery}
+ */
+function parseRequestQuery(rawQuery) {
+	const query = Object.fromEntries(new URLSearchParams(rawQuery));
+	for (const key in query) {
+		if (query[key] === '') {
+			// @ts-expect-error not boolean
+			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":"server","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 /** @type {import('../types/id.d.ts').RequestQuery}*/ query;
+}
+
+/**
+ * posixify and remove root at start
+ *
+ * @param {string} filename
+ * @param {string} normalizedRoot
+ * @returns {string}
+ */
+export function normalize(filename, normalizedRoot) {
+	return stripRoot(normalizePath(filename), normalizedRoot);
+}
+
+/**
+ * @param {string} filename
+ * @param {string} root
+ * @returns {boolean}
+ */
+function existsInRoot(filename, root) {
+	if (filename.startsWith(VITE_FS_PREFIX)) {
+		return false; // vite already tagged it as out of root
+	}
+	return fs.existsSync(root + filename);
+}
+
+/**
+ * @param {string} normalizedFilename
+ * @param {string} normalizedRoot
+ * @returns {string}
+ */
+function stripRoot(normalizedFilename, normalizedRoot) {
+	return normalizedFilename.startsWith(normalizedRoot + '/')
+		? normalizedFilename.slice(normalizedRoot.length)
+		: normalizedFilename;
+}
+
+/**
+ *
+ * @param {string} s
+ * @returns {string}
+ */
+function escapeRE(s) {
+	return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/id.d.ts').IdFilter}
+ */
+export function buildIdFilter(options) {
+	const { include = [], exclude = [], extensions = DEFAULT_SVELTE_EXT } = options;
+	// this regex combines configured extensions and looks for them at the end of the string or directly before first ? or #
+	const extensionsRE = new RegExp(
+		`^[^?#]+\\.(?:${extensions
+			.map((e) => (e.startsWith('.') ? e.slice(1) : e))
+			.map(escapeRE)
+			.join('|')})(?:[?#]|$)`
+	);
+	return {
+		id: {
+			include: [extensionsRE, .../**@type {Array<string|RegExp>}*/ arraify(include)],
+			exclude: /**@type {Array<string|RegExp>}*/ [
+				'\0',
+				SVELTE_VIRTUAL_STYLE_ID_REGEX, // exclude from regular pipeline, we load it in a separate plugin
+				...arraify(exclude)
+			]
+		}
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/id.d.ts').IdParser}
+ */
+export function buildIdParser(options) {
+	const normalizedRoot = normalizePath(options.root);
+	return (id, ssr, timestamp = Date.now()) => {
+		const { filename, rawQuery } = splitId(id);
+		return parseToSvelteRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/id.d.ts').IdFilter}
+ */
+export function buildModuleIdFilter(options) {
+	const {
+		infixes = DEFAULT_SVELTE_MODULE_INFIX,
+		include = [],
+		exclude = [],
+		extensions = DEFAULT_SVELTE_MODULE_EXT
+	} = options.experimental?.compileModule ?? {};
+	// this regex combines configured infixes and extensions
+	// and looks for them at the end of the string or directly before first ? or #
+	const infixWithExtRE = new RegExp(
+		`^[^?#]+(?:${infixes.map(escapeRE).join('|')})(?:[^.\\\\/]+\\.)*(?:${extensions
+			.map((e) => (e.startsWith('.') ? e.slice(1) : e))
+			.map(escapeRE)
+			.join('|')})(?:[?#]|$)`
+	);
+	return {
+		id: {
+			include: [infixWithExtRE, .../**@type {Array<string|RegExp>}*/ arraify(include)],
+			exclude: ['\0', .../**@type {Array<string|RegExp>}*/ arraify(exclude)]
+		}
+	};
+}
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/id.d.ts').ModuleIdParser}
+ */
+export function buildModuleIdParser(options) {
+	const root = options.root;
+	const normalizedRoot = normalizePath(root);
+	return (id, ssr, timestamp = Date.now()) => {
+		const { filename, rawQuery } = splitId(id);
+		return parseToSvelteModuleRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
+	};
+}
+
+/**
+ * @param {string} id
+ * @param {string} filename
+ * @param {string} rawQuery
+ * @param {string} root
+ * @param {number} timestamp
+ * @param {boolean} ssr
+ * @returns {import('../types/id.d.ts').SvelteModuleRequest | undefined}
+ */
+function parseToSvelteModuleRequest(id, filename, rawQuery, root, timestamp, ssr) {
+	const query = parseRequestQuery(rawQuery);
+
+	if (query.url || query.raw || query.direct) {
+		// skip requests with special vite tags
+		return;
+	}
+
+	const normalizedFilename = normalize(filename, root);
+
+	return {
+		id,
+		filename,
+		normalizedFilename,
+		query,
+		timestamp,
+		ssr
+	};
+}

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

@@ -0,0 +1,80 @@
+import path from 'node:path';
+import process from 'node:process';
+import fs from 'node:fs';
+import { pathToFileURL } from 'node:url';
+import { log } from './log.js';
+
+export const knownSvelteConfigNames = ['js', 'ts', 'mjs', 'mts'].map(
+	(ext) => `svelte.config.${ext}`
+);
+
+/**
+ * @param {string} filePath
+ * @param {number} timestamp
+ */
+async function dynamicImportDefault(filePath, timestamp) {
+	return await import(filePath + '?t=' + timestamp).then((m) => m.default);
+}
+
+/**
+ * @param {import('vite').UserConfig} [viteConfig]
+ * @param {Partial<import('../public.d.ts').Options>} [inlineOptions]
+ * @returns {Promise<Partial<import('../public.d.ts').SvelteConfig> | undefined>}
+ */
+export async function loadSvelteConfig(viteConfig, inlineOptions) {
+	if (inlineOptions?.configFile === false) {
+		return;
+	}
+	const configFile = findConfigToLoad(viteConfig, inlineOptions);
+	if (configFile) {
+		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);
+			throw e;
+		}
+	}
+}
+
+/**
+ * @param {import('vite').UserConfig | undefined} viteConfig
+ * @param {Partial<import('../public.d.ts').Options> | undefined} inlineOptions
+ * @returns {string | undefined}
+ */
+function findConfigToLoad(viteConfig, inlineOptions) {
+	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.info(`no Svelte config found at ${root} - using default configuration.`);
+			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.js

@@ -0,0 +1,256 @@
+/* eslint-disable no-console */
+
+// eslint-disable-next-line n/no-unsupported-features/node-builtins
+import { styleText } from 'node:util';
+const cyan = (/** @type {string} */ txt) => styleText('cyan', txt);
+const yellow = (/** @type {string} */ txt) => styleText('yellow', txt);
+const red = (/** @type {string} */ txt) => styleText('red', txt);
+
+import { createDebug, enabled } from 'obug';
+
+/** @type {import('../types/log.d.ts').LogLevel[]} */
+const levels = ['debug', 'info', 'warn', 'error', 'silent'];
+const prefix = 'vite-plugin-svelte';
+/** @type {Record<import('../types/log.d.ts').LogLevel, any>} */
+const loggers = {
+	debug: {
+		log: createDebug(`${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
+	}
+};
+
+/** @type {import('../types/log.d.ts').LogLevel} */
+let _level = 'info';
+/**
+ * @param {import('../types/log.d.ts').LogLevel} level
+ * @returns {void}
+ */
+function setLevel(level) {
+	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} `);
+	}
+}
+
+/**
+ * @param {any} logger
+ * @param {string} message
+ * @param {any} [payload]
+ * @param {string} [namespace]
+ * @returns
+ */
+function _log(logger, message, payload, namespace) {
+	if (!logger.enabled) {
+		return;
+	}
+	if (logger.isDebug) {
+		let log = logger.log;
+		if (namespace) {
+			if (!isDebugNamespaceEnabled(namespace)) {
+				return;
+			}
+			log = logger.log.extend(namespace);
+		}
+		if (payload !== undefined) {
+			log(message, payload);
+		} else {
+			log(message);
+		}
+	} else {
+		logger.log(
+			logger.color(
+				`${new Date().toLocaleTimeString()} [${prefix}${
+					namespace ? `:${namespace}` : ''
+				}] ${message}`
+			)
+		);
+		if (payload) {
+			logger.log(payload);
+		}
+	}
+}
+
+/**
+ * @param {import('../types/log.d.ts').LogLevel} level
+ * @returns {import('../types/log.d.ts').LogFn}
+ */
+function createLogger(level) {
+	const logger = loggers[level];
+	const logFn = /** @type {import('../types/log.d.ts').LogFn} */ (_log.bind(null, logger));
+	/** @type {Set<string>} */
+	const logged = new Set();
+	/** @type {import('../types/log.d.ts').SimpleLogFn} */
+	const once = function (message, payload, namespace) {
+		if (!logger.enabled || logged.has(message)) {
+			return;
+		}
+		logged.add(message);
+		logFn.apply(null, [message, payload, namespace]);
+	};
+	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
+};
+
+/**
+ * @param {import('../types/id.d.ts').SvelteRequest | import('../types/id.d.ts').SvelteModuleRequest} svelteRequest
+ * @param {import('@rsvelte/compiler').Warning[]} warnings
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ */
+export function logCompilerWarnings(svelteRequest, warnings, options) {
+	const { emitCss, onwarn, isBuild } = options;
+	const sendViaWS = !isBuild && options.experimental?.sendWarningsToBrowser;
+	let warn = isBuild ? warnBuild : warnDev;
+	/** @type {import('@rsvelte/compiler').Warning[]} */
+	const handledByDefaultWarn = [];
+	const allWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	if (sendViaWS) {
+		const _warn = warn;
+		/** @type {(w: import('@rsvelte/compiler').Warning) => void} */
+		warn = (w) => {
+			handledByDefaultWarn.push(w);
+			_warn(w);
+		};
+	}
+	allWarnings.forEach((warning) => {
+		if (onwarn) {
+			onwarn(warning, warn);
+		} else {
+			warn(warning);
+		}
+	});
+	if (sendViaWS) {
+		/** @type {import('../types/log.d.ts').SvelteWarningsMessage} */
+		const message = {
+			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);
+	}
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Warning} warning
+ * @param {boolean} isBuild
+ * @param {boolean} [emitCss]
+ * @returns {boolean}
+ */
+function ignoreCompilerWarning(warning, isBuild, emitCss) {
+	return (
+		(!emitCss && warning.code === 'css_unused_selector') || // same as rollup-plugin-svelte
+		(!isBuild && isNoScopableElementWarning(warning))
+	);
+}
+
+/**
+ *
+ * @param {import('@rsvelte/compiler').Warning} warning
+ * @returns {boolean}
+ */
+function isNoScopableElementWarning(warning) {
+	// see https://github.com/sveltejs/vite-plugin-svelte/issues/153
+	return warning.code === 'css_unused_selector' && warning.message.includes('"*"');
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Warning} w
+ */
+function warnDev(w) {
+	if (w.filename?.includes('node_modules')) {
+		if (isDebugNamespaceEnabled('node-modules-onwarn')) {
+			log.debug(buildExtendedLogMessage(w), undefined, 'node-modules-onwarn');
+		}
+	} else if (log.info.enabled) {
+		log.info(buildExtendedLogMessage(w));
+	}
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Warning & {frame?: string}} w
+ */
+function warnBuild(w) {
+	if (w.filename?.includes('node_modules')) {
+		if (isDebugNamespaceEnabled('node-modules-onwarn')) {
+			log.debug(buildExtendedLogMessage(w), w.frame, 'node-modules-onwarn');
+		}
+	} else if (log.warn.enabled) {
+		log.warn(buildExtendedLogMessage(w), w.frame);
+	}
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Warning} w
+ */
+export function buildExtendedLogMessage(w) {
+	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('');
+}
+
+/**
+ * @param {string} namespace
+ * @returns {boolean}
+ */
+export function isDebugNamespaceEnabled(namespace) {
+	return enabled(`${prefix}:${namespace}`);
+}