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

Đang mở
  • Có gì không ổn?
#3,941 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
28/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
angular, typescript
Lĩnh vực
frontend, localization, tooling

Hướng nghiên cứu

Issue không nêu tên tệp triển khai hoặc bài kiểm thử nào. Hãy bắt đầu bằng cách lần theo đường dẫn output-target và plugin của Stencil, sử dụng ví dụ Angular template để hiểu các khóa bản địa hóa và nội dung được tạo ra sẽ đi đến đâu. Kết quả cần là một phương pháp dựa trên plugin đã được quyết định và kiểm thử, hỗ trợ đầu ra web-component đã bản địa hóa như mô tả.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
13.2k
Fork
865
Merge trung bình
2 ngày 16 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của stenciljs/core

Tất cả issue của stenciljs/core

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.