@lingo.dev/compiler 0.1.0

package/build/plugin/transform/process-file.cjs

@@ -0,0 +1,391 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_logger = require('../../utils/logger.cjs');
+const require_utils = require('./utils.cjs');
+const require_metadata = require('./metadata.cjs');
+const require_babel_compat = require('./babel-compat.cjs');
+const require_parse_override = require('./parse-override.cjs');
+let _babel_types = require("@babel/types");
+_babel_types = require_rolldown_runtime.__toESM(_babel_types);
+
+//#region src/plugin/transform/process-file.ts
+/**
+* Keep mutations to the current node and children. Do not mutate program inserting imports when processing the component.
+* This should be done in the end.
+* The overall idea is that state is used for side effect tracking. When we exit relevant points, we check if we need to make extra changes at this level.
+* e.g. when we transform elements to insert translations, we record their hashes and add the translation hook call when leaving the component.
+*/
+function updateWithMetadataState(state, newState) {
+	state.newEntries = [...state.newEntries, ...newState.newEntries];
+	state.needsAsyncImport = state.needsAsyncImport || newState.needsAsyncImport;
+	return state;
+}
+const SKIP_ATTRIBUTE = "data-lingo-skip";
+/**
+* Elements whose content should not be translated by default.
+* These are typically code-related or technical elements where translation
+* would break functionality or meaning.
+*/
+const NON_TRANSLATABLE_ELEMENTS = new Set([
+	"code",
+	"pre",
+	"script",
+	"style",
+	"kbd",
+	"samp",
+	"var"
+]);
+const TRANSLATABLE_ATTRIBUTES = new Set([
+	"title",
+	"aria-label",
+	"aria-description",
+	"alt",
+	"label",
+	"description",
+	"placeholder",
+	"content",
+	"subtitle"
+]);
+/**
+* Check if a JSX element should skip translation based on:
+* 1. Element type (code, pre, script, style, etc.)
+* 2. translate="no" attribute (HTML standard)
+* 3. data-lingo-skip attribute
+*/
+function shouldSkipTranslationForElement(element) {
+	if (element.type === "JSXFragment") return false;
+	const openingElement = element.openingElement;
+	if (openingElement.name.type === "JSXIdentifier") {
+		if (NON_TRANSLATABLE_ELEMENTS.has(openingElement.name.name)) return true;
+	}
+	for (const attr of openingElement.attributes) if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier") {
+		if (attr.name.name === "translate") {
+			if (attr.value?.type === "StringLiteral" && attr.value.value === "no") return true;
+		}
+		if (attr.name.name === SKIP_ATTRIBUTE) return true;
+	}
+	return false;
+}
+function translateAttributes(node, state) {
+	const openingElement = node.openingElement;
+	const component = state.componentsStack.at(-1);
+	if (!component) return;
+	for (const attr of openingElement.attributes) if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && TRANSLATABLE_ATTRIBUTES.has(attr.name.name) && attr.value?.type === "StringLiteral") {
+		const text = require_utils.normalizeWhitespace(attr.value.value);
+		if (text.length == 0) continue;
+		const entry = require_utils.createTranslationEntry("attribute", text, {
+			attributeName: attr.name.name,
+			componentName: component.name
+		}, state.filePath, node.loc?.start.line, node.loc?.start.column);
+		registerEntry(entry, state, component.name);
+		attr.value = require_utils.constructTranslationCall(entry.hash, text);
+	}
+}
+/**
+* Check if a JSX element has mixed content that needs rich text translation
+* Mixed content = text nodes + expressions + nested JSX elements (excluding void elements)
+*/
+function hasMixedContent(element) {
+	const children = element.children;
+	if (children.length === 0) return false;
+	let state = 0;
+	for (const child of children) if (child.type === "JSXText") {
+		if (child.value.trim().length > 0) switch (state) {
+			case 0:
+				state = 1;
+				break;
+			case 1: break;
+			case 2: return true;
+			case 3: return true;
+		}
+	} else if (child.type === "JSXExpressionContainer") switch (state) {
+		case 0:
+			state = 2;
+			break;
+		case 1: return true;
+		case 2: break;
+		case 3: return true;
+	}
+	else if (child.type === "JSXElement") if (!require_utils.isVoidElement(child)) switch (state) {
+		case 0:
+			state = 2;
+			break;
+		case 1: return true;
+		case 2: break;
+		case 3: return true;
+	}
+	else switch (state) {
+		case 0: break;
+		case 1:
+			state = 3;
+			break;
+		case 2: break;
+		case 3: break;
+	}
+	return false;
+}
+/**
+* Serialize JSX children to a translation string with placeholders
+*/
+function serializeJSXChildren(children, state) {
+	let text = "";
+	const variables = [];
+	const expressions = /* @__PURE__ */ new Map();
+	const components = /* @__PURE__ */ new Map();
+	const elementCounts = /* @__PURE__ */ new Map();
+	for (const child of children) if (child.type === "JSXText") {
+		let normalized = require_utils.normalizeWhitespace(child.value);
+		if (text.length > 0 && child.value.match(/^\s/) && normalized.length > 0) {
+			if (!text.endsWith(" ")) normalized = ` ${normalized}`;
+		}
+		if (normalized.length > 0 && child.value.match(/\s$/)) {
+			if (!text.endsWith(" ")) normalized = `${normalized} `;
+		}
+		text += require_utils.escapeTextForICU(normalized);
+	} else if (child.type === "JSXExpressionContainer") {
+		const expr = child.expression;
+		if (expr.type === "Identifier") {
+			text += `{${expr.name}}`;
+			if (!variables.includes(expr.name)) variables.push(expr.name);
+		} else if (expr.type === "StringLiteral") text += require_utils.escapeTextForICU(expr.value);
+		else if (expr.type !== "JSXEmptyExpression") {
+			const name = `expression${expressions.size}`;
+			text += `{${name}}`;
+			expressions.set(name, expr);
+		}
+	} else if (child.type === "JSXElement") {
+		let shouldTranslate = true;
+		if (require_utils.isVoidElement(child)) shouldTranslate = false;
+		if (shouldSkipTranslationForElement(child)) shouldTranslate = false;
+		const openingElement = child.openingElement;
+		let elementName = "";
+		if (openingElement.name.type === "JSXIdentifier") elementName = openingElement.name.name;
+		else elementName = "element";
+		const count = elementCounts.get(elementName) || 0;
+		elementCounts.set(elementName, count + 1);
+		const tagName = `${elementName}${count}`;
+		translateAttributes(child, state);
+		if (shouldTranslate) {
+			const nested = serializeJSXChildren(child.children, state);
+			text += `<${tagName}>${nested.text}</${tagName}>`;
+			for (const v of nested.variables) if (!variables.includes(v)) variables.push(v);
+			for (const [nestedTag, nestedElement] of nested.components) components.set(`${tagName}_${nestedTag}`, nestedElement);
+		} else {
+			text += `<${tagName}></${tagName}>`;
+			child.extra = {
+				...child.extra,
+				shouldTranslate: false
+			};
+		}
+		components.set(tagName, child);
+	}
+	return {
+		text,
+		variables,
+		expressions,
+		components
+	};
+}
+function transformVoidElement(node, state) {
+	translateAttributes(node, state);
+}
+function getTranslationScope(node, state) {
+	if (hasMixedContent(node)) {
+		const serialized = serializeJSXChildren(node.children, state);
+		const text$1 = serialized.text.trim();
+		if (text$1.length === 0) return null;
+		return {
+			kind: "mixed",
+			text: text$1,
+			args: {
+				variables: serialized.variables,
+				expressions: serialized.expressions,
+				components: serialized.components
+			}
+		};
+	}
+	const textNodeIndex = node.children.findIndex((child) => child.type === "JSXText" && child.value.trim().length > 0);
+	if (textNodeIndex === -1) return null;
+	if (!node.children.every((child) => child.type === "JSXText" || child.type === "JSXElement" && require_utils.isVoidElement(child))) return null;
+	const textNode = node.children[textNodeIndex];
+	const text = require_utils.normalizeWhitespace(textNode.value);
+	if (text.length === 0) return null;
+	return {
+		kind: "text",
+		text,
+		textNodeIndex
+	};
+}
+function registerEntry(entry, state, componentName) {
+	state.newEntries.push(entry);
+	const hashes = state.componentHashes.get(componentName) ?? [];
+	hashes.push(entry.hash);
+	state.componentHashes.set(componentName, hashes);
+}
+function rewriteChildren(path, state, translationScope, entryHash) {
+	if (translationScope.kind === "mixed") {
+		path.node.children = [require_utils.constructTranslationCall(entryHash, translationScope.text, translationScope.args)];
+		return;
+	}
+	const { textNodeIndex, text } = translationScope;
+	path.node.children = path.node.children.map((child, index) => {
+		if (index === textNodeIndex) return require_utils.constructTranslationCall(entryHash, text);
+		if (child.type === "JSXElement") transformVoidElement(child, state);
+		return child;
+	});
+}
+function processJSXElement(path, state) {
+	const component = state.componentsStack.at(-1);
+	if (!component) return;
+	const scope = getTranslationScope(path.node, state);
+	if (!scope) return;
+	const overrides = require_parse_override.processOverrideAttributes(path);
+	const entry = require_utils.createTranslationEntry("content", scope.text, { componentName: component.name }, state.filePath, path.node.loc?.start.line, path.node.loc?.start.column, overrides);
+	registerEntry(entry, state, component.name);
+	rewriteChildren(path, state, scope, entry.hash);
+	path.skip();
+}
+/**
+* Inject dynamic locale attribute into <html> elements
+* Transforms: <html> → <html lang={locale}>
+*
+* Only injects if:
+* 1. Element is <html>
+* 2. No existing lang/language attribute
+* 3. We're inside a React component (has locale context)
+*/
+function injectHtmlLangAttribute(node, state) {
+	const openingElement = node.openingElement;
+	if (openingElement.name.type !== "JSXIdentifier" || openingElement.name.name !== "html") return;
+	if (openingElement.attributes.some((attr) => {
+		return attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && (attr.name.name === "lang" || attr.name.name === "language");
+	})) return;
+	const component = state.componentsStack.at(-1);
+	if (!component) return;
+	const langAttr = _babel_types.jsxAttribute(_babel_types.jsxIdentifier("lang"), _babel_types.jsxExpressionContainer(_babel_types.identifier("locale")));
+	openingElement.attributes.push(langAttr);
+	require_logger.logger.debug(`Injected locale attribute into <html> element in component: ${component.name}`);
+	state.componentsNeedingLocale.add(component.name);
+}
+/**
+* Inject translation hook into a component when it's done processing
+* Called when popping component from stack
+*/
+function injectTranslationHook(path, component, state) {
+	const needsLocale = state.componentsNeedingLocale.has(component.name);
+	const hashes = state.componentHashes.get(component.name);
+	if ((!hashes || hashes.length === 0) && !needsLocale) return;
+	if (component.isAsync) {
+		require_utils.injectServerHook(path, hashes ?? [], needsLocale);
+		state.needsAsyncImport = true;
+	} else {
+		require_utils.injectUnifiedHook(path, hashes ?? [], needsLocale);
+		state.needsUnifiedImport = true;
+	}
+}
+/**
+* Add translation imports at the top of the file
+* Called on Program exit after all components have been processed
+*/
+function addTranslationImports(programPath, state) {
+	if (state.needsAsyncImport) programPath.node.body.unshift(require_utils.constructServerImport());
+	if (state.needsUnifiedImport) programPath.node.body.unshift(require_utils.comstructUnifiedImport());
+}
+/**
+* Handle component function detection and state update
+*/
+function processComponentFunction(path, state) {
+	if (!require_utils.isReactComponent(path)) {
+		path.skip();
+		require_logger.logger.debug(`Skipping non-React component: ${path.node.type}`);
+		return;
+	}
+	const componentName = require_utils.inferComponentName(path);
+	if (!componentName) {
+		path.skip();
+		return;
+	}
+	if (!state.componentHashes.has(componentName)) state.componentHashes.set(componentName, []);
+	const componentEntry = {
+		name: componentName,
+		isAsync: path.node.async
+	};
+	state.componentsStack.push(componentEntry);
+	require_logger.logger.debug(`Component ${JSON.stringify(componentEntry)} entered`);
+	path.setData("componentName", componentName);
+	path.traverse(componentVisitors, { visitorState: state });
+	const component = state.componentsStack.pop();
+	if (component) injectTranslationHook(path, component, state);
+	path.skip();
+}
+const componentVisitors = {
+	FunctionDeclaration(path) {
+		processComponentFunction(path, this.visitorState);
+	},
+	ArrowFunctionExpression(path) {
+		processComponentFunction(path, this.visitorState);
+	},
+	FunctionExpression(path) {
+		processComponentFunction(path, this.visitorState);
+	},
+	JSXFragment(path) {
+		processJSXElement(path, this.visitorState);
+	},
+	JSXElement(path) {
+		translateAttributes(path.node, this.visitorState);
+		injectHtmlLangAttribute(path.node, this.visitorState);
+		if (shouldSkipTranslationForElement(path.node)) {
+			path.skip();
+			return;
+		}
+		processJSXElement(path, this.visitorState);
+	}
+};
+const fileVisitors = {
+	ExportNamedDeclaration(path) {
+		const metadataState = require_metadata.processNextStaticMetadata(path, { filePath: this.visitorState.filePath });
+		if (metadataState) updateWithMetadataState(this.visitorState, metadataState);
+	},
+	FunctionDeclaration(path) {
+		const metadataState = require_metadata.processNextDynamicMetadata(path, { filePath: this.visitorState.filePath });
+		if (metadataState) updateWithMetadataState(this.visitorState, metadataState);
+		processComponentFunction(path, this.visitorState);
+	},
+	ArrowFunctionExpression(path) {
+		processComponentFunction(path, this.visitorState);
+	},
+	FunctionExpression(path) {
+		processComponentFunction(path, this.visitorState);
+	}
+};
+/**
+* Create Babel visitors for auto-translation (single-pass transformation)
+*/
+const programVisitor = { Program: {
+	enter(path) {
+		if (this.visitorState.needsDirective && !require_utils.hasUseI18nDirective(path)) {
+			path.skip();
+			return;
+		}
+		path.traverse(fileVisitors, { visitorState: this.visitorState });
+	},
+	exit(path) {
+		if (this.visitorState.needsUnifiedImport || this.visitorState.needsAsyncImport) addTranslationImports(path, this.visitorState);
+	}
+} };
+function processFile(ast, options) {
+	const state = {
+		needsDirective: options.needsDirective,
+		filePath: options.relativeFilePath,
+		newEntries: [],
+		componentsStack: [],
+		componentHashes: /* @__PURE__ */ new Map(),
+		needsUnifiedImport: false,
+		needsAsyncImport: false,
+		componentsNeedingLocale: /* @__PURE__ */ new Set()
+	};
+	require_babel_compat.traverse(ast, programVisitor, void 0, { visitorState: state });
+	return state.newEntries;
+}
+
+//#endregion
+exports.processFile = processFile;