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

Abierto
  • ¿Algo no está bien?
#3,941 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
28/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
frontend, localization, tooling

Línea de trabajo

En el issue no se nombran archivos de implementación ni pruebas. Empieza siguiendo el flujo de output-target y plugin de Stencil, usando el ejemplo de plantilla de Angular para entender hacia dónde fluirían las claves de localización y el contenido generado. El resultado debe ser un enfoque basado en plugins, decidido y probado, que admita la salida localizada de web components descrita.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.