NUCLO / 12

语言

Nuclo v0.3.29 · 零依赖

用 nuclo
构建显式
的界面。

一个小而类型安全的 DOM 框架。状态保持普通且可变。每一次更新都由你掌控。没有代理,没有信号,没有虚拟 DOM。

$npm create nuclo@latest
0
依赖
175
类型化 HTML 与 SVG 构建器
~18.4KB
gzip 压缩后,核心运行时
01/09 · update()
先涂画,再修补
stateplain array · tap or dragupdate()domreal nodes
0 mutations · 0 update() · 0 patched
01/09 · update()
先涂画,再修补

一个显式的周期。

状态依赖值,没有依赖图,没有调度器。何时运行由你决定——从数据到屏幕只有一条可预期的路径。

  1. 01修改

    改变你的数据

    状态就是普通的 JavaScript:变量、数组、对象。想怎么改就怎么改,改多少次都可以。

    todos.push(newTodo) user.name = 'Ada'
  2. 02提交

    调用 update()

    一个全局函数提交你的更改。批量做十几次修改,然后提交一次。在你说之前,什么都不会渲染。

    update()
  3. 03修补

    Nuclo 同步 DOM

    每个动态表达式重新求值。Nuclo 只把真正改变的值写入 DOM。没有 diff,没有重新渲染。

    // 修补了 2 个节点, // 其余一切未被触碰
修改状态时,什么都不会发生。调用 update(),Nuclo 就精确地做你要求的事。不多,不少。
  1. 显式优于隐式

    没有代理追踪你的每一步。你修改状态,然后调用 update()。因果关系始终清晰可预期。

  2. 随意批量修改,只更新一次

    做十次修改,然后调用一次 update()。DOM 只看到最终状态。没有渲染被浪费。

  3. 函数,而非组件

    用普通的 JavaScript 函数构建。Nuclo 不需要类、装饰器或特殊语法。每个函数返回 DOM 节点。onMount 和 onDestroy 是普通的修饰器,只在需要时添加。

为清晰而生。

没有魔法。没有意外。每一次更新都是有意为之。

  • 01显式

    更新周期由你掌控

    随意修改,然后调用一次 update()。Nuclo 不需要订阅,不需要调度器,也绝不会用一次 diff 让你意外。DOM 在你决定的时刻同步。

  • 02轻量

    零依赖

    核心运行时 gzip 压缩后约 18.4 KB。Nuclo 不需要编译器,也不需要构建插件。加一行 import 就开始构建。

  • 03类型化

    TypeScript 优先

    175 个完整类型化的 HTML 与 SVG 构建器,为每个属性、样式属性和事件提供自动补全。

  • 04精确

    细粒度修补

    动态表达式在 update() 时重新求值。只有真正改变的值才会触碰 DOM。

在关键之处足够快。

这些是来自 js-framework-benchmark 的独立数据,涵盖创建、更新、交换和清除数千行。

js-framework-benchmark · keyed越低越好
  1. Nuclo0.2.24
    1.12
  2. Solid1.9.3
    1.13
  3. Svelte5.42.1
    1.17
  4. Vue3.5.39
    1.31
  5. Riot10.1.2
    1.54
  6. React19.2.0
    1.58
  7. Angular22.0.0
    1.58
  8. Stencil4.23.0
    1.81
  9. Ember7.3.0-alpha.5
    2.06
  10. Knockout3.5.1
    2.26
  11. Qwik1.11.0
    3.29
该分数是相对于测得最快实现的耗时放慢倍数,为所有 keyed 基准的加权几何平均值。来源:js-framework-benchmark

随时准备就绪。

安装 Nuclo,导入一次,交付在你指定的时刻精确更新的 UI。一个下午就能学完整个 API。

$npm create nuclo@latest