Astro: Trans

Astro の Trans は、JSX 専用の形に留まらず、ネイティブな Astro のラッパー構文へ戻されます。

<Trans> 内でサポートされるもの

• テキスト内の補間値
• 通常の HTML ラッパーとコンポーネントラッパー
• 入れ子のラッパーと自己完結型ラッパー
• class:list
• transition:*
• client:*
• server:*
• set:html
• set:text

Astro 補間式

Trans は、HTML 要素、フラグメント、HTML コメントを含む Astro 補間式を保持できます。

---
import { Trans } from "lingui-for-astro/macro";

const showDetails = true;
---

<Trans>{showDetails ? <span>Details</span> : <!-- details hidden -->}</Trans>
<Trans>{<><!-- details marker --><span>Details</span></>}</Trans>

これらの式は 1 つのリッチテキストプレースホルダーとして扱われます。 実行時には、そのプレースホルダーが元の Astro 式を Astro マークアップとして描画します。

外側の Trans は、この保持された式の内側にあるテキストを追加で抽出しません。 条件分岐の中のテキストも翻訳したい場合は、分岐の中で t を使ってください。

---
import { Trans, t } from "lingui-for-astro/macro";

const showDetails = true;
---

<Trans>{showDetails ? <span>{t`Details`}</span> : <span aria-hidden="true" />}</Trans>

入れ子の Trans はサポートされません。 外側の Trans は子ノードを含む式全体を 1 つのリッチテキストプレースホルダーとして扱うため、式の内側で翻訳が必要なテキストには t を使ってください。

まだサポートされないもの

一部の Astro 構文は、実行時のリッチテキストレンダリングと衝突するため、意図的に拒否されます。

• <script>
• <style>
• is:raw

set:html と set:text に関する注意

set:html と set:text は、明示的なコンテンツホールとして扱われます。

• 同じラッパーに set:html と set:text の両方がある場合は、set:html が優先されます。
• これらのホールを使うラッパーに明示的な子コンテンツもある場合、生成されたランタイムコードは既定では開発時に警告を出し、上書きが発生していることが著者に見えるようにします。必要であれば、この挙動は lingui.config.ts の framework.astro.runtimeWarnings で無効化できます。

フレームワークに依存しない Trans のモデルについては、Trans を参照してください。