Implement template injection

michasherman commented 1 year ago

Background

The template injection feature offers the advantage of separating content translation from visualization, enabling efficient and consistent translation management. It provides a standardized approach for defining frequently used templates, promoting ease of use for translators who are familiar with this concept. Moreover, developers have the flexibility to incorporate custom templates through their own implementation.

However, one limitation is that the current implementation of this feature is tightly coupled to the React framework. It is currently implemented in both the fiverr_context package and i18n-react package for the I18n component and translate utility. Regrettably, this duplication of implementation restricts the integration of templates within non-React contexts.

Proposed solution summary

The proposed solution aims to enhance the template injection by shifting its implementation to the core package. This change is designed to be non-breaking, allowing consumers to upgrade at their own pace. From the perspective of endpoint consumers, the API would remain unchanged. The template injection mechanism itself would remain intact, albeit with some minor modifications. The existing implementation would be divided between i18n.js for core template injection and i18n-react for React-specific template injection.

Consumers who handle template injection themselves would now rely on the internal implementation of i18n.js and provide the following inputs: templates passed from the consumer, context-specific predefined templates, and a context-specific template transformer.

TL;DR

i18n-react is aware about how to detect html elements inside a translated value. This logic should be own and present only in i18n.js.

alonfixler commented 1 year ago

@michasherman What are react specific template injection? Can you provide an example?

fiverr / i18n.js