babel-plugin-formatjs 10.3.25 → 10.3.26

package/tests/index.test.ts

@@ -0,0 +1,221 @@
+import * as path from 'path'
+
+import {transformFileSync} from '@babel/core'
+import plugin from '../'
+import {Options, ExtractedMessageDescriptor} from '../types'
+
+function transformAndCheck(fn: string, opts: Options = {}) {
+  const filePath = path.join(__dirname, 'fixtures', `${fn}.js`)
+  const messages: ExtractedMessageDescriptor[] = []
+  const meta = {}
+  const {code} = transform(filePath, {
+    pragma: '@react-intl',
+    ...opts,
+    onMsgExtracted(_, msgs) {
+      messages.push(...msgs)
+    },
+    onMetaExtracted(_, m) {
+      Object.assign(meta, m)
+    },
+  })
+  expect({
+    data: {messages, meta},
+    code: code?.trim(),
+  }).toMatchSnapshot()
+}
+
+test('additionalComponentNames', function () {
+  transformAndCheck('additionalComponentNames', {
+    additionalComponentNames: ['CustomMessage'],
+  })
+})
+
+test('additionalFunctionNames', function () {
+  transformAndCheck('additionalFunctionNames', {
+    additionalFunctionNames: ['t'],
+  })
+})
+
+test('ast', function () {
+  transformAndCheck('ast', {
+    ast: true,
+  })
+})
+
+test('defineMessage', function () {
+  transformAndCheck('defineMessage')
+})
+
+test('descriptionsAsObjects', function () {
+  transformAndCheck('descriptionsAsObjects')
+})
+
+test('defineMessages', function () {
+  transformAndCheck('defineMessages')
+})
+test('empty', function () {
+  transformAndCheck('empty')
+})
+test('extractFromFormatMessageCall', function () {
+  transformAndCheck('extractFromFormatMessageCall')
+})
+test('extractFromFormatMessageCallStateless', function () {
+  transformAndCheck('extractFromFormatMessageCallStateless')
+})
+test('formatMessageCall', function () {
+  transformAndCheck('formatMessageCall')
+})
+test('FormattedMessage', function () {
+  transformAndCheck('FormattedMessage')
+})
+test('inline', function () {
+  transformAndCheck('inline')
+})
+test('templateLiteral', function () {
+  transformAndCheck('templateLiteral')
+})
+
+test('idInterpolationPattern', function () {
+  transformAndCheck('idInterpolationPattern', {
+    idInterpolationPattern: '[folder].[name].[sha512:contenthash:hex:6]',
+  })
+})
+
+test('idInterpolationPattern default', function () {
+  transformAndCheck('idInterpolationPattern')
+})
+
+test('GH #2663', function () {
+  const filePath = path.join(__dirname, 'fixtures', `2663.js`)
+  const messages: ExtractedMessageDescriptor[] = []
+  const meta = {}
+
+  const {code} = transformFileSync(filePath, {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    plugins: [
+      [
+        plugin,
+        {
+          pragma: '@react-intl',
+          onMsgExtracted(_, msgs) {
+            messages.push(...msgs)
+          },
+          onMetaExtracted(_, m) {
+            Object.assign(meta, m)
+          },
+        } as Options,
+        Date.now() + '' + ++cacheBust,
+      ],
+    ],
+  })!
+
+  expect({
+    data: {messages, meta},
+    code: code?.trim(),
+  }).toMatchSnapshot()
+})
+
+test('overrideIdFn', function () {
+  transformAndCheck('overrideIdFn', {
+    overrideIdFn: (
+      id?: string,
+      defaultMessage?: string,
+      description?: string,
+      filePath?: string
+    ) => {
+      const filename = path.basename(filePath!)
+      return `${filename}.${id}.${defaultMessage!.length}.${typeof description}`
+    },
+  })
+})
+test('removeDefaultMessage', function () {
+  transformAndCheck('removeDefaultMessage', {
+    removeDefaultMessage: true,
+  })
+})
+test('removeDefaultMessage + overrideIdFn', function () {
+  transformAndCheck('removeDefaultMessage', {
+    removeDefaultMessage: true,
+    overrideIdFn: (
+      id?: string,
+      defaultMessage?: string,
+      description?: string,
+      filePath?: string
+    ) => {
+      const filename = path.basename(filePath!)
+      return `${filename}.${id}.${defaultMessage!.length}.${typeof description}`
+    },
+  })
+})
+test('preserveWhitespace', function () {
+  transformAndCheck('preserveWhitespace', {
+    preserveWhitespace: true,
+  })
+})
+
+test('extractSourceLocation', function () {
+  const filePath = path.join(__dirname, 'fixtures', 'extractSourceLocation.js')
+  const messages: ExtractedMessageDescriptor[] = []
+  const meta = {}
+
+  const {code} = transform(filePath, {
+    pragma: '@react-intl',
+    extractSourceLocation: true,
+    onMsgExtracted(_, msgs) {
+      messages.push(...msgs)
+    },
+    onMetaExtracted(_, m) {
+      Object.assign(meta, m)
+    },
+  })
+  expect(code?.trim()).toMatchSnapshot()
+  expect(messages).toMatchSnapshot([
+    {
+      file: expect.any(String),
+    },
+  ])
+  expect(meta).toMatchSnapshot()
+})
+
+test('Properly throws parse errors', () => {
+  expect(() =>
+    transform(path.join(__dirname, 'fixtures', 'icuSyntax.js'))
+  ).toThrow('SyntaxError: MALFORMED_ARGUMENT')
+})
+
+test('skipExtractionFormattedMessage', function () {
+  transformAndCheck('skipExtractionFormattedMessage')
+})
+
+let cacheBust = 1
+
+function transform(
+  filePath: string,
+  options: Options = {},
+  {multiplePasses = false} = {}
+) {
+  function getPluginConfig() {
+    return [plugin, options, Date.now() + '' + ++cacheBust]
+  }
+
+  return transformFileSync(filePath, {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: '14',
+            esmodules: true,
+          },
+          modules: false,
+          useBuiltIns: false,
+          ignoreBrowserslistConfig: true,
+        },
+      ],
+      '@babel/preset-react',
+    ],
+    plugins: multiplePasses
+      ? [getPluginConfig(), getPluginConfig()]
+      : [getPluginConfig()],
+  })!
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+// @generated
+{
+  // This is purely for IDE, not for compilation
+  "extends": "../../tsconfig.json"
+}

package/types.ts

@@ -0,0 +1,46 @@
+import {NodePath} from '@babel/core'
+import {
+  JSXExpressionContainer,
+  SourceLocation,
+  StringLiteral,
+} from '@babel/types'
+
+export interface MessageDescriptor {
+  id: string
+  defaultMessage?: string
+  description?: string
+}
+
+export interface State {
+  messages: ExtractedMessageDescriptor[]
+  meta: Record<string, string>
+  componentNames: string[]
+  functionNames: string[]
+}
+
+export type ExtractedMessageDescriptor = MessageDescriptor &
+  Partial<SourceLocation> & {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
+}

package/utils.ts

@@ -0,0 +1,226 @@
+import * as t from '@babel/types'
+import {parse} from '@formatjs/icu-messageformat-parser'
+import {interpolateName} from '@formatjs/ts-transformer'
+
+import {
+  Options,
+  ExtractedMessageDescriptor,
+  MessageDescriptor,
+  MessageDescriptorPath,
+} from './types'
+import {NodePath} from '@babel/core'
+
+const DESCRIPTOR_PROPS = new Set<keyof MessageDescriptorPath>([
+  'id',
+  'description',
+  'defaultMessage',
+])
+
+function evaluatePath(path: NodePath<any>): string {
+  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: NodePath<any>) {
+  if (path.isIdentifier() || path.isJSXIdentifier()) {
+    return path.node.name
+  }
+
+  return evaluatePath(path)
+}
+
+function getMessageDescriptorValue(
+  path?:
+    | NodePath<t.StringLiteral>
+    | NodePath<t.JSXExpressionContainer>
+    | NodePath<t.TemplateLiteral>,
+  isMessageNode?: boolean
+) {
+  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') as NodePath<t.StringLiteral>
+  }
+
+  // Always trim the Message Descriptor values.
+  const descriptorValue = evaluatePath(path)
+
+  return descriptorValue
+}
+
+export function createMessageDescriptor(
+  propPaths: [
+    NodePath<t.JSXIdentifier> | NodePath<t.Identifier>,
+    NodePath<t.StringLiteral> | NodePath<t.JSXExpressionContainer>
+  ][]
+): MessageDescriptorPath {
+  return propPaths.reduce(
+    (hash: MessageDescriptorPath, [keyPath, valuePath]) => {
+      const key = getMessageDescriptorKey(
+        keyPath
+      ) as keyof MessageDescriptorPath
+
+      if (DESCRIPTOR_PROPS.has(key)) {
+        hash[key] = valuePath
+      }
+
+      return hash
+    },
+    {
+      id: undefined,
+      defaultMessage: undefined,
+      description: undefined,
+    }
+  )
+}
+
+export function evaluateMessageDescriptor(
+  descriptorPath: MessageDescriptorPath,
+  isJSXSource = false,
+  filename: string | undefined,
+  idInterpolationPattern?: string,
+  overrideIdFn?: Options['overrideIdFn'],
+  preserveWhitespace?: Options['preserveWhitespace']
+) {
+  let id = getMessageDescriptorValue(descriptorPath.id)
+  const defaultMessage = getICUMessageValue(
+    descriptorPath.defaultMessage,
+    {
+      isJSXSource,
+    },
+    preserveWhitespace
+  )
+  const description = getMessageDescriptorValue(descriptorPath.description)
+
+  if (overrideIdFn) {
+    id = overrideIdFn(id, defaultMessage, description, filename)
+  } else if (!id && idInterpolationPattern && defaultMessage) {
+    id = interpolateName(
+      {resourcePath: filename} as any,
+      idInterpolationPattern,
+      {
+        content: description
+          ? `${defaultMessage}#${description}`
+          : defaultMessage,
+      }
+    )
+  }
+  const descriptor: MessageDescriptor = {
+    id,
+  }
+
+  if (description) {
+    descriptor.description = description
+  }
+  if (defaultMessage) {
+    descriptor.defaultMessage = defaultMessage
+  }
+
+  return descriptor
+}
+
+function getICUMessageValue(
+  messagePath?:
+    | NodePath<t.StringLiteral>
+    | NodePath<t.TemplateLiteral>
+    | NodePath<t.JSXExpressionContainer>,
+  {isJSXSource = false} = {},
+  preserveWhitespace?: Options['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.io/docs/core-concepts/icu-syntax' +
+        `\n${parseError}`
+    )
+  }
+  return message
+}
+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
+ */
+export function tagAsExtracted(path: NodePath<any>) {
+  path.node[EXTRACTED] = true
+}
+/**
+ * Check if a node was extracted
+ * @param path
+ */
+export function wasExtracted(path: NodePath<any>) {
+  return !!path.node[EXTRACTED]
+}
+
+/**
+ * Store a message in our global messages
+ * @param messageDescriptor
+ * @param path
+ * @param opts
+ * @param filename
+ * @param messages
+ */
+export function storeMessage(
+  {id, description, defaultMessage}: MessageDescriptor,
+  path: NodePath<any>,
+  {extractSourceLocation}: Options,
+
+  filename: string | undefined,
+  messages: ExtractedMessageDescriptor[]
+) {
+  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.ts

@@ -0,0 +1,208 @@
+import {NodePath, PluginPass} from '@babel/core'
+import * as t from '@babel/types'
+import {Options, State} from '../types'
+import {VisitNodeFunction} from '@babel/traverse'
+import {
+  createMessageDescriptor,
+  evaluateMessageDescriptor,
+  wasExtracted,
+  storeMessage,
+  tagAsExtracted,
+} from '../utils'
+import {parse} from '@formatjs/icu-messageformat-parser'
+
+function assertObjectExpression(
+  path: NodePath<any>,
+  callee: NodePath<t.Expression | t.V8IntrinsicIdentifier>
+): asserts path is NodePath<t.ObjectExpression> {
+  if (!path || !path.isObjectExpression()) {
+    throw path.buildCodeFrameError(
+      `[React Intl] \`${
+        (callee.get('property') as NodePath<t.Identifier>).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: NodePath<t.Expression | t.V8IntrinsicIdentifier | t.MemberExpression>,
+  functionNames: string[]
+) {
+  if (functionNames.find(name => callee.isIdentifier({name}))) {
+    return true
+  }
+
+  if (callee.isMemberExpression()) {
+    const property = callee.get('property') as NodePath<t.MemberExpression>
+    return !!functionNames.find(name => property.isIdentifier({name}))
+  }
+  return false
+}
+
+function getMessagesObjectFromExpression(
+  nodePath: NodePath<any>
+): NodePath<any> {
+  let currentPath = nodePath
+  while (
+    t.isTSAsExpression(currentPath.node) ||
+    t.isTSTypeAssertion(currentPath.node) ||
+    t.isTypeCastExpression(currentPath.node)
+  ) {
+    currentPath = currentPath.get('expression') as NodePath<any>
+  }
+  return currentPath
+}
+
+export const visitor: VisitNodeFunction<PluginPass & State, t.CallExpression> =
+  function (
+    path,
+    {
+      opts,
+      file: {
+        opts: {filename},
+      },
+    }
+  ) {
+    const {
+      overrideIdFn,
+      idInterpolationPattern,
+      removeDefaultMessage,
+      ast,
+      preserveWhitespace,
+    } = opts as Options
+    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: NodePath<t.ObjectExpression>
+    ) {
+      assertObjectExpression(messageDescriptor, callee)
+
+      const properties = messageDescriptor.get(
+        'properties'
+      ) as NodePath<t.ObjectProperty>[]
+
+      const descriptorPath = createMessageDescriptor(
+        properties.map(
+          prop =>
+            [prop.get('key'), prop.get('value')] as [
+              NodePath<t.Identifier>,
+              NodePath<t.StringLiteral>
+            ]
+        )
+      )
+
+      // 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
+      )
+      storeMessage(
+        descriptor,
+        messageDescriptor,
+        opts as Options,
+        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 as NodePath<t.ObjectExpression>)
+      } else {
+        const properties = messagesObj.get('properties')
+        if (Array.isArray(properties)) {
+          properties
+            .map(prop => prop.get('value') as NodePath<t.ObjectExpression>)
+            .forEach(processMessageObject)
+        }
+      }
+    }
+
+    // Check that this is `intl.formatMessage` call
+    if (isFormatMessageCall(callee, functionNames)) {
+      const messageDescriptor = args[0]
+      if (messageDescriptor.isObjectExpression()) {
+        processMessageObject(messageDescriptor)
+      }
+    }
+  }