Constela：内置 a11y 检查、插件系统 & CSS 过渡

Source: Dev.to

请提供您希望翻译的具体文本内容，我会按照要求将其译成简体中文，并保留原有的格式、Markdown 语法以及技术术语。谢谢！

Source: …

Constela 新功能

Constela 是一个基于 JSON 的声明式 UI 框架——你在 JSON 中编写完整的 UI，编译器 + 运行时负责其余工作。我们推出了三项功能，让 Constela 应用更易访问、更易扩展、更精致。

1. 编译时可访问性检查

可访问性不应是事后才考虑的。Constela 现在在 编译时 检查你的 JSON 程序是否存在常见的 a11y（可访问性）问题，并将其报告为警告。

内置规则

这些都是 警告，而非错误——你的代码仍会编译成功，你可以逐步采用这些检查。

const result = compile(myProgram);
if (result.ok && result.warnings?.length) {
  result.warnings.forEach(w => console.warn(`[${w.code}] ${w.message}`));
}

2. 插件系统

想在 JSON DSL 中使用自定义函数吗？现在可以了。

定义插件

import type { ConstelaPlugin } from '@constela/core';

const myPlugin: ConstelaPlugin = {
  name: 'my-analytics',
  version: '1.0.0',
  globalFunctions: {
    trackEvent: (category: string, action: string) => { /* ... */ },
    formatCurrency: (amount: number) => `$${amount.toFixed(2)}`,
  },
};

export default myPlugin;

注册插件

在 constela.config.json 中添加：

{
  "plugins": ["my-analytics", "./src/plugins/local-plugin"]
}

就这么简单——你的函数现在可以在 DSL 中使用了。

安全特性

• 原子化注册（全有或全无）
• 原型污染防护（阻止 __proto__、constructor、prototype）
• 同时支持客户端和服务端渲染

3. 基于 CSS 类的过渡

条件渲染（if 节点）现在支持平滑的进入/退出动画。

示例 JSON

{
  "kind": "if",
  "condition": { "expr": "state", "name": "showToast" },
  "then": {
    "kind": "element",
    "tag": "div",
    "children": [
      { "kind": "text", "value": { "expr": "lit", "value": "Saved!" } }
    ]
  },
  "transition": {
    "enter": "slide-in",
    "enterActive": "slide-in-active",
    "exit": "slide-out",
    "exitActive": "slide-out-active",
    "duration": 250
  }
}

对应的 CSS

.slide-in { transform: translateY(-20px); opacity: 0; }
.slide-in-active { transition: all 250ms ease; transform: translateY(0); opacity: 1; }
.slide-out { transform: translateY(0); opacity: 1; }
.slide-out-active { transition: all 250ms ease; transform: translateY(-20px); opacity: 0; }

运行时会处理：

• 进入流程： 创建元素 → 应用 enter → 下一帧切换为 enterActive → 清理
• 退出流程： 应用 exit → 下一帧切换为 exitActive → 移除元素
• 快速切换： 优雅地取消进行中的动画
• SSR（服务器端渲染）： 服务器端会忽略过渡（无需额外修改）

试一试

npm install @constela/core @constela/compiler @constela/runtime @constela/start
npx constela dev

查看完整 DSL 参考，请访问语言规范，或浏览示例以看到这些功能的实际效果。

链接

• GitHub
• Documentation
• Examples