Was ist der IntlayerNode-Typ?

Der Typ IntlayerNode<T> ist ein spezieller Typ, der von intlayers Paketen wie next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer und vanilla-intlayer bereitgestellt wird.

Anwendungsbeispiel

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; // gibt Typ zurück: IntlayerNode<string>};

Warum fügt Intlayer einen IntlayerNode ein?

Intlayer fügt einen IntlayerNode ein, um die Selektoren des visuellen Editors im Kontext des CMS / visuellen Editors rendern zu können.

Ein IntlayerNode ist ein angereicherter React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla-Node, der aber auch den Zugriff auf die Eigenschaften des Basis-Primitiv-Nodes ermöglicht.

Zum Beispiel:

const content = useIntlayer("app");// Fall von Stringcontent.title; // Gibt IntlayerNode<string> zurückcontent.title.value; // Gibt den Basisinhalt zurück, hier ein Stringcontent.title.toString(); // Gibt String zurückcontent.title.toLowerCase(); // Gibt String zurückString(content.title); // Gibt String zurückcontent.title.toUpperCase(); // Gibt String in Großbuchstaben zurückcontent.title.replace("a", "b"); // Gibt geänderten String zurück// ...

Der Zugriff auf die Eigenschaften eines IntlayerNode funktioniert zwar, macht aber die Anzeige der Selektoren im visuellen Editor unmöglich.

Der IntlayerNode kann auch Zahlen oder andere Typen wie IntlayerNode<number> umschließen.