svelte-kit-vice/src/uix/eidos/components/trans

Eidos Trans

<Trans> es un service component — un wrapper greppable de getActiveUix().langs.t / ts. Resuelve un idlangref o un path a traves del catalogo activo de langs y renderiza el texto traducido.

Familia con <FormatDate>, <FormatNumber>, <RelativeTime>: todos son wrappers tipados del runtime para que un audit i18n encuentre cada sitio que toca el catalogo con grep "<Trans".

Superficie

<!-- 5 modos de resolucion -->
<Trans>#?common.save|Save</Trans>            <!-- children como idlangref -->
<Trans value="#?common.save|Save" />          <!-- value prop -->
<Trans path="common.save">Save</Trans>        <!-- path + children=fallback -->
<Trans path="common.greet" params={{name: 'Juan'}} />
<Trans as="strong">#?ui.required|Required</Trans>
<Trans path="common.save" locale="en-US">Save</Trans>

Props clave

Prop	Tipo	Default	Notas
value	LangString	—	idlangref (#?path|fallback) o literal.
path	string	—	Dotted path al catalogo (ej. 'common.save').
params	Record<string, unknown>	—	Interpolacion para path.
locale	SupportedLocale	runtime	Override por instancia.
trim	boolean	true	Trim del texto capturado de children.
as	keyof HTMLElementTagNameMap	'span'	Tag HTML.
children	snippet	—	Fallback / source si no hay value / path.

Modos de resolucion

Modo	Forma	Source
1. Children-only	<Trans>#?common.save|Save</Trans>	DOM textContent parseado como idlangref.
2. Value prop	<Trans value="#?common.save|Save" />	value parseado.
3. Path + children fallback	<Trans path="common.save">Save</Trans>	t(path) con children como fallback si la key no existe.
4. Path + params	<Trans path="common.greet" params={{name}} />	t(path, params).
5. Pass-through	<Trans value="literal text" />	Texto literal sin resolver.

Decisiones

• Reactivo al locale: el $derived re-corre cuando el locale activo cambia. La lectura va a traves de uix.langs.t / ts que estan acopladas al sistema reactivo de runes.
• Captura de children: cuando ni value ni path estan presentes, el componente captura textContent del nodo via bind:this={captureNode} + $effect. La primera render emite el children original (#?path|fallback sin resolver); en $effect intercepta y resuelve.
• Cast del path: langs.t() tipa su primer overload con ${string}.${string} (template literal estricto). Como el runtime acepta paths dinamicos en runtime, se castea via Parameters<typeof t>[0].
• Fallback a children: cuando t(path) devuelve el path original (signal de "key no encontrada"), el componente cae al capturedText si existe.
• No CSS recipe: marker [data-trans] solo para tooling.
• No emite eventos sema.

Comparativa

Capacidad	Eidos	i18next Trans	formatjs FormattedMessage	svelte-i18n _
Greppable site marker	Si: <Trans	Si	Si	No: $_('key') inline
Children-as-idlangref	Si: #?path|fallback	Si	No	No
Path + params	Si	Si	Si	Si
Locale override per-instance	Si	Limitado	Si	No
Reactivo al cambio de locale	Si	Si	Si	Si
Tag HTML configurable	Si: as	Si: as	Si: tagName	No
Pluralizacion	Via params del catalogo	Si	Si	Si

Referencias

• i18next Trans: https://react.i18next.com/latest/trans-component
• formatjs: https://formatjs.io/docs/react-intl/components#formattedmessage
• Active langs: src/arts/langs/
• Sistema idlangref: src/uix/langs/