@sveltejs/vite-plugin-svelte 2.2.0 → 2.4.0

package/src/types/compile.d.ts

@@ -0,0 +1,48 @@
+import type { Processed } from 'svelte/types/compiler/preprocess';
+import type { SvelteRequest } from './id.d.ts';
+import type { ResolvedOptions } from './options.d.ts';
+
+export type CompileSvelte = (
+	svelteRequest: SvelteRequest,
+	code: string,
+	options: Partial<ResolvedOptions>
+) => Promise<CompileData>;
+
+export interface Code {
+	code: string;
+	map?: any;
+	dependencies?: any[];
+}
+
+export interface Compiled {
+	js: Code;
+	css: Code;
+	ast: any; // TODO type
+	warnings: any[]; // TODO type
+	vars: {
+		name: string;
+		export_name: string;
+		injected: boolean;
+		module: boolean;
+		mutated: boolean;
+		reassigned: boolean;
+		referenced: boolean;
+		writable: boolean;
+		referenced_from_script: boolean;
+	}[];
+	stats: {
+		timings: {
+			total: number;
+		};
+	};
+}
+
+export interface CompileData {
+	filename: string;
+	normalizedFilename: string;
+	lang: string;
+	compiled: Compiled;
+	ssr: boolean | undefined;
+	dependencies: string[];
+	preprocessed: Processed;
+}

package/src/types/id.d.ts

@@ -0,0 +1,31 @@
+import type { CompileOptions } from 'svelte/types/compiler/interfaces';
+
+export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all';
+
+export interface RequestQuery {
+	// our own
+	svelte?: boolean;
+	type?: SvelteQueryTypes;
+	sourcemap?: boolean;
+	compilerOptions?: Pick<
+		CompileOptions,
+		'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' | 'enableSourcemap'
+	>;
+	// vite specific
+	url?: boolean;
+	raw?: boolean;
+	direct?: boolean;
+}
+
+export interface SvelteRequest {
+	id: string;
+	cssId: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+	raw: boolean;
+}
+
+export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined;

package/src/types/log.d.ts

@@ -0,0 +1,24 @@
+import type { Warning } from '../index.d.ts';
+
+export interface LogFn extends SimpleLogFn {
+	(message: string, payload?: any, namespace?: string): void;
+
+	enabled: boolean;
+	once: SimpleLogFn;
+}
+
+export interface SimpleLogFn {
+	(message: string, payload?: any, 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,20 @@
+import type { CompileOptions } from 'svelte/types/compiler/interfaces';
+import type { ViteDevServer } from 'vite';
+import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
+import type { Options } from '../index.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,11 @@
+import type { ResolvedOptions } from './options.d.ts';
+
+export interface PluginAPI {
+	/**
+	 * must not be modified, should not be used outside of vite-plugin-svelte repo
+	 * @internal
+	 * @experimental
+	 */
+	options?: ResolvedOptions;
+	// TODO expose compile cache here so other utility plugins can use it
+}

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;
+}

package/src/utils/{compile.ts → compile.js}

@@ -1,28 +1,24 @@
-import { CompileOptions, ResolvedOptions } from './options';
 import { compile, preprocess, walk } from 'svelte/compiler';
 // @ts-ignore
 import { createMakeHot } from 'svelte-hmr';
-import { SvelteRequest } from './id';
-import { safeBase64Hash } from './hash';
-import { log } from './log';
-import { StatCollection } from './vite-plugin-svelte-stats';
-//eslint-disable-next-line node/no-missing-import
-import type { Processed } from 'svelte/types/compiler/preprocess';
-import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess';
-import { mapToRelative } from './sourcemaps';
+import { safeBase64Hash } from './hash.js';
+import { log } from './log.js';
 
-const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
+import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess.js';
+import { mapToRelative } from './sourcemaps.js';
 
-export type CompileSvelte = ReturnType<typeof _createCompileSvelte>;
+const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
-const _createCompileSvelte = (makeHot: Function) => {
-	let stats: StatCollection | undefined;
+/**
+ * @param {Function} [makeHot]
+ * @returns {import('../types/compile.d.ts').CompileSvelte}
+ */
+export const _createCompileSvelte = (makeHot) => {
+	/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+	let stats;
 	const devStylePreprocessor = createInjectScopeEverythingRulePreprocessorGroup();
-	return async function compileSvelte(
-		svelteRequest: SvelteRequest,
-		code: string,
-		options: Partial<ResolvedOptions>
-	): Promise<CompileData> {
+	/** @type {import('../types/compile.d.ts').CompileSvelte} */
+	return async function compileSvelte(svelteRequest, code, options) {
 		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
 		const { emitCss = true } = options;
 		const dependencies = [];
@@ -51,8 +47,8 @@ const _createCompileSvelte = (makeHot: Function) => {
 				// also they for hmr updates too
 			}
 		}
-
-		const compileOptions: CompileOptions = {
+		/** @type {import('../index.d.ts').CompileOptions} */
+		const compileOptions = {
 			...options.compilerOptions,
 			filename: normalizedFilename, // use normalized here to avoid bleeding absolute fs path
 			generate: ssr ? 'ssr' : 'dom',
@@ -98,8 +94,10 @@ const _createCompileSvelte = (makeHot: Function) => {
 			mapToRelative(preprocessed?.map, filename);
 		}
 		if (raw && svelteRequest.query.type === 'preprocessed') {
-			// shortcut
-			return { preprocessed: preprocessed ?? { code } } as CompileData;
+			// @ts-expect-error shortcut
+			return /** @type {import('../types/compile.d.ts').CompileData} */ {
+				preprocessed: preprocessed ?? { code }
+			};
 		}
 		const finalCode = preprocessed ? preprocessed.code : code;
 		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
@@ -157,8 +155,6 @@ const _createCompileSvelte = (makeHot: Function) => {
 			}
 		}
 
-		compiled.js.dependencies = dependencies;
-
 		return {
 			filename,
 			normalizedFilename,
@@ -171,7 +167,12 @@ const _createCompileSvelte = (makeHot: Function) => {
 		};
 	};
 };
-function buildMakeHot(options: ResolvedOptions) {
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {Function | undefined}
+ */
+function buildMakeHot(options) {
 	const needsMakeHot = options.hot !== false && options.isServe && !options.isProduction;
 	if (needsMakeHot) {
 		// @ts-ignore
@@ -182,51 +183,16 @@ function buildMakeHot(options: ResolvedOptions) {
 			walk,
 			hotApi,
 			adapter,
-			hotOptions: { noOverlay: true, ...(options.hot as object) }
+			hotOptions: { noOverlay: true, .../** @type {object} */ (options.hot) }
 		});
 	}
 }
 
-export function createCompileSvelte(options: ResolvedOptions) {
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/compile.d.ts').CompileSvelte}
+ */
+export function createCompileSvelte(options) {
 	const makeHot = buildMakeHot(options);
 	return _createCompileSvelte(makeHot);
 }
-
-export interface Code {
-	code: string;
-	map?: any;
-	dependencies?: any[];
-}
-
-export interface Compiled {
-	js: Code;
-	css: Code;
-	ast: any; // TODO type
-	warnings: any[]; // TODO type
-	vars: {
-		name: string;
-		export_name: string;
-		injected: boolean;
-		module: boolean;
-		mutated: boolean;
-		reassigned: boolean;
-		referenced: boolean;
-		writable: boolean;
-		referenced_from_script: boolean;
-	}[];
-	stats: {
-		timings: {
-			total: number;
-		};
-	};
-}
-
-export interface CompileData {
-	filename: string;
-	normalizedFilename: string;
-	lang: string;
-	compiled: Compiled;
-	ssr: boolean | undefined;
-	dependencies: string[];
-	preprocessed: Processed;
-}

package/src/utils/{dependencies.ts → dependencies.js}

@@ -1,17 +1,20 @@
 import path from 'path';
 import fs from 'fs/promises';
-// eslint-disable-next-line node/no-missing-import
 import { findDepPkgJsonPath } from 'vitefu';
 
-interface DependencyData {
-	dir: string;
-	pkg: Record<string, any>;
-}
+/**
+ * @typedef {{
+ *  dir: string;
+ *	pkg: Record<string, any>;
+ * }} DependencyData
+ */
 
-export async function resolveDependencyData(
-	dep: string,
-	parent: string
-): Promise<DependencyData | undefined> {
+/**
+ * @param {string} dep
+ * @param {string} parent
+ * @returns {Promise<DependencyData | undefined>}
+ */
+export async function resolveDependencyData(dep, parent) {
 	const depDataPath = await findDepPkgJsonPath(dep, parent);
 	if (!depDataPath) return undefined;
 	try {
@@ -69,10 +72,10 @@ const COMMON_PREFIXES_WITHOUT_SVELTE_FIELD = [
  *
  * This speeds up the find process as we don't have to try and require the package.json for all of them
  *
- * @param dependency {string}
+ * @param {string} dependency
  * @returns {boolean} true if it is a dependency without a svelte field
  */
-export function isCommonDepWithoutSvelteField(dependency: string): boolean {
+export function isCommonDepWithoutSvelteField(dependency) {
 	return (
 		COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD.includes(dependency) ||
 		COMMON_PREFIXES_WITHOUT_SVELTE_FIELD.some(

package/src/utils/{error.ts → error.js}

@@ -1,16 +1,15 @@
-import { RollupError } from 'rollup';
-import { ResolvedOptions, Warning } from './options';
-import { buildExtendedLogMessage } from './log';
-import { PartialMessage } from 'esbuild';
+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 error a svelte compiler error, which is a mix of Warning and an error
- * @returns {RollupError} the converted error
+ * @param {import('svelte/types/compiler/interfaces').Warning & Error} 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: Warning & Error, options: ResolvedOptions): RollupError {
+export function toRollupError(error, options) {
 	const { filename, frame, start, code, name, stack } = error;
-	const rollupError: RollupError = {
+	/** @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
@@ -30,12 +29,14 @@ export function toRollupError(error: Warning & Error, options: ResolvedOptions):
 
 /**
  * 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
+ * @param {import('svelte/types/compiler/interfaces').Warning & Error} error a svelte compiler error, which is a mix of Warning and an error
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('esbuild').PartialMessage} the converted error
  */
-export function toESBuildError(error: Warning & Error, options: ResolvedOptions): PartialMessage {
+export function toESBuildError(error, options) {
 	const { filename, frame, start, stack } = error;
-	const partialMessage: PartialMessage = {
+	/** @type {import('esbuild').PartialMessage} */
+	const partialMessage = {
 		text: buildExtendedLogMessage(error)
 	};
 	if (start) {
@@ -54,8 +55,12 @@ export function toESBuildError(error: Warning & Error, options: ResolvedOptions)
 
 /**
  * extract line with number from codeframe
+ *
+ * @param {number} lineNo
+ * @param {string} [frame]
+ * @returns {string}
  */
-function lineFromFrame(lineNo: number, frame?: string): string {
+function lineFromFrame(lineNo, frame) {
 	if (!frame) {
 		return '';
 	}
@@ -83,8 +88,10 @@ function lineFromFrame(lineNo: number, frame?: string): string {
  *  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?: string): string {
+function formatFrameForVite(frame) {
 	if (!frame) {
 		return '';
 	}

package/src/utils/{esbuild.ts → esbuild.js}

@@ -1,18 +1,20 @@
 import { readFileSync } 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';
-import { StatCollection } from './vite-plugin-svelte-stats';
+import { log } from './log.js';
+import { toESBuildError } from './error.js';
 
-type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
-type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
+/**
+ * @typedef {NonNullable<import('vite').DepOptimizationOptions['esbuildOptions']>} EsbuildOptions
+ * @typedef {NonNullable<EsbuildOptions['plugins']>[number]} EsbuildPlugin
+ */
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
-export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {EsbuildPlugin}
+ */
+export function esbuildSveltePlugin(options) {
 	return {
 		name: 'vite-plugin-svelte:optimize-svelte',
 		setup(build) {
@@ -22,7 +24,8 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 
 			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
 			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
-			let statsCollection: StatCollection | undefined;
+			/** @type {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection | undefined} */
+			let statsCollection;
 			build.onStart(() => {
 				statsCollection = options.stats?.startCollection('prebundle libraries', {
 					logResult: (c) => c.stats.length > 1
@@ -44,17 +47,20 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	};
 }
 
-async function compileSvelte(
-	options: ResolvedOptions,
-	{ filename, code }: { filename: string; code: string },
-	statsCollection?: StatCollection
-): Promise<string> {
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {{ filename: string; code: string }} input
+ * @param {import('../types/vite-plugin-svelte-stats.d.ts').StatCollection} [statsCollection]
+ * @returns {Promise<string>}
+ */
+async function compileSvelte(options, { filename, code }, statsCollection) {
 	let css = options.compilerOptions.css;
 	if (css !== 'none') {
 		// TODO ideally we'd be able to externalize prebundled styles too, but for now always put them in the js
 		css = 'injected';
 	}
-	const compileOptions: CompileOptions = {
+	/** @type {import('../index.d.ts').CompileOptions} */
+	const compileOptions = {
 		...options.compilerOptions,
 		css,
 		filename,
@@ -93,7 +99,7 @@ async function compileSvelte(
 		  }
 		: compileOptions;
 	const endStat = statsCollection?.start(filename);
-	const compiled = compile(finalCode, finalCompileOptions) as Compiled;
+	const compiled = compile(finalCode, finalCompileOptions);
 	if (endStat) {
 		endStat();
 	}

package/src/utils/{hash.ts → hash.js}

@@ -5,7 +5,13 @@ const hashes = Object.create(null);
 //TODO shorter?
 const hash_length = 12;
 
-export function safeBase64Hash(input: string) {
+/**
+ * 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];
 	}
@@ -19,7 +25,8 @@ export function safeBase64Hash(input: string) {
 	return hash;
 }
 
-const replacements: { [key: string]: string } = {
+/** @type {Record<string, string>} */
+const replacements = {
 	'+': '-',
 	'/': '_',
 	'=': ''
@@ -27,6 +34,10 @@ const replacements: { [key: string]: string } = {
 
 const replaceRE = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
 
-function toSafe(base64: string) {
+/**
+ * @param {string} base64
+ * @returns {string}
+ */
+function toSafe(base64) {
 	return base64.replace(replaceRE, (x) => replacements[x]);
 }