fix: `v-t` directive SSR

BobbieGoede commented 4 months ago

🔗 Linked issue

https://github.com/kazupon/kazupon/issues/17

❓ Type of change

[ ] 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
[x] 🐞 Bug fix (a non-breaking change that fixes an issue)
[ ] 👌 Enhancement (improving an existing functionality like performance)
[ ] ✨ New feature (a non-breaking change that adds functionality)
[ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
[ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Resolves https://github.com/kazupon/kazupon/issues/17

I thought adding the directive transformation would have been more involved than this but it seems to be working 😅

I'll see if I can update https://github.com/intlify/vue-i18n-extensions a bit and perhaps experiment with making something like https://github.com/intlify/vue-i18n-next/issues/1820 possible, though to be honest, I'm not sure if that feature is the right direction but it would be good learning experience.

📝 Checklist

[x] I have linked an issue or discussion.
[x] I have added tests (if possible).
[ ] I have updated the documentation accordingly.

kazupon commented 3 months ago

@BobbieGoede Sorry to keep you waiting!

I've just released unplugin-vue-i18n v5 beta I've merged vue-i18n-extensions into unplugin-vue-i18n. https://github.com/intlify/bundle-tools/releases/tag/unplugin-vue-i18n%405.0.0-beta.2

If you set the optimizeTranslationDirective option to true, unplugin-vue-i18n will optimise v-t with Vue compiler and vite (rollup) transform.

BobbieGoede commented 3 months ago

I've just released unplugin-vue-i18n v5 beta I've merged vue-i18n-extensions into unplugin-vue-i18n. intlify/bundle-tools@unplugin-vue-i18n%405.0.0-beta.2 (release)

If you set the optimizeTranslationDirective option to true, unplugin-vue-i18n will optimise v-t with Vue compiler and vite (rollup) transform.

@kazupon Also sorry for the delay too 😅 I just got back from a short holiday

I tried updating to the unplugin-vue-i18n beta but I'm getting the following error when running tests:

Error: requires 'vue-i18n' or 'petite-vue-i18n' to be present in the dependency tree.

Does updating this require updating other deps to incompatible versions? If so, we may have to merge the PR in its current state (unless this won't work for some configs) and delay the unplugin-vue-i18n update for the next major 🤔

kazupon commented 3 months ago

@BobbieGoede

Thanks!

Also sorry for the delay too 😅 I just got back from a short holiday

I tried updating to the unplugin-vue-i18n beta but I'm getting the following error when running tests:
Error: requires 'vue-i18n' or 'petite-vue-i18n' to be present in the dependency tree.
Does updating this require updating other deps to incompatible versions? If so, we may have to merge the PR in its current state (unless this won't work for some configs) and delay the unplugin-vue-i18n update for the next major

Hmm, That looks like a bug in unplugin-vue-i18n. 😅 I have an idea, and I'll try to fix it.

kazupon commented 3 months ago

@BobbieGoede I've just fixed that issue. https://github.com/intlify/bundle-tools/releases/tag/unplugin-vue-i18n%405.0.0-beta.3

please try to it! 🙏

BobbieGoede commented 3 months ago

@kazupon I've updated to the latest beta, commented out the previous implementation and pushed the changes I made so far. It seems like something is not working, some tests fail and the tests seem to get frozen so I cancelled the workflow.

When running the fixture specs/fixtures/inline_options it will throw an error:

cannot support locale type

For any t or $t function call with a key that also has a translation (the fixture has no translations for blog and my-module-exemple.hello, these don't trigger the error).

Could you take a look again? 😅

kazupon commented 3 months ago

@BobbieGoede Thanks!

When I tried the playground, I reproduced your issue on there. I faced the errors:

at createCoreError (./node_modules/.pnpm/@intlify+core-base@9.9.0/node_modules/@intlify/core-base/dist/core-base.mjs:630:32)
at compileToFunction (./node_modules/.pnpm/@intlify+core-base@9.9.0/node_modules/@intlify/core-base/dist/core-base.mjs:952:11)
at compileMessageFormat (./node_modules/.pnpm/@intlify+core-base@9.9.0/node_modules/@intlify/core-base/dist/core-base.mjs:1171:15)
at translate (./node_modules/.pnpm/@intlify+core-base@9.9.0/node_modules/@intlify/core-base/dist/core-base.mjs:1039:45)
at ./node_modules/.pnpm/vue-i18n@9.9.0_vue@3.4.21/node_modules/vue-i18n/dist/vue-i18n.mjs:402:46
at wrapWithDeps (./node_modules/.pnpm/vue-i18n@9.9.0_vue@3.4.21/node_modules/vue-i18n/dist/vue-i18n.mjs:363:13)
at t (./node_modules/.pnpm/vue-i18n@9.9.0_vue@3.4.21/node_modules/vue-i18n/dist/vue-i18n.mjs:402:12)
at setup (./playground/pages/index.js:48:51)
at _sfc_main.setup (./playground/pages/index.js:260:23)

And I noticed that unplugin-vue-i18n depend on message-compiler of vue-i18n v10. This error appears to occur because nuxt-i18n has been using its message compiler since vue-i18n v9, and the interface is not what is expected.

I’m just starting work for nuxt-i18n v9 and would like to support v-t SSR full support in that version.

nuxt-modules / i18n