Open navigation

Blog/release

LessJS v0.6.x — DSD 渲染模型 + Island 架构 + 三层组件模型

v0.6.0 确立 DSD 为核心渲染模型,引入 island() Mixin 替代 monkey-patch,定义三层组件模型(dsd-static / dsd-interactive / pure-island)。v0.6.1 移除 npm 发布,全面转向 JSR。v0.6.2 统一 WithDsdHydration Mixin,消除 DsdLitElement 继承。

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。三个原因:

  1. Deno/Edge 不能运行 Node.js 依赖 — @lit-labs/ssr 依赖 Node.js stream API
  2. Lit SSR 不输出标准 DSD — 它使用 <!--lit-part--> 标记,需要客户端 cleanup
  3. 框架锁定违反 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 { ... }

支持四种策略:eagerlazy(默认)、idlevisible

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 — 无组件继承,替换为 Mixin
  • RenderAdapter.hydrate() — 注册但从未调用
  • Hydratable 接口 — 无组件实现
  • _extractCeTag() — 从未被调用

版本演进

版本 核心变化
v0.6.0 DSD + island() + registerAdapter
v0.6.1 JSR-only,移除 npm
v0.6.2 三层模型 + WithDsdHydration + 死代码清理