Ví dụ

Sáu sandbox có thể triển khai độc lập dùng cùng API công khai Orbz. Chúng chủ ý dùng chung bố cục, nhãn, điều khiển, mặc định và trình bày CSS thuần; chỉ cách tích hợp framework thay đổi.

Miền trình diễn là đích triển khai. DNS và triển khai production được quản lý riêng với khung tài liệu này.

Mỗi sandbox minh họa điều gì

• năm trạng thái và cấu hình chuyển động riêng
• điều khiển kích thước và tốc độ
• tạm dừng, độ nổi và giảm chuyển động
• sáu preset tích hợp
• bảng màu tùy chỉnh đúng năm màu
• chuyển rõ ràng giữa preset và màu tùy chỉnh
• trạng thái gốc của framework điều khiển cùng hợp đồng <orb-z>
• văn bản trạng thái có ngữ nghĩa bên ngoài Shadow DOM đóng

Giao diện giống nhau là một phần minh họa: dùng thành phần web không nên tạo ra sản phẩm khác chỉ vì một nơi dùng Vue còn nơi khác dùng React.

Chạy workspace sandbox

Từ thư mục gốc kho mã:

pnpm install --frozen-lockfile
pnpm build

pnpm build dựng cả sáu ứng dụng với gói Orbz đã phát hành. Khởi động mọi máy chủ phát triển cùng lúc bằng lệnh trình diễn ở thư mục gốc:

pnpm showcase

Mỗi sandbox dùng cổng trong bảng, nên cả sáu có thể chạy cùng lúc mà không tranh chấp địa chỉ.

Triển khai thành các dự án Vercel riêng

Tạo một dự án Vercel cho mỗi sandbox và chọn thư mục tương ứng làm Root Directory:

sandbox/vanilla
sandbox/react
sandbox/vue
sandbox/svelte
sandbox/angular
sandbox/next

Mỗi sandbox được đặt là riêng tư, có phụ thuộc framework, cấu hình dựng và vercel.json riêng. Chúng là công cụ và bản trình diễn của kho mã, không nằm trong gói npm.

Mỗi bản trình diễn dùng phiên bản Orbz đã phát hành chính xác như phụ thuộc thông thường. Không bao giờ import thư mục src/ của gói hay ứng dụng sandbox khác.

So sánh tích hợp, không phải thiết kế

Dùng sandbox để giải đáp câu hỏi riêng của framework:

• Nên đăng ký trình duyệt ở đâu?
• Framework liên kết thuộc tính boolean của phần tử tùy chỉnh thế nào?
• Cài đặt trình biên dịch nào nhận biết orb-z?
• TypeScript lấy OrbzState và OrbzElement bằng cách nào?
• Ranh giới máy khách React/Next bắt đầu ở đâu?

Xem ví dụ ngắn gọn tại Cách tích hợp framework. Với giao diện hỗn hợp framework triển khai độc lập, xem Orbz trong microfrontend.