Czym jest typ IntlayerNode?

Typ IntlayerNode<T> to specjalny typ dostarczany przez pakiety intlayer, takie jak next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer i vanilla-intlayer.

Przykład użycia

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; // zwraca typ: IntlayerNode<string>};

Dlaczego Intlayer wstawia IntlayerNode?

Intlayer wstawia IntlayerNode, aby umożliwić renderowanie selektorów Edytora Wizualnego w kontekście CMS / Edytora Wizualnego.

IntlayerNode to wzbogacony węzeł React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla, który pozwala również na dostęp do właściwości bazowego węzła prymitywnego.

Na przykład:

const content = useIntlayer("app");// Przypadek ciągu znaków (String)content.title; // Zwraca IntlayerNode<string>content.title.value; // Zwraca bazową treść, tutaj ciąg znakówcontent.title.toString(); // Zwraca ciąg znakówcontent.title.toLowerCase(); // Zwraca ciąg znakówString(content.title); // Zwraca ciąg znakówcontent.title.toUpperCase(); // Zwraca ciąg znaków zamieniony na wielkie literycontent.title.replace("a", "b"); // Zwraca zmodyfikowany ciąg znaków// ...

Dostęp do właściwości IntlayerNode będzie działać, ale uniemożliwi wyświetlanie selektorów w Edytorze Wizualnym.

IntlayerNode może również opakowywać liczby lub inne typy, takie jak IntlayerNode<number>.