@vigla/vite-plugin 0.0.0-stage → 0.1.1

package/src/preprocess.ts

@@ -0,0 +1,190 @@
+import path from 'node:path';
+import process from 'node:process';
+import loadPostcss from 'postcss-load-config';
+import type { Plugin as PostcssPlugin } from 'postcss';
+import parseValue, { type Node as ValueNode } from 'postcss-value-parser';
+import * as vite from 'vite';
+import type { InlineConfig, ResolvedConfig } from 'vite';
+import type { Preprocessor, PreprocessorGroup } from './compiler.ts';
+import { mapToRelative, removeLangSuffix, type FileRefs } from './maps.ts';
+import type { VitePreprocessOptions } from './public.ts';
+
+type CssTransform = (
+	code: string,
+	filename: string
+) => Promise<{ code: string; map?: FileRefs | null; deps?: Set<string> }>;
+
+type Oxc = (
+	code: string,
+	filename: string,
+	options: object
+) => Promise<{ code: string; map: FileRefs | null }>;
+
+const { isCSSRequest, preprocessCSS, resolveConfig } = vite;
+const transformWithOxc = (vite as unknown as { transformWithOxc: Oxc }).transformWithOxc;
+
+const scriptLangs = ['ts'];
+const separator = '.vite-preprocess';
+
+interface Tagged {
+	__resolvedConfig?: ResolvedConfig | null;
+}
+
+function script(): Preprocessor {
+	return async ({ attributes, content, filename = '' }) => {
+		if (typeof attributes.lang !== 'string' || !scriptLangs.includes(attributes.lang))
+			return undefined;
+		const { code, map } = await transformWithOxc(content, filename, {
+			lang: attributes.lang,
+			target: 'esnext',
+			typescript: { onlyRemoveTypeImports: true }
+		});
+		mapToRelative(map, filename);
+		return { code, map: map ?? undefined };
+	};
+}
+
+function resolved(config: ResolvedConfig | InlineConfig): config is ResolvedConfig {
+	return !!(config as ResolvedConfig).inlineConfig;
+}
+
+function assetUrls(style: Tagged): PostcssPlugin {
+	let resolve: ReturnType<ResolvedConfig['createResolver']> | undefined;
+	return {
+		postcssPlugin: 'vite-preprocess-urls',
+		async OnceExit(root, { result }) {
+			const from = result.opts.from;
+			if (!from || !/\.vite-preprocess\.[^./]+$/.test(from)) return;
+			if (!style.__resolvedConfig)
+				throw new Error('style preprocessing has no resolved Vite config');
+			resolve ??= style.__resolvedConfig.createResolver({
+				preferRelative: true,
+				tryIndex: false,
+				extensions: []
+			});
+			const resolveAsset = resolve;
+			const declarations: Promise<void>[] = [];
+			root.walkDecls((declaration) => {
+				if (!/(?:url|image-set)\(/i.test(declaration.value)) return;
+				const importer = declaration.source?.input.file ?? from;
+				const parsed = parseValue(declaration.value);
+				const assets: Promise<void>[] = [];
+				const rebase = async (node: ValueNode): Promise<void> => {
+					const url = node.value;
+					if (!url || /^(?:[a-z][a-z\d+.-]*:|[/#~])/i.test(url)) return;
+					const suffix = url.search(/[?#]/);
+					const pathname = suffix < 0 ? url : url.slice(0, suffix);
+					const tail = suffix < 0 ? '' : url.slice(suffix);
+					const file = await resolveAsset(decodeURI(pathname), importer);
+					if (!file) return;
+					const relative = vite.normalizePath(path.relative(path.dirname(from), file));
+					node.value = `${encodeURI(relative)}${tail}`;
+				};
+				parsed.walk((node) => {
+					if (node.type !== 'function') return;
+					if (node.value.toLowerCase() === 'url') {
+						const value = node.nodes.find((part) => part.type === 'string' || part.type === 'word');
+						if (value) assets.push(rebase(value));
+						return false;
+					}
+					if (/^(?:-webkit-)?image-set$/i.test(node.value)) {
+						for (const value of node.nodes) {
+							if (value.type === 'string') assets.push(rebase(value));
+						}
+					}
+				});
+				if (assets.length > 0)
+					declarations.push(
+						Promise.all(assets).then(() => {
+							declaration.value = parsed.toString();
+						})
+					);
+			});
+			await Promise.all(declarations);
+		}
+	};
+}
+
+export async function configureStyles(
+	groups: PreprocessorGroup[],
+	config: InlineConfig
+): Promise<void> {
+	for (const group of groups) {
+		const style = group.style as (PreprocessorGroup['style'] & Tagged) | undefined;
+		if (style && '__resolvedConfig' in style) {
+			await cssConfig(style, config);
+			return;
+		}
+	}
+}
+
+async function cssConfig(style: Tagged, config: InlineConfig): Promise<void> {
+	if (config.css?.transformer === 'lightningcss') return;
+	const root = path.resolve(config.root ?? process.cwd());
+	const inline = config.css?.postcss;
+	const postcss =
+		typeof inline === 'object'
+			? inline
+			: await loadPostcss({}, inline ?? root, {
+					stopDir: vite.searchForWorkspaceRoot(root)
+				})
+					.then(({ options, plugins }) => ({ ...options, plugins }))
+					.catch((error: unknown) => {
+						if (!(error instanceof Error) || !error.message.includes('No PostCSS Config found'))
+							throw error;
+						return { plugins: [] };
+					});
+	config.css = {
+		...config.css,
+		postcss: {
+			...postcss,
+			plugins: [...(postcss.plugins ?? []), assetUrls(style)]
+		} as ResolvedConfig['css']['postcss']
+	};
+}
+
+async function cssTransform(
+	style: Tagged,
+	config: ResolvedConfig | InlineConfig
+): Promise<CssTransform> {
+	let resolvedConfig: ResolvedConfig;
+	if (style.__resolvedConfig) resolvedConfig = style.__resolvedConfig;
+	else if (resolved(config)) resolvedConfig = config;
+	else {
+		const build = !process.env.NODE_ENV || process.env.NODE_ENV === 'production';
+		const mode = build ? 'production' : 'development';
+		const standalone = { ...config };
+		await cssConfig(style, standalone);
+		resolvedConfig = await resolveConfig(standalone, build ? 'build' : 'serve', mode, mode, false);
+	}
+	style.__resolvedConfig = resolvedConfig;
+	return (code, filename) =>
+		preprocessCSS(code, filename, resolvedConfig) as ReturnType<CssTransform>;
+}
+
+function style(config: ResolvedConfig | InlineConfig = {}): Preprocessor {
+	let transform: Promise<CssTransform> | CssTransform | undefined;
+	const run = (async ({ attributes, content, filename = '' }) => {
+		const extension = attributes.lang ? `.${attributes.lang}` : '.css';
+		if (attributes.lang && !isCSSRequest(extension)) return undefined;
+		transform ??= cssTransform(run, config).then((ready) => (transform = ready));
+		const ready = await transform;
+		const suffix = `${separator}${extension}`;
+		const { code, map, deps } = await ready(content, `${filename}${suffix}`);
+		removeLangSuffix(map, suffix);
+		mapToRelative(map, filename);
+		const dependencies = deps ? [...deps].filter((dep) => !dep.endsWith(suffix)) : undefined;
+		return { code, map: map ?? undefined, dependencies };
+	}) as Preprocessor & Tagged;
+	run.__resolvedConfig = null;
+	return run;
+}
+
+export function vitePreprocess(options?: VitePreprocessOptions): PreprocessorGroup {
+	const group: PreprocessorGroup = { name: 'vite-preprocess' };
+	if (options?.script === true) group.script = script();
+	if (options?.style !== false) {
+		group.style = style(typeof options?.style === 'object' ? options.style : undefined);
+	}
+	return group;
+}

package/src/public.ts

@@ -0,0 +1,56 @@
+import type { Environment, InlineConfig, ResolvedConfig } from 'vite';
+import type { CompileOptions, PreprocessorGroup, Warning } from './compiler.ts';
+
+type Arrayable<T> = T | T[];
+
+export interface DynamicCompileInput {
+	filename: string;
+	code: string;
+	compileOptions: Partial<CompileOptions>;
+	environment: Environment;
+}
+
+export type DynamicCompileOptions = (
+	data: DynamicCompileInput
+) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
+export interface CompileModuleOptions {
+	infixes?: string[];
+	extensions?: string[];
+	include?: Arrayable<string | RegExp>;
+	exclude?: Arrayable<string | RegExp>;
+}
+
+export interface ExperimentalOptions {
+	sendWarningsToBrowser?: boolean;
+	disableResolveWarnings?: boolean;
+	compileModule?: CompileModuleOptions;
+}
+
+export interface PluginOptions {
+	include?: Arrayable<string | RegExp>;
+	exclude?: Arrayable<string | RegExp>;
+	emitCss?: boolean;
+	disableDependencyReinclusion?: boolean | string[];
+	prebundleLibraries?: boolean;
+	inspector?: boolean | object;
+	dynamicCompileOptions?: DynamicCompileOptions;
+	experimental?: ExperimentalOptions;
+}
+
+export interface Config {
+	extensions?: string[];
+	preprocess?: Arrayable<PreprocessorGroup>;
+	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
+	onwarn?: (warning: Warning, defaultHandler: (warning: Warning) => void) => void;
+	vitePlugin?: PluginOptions;
+}
+
+export interface Options extends Omit<Config, 'vitePlugin'>, PluginOptions {
+	configFile?: string | false;
+}
+
+export interface VitePreprocessOptions {
+	script?: boolean;
+	style?: boolean | InlineConfig | ResolvedConfig;
+}

package/src/vite-config.ts

@@ -0,0 +1,252 @@
+import {
+	defaultClientConditions,
+	defaultClientMainFields,
+	defaultServerConditions,
+	defaultServerMainFields,
+	searchForWorkspaceRoot,
+	type EnvironmentOptions,
+	type UserConfig
+} from 'vite';
+import {
+	crawlFrameworkPkgs,
+	isDepExcluded,
+	isDepExternaled,
+	isDepIncluded,
+	isDepNoExternaled,
+	type CrawlFrameworkPkgsResult
+} from 'vitefu';
+import { shipsNoSources } from './dependencies.ts';
+import type { FrontEnd } from './front-end.ts';
+import type { Identity } from './identity.ts';
+import type { Log } from './log.ts';
+import type { PreResolvedOptions } from './options.ts';
+
+interface Lists {
+	optimizeDeps: { include: string[]; exclude: string[] };
+	ssr: { noExternal: (string | RegExp)[]; external: string[] };
+}
+
+export function deduped(frontEnd: FrontEnd): string[] {
+	return frontEnd.imports.filter((name) => name !== frontEnd.compilerImport);
+}
+
+export function clientImports(frontEnd: FrontEnd): string[] {
+	return deduped(frontEnd).filter(
+		(name) => !name.endsWith('/server') && !name.includes('/server/')
+	);
+}
+
+function escape(text: string): string {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function frontEndLists(config: UserConfig, frontEnds: readonly FrontEnd[], log: Log): Lists {
+	const include: string[] = [];
+	const noExternal: (string | RegExp)[] = [];
+	for (const frontEnd of frontEnds) {
+		if (!isDepExcluded(frontEnd.name, config.optimizeDeps?.exclude ?? [])) {
+			const imports = clientImports(frontEnd);
+			log.debug(
+				`adding bare ${frontEnd.name} packages to optimizeDeps.include: ${imports.join(', ')} `,
+				undefined,
+				'config'
+			);
+			include.push(...imports);
+		} else {
+			log.debug(
+				`"${frontEnd.name}" is excluded in optimizeDeps.exclude, skipped adding it to include.`,
+				undefined,
+				'config'
+			);
+		}
+		if (!isDepExternaled(frontEnd.name, config.ssr?.external ?? [])) {
+			noExternal.push(frontEnd.name, new RegExp(`^${escape(frontEnd.name)}\\/`));
+		}
+	}
+	if (!isDepExternaled('esm-env', config.ssr?.external ?? [])) noExternal.push('esm-env');
+	return { optimizeDeps: { include, exclude: [] }, ssr: { noExternal, external: [] } };
+}
+
+function hasCondition(exports: unknown, conditions: readonly string[]): boolean {
+	if (exports === null || typeof exports !== 'object') return false;
+	let found = false;
+	JSON.stringify(exports, (key, value) => {
+		if (conditions.includes(key)) found = true;
+		return value;
+	});
+	return found;
+}
+
+async function dependencyLists(
+	options: PreResolvedOptions,
+	config: UserConfig,
+	frontEnds: readonly FrontEnd[],
+	{ names: vocabulary, messages, log }: Identity
+): Promise<CrawlFrameworkPkgsResult> {
+	const conditions = frontEnds.map((frontEnd) => frontEnd.condition);
+	const names = new Set(frontEnds.map((frontEnd) => frontEnd.name));
+	const withoutCondition = new Set<string>();
+	const lists = await crawlFrameworkPkgs({
+		root: options.root,
+		workspaceRoot: searchForWorkspaceRoot(options.root),
+		isBuild: options.isBuild,
+		viteUserConfig: config,
+		isFrameworkPkgByJson(manifest) {
+			const condition = hasCondition(manifest.exports, conditions);
+			const field = conditions.some((name) => !!manifest[name]);
+			if (field && !condition) withoutCondition.add(`${manifest.name}@${manifest.version}`);
+			return condition || field;
+		},
+		isSemiFrameworkPkgByJson(manifest) {
+			return [...names].some(
+				(name) => !!manifest.dependencies?.[name] || !!manifest.peerDependencies?.[name]
+			);
+		},
+		isFrameworkPkgByName(name) {
+			return names.has(name) || shipsNoSources(vocabulary, name) ? false : undefined;
+		}
+	});
+	if (
+		!options.isBuild &&
+		!options.experimental?.disableResolveWarnings &&
+		withoutCondition.size > 0
+	) {
+		const link = vocabulary.links.missingCondition;
+		log.info.once(
+			`${messages.missingCondition(conditions)}\n\n${[...withoutCondition].join('\n')}${link ? `\n\nPlease see ${link} for details.` : ''}`
+		);
+	}
+	log.debug('extra config for dependencies generated by vitefu', lists, 'config');
+	if (options.prebundleLibraries) {
+		lists.optimizeDeps.exclude = [];
+		const excluded = config.optimizeDeps?.exclude;
+		lists.optimizeDeps.include = !excluded
+			? []
+			: lists.optimizeDeps.include.filter(
+					(dep) =>
+						dep.includes('>') &&
+						dep
+							.split('>')
+							.slice(0, -1)
+							.some((part) => isDepExcluded(part.trim(), excluded))
+				);
+	}
+	const disabled = options.disableDependencyReinclusion;
+	if (disabled === true) {
+		lists.optimizeDeps.include = lists.optimizeDeps.include.filter((dep) => !dep.includes('>'));
+	} else if (Array.isArray(disabled)) {
+		lists.optimizeDeps.include = lists.optimizeDeps.include.filter((dep) => {
+			if (!dep.includes('>')) return true;
+			const trimmed = dep.replace(/\s+/g, '');
+			return disabled.some((name) => trimmed.includes(`${name}>`));
+		});
+	}
+	log.debug('post-processed extra config for dependencies', lists, 'config');
+	return lists;
+}
+
+function validateViteConfig(
+	extra: UserConfig,
+	config: UserConfig,
+	options: PreResolvedOptions,
+	{ names, log }: Identity
+): void {
+	const { prebundleLibraries, isBuild } = options;
+	if (prebundleLibraries) {
+		const enabled = (option: 'dev' | 'build' | boolean) =>
+			option !== true && option !== (isBuild ? 'build' : 'dev');
+		const warn = (name: string, value: unknown, recommendation: string) =>
+			log.warn.once(
+				`Incompatible options: \`${names.prebundle}: true\` and vite \`${name}: ${JSON.stringify(value)}\` ${isBuild ? 'during build.' : '.'} ${recommendation}`
+			);
+		const disabled = config.optimizeDeps?.disabled ?? 'build';
+		const optimizing = enabled(disabled);
+		if (!isBuild && !optimizing) {
+			warn(
+				'optimizeDeps.disabled',
+				disabled,
+				`Forcing \`optimizeDeps.disabled: "build"\`. Disable ${names.prebundle} or update your vite config to enable optimizeDeps during dev.`
+			);
+			extra.optimizeDeps ??= {};
+			extra.optimizeDeps.disabled = 'build';
+		} else if (isBuild && optimizing) {
+			warn(
+				'optimizeDeps.disabled',
+				disabled,
+				`Disable optimizeDeps or ${names.prebundle} for build if you experience errors.`
+			);
+		}
+	}
+	if (isBuild) {
+		type Optimization = { optimization?: { inlineConst?: boolean } };
+		const build = config.build as
+			| { rolldownOptions?: Optimization; rollupOptions?: Optimization }
+			| undefined;
+		const inlineConst =
+			build?.rolldownOptions?.optimization?.inlineConst ??
+			build?.rollupOptions?.optimization?.inlineConst;
+		if (inlineConst === false) {
+			log.warn(
+				'Your rolldown config contains `optimization.inlineConst: false`. This can lead to increased bundle size and leaked server code in client build.'
+			);
+		}
+	}
+}
+
+export async function buildExtraViteConfig(
+	options: PreResolvedOptions,
+	config: UserConfig,
+	frontEnds: readonly FrontEnd[],
+	identity: Identity
+): Promise<UserConfig> {
+	const { log } = identity;
+	const extra: UserConfig = { resolve: { dedupe: frontEnds.flatMap(deduped) } };
+	const own = frontEndLists(config, frontEnds, log);
+	const deps = await dependencyLists(options, config, frontEnds, identity);
+	extra.optimizeDeps = {
+		include: [
+			...own.optimizeDeps.include,
+			...deps.optimizeDeps.include.filter((dep) => !isDepExcluded(dep, own.optimizeDeps.exclude))
+		],
+		exclude: [
+			...own.optimizeDeps.exclude,
+			...deps.optimizeDeps.exclude.filter((dep) => !isDepIncluded(dep, own.optimizeDeps.include))
+		]
+	};
+	extra.ssr = {
+		external: [
+			...own.ssr.external,
+			...deps.ssr.external.filter((dep) => !isDepNoExternaled(dep, own.ssr.noExternal))
+		],
+		noExternal: [
+			...own.ssr.noExternal,
+			...deps.ssr.noExternal.filter((dep) => !isDepExternaled(dep, own.ssr.external))
+		]
+	};
+	if (config.experimental?.hmrPartialAccept !== false) {
+		log.debug('enabling "experimental.hmrPartialAccept" in vite config', undefined, 'config');
+		extra.experimental = { hmrPartialAccept: true };
+	}
+	validateViteConfig(extra, config, options, identity);
+	return extra;
+}
+
+function client(
+	name: string,
+	config: EnvironmentOptions,
+	opts: { isSsrTargetWebworker?: boolean }
+) {
+	return config.consumer === 'client' || name === 'client' || !!opts.isSsrTargetWebworker;
+}
+
+export function ensureEnvironmentResolve(
+	name: string,
+	config: EnvironmentOptions,
+	opts: { isSsrTargetWebworker?: boolean }
+): { mainFields: string[]; conditions: string[] } {
+	config.resolve ??= {};
+	const onClient = client(name, config, opts);
+	config.resolve.mainFields ??= [...(onClient ? defaultClientMainFields : defaultServerMainFields)];
+	config.resolve.conditions ??= [...(onClient ? defaultClientConditions : defaultServerConditions)];
+	return config.resolve as { mainFields: string[]; conditions: string[] };
+}

package/src/warnings.ts

@@ -0,0 +1,66 @@
+import type { Warning } from './compiler.ts';
+import type { ModuleRequest } from './id.ts';
+import type { Identity } from './identity.ts';
+import { buildExtendedLogMessage, type Log } from './log.ts';
+import type { ResolvedOptions } from './options.ts';
+
+function ignored(warning: Warning, isBuild: boolean, emitCss: boolean): boolean {
+	return (
+		(!emitCss && warning.code === 'css_unused_selector') ||
+		(!isBuild && warning.code === 'css_unused_selector' && warning.message.includes('"*"'))
+	);
+}
+
+function warnDev(log: Log, warning: Warning): void {
+	if (warning.filename?.includes('node_modules')) {
+		if (log.debugs('node-modules-onwarn')) {
+			log.debug(buildExtendedLogMessage(warning), undefined, 'node-modules-onwarn');
+		}
+	} else if (log.info.enabled) {
+		log.info(buildExtendedLogMessage(warning));
+	}
+}
+
+function warnBuild(log: Log, warning: Warning): void {
+	if (warning.filename?.includes('node_modules')) {
+		if (log.debugs('node-modules-onwarn')) {
+			log.debug(buildExtendedLogMessage(warning), warning.frame, 'node-modules-onwarn');
+		}
+	} else if (log.warn.enabled) {
+		log.warn(buildExtendedLogMessage(warning), warning.frame);
+	}
+}
+
+export function logCompilerWarnings(
+	request: ModuleRequest,
+	warnings: Warning[],
+	options: ResolvedOptions,
+	{ log, names }: Identity
+): void {
+	const { emitCss, onwarn, isBuild } = options;
+	const viaSocket = !isBuild && options.experimental?.sendWarningsToBrowser;
+	const handled: Warning[] = [];
+	const base = (warning: Warning) => (isBuild ? warnBuild : warnDev)(log, warning);
+	const warn = viaSocket
+		? (warning: Warning) => {
+				handled.push(warning);
+				base(warning);
+			}
+		: base;
+	const kept = warnings?.filter((warning) => !ignored(warning, isBuild, emitCss)) ?? [];
+	for (const warning of kept) {
+		if (onwarn) onwarn(warning, warn);
+		else warn(warning);
+	}
+	if (!viaSocket) return;
+	log.debug(`sending ${names.warningsEvent} message for ${request.normalizedFilename}`);
+	options.server?.ws?.send(names.warningsEvent, {
+		id: request.id,
+		filename: request.filename,
+		normalizedFilename: request.normalizedFilename,
+		timestamp: request.timestamp,
+		warnings: handled,
+		allWarnings: kept,
+		rawWarnings: warnings
+	});
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.