openElement 有三层：JSX-first 应用 API、DSD renderer、渐进式 island 升级。
应用作者从 @openelement/app 开始。框架负责把页面函数接入 Web Components 和 DSD 输出。
import { definePage } from '@openelement/app';
export default definePage({
route: { path: '/' },
head: { title: 'Home' },
render() {
return <main>Hello openElement</main>;
},
});import { definePage } from '@openelement/app';
export default definePage({
route: { path: '/posts/[slug]', params: ['slug'] },
head: { title: 'Post' },
async load({ params }) {
return { slug: params.slug };
},
render({ data }) {
return <article>{data.slug}</article>;
},
});import { defineElement, defineIsland } from '@openelement/app';
import { signal } from '@openelement/runtime';
defineElement('app-badge', ({ label }) => {
return <span part='badge'>{label}</span>;
});
const count = signal(0);
export default defineIsland('my-counter', () => (
<button onClick={() => count.value++}>
Count: {count.value}
</button>
));DsdElement、renderDsd()、JSX runtime、signals 和StyleSheet 仍然是底层公开 primitive，但不再是页面作者的第一层 API。