Support for v-bind directives when using the CLI to extract messages

[yrd]

Is it possible to use formatter functions provided by FormatJS in v-bind directives? I'm trying to do something like this:

<button
  :title="$formatMessage({ defaultMessage: 'Do something. This will imply foo and bar.' })"
>
  {{ $formatMessage({ defaultMessage: 'Something' }) }}
</button>

The second message gets formatted as expected and is picked up by the CLI when extracting messages. For the first one, formatting works fine but the extracting process doesn't (the message just isn't found). I am calling extract like this (irrelevant parts omitted):

import { extract } from '@formatjs/cli';
import glob from 'fast-glob';

const extractionResults = await extract(
  [...glob.sync(path.join(baseDirectory, 'src', '**', '*.vue'))],
  {
    idInterpolationPattern: '[sha512:contenthash:base64:6]',
  }
);

Am I missing something here or does the CLI simply not support finding these calls? I have tried both the dollar-prefixed $formatMessage call as well as formatMessage from useIntl.

[yrd]

If it helps: the babel plugin does seem to see these $formatMessage calls, because an ID gets set and the message AST is compiled:

(The debugger is halted at the error formatMessage throws when the message is missing)

[longlho]

can you create a sample repo?

[yrd]

See here: https://github.com/yrd/formatjs-repro

In App.vue, I have three $formatMessage calls. If I add some messages to the createIntl call, all three get translated as expected.

The thing is, if I now run the CLI, I get the following output:

$ formatjs extract -- 'src/**/*.vue' --id-interpolation-pattern '[sha512:contenthash:base64:6]'
{
  "DJjT7h": {
    "defaultMessage": "Delete",
    "description": "delete button text"
  }
}

It only finds the last of the three calls.

[longlho]

tracked in #3003. Fixed in latest release

[yrd]

Great, thanks a lot!