feat: User facing text able to be easily localized for web components using plugins

[thompson-tomo]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Allow for web components to generate html templates which contain user facing text which is able to be localized using an external library such as https://www.i18next.com/ for an example.

Describe the Use Case

I want to be generate web components as part of my design system which is easily localized by all teams regardless of the stack they are developing with. In my organization cloud products are mainly in angular for which we have built custom tooling however some teams are utilizing Vue as such it would be beneficial to be able to use common tooling across the framework's.

In out Design system documentation we would simply need to have one example of using the component rather than 1 for each language.

Describe Preferred Solution

• Allow developer to pass localization keys into components with the parameter being prefixed
  <my-button data-i18n="helloWorldText" data-i18n-title="helloWorldDesc"> </my-button>
• Have the output for target call the plugin if configured for each parameter containing the prefix
• Plugin return to output target location of localized content ie Properties/InnerHtml, as well as PropertyName & the Content
• Output target merges content into template for angular it would be similiar to
  <button title="{{helloWorldDesc | i18next }}">{{ helloWorldTitle | i18next }}</button>
  which would render out to using angular for example when using angular
  <button title="The is a big Hello world to all!">Hello World!</button>

The approach means that we could pass from parent components to child components the localization keys further reducing the properties needing to be added.

Describe Alternatives

The alternative proposal would be to internalize to stencil (template rendering) the process of manipulating the template html so that it generates the necessary tags to trigger the localization but the impact is that the integration is tightly coupled.

Related Code

No response

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues & PRs are properly triaged.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[alicewriteswrongs]

Hi @thompson-tomo thanks for filing this feature request! I just labeled it as such to assess the desire for this feature from the rest of the community.