@formatjs/ts-transformer 3.9.9 → 3.9.10

package/tests/fixtures/FormattedMessage.tsx

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

package/tests/fixtures/additionalComponentNames.tsx

@@ -0,0 +1,16 @@
+// @react-intl project:foo
+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.tsx

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

package/tests/fixtures/ast.tsx

@@ -0,0 +1,83 @@
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage, defineMessage} 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.',
+    },
+  },
+})
+
+defineMessage({
+  defaultMessage: 'defineMessage',
+  description: 'foo',
+})
+
+export default class Foo extends Component {
+  render() {
+    const {intl} = this.props
+    const {formatMessage} = intl
+    this.props.intl.formatMessage({
+      defaultMessage: 'no-id',
+      description: 'no-id',
+    })
+    intl.formatMessage({
+      defaultMessage: 'intl.formatMessage',
+      description: 'no-id',
+    })
+    formatMessage({
+      defaultMessage: 'formatMessage',
+      description: 'no-id',
+    })
+    formatMessage({
+      defaultMessage: '{count, plural, =0 {zero} other{other}}',
+      description: 'no-id',
+    })
+
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <FormattedMessage
+          id="foo.bar.zoo"
+          defaultMessage="Hello World! {abc}"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+          values={{abc: 2}}
+        />
+        <FormattedMessage
+          defaultMessage="Hello World! {abc}"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+          values={{abc: 2}}
+        />
+
+        <FormattedMessage
+          defaultMessage="{value, number}"
+          description={{
+            text: 'number',
+            metadata: 'number',
+          }}
+          values={{abc: 2}}
+        />
+      </div>
+    )
+  }
+}

package/tests/fixtures/defineMessages.tsx

@@ -0,0 +1,67 @@
+// @react-intl project:foo file:bar
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage, defineMessage} 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}'",
+  },
+  quoted: {
+    id: 'escaped.apostrophe',
+    description: 'Escaped apostrophe',
+    defaultMessage: "What's going on",
+  },
+  newline: {
+    id: 'newline',
+    description: 'this is \
+    a \
+    description',
+    defaultMessage: 'this is \
+    a message',
+  },
+} as const)
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <p>
+          <FormattedMessage {...msgs.kittens} />
+          <FormattedMessage
+            id="inline"
+            defaultMessage="formatted message"
+            description="foo"
+          />
+        </p>
+      </div>
+    )
+  }
+}

package/tests/fixtures/defineMessagesPreserveWhitespace.tsx

@@ -0,0 +1,87 @@
+// @react-intl project:foo file:bar
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage, defineMessage} 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}'",
+  },
+  quoted: {
+    id: 'escaped.apostrophe',
+    description: 'Escaped apostrophe',
+    defaultMessage: "What's going on",
+  },
+  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`,
+  },
+} as const)
+
+export default class Foo extends Component {
+  render() {
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <p>
+          <FormattedMessage {...msgs.kittens} />
+          <FormattedMessage
+            id="inline"
+            defaultMessage="formatted message"
+            description="foo"
+          />
+          <FormattedMessage
+            id="inline.linebreak"
+            defaultMessage="formatted message
+						with linebreak"
+            description="foo
+						bar"
+          />
+        </p>
+      </div>
+    )
+  }
+}

package/tests/fixtures/descriptionsAsObjects.tsx

@@ -0,0 +1,17 @@
+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={{
+          text: 'Something for the translator.',
+          metadata: 'Additional metadata content.',
+        }}
+      />
+    )
+  }
+}

package/tests/fixtures/extractFromFormatMessage.tsx

@@ -0,0 +1,45 @@
+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 {intl} = 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',
+      }),
+      invalid: this.props.intl.formatMessage(objectPointer),
+      invalid2: this.props.intl.formatMessage({
+        id,
+        defaultMessage,
+        description: 'asd',
+      }),
+    }
+
+    return (
+      <div>
+        <h1>{msgs.header}</h1>
+        <p>{msgs.content}</p>
+        <input placeholder={intl.formatMessage({defaultMessage: 'inline'})} />
+        <span>
+          <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+        </span>
+      </div>
+    )
+  }
+}
+
+export default injectIntl(Foo)

package/tests/fixtures/extractFromFormatMessageStateless.tsx

@@ -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',
+    description: 'hook',
+  })
+}
+
+const Foo = ({intl: {formatMessage}}) => {
+  const msgs = {
+    qux: formatMessage({
+      id: 'foo.bar.quux',
+      defaultMessage: 'Hello Stateless!',
+      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.tsx

@@ -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.tsx

@@ -0,0 +1,44 @@
+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: formatMessage({
+        id: 'foo.bar.baz',
+        defaultMessage: 'Hello World!',
+        description: 'The default message',
+      }),
+      baz2: this.props.intl.$formatMessage({
+        id: 'foo.bar.baz2',
+        defaultMessage: 'Hello World!',
+        description: 'The default message $$$',
+      }),
+      biff: $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>
+        <input placeholder={intl.formatMessage({defaultMessage: 'inline'})} />
+        <span>
+          <FormattedMessage id="foo" defaultMessage="bar" description="baz" />
+        </span>
+      </div>
+    )
+  }
+}
+
+export default injectIntl(Foo)

package/tests/fixtures/inline.tsx

@@ -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/nested.tsx

@@ -0,0 +1,10 @@
+intl.formatMessage(
+  {
+    defaultMessage: 'layer1 {name}',
+  },
+  {
+    name: intl.formatMessage({
+      defaultMessage: 'layer2',
+    }),
+  }
+)

package/tests/fixtures/noImport.tsx

@@ -0,0 +1,52 @@
+export function foo() {
+  props.intl.formatMessage(
+    {
+      defaultMessage: 'props {intl}',
+      description: 'bar',
+    },
+    {bar: 'bar'}
+  )
+  this.props.intl.formatMessage(
+    {
+      defaultMessage: 'this props {intl}',
+      description: 'bar',
+    },
+    {bar: 'bar'}
+  )
+  this.props.intl.formatMessage(
+    {
+      defaultMessage: 'this props {intl}',
+      description: {
+        obj1: 1,
+        obj2: '123',
+      },
+    },
+    {bar: 'bar'}
+  )
+  this.props.intl.formatMessage(
+    {
+      defaultMessage: 'this props {intl}',
+      description: {
+        obj2: '123',
+        obj1: 1,
+      },
+    },
+    {bar: 'bar'}
+  )
+  this.props.intl.formatMessage(
+    {
+      defaultMessage: 'this props {intl}',
+      description: {
+        obj2: '123',
+      },
+    },
+    {bar: 'bar'}
+  )
+  return intl.formatMessage(
+    {
+      defaultMessage: 'foo {bar}',
+      description: 'bar',
+    },
+    {bar: 'bar'}
+  )
+}

package/tests/fixtures/overrideIdFn.tsx

@@ -0,0 +1,70 @@
+import React, {Component} from 'react'
+import {defineMessages, FormattedMessage, defineMessage} 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.',
+    },
+  },
+})
+
+defineMessage({
+  defaultMessage: 'defineMessage',
+  description: 'foo',
+})
+
+export default class Foo extends Component {
+  render() {
+    const {intl} = this.props
+    const {formatMessage} = intl
+    this.props.intl.formatMessage({
+      defaultMessage: 'no-id',
+      description: 'no-id',
+    })
+    intl.formatMessage({
+      defaultMessage: 'intl.formatMessage',
+      description: 'no-id',
+    })
+    formatMessage({
+      defaultMessage: 'formatMessage',
+      description: 'no-id',
+    })
+
+    return (
+      <div>
+        <h1>
+          <FormattedMessage {...msgs.header} />
+        </h1>
+        <p>
+          <FormattedMessage {...msgs.content} />
+        </p>
+        <FormattedMessage
+          id="foo.bar.zoo"
+          defaultMessage="Hello World! {abc}"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+          values={{abc: 2}}
+        />
+        <FormattedMessage
+          defaultMessage="Hello World! {abc}"
+          description={{
+            text: 'Something for the translator. Another description',
+            metadata: 'Additional metadata content.',
+          }}
+          values={{abc: 2}}
+        />
+      </div>
+    )
+  }
+}

package/tests/fixtures/removeDefaultMessage.tsx

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

package/tests/fixtures/removeDescription.tsx

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