IntlayerNode 型とは何ですか？

IntlayerNode<T> 型は、next-intlayer、react-intlayer、vue-intlayer、preact-intlayer、solid-intlayer、angular-intlayer、svelte-intlayer、lit-intlayer、vanilla-intlayer などの intlayer パッケージによって提供される特別な型です。

使用例

import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Preact",
  },
} satisfies Dictionary;

export default appContent;

import { useIntlayer } from "react-intlayer";const AppContent = () => {const { title } = useIntlayer("app");return title; // 型: IntlayerNode<string> を返します};

なぜ Intlayer は IntlayerNode を挿入するのですか？

Intlayer は、CMS / ビジュアルエディタのコンテキストでビジュアルエディタのセレクタをレンダリングできるようにするために、IntlayerNode を挿入します。

IntlayerNode は、拡張された React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla ノードですが、ベースとなるプリミティブノードのプロパティにアクセスすることも可能です。

例えば：

const content = useIntlayer("app");// 文字列の場合content.title; // IntlayerNode<string> を返すcontent.title.value; // ベースとなるコンテンツ（ここでは文字列）を返すcontent.title.toString(); // 文字列を返すcontent.title.toLowerCase(); // 文字列を返すString(content.title); // 文字列を返すcontent.title.toUpperCase(); // 大文字に変換された文字列を返すcontent.title.replace("a", "b"); // 変更された文字列を返す// ...

IntlayerNode のプロパティへのアクセスは機能しますが、ビジュアルエディタでセレクタを表示する機能が損なわれます。

IntlayerNode は、数値や IntlayerNode<number> などの他の型をラップすることもできます。