¿Qué es el tipo IntlayerNode?

El tipo IntlayerNode<T> es un tipo especial proporcionado por los paquetes de intlayer como next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer y vanilla-intlayer.

Ejemplo de uso

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

¿Por qué Intlayer inserta un IntlayerNode?

Intlayer inserta un IntlayerNode para poder renderizar los Selectores del editor visual en el contexto del CMS / Editor Visual.

Un IntlayerNode es un nodo enriquecido de React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla, pero también permite acceder a las propiedades del nodo primitivo base.

Por ejemplo:

const content = useIntlayer("app");// Caso de cadena (String)content.title; // Devuelve IntlayerNode<string>content.title.value; // Devuelve el contenido base, aquí una cadenacontent.title.toString(); // Devuelve cadenacontent.title.toLowerCase(); // Devuelve cadenaString(content.title); // Devuelve cadenacontent.title.toUpperCase(); // Devuelve cadena en mayúsculascontent.title.replace("a", "b"); // Devuelve cadena modificada// ...

Acceder a las propiedades de un IntlayerNode funcionará, pero romperá la capacidad de mostrar los selectores en el Editor Visual.

El IntlayerNode también puede envolver un número u otros tipos como IntlayerNode<number>