vitempl 0.0.0 → 0.1.0

package/dist/index.js

@@ -0,0 +1,409 @@
+import { mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { normalizePath } from "vite";
+import { hyphenate } from "@vue/shared";
+import { babelParse, parse } from "vue/compiler-sfc";
+//#region src/sfc.ts
+/**
+* Разбирает SFC и проверяет, что в нём нет ничего, что требует выполнения
+* Vue: шаблоны выполняет шаблонизатор сервера.
+*/
+function parseSfc(source) {
+	const { descriptor, errors } = parse(source, { templateParseOptions: { whitespace: "preserve" } });
+	if (errors.length) return {
+		descriptor,
+		components: /* @__PURE__ */ new Map(),
+		errors: errors.map((error) => ({
+			message: error.message,
+			loc: "loc" in error && error.loc ? {
+				line: error.loc.start.line,
+				column: error.loc.start.column
+			} : {
+				line: 1,
+				column: 1
+			}
+		}))
+	};
+	const script = readScript(descriptor);
+	return {
+		descriptor,
+		components: script.components,
+		errors: [...checkBlocks(descriptor), ...script.errors]
+	};
+}
+/**
+* Импортированные компоненты по именам тегов: во Vue компонент можно
+* указать в шаблоне как `<AppHeader>` и как `<app-header>`
+*/
+function componentTags(sfc, templateName) {
+	const tags = /* @__PURE__ */ new Map();
+	for (const [name, { source }] of sfc.components) {
+		const template = templateName(source);
+		tags.set(name, template).set(hyphenate(name), template);
+	}
+	return tags;
+}
+function checkBlocks(descriptor) {
+	const errors = [];
+	const at = (loc) => ({
+		line: loc.start.line,
+		column: loc.start.column
+	});
+	if (!descriptor.template) errors.push({
+		message: "нет блока <template>",
+		loc: {
+			line: 1,
+			column: 1
+		}
+	});
+	else if (descriptor.template.lang) errors.push({
+		message: `<template lang="${descriptor.template.lang}"> не поддерживается`,
+		loc: at(descriptor.template.loc)
+	});
+	if (descriptor.script) errors.push({
+		message: "поддерживается только <script setup>",
+		loc: at(descriptor.script.loc)
+	});
+	for (const style of descriptor.styles) if (style.scoped || style.module) errors.push({
+		message: "<style scoped> и <style module> не поддерживаются: разметка не размечается классами Vue",
+		loc: at(style.loc)
+	});
+	for (const block of descriptor.customBlocks) errors.push({
+		message: `блок <${block.type}> не поддерживается`,
+		loc: at(block.loc)
+	});
+	return errors;
+}
+/**
+* Читает `<script setup>`: в нём допускаются только импорты компонентов
+* и типов, объявления типов и defineProps.
+*/
+function readScript(descriptor) {
+	const components = /* @__PURE__ */ new Map();
+	const errors = [];
+	const script = descriptor.scriptSetup;
+	if (!script) return {
+		components,
+		errors
+	};
+	const lineOffset = script.loc.start.line - 1;
+	let program;
+	try {
+		program = babelParse(script.content, {
+			sourceType: "module",
+			plugins: ["typescript"]
+		}).program;
+	} catch (error) {
+		const { loc } = error;
+		errors.push({
+			message: error.message,
+			loc: loc ? {
+				line: loc.line + lineOffset,
+				column: loc.column + 1
+			} : {
+				line: script.loc.start.line,
+				column: 1
+			}
+		});
+		return {
+			components,
+			errors
+		};
+	}
+	for (const statement of program.body) {
+		const loc = {
+			line: (statement.loc?.start.line ?? 1) + lineOffset,
+			column: (statement.loc?.start.column ?? 0) + 1
+		};
+		switch (statement.type) {
+			case "ImportDeclaration": {
+				if (statement.importKind === "type" || statement.specifiers.length > 0 && statement.specifiers.every((specifier) => specifier.type === "ImportSpecifier" && specifier.importKind === "type")) continue;
+				const [specifier] = statement.specifiers;
+				const source = statement.source.value;
+				if (source.endsWith(".vue") && statement.specifiers.length === 1 && specifier.type === "ImportDefaultSpecifier") {
+					components.set(specifier.local.name, {
+						source,
+						loc
+					});
+					continue;
+				}
+				errors.push({
+					message: `импорт "${source}": в <script setup> можно импортировать только компоненты (.vue) и типы`,
+					loc
+				});
+				continue;
+			}
+			case "TSInterfaceDeclaration":
+			case "TSTypeAliasDeclaration": continue;
+			case "ExpressionStatement":
+				if (isDefineProps(statement.expression)) continue;
+				break;
+			case "VariableDeclaration": if (statement.declarations.length === 1 && isDefineProps(statement.declarations[0].init)) continue;
+		}
+		errors.push({
+			message: "в <script setup> допускаются только импорты компонентов и типов, объявления типов и defineProps",
+			loc
+		});
+	}
+	return {
+		components,
+		errors
+	};
+}
+function isDefineProps(node) {
+	const call = node;
+	return call?.type === "CallExpression" && call.callee?.type === "Identifier" && call.callee.name === "defineProps";
+}
+//#endregion
+//#region src/utils.ts
+/** Проверяет, что файл лежит внутри папки и не совпадает с ней */
+function isInside(dir, file) {
+	const relative = path.relative(dir, file);
+	return relative !== "" && relative !== ".." && !relative.startsWith(`..${path.sep}`) && !path.isAbsolute(relative);
+}
+//#endregion
+//#region src/graph.ts
+/**
+* Обходит импорты компонентов от входов и разбирает используемые шаблоны:
+* в сборку попадают только они.
+*/
+async function collectTemplates(entries, options) {
+	const { srcDir, load, display = (file) => file } = options;
+	const templates = /* @__PURE__ */ new Map();
+	const at = (file, loc) => `${display(file)}:${loc.line}:${loc.column}`;
+	async function visit(file, source, entry) {
+		const sfc = parseSfc(source);
+		templates.set(file, sfc);
+		for (const { source: specifier, loc } of sfc.components.values()) {
+			const target = path.resolve(path.dirname(file), specifier);
+			if (templates.has(target)) continue;
+			if (!isInside(srcDir, target)) throw new Error(`${at(file, loc)}: компонент "${specifier}" находится вне папки исходников ${display(srcDir)}`);
+			const targetSource = await load(target);
+			if (targetSource === void 0) {
+				const from = entry === file ? "" : ` (вход ${display(entry)})`;
+				throw new Error(`${at(file, loc)}: компонент "${specifier}" не найден: ${display(target)}${from}`);
+			}
+			await visit(target, targetSource, entry);
+		}
+	}
+	for (const entry of entries) {
+		if (templates.has(entry)) continue;
+		const source = await load(entry);
+		if (source === void 0) throw new Error(`${display(entry)}: файл не найден`);
+		await visit(entry, source, entry);
+	}
+	return templates;
+}
+//#endregion
+//#region src/check.ts
+/**
+* Проверяет исходник шаблона без сборки: ошибки разбора SFC и синтаксис,
+* который не поддерживает шаблонизатор. Те же ошибки выдаёт сборка —
+* функция нужна инструментам вроде линтера.
+*/
+function checkSource(source, engine) {
+	const sfc = parseSfc(source);
+	const { errors } = engine.generate(sfc.descriptor.template?.ast?.children ?? [], {
+		components: componentTags(sfc, (source) => source),
+		name: "",
+		entry: false,
+		templates: /* @__PURE__ */ new Map()
+	});
+	return [...sfc.errors, ...errors];
+}
+//#endregion
+//#region src/index.ts
+/** Расширение исходников шаблонов */
+const SOURCE_EXTENSION = ".vue";
+/**
+* Запрос к блоку `<style>` шаблона. Заканчивается на `lang.css`, чтобы Vite
+* узнал в нём CSS — так же помечает свои стили плагин Vue.
+*/
+const STYLE_QUERY = "vitempl-style";
+const styleRequestRE = new RegExp(`^(.+)\\?${STYLE_QUERY}&index=(\\d+)&lang\\.`);
+/** Суффикс, по которому Vite распознаёт страницу как HTML */
+const HTML_SUFFIX = ".html";
+/**
+* Собирает шаблоны для SSR на сервере.
+*
+* Исходники шаблонов — Vue SFC, от страниц и фрагментов обходятся импорты
+* компонентов, и в сборку попадают только используемые. Каждый шаблон
+* генерируется для заданного шаблонизатора, а страницы дополнительно
+* подаются в Vite как HTML-входы: подключения скриптов и стилей
+* заменяются на собранные ассеты.
+*/
+function vitempl(options) {
+	const { engine, srcDir = "src", pagesDir = "pages", fragmentsDir = "fragments", shell = "index.html", placeholder = "<!--app-html-->", outDir = "dist/templates" } = options;
+	let config;
+	let shellSource = "";
+	/** Страницы: HTML-модуль → файл исходника */
+	const pages = /* @__PURE__ */ new Map();
+	let fragments = [];
+	/** Разобранные исходники: файл → SFC */
+	let parsed = /* @__PURE__ */ new Map();
+	/** Сгенерированные шаблоны: файл исходника → шаблон */
+	const generated = /* @__PURE__ */ new Map();
+	/** Страницы после обработки Vite: файл исходника → HTML */
+	const output = /* @__PURE__ */ new Map();
+	const wrap = (html) => shellSource.replace(placeholder, () => html);
+	const display = (file) => normalizePath(path.relative(config.root, file));
+	/** Путь от srcDir без расширения — под этим именем шаблон регистрирует сервер */
+	const templateName = (file) => normalizePath(path.relative(path.resolve(config.root, srcDir), file)).slice(0, -4);
+	/** Шаблон и все шаблоны, которые он импортирует */
+	function reachable(file) {
+		const files = /* @__PURE__ */ new Set();
+		const visit = (current) => {
+			if (files.has(current)) return;
+			files.add(current);
+			for (const { source } of parsed.get(current)?.components.values() ?? []) visit(normalizePath(path.resolve(path.dirname(current), source)));
+		};
+		visit(normalizePath(file));
+		return files;
+	}
+	/** Ссылки на стили страницы и компонентов, которые она импортирует */
+	function styleTags(page) {
+		const tags = [];
+		for (const file of reachable(page)) {
+			const url = normalizePath(path.relative(config.root, file));
+			parsed.get(file)?.descriptor.styles.forEach((style, index) => {
+				tags.push({
+					tag: "link",
+					attrs: {
+						rel: "stylesheet",
+						href: `/${url}?${STYLE_QUERY}&index=${index}&lang.${style.lang ?? "css"}`
+					},
+					injectTo: "head"
+				});
+			});
+		}
+		return tags;
+	}
+	return {
+		name: "vitempl",
+		apply: "build",
+		enforce: "pre",
+		configResolved(resolvedConfig) {
+			config = resolvedConfig;
+		},
+		async options(inputOptions) {
+			const pagesPath = path.resolve(config.root, srcDir, pagesDir);
+			const input = {};
+			pages.clear();
+			for (const file of await scan(pagesPath)) {
+				const id = normalizePath(file + HTML_SUFFIX);
+				const name = normalizePath(path.relative(pagesPath, file));
+				pages.set(id, file);
+				input[name.slice(0, -4)] = id;
+			}
+			if (pages.size === 0) throw new Error(`[templates] не найдено ни одной страницы ${SOURCE_EXTENSION} в ${display(pagesPath)}`);
+			fragments = await scan(path.resolve(config.root, srcDir, fragmentsDir));
+			return {
+				...inputOptions,
+				input
+			};
+		},
+		async buildStart() {
+			const templatesDir = path.resolve(config.root, outDir);
+			if (templatesDir === config.root || isInside(templatesDir, config.root)) this.error(`outDir ${outDir} не может содержать root`);
+			const shellPath = path.resolve(config.root, shell);
+			shellSource = await readFile(shellPath, "utf-8");
+			this.addWatchFile(shellPath);
+			if (!shellSource.includes(placeholder)) this.error(`${shell}: не найдено место для страницы ${placeholder}`);
+			const templates = await collectTemplates([...pages.values(), ...fragments], {
+				srcDir: path.resolve(config.root, srcDir),
+				load: loadTemplate,
+				display
+			}).catch((error) => this.error(error.message));
+			parsed = new Map([...templates].map(([file, sfc]) => [normalizePath(file), sfc]));
+			const onPages = new Set([...pages.values()].flatMap((page) => [...reachable(page)]));
+			for (const [file, sfc] of parsed) if (sfc.descriptor.styles.length > 0 && !onPages.has(file)) this.warn(`${display(file)}: блок <style> не попадёт в сборку — шаблон не используется ни на одной странице`);
+			generated.clear();
+			output.clear();
+			const entries = new Set([...pages.values(), ...fragments].map((file) => normalizePath(file)));
+			/** Разбор шаблонов: вызов компонента может зависеть от самого компонента */
+			const infos = /* @__PURE__ */ new Map();
+			const contexts = /* @__PURE__ */ new Map();
+			for (const [file, sfc] of templates) contexts.set(file, {
+				components: componentTags(sfc, (source) => templateName(path.resolve(path.dirname(file), source))),
+				name: templateName(file),
+				entry: entries.has(normalizePath(file)),
+				templates: infos
+			});
+			if (engine.analyze) for (const [file, sfc] of templates) infos.set(templateName(file), engine.analyze(sfc.descriptor.template?.ast?.children ?? [], contexts.get(file)));
+			const errors = [];
+			for (const [file, sfc] of templates) {
+				this.addWatchFile(file);
+				const result = engine.generate(sfc.descriptor.template?.ast?.children ?? [], contexts.get(file));
+				generated.set(file, result.code);
+				for (const { message, loc } of [...sfc.errors, ...result.errors]) errors.push(`${display(file)}:${loc.line}:${loc.column}: ${message}`);
+			}
+			if (errors.length) this.error(errors.join("\n"));
+		},
+		resolveId(id) {
+			return pages.has(id) ? id : null;
+		},
+		load(id) {
+			const style = styleRequestRE.exec(id);
+			if (style) return parsed.get(style[1])?.descriptor.styles[Number(style[2])]?.content ?? null;
+			const file = pages.get(id);
+			return file ? generated.get(file) ?? null : null;
+		},
+		transformIndexHtml: {
+			order: "pre",
+			handler(html, ctx) {
+				const file = pages.get(normalizePath(ctx.filename));
+				if (file) return {
+					html: wrap(html),
+					tags: styleTags(file)
+				};
+			}
+		},
+		generateBundle: {
+			order: "post",
+			handler(_options, bundle) {
+				for (const [id, file] of pages) {
+					const fileName = normalizePath(path.relative(config.root, id));
+					const asset = bundle[fileName];
+					if (asset?.type !== "asset") return this.error(`Vite не собрал HTML страницы ${fileName}`);
+					output.set(file, typeof asset.source === "string" ? asset.source : new TextDecoder().decode(asset.source));
+					delete bundle[fileName];
+				}
+			}
+		},
+		async writeBundle() {
+			const templatesDir = path.resolve(config.root, outDir);
+			if (config.build.emptyOutDir ?? isInside(config.root, templatesDir)) await rm(templatesDir, {
+				recursive: true,
+				force: true
+			});
+			for (const [file, code] of generated) {
+				const target = path.join(templatesDir, templateName(file) + engine.extension);
+				await mkdir(path.dirname(target), { recursive: true });
+				await writeFile(target, output.get(file) ?? code);
+			}
+			config.logger.info(`шаблоны (${engine.name}): ${generated.size} → ${display(templatesDir)}`);
+		}
+	};
+}
+/** Находит исходники шаблонов в папке и её подпапках */
+async function scan(dir) {
+	try {
+		return (await readdir(dir, {
+			recursive: true,
+			withFileTypes: true
+		})).filter((entry) => entry.isFile() && entry.name.endsWith(SOURCE_EXTENSION)).map((entry) => path.join(entry.parentPath, entry.name)).sort();
+	} catch (error) {
+		if (error.code === "ENOENT") return [];
+		throw error;
+	}
+}
+async function loadTemplate(file) {
+	try {
+		return await readFile(file, "utf-8");
+	} catch (error) {
+		if (error.code === "ENOENT") return;
+		throw error;
+	}
+}
+//#endregion
+export { checkSource, vitempl as default };