@@ -6,7 +6,15 @@ import {
6
6
createCompoundExpression ,
7
7
TO_DISPLAY_STRING
8
8
} from '@vue/compiler-dom'
9
- import { isNumber , isObject , isString , isSymbol , toDisplayString , hasOwn } from '@intlify/shared'
9
+ import {
10
+ isNumber ,
11
+ isObject ,
12
+ isString ,
13
+ isSymbol ,
14
+ toDisplayString ,
15
+ hasOwn ,
16
+ isArray
17
+ } from '@intlify/shared'
10
18
import { evaluateValue , parseVTExpression } from './transpiler'
11
19
import { report , ReportCodes } from './report'
12
20
import { createContentBuilder } from './builder'
@@ -70,6 +78,16 @@ export interface TransformVTDirectiveOptions<
70
78
* @default 'composition'
71
79
*/
72
80
mode ?: I18nMode
81
+ /**
82
+ * Translation function signatures
83
+ *
84
+ * @remarks
85
+ * You can specify the signature of the translation function attached to the binding context when it is codegen in the Vue Compiler.
86
+ * If you have changed the signature to a non `t` signature in the `setup` hook or `<script setup>`, you can safely SSR it.
87
+ * If each Vue component has a different signature for the translation function, you can specify several in an array for safe SSR.
88
+ * This option value is `undefined` and the signature attached to the binding context is `t`.
89
+ */
90
+ translationSignatures ?: string | string [ ]
73
91
}
74
92
75
93
// compatibility for this commit(v3.0.3)
@@ -142,6 +160,13 @@ export function transformVTDirective<
142
160
isString ( options . mode ) && [ 'composition' , 'legacy' ] . includes ( options . mode )
143
161
? options . mode
144
162
: 'composition'
163
+ // prettier-ignore
164
+ const translationSignatures = isString ( options . translationSignatures )
165
+ ? [ options . translationSignatures ]
166
+ : isArray ( options . translationSignatures )
167
+ ? options . translationSignatures
168
+ : [ 't' ]
169
+ translationSignatures . push ( `$t` ) // fallback to global scope
145
170
146
171
return ( dir , node , context ) => {
147
172
const { exp, loc } = dir
@@ -211,7 +236,12 @@ export function transformVTDirective<
211
236
return { props : [ ] }
212
237
} else {
213
238
const translationParams = parseVTExpression ( exp . content )
214
- const code = generateTranslationCode ( context , mode , translationParams )
239
+ const code = generateTranslationCode (
240
+ context ,
241
+ mode ,
242
+ translationParams ,
243
+ translationSignatures
244
+ )
215
245
context . helper ( TO_DISPLAY_STRING )
216
246
node . children . push ( {
217
247
type : NodeTypes . INTERPOLATION ,
@@ -223,7 +253,12 @@ export function transformVTDirective<
223
253
}
224
254
} else if ( isCompoundExpressionNode ( exp ) ) {
225
255
const content = exp . children . map ( mapNodeContentHandler ) . join ( '' )
226
- const code = generateTranslationCode ( context , mode , parseVTExpression ( content ) )
256
+ const code = generateTranslationCode (
257
+ context ,
258
+ mode ,
259
+ parseVTExpression ( content ) ,
260
+ translationSignatures
261
+ )
227
262
context . helper ( TO_DISPLAY_STRING )
228
263
node . children . push ( {
229
264
type : NodeTypes . INTERPOLATION ,
@@ -360,24 +395,38 @@ function makeParams(value: VTDirectiveValue): [string, NamedValue, TranslateOpti
360
395
function generateTranslationCode (
361
396
context : TransformContext ,
362
397
mode : I18nMode ,
363
- params : TranslationParams
398
+ params : TranslationParams ,
399
+ translationSignatures : string [ ]
364
400
) : string {
365
401
return mode === 'composition'
366
- ? generateComposableCode ( context , params )
402
+ ? generateComposableCode ( context , params , translationSignatures )
367
403
: generateLegacyCode ( context , params )
368
404
}
369
405
370
- function generateComposableCode ( context : TransformContext , params : TranslationParams ) : string {
406
+ function generateTranslationCallableSignatures (
407
+ context : TransformContext ,
408
+ translationSignatures : string [ ]
409
+ ) : string {
371
410
const { prefixIdentifiers, bindingMetadata } = context
372
- const functionName = 't'
373
- const type = hasOwn ( bindingMetadata , functionName ) && bindingMetadata [ functionName ]
374
- // prettier-ignore
375
- const prefixContext = prefixIdentifiers
376
- ? type && type . startsWith ( 'setup' ) || type === BindingTypes . LITERAL_CONST
377
- ? '$setup.'
378
- : '_ctx.'
379
- : ''
380
- const baseCode = `${ prefixContext } ${ functionName } `
411
+ return translationSignatures
412
+ . map ( signature => {
413
+ const type = hasOwn ( bindingMetadata , signature ) && bindingMetadata [ signature ]
414
+ const bindingContext = prefixIdentifiers
415
+ ? ( type && type . startsWith ( 'setup' ) ) || type === BindingTypes . LITERAL_CONST
416
+ ? '$setup.'
417
+ : '_ctx.'
418
+ : ''
419
+ return `${ bindingContext } ${ signature } `
420
+ } )
421
+ . join ( ' || ' )
422
+ }
423
+
424
+ function generateComposableCode (
425
+ context : TransformContext ,
426
+ params : TranslationParams ,
427
+ translationSignatures : string [ ]
428
+ ) : string {
429
+ const baseCode = `(${ generateTranslationCallableSignatures ( context , translationSignatures ) } )`
381
430
382
431
const builder = createContentBuilder ( )
383
432
builder . push ( `${ baseCode } (` )
0 commit comments