<T> ラッピング動作

概要

このページでは、CLIツールが<T>コンポーネントをラップする正確な動作について説明します。

経験則として、CLIは静的で意味のあるコンテンツの周りに<T>コンポーネントをラップします。 また、<T>コンポーネント内に含まれる動的なサブコンテンツの周りには<Var>コンポーネントをラップします。

例えば、以下は<T>コンポーネントでラップされます：

<div>Hello, world!</div> -> <T id="SOME_ID"><div>Hello, world!</div></T>

しかし、以下はラップされません：

<div><img src="logo.png" /></div> -> <div><img src="logo.png" /></div>

CLIツールは、最終的な出力が有効なJSXであり、<T>コンポーネントを正しく使用していることを常に保証します。

論理演算子などの場合、より良い翻訳とより多くのコンテキストを確保するために、人間の介入が有用な場合があります。

JSX式

CLIは式{...}を自動的に<Var>コンポーネントでラップします。 これは、式が通常動的であるためです。

<div>Hello, {name}</div> -> <T id="SOME_ID"><div>Hello, <Var>{name}</Var></div></T>

JSX式内の静的コンテンツ

式ラッピングルールの例外は、式が静的コンテンツを含む場合です。

例えば、以下は<Var>コンポーネントでラップされません：

<p>{"Hello," + " World!"}</p> -> <T id="SOME_ID"><p>{"Hello," + " World!"}</p></T>

JSX式内のテンプレートリテラル

CLIは、準式（${}）を含むテンプレートリテラルを<Var>コンポーネントでラップします。これらは動的である可能性があるためです。

<p>{`${temp}`}</p> -> <T id="SOME_ID"><p><Var>{`${temp}`}</Var></p></T>

論理演算子

&&、||、?などの論理演算子を含むJSX式は、 トップレベルで<T>コンポーネントが必要な場合（つまり、式の外に他の意味のあるコンテンツがある場合）、 <Var>コンポーネントでラップされます。

<div>Hello, {name && {name}} World!</div>

<T id="SOME_ID">
  <div>Hello, <Var>{name && {name}}</Var> World!</div>
</T>

式の中では、CLIは要素を式の残りの部分から完全に独立したものとして扱います。

これは、それらが独自の<T>コンポーネントでラップされることを意味します（すべてのコンテンツが翻訳可能であることを保証するため）

<div>{name ? <>Hello, </> : <>Goodbye, </>}</div>

<T id="SOME_ID">
  <div>
    <Var>
      {name ? <T id="HELLO"><>Hello, </></T> : <T id="GOODBYE"><>Goodbye, </></T>}
    </Var> World!
  </div>
</T>

<T id="SOME_ID">
  <div>
    <Branch branch={name == null}
      true={<>Hello, </>}
      false={<>Goodbye, </>}
    />
    World!
  </div>
</T>