VanityH – 面向前端渲染函数的优雅 Hyperscript DSL

laamfun2026-04-02 10:01

VanityH -- 面向前端渲染函数的优雅 Hyperscript DSL

我开发了 VanityH，用来解决在原生 JS/TS、低代码引擎以及非 JSX 环境中编写 hyperscript 代码的痛点。

它是一个零依赖、超轻量的 DSL ，基于 Proxy 和闭包实现，把混乱嵌套的 h(tag, props, children) 写法，变成类似 SwiftUI / Flutter 那样清晰、链式调用的代码。

核心亮点

告别嵌套地狱：DOM 结构一目了然
完全不可变：写时复制，避免意外修改属性
无黑魔法：行为明确，无隐式转换
极致轻量：gzip 后仅约 600 字节
全平台兼容：Vue、React、Preact、Snabbdom 及任何兼容 hyperscript 的渲染器

示例（Vue 3）

ts 复制代码

import { h } from "vue";
import createVanity from "vanity-h";

const { div, button, h1 } = createVanity(h);

const app = div.class("app").style("padding: 20px")(
  h1("VanityH Demo"),
  button.onClick(() => alert("Hello!"))("Click Me")
);

传统写法 vs VanityH

js 复制代码

// 之前
h("div", { class: "card" }, [h("button", { onClick: fn }, "Click")]);

// 之后
div.class("card")(button.onClick(fn)("Click"));

技术特点

基于 Proxy + 闭包实现链式配置
终结符式渲染逻辑
完整 TypeScript 类型推导
MIT 开源协议

仓库：github.com/VanityH/van...

可在线试用：README 中附有 StackBlitz 示例

欢迎反馈：API 设计、边界场景、渲染器兼容等任何建议。