@saykit/transform-jsx 0.8.0 → 0.9.1

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 { isEquivalentPlaceholder, parseExpression } from "@saykit/transform-js/parser";
+import { collectLeadingComments, isEquivalentPlaceholder, parseExpression } from "@saykit/transform-js/parser";
 //#region src/index.ts
 const traverse = traverse_.default || traverse_;
 function createProgram(code, id) {
@@ -37,7 +37,7 @@ function createJsxTransformer() {
 			const messages = [];
 			traverse(program, {
 				Expression(path) {
-					path.node.leadingComments = path.node.leadingComments ?? [];
+					path.node.leadingComments = collectLeadingComments(path);
 					const message = parseExpression(path.node);
 					if (message) {
 						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
@@ -46,7 +46,7 @@ function createJsxTransformer() {
 					}
 				},
 				JSXElement(path) {
-					path.node.leadingComments = path.node.leadingComments ?? [];
+					path.node.leadingComments = collectLeadingComments(path);
 					const message = parseJSXElement(path.node);
 					if (message) {
 						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
@@ -68,7 +68,6 @@ function createJsxTransformer() {
 			const program = createProgram(code, id);
 			traverse(program, {
 				Expression(path) {
-					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseExpression(path.node);
 					if (message) {
 						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);
@@ -78,7 +77,6 @@ function createJsxTransformer() {
 					}
 				},
 				JSXElement(path) {
-					path.node.leadingComments = path.node.leadingComments ?? [];
 					const message = parseJSXElement(path.node);
 					if (message) {
 						assignSequenceIdentifiers(message, { current: 0 }, isEquivalentPlaceholder);

package/dist/parser.d.mts

@@ -2,7 +2,12 @@ import { CompositeMessage, ElementMessage } from "@saykit/config/features/messag
 import * as t from "@babel/types";
 //#region src/parser.d.ts
 declare function parseJSXContainerElement(element: t.JSXElement): CompositeMessage | null;
-declare function parseJSXOpeningElement(element: t.JSXOpeningElement): CompositeMessage | null;
+/**
+ * A self-closing `Say` element. Comments are passed in rather than read off the
+ * node, since they were written in front of the element as a whole and Babel
+ * attaches them there.
+ */
+declare function parseJSXOpeningElement(element: t.JSXOpeningElement, comments?: readonly t.Comment[] | null): CompositeMessage | null;
 declare function parseJSXElement(element: t.JSXElement, fallback?: false): CompositeMessage | null;
 declare function parseJSXElement(element: t.JSXElement, fallback: true): CompositeMessage | ElementMessage;
 //#endregion

package/dist/parser.mjs

@@ -1,12 +1,7 @@
 import { AUTO_INCREMENT_IDENTIFIER, ArgumentMessage, ChoiceMessage, CompositeMessage, ElementMessage, LiteralMessage, isArgumentType, validateArgumentStyle, validateBranchIdentifier } from "@saykit/config/features/messages";
-import { unwrapPlaceholder } from "@saykit/transform-js/parser";
+import { getTranslatorComments, 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) {
@@ -21,9 +16,9 @@ function parseJSXContainerElement(element) {
 	return new CompositeMessage({
 		id: descriptorId,
 		context: descriptorContext
-	}, [], getReferences(element), children, accessor, whitespace);
+	}, getTranslatorComments(element.leadingComments), getReferences(element), children, accessor, whitespace);
 }
-function parseJSXOpeningElement(element) {
+function parseJSXOpeningElement(element, comments) {
 	if (!element.selfClosing) return null;
 	const processed = processJSXOpeningElement(element);
 	if (!processed) return null;
@@ -33,7 +28,7 @@ function parseJSXOpeningElement(element) {
 	const wrap = (children) => new CompositeMessage({
 		id: descriptorId,
 		context: descriptorContext
-	}, [], getReferences(element), children, accessor);
+	}, getTranslatorComments(comments), getReferences(element), children, accessor);
 	if (typeof kind === "string" && [
 		"select",
 		"ordinal",
@@ -90,11 +85,6 @@ function parseJSXOpeningElement(element) {
 	}
 	return null;
 }
-/**
-* The `offset` a plural subtracts from its selector before `#` is formatted.
-* See the JS parser's counterpart — the constraints are the same, only the
-* syntax carrying it differs.
-*/
 function findPluralOffset(attributes) {
 	for (const attribute of attributes) {
 		if (!t.isJSXAttribute(attribute)) continue;
@@ -106,14 +96,6 @@ function findPluralOffset(attributes) {
 		return expression.value;
 	}
 }
-/**
-* The children the JSX transform itself would compile, so a message extracts as
-* the text that renders. Text children come back with their whitespace
-* collapsed the way JSX collapses it — a line break and the indentation around
-* it are layout and disappear, while two lines that both hold text rejoin with
-* the single space that separated the words — every expression container comes
-* back unwrapped, and a comment child comes back as nothing.
-*/
 function buildMessageChildren(element, into = []) {
 	return t.react.buildChildren(element).reduce((p, c) => {
 		const literal = getExpressionAsLiteralText(c);
@@ -127,26 +109,12 @@ function buildMessageChildren(element, into = []) {
 		return p;
 	}, into);
 }
-/**
-* Add text to the message, folding it into the literal in front of it when
-* there is one, so `Hello{' '}world` is three children in the source and one
-* run of text in the catalogue.
-*/
 function pushLiteral(messages, text) {
 	if (!text) return;
 	const last = messages.at(-1);
 	if (last instanceof LiteralMessage) messages[messages.length - 1] = new LiteralMessage(last.text + text);
 	else messages.push(new LiteralMessage(text));
 }
-/**
-* The text a child renders as, when that is knowable at build time — a text
-* child, which `buildChildren` has already collapsed into a string, or an
-* expression holding a literal with nothing interpolated into it.
-*
-* The second is what makes `{' '}` the way to write whitespace that has to
-* survive a line break: it extracts as the space it renders as, rather than as
-* a placeholder a translator can neither see nor move.
-*/
 function getExpressionAsLiteralText(expression) {
 	if (t.isStringLiteral(expression)) return expression.value;
 	if (t.isNumericLiteral(expression)) return String(expression.value);
@@ -164,19 +132,13 @@ function processJSXOpeningElement(element) {
 	return null;
 }
 function parseJSXElement(element, fallback) {
-	const message = element.openingElement.selfClosing ? parseJSXOpeningElement(element.openingElement) : parseJSXContainerElement(element);
+	const message = element.openingElement.selfClosing ? parseJSXOpeningElement(element.openingElement, element.leadingComments) : parseJSXContainerElement(element);
 	if (message) return message;
 	if (!fallback) return null;
 	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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saykit/transform-jsx",
-  "version": "0.8.0",
+  "version": "0.9.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.8.0",
-    "@saykit/transform-js": "^0.8.0"
+    "@saykit/config": "^0.9.1",
+    "@saykit/transform-js": "^0.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",