Kiểu IntlayerNode là gì?

Kiểu IntlayerNode<T> là một kiểu đặc biệt được cung cấp bởi các gói của intlayer như next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer và vanilla-intlayer.

Ví dụ sử dụng

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; // trả về kiểu: IntlayerNode<string>};

Tại sao Intlayer lại chèn một IntlayerNode?

Intlayer chèn một IntlayerNode để có thể hiển thị các Bộ chọn (Selectors) của trình chỉnh sửa trực quan trong ngữ cảnh của CMS / Trình chỉnh sửa trực quan.

Một IntlayerNode là một Node React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla được làm phong phú, nhưng nó cũng cho phép truy cập các thuộc tính của node nguyên thủy cơ bản.

Ví dụ:

const content = useIntlayer("app");// Trường hợp là Chuỗi (String)content.title; // Trả về IntlayerNode<string>content.title.value; // Trả về nội dung cơ bản, ở đây là một chuỗicontent.title.toString(); // Trả về chuỗicontent.title.toLowerCase(); // Trả về chuỗiString(content.title); // Trả về chuỗicontent.title.toUpperCase(); // Trả về chuỗi in hoacontent.title.replace("a", "b"); // Trả về chuỗi đã sửa đổi// ...

Việc truy cập các thuộc tính của một IntlayerNode sẽ vẫn hoạt động, nhưng sẽ làm mất khả năng hiển thị các bộ chọn trong Trình chỉnh sửa trực quan.

IntlayerNode cũng có thể bao bọc số, hoặc các kiểu khác như IntlayerNode<number>