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ów

content.title.toString(); // Zwraca ciąg znaków
content.title.toLowerCase(); // Zwraca ciąg znaków
String(content.title); // Zwraca ciąg znaków
content.title.toUpperCase(); // Zwraca ciąg znaków zamieniony na wielkie litery
content.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>.