O que é o tipo IntlayerNode?

O tipo IntlayerNode<T> é un tipo especial fornecido pelos pacotes do intlayer, como next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer e vanilla-intlayer.

Exemplo de uso

src/app.content.tsx

Copiar código

Copiar o código para a área de transferência

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

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "react-intlayer";

const AppContent = () => {
  const { title } = useIntlayer("app");

  return title; // retorna o tipo: IntlayerNode&lt;string&gt;
};

Por que o Intlayer insere um IntlayerNode?

O Intlayer insere um IntlayerNode para poder renderizar os Seletores do editor visual no contexto do CMS / Editor Visual.

Demonstração do Editor Visual

Um IntlayerNode é um nó React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla enriquecido, mas também permite acessar as propriedades do nó primitivo base.

Por exemplo:

Copiar código

Copiar o código para a área de transferência

const content = useIntlayer("app");

// Caso de String
content.title; // Retorna IntlayerNode&lt;string&gt;
content.title.value; // Retorna o conteúdo base, aqui uma string

content.title.toString(); // Retorna string
content.title.toLowerCase(); // Retorna string
String(content.title); // Retorna string
content.title.toUpperCase(); // Retorna string em maiúsculas
content.title.replace("a", "b"); // Retorna string modificada
// ...

Acessar as propriedades de um IntlayerNode funcionará, mas quebrará a capacidade de exibir os seletores no Editor Visual.

O IntlayerNode também pode envolver números ou outros tipos, como IntlayerNode<number>