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

Aperta
  • Qualcosa non va?
#3,941 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
28/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
angular, typescript
Ambito
frontend, localization, tooling

Direzione di ricerca

Nell’issue non vengono indicati file di implementazione né test. Inizia tracciando il percorso di output-target e plugin di Stencil, usando l’esempio di template Angular per capire dove passerebbero le chiavi di localizzazione e il contenuto generato. Il risultato deve essere un approccio basato su plugin, deciso e testato, che supporti l’output localizzato dei web component descritto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Feature: Want this? Upvote it!
Prerequisites
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

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.