babel-plugin-formatjs 11.1.0 → 11.2.0

package/index.d.ts

@@ -1,8 +1,8 @@
-import { PluginObj, PluginPass } from '@babel/core';
-import { ExtractedMessageDescriptor, Options } from './types.js';
+import { type PluginObj, type PluginPass } from "@babel/core";
+import { type ExtractedMessageDescriptor, type Options } from "./types.js";
 export type ExtractionResult<M = Record<string, string>> = {
-    messages: ExtractedMessageDescriptor[];
-    meta: M;
+	messages: ExtractedMessageDescriptor[];
+	meta: M;
 };
 export declare const DEFAULT_ID_INTERPOLATION_PATTERN = "[sha512:contenthash:base64:6]";
 declare const plugin: (api: object, options: Options | null | undefined, dirname: string) => PluginObj<PluginPass>;

package/index.js

@@ -1,72 +1,67 @@
-import { declare } from '@babel/helper-plugin-utils';
-import babelPluginSyntaxJsxNs from '@babel/plugin-syntax-jsx';
-import { visitor as CallExpression } from './visitors/call-expression.js';
-import { visitor as JSXOpeningElement } from './visitors/jsx-opening-element.js';
+import "@babel/core";
+import { declare } from "@babel/helper-plugin-utils";
+import babelPluginSyntaxJsxNs from "@babel/plugin-syntax-jsx";
+import "./types.js";
+import { visitor as CallExpression } from "./visitors/call-expression.js";
+import { visitor as JSXOpeningElement } from "./visitors/jsx-opening-element.js";
 const babelPluginSyntaxJsx = babelPluginSyntaxJsxNs.default || babelPluginSyntaxJsxNs;
-export const DEFAULT_ID_INTERPOLATION_PATTERN = '[sha512:contenthash:base64:6]';
-const plugin = 
-// @ts-expect-error PluginPass doesn't allow custom state but it actually does
-declare((api, options) => {
-    api.assertVersion(7);
-    if (!options.idInterpolationPattern) {
-        options.idInterpolationPattern = DEFAULT_ID_INTERPOLATION_PATTERN;
-    }
-    const { pragma } = options;
-    const componentNames = new Set(options.additionalComponentNames);
-    componentNames.add('FormattedMessage');
-    const functionNames = new Set(options.additionalFunctionNames);
-    functionNames.add('formatMessage');
-    // Short hand
-    functionNames.add('$t');
-    // Vue
-    functionNames.add('$formatMessage');
-    return {
-        inherits: babelPluginSyntaxJsx,
-        pre() {
-            this.componentNames = Array.from(componentNames);
-            this.functionNames = Array.from(functionNames);
-        },
-        visitor: {
-            Program: {
-                enter(path) {
-                    this.messages = [];
-                    this.meta = {};
-                    if (!pragma) {
-                        return;
-                    }
-                    for (const { leadingComments } of path.node.body) {
-                        if (!leadingComments) {
-                            continue;
-                        }
-                        const pragmaLineNode = leadingComments.find(c => c.value.includes(pragma));
-                        if (!pragmaLineNode) {
-                            continue;
-                        }
-                        pragmaLineNode.value
-                            .split(pragma)[1]
-                            .trim()
-                            .split(/\s+/g)
-                            .forEach(kv => {
-                            const [k, v] = kv.split(':');
-                            this.meta[k] = v;
-                        });
-                    }
-                },
-                exit(_, { opts: _opts, file: { opts: { filename }, }, }) {
-                    const opts = _opts;
-                    if (typeof opts?.onMetaExtracted === 'function') {
-                        opts.onMetaExtracted(filename || '', this.meta);
-                    }
-                    if (typeof opts?.onMsgExtracted === 'function') {
-                        opts.onMsgExtracted(filename || '', this.messages);
-                    }
-                },
-            },
-            JSXOpeningElement,
-            CallExpression,
-            // GH #4471: Handle optional chaining calls (e.g., intl.formatMessage?.())
-            OptionalCallExpression: CallExpression,
-        },
-    };
+export const DEFAULT_ID_INTERPOLATION_PATTERN = "[sha512:contenthash:base64:6]";
+const plugin = declare((api, options) => {
+	api.assertVersion(7);
+	if (!options.idInterpolationPattern) {
+		options.idInterpolationPattern = DEFAULT_ID_INTERPOLATION_PATTERN;
+	}
+	const { pragma } = options;
+	const componentNames = new Set(options.additionalComponentNames);
+	componentNames.add("FormattedMessage");
+	const functionNames = new Set(options.additionalFunctionNames);
+	functionNames.add("formatMessage");
+	// Short hand
+	functionNames.add("$t");
+	// Vue
+	functionNames.add("$formatMessage");
+	return {
+		inherits: babelPluginSyntaxJsx,
+		pre() {
+			this.componentNames = Array.from(componentNames);
+			this.functionNames = Array.from(functionNames);
+		},
+		visitor: {
+			Program: {
+				enter(path) {
+					this.messages = [];
+					this.meta = {};
+					if (!pragma) {
+						return;
+					}
+					for (const { leadingComments } of path.node.body) {
+						if (!leadingComments) {
+							continue;
+						}
+						const pragmaLineNode = leadingComments.find((c) => c.value.includes(pragma));
+						if (!pragmaLineNode) {
+							continue;
+						}
+						pragmaLineNode.value.split(pragma)[1].trim().split(/\s+/g).forEach((kv) => {
+							const [k, v] = kv.split(":");
+							this.meta[k] = v;
+						});
+					}
+				},
+				exit(_, { opts: _opts, file: { opts: { filename } } }) {
+					const opts = _opts;
+					if (typeof opts?.onMetaExtracted === "function") {
+						opts.onMetaExtracted(filename || "", this.meta);
+					}
+					if (typeof opts?.onMsgExtracted === "function") {
+						opts.onMsgExtracted(filename || "", this.messages);
+					}
+				}
+			},
+			JSXOpeningElement,
+			CallExpression,
+			OptionalCallExpression: CallExpression
+		}
+	};
 });
 export default plugin;

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "babel-plugin-formatjs",
   "description": "Extracts string messages for translation from modules that use formatjs.",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "license": "MIT",
   "author": "Long Ho <holevietlong@gmail.com>",
   "type": "module",
   "types": "index.d.ts",
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/helper-plugin-utils": "^7.26.5",
-    "@babel/plugin-syntax-jsx": "^7.25.9",
-    "@babel/traverse": "^7.26.10",
-    "@babel/types": "^7.26.10",
+    "@babel/core": "^7.28.5",
+    "@babel/helper-plugin-utils": "^7.27.1",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/traverse": "^7.28.5",
+    "@babel/types": "^7.28.5",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
-    "@types/babel__traverse": "^7.20.6",
-    "tslib": "^2.8.0",
-    "@formatjs/ts-transformer": "4.1.0",
-    "@formatjs/icu-messageformat-parser": "3.2.1"
+    "@types/babel__traverse": "^7.28.0",
+    "tslib": "^2.8.1",
+    "@formatjs/icu-messageformat-parser": "3.4.0",
+    "@formatjs/ts-transformer": "4.3.0"
   },
   "bugs": "https://github.com/formatjs/formatjs/issues",
   "gitHead": "8b0baec8eda5002715cf893274fe59782fc2d371",

package/types.d.ts

@@ -1,31 +1,31 @@
-import { NodePath } from '@babel/core';
-import { JSXExpressionContainer, SourceLocation, StringLiteral } from '@babel/types';
+import { type NodePath } from "@babel/core";
+import { type JSXExpressionContainer, type SourceLocation, type StringLiteral } from "@babel/types";
 export interface MessageDescriptor {
-    id: string;
-    defaultMessage?: string;
-    description?: string;
+	id: string;
+	defaultMessage?: string;
+	description?: string;
 }
 export interface State {
-    messages: ExtractedMessageDescriptor[];
-    meta: Record<string, string>;
-    componentNames: string[];
-    functionNames: string[];
+	messages: ExtractedMessageDescriptor[];
+	meta: Record<string, string>;
+	componentNames: string[];
+	functionNames: string[];
 }
 export type ExtractedMessageDescriptor = MessageDescriptor & Partial<SourceLocation> & {
-    file?: string;
+	file?: string;
 };
 export type MessageDescriptorPath = Record<keyof MessageDescriptor, NodePath<StringLiteral> | NodePath<JSXExpressionContainer> | undefined>;
 export interface Options {
-    overrideIdFn?: (id?: string, defaultMessage?: string, description?: string, filePath?: string) => string;
-    onMsgExtracted?: (filePath: string, msgs: MessageDescriptor[]) => void;
-    onMetaExtracted?: (filePath: string, meta: Record<string, string>) => void;
-    idInterpolationPattern?: string;
-    removeDefaultMessage?: boolean;
-    additionalComponentNames?: string[];
-    additionalFunctionNames?: string[];
-    pragma?: string;
-    extractSourceLocation?: boolean;
-    ast?: boolean;
-    preserveWhitespace?: boolean;
-    flatten?: boolean;
+	overrideIdFn?: (id?: string, defaultMessage?: string, description?: string, filePath?: string) => string;
+	onMsgExtracted?: (filePath: string, msgs: MessageDescriptor[]) => void;
+	onMetaExtracted?: (filePath: string, meta: Record<string, string>) => void;
+	idInterpolationPattern?: string;
+	removeDefaultMessage?: boolean;
+	additionalComponentNames?: string[];
+	additionalFunctionNames?: string[];
+	pragma?: string;
+	extractSourceLocation?: boolean;
+	ast?: boolean;
+	preserveWhitespace?: boolean;
+	flatten?: boolean;
 }

package/types.js

@@ -1 +1,2 @@
-export {};
+import "@babel/core";
+import "@babel/types";

package/utils.d.ts

@@ -1,33 +1,30 @@
-import * as t from '@babel/types';
-import { NodePath } from '@babel/core';
-import { ExtractedMessageDescriptor, MessageDescriptor, MessageDescriptorPath, Options } from './types.js';
+import type * as t from "@babel/types";
+import { type NodePath } from "@babel/core";
+import { type ExtractedMessageDescriptor, type MessageDescriptor, type MessageDescriptorPath, type Options } from "./types.js";
 export declare function getMessageDescriptorKey(path: NodePath<any>): string;
-export declare function createMessageDescriptor(propPaths: [
-    NodePath<t.JSXIdentifier> | NodePath<t.Identifier>,
-    NodePath<t.StringLiteral> | NodePath<t.JSXExpressionContainer>
-][]): MessageDescriptorPath;
-export declare function evaluateMessageDescriptor(descriptorPath: MessageDescriptorPath, isJSXSource: boolean | undefined, filename: string | undefined, idInterpolationPattern?: string, overrideIdFn?: Options['overrideIdFn'], preserveWhitespace?: Options['preserveWhitespace'], flatten?: Options['flatten']): MessageDescriptor;
+export declare function createMessageDescriptor(propPaths: [NodePath<t.JSXIdentifier> | NodePath<t.Identifier>, NodePath<t.StringLiteral> | NodePath<t.JSXExpressionContainer>][]): MessageDescriptorPath;
+export declare function evaluateMessageDescriptor(descriptorPath: MessageDescriptorPath, isJSXSource: boolean | undefined, filename: string | undefined, idInterpolationPattern?: string, overrideIdFn?: Options["overrideIdFn"], preserveWhitespace?: Options["preserveWhitespace"], flatten?: Options["flatten"]): MessageDescriptor;
 /**
- * Tag a node as extracted
- * Store this in the node itself so that multiple passes work. Specifically
- * if we remove `description` in the 1st pass, 2nd pass will fail since
- * it expect `description` to be there.
- * HACK: We store this in the node instance since this persists across
- * multiple plugin runs
- * @param path
- */
+* Tag a node as extracted
+* Store this in the node itself so that multiple passes work. Specifically
+* if we remove `description` in the 1st pass, 2nd pass will fail since
+* it expect `description` to be there.
+* HACK: We store this in the node instance since this persists across
+* multiple plugin runs
+* @param path
+*/
 export declare function tagAsExtracted(path: NodePath<any>): void;
 /**
- * Check if a node was extracted
- * @param path
- */
+* Check if a node was extracted
+* @param path
+*/
 export declare function wasExtracted(path: NodePath<any>): boolean;
 /**
- * Store a message in our global messages
- * @param messageDescriptor
- * @param path
- * @param opts
- * @param filename
- * @param messages
- */
+* Store a message in our global messages
+* @param messageDescriptor
+* @param path
+* @param opts
+* @param filename
+* @param messages
+*/
 export declare function storeMessage({ id, description, defaultMessage }: MessageDescriptor, path: NodePath<any>, { extractSourceLocation }: Options, filename: string | undefined, messages: ExtractedMessageDescriptor[]): void;

package/utils.js

@@ -1,156 +1,141 @@
-import { parse } from '@formatjs/icu-messageformat-parser';
-import { hoistSelectors } from '@formatjs/icu-messageformat-parser/manipulator.js';
-import { printAST } from '@formatjs/icu-messageformat-parser/printer.js';
-import { interpolateName } from '@formatjs/ts-transformer';
+import { parse } from "@formatjs/icu-messageformat-parser";
+import { hoistSelectors } from "@formatjs/icu-messageformat-parser/manipulator.js";
+import { printAST } from "@formatjs/icu-messageformat-parser/printer.js";
+import { interpolateName } from "@formatjs/ts-transformer";
+import "@babel/core";
+import "./types.js";
 const DESCRIPTOR_PROPS = new Set([
-    'id',
-    'description',
-    'defaultMessage',
+	"id",
+	"description",
+	"defaultMessage"
 ]);
 function evaluatePath(path) {
-    const evaluated = path.evaluate();
-    if (evaluated.confident) {
-        return evaluated.value;
-    }
-    throw path.buildCodeFrameError('[React Intl] Messages must be statically evaluate-able for extraction.');
+	const evaluated = path.evaluate();
+	if (evaluated.confident) {
+		return evaluated.value;
+	}
+	throw path.buildCodeFrameError("[React Intl] Messages must be statically evaluate-able for extraction.");
 }
 export function getMessageDescriptorKey(path) {
-    if (path.isIdentifier() || path.isJSXIdentifier()) {
-        return path.node.name;
-    }
-    return evaluatePath(path);
+	if (path.isIdentifier() || path.isJSXIdentifier()) {
+		return path.node.name;
+	}
+	return evaluatePath(path);
 }
 function getMessageDescriptorValue(path, isMessageNode) {
-    if (!path) {
-        return '';
-    }
-    if (path.isJSXExpressionContainer()) {
-        // If this is already compiled, no need to recompiled it
-        if (isMessageNode && path.get('expression').isArrayExpression()) {
-            return '';
-        }
-        path = path.get('expression');
-    }
-    // Always trim the Message Descriptor values.
-    const descriptorValue = evaluatePath(path);
-    return descriptorValue;
+	if (!path) {
+		return "";
+	}
+	if (path.isJSXExpressionContainer()) {
+		// If this is already compiled, no need to recompiled it
+		if (isMessageNode && path.get("expression").isArrayExpression()) {
+			return "";
+		}
+		path = path.get("expression");
+	}
+	// Always trim the Message Descriptor values.
+	const descriptorValue = evaluatePath(path);
+	return descriptorValue;
 }
 export function createMessageDescriptor(propPaths) {
-    return propPaths.reduce((hash, [keyPath, valuePath]) => {
-        const key = getMessageDescriptorKey(keyPath);
-        if (DESCRIPTOR_PROPS.has(key)) {
-            hash[key] = valuePath;
-        }
-        return hash;
-    }, {
-        id: undefined,
-        defaultMessage: undefined,
-        description: undefined,
-    });
+	return propPaths.reduce((hash, [keyPath, valuePath]) => {
+		const key = getMessageDescriptorKey(keyPath);
+		if (DESCRIPTOR_PROPS.has(key)) {
+			hash[key] = valuePath;
+		}
+		return hash;
+	}, {
+		id: undefined,
+		defaultMessage: undefined,
+		description: undefined
+	});
 }
 export function evaluateMessageDescriptor(descriptorPath, isJSXSource = false, filename, idInterpolationPattern, overrideIdFn, preserveWhitespace, flatten) {
-    let id = getMessageDescriptorValue(descriptorPath.id);
-    let defaultMessage = getICUMessageValue(descriptorPath.defaultMessage, {
-        isJSXSource,
-    }, preserveWhitespace);
-    const description = getMessageDescriptorValue(descriptorPath.description);
-    // GH #3537: Apply flatten transformation before calling overrideIdFn
-    // so that the ID generation sees the same message format as the final output
-    if (flatten && defaultMessage) {
-        try {
-            defaultMessage = printAST(hoistSelectors(parse(defaultMessage)));
-        }
-        catch (e) {
-            // If flatten fails, continue with original message
-            // The error will be caught again during validation
-        }
-    }
-    if (overrideIdFn) {
-        id = overrideIdFn(id, defaultMessage, description, filename);
-    }
-    else if (!id && idInterpolationPattern && defaultMessage) {
-        id = interpolateName({ resourcePath: filename }, idInterpolationPattern, {
-            content: description
-                ? `${defaultMessage}#${description}`
-                : defaultMessage,
-        });
-    }
-    const descriptor = {
-        id,
-    };
-    if (description) {
-        descriptor.description = description;
-    }
-    if (defaultMessage) {
-        descriptor.defaultMessage = defaultMessage;
-    }
-    return descriptor;
+	let id = getMessageDescriptorValue(descriptorPath.id);
+	let defaultMessage = getICUMessageValue(descriptorPath.defaultMessage, { isJSXSource }, preserveWhitespace);
+	const description = getMessageDescriptorValue(descriptorPath.description);
+	// GH #3537: Apply flatten transformation before calling overrideIdFn
+	// so that the ID generation sees the same message format as the final output
+	if (flatten && defaultMessage) {
+		try {
+			defaultMessage = printAST(hoistSelectors(parse(defaultMessage)));
+		} catch {}
+	}
+	if (overrideIdFn) {
+		id = overrideIdFn(id, defaultMessage, description, filename);
+	} else if (!id && idInterpolationPattern && defaultMessage) {
+		id = interpolateName({ resourcePath: filename }, idInterpolationPattern, { content: description ? `${defaultMessage}#${description}` : defaultMessage });
+	}
+	const descriptor = { id };
+	if (description) {
+		descriptor.description = description;
+	}
+	if (defaultMessage) {
+		descriptor.defaultMessage = defaultMessage;
+	}
+	return descriptor;
 }
 function getICUMessageValue(messagePath, { isJSXSource = false } = {}, preserveWhitespace) {
-    if (!messagePath) {
-        return '';
-    }
-    let message = getMessageDescriptorValue(messagePath, true);
-    if (!preserveWhitespace) {
-        message = message.trim().replace(/\s+/gm, ' ');
-    }
-    try {
-        parse(message);
-    }
-    catch (parseError) {
-        if (isJSXSource &&
-            messagePath.isLiteral() &&
-            message.indexOf('\\\\') >= 0) {
-            throw messagePath.buildCodeFrameError('[React Intl] Message failed to parse. ' +
-                'It looks like `\\`s were used for escaping, ' +
-                "this won't work with JSX string literals. " +
-                'Wrap with `{}`. ' +
-                'See: http://facebook.github.io/react/docs/jsx-gotchas.html');
-        }
-        throw messagePath.buildCodeFrameError('[React Intl] Message failed to parse. ' +
-            'See: https://formatjs.github.io/docs/core-concepts/icu-syntax' +
-            `\n${parseError}`);
-    }
-    return message;
+	if (!messagePath) {
+		return "";
+	}
+	let message = getMessageDescriptorValue(messagePath, true);
+	if (!preserveWhitespace) {
+		message = message.trim().replace(/\s+/gm, " ");
+	}
+	try {
+		parse(message);
+	} catch (parseError) {
+		if (isJSXSource && messagePath.isLiteral() && message.indexOf("\\\\") >= 0) {
+			throw messagePath.buildCodeFrameError("[React Intl] Message failed to parse. " + "It looks like `\\`s were used for escaping, " + "this won't work with JSX string literals. " + "Wrap with `{}`. " + "See: http://facebook.github.io/react/docs/jsx-gotchas.html");
+		}
+		throw messagePath.buildCodeFrameError("[React Intl] Message failed to parse. " + "See: https://formatjs.github.io/docs/core-concepts/icu-syntax" + `\n${parseError}`);
+	}
+	return message;
 }
-const EXTRACTED = Symbol('FormatJSExtracted');
+const EXTRACTED = Symbol("FormatJSExtracted");
 /**
- * Tag a node as extracted
- * Store this in the node itself so that multiple passes work. Specifically
- * if we remove `description` in the 1st pass, 2nd pass will fail since
- * it expect `description` to be there.
- * HACK: We store this in the node instance since this persists across
- * multiple plugin runs
- * @param path
- */
+* Tag a node as extracted
+* Store this in the node itself so that multiple passes work. Specifically
+* if we remove `description` in the 1st pass, 2nd pass will fail since
+* it expect `description` to be there.
+* HACK: We store this in the node instance since this persists across
+* multiple plugin runs
+* @param path
+*/
 export function tagAsExtracted(path) {
-    path.node[EXTRACTED] = true;
+	path.node[EXTRACTED] = true;
 }
 /**
- * Check if a node was extracted
- * @param path
- */
+* Check if a node was extracted
+* @param path
+*/
 export function wasExtracted(path) {
-    return !!path.node[EXTRACTED];
+	return !!path.node[EXTRACTED];
 }
 /**
- * Store a message in our global messages
- * @param messageDescriptor
- * @param path
- * @param opts
- * @param filename
- * @param messages
- */
+* Store a message in our global messages
+* @param messageDescriptor
+* @param path
+* @param opts
+* @param filename
+* @param messages
+*/
 export function storeMessage({ id, description, defaultMessage }, path, { extractSourceLocation }, filename, messages) {
-    if (!id && !defaultMessage) {
-        throw path.buildCodeFrameError('[React Intl] Message Descriptors require an `id` or `defaultMessage`.');
-    }
-    let loc = {};
-    if (extractSourceLocation) {
-        loc = {
-            file: filename,
-            ...path.node.loc,
-        };
-    }
-    messages.push({ id, description, defaultMessage, ...loc });
+	if (!id && !defaultMessage) {
+		throw path.buildCodeFrameError("[React Intl] Message Descriptors require an `id` or `defaultMessage`.");
+	}
+	let loc = {};
+	if (extractSourceLocation) {
+		loc = {
+			file: filename,
+			...path.node.loc
+		};
+	}
+	messages.push({
+		id,
+		description,
+		defaultMessage,
+		...loc
+	});
 }

package/visitors/call-expression.d.ts

@@ -1,5 +1,5 @@
-import { PluginPass } from '@babel/core';
-import * as t from '@babel/types';
-import { State } from '../types.js';
-import { VisitNodeFunction } from '@babel/traverse';
+import { type PluginPass } from "@babel/core";
+import * as t from "@babel/types";
+import { type State } from "../types.js";
+import { type VisitNodeFunction } from "@babel/traverse";
 export declare const visitor: VisitNodeFunction<PluginPass & State, t.CallExpression>;

package/visitors/call-expression.js

@@ -1,121 +1,110 @@
-import * as t from '@babel/types';
-import { createMessageDescriptor, evaluateMessageDescriptor, wasExtracted, storeMessage, tagAsExtracted, } from '../utils.js';
-import { parse } from '@formatjs/icu-messageformat-parser';
+import "@babel/core";
+import * as t from "@babel/types";
+import "../types.js";
+import "@babel/traverse";
+import { createMessageDescriptor, evaluateMessageDescriptor, wasExtracted, storeMessage, tagAsExtracted } from "../utils.js";
+import { parse } from "@formatjs/icu-messageformat-parser";
 function assertObjectExpression(path, callee) {
-    if (!path || !path.isObjectExpression()) {
-        throw path.buildCodeFrameError(`[React Intl] \`${callee.get('property').node.name}()\` must be called with an object expression with values that are React Intl Message Descriptors, also defined as object expressions.`);
-    }
+	if (!path || !path.isObjectExpression()) {
+		throw path.buildCodeFrameError(`[React Intl] \`${callee.get("property").node.name}()\` must be called with an object expression with values that are React Intl Message Descriptors, also defined as object expressions.`);
+	}
 }
 function isFormatMessageCall(callee, functionNames) {
-    if (functionNames.find(name => callee.isIdentifier({ name }))) {
-        return true;
-    }
-    // GH #4471: Handle both MemberExpression and OptionalMemberExpression
-    // (e.g., intl.formatMessage() and intl.formatMessage?.())
-    if (callee.isMemberExpression() || callee.isOptionalMemberExpression()) {
-        const property = callee.get('property');
-        return !!functionNames.find(name => property.isIdentifier({ name }));
-    }
-    return false;
+	if (functionNames.find((name) => callee.isIdentifier({ name }))) {
+		return true;
+	}
+	// GH #4471: Handle both MemberExpression and OptionalMemberExpression
+	// (e.g., intl.formatMessage() and intl.formatMessage?.())
+	if (callee.isMemberExpression() || callee.isOptionalMemberExpression()) {
+		const property = callee.get("property");
+		return !!functionNames.find((name) => property.isIdentifier({ name }));
+	}
+	return false;
 }
 function getMessagesObjectFromExpression(nodePath) {
-    let currentPath = nodePath;
-    while (t.isTSAsExpression(currentPath.node) ||
-        t.isTSTypeAssertion(currentPath.node) ||
-        t.isTypeCastExpression(currentPath.node)) {
-        currentPath = currentPath.get('expression');
-    }
-    return currentPath;
+	let currentPath = nodePath;
+	while (t.isTSAsExpression(currentPath.node) || t.isTSTypeAssertion(currentPath.node) || t.isTypeCastExpression(currentPath.node)) {
+		currentPath = currentPath.get("expression");
+	}
+	return currentPath;
 }
-export const visitor = function (path, { opts, file: { opts: { filename }, }, }) {
-    const { overrideIdFn, idInterpolationPattern, removeDefaultMessage, ast, preserveWhitespace, flatten, } = opts;
-    if (wasExtracted(path)) {
-        return;
-    }
-    const { messages, functionNames } = this;
-    const callee = path.get('callee');
-    const args = path.get('arguments');
-    /**
-     * Process MessageDescriptor
-     * @param messageDescriptor Message Descriptor
-     */
-    function processMessageObject(messageDescriptor) {
-        assertObjectExpression(messageDescriptor, callee);
-        const properties = messageDescriptor.get('properties');
-        const descriptorPath = createMessageDescriptor(properties.map(prop => [prop.get('key'), prop.get('value')]));
-        // If the message is already compiled, don't re-compile it
-        if (descriptorPath.defaultMessage?.isArrayExpression()) {
-            return;
-        }
-        // Evaluate the Message Descriptor values, then store it.
-        const descriptor = evaluateMessageDescriptor(descriptorPath, false, filename || undefined, idInterpolationPattern, overrideIdFn, preserveWhitespace, flatten);
-        storeMessage(descriptor, messageDescriptor, opts, filename || undefined, messages);
-        const firstProp = properties[0];
-        const defaultMessageProp = properties.find(prop => {
-            const keyProp = prop.get('key');
-            return (keyProp.isIdentifier({ name: 'defaultMessage' }) ||
-                keyProp.isStringLiteral({ value: 'defaultMessage' }));
-        });
-        const idProp = properties.find(prop => {
-            const keyProp = prop.get('key');
-            return (keyProp.isIdentifier({ name: 'id' }) ||
-                keyProp.isStringLiteral({ value: 'id' }));
-        });
-        // Insert ID potentially 1st before removing nodes
-        if (idProp) {
-            idProp.get('value').replaceWith(t.stringLiteral(descriptor.id));
-        }
-        else {
-            firstProp.insertBefore(t.objectProperty(t.identifier('id'), t.stringLiteral(descriptor.id)));
-        }
-        // Remove description
-        properties
-            .find(prop => {
-            const keyProp = prop.get('key');
-            return (keyProp.isIdentifier({ name: 'description' }) ||
-                keyProp.isStringLiteral({ value: 'description' }));
-        })
-            ?.remove();
-        // Pre-parse or remove defaultMessage
-        if (defaultMessageProp) {
-            if (removeDefaultMessage) {
-                defaultMessageProp?.remove();
-            }
-            else if (descriptor.defaultMessage) {
-                const valueProp = defaultMessageProp.get('value');
-                if (ast) {
-                    valueProp.replaceWithSourceString(JSON.stringify(parse(descriptor.defaultMessage)));
-                }
-                else {
-                    valueProp.replaceWith(t.stringLiteral(descriptor.defaultMessage));
-                }
-            }
-        }
-        tagAsExtracted(path);
-    }
-    // Check that this is `defineMessages` call
-    if (callee.isIdentifier({ name: 'defineMessages' }) ||
-        callee.isIdentifier({ name: 'defineMessage' })) {
-        const firstArgument = args[0];
-        const messagesObj = getMessagesObjectFromExpression(firstArgument);
-        assertObjectExpression(messagesObj, callee);
-        if (callee.isIdentifier({ name: 'defineMessage' })) {
-            processMessageObject(messagesObj);
-        }
-        else {
-            const properties = messagesObj.get('properties');
-            if (Array.isArray(properties)) {
-                properties
-                    .map(prop => prop.get('value'))
-                    .forEach(processMessageObject);
-            }
-        }
-    }
-    // Check that this is `intl.formatMessage` call
-    if (isFormatMessageCall(callee, functionNames)) {
-        const messageDescriptor = args[0];
-        if (messageDescriptor && messageDescriptor.isObjectExpression()) {
-            processMessageObject(messageDescriptor);
-        }
-    }
+export const visitor = function(path, { opts, file: { opts: { filename } } }) {
+	const { overrideIdFn, idInterpolationPattern, removeDefaultMessage, ast, preserveWhitespace, flatten } = opts;
+	if (wasExtracted(path)) {
+		return;
+	}
+	const { messages, functionNames } = this;
+	const callee = path.get("callee");
+	const args = path.get("arguments");
+	/**
+	* Process MessageDescriptor
+	* @param messageDescriptor Message Descriptor
+	*/
+	function processMessageObject(messageDescriptor) {
+		assertObjectExpression(messageDescriptor, callee);
+		const properties = messageDescriptor.get("properties");
+		const descriptorPath = createMessageDescriptor(properties.map((prop) => [prop.get("key"), prop.get("value")]));
+		// If the message is already compiled, don't re-compile it
+		if (descriptorPath.defaultMessage?.isArrayExpression()) {
+			return;
+		}
+		// Evaluate the Message Descriptor values, then store it.
+		const descriptor = evaluateMessageDescriptor(descriptorPath, false, filename || undefined, idInterpolationPattern, overrideIdFn, preserveWhitespace, flatten);
+		storeMessage(descriptor, messageDescriptor, opts, filename || undefined, messages);
+		const firstProp = properties[0];
+		const defaultMessageProp = properties.find((prop) => {
+			const keyProp = prop.get("key");
+			return keyProp.isIdentifier({ name: "defaultMessage" }) || keyProp.isStringLiteral({ value: "defaultMessage" });
+		});
+		const idProp = properties.find((prop) => {
+			const keyProp = prop.get("key");
+			return keyProp.isIdentifier({ name: "id" }) || keyProp.isStringLiteral({ value: "id" });
+		});
+		// Insert ID potentially 1st before removing nodes
+		if (idProp) {
+			idProp.get("value").replaceWith(t.stringLiteral(descriptor.id));
+		} else {
+			firstProp.insertBefore(t.objectProperty(t.identifier("id"), t.stringLiteral(descriptor.id)));
+		}
+		// Remove description
+		properties.find((prop) => {
+			const keyProp = prop.get("key");
+			return keyProp.isIdentifier({ name: "description" }) || keyProp.isStringLiteral({ value: "description" });
+		})?.remove();
+		// Pre-parse or remove defaultMessage
+		if (defaultMessageProp) {
+			if (removeDefaultMessage) {
+				defaultMessageProp?.remove();
+			} else if (descriptor.defaultMessage) {
+				const valueProp = defaultMessageProp.get("value");
+				if (ast) {
+					valueProp.replaceWithSourceString(JSON.stringify(parse(descriptor.defaultMessage)));
+				} else {
+					valueProp.replaceWith(t.stringLiteral(descriptor.defaultMessage));
+				}
+			}
+		}
+		tagAsExtracted(path);
+	}
+	// Check that this is `defineMessages` call
+	if (callee.isIdentifier({ name: "defineMessages" }) || callee.isIdentifier({ name: "defineMessage" })) {
+		const firstArgument = args[0];
+		const messagesObj = getMessagesObjectFromExpression(firstArgument);
+		assertObjectExpression(messagesObj, callee);
+		if (callee.isIdentifier({ name: "defineMessage" })) {
+			processMessageObject(messagesObj);
+		} else {
+			const properties = messagesObj.get("properties");
+			if (Array.isArray(properties)) {
+				properties.map((prop) => prop.get("value")).forEach(processMessageObject);
+			}
+		}
+	}
+	// Check that this is `intl.formatMessage` call
+	if (isFormatMessageCall(callee, functionNames)) {
+		const messageDescriptor = args[0];
+		if (messageDescriptor && messageDescriptor.isObjectExpression()) {
+			processMessageObject(messageDescriptor);
+		}
+	}
 };

package/visitors/jsx-opening-element.d.ts

@@ -1,5 +1,5 @@
-import { PluginPass } from '@babel/core';
-import { State } from '../types.js';
-import * as t from '@babel/types';
-import { VisitNodeFunction } from '@babel/traverse';
+import { type PluginPass } from "@babel/core";
+import { type State } from "../types.js";
+import * as t from "@babel/types";
+import { type VisitNodeFunction } from "@babel/traverse";
 export declare const visitor: VisitNodeFunction<PluginPass & State, t.JSXOpeningElement>;

package/visitors/jsx-opening-element.js

@@ -1,82 +1,74 @@
-import * as t from '@babel/types';
-import { parse } from '@formatjs/icu-messageformat-parser';
-import { createMessageDescriptor, evaluateMessageDescriptor, getMessageDescriptorKey, storeMessage, tagAsExtracted, wasExtracted, } from '../utils.js';
-export const visitor = function (path, { opts, file: { opts: { filename }, }, }) {
-    const { removeDefaultMessage, idInterpolationPattern, overrideIdFn, ast, preserveWhitespace, flatten, } = opts;
-    const { componentNames, messages } = this;
-    if (wasExtracted(path)) {
-        return;
-    }
-    const name = path.get('name');
-    if (!componentNames.find(n => name.isJSXIdentifier({ name: n }))) {
-        return;
-    }
-    const attributes = path
-        .get('attributes')
-        .filter(attr => attr.isJSXAttribute());
-    const descriptorPath = createMessageDescriptor(attributes.map(attr => [
-        attr.get('name'),
-        attr.get('value'),
-    ]));
-    // In order for a default message to be extracted when
-    // declaring a JSX element, it must be done with standard
-    // `key=value` attributes. But it's completely valid to
-    // write `<FormattedMessage {...descriptor} />`, because it will be
-    // skipped here and extracted elsewhere. The descriptor will
-    // be extracted only (storeMessage) if a `defaultMessage` prop.
-    if (!descriptorPath.defaultMessage) {
-        return;
-    }
-    // Evaluate the Message Descriptor values in a JSX
-    // context, then store it.
-    const descriptor = evaluateMessageDescriptor(descriptorPath, true, filename || undefined, idInterpolationPattern, overrideIdFn, preserveWhitespace, flatten);
-    storeMessage(descriptor, path, opts, filename || undefined, messages);
-    let idAttr;
-    let descriptionAttr;
-    let defaultMessageAttr;
-    const firstAttr = attributes[0];
-    for (const attr of attributes) {
-        if (!attr.isJSXAttribute()) {
-            continue;
-        }
-        switch (getMessageDescriptorKey(attr.get('name'))) {
-            case 'description':
-                descriptionAttr = attr;
-                break;
-            case 'defaultMessage':
-                defaultMessageAttr = attr;
-                break;
-            case 'id':
-                idAttr = attr;
-                break;
-        }
-    }
-    // Insert ID before removing node to prevent null node insertBefore
-    if (overrideIdFn || (descriptor.id && idInterpolationPattern)) {
-        if (idAttr) {
-            idAttr.get('value').replaceWith(t.stringLiteral(descriptor.id));
-        }
-        else if (firstAttr) {
-            firstAttr.insertBefore(t.jsxAttribute(t.jsxIdentifier('id'), t.stringLiteral(descriptor.id)));
-        }
-    }
-    if (descriptionAttr) {
-        descriptionAttr.remove();
-    }
-    if (defaultMessageAttr) {
-        if (removeDefaultMessage) {
-            defaultMessageAttr.remove();
-        }
-        else if (ast && descriptor.defaultMessage) {
-            defaultMessageAttr
-                .get('value')
-                .replaceWith(t.jsxExpressionContainer(t.nullLiteral()));
-            const valueAttr = defaultMessageAttr.get('value');
-            valueAttr
-                .get('expression')
-                .replaceWithSourceString(JSON.stringify(parse(descriptor.defaultMessage)));
-        }
-    }
-    // Tag the AST node so we don't try to extract it twice.
-    tagAsExtracted(path);
+import "@babel/core";
+import "../types.js";
+import * as t from "@babel/types";
+import "@babel/traverse";
+import { parse } from "@formatjs/icu-messageformat-parser";
+import { createMessageDescriptor, evaluateMessageDescriptor, getMessageDescriptorKey, storeMessage, tagAsExtracted, wasExtracted } from "../utils.js";
+export const visitor = function(path, { opts, file: { opts: { filename } } }) {
+	const { removeDefaultMessage, idInterpolationPattern, overrideIdFn, ast, preserveWhitespace, flatten } = opts;
+	const { componentNames, messages } = this;
+	if (wasExtracted(path)) {
+		return;
+	}
+	const name = path.get("name");
+	if (!componentNames.find((n) => name.isJSXIdentifier({ name: n }))) {
+		return;
+	}
+	const attributes = path.get("attributes").filter((attr) => attr.isJSXAttribute());
+	const descriptorPath = createMessageDescriptor(attributes.map((attr) => [attr.get("name"), attr.get("value")]));
+	// In order for a default message to be extracted when
+	// declaring a JSX element, it must be done with standard
+	// `key=value` attributes. But it's completely valid to
+	// write `<FormattedMessage {...descriptor} />`, because it will be
+	// skipped here and extracted elsewhere. The descriptor will
+	// be extracted only (storeMessage) if a `defaultMessage` prop.
+	if (!descriptorPath.defaultMessage) {
+		return;
+	}
+	// Evaluate the Message Descriptor values in a JSX
+	// context, then store it.
+	const descriptor = evaluateMessageDescriptor(descriptorPath, true, filename || undefined, idInterpolationPattern, overrideIdFn, preserveWhitespace, flatten);
+	storeMessage(descriptor, path, opts, filename || undefined, messages);
+	let idAttr;
+	let descriptionAttr;
+	let defaultMessageAttr;
+	const firstAttr = attributes[0];
+	for (const attr of attributes) {
+		if (!attr.isJSXAttribute()) {
+			continue;
+		}
+		switch (getMessageDescriptorKey(attr.get("name"))) {
+			case "description":
+				descriptionAttr = attr;
+				break;
+			case "defaultMessage":
+				defaultMessageAttr = attr;
+				break;
+			case "id":
+				idAttr = attr;
+				break;
+		}
+	}
+	// Insert ID before removing node to prevent null node insertBefore
+	if (overrideIdFn || descriptor.id && idInterpolationPattern) {
+		if (idAttr) {
+			idAttr.get("value").replaceWith(t.stringLiteral(descriptor.id));
+		} else if (firstAttr) {
+			firstAttr.insertBefore(t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral(descriptor.id)));
+		}
+	}
+	if (descriptionAttr) {
+		descriptionAttr.remove();
+	}
+	if (defaultMessageAttr) {
+		if (removeDefaultMessage) {
+			defaultMessageAttr.remove();
+		} else if (ast && descriptor.defaultMessage) {
+			defaultMessageAttr.get("value").replaceWith(t.jsxExpressionContainer(t.nullLiteral()));
+			const valueAttr = defaultMessageAttr.get("value");
+			valueAttr.get("expression").replaceWithSourceString(JSON.stringify(parse(descriptor.defaultMessage)));
+		}
+	}
+	// Tag the AST node so we don't try to extract it twice.
+	tagAsExtracted(path);
 };