SSR và hydration

Orbz tách các định nghĩa an toàn trên máy chủ khỏi thao tác đăng ký có kiểm tra môi trường trong trình duyệt. Nó không thực thi định nghĩa lớp con của HTMLElement ở phạm vi mô-đun.

Hành vi của điểm vào

Mã đánh dấu kết xuất phía máy chủ

Máy chủ có thể xuất thẻ như HTML thông thường:

<div role="status" aria-live="polite">
  <orb-z state="idle"></orb-z>
  <span>Assistant is idle</span>
</div>

Nhập điểm vào trình duyệt từ một mô-đun phía máy khách ổn định. Phần tử hiện có được nâng cấp tại chỗ khi thao tác đăng ký chạy.

import "@neongate-ai/orbz/browser";

Hoặc đăng ký tường minh:

import { defineOrbz } from "@neongate-ai/orbz";
 
defineOrbz();

React và Next.js

Chỉ dùng ranh giới phía máy khách cho việc đăng ký và trạng thái tương tác, rồi hiển thị trực tiếp thẻ gốc:

"use client";
 
import "@neongate-ai/orbz/browser";
 
export function AssistantPresence() {
  return <orb-z state="idle" size="300px" />;
}

Giữ các thuộc tính trên máy chủ và lần hiển thị đầu tiên phía máy khách có giá trị xác định. Đọc trạng thái chỉ có trong trình duyệt, chẳng hạn trạng thái kết nối, sau hydration.

Microfrontend

Sổ đăng ký Custom Elements được dùng chung trên toàn trang. Bản triển khai định nghĩa orb-z đầu tiên sẽ được dùng, nên các ứng dụng chung một trang phải thống nhất phiên bản Orbz, dù đã có biện pháp bảo vệ khi gọi defineOrbz() nhiều lần.

Danh sách kiểm tra

• Hiển thị <orb-z> trực tiếp trong mọi framework.
• Nhập /browser một lần từ mã phía máy khách hoặc gọi defineOrbz() tường minh.
• Giữ các thuộc tính ban đầu giống nhau trên máy chủ và máy khách.
• Giữ văn bản trạng thái có ngữ nghĩa bên ngoài phần tử trực quan.
• Không kiểm tra bên trong Shadow DOM đóng.