@vigla/vite-plugin 0.0.0-stage → 0.1.1

package/src/options.ts

@@ -0,0 +1,257 @@
+import path from 'node:path';
+import process from 'node:process';
+import deepmerge from 'deepmerge';
+import {
+	normalizePath,
+	type ConfigEnv,
+	type ResolvedConfig,
+	type UserConfig,
+	type ViteDevServer
+} from 'vite';
+import type { CompileOptions } from './compiler.ts';
+import { loadConfigFile } from './config-file.ts';
+import type { FrontEnd } from './front-end.ts';
+import { ownNames, type Identity, type Names } from './identity.ts';
+import type { Log } from './log.ts';
+import type { Config, Options } from './public.ts';
+
+export type RawOptions = Partial<Options>;
+
+export interface PreResolvedOptions extends Options {
+	root: string;
+	isBuild: boolean;
+	isServe: boolean;
+	isDebug: boolean;
+	extensions: string[];
+	emitCss: boolean;
+	prebundleLibraries: boolean;
+}
+
+export interface ResolvedOptions extends PreResolvedOptions {
+	compilerOptions: CompileOptions;
+	isProduction: boolean;
+	server?: ViteDevServer;
+}
+
+const rootOptions = new Set(['extensions', 'compilerOptions', 'preprocess', 'onwarn']);
+
+function pluginOptions(names: Names): Set<string> {
+	return new Set([
+		'include',
+		'exclude',
+		'emitCss',
+		'disableDependencyReinclusion',
+		names.prebundle,
+		'inspector',
+		'dynamicCompileOptions',
+		'experimental'
+	]);
+}
+
+function toOwnNames(source: Record<string, unknown>, names: Names): Record<string, unknown> {
+	const result = { ...source };
+	if (names.prebundle !== ownNames.prebundle && names.prebundle in result) {
+		result[ownNames.prebundle] = result[names.prebundle];
+		delete result[names.prebundle];
+	}
+	const experimental = result.experimental as Record<string, unknown> | undefined;
+	if (
+		names.resolveWarnings !== ownNames.resolveWarnings &&
+		experimental != null &&
+		names.resolveWarnings in experimental
+	) {
+		const renamed = {
+			...experimental,
+			[ownNames.resolveWarnings]: experimental[names.resolveWarnings]
+		};
+		delete renamed[names.resolveWarnings];
+		result.experimental = renamed;
+	}
+	return result;
+}
+
+export function arraify<T>(value: T | T[] | null | undefined): T[] {
+	return value == null ? [] : Array.isArray(value) ? value : [value];
+}
+
+export function validateInlineOptions(
+	options: RawOptions | undefined,
+	{ names, log }: Identity
+): void {
+	const accepted = new Set(['configFile', ...pluginOptions(names), ...rootOptions]);
+	const invalid = Object.keys(options ?? {}).filter((key) => !accepted.has(key));
+	if (invalid.length > 0) {
+		log.warn(
+			`invalid plugin ${invalid.length === 1 ? 'option' : 'options'} ${invalid.map((key) => `\`${key}\``).join(', ')} in inline config`
+		);
+	}
+}
+
+function convertPluginOptions(
+	config: (Partial<Config> & { configFile?: string }) | undefined,
+	{ names, messages, log }: Identity
+): RawOptions | undefined {
+	if (!config) return undefined;
+	const pluginKeys = pluginOptions(names);
+	const misplaced = Object.keys(config).filter((key) => pluginKeys.has(key));
+	if (misplaced.length > 0) {
+		throw new Error(messages.optionsMisplaced(misplaced.join(', ')));
+	}
+	if (!config.vitePlugin) return config as RawOptions;
+	const plugin = config.vitePlugin as Record<string, unknown>;
+	const keys = Object.keys(plugin);
+	const atRoot = keys.filter((key) => rootOptions.has(key));
+	if (atRoot.length > 0) {
+		throw new Error(messages.optionsAtRoot(atRoot.join(', ')));
+	}
+	const duplicate = keys.filter((key) => Object.prototype.hasOwnProperty.call(config, key));
+	if (duplicate.length > 0) {
+		throw new Error(messages.optionsDuplicate(duplicate.join(', ')));
+	}
+	const unknown = keys.filter((key) => !pluginKeys.has(key));
+	if (unknown.length > 0) {
+		log.warn(messages.optionsUnknown(unknown.join(', ')));
+		for (const key of unknown) delete plugin[key];
+	}
+	const result: Record<string, unknown> = { ...config, ...plugin };
+	delete result.vitePlugin;
+	return result as RawOptions;
+}
+
+function mergeConfigs<T>(...configs: (object | undefined)[]): T {
+	let result: object = {};
+	for (const config of configs) {
+		if (config == null) continue;
+		result = deepmerge(result, config, { arrayMerge: (target, source) => source ?? target });
+	}
+	return result as T;
+}
+
+export function viteRoot(config: UserConfig): string {
+	return normalizePath(config.root ? path.resolve(config.root) : process.cwd());
+}
+
+export async function preResolveOptions(
+	inline: RawOptions | undefined,
+	viteUserConfig: UserConfig,
+	viteEnv: ConfigEnv,
+	frontEnds: readonly FrontEnd[],
+	identity: Identity
+): Promise<PreResolvedOptions> {
+	const { names, history, log } = identity;
+	const root = viteRoot(viteUserConfig);
+	const isBuild = viteEnv.command === 'build';
+	const defaults = {
+		extensions: [...new Set(frontEnds.flatMap((frontEnd) => frontEnd.components))],
+		emitCss: true,
+		[names.prebundle]: !isBuild
+	};
+	const stems = frontEnds.map((frontEnd) => frontEnd.config);
+	const loaded = convertPluginOptions(
+		await loadConfigFile({ ...viteUserConfig, root }, inline, stems, identity),
+		identity
+	);
+	const extra = {
+		root,
+		isBuild,
+		isServe: viteEnv.command === 'serve',
+		isDebug: process.env.DEBUG != null
+	};
+	const merged = mergeConfigs<Record<string, unknown>>(defaults, loaded, inline ?? {}, extra);
+	if (loaded?.configFile) merged.configFile = loaded.configFile;
+	history.options?.(merged, log);
+	return toOwnNames(merged, names) as unknown as PreResolvedOptions;
+}
+
+function enforceOptionsForHmr(
+	options: ResolvedOptions,
+	viteConfig: ResolvedConfig,
+	frontEnds: readonly FrontEnd[],
+	{ names, messages, log }: Identity
+): void {
+	const compilerOptions = options.compilerOptions;
+	if (compilerOptions.hmr && viteConfig.server?.hmr === false) {
+		log.warn(
+			'vite config server.hmr is false but compilerOptions.hmr is true. Forcing compilerOptions.hmr to false as it would not work.'
+		);
+		compilerOptions.hmr = false;
+	}
+	const extension = frontEnds[0]?.components[0];
+	if (
+		extension &&
+		options.isServe &&
+		compilerOptions.hmr &&
+		options.emitCss &&
+		compilerOptions.cssHash
+	) {
+		let usesFilename = false;
+		let usesCss = false;
+		compilerOptions.cssHash({
+			get filename() {
+				usesFilename = true;
+				return `Foo${extension}`;
+			},
+			get css() {
+				usesCss = true;
+				return '.foo{}';
+			},
+			name: 'Foo',
+			hash: (input) => input
+		});
+		if (!usesFilename || usesCss) {
+			const link = names.links.cssHash;
+			log.warn(`${messages.cssHash}${link ? ` See ${link} for more information.` : ''}`);
+		}
+	}
+}
+
+function enforceOptionsForProduction(options: ResolvedOptions, log: Log): void {
+	if (!options.isProduction) return;
+	if (options.compilerOptions.hmr) {
+		log.warn(
+			'you are building for production but compilerOptions.hmr is true, forcing it to false'
+		);
+		options.compilerOptions.hmr = false;
+	}
+	if (options.compilerOptions.dev) {
+		log.warn(
+			'you are building for production but compilerOptions.dev is true, forcing it to false'
+		);
+		options.compilerOptions.dev = false;
+	}
+}
+
+function removeIgnoredOptions(options: ResolvedOptions, { name, messages, log }: Identity): void {
+	const ignored = ['generate', 'format', 'filename'];
+	const passed = Object.keys(options.compilerOptions ?? {}).filter((key) => ignored.includes(key));
+	if (passed.length === 0) return;
+	log.warn(messages.controlledOptions(name, passed.join(', ')));
+	for (const key of passed) delete options.compilerOptions[key];
+}
+
+export function resolveOptions(
+	preResolved: PreResolvedOptions,
+	viteConfig: ResolvedConfig,
+	frontEnds: readonly FrontEnd[],
+	identity: Identity
+): ResolvedOptions {
+	const defaults = {
+		compilerOptions: {
+			css: preResolved.emitCss ? 'external' : 'injected',
+			dev: !viteConfig.isProduction,
+			hmr:
+				!viteConfig.isProduction &&
+				!preResolved.isBuild &&
+				viteConfig.server &&
+				viteConfig.server.hmr !== false
+		}
+	};
+	const extra = { root: viteConfig.root, isProduction: viteConfig.isProduction };
+	const merged = mergeConfigs<ResolvedOptions>(defaults, preResolved, extra);
+	const { log } = identity;
+	removeIgnoredOptions(merged, identity);
+	identity.history.config?.(viteConfig, log);
+	enforceOptionsForHmr(merged, viteConfig, frontEnds, identity);
+	enforceOptionsForProduction(merged, log);
+	return merged;
+}

package/src/plugins/compile-module.ts

@@ -0,0 +1,65 @@
+import type { Plugin } from 'vite';
+import type { PluginAPI } from '../api.ts';
+import { dynamicOptions } from '../compile.ts';
+import type { CompileError, CompileOptions } from '../compiler.ts';
+import { toRollupError } from '../error.ts';
+import { buildModuleIdFilter, buildModuleIdParser, type ModuleIdParser } from '../id.ts';
+import type { Identity } from '../identity.ts';
+import { logCompilerWarnings } from '../warnings.ts';
+
+export function compileModule(api: PluginAPI, identity: Identity): Plugin {
+	const { name, log } = identity;
+	let idParser: ModuleIdParser;
+	const plugin: Plugin = {
+		name: `${name}:compile-module`,
+		enforce: 'post',
+		configResolved() {
+			Object.assign(plugin.transform as object, {
+				filter: buildModuleIdFilter(api.options, api.frontEnds)
+			});
+			idParser = buildModuleIdParser(api.options, api.frontEnds, identity);
+		},
+		transform: {
+			async handler(code, id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const request = idParser(id, ssr);
+				if (!request) return undefined;
+				const filename = request.filename;
+				const compileOptions: CompileOptions = {
+					...api.moduleOptions,
+					generate: ssr ? 'server' : 'client',
+					filename
+				};
+				const dynamic = await dynamicOptions(
+					api.options,
+					filename,
+					code,
+					compileOptions,
+					this.environment,
+					log,
+					'compileModule'
+				);
+				const final: CompileOptions = dynamic ? { ...compileOptions, ...dynamic } : compileOptions;
+				if (dynamic?.experimental) {
+					final.experimental = { ...compileOptions.experimental, ...dynamic.experimental };
+				}
+
+				if (log.debug.enabled) {
+					log.debug(
+						`final module options for ${filename}: ${JSON.stringify(final)}`,
+						undefined,
+						'compileModule'
+					);
+				}
+				try {
+					const result = request.frontEnd.compiler.compileModule(code, final);
+					logCompilerWarnings(request, result.warnings, api.options, identity);
+					return { code: result.js.code, map: result.js.map as never };
+				} catch (error) {
+					throw toRollupError(error as CompileError, api.options);
+				}
+			}
+		}
+	};
+	return plugin;
+}

package/src/plugins/compile.ts

@@ -0,0 +1,49 @@
+import type { Plugin } from 'vite';
+import type { PluginAPI } from '../api.ts';
+import { compileComponent, type Compiled } from '../compile.ts';
+import type { CompileError } from '../compiler.ts';
+import { toRollupError } from '../error.ts';
+import type { Identity } from '../identity.ts';
+import { logCompilerWarnings } from '../warnings.ts';
+
+export function compile(api: PluginAPI, identity: Identity): Plugin {
+	const { name, names } = identity;
+	const plugin: Plugin = {
+		name: `${name}:compile`,
+		configResolved() {
+			Object.assign(plugin.transform as object, { filter: api.filter });
+		},
+		transform: {
+			async handler(code, id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const request = api.idParser(id, ssr);
+				if (!request || request.raw) return undefined;
+				let compiled: Compiled;
+				try {
+					compiled = await compileComponent(
+						request,
+						code,
+						api.options,
+						this.environment,
+						identity,
+						this.getCombinedSourcemap() as unknown as object
+					);
+				} catch (error) {
+					throw toRollupError(error as CompileError, api.options);
+				}
+				if (compiled.compiled.warnings) {
+					logCompilerWarnings(request, compiled.compiled.warnings, api.options, identity);
+				}
+				return {
+					code: compiled.compiled.js.code,
+					map: compiled.compiled.js.map as never,
+					moduleType: 'js',
+					meta: {
+						[names.metaKey]: { css: compiled.compiled.css }
+					}
+				};
+			}
+		}
+	};
+	return plugin;
+}

package/src/plugins/configure.ts

@@ -0,0 +1,63 @@
+import process from 'node:process';
+import type { Plugin } from 'vite';
+import type { PluginAPI } from '../api.ts';
+import { frontEnds } from '../front-end.ts';
+import { buildIdFilter, buildIdParser } from '../id.ts';
+import type { Identity } from '../identity.ts';
+import {
+	arraify,
+	preResolveOptions,
+	resolveOptions,
+	validateInlineOptions,
+	viteRoot,
+	type PreResolvedOptions,
+	type RawOptions
+} from '../options.ts';
+import { configureStyles } from '../preprocess.ts';
+import { buildExtraViteConfig, ensureEnvironmentResolve } from '../vite-config.ts';
+
+export function configure(api: PluginAPI, identity: Identity, inline?: RawOptions): Plugin {
+	const { log } = identity;
+	validateInlineOptions(inline, identity);
+	let preResolved: PreResolvedOptions;
+	return {
+		name: `${identity.name}:config`,
+		api,
+		enforce: 'pre',
+		config: {
+			order: 'pre',
+			async handler(config, env) {
+				if (process.env.DEBUG) log.setLevel('debug');
+				else if (config.logLevel) log.setLevel(config.logLevel);
+				api.frontEnds = await frontEnds(viteRoot(config));
+				preResolved = await preResolveOptions(inline, config, env, api.frontEnds, identity);
+				await configureStyles(arraify(preResolved.preprocess), config);
+				const extra = await buildExtraViteConfig(preResolved, config, api.frontEnds, identity);
+				log.debug('additional vite config', extra, 'config');
+				return extra;
+			}
+		},
+		configResolved: {
+			order: 'pre',
+			handler(config) {
+				api.options = resolveOptions(preResolved, config, api.frontEnds, identity);
+				api.moduleOptions = {
+					...preResolved.compilerOptions,
+					dev: api.options.compilerOptions.dev
+				};
+				api.filter = buildIdFilter(api.options, api.frontEnds, identity);
+				api.idParser = buildIdParser(api.options, api.frontEnds, identity);
+				log.debug('resolved options', api.options, 'config');
+			}
+		},
+		configEnvironment(name, config, opts) {
+			const resolve = ensureEnvironmentResolve(name, config, opts);
+			const conditions = [...new Set(api.frontEnds.map((frontEnd) => frontEnd.condition))];
+			resolve.mainFields.unshift(...conditions);
+			resolve.conditions.push(...conditions);
+		},
+		configureServer(server) {
+			api.options.server = server;
+		}
+	};
+}

package/src/plugins/hot-update.ts

@@ -0,0 +1,159 @@
+import path from 'node:path';
+import type { EnvironmentModuleNode, Plugin, ViteDevServer } from 'vite';
+import type { PluginAPI } from '../api.ts';
+import { configNames } from '../config-file.ts';
+import type { Identity } from '../identity.ts';
+import type { Log } from '../log.ts';
+
+function normalize(code: string | null | undefined): string | null | undefined {
+	if (code == null) return code;
+	return code
+		.replace(/(\$\.add_locations\(.*), (\[\[[\d, [\]]+]])\)/g, '$1, []')
+		.replace(/[?&]t=\d{13}\b/g, '');
+}
+
+function same(previous: string | null | undefined, next: string | null | undefined): boolean {
+	return (
+		(previous == null && next == null) || (previous != null && next != null && previous === next)
+	);
+}
+
+function changed(
+	previous: string | null | undefined,
+	next: string | null | undefined,
+	id: string | null,
+	log: Log
+): boolean {
+	if (same(previous, next)) return false;
+	const loose = same(normalize(previous), normalize(next));
+	if (loose) {
+		log.debug(
+			`ignoring compiler output change for ${id} as it is equal to previous output after normalization`,
+			undefined,
+			'hmr'
+		);
+	}
+	return !loose;
+}
+
+function watchConfig(
+	api: PluginAPI,
+	{ name, messages, log }: Identity,
+	server: ViteDevServer
+): void {
+	const configFile = api.options.configFile;
+	if (configFile === false) return;
+	const { watcher, ws } = server;
+	const { root, server: serverConfig } = server.config;
+	const restart = (filename: string) => {
+		if (serverConfig.middlewareMode) {
+			const message = messages.configChangeDetected;
+			log.info(message, filename);
+			ws.send({
+				type: 'error',
+				err: { message, stack: '', plugin: name, id: filename }
+			});
+		} else {
+			log.info(messages.configChanged(filename));
+			void server.restart();
+		}
+	};
+	if (configFile) {
+		const onConfig = (filename: string) => {
+			if (filename === configFile) restart(filename);
+		};
+		watcher.on('change', onConfig);
+		watcher.on('unlink', onConfig);
+	} else {
+		const stems = api.frontEnds.map((frontEnd) => frontEnd.config);
+		const candidates = configNames(stems).map((file) => path.join(root, file));
+		watcher.on('add', (filename: string) => {
+			if (candidates.includes(filename)) restart(filename);
+		});
+	}
+}
+
+export function hotUpdate(api: PluginAPI, identity: Identity): Plugin {
+	const { log, virtualStyle } = identity;
+	const results = new Map<string | null, string>();
+	const plugin: Plugin = {
+		name: `${identity.name}:hot-update`,
+		enforce: 'post',
+		configResolved() {
+			Object.assign(plugin.transform as object, {
+				filter: {
+					id: {
+						include: [...api.filter.id.include, virtualStyle],
+						exclude: [
+							/\/node_modules\//,
+							...api.filter.id.exclude.filter((item) => item !== virtualStyle)
+						]
+					}
+				}
+			});
+		},
+		applyToEnvironment(environment) {
+			const enabled = api.options.compilerOptions.hmr && api.options.emitCss;
+			return !!enabled && environment.config.consumer === 'client';
+		},
+		configureServer(server) {
+			const client = Object.values(server.environments).find(
+				(environment) => environment.config.consumer === 'client'
+			);
+			if (client) watchConfig(api, identity, server);
+			else {
+				identity.log.warn(identity.messages.noClientEnvironment);
+			}
+		},
+		buildStart() {
+			results.clear();
+		},
+		transform: {
+			order: 'post',
+			handler(code, id) {
+				results.set(id, code);
+			}
+		},
+		hotUpdate: {
+			order: 'post',
+			async handler(context) {
+				const request = api.idParser(context.file, false, context.timestamp);
+				if (!request) return undefined;
+				const own: EnvironmentModuleNode[] = [];
+				const others: EnvironmentModuleNode[] = [];
+				for (const module of context.modules) {
+					(results.has(module.id) ? own : others).push(module);
+				}
+				if (own.length === 0) return undefined;
+				const previous = own.map((module) => results.get(module.id));
+				const seen = new Set<string>();
+				const transform = async (url: string) => {
+					if (seen.has(url)) return;
+					seen.add(url);
+					await this.environment.transformRequest(url);
+				};
+				await transform(request.filename);
+				const affected: EnvironmentModuleNode[] = [];
+				for (const [index, module] of own.entries()) {
+					await transform(module.url);
+					if (changed(previous[index], results.get(module.id), module.id, log))
+						affected.push(module);
+					else {
+						log.debug(
+							`skipping hot update for ${module.id} because result is unchanged`,
+							undefined,
+							'hmr'
+						);
+					}
+				}
+				log.debug(
+					`hotUpdate for ${request.id} result: [${affected.map((module) => module.id).join(', ')}]`,
+					undefined,
+					'hmr'
+				);
+				return [...affected, ...others];
+			}
+		}
+	};
+	return plugin;
+}

package/src/plugins/load.ts

@@ -0,0 +1,91 @@
+import fs from 'node:fs';
+import type { Plugin } from 'vite';
+import type { PluginAPI } from '../api.ts';
+import type { Css } from '../compiler.ts';
+import type { Identity } from '../identity.ts';
+
+type CssMeta = Record<string, { css?: Css | null } | undefined>;
+
+export function loadCompiledCss(
+	api: PluginAPI,
+	{ name, log, names, virtualStyle }: Identity
+): Plugin {
+	let cached = false;
+	const kept = new Map<string, Css>();
+	const filter = { id: virtualStyle };
+	return {
+		name: `${name}:load-compiled-css`,
+		configResolved(config) {
+			cached = config.command === 'serve' || !!config.build?.watch;
+		},
+		resolveId: {
+			filter,
+			handler(id) {
+				log.debug(`resolveId resolved virtual css module ${id}`, undefined, 'resolve');
+				return id;
+			}
+		},
+		load: {
+			filter,
+			async handler(id) {
+				const ssr = this.environment.config.consumer === 'server';
+				const request = api.idParser(id, ssr);
+				if (!request) return undefined;
+				if (this.environment.mode === 'dev')
+					await this.environment.transformRequest(request.filename);
+				const meta = (moduleId: string) =>
+					(this.getModuleInfo(moduleId)?.meta as CssMeta | undefined)?.[names.metaKey]?.css ??
+					undefined;
+				let css = meta(request.filename);
+				if (!css) {
+					const resolved = await this.resolve(request.filename);
+					if (resolved?.id) css = meta(resolved.id);
+				}
+				if (cached) {
+					if (css) kept.set(request.filename, css);
+					else css = kept.get(request.filename);
+				}
+				if (!css) {
+					log.warn(`failed to load virtual css module ${id}`, undefined, 'load');
+					return undefined;
+				}
+				const { hasGlobal, code, map } = css;
+				return {
+					code,
+					map: map as never,
+					moduleType: 'css',
+					meta:
+						hasGlobal === false
+							? { vite: { cssScopeTo: [request.filename, 'default'] as const } }
+							: undefined
+				};
+			}
+		}
+	};
+}
+
+export function loadCustom(api: PluginAPI, { name, log }: Identity): Plugin {
+	const plugin: Plugin = {
+		name: `${name}:load-custom`,
+		enforce: 'pre',
+		configResolved() {
+			Object.assign(plugin.load as object, { filter: api.filter });
+		},
+		load: {
+			async handler(id) {
+				const config = this.environment.config;
+				const request = api.idParser(id, config.consumer === 'server');
+				if (!request || request.query.url || !config.assetsInclude(request.filename)) {
+					return undefined;
+				}
+				log.debug(
+					`loading ${request.filename} to prevent vite asset handling to turn it into a url by default`,
+					undefined,
+					'load'
+				);
+				return fs.readFileSync(request.filename, 'utf-8');
+			}
+		}
+	};
+	return plugin;
+}