Generative UI gamit ang Lyra Gen
Mga sagot ng modelo na nire-render bilang totoo at validated na Lyra control.
Ginagawa ng Lyra Gen na accessible na Lyra component ang structured na sagot ng isang modelo sa pamamagitan ng nasuring catalog. Mga role lang ng catalog ang maaaring pangalanan ng nabuong content, hindi kailanman ang arbitraryong tag, script o action; nasa iyong application pa rin ang kahilingan sa modelo, data, mga action at storage.
Halimbawa
Pumili ng nasuring subset ng catalog, pagkatapos ay i-validate ang nabuong view bago ito i-render.
import '@aceshooting/lyra-ui/theme.css';
import { initialCatalog, subsetCatalog } from '@aceshooting/lyra-gen/catalog.js';
import { validateView } from '@aceshooting/lyra-gen/runtime.js';
import { LyraGenViewElement } from '@aceshooting/lyra-gen/gen-view.js';
const selected = subsetCatalog(initialCatalog, ['stack', 'heading', 'text']);
if (!selected.ok) throw new Error('The requested catalog is unavailable.');
const catalog = selected.value;
const result = validateView({
version: '1', catalog: { id: catalog.id, version: catalog.version },
surfaceId: 'answer-1', revision: 0,
root: { id: 'summary', type: 'stack', children: [
{ id: 'title', type: 'heading', text: 'Quarterly summary' },
{ id: 'detail', type: 'text', text: 'Revenue increased this quarter.' },
] },
}, catalog);
if (!result.ok) throw new Error('The generated view was rejected.');
const view = new LyraGenViewElement();
view.catalog = catalog;
view.document = result.value;
document.body.append(view);