@vigla/vite-plugin 0.0.0-stage → 0.1.0

package/src/compile.ts

@@ -0,0 +1,96 @@
+import { basename, combine } from 'vigla/compiler';
+import type { Environment } from 'vite';
+import type { CompileError, CompileOptions, CompileResult } from './compiler.ts';
+import { enhanceCompileError } from './error.ts';
+import type { ComponentRequest } from './id.ts';
+import type { Identity } from './identity.ts';
+import type { Log } from './log.ts';
+import { mapToRelative } from './maps.ts';
+import type { ResolvedOptions } from './options.ts';
+
+export interface Compiled {
+	filename: string;
+	normalizedFilename: string;
+	cssId: string;
+	compiled: CompileResult;
+	ssr: boolean;
+}
+
+export async function dynamicOptions(
+	options: ResolvedOptions,
+	filename: string,
+	code: string,
+	compileOptions: CompileOptions,
+	environment: Environment,
+	log: Log,
+	scope: string
+): Promise<Partial<CompileOptions> | undefined> {
+	const dynamic = await options.dynamicCompileOptions?.({
+		filename,
+		code,
+		compileOptions,
+		environment
+	});
+	if (dynamic && log.debug.enabled) {
+		log.debug(
+			`dynamic compile options for  ${filename}: ${JSON.stringify(dynamic)}`,
+			undefined,
+			scope
+		);
+	}
+	return dynamic || undefined;
+}
+
+export async function compileComponent(
+	request: ComponentRequest,
+	code: string,
+	options: ResolvedOptions,
+	environment: Environment,
+	{ log, names }: Identity,
+	sourcemap?: object
+): Promise<Compiled> {
+	const { filename, normalizedFilename, cssId, ssr, raw, frontEnd } = request;
+	const compileOptions: CompileOptions = {
+		...options.compilerOptions,
+		filename,
+		generate: ssr ? 'server' : 'client'
+	};
+	const dynamic = await dynamicOptions(
+		options,
+		filename,
+		code,
+		compileOptions,
+		environment,
+		log,
+		'compile'
+	);
+	const final: CompileOptions = dynamic ? { ...compileOptions, ...dynamic } : compileOptions;
+	delete final.sourcemap;
+	let compiled: CompileResult;
+	try {
+		compiled = frontEnd.compiler.compile(code, { ...final, filename });
+		if (
+			options.server?.config.experimental.hmrPartialAccept &&
+			compiled.js.code.includes('import.meta.hot.accept(')
+		) {
+			compiled.js.code = compiled.js.code.replaceAll(
+				'import.meta.hot.accept(',
+				'import.meta.hot.acceptExports(["default"],'
+			);
+		}
+	} catch (error) {
+		enhanceCompileError(error as CompileError, code, options.preprocess, names.links);
+		throw error;
+	}
+	if (compiled.css?.map && sourcemap) {
+		compiled.css.map = combine(basename(filename), [compiled.css.map, sourcemap] as Parameters<
+			typeof combine
+		>[1]) as typeof compiled.css.map;
+	}
+	mapToRelative(compiled.js?.map, filename);
+	mapToRelative(compiled.css?.map, filename);
+	if (!raw && options.emitCss !== false && (compiled.css?.code?.trim().length ?? 0) > 0) {
+		compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
+	}
+	return { filename, normalizedFilename, cssId, compiled, ssr };
+}

package/src/compiler.ts

@@ -0,0 +1,129 @@
+import type { Format } from 'vigla/compiler';
+
+export interface Position {
+	line: number;
+	column: number;
+	character?: number;
+}
+
+export interface Warning {
+	code: string;
+	message: string;
+	filename?: string;
+	start?: Position;
+	end?: Position;
+	frame?: string;
+}
+
+export interface CompileError extends Error, Warning {}
+
+export interface SourceMap {
+	file?: string;
+	sources?: (string | null)[];
+	sourceRoot?: string;
+	mappings: unknown;
+	toUrl?: () => string;
+}
+
+export interface Code {
+	code: string;
+	map: SourceMap | null;
+}
+
+export interface Css extends Code {
+	hasGlobal: boolean;
+}
+
+export interface CompileResult {
+	js: Code;
+	css: Css | null;
+	warnings: Warning[];
+}
+
+export interface CssHashInput {
+	name: string;
+	filename: string;
+	css: string;
+	hash: (input: string) => string;
+}
+
+export interface Experimental {
+	async?: boolean;
+	[name: string]: unknown;
+}
+
+export interface ModuleCompileOptions {
+	filename?: string;
+	rootDir?: string;
+	dev?: boolean;
+	generate?: 'client' | 'server' | false;
+	warningFilter?: (warning: Warning) => boolean;
+	experimental?: Experimental;
+}
+
+export interface CompileOptions extends ModuleCompileOptions {
+	css?: 'injected' | 'external';
+	cssHash?: (input: CssHashInput) => string;
+	hmr?: boolean;
+	sourcemap?: object | string;
+	[name: string]: unknown;
+}
+
+export interface Processed {
+	code: string;
+	map?: string | object;
+	dependencies?: string[];
+	attributes?: Record<string, string | boolean>;
+	toString?: () => string;
+}
+
+export type MarkupPreprocessor = (options: {
+	content: string;
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+export type Preprocessor = (options: {
+	content: string;
+	attributes: Record<string, string | boolean>;
+	markup: string;
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+export interface PreprocessorGroup {
+	name?: string;
+	markup?: MarkupPreprocessor;
+	style?: Preprocessor;
+	script?: Preprocessor;
+}
+
+export interface ScriptAttribute {
+	name: string;
+	value: true | readonly { data?: string }[] | object;
+}
+
+export interface Script {
+	attributes: readonly ScriptAttribute[];
+	content: { start: number; end: number; body: readonly object[] };
+}
+
+export interface ParsedComponent {
+	module?: Script | null;
+	instance?: Script | null;
+}
+
+export type Parse = (
+	source: string,
+	options: { modern: true; filename?: string }
+) => ParsedComponent;
+
+export interface Compiler {
+	readonly format?: Format;
+	readonly parse?: Parse;
+	compile(source: string, options: CompileOptions): CompileResult;
+	compileModule(source: string, options: ModuleCompileOptions): CompileResult;
+	preprocess(
+		source: string,
+		preprocessor: PreprocessorGroup | PreprocessorGroup[],
+		options?: { filename?: string }
+	): Promise<Processed>;
+}

package/src/config-file.ts

@@ -0,0 +1,75 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { pathToFileURL } from 'node:url';
+import type { UserConfig } from 'vite';
+import { frontEnds } from './front-end.ts';
+import type { Identity } from './identity.ts';
+import type { Config, Options } from './public.ts';
+
+export type LoadedConfig = Partial<Config> & { configFile?: string };
+
+export function configNames(stems: readonly string[]): string[] {
+	return stems.flatMap((stem) =>
+		['js', 'ts', 'mjs', 'mts'].map((extension) => `${stem}.${extension}`)
+	);
+}
+
+function find(
+	root: string,
+	inline: Partial<Options> | undefined,
+	stems: readonly string[],
+	{ log, messages }: Identity
+): string | undefined {
+	if (inline?.configFile) {
+		const file = path.isAbsolute(inline.configFile)
+			? inline.configFile
+			: path.resolve(root, inline.configFile);
+		if (!fs.existsSync(file)) throw new Error(messages.configNotFound(file));
+		return file;
+	}
+	const existing = configNames(stems)
+		.map((name) => path.resolve(root, name))
+		.filter((file) => fs.existsSync(file));
+	if (existing.length === 0) {
+		log.info(messages.configAbsent(root));
+		return undefined;
+	}
+	if (existing.length > 1) {
+		log.warn(messages.configsMultiple(existing[0]!), existing);
+	}
+	return existing[0];
+}
+
+export async function loadConfigFile(
+	viteConfig: UserConfig | undefined,
+	inline: Partial<Options> | undefined,
+	stems: readonly string[],
+	identity: Identity
+): Promise<LoadedConfig | undefined> {
+	if (inline?.configFile === false) return undefined;
+	const file = find(viteConfig?.root || process.cwd(), inline, stems, identity);
+	if (file === undefined) return undefined;
+	try {
+		const url = `${pathToFileURL(file).href}?t=${fs.statSync(file).mtimeMs}`;
+		const loaded = ((await import(url)) as { default?: Partial<Config> }).default;
+		if (loaded == null) throw new Error(`invalid export in ${file}`);
+		return { ...loaded, configFile: file };
+	} catch (error) {
+		identity.log.error(`failed to import config ${file}`, error);
+		throw error;
+	}
+}
+
+export async function loadConfig(
+	identity: Identity,
+	viteConfig?: UserConfig,
+	inline?: Partial<Options>,
+	stem?: string
+): Promise<LoadedConfig | undefined> {
+	if (inline?.configFile === false) return undefined;
+	const root = viteConfig?.root || process.cwd();
+	const stems =
+		stem === undefined ? (await frontEnds(root)).map((frontEnd) => frontEnd.config) : [stem];
+	return loadConfigFile(viteConfig, inline, stems, identity);
+}

package/src/dependencies.ts

@@ -0,0 +1,47 @@
+import type { Names } from './identity.ts';
+
+const withoutSources = [
+	'@lukeed/uuid',
+	'@playwright/test',
+	'autoprefixer',
+	'cookie',
+	'dotenv',
+	'esbuild',
+	'eslint',
+	'jest',
+	'mdsvex',
+	'playwright',
+	'postcss',
+	'prettier',
+	'tslib',
+	'typescript',
+	'vite',
+	'vitest',
+	'__vite-browser-external'
+];
+
+const prefixesWithoutSources = [
+	'@fontsource/',
+	'@postcss-plugins/',
+	'@rollup/',
+	'@types/',
+	'@typescript-eslint/',
+	'eslint-',
+	'jest-',
+	'postcss-plugin-',
+	'prettier-plugin-',
+	'rollup-plugin-',
+	'vite-plugin-'
+];
+
+export function shipsNoSources(names: Names, dependency: string): boolean {
+	const exact = [...withoutSources, ...names.withoutSources];
+	return (
+		exact.includes(dependency) ||
+		[...prefixesWithoutSources, ...names.withoutSourcesPrefixes].some((prefix) =>
+			prefix.startsWith('@')
+				? dependency.startsWith(prefix)
+				: dependency.substring(dependency.lastIndexOf('/') + 1).startsWith(prefix)
+		)
+	);
+}

package/src/error.ts

@@ -0,0 +1,64 @@
+import type { Rollup } from 'vite';
+import type { CompileError, PreprocessorGroup } from './compiler.ts';
+import type { Links } from './identity.ts';
+import { buildExtendedLogMessage } from './log.ts';
+import { arraify, type ResolvedOptions } from './options.ts';
+
+const styleTag =
+	/<!--[^]*?-->|<style((?:\s+[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"/]+)*\s*)(?:\/>|>([\S\s]*?)<\/style>)/g;
+
+function viteFrame(frame: string | undefined): string {
+	if (!frame) return '';
+	return frame
+		.split('\n')
+		.map((line) => (/^\s+\^/.test(line) ? `   ${line}` : ` ${line.replace(':', ' | ')}`))
+		.join('\n');
+}
+
+export function toRollupError(error: CompileError, options: ResolvedOptions): Rollup.RollupError {
+	const { filename, frame, start, code, name, stack } = error;
+	const converted: Rollup.RollupError = {
+		name,
+		id: filename,
+		message: buildExtendedLogMessage(error),
+		frame: viteFrame(frame),
+		code,
+		stack: options.isBuild || options.isDebug || !frame ? stack : ''
+	};
+	if (start) converted.loc = { line: start.line, column: start.column, file: filename };
+	return converted;
+}
+
+function fixableByCssPreprocessor(code: string | undefined): boolean {
+	return code === 'expected_token' || code === 'unexpected_eof' || !!code?.startsWith('css_');
+}
+
+export function enhanceCompileError(
+	error: CompileError,
+	source: string,
+	preprocess: PreprocessorGroup | PreprocessorGroup[] | undefined,
+	links: Links
+): CompileError {
+	const groups = arraify(preprocess);
+	const notes: string[] = [];
+	if (fixableByCssPreprocessor(error.code)) {
+		for (const match of source.matchAll(styleTag)) {
+			if (match[0].startsWith('<!--')) continue;
+			if (!match[1]?.includes('lang=')) {
+				notes.push('Did you forget to add a lang attribute to your style tag?');
+			}
+			if (
+				groups.every(
+					(group) => group.style == null || group.name === 'inject-scope-everything-rule'
+				)
+			) {
+				const lang = match[1]?.match(/lang="(.+?)"/)?.[1] ?? 'style';
+				notes.push(
+					`Did you forget to add a ${lang} preprocessor?${links.preprocess ? ` See ${links.preprocess} for more information.` : ''}`
+				);
+			}
+		}
+	}
+	if (notes.length > 0) error.message += `\n\n- ${notes.join('\n- ')}`;
+	return error;
+}

package/src/front-end.ts

@@ -0,0 +1,146 @@
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { searchForWorkspaceRoot } from 'vite';
+import { findDepPkgJsonPath } from 'vitefu';
+import type { Compiler } from './compiler.ts';
+
+export interface ModulePattern {
+	readonly infixes: readonly string[];
+	readonly extensions: readonly string[];
+}
+
+export interface Declaration {
+	readonly compiler: string;
+	readonly components: readonly string[];
+	readonly modules: ModulePattern;
+	readonly condition: string;
+	readonly config: string;
+}
+
+export interface FrontEnd {
+	readonly name: string;
+	readonly compiler: Compiler;
+	readonly compilerImport: string;
+	readonly components: readonly string[];
+	readonly modules: ModulePattern;
+	readonly condition: string;
+	readonly config: string;
+	readonly imports: readonly string[];
+}
+
+interface Manifest {
+	name?: string;
+	version?: string;
+	exports?: unknown;
+	dependencies?: Record<string, string>;
+	devDependencies?: Record<string, string>;
+	peerDependencies?: Record<string, string>;
+	vigla?: { frontEnd?: Declaration };
+}
+
+const conditions = ['node', 'import', 'default'];
+const found = new Map<string, Promise<FrontEnd[]>>();
+
+function read(file: string): Manifest {
+	return JSON.parse(readFileSync(file, 'utf8')) as Manifest;
+}
+
+function target(entry: unknown): string | undefined {
+	if (typeof entry === 'string') return entry;
+	if (Array.isArray(entry)) {
+		for (const item of entry) {
+			const resolved = target(item);
+			if (resolved !== undefined) return resolved;
+		}
+		return undefined;
+	}
+	if (entry === null || typeof entry !== 'object') return undefined;
+	for (const [condition, value] of Object.entries(entry)) {
+		if (!conditions.includes(condition)) continue;
+		const resolved = target(value);
+		if (resolved !== undefined) return resolved;
+	}
+	return undefined;
+}
+
+function typesOnly(entry: unknown): boolean {
+	return (
+		entry !== null &&
+		typeof entry === 'object' &&
+		!Array.isArray(entry) &&
+		Object.keys(entry).length === 1 &&
+		'types' in entry
+	);
+}
+
+function exported(manifest: Manifest): Record<string, unknown> {
+	const exports = manifest.exports;
+	if (exports === undefined || exports === null) return {};
+	if (typeof exports === 'string' || Array.isArray(exports)) return { '.': exports };
+	const keys = Object.keys(exports);
+	if (keys.length > 0 && !keys[0]?.startsWith('.')) return { '.': exports };
+	return exports as Record<string, unknown>;
+}
+
+function imports(name: string, manifest: Manifest): string[] {
+	return Object.entries(exported(manifest))
+		.filter(([key, entry]) => key !== './package.json' && !typesOnly(entry))
+		.map(([key]) => key.replace(/^\./, name));
+}
+
+async function load(name: string, file: string, manifest: Manifest): Promise<FrontEnd> {
+	const declaration = manifest.vigla?.frontEnd as Declaration;
+	const entry = target(exported(manifest)[declaration.compiler]);
+	if (entry === undefined) {
+		throw new Error(`${name} declares compiler ${declaration.compiler} but exports no such entry`);
+	}
+	const url = pathToFileURL(path.join(path.dirname(file), entry)).href;
+	const compiler = (await import(url)) as Compiler;
+	return {
+		name,
+		compiler,
+		compilerImport: declaration.compiler.replace(/^\./, name),
+		components: declaration.components,
+		modules: declaration.modules,
+		condition: declaration.condition,
+		config: declaration.config,
+		imports: imports(name, manifest)
+	};
+}
+
+function dependencies(dir: string): string[] {
+	const file = path.join(dir, 'package.json');
+	if (!existsSync(file)) return [];
+	const manifest = read(file);
+	return [
+		...Object.keys(manifest.dependencies ?? {}),
+		...Object.keys(manifest.devDependencies ?? {})
+	];
+}
+
+async function discover(root: string): Promise<FrontEnd[]> {
+	const seen = new Set<string>();
+	const loading: Promise<FrontEnd>[] = [];
+	const workspace = searchForWorkspaceRoot(root);
+	for (const dir of workspace === root ? [root] : [root, workspace]) {
+		for (const name of dependencies(dir)) {
+			if (seen.has(name)) continue;
+			seen.add(name);
+			const file = await findDepPkgJsonPath(name, dir);
+			if (file === undefined) continue;
+			const manifest = read(file);
+			if (manifest.vigla?.frontEnd !== undefined) loading.push(load(name, file, manifest));
+		}
+	}
+	return Promise.all(loading);
+}
+
+export function frontEnds(root: string): Promise<FrontEnd[]> {
+	let pending = found.get(root);
+	if (pending === undefined) {
+		pending = discover(root);
+		found.set(root, pending);
+	}
+	return pending;
+}