v0.6 系列是 LessJS 架构的里程碑:确立了 DSD 渲染模型、Island 三层组件模型、registerAdapter 协议,并完成了从 npm 到 JSR 的迁移。
v0.6.0 — DSD + Island Mixin + registerAdapter
DSD 作为核心渲染模型
LessJS 选择 Declarative Shadow DOM (DSD) 作为核心渲染模型,而非 Lit SSR 或 FAST SSR。三个原因:
- Deno/Edge 不能运行 Node.js 依赖 — @lit-labs/ssr 依赖 Node.js stream API
- Lit SSR 不输出标准 DSD — 它使用
<!--lit-part-->标记,需要客户端 cleanup - 框架锁定违反 core 的 agnostic 承诺 — core 不能依赖特定框架的 SSR 方案
Self-built SSR 使用纯字符串拼接,输出标准 DSD:
<my-counter>
<template shadowrootmode="open">
<style>:host { display: block; }</style>
<button>Count: 0</button>
</template>
</my-counter>
island() Mixin 替代 monkey-patch
v0.5 使用 globalThis monkey-patch 来注册 island 组件。v0.6 引入 island() Mixin:
import { island } from '@openelement/core';
@island({ strategy: 'lazy' })
class MyCounter extends LitElement { ... }
支持四种策略:eager、lazy(默认)、idle、visible。
registerAdapter() 替代 globalThis hooks
v0.6 用显式的 registerAdapter() 替代所有 globalThis 钩子:
import { registerAdapter } from '@openelement/core';
import { installLitAdapter } from '@openelement/adapter-lit';
registerAdapter({
isTemplate: (v) => v instanceof TemplateResult,
render: (v, tag) => renderLitTemplate(v, tag),
extractStyles: (cls) => extractLitStyles(cls),
});
CSS Custom Properties 主题系统
主题系统从 _propagateTheme() 迁移到 CSS Custom Properties。color-values.ts 作为颜色 token 的 single source of truth。
v0.6.1 — JSR-only 发布
移除 npm 发布,全面转向 JSR (jsr.io)。所有 6 个包现在只发布到 JSR。
发布顺序(按依赖关系):core → rpc → signal → adapter-lit → ui → create
跨包 JSR 导入
必须使用显式版本 + 子路径格式:
import { renderDSD } from 'jsr:@openelement/core@^0.6.0/render-dsd';
v0.6.2 — 三层组件模型 + WithDsdHydration Mixin
三层组件模型
v0.6.2 定义了清晰的组件分层:
| Layer | 类型 | DSD 模板 | Hydration | 框架依赖 |
|---|---|---|---|---|
| 1 | dsd-static | 有 | 不需要 | 无 |
| 2 | dsd-interactive | 有 | 事件绑定 | 需要适配器 |
| 3 | pure-island | 无 | 完整框架 | 框架拥有 shadow root |
WithDsdHydration Mixin
替代继承式的 DsdLitElement,用组合模式:
import { WithDsdHydration } from '@openelement/adapter-lit/dsd-hydration';
class MyComponent extends WithDsdHydration(LitElement) {
static hydrateEvents = [
{ selector: 'button', event: 'click', method: '_handleClick' },
];
}
_dsdHydrated标志检测 DSD 场景createRenderRoot()检测已有 shadow root_hydrateEvents()绑定声明式事件- 直接 DOM 操作绕过 Lit reactive cycle
HydrateEventDescriptor
声明式事件绑定,替代手动 addEventListener:
interface HydrateEventDescriptor {
selector: string; // shadow root 内的 CSS 选择器
event: string; // DOM 事件名
method: string; // 组件实例方法名
}
清理:移除死代码
LitDsdElement— 无组件继承,替换为 MixinRenderAdapter.hydrate()— 注册但从未调用Hydratable接口 — 无组件实现_extractCeTag()— 从未被调用
版本演进
| 版本 | 核心变化 |
|---|---|
| v0.6.0 | DSD + island() + registerAdapter |
| v0.6.1 | JSR-only,移除 npm |
| v0.6.2 | 三层模型 + WithDsdHydration + 死代码清理 |