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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const content = useIntlayer("app");

// Fall von String
content.title; // Gibt IntlayerNode&lt;string&gt; zurück
content.title.value; // Gibt den Basisinhalt zurück, hier ein String

content.title.toString(); // Gibt String zurück
content.title.toLowerCase(); // Gibt String zurück
String(content.title); // Gibt String zurück
content.title.toUpperCase(); // Gibt String in Großbuchstaben zurück
content.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.