babel-plugin-formatjs 10.3.23 → 10.3.26

package/tests/fixtures/2663.js

@@ -0,0 +1,3 @@
+async function error1() {
+  await intl.formatMessage({defaultMessage: 'foo', description: 'foo'})
+}

package/tests/fixtures/FormattedMessage.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react'
+import {FormattedMessage} from 'react-intl'
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <FormattedMessage
+        id="foo.bar.baz"
+        defaultMessage="Hello World!"
+        description="The default message."
+      />
+    )
+  }
+}

package/tests/fixtures/additionalComponentNames.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react'
+
+function CustomMessage() {}
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <CustomMessage
+        id="greeting-world"
+        description="Greeting to the world"
+        defaultMessage="Hello World!"
+      />
+    )
+  }
+}

package/tests/fixtures/additionalFunctionNames.js

@@ -0,0 +1,23 @@
+// @react-intl project:foo
+import React, {Component} from 'react'
+
+function CustomMessage() {}
+
+export default class Foo extends Component {
+  render() {
+    t({
+      defaultMessage: 't',
+    })
+    return (
+      <CustomMessage
+        id={formatMessage({
+          defaultMessage: 'foo',
+        })}
+        description={$formatMessage({
+          defaultMessage: 'foo2',
+        })}
+        defaultMessage="Hello World!"
+      />
+    )
+  }
+}

package/tests/fixtures/ast.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react'
+import {FormattedMessage, defineMessage, defineMessages} from 'react-intl'
+
+defineMessage({
+  id: 'defineMessage',
+  defaultMessage: 'this is a {dt, date, full}',
+})
+
+defineMessages({
+  foo: {
+    id: 'defineMessages1',
+    defaultMessage: 'this is a {dt, time, full}',
+  },
+  bar: {
+    id: 'defineMessages2',
+    defaultMessage: 'this is a {dt, number}',
+  },
+  baz: {
+    id: 'compiled',
+    defaultMessage: [{type: 0, value: 'asd'}],
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    Intl.formatMessage({
+      id: 'intl.formatMessage',
+      defaultMessage: 'foo {s, plural, one{1} other{2}}',
+    })
+    return (
+      <>
+        <FormattedMessage
+          id="foo.bar.baz"
+          defaultMessage="Hello World!"
+          description="The default message."
+        />
+        <FormattedMessage
+          id="compiled2"
+          defaultMessage={[{type: 0, value: 'compiled comp'}]}
+          description="The default message."
+        />
+      </>
+    )
+  }
+}

package/tests/fixtures/defineMessage.js

@@ -0,0 +1,57 @@
+// @react-intl project:amazing
+import React, {Component} from 'react'
+import {defineMessage, FormattedMessage} from 'react-intl'
+
+const msgs = {
+  header: defineMessage({
+    id: 'foo.bar.baz',
+    defaultMessage: 'Hello World!',
+    description: 'The default message',
+  }),
+  content: defineMessage({
+    id: 'foo.bar.biff',
+    defaultMessage: 'Hello Nurse!',
+    description: 'Another message',
+  }),
+  kittens: defineMessage({
+    id: 'app.home.kittens',
+    description: 'Counts kittens',
+    defaultMessage: '{count, plural, =0 {😭} one {# kitten} other {# kittens}}',
+  }),
+  trailingWhitespace: defineMessage({
+    id: 'trailing.ws',
+    description: 'Whitespace',
+    defaultMessage: '   Some whitespace   ',
+  }),
+  escaped: defineMessage({
+    id: 'escaped.apostrophe',
+    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 {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <p>
+          <FormattedMessage {...msgs.kittens} />
+        </p>
+      </div>
+    )
+  }
+}

package/tests/fixtures/defineMessages.js

@@ -0,0 +1,49 @@
+// @react-intl project:amazing
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+
+const msgs = defineMessages({
+  header: {
+    id: 'foo.bar.baz',
+    defaultMessage: 'Hello World!',
+    description: 'The default message',
+  },
+  content: {
+    id: 'foo.bar.biff',
+    defaultMessage: 'Hello Nurse!',
+    description: 'Another message',
+  },
+  kittens: {
+    id: 'app.home.kittens',
+    description: 'Counts kittens',
+    defaultMessage: '{count, plural, =0 {😭} one {# kitten} other {# kittens}}',
+  },
+  trailingWhitespace: {
+    id: 'trailing.ws',
+    description: 'Whitespace',
+    defaultMessage: '   Some whitespace   ',
+  },
+  escaped: {
+    id: 'escaped.apostrophe',
+    description: 'Escaped apostrophe',
+    defaultMessage: "A quoted value ''{value}'",
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <p>
+          <FormattedMessage {...msgs.kittens} />
+        </p>
+      </div>
+    )
+  }
+}

package/tests/fixtures/descriptionsAsObjects.js

@@ -0,0 +1,18 @@
+import React, {Component} from 'react'
+import {FormattedMessage} from 'react-intl'
+
+// @react-intl project:amazing2
+export default class Foo extends Component {
+  render() {
+    return (
+      <FormattedMessage
+        id="foo.bar.baz"
+        defaultMessage="Hello World!"
+        description={{
+          text: 'Something for the translator.',
+          metadata: 'Additional metadata content.',
+        }}
+      />
+    )
+  }
+}

package/tests/fixtures/empty.js

@@ -0,0 +1,8 @@
+import React, {Component} from 'react'
+import {defineMessage} from 'react-intl'
+
+export default class Foo extends Component {
+  render() {
+    return <div></div>
+  }
+}

package/tests/fixtures/extractFromFormatMessageCall.js

@@ -0,0 +1,47 @@
+import {FormattedMessage, injectIntl} from 'react-intl'
+import React, {Component} from 'react'
+
+const objectPointer = {
+  id: 'foo.bar.invalid',
+  defaultMessage: 'This cannot be extracted',
+  description: 'the plugin only supports inline objects',
+}
+
+class Foo extends Component {
+  render() {
+    const {intl} = this.props
+    const {
+      intl: {formatMessage},
+    } = this.props
+    const msgs = {
+      baz: this.props.intl.formatMessage({
+        id: 'foo.bar.baz',
+        defaultMessage: 'Hello World!',
+        description: 'The default message',
+      }),
+      biff: intl.formatMessage({
+        id: 'foo.bar.biff',
+        defaultMessage: 'Hello Nurse!',
+        description: 'Another message',
+      }),
+      qux: formatMessage({
+        id: 'foo.bar.qux',
+        defaultMessage: 'Hello Stranger!',
+        description: 'A different message',
+      }),
+      invalid: this.props.intl.formatMessage(objectPointer),
+    }
+
+    return (
+      <div>
+        <h1>{msgs.header}</h1>
+        <p>{msgs.content}</p>
+        <span>
+          <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+        </span>
+      </div>
+    )
+  }
+}
+
+export default injectIntl(Foo)

package/tests/fixtures/extractFromFormatMessageCallStateless.js

@@ -0,0 +1,46 @@
+import {FormattedMessage, injectIntl, useIntl} from 'react-intl'
+
+import React from 'react'
+
+function myFunction(param1, {formatMessage, formatDate}) {
+  return (
+    formatMessage({
+      id: 'inline1',
+      defaultMessage: 'Hello params!',
+      description: 'A stateless message',
+    }) + formatDate(new Date())
+  )
+}
+
+const child = myFunction(filterable, intl)
+
+function SFC() {
+  const {formatMessage} = useIntl()
+  return formatMessage({
+    id: 'hook',
+    defaultMessage: 'hook <b>foo</b>',
+    description: 'hook',
+  })
+}
+
+const Foo = ({intl: {formatMessage}}) => {
+  const msgs = {
+    qux: formatMessage({
+      id: 'foo.bar.quux',
+      defaultMessage: 'Hello <b>Stateless!</b>',
+      description: 'A stateless message',
+    }),
+  }
+
+  return (
+    <div>
+      <h1>{msgs.header}</h1>
+      <p>{msgs.content}</p>
+      <span>
+        <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+      </span>
+    </div>
+  )
+}
+
+export default injectIntl(Foo)

package/tests/fixtures/extractSourceLocation.js

@@ -0,0 +1,8 @@
+import React, {Component} from 'react'
+import {FormattedMessage} from 'react-intl'
+
+export default class Foo extends Component {
+  render() {
+    return <FormattedMessage id="foo.bar.baz" defaultMessage="Hello World!" />
+  }
+}

package/tests/fixtures/formatMessageCall.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react'
+import {injectIntl, FormattedMessage} from 'react-intl'
+
+const objectPointer = {
+  id: 'foo.bar.invalid',
+  defaultMessage: 'This cannot be extracted',
+  description: 'the plugin only supports inline objects',
+}
+
+class Foo extends Component {
+  render() {
+    const msgs = {
+      baz: this.props.intl.formatMessage({
+        id: 'foo.bar.baz',
+        defaultMessage: 'Hello World!',
+        description: 'The default message',
+      }),
+      biff: this.props.intl.formatMessage({
+        id: 'foo.bar.biff',
+        defaultMessage: 'Hello Nurse!',
+        description: 'Another message',
+      }),
+      invalid: this.props.intl.formatMessage(objectPointer),
+    }
+
+    return (
+      <div>
+        <h1>{msgs.header}</h1>
+        <p>{msgs.content}</p>
+        <span>
+          <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+        </span>
+      </div>
+    )
+  }
+}
+
+export default injectIntl(Foo)

package/tests/fixtures/icuSyntax.js

@@ -0,0 +1,18 @@
+import React, {Component} from 'react'
+import {FormattedMessage} from 'react-intl'
+
+export default class Foo extends Component {
+  render() {
+    // This is bad syntax (object property in message)
+    return (
+      <FormattedMessage
+        id="foo.bar.baz"
+        defaultMessage="Hello, {foo.baz}!"
+        description="Broken message"
+        values={{
+          foo: {baz: 'biff'},
+        }}
+      />
+    )
+  }
+}

package/tests/fixtures/idInterpolationPattern.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+
+const msgs = defineMessages({
+  header: {
+    defaultMessage: 'Hello World!',
+    description: 'The default message',
+  },
+  content: {
+    id: 'foo.bar.biff',
+    defaultMessage: 'Hello Nurse!',
+    description: {
+      text: 'Something for the translator.',
+      metadata: 'Additional metadata content.',
+    },
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <FormattedMessage
+          defaultMessage="Hello World!"
+          description="Something for the translator. Another description"
+        />
+        <FormattedMessage
+          defaultMessage="NO ID"
+          description="Something for the translator. Another description"
+        />
+      </div>
+    )
+  }
+}

package/tests/fixtures/inline.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react'
+import {FormattedMessage, defineMessage} from 'react-intl'
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <FormattedMessage
+          id="foo.bar.baz"
+          defaultMessage="Hello World!"
+          description="The default message."
+        />
+        {defineMessage({
+          id: 'header',
+          defaultMessage: 'Hello World!',
+          description: 'The default message',
+        })}
+        {defineMessage({
+          id: 'header2',
+          defaultMessage: 'Hello World!',
+          description: 'The default message',
+        })}
+      </div>
+    )
+  }
+}

package/tests/fixtures/overrideIdFn.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+
+const msgs = defineMessages({
+  header: {
+    id: 'foo.bar.baz',
+    defaultMessage: 'Hello World!',
+    description: 'The default message',
+  },
+  content: {
+    id: 'foo.bar.biff',
+    defaultMessage: 'Hello Nurse!',
+    description: {
+      text: 'Something for the translator.',
+      metadata: 'Additional metadata content.',
+    },
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <FormattedMessage
+          id="foo.bar.zoo"
+          defaultMessage="Hello World!"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+        />
+        <FormattedMessage
+          defaultMessage="NO ID"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+        />
+      </div>
+    )
+  }
+}

package/tests/fixtures/preserveWhitespace.js

@@ -0,0 +1,79 @@
+// @react-intl project:amazing
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+
+const msgs = defineMessages({
+  header: {
+    id: 'foo.bar.baz',
+    defaultMessage: 'Hello World!',
+    description: 'The default message',
+  },
+  content: {
+    id: 'foo.bar.biff',
+    defaultMessage: 'Hello Nurse!',
+    description: 'Another message',
+  },
+  kittens: {
+    id: 'app.home.kittens',
+    description: 'Counts kittens',
+    defaultMessage: '{count, plural, =0 {😭} one {# kitten} other {# kittens}}',
+  },
+  trailingWhitespace: {
+    id: 'trailing.ws',
+    description: 'Whitespace',
+    defaultMessage: '   Some whitespace   ',
+  },
+  escaped: {
+    id: 'escaped.apostrophe',
+    description: 'Escaped apostrophe',
+    defaultMessage: "A quoted value ''{value}'",
+  },
+  newline: {
+    id: 'newline',
+    description: 'this is \
+    a \
+    description',
+    defaultMessage: 'this is \
+    a message',
+  },
+  linebreak: {
+    id: 'linebreak',
+    description: 'this is\na\ndescription',
+    defaultMessage: 'this is\na message',
+  },
+  templateLinebreak: {
+    id: 'templateLinebreak',
+    description: `this is
+    a
+    description`,
+    defaultMessage: `this is
+    a message`,
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <p>
+          <FormattedMessage {...msgs.kittens} />
+        </p>
+        <p>
+          <FormattedMessage
+            id="inline.linebreak"
+            defaultMessage="formatted message
+						with linebreak"
+            description="foo
+						bar"
+          />
+        </p>
+      </div>
+    )
+  }
+}

package/tests/fixtures/removeDefaultMessage.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage} from 'react-intl'
+
+defineMessages({
+  foo: {
+    id: 'greeting-user',
+    description: 'Greeting the user',
+    defaultMessage: 'Hello, {name}',
+  },
+  foo2: {
+    description: 'foo2',
+    defaultMessage: 'foo2-msg',
+  },
+  foo3: {
+    defaultMessage: 'foo3-msg',
+  },
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <>
+        <FormattedMessage
+          id="greeting-world"
+          description="Greeting to the world"
+          defaultMessage="Hello World!"
+        />
+        <FormattedMessage
+          defaultMessage="message with desc"
+          description="desc with desc"
+        />
+        <FormattedMessage defaultMessage="message only" />
+      </>
+    )
+  }
+}

package/tests/fixtures/skipExtractionFormattedMessage.js

@@ -0,0 +1,12 @@
+import React, {Component} from 'react'
+import {FormattedMessage} from 'react-intl'
+
+function nonStaticId() {
+  return 'baz'
+}
+
+export default class Foo extends Component {
+  render() {
+    return <FormattedMessage id={`foo.bar.${nonStaticId()}`} />
+  }
+}

package/tests/fixtures/templateLiteral.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react'
+import {FormattedMessage, defineMessage} from 'react-intl'
+
+defineMessage({
+  id: `template`,
+  defaultMessage: `should remove
+    newline and
+    extra spaces`,
+})
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <FormattedMessage
+        id="foo.bar.baz"
+        defaultMessage={`Hello World!`}
+        description="The default message."
+      />
+    )
+  }
+}