@rsvelte/vite-plugin-svelte 0.1.0

package/src/preprocess.js

@@ -0,0 +1,166 @@
+import process from 'node:process';
+import * as vite from 'vite';
+import { mapToRelative, removeLangSuffix } from './utils/sourcemaps.js';
+const {
+	isCSSRequest,
+	preprocessCSS,
+	resolveConfig,
+	transformWithEsbuild,
+	//@ts-ignore rolldown types don't exist
+	rolldownVersion,
+	//@ts-ignore rolldown types don't exist
+	transformWithOxc
+} = vite;
+/**
+ * @typedef {(code: string, filename: string) => Promise<{ code: string; map?: any; deps?: Set<string> }>} CssTransform
+ */
+
+const supportedScriptLangs = ['ts'];
+
+export const lang_sep = '.vite-preprocess';
+
+/**
+ * @param {import('./public.d.ts').VitePreprocessOptions} [opts]
+ * @returns {import('@rsvelte/compiler').PreprocessorGroup}
+ */
+export function vitePreprocess(opts) {
+	/** @type {import('@rsvelte/compiler').PreprocessorGroup} */
+	const preprocessor = { name: 'vite-preprocess' };
+	if (opts?.script === true) {
+		preprocessor.script = rolldownVersion ? viteScriptOxc().script : viteScript().script;
+	}
+	if (opts?.style !== false) {
+		const styleOpts = typeof opts?.style == 'object' ? opts?.style : undefined;
+		preprocessor.style = viteStyle(styleOpts).style;
+	}
+	return preprocessor;
+}
+
+/**
+ * @returns {{ script: import('@rsvelte/compiler').Preprocessor }}
+ */
+function viteScript() {
+	return {
+		async script({ attributes, content, filename = '' }) {
+			const lang = /** @type {string} */ (attributes.lang);
+			if (!supportedScriptLangs.includes(lang)) return;
+			const { code, map } = await transformWithEsbuild(content, filename, {
+				loader: /** @type {import('vite').ESBuildOptions['loader']} */ (lang),
+				target: 'esnext',
+				tsconfigRaw: {
+					compilerOptions: {
+						// svelte typescript needs this flag to work with type imports
+						importsNotUsedAsValues: 'preserve',
+						preserveValueImports: true
+					}
+				}
+			});
+
+			mapToRelative(map, filename);
+
+			return {
+				code,
+				map
+			};
+		}
+	};
+}
+
+/**
+ * @returns {{ script: import('@rsvelte/compiler').Preprocessor }}
+ */
+function viteScriptOxc() {
+	return {
+		async script({ attributes, content, filename = '' }) {
+			if (typeof attributes.lang !== 'string' || !supportedScriptLangs.includes(attributes.lang)) {
+				return;
+			}
+			const lang = /** @type {'ts'} */ (attributes.lang);
+			const { code, map } = await transformWithOxc(content, filename, {
+				lang,
+				target: 'esnext'
+				// TODO, how to pass tsconfig compilerOptions (or not needed as config is loaded for file
+				/*tsconfigRaw: {
+					compilerOptions: {
+						// svelte typescript needs this flag to work with type imports
+						importsNotUsedAsValues: 'preserve',
+						preserveValueImports: true
+					}
+				}*/
+			});
+
+			mapToRelative(map, filename);
+
+			return {
+				code,
+				map
+			};
+		}
+	};
+}
+
+/**
+ * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
+ * @returns {{ style: import('@rsvelte/compiler').Preprocessor }}
+ */
+function viteStyle(config = {}) {
+	/** @type {Promise<CssTransform> | CssTransform} */
+	let cssTransform;
+	/** @type {import('@rsvelte/compiler').Preprocessor} */
+	const style = async ({ attributes, content, filename = '' }) => {
+		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
+		if (attributes.lang && !isCSSRequest(ext)) return;
+		if (!cssTransform) {
+			cssTransform = createCssTransform(style, config).then((t) => (cssTransform = t));
+		}
+		const transform = await cssTransform;
+		const suffix = `${lang_sep}${ext}`;
+		const moduleId = `${filename}${suffix}`;
+		const { code, map, deps } = await transform(content, moduleId);
+		removeLangSuffix(map, suffix);
+		mapToRelative(map, filename);
+		const dependencies = deps ? Array.from(deps).filter((d) => !d.endsWith(suffix)) : undefined;
+		return {
+			code,
+			map: map ?? undefined,
+			dependencies
+		};
+	};
+	// @ts-expect-error tag so can be found by v-p-s
+	style.__resolvedConfig = null;
+	return { style };
+}
+
+/**
+ * @param {import('@rsvelte/compiler').Preprocessor} style
+ * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
+ * @returns {Promise<CssTransform>}
+ */
+async function createCssTransform(style, config) {
+	/** @type {import('vite').ResolvedConfig} */
+	let resolvedConfig;
+	// @ts-expect-error special prop added if running in v-p-s
+	if (style.__resolvedConfig) {
+		// @ts-expect-error not typed
+		resolvedConfig = style.__resolvedConfig;
+	} else if (isResolvedConfig(config)) {
+		resolvedConfig = config;
+	} else {
+		// default to "build" if no NODE_ENV is set to avoid running in dev mode for svelte-check etc.
+		const useBuild = !process.env.NODE_ENV || process.env.NODE_ENV === 'production';
+		const command = useBuild ? 'build' : 'serve';
+		const defaultMode = useBuild ? 'production' : 'development';
+		resolvedConfig = await resolveConfig(config, command, defaultMode, defaultMode, false);
+	}
+	return async (code, filename) => {
+		return preprocessCSS(code, filename, resolvedConfig);
+	};
+}
+
+/**
+ * @param {any} config
+ * @returns {config is import('vite').ResolvedConfig}
+ */
+function isResolvedConfig(config) {
+	return !!config.inlineConfig;
+}

package/src/public.d.ts

@@ -0,0 +1,217 @@
+import type { InlineConfig, ResolvedConfig } from 'vite';
+import type { CompileOptions, Warning, PreprocessorGroup } from '@rsvelte/compiler';
+import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
+
+export type Options = Omit<SvelteConfig, 'vitePlugin'> & PluginOptionsInline;
+
+interface PluginOptionsInline extends PluginOptions {
+	/**
+	 * Path to a svelte config file, either absolute or relative to Vite root
+	 *
+	 * set to `false` to ignore the svelte config file
+	 *
+	 * @see https://vitejs.dev/config/#root
+	 */
+	configFile?: string | false;
+}
+
+export interface PluginOptions {
+	/**
+	 * A `picomatch` pattern, or array of patterns, which specifies the files the plugin should
+	 * operate on. By default, all svelte files are included.
+	 *
+	 * @see https://github.com/micromatch/picomatch
+	 */
+	include?: Arrayable<string | RegExp>;
+	/**
+	 * A `picomatch` pattern, or array of patterns, which specifies the files to be ignored by the
+	 * plugin. By default, no files are ignored.
+	 *
+	 * @see https://github.com/micromatch/picomatch
+	 */
+	exclude?: Arrayable<string | RegExp>;
+	/**
+	 * Emit Svelte styles as virtual CSS files for Vite and other plugins to process
+	 *
+	 * @default true
+	 */
+	emitCss?: boolean;
+	/**
+	 * Enable or disable Hot Module Replacement.
+	 * Deprecated, use compilerOptions.hmr instead!
+	 *
+	 * @deprecated
+	 * @default true for development, always false for production
+	 */
+	hot?: boolean;
+
+	/**
+	 * Some Vite plugins can contribute additional preprocessors by defining `api.sveltePreprocess`.
+	 * If you don't want to use them, set this to true to ignore them all or use an array of strings
+	 * with plugin names to specify which.
+	 *
+	 * @default false
+	 */
+	ignorePluginPreprocessors?: boolean | string[];
+	/**
+	 * vite-plugin-svelte automatically handles excluding svelte libraries and reinclusion of their dependencies
+	 * in vite.optimizeDeps.
+	 *
+	 * `disableDependencyReinclusion: true` disables all reinclusions
+	 * `disableDependencyReinclusion: ['foo','bar']` disables reinclusions for dependencies of foo and bar
+	 *
+	 * This should be used for hybrid packages that contain both node and browser dependencies, eg Routify
+	 *
+	 * @default false
+	 */
+	disableDependencyReinclusion?: boolean | string[];
+	/**
+	 * Enable support for Vite's dependency optimization to prebundle Svelte libraries.
+	 *
+	 * To disable prebundling for a specific library, add it to `optimizeDeps.exclude`.
+	 *
+	 * @default true for dev, false for build
+	 */
+	prebundleSvelteLibraries?: boolean;
+	/**
+	 * toggle/configure Svelte Inspector
+	 *
+	 * @default unset for dev, always false for build
+	 */
+	inspector?: InspectorOptions | boolean;
+
+	/**
+	 * A function to update `compilerOptions` before compilation
+	 *
+	 * `data.filename` - The file to be compiled
+	 * `data.code` - The preprocessed Svelte code
+	 * `data.compileOptions` - The current compiler options
+	 *
+	 * To change part of the compiler options, return an object with the changes you need.
+	 *
+	 * @example
+	 * ```
+	 * ({ filename, compileOptions }) => {
+	 *   // Dynamically set runes mode per Svelte file
+	 *   if (forceRunesMode(filename) && !compileOptions.runes) {
+	 *     return { runes: true };
+	 *   }
+	 * }
+	 * ```
+	 */
+	dynamicCompileOptions?: (data: {
+		filename: string;
+		code: string;
+		compileOptions: Partial<CompileOptions>;
+	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
+	/**
+	 * These options are considered experimental and breaking changes to them can occur in any release
+	 */
+	experimental?: ExperimentalOptions;
+}
+
+export interface SvelteConfig {
+	/**
+	 * A list of file extensions to be compiled by Svelte
+	 *
+	 * @default ['.svelte']
+	 */
+	extensions?: string[];
+	/**
+	 * An array of preprocessors to transform the Svelte source code before compilation
+	 *
+	 * @see https://svelte.dev/docs/svelte/svelte-compiler#PreprocessorGroup
+	 */
+	preprocess?: Arrayable<PreprocessorGroup>;
+	/**
+	 * The options to be passed to the Svelte compiler. A few options are set by default,
+	 * including `dev` and `css`. However, some options are non-configurable, like
+	 * `filename`, `format`, `generate`, and `cssHash` (in dev).
+	 *
+	 * @see https://svelte.dev/docs/svelte/svelte-compiler#CompileOptions
+	 */
+	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
+
+	/**
+	 * Handles warning emitted from the Svelte compiler
+	 *
+	 * warnings emitted for files in node_modules are logged at the debug level, to see them run
+	 * `DEBUG=vite-plugin-svelte:node-modules-onwarn pnpm build`
+	 *
+	 * @example
+	 * ```
+	 * (warning, defaultHandler) => {
+	 *   // ignore some warnings
+	 *   if (!['foo','bar'].includes(warning.code)) {
+	 *     defaultHandler(warning);
+	 *   }
+	 * }
+	 * ```
+	 *
+	 */
+	onwarn?: (warning: Warning, defaultHandler: (warning: Warning) => void) => void;
+	/**
+	 * Options for vite-plugin-svelte
+	 */
+	vitePlugin?: PluginOptions;
+}
+
+/**
+ * These options are considered experimental and breaking changes to them can occur in any release
+ */
+interface ExperimentalOptions {
+	/**
+	 * send a websocket message with svelte compiler warnings during dev
+	 *
+	 */
+	sendWarningsToBrowser?: boolean;
+	/**
+	 * disable svelte field resolve warnings
+	 *
+	 * @default false
+	 */
+	disableSvelteResolveWarnings?: boolean;
+
+	/**
+	 * disable api.sveltePreprocess deprecation warnings
+	 *
+	 * @default false
+	 */
+	disableApiSveltePreprocessWarnings?: boolean;
+
+	compileModule?: CompileModuleOptions;
+}
+
+interface CompileModuleOptions {
+	/**
+	 * infix that must be present in filename
+	 * @default ['.svelte.']
+	 */
+	infixes?: string[];
+	/**
+	 * module extensions
+	 * @default ['.ts','.js']
+	 */
+	extensions?: string[];
+	include?: Arrayable<string | RegExp>;
+	exclude?: Arrayable<string | RegExp>;
+}
+
+type Arrayable<T> = T | T[];
+
+export interface VitePreprocessOptions {
+	/**
+	 * preprocess script block with vite pipeline.
+	 * Since svelte5 this is not needed for typescript anymore
+	 *
+	 * @default false
+	 */
+	script?: boolean;
+	/**
+	 * preprocess style blocks with vite pipeline
+	 */
+	style?: boolean | InlineConfig | ResolvedConfig;
+}
+// eslint-disable-next-line n/no-missing-import
+export * from './index.js';

package/src/types/compile.d.ts

@@ -0,0 +1,37 @@
+import type { Processed, CompileResult } from '@rsvelte/compiler';
+import type { SvelteRequest } from './id.d.ts';
+import type { ResolvedOptions } from './options.d.ts';
+import type { CustomPluginOptionsVite, Rollup } from 'vite';
+
+export type CompileSvelte = (
+	svelteRequest: SvelteRequest,
+	code: string,
+	options: Partial<ResolvedOptions>,
+	sourcemap?: Rollup.SourceMap
+) => Promise<CompileData>;
+
+export type PreprocessSvelte = (
+	svelteRequest: SvelteRequest,
+	code: string,
+	options: Partial<ResolvedOptions>
+) => Promise<Processed | undefined>;
+
+export interface Code {
+	code: string;
+	map?: any;
+	dependencies?: any[];
+	hasGlobal?: boolean;
+	moduleType?: string; //vite-8 beta
+	meta?: {
+		vite?: CustomPluginOptionsVite;
+	};
+}
+
+export interface CompileData {
+	filename: string;
+	normalizedFilename: string;
+	cssId: string;
+	lang: string;
+	compiled: CompileResult;
+	ssr: boolean | undefined;
+}

package/src/types/id.d.ts

@@ -0,0 +1,46 @@
+export type SvelteQueryTypes = 'style';
+
+export interface RequestQuery {
+	// our own
+	svelte?: boolean;
+	type?: SvelteQueryTypes;
+	// vite specific
+	url?: boolean;
+	raw?: boolean;
+	direct?: boolean;
+	inline?: boolean;
+}
+
+export interface SvelteRequest {
+	id: string;
+	cssId: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+	raw: boolean;
+}
+
+export interface SvelteModuleRequest {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+}
+
+export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined;
+
+export type IdFilter = {
+	id: {
+		include: Array<string | RegExp>;
+		exclude: Array<string | RegExp>;
+	};
+};
+export type ModuleIdParser = (
+	id: string,
+	ssr: boolean,
+	timestamp?: number
+) => SvelteModuleRequest | undefined;

package/src/types/log.d.ts

@@ -0,0 +1,24 @@
+import type { Warning } from '@rsvelte/compiler';
+
+export interface LogFn extends SimpleLogFn {
+	(message: string, payload?: unknown, namespace?: string): void;
+
+	enabled: boolean;
+	once: SimpleLogFn;
+}
+
+export interface SimpleLogFn {
+	(message: string, payload?: unknown, namespace?: string): void;
+}
+
+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 type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'silent';

package/src/types/options.d.ts

@@ -0,0 +1,21 @@
+import type { CompileOptions } from '@rsvelte/compiler';
+import type { ViteDevServer } from 'vite';
+// eslint-disable-next-line n/no-missing-import
+import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
+import type { Options } from '../public.d.ts';
+
+export interface PreResolvedOptions extends Options {
+	// these options are non-nullable after resolve
+	compilerOptions: CompileOptions;
+	// extra options
+	root: string;
+	isBuild: boolean;
+	isServe: boolean;
+	isDebug: boolean;
+}
+
+export interface ResolvedOptions extends PreResolvedOptions {
+	isProduction: boolean;
+	server?: ViteDevServer;
+	stats?: VitePluginSvelteStats;
+}

package/src/types/plugin-api.d.ts

@@ -0,0 +1,15 @@
+import type { ResolvedOptions } from './options.d.ts';
+import type { IdFilter, IdParser } from './id.d.ts';
+import type { CompileSvelte } from './compile.d.ts';
+
+export interface PluginAPI {
+	options: ResolvedOptions;
+	filter: IdFilter;
+	idParser: IdParser;
+	compileSvelte: CompileSvelte;
+	/**
+	 * @deprecated  use 'filter' instead
+	 * // TODO remove in next major
+	 */
+	idFilter: IdFilter;
+}

package/src/types/vite-plugin-svelte-stats.d.ts

@@ -0,0 +1,30 @@
+export interface Stat {
+	file: string;
+	pkg?: string;
+	start: number;
+	end: number;
+}
+
+export interface StatCollection {
+	name: string;
+	options: CollectionOptions;
+
+	start: (file: string) => () => void;
+	stats: Stat[];
+	packageStats?: PackageStats[];
+	collectionStart: number;
+	duration?: number;
+	finish: () => Promise<void> | void;
+	finished: boolean;
+}
+
+export interface PackageStats {
+	pkg: string;
+	files: number;
+	duration: number;
+}
+
+export interface CollectionOptions {
+	logInProgress: (collection: StatCollection, now: number) => boolean;
+	logResult: (collection: StatCollection) => boolean;
+}