Що таке тип IntlayerNode?

Тип IntlayerNode<T> — це спеціальний тип, що надається пакетами intlayer, такими як next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer та vanilla-intlayer.

Приклад використання

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; // повертає тип: IntlayerNode<string>};

Чому Intlayer вставляє IntlayerNode?

Intlayer вставляє IntlayerNode, щоб мати можливість відображати селектори візуального редактора в контексті CMS / візуального редактора.

IntlayerNode — це розширений вузол React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla, який також дозволяє звертатися до властивостей базового примітивного вузла.

Наприклад:

const content = useIntlayer("app");// Випадок з рядком (String)content.title; // Повертає IntlayerNode<string>content.title.value; // Повертає базовий вміст, у даному випадку рядокcontent.title.toString(); // Повертає рядокcontent.title.toLowerCase(); // Повертає рядокString(content.title); // Повертає рядокcontent.title.toUpperCase(); // Повертає рядок у верхньому регістріcontent.title.replace("a", "b"); // Повертає змінений рядок// ...

Звернення до властивостей IntlayerNode буде працювати, але порушить можливість відображення селекторів у візуальному редакторі.

IntlayerNode також може обгортати числа або інші типи, такі як IntlayerNode<number>.