1515 */
1616
1717import * as React from 'react' ;
18- import { TYPE } from '@formatjs/icu-messageformat-parser' ;
18+ import { ReactElement } from 'react' ;
19+ import { MessageFormatElement , TYPE } from '@formatjs/icu-messageformat-parser' ;
1920import { IntlMessageFormat } from 'intl-messageformat' ;
2021
22+ declare const TranslatedTextSymbol : unique symbol ;
23+
24+ export type TranslatedText = {
25+ [ TranslatedTextSymbol ] ?: true ;
26+ expr : string ;
27+ text : string ;
28+ } ;
29+
2130const GLOBALS = {
2231 isCloud : true ,
2332 instanceQualifier : 'Tolgee' ,
2433 instanceUrl : 'https://app.tolgee.io' ,
2534} ;
2635
36+ const SeenIcuXmlIds = new Set < string > ( ) ;
37+
2738function formatDev ( string ?: string , demoParams ?: Record < string , any > ) {
2839 const formatted = new IntlMessageFormat ( string , 'en-US' ) . format ( {
2940 ...GLOBALS ,
@@ -39,37 +50,128 @@ function formatDev(string?: string, demoParams?: Record<string, any>) {
3950 return formatted ;
4051}
4152
42- export default function t (
43- key : string ,
44- defaultString ?: string ,
53+ function processMessageElements (
54+ id : string ,
55+ elements : MessageFormatElement [ ] ,
4556 demoParams ?: Record < string , any >
46- ) {
47- const intl = new IntlMessageFormat ( defaultString , 'en-US' ) ;
48- const ast = intl . getAst ( ) ;
57+ ) : [ ReactElement [ ] , Set < string > ] {
58+ const fragments : ReactElement [ ] = [ ] ;
59+ const stringArguments = new Set < string > ( ) ;
4960
50- const stringArguments : string [ ] = [ ] ;
51-
52- for ( const node of ast ) {
61+ for ( const node of elements ) {
5362 if ( node . type === TYPE . literal || node . type === TYPE . pound ) {
63+ // Text and what misc ICU syntax; not interesting
5464 continue ;
5565 }
5666
5767 if ( node . type === TYPE . tag ) {
58- // TODO: find a way to process the tag
68+ // Tag: needs to be converted to a Thymeleaf fragment
69+ const templateId = `${ id } ${ node . value } ;
70+ const [ tagFrags , tagArgs ] = processMessageElements (
71+ templateId ,
72+ node . children
73+ ) ;
74+
75+ tagArgs . forEach ( ( a ) => stringArguments . add ( a ) ) ;
76+ if ( ! SeenIcuXmlIds . has ( templateId ) ) {
77+ SeenIcuXmlIds . add ( templateId ) ;
78+ fragments . push (
79+ ...tagFrags ,
80+ React . createElement (
81+ 'th:block' ,
82+ {
83+ key : templateId ,
84+ 'th:fragment' : `${ templateId } ,
85+ } ,
86+ demoParams [ node . value ] (
87+ React . createElement ( 'div' , { 'th:replace' : '${_children}' } )
88+ )
89+ )
90+ ) ;
91+ }
92+
5993 continue ;
6094 }
6195
62- stringArguments . push ( `${ node . value } ${ node . value . replace ( / _ _ / g, '.' ) } ) ;
96+ // Everything else is some form of variable: keep track of them
97+ stringArguments . add ( node . value ) ;
6398 }
6499
100+ return [ fragments , stringArguments ] ;
101+ }
102+
103+ function renderTranslatedText (
104+ key : string ,
105+ defaultString : string ,
106+ demoParams ?: Record < string , any >
107+ ) {
108+ const id = `intl-${ key . replace ( / \. / g, '__' ) } ;
109+ const intl = new IntlMessageFormat ( defaultString , 'en-US' ) ;
110+ const ast = intl . getAst ( ) ;
111+
112+ const [ fragments , stringArguments ] = processMessageElements (
113+ id ,
114+ ast ,
115+ demoParams
116+ ) ;
117+
65118 const text =
66119 process . env . NODE_ENV === 'production'
67120 ? defaultString
68121 : formatDev ( defaultString , demoParams ) ;
69122
70- const messageExpression = stringArguments . length
71- ? `#{${ key } ${ stringArguments . join ( ', ' ) }
123+ const stringArgs = Array . from ( stringArguments ) ;
124+ const stringArgsMap = stringArgs . map ( ( a ) => `${ a } ${ a . replace ( / _ _ / g, '.' ) } ) ;
125+
126+ const messageExpression = stringArgsMap . length
127+ ? `#{${ key } ${ stringArgsMap . join ( ', ' ) }
72128 : `#{${ key } ;
73129
74- return React . createElement ( 'span' , { 'th:utext' : messageExpression } , text ) ;
130+ return { fragments, text, messageExpression } ;
131+ }
132+
133+ export default function t (
134+ key : string ,
135+ defaultString : string ,
136+ demoParams ?: Record < string , unknown >
137+ ) {
138+ const { fragments, text, messageExpression } = renderTranslatedText (
139+ key ,
140+ defaultString ,
141+ demoParams
142+ ) ;
143+
144+ return [
145+ ...fragments ,
146+ React . createElement (
147+ 'span' ,
148+ { key : 'render-el' , 'th:utext' : messageExpression } ,
149+ text
150+ ) ,
151+ ] ;
75152}
153+
154+ t . raw = function (
155+ key : string ,
156+ defaultString : string ,
157+ demoParams ?: Record < string , any >
158+ ) : TranslatedText {
159+ const { fragments, text, messageExpression } = renderTranslatedText (
160+ key ,
161+ defaultString ,
162+ demoParams
163+ ) ;
164+
165+ if ( fragments . length )
166+ throw new Error ( 'Invalid raw translation: cannot contain components.' ) ;
167+
168+ return {
169+ expr : messageExpression ,
170+ text,
171+ } ;
172+ } ;
173+
174+ t . render = function ( text : TranslatedText | string ) {
175+ if ( typeof text === 'string' ) return text ;
176+ return React . createElement ( 'span' , { 'th:utext' : text . expr } , text . text ) ;
177+ } ;
0 commit comments