@saykit/transform-jsx 0.5.0 → 0.6.1

package/dist/generator.mjs

@@ -7,7 +7,7 @@ function generateSayJSXElement(message) {
 	const attributes = [
 		t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral(id)),
 		...message.whitespace === void 0 ? [] : [t.jsxAttribute(t.jsxIdentifier("whitespace"), t.jsxExpressionContainer(t.booleanLiteral(message.whitespace)))],
-		...children.map(([k, e]) => t.jsxAttribute(t.jsxIdentifier(Number.isNaN(+k) ? k : `_${k}`), t.jsxExpressionContainer(e)))
+		...[...new Map(children).entries()].map(([k, e]) => t.jsxAttribute(t.jsxIdentifier(`_${k}`), t.jsxExpressionContainer(e)))
 	];
 	return t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("Say"), attributes, true), null, []);
 }

package/dist/index.mjs

@@ -5,7 +5,7 @@ import * as parser from "@babel/parser";
 import traverse_ from "@babel/traverse";
 import { assignSequenceIdentifiers } from "@saykit/config/features/messages";
 import { generateSayCallExpression } from "@saykit/transform-js/generator";
-import { parseExpression } from "@saykit/transform-js/parser";
+import { isEquivalentPlaceholder, parseExpression } from "@saykit/transform-js/parser";
 //#region src/index.ts
 const traverse = traverse_.default || traverse_;
 function createProgram(code, id) {
@@ -40,7 +40,7 @@ function createJsxTransformer() {
 					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseExpression(path.node);
 					if (message) {
-						assignSequenceIdentifiers(message, { current: 0 });
+						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
 						messages.push(message);
 						path.skip();
 					}
@@ -49,7 +49,7 @@ function createJsxTransformer() {
 					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseJSXElement(path.node);
 					if (message) {
-						assignSequenceIdentifiers(message, { current: 0 });
+						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
 						messages.push(message);
 						path.skip();
 					}
@@ -71,7 +71,7 @@ function createJsxTransformer() {
 					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseExpression(path.node);
 					if (message) {
-						assignSequenceIdentifiers(message, { current: 0 });
+						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
 						const replacement = generateSayCallExpression(message);
 						path.replaceWith(replacement);
 						path.skip();
@@ -81,7 +81,7 @@ function createJsxTransformer() {
 					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseJSXElement(path.node);
 					if (message) {
-						assignSequenceIdentifiers(message, { current: 0 });
+						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
 						const replacement = generateSayJSXElement(message);
 						path.replaceWith(replacement);
 						path.skip();

package/dist/parser.mjs

@@ -1,6 +1,14 @@
-import { AUTO_INCREMENT_IDENTIFIER, ArgumentMessage, ChoiceMessage, CompositeMessage, ElementMessage, LiteralMessage } from "@saykit/config/features/messages";
+import { AUTO_INCREMENT_IDENTIFIER, ArgumentMessage, ChoiceMessage, CompositeMessage, ElementMessage, LiteralMessage, validateBranchIdentifier } from "@saykit/config/features/messages";
+import { unwrapPlaceholder } from "@saykit/transform-js/parser";
 import * as t from "@babel/types";
 //#region src/parser.ts
+/**
+* Attribute used to name the ICU tag an embedded element extracts as, e.g.
+* `<a say-tag="link">` becomes `<link></link>` rather than `<0></0>`. It never
+* reaches the real element.
+*/
+const TAG_ATTRIBUTE = "say-tag";
+const TAG_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
 function parseJSXContainerElement(element) {
 	if (element.openingElement.selfClosing) return null;
 	const processed = processJSXOpeningElement(element.openingElement);
@@ -8,15 +16,16 @@ function parseJSXContainerElement(element) {
 	const [accessor] = processed;
 	const children = element.children.reduce((p, c, i, a) => {
 		if (t.isJSXText(c)) {
-			let text = c.value.replace(/\s+/g, " ");
-			if (i === 0) text = text.trimStart();
-			if (i === a.length - 1) text = text.trimEnd();
+			const text = normalizeJSXText(c.value, i === 0, i === a.length - 1);
 			if (text) p.push(new LiteralMessage(text));
 		}
 		if (t.isJSXElement(c)) p.push(parseJSXElement(c, true));
 		else if (t.isJSXFragment(c)) p.push(new ElementMessage(AUTO_INCREMENT_IDENTIFIER, [], c));
 		else if (t.isJSXExpressionContainer(c)) {
-			if (t.isExpression(c.expression)) p.push(new ArgumentMessage(getExpressionAsIdentifier(c.expression), c.expression));
+			if (t.isExpression(c.expression)) {
+				const [identifier, value] = unwrapPlaceholder(c.expression);
+				p.push(new ArgumentMessage(identifier, value));
+			}
 		}
 		return p;
 	}, []);
@@ -26,7 +35,7 @@ function parseJSXContainerElement(element) {
 	return new CompositeMessage({
 		id: descriptorId,
 		context: descriptorContext
-	}, [], [], children, accessor, whitespace);
+	}, [], getReferences(element), children, accessor, whitespace);
 }
 function parseJSXOpeningElement(element) {
 	if (!element.selfClosing) return null;
@@ -56,23 +65,53 @@ function parseJSXOpeningElement(element) {
 					identifier,
 					value: new ElementMessage(AUTO_INCREMENT_IDENTIFIER, [], a.value.expression)
 				});
-				else if (t.isExpression(a.value.expression)) b.push({
-					identifier,
-					value: new ArgumentMessage(getExpressionAsIdentifier(a.value.expression), a.value.expression)
-				});
+				else if (t.isExpression(a.value.expression)) {
+					const [name, value] = unwrapPlaceholder(a.value.expression);
+					b.push({
+						identifier,
+						value: new ArgumentMessage(name, value)
+					});
+				}
 			}
 			return b;
 		}, []);
+		for (const branch of branches) validateBranchIdentifier(kind, branch.identifier);
 		const initialiser = findAttributeValueIfExpressionOrStringLiteral(element.attributes, "_");
 		if (!initialiser) return null;
-		const choice = new ChoiceMessage(kind, getExpressionAsIdentifier(initialiser), branches, initialiser);
+		const [identifier, selector] = unwrapPlaceholder(initialiser);
+		const choice = new ChoiceMessage(kind, identifier, branches, selector);
 		return new CompositeMessage({
 			id: findAttributeValueIfStringLiteralAsString(element.attributes, "id"),
 			context: findAttributeValueIfStringLiteralAsString(element.attributes, "context")
-		}, [], [], [choice], accessor);
+		}, [], getReferences(element), [choice], accessor);
 	}
 	return null;
 }
+/**
+* Punctuation that never takes a space in front of it. A formatter wrapping
+* long JSX regularly strands these at the start of a line, on their own or
+* ahead of the rest of a clause.
+*/
+const CLOSING_PUNCTUATION = /^[.,;:!?)\]}»”’]/;
+/**
+* Collapse the whitespace in a JSX text child the way the source reads.
+*
+* A line break between a word and its neighbour is only how a formatter wrapped
+* a long line, so it still means a space. Dropping it would run the words
+* together — and because ids are content hashes, silently orphan every existing
+* translation for the message.
+*
+* The exception is a line that begins with punctuation, which belongs tight
+* against whatever precedes it. Only an implicit break is treated this way: a
+* space the author wrote on the same line is deliberate and always survives.
+*/
+function normalizeJSXText(value, isFirst, isLast) {
+	let text = value.replace(/\s+/g, " ");
+	if (isFirst) text = text.trimStart();
+	else if (text.startsWith(" ") && /^[^\S\n]*\n/.test(value) && CLOSING_PUNCTUATION.test(text.slice(1))) text = text.slice(1);
+	if (isLast) text = text.trimEnd();
+	return text;
+}
 function processJSXOpeningElement(element) {
 	if (t.isJSXIdentifier(element.name) && element.name.name === "Say") return [element.name, null];
 	if (t.isJSXMemberExpression(element.name) && t.isJSXIdentifier(element.name.object) && element.name.object.name === "Say" && t.isJSXIdentifier(element.name.property)) return [element.name.object, element.name.property.name.toLowerCase()];
@@ -82,8 +121,31 @@ function parseJSXElement(element, fallback) {
 	const message = element.openingElement.selfClosing ? parseJSXOpeningElement(element.openingElement) : parseJSXContainerElement(element);
 	if (message) return message;
 	if (!fallback) return null;
-	if (element.openingElement.selfClosing) return new ElementMessage(AUTO_INCREMENT_IDENTIFIER, [], element);
-	return new ElementMessage(AUTO_INCREMENT_IDENTIFIER, [parseJSXElement(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("Say"), []), t.jsxClosingElement(t.jsxIdentifier("Say")), element.children), true)], element);
+	const identifier = takeElementTag(element) ?? AUTO_INCREMENT_IDENTIFIER;
+	if (element.openingElement.selfClosing) return new ElementMessage(identifier, [], element);
+	return new ElementMessage(identifier, [parseJSXElement(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("Say"), []), t.jsxClosingElement(t.jsxIdentifier("Say")), element.children), true)], element);
+}
+/**
+* Read the tag name off an embedded element and remove the attribute so it
+* never reaches the rendered element. Only static strings name a tag; anything
+* else is left in place and the element falls back to an auto-incremented
+* identifier.
+*/
+function takeElementTag(element) {
+	const attributes = element.openingElement.attributes;
+	const index = attributes.findIndex((a) => t.isJSXAttribute(a) && getAttributeNameAsString(a) === TAG_ATTRIBUTE);
+	if (index === -1) return void 0;
+	const attribute = attributes[index];
+	const value = t.isJSXExpressionContainer(attribute.value) ? attribute.value.expression : attribute.value;
+	if (!t.isStringLiteral(value)) return void 0;
+	const tag = value.value;
+	if (!TAG_PATTERN.test(tag)) throw new Error(`Invalid '${TAG_ATTRIBUTE}' value '${tag}', expected a letter or underscore followed by letters, digits, or underscores`);
+	attributes.splice(index, 1);
+	return tag;
+}
+function getReferences(node) {
+	if (!node.loc?.filename) return [];
+	return [`${node.loc.filename}:${node.loc.start.line}`];
 }
 function getAttributeNameAsString(attribute) {
 	return t.isJSXIdentifier(attribute.name) ? attribute.name.name : attribute.name.name.name;
@@ -113,11 +175,5 @@ function findAttributeValueAsBoolean(attributes, identifier) {
 		if (t.isJSXExpressionContainer(attribute.value) && t.isBooleanLiteral(attribute.value.expression)) return attribute.value.expression.value;
 	}
 }
-function getExpressionAsIdentifier(node) {
-	if (t.isIdentifier(node)) return node.name;
-	/* v8 ignore next */
-	if (t.isJSXIdentifier(node)) return node.name;
-	return AUTO_INCREMENT_IDENTIFIER;
-}
 //#endregion
 export { parseJSXContainerElement, parseJSXElement, parseJSXOpeningElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saykit/transform-jsx",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "JSX and TSX source transformer for SayKit",
   "keywords": [
     "i18n",
@@ -47,8 +47,8 @@
     "@babel/parser": "^7.29.7",
     "@babel/traverse": "^7.29.7",
     "@babel/types": "^7.29.7",
-    "@saykit/config": "^0.5.0",
-    "@saykit/transform-js": "^0.5.0"
+    "@saykit/config": "^0.6.1",
+    "@saykit/transform-js": "^0.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",