@saykit/transform-jsx 0.0.0 → 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# @saykit/transform-jsx
+
+> JSX and TSX transformer for [SayKit](https://saykit.js.org).
+
+Extracts and rewrites the `<Say>` macro (and its `<Say.Plural>`, `<Say.Ordinal>`, `<Say.Select>` sub-components) in `.jsx` and `.tsx` files. Used inside a `saykit.config.ts` bucket alongside [`@saykit/transform-js`](https://github.com/k0d13/saykit/tree/main/packages/transform-js).
+
+## Install
+
+```sh
+pnpm add -D @saykit/transform-jsx
+```
+
+## Usage
+
+```ts title="saykit.config.ts"
+import js from '@saykit/transform-js';
+import jsx from '@saykit/transform-jsx';
+
+// inside a bucket:
+transformer: [js(), jsx()],
+```
+
+## Documentation
+
+See [saykit.js.org](https://saykit.js.org).

package/dist/generator.d.mts

@@ -0,0 +1,7 @@
+import { CompositeMessage } from "@saykit/config/features/messages";
+import * as t from "@babel/types";
+
+//#region src/generator.d.ts
+declare function generateSayJSXElement(message: CompositeMessage): t.JSXElement;
+//#endregion
+export { generateSayJSXElement };

package/dist/generator.mjs

@@ -0,0 +1,26 @@
+import { ArgumentMessage, ChoiceMessage, CompositeMessage, ElementMessage } from "@saykit/config/features/messages";
+import * as t from "@babel/types";
+//#region src/generator.ts
+function generateSayJSXElement(message) {
+	const id = message.descriptor.id ?? message.toHashString();
+	const children = generateChildExpressions(message.children);
+	const attributes = [t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral(id)), ...children.map(([k, e]) => t.jsxAttribute(t.jsxIdentifier(Number.isNaN(+k) ? k : `_${k}`), t.jsxExpressionContainer(e)))];
+	return t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("Say"), attributes, true), null, []);
+}
+function generateChildExpressions(messages) {
+	return messages.reduce((c, m) => {
+		if (m instanceof ArgumentMessage) c.push([String(m.identifier), m.expression]);
+		if (m instanceof ElementMessage) {
+			c.push([String(m.identifier), m.expression]);
+			c.push(...generateChildExpressions(m.children));
+		}
+		if (m instanceof ChoiceMessage) {
+			c.push([String(m.identifier), m.expression]);
+			c.push(...generateChildExpressions(m.branches.map((b) => b.value)));
+		}
+		if (m instanceof CompositeMessage) c.push(...generateChildExpressions(m.children));
+		return c;
+	}, []);
+}
+//#endregion
+export { generateSayJSXElement };

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import { Transformer } from "@saykit/config";
+
+//#region src/index.d.ts
+declare function createJsxTransformer(): Transformer;
+//#endregion
+export { createJsxTransformer as default };

package/dist/index.mjs

@@ -0,0 +1,96 @@
+import { generateSayJSXElement } from "./generator.mjs";
+import { parseJSXElement } from "./parser.mjs";
+import { generate } from "@babel/generator";
+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";
+//#region src/index.ts
+const traverse = traverse_.default || traverse_;
+function createProgram(code, id) {
+	const program = parser.parse(code, {
+		sourceType: "module",
+		sourceFilename: id,
+		plugins: ["typescript", "jsx"],
+		allowImportExportEverywhere: false,
+		allowReturnOutsideFunction: true,
+		ranges: true,
+		attachComment: true,
+		tokens: true
+	});
+	return Object.assign(program, { toString() {
+		return generate(program, {
+			retainLines: true,
+			comments: true,
+			compact: false
+		}).code;
+	} });
+}
+function createJsxTransformer() {
+	return {
+		match(id) {
+			return [".jsx", ".tsx"].some((e) => id.endsWith(e));
+		},
+		extract(code, id) {
+			const program = createProgram(code, id);
+			const messages = [];
+			traverse(program, {
+				Expression(path) {
+					path.node.leadingComments = path.node.leadingComments ?? [];
+					const message = parseExpression(path.node);
+					if (message) {
+						assignSequenceIdentifiers(message, { current: 0 });
+						messages.push(message);
+						path.skip();
+					}
+				},
+				JSXElement(path) {
+					path.node.leadingComments = path.node.leadingComments ?? [];
+					const message = parseJSXElement(path.node);
+					if (message) {
+						assignSequenceIdentifiers(message, { current: 0 });
+						messages.push(message);
+						path.skip();
+					}
+				}
+			});
+			return messages.map((message) => ({
+				message: message.toICUString(),
+				translation: void 0,
+				id: message.descriptor.id,
+				context: message.descriptor.context,
+				comments: message.comments,
+				references: message.references
+			}));
+		},
+		transform(code, id) {
+			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 });
+						const replacement = generateSayCallExpression(message);
+						path.replaceWith(replacement);
+						path.skip();
+					}
+				},
+				JSXElement(path) {
+					path.node.leadingComments = path.node.leadingComments ?? [];
+					const message = parseJSXElement(path.node);
+					if (message) {
+						assignSequenceIdentifiers(message, { current: 0 });
+						const replacement = generateSayJSXElement(message);
+						path.replaceWith(replacement);
+						path.skip();
+					}
+				}
+			});
+			return program.toString();
+		}
+	};
+}
+//#endregion
+export { createJsxTransformer as default };

package/dist/parser.d.mts

@@ -0,0 +1,10 @@
+import { CompositeMessage, ElementMessage } from "@saykit/config/features/messages";
+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;
+declare function parseJSXElement(element: t.JSXElement, fallback?: false): CompositeMessage | null;
+declare function parseJSXElement(element: t.JSXElement, fallback: true): CompositeMessage | ElementMessage;
+//#endregion
+export { parseJSXContainerElement, parseJSXElement, parseJSXOpeningElement };

package/dist/parser.mjs

@@ -0,0 +1,114 @@
+import { AUTO_INCREMENT_IDENTIFIER, ArgumentMessage, ChoiceMessage, CompositeMessage, ElementMessage, LiteralMessage } from "@saykit/config/features/messages";
+import * as t from "@babel/types";
+//#region src/parser.ts
+function parseJSXContainerElement(element) {
+	if (element.openingElement.selfClosing) return null;
+	const processed = processJSXOpeningElement(element.openingElement);
+	if (!processed) return null;
+	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();
+			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));
+		}
+		return p;
+	}, []);
+	return new CompositeMessage({
+		id: findAttributeValueIfStringLiteralAsString(element.openingElement.attributes, "id"),
+		context: findAttributeValueIfStringLiteralAsString(element.openingElement.attributes, "context")
+	}, [], [], children, accessor);
+}
+function parseJSXOpeningElement(element) {
+	if (!element.selfClosing) return null;
+	const processed = processJSXOpeningElement(element);
+	if (!processed) return null;
+	const [accessor, kind] = processed;
+	if (typeof kind === "string" && [
+		"select",
+		"ordinal",
+		"plural"
+	].includes(kind)) {
+		const branches = element.attributes.reduce((b, a) => {
+			if (!t.isJSXAttribute(a)) return b;
+			let identifier = getAttributeNameAsString(a);
+			if (identifier === "_" || identifier === "id" || identifier === "context") return b;
+			if (identifier.startsWith("_") && identifier.length > 1 && !Number.isNaN(+identifier.slice(1))) identifier = identifier.slice(1);
+			if (t.isStringLiteral(a.value)) b.push({
+				identifier,
+				value: new LiteralMessage(a.value.value)
+			});
+			else if (t.isJSXExpressionContainer(a.value)) {
+				if (t.isJSXElement(a.value.expression)) b.push({
+					identifier,
+					value: parseJSXElement(a.value.expression, true)
+				});
+				else if (t.isJSXFragment(a.value.expression)) b.push({
+					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)
+				});
+			}
+			return b;
+		}, []);
+		const initialiser = findAttributeValueIfExpressionOrStringLiteral(element.attributes, "_");
+		if (!initialiser) return null;
+		const choice = new ChoiceMessage(kind, getExpressionAsIdentifier(initialiser), branches, initialiser);
+		return new CompositeMessage({
+			id: findAttributeValueIfStringLiteralAsString(element.attributes, "id"),
+			context: findAttributeValueIfStringLiteralAsString(element.attributes, "context")
+		}, [], [], [choice], accessor);
+	}
+	return null;
+}
+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()];
+	return null;
+}
+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);
+	const wrapped = parseJSXElement(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("Say"), []), t.jsxClosingElement(t.jsxIdentifier("Say")), element.children), true);
+	if (wrapped) return new ElementMessage(AUTO_INCREMENT_IDENTIFIER, [wrapped], element);
+	return null;
+}
+function getAttributeNameAsString(attribute) {
+	if (t.isJSXIdentifier(attribute.name)) return attribute.name.name;
+	if (t.isJSXNamespacedName(attribute.name)) return attribute.name.name.name;
+}
+function findAttributeValueIfStringLiteralAsString(attributes, identifier) {
+	for (const attribute of attributes) {
+		if (!t.isJSXAttribute(attribute)) continue;
+		if (t.isJSXIdentifier(attribute.name) && attribute.name.name === identifier) {
+			if (t.isStringLiteral(attribute.value)) return attribute.value.value;
+		}
+	}
+}
+function findAttributeValueIfExpressionOrStringLiteral(attributes, identifier) {
+	for (const attribute of attributes) {
+		if (!t.isJSXAttribute(attribute)) continue;
+		if (t.isJSXIdentifier(attribute.name) && attribute.name.name === identifier) {
+			if (t.isJSXExpressionContainer(attribute.value) && t.isExpression(attribute.value.expression)) return attribute.value.expression;
+			if (t.isStringLiteral(attribute.value)) return attribute.value;
+		}
+	}
+}
+function getExpressionAsIdentifier(node) {
+	if (t.isIdentifier(node)) return node.name;
+	if (t.isJSXIdentifier(node)) return node.name;
+	return AUTO_INCREMENT_IDENTIFIER;
+}
+//#endregion
+export { parseJSXContainerElement, parseJSXElement, parseJSXOpeningElement };

package/package.json

@@ -1,4 +1,65 @@
-{
-  "name": "@saykit/transform-jsx",
-  "version": "0.0.0"
+{
+  "name": "@saykit/transform-jsx",
+  "version": "0.1.0",
+  "description": "JSX and TSX source transformer for SayKit",
+  "keywords": [
+    "i18n",
+    "jsx",
+    "saykit",
+    "transformer",
+    "tsx"
+  ],
+  "homepage": "https://github.com/k0d13/saykit#readme",
+  "bugs": {
+    "url": "https://github.com/k0d13/saykit/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/k0d13/saykit.git",
+    "directory": "packages/transform-jsx"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.map"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./parser": {
+      "types": "./dist/parser.d.mts",
+      "default": "./dist/parser.mjs"
+    },
+    "./generator": {
+      "types": "./dist/generator.d.mts",
+      "default": "./dist/generator.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@babel/generator": "^7.29.1",
+    "@babel/parser": "^7.29.3",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
+    "@saykit/config": "^0.1.0",
+    "@saykit/transform-js": "^0.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0"
+  },
+  "scripts": {
+    "check": "tsc --noEmit",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "build": "tsdown"
+  }
 }