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

    src/app.content.tsx
    import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

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

export default appContent;
    src/App.tsx
    import { useIntlayer } from "react-intlayer";const AppContent = () => {const { title } = useIntlayer("app");return title; // gibt Typ zurück: IntlayerNode&lt;string&gt;};

    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.

    Visueller Editor Demo

    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:

    js
    const content = useIntlayer("app");// Fall von Stringcontent.title; // Gibt IntlayerNode&lt;string&gt; 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.