feat(unplugin-vue-i18n): allow for a custom i18n block transform hook

[dgautsch]

Background

My organization has been using Vue i18n for over 6 years now and it has been invaluable to the project. We recently upgraded to Vue 3 and ran into an issue with the latest version if i18n and it's newest plugins.

Due to the size of our application we've had a custom loader that runs before the Vue i18n plugin in Webpack. This allows us at build time to fetch the translations and then replace the <i18n> blocks with the correct format.

Reasoning

Due to the size of our application, we can't feasibly put all the translations into our components during development so we create the slugs and then the translations are entered into our CMS by our content team. We could put translations in json files in the repo - but then it requires content folks to edit via JSON files and know how to use git etc. The ability to edit in a CMS alongside all other content is a better DX for content teams and to make that work the plugin needs this type of async hook

Additionally, this method allows us to compartmentalize the translations in the <i18n> blocks and the translations are bundled with each component's respective chunk.

Example of our workflow:

Before

<i18n>
[
    'slug-one',
    'slug-two'
]
<i18n>

After

<i18n>
{
    'en': {
      'slug-one': 'foo',
      'slug-two': 'bar'
    },
    ja: {
      'slug-one': 'foo',
      'slug-two': 'bar'
    }
}
</i18n>

This PR aims to allow the plugin to accept a custom transform function that will modify the source before the plugin parses the i18n block.

This is only necessary because it appears we read the file from disk during build and I'm unsure on how to modify the file before it reaches the Vuei18n plugin. If there's a better way to handle this please let me know. Thanks for your consideration!

To Do

• Add unit tests
• Fix failing tests

[dgautsch]

@kazupon I would very much appreciate your feedback on this approach. Should I open an issue for this PR as well? Thanks for your consideration 👍

[kazupon]

Thank you for your contribution!
That sounds good!

We need the docs for that option in the readme before you can merge your PR.
https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#-options

Could you put it to docs? 🙏

[dgautsch]

Thank you for your contribution! That sounds good!

We need the docs for that option in the readme before you can merge your PR. https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#-options

Could you put it to docs? 🙏

Excellent. I was out last week, I'll work on updating it this week! Thanks

[kazupon]

Thanks! :)

[kazupon]

I've just released v5.0.0-beta.4
You can try to install it!