Qu'est-ce que le type IntlayerNode ?

Le type IntlayerNode<T> est un type spécial fourni par les packages d'intlayer tels que next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer et vanilla-intlayer.

Exemple d'utilisation

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; // retourne le type : IntlayerNode<string>};

Pourquoi Intlayer insère-t-il un IntlayerNode ?

Intlayer insère un IntlayerNode pour pouvoir afficher les sélecteurs de l'éditeur visuel dans le contexte du CMS / Éditeur Visuel.

Un IntlayerNode est un nœud React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla enrichi, mais il permet aussi d'accéder aux propriétés du nœud primitif de base.

Par exemple :

const content = useIntlayer("app");// Cas d'une chaîne (String)content.title; // Retourne IntlayerNode<string>content.title.value; // Retourne le contenu de base, ici une chaînecontent.title.toString(); // Retourne une chaînecontent.title.toLowerCase(); // Retourne une chaîneString(content.title); // Retourne une chaînecontent.title.toUpperCase(); // Retourne une chaîne en majusculescontent.title.replace("a", "b"); // Retourne une chaîne modifiée// ...

Accéder aux propriétés d'un IntlayerNode fonctionnera, mais cassera la possibilité d'afficher les sélecteurs dans l'Éditeur Visuel.

L'IntlayerNode peut également envelopper un nombre, ou d'autres types tels que IntlayerNode<number>