diff --git a/packages/babel-plugin-formatjs/tests/__snapshots__/index.test.ts.snap b/packages/babel-plugin-formatjs/tests/__snapshots__/index.test.ts.snap index 86b5c6a882..f05e6040be 100644 --- a/packages/babel-plugin-formatjs/tests/__snapshots__/index.test.ts.snap +++ b/packages/babel-plugin-formatjs/tests/__snapshots__/index.test.ts.snap @@ -292,6 +292,12 @@ var msgs = { escaped: defineMessage({ id: \\"escaped.apostrophe\\", defaultMessage: \\"A quoted value ''{value}'\\" + }), + stringKeys: defineMessage({ + // prettier-ignore + 'id': \\"string.key.id\\", + // prettier-ignore + 'defaultMessage': \\"This is message\\" }) }; export default class Foo extends Component { @@ -327,6 +333,11 @@ export default class Foo extends Component { "description": "Escaped apostrophe", "id": "escaped.apostrophe", }, + Object { + "defaultMessage": "This is message", + "description": "Keys as a string literal", + "id": "string.key.id", + }, ], "meta": Object { "project": "amazing", diff --git a/packages/babel-plugin-formatjs/tests/fixtures/defineMessage.js b/packages/babel-plugin-formatjs/tests/fixtures/defineMessage.js index c1e2b11818..b768870a6b 100644 --- a/packages/babel-plugin-formatjs/tests/fixtures/defineMessage.js +++ b/packages/babel-plugin-formatjs/tests/fixtures/defineMessage.js @@ -28,6 +28,14 @@ const msgs = { description: 'Escaped apostrophe', defaultMessage: "A quoted value ''{value}'", }), + stringKeys: defineMessage({ + // prettier-ignore + 'id': 'string.key.id', + // prettier-ignore + 'description': 'Keys as a string literal', + // prettier-ignore + 'defaultMessage': 'This is message', + }), } export default class Foo extends Component { diff --git a/packages/babel-plugin-formatjs/visitors/call-expression.ts b/packages/babel-plugin-formatjs/visitors/call-expression.ts index cb6e11a2f8..69871e39fe 100644 --- a/packages/babel-plugin-formatjs/visitors/call-expression.ts +++ b/packages/babel-plugin-formatjs/visitors/call-expression.ts @@ -120,12 +120,20 @@ export const visitor: VisitNodeFunction< ) const firstProp = properties[0] - const defaultMessageProp = properties.find(prop => - prop.get('key').isIdentifier({name: 'defaultMessage'}) - ) - const idProp = properties.find(prop => - prop.get('key').isIdentifier({name: 'id'}) - ) + 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) { @@ -138,7 +146,13 @@ export const visitor: VisitNodeFunction< // Remove description properties - .find(prop => prop.get('key').isIdentifier({name: 'description'})) + .find(prop => { + const keyProp = prop.get('key') + return ( + keyProp.isIdentifier({name: 'description'}) || + keyProp.isStringLiteral({value: 'description'}) + ) + }) ?.remove() // Pre-parse or remove defaultMessage