New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support passing composer instance to Translation component #453
Conversation
Necessary for using the scope of the compilation parent component when placed inside a slot of a custom component.
* @remarks | ||
* An existing i18n Composer instance to use for translating | ||
*/ | ||
i18n?: Composer |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this issue is not only with the Translation
component but also with the DatetimeFormat
and NumberFormat
components.
I hope that you could define it to BaseFormatProps
interface and baseFormatProps
prop.
https://github.com/intlify/vue-i18n-next/blob/master/packages/vue-i18n/src/components/base.ts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done! 😃
Thank you for your contribution! |
@kazupon thank you for all the amazing work! Hontoni arigato gozaimasu |
When using
<i18n-t>
inside a slot of a custom component, it will try to use the scope of the parent component, but because of being inserted into a slot, its parent is now that custom component instead of the original parent component, where the template that used<i18n-t>
was compiled. As a more concrete example:Parent
component defines an i18n scope, and a message with keyhello
.Parent
component usesChild
component in its template.Child
component defines a slot namedcontent
and a new i18n scope (without any messages).Parent
component uses<i18n-t keypath="hello">
inside thecontent
slot ofChild
component.<i18n-t>
looks for the message with keyhello
but can't find it in its "parent" component because it's not longerParent
, butChild
instead.The expected behavior would be for
<i18n-t>
to look for the messages inParent
component instead, since that's where it was used in the first place.I've looked through the source code and can't find a way to somehow trace the parent lookup chain back to where the Translation component was used instead of where it lands through the slot.
The only way I found to make this work was to allow for passing an actual
i18n
composer instance to the<i18n-t>
component as a prop, so it can be directly used if provided, or fall back to the regular behavior otherwise. This way we can pass thei18n
composer instance fromParent
component directly to<i18n-t>
even if it's placed inside the slot of a custom component that creates its own i18n scope.Hopefully you find this useful and decide to merge it!