Cos'è il tipo IntlayerNode?

Il tipo IntlayerNode<T> è un tipo speciale fornito dai pacchetti di intlayer come next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer e vanilla-intlayer.

Esempio di utilizzo

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; // restituisce il tipo: IntlayerNode<string>
};

Perché Intlayer inserisce un IntlayerNode?

Intlayer inserisce un IntlayerNode per poter renderizzare i Selettori dell'editor visuale nel contesto del CMS / Editor Visuale.

Un IntlayerNode è un nodo React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla arricchito, ma permette anche di accedere alle proprietà del nodo primitivo di base.

Per esempio:

const content = useIntlayer("app");

// Caso di una stringa
content.title; // Restituisce IntlayerNode<string>
content.title.value; // Restituisce il contenuto di base, in questo caso una stringa

content.title.toString(); // Restituisce una stringa
content.title.toLowerCase(); // Restituisce una stringa
String(content.title); // Restituisce una stringa
content.title.toUpperCase(); // Restituisce una stringa in maiuscolo
content.title.replace("a", "b"); // Restituisce una stringa modificata
// ...

Accedere alle proprietà di un IntlayerNode funzionerà, ma interromperà la capacità di visualizzare i selettori nell'Editor Visuale.

L'IntlayerNode può anche avvolgere numeri o altri tipi come IntlayerNode<number>