自2023/11
开始,经过超500+commits
的开发,以近日正式发布里程碑之作AutoStore
AutoStore是一款设计精巧而优雅的现代化响应式状态管理库,提供了强大的状态管理能力,支持响应式
、计算属性
、异步计算
、表单双向绑定
、信号组件
等功能,为您提供一站式全自动的状态管理。
helux 是腾讯TNTWeb前端团队开源的一款集atom
、signal
、依赖追踪
为一体,支持细粒度响应式更新的状态引擎。
AutoStore
的开始分两个阶段
第1个阶段: SpeedForm
- 初步想法
helux
大概发布于2023/9
左右,也是一款经过超2年不断迭代的精心大作,作者钟正楷在掘金上发布一系列推文,阅读之后,极为惊艳!!!
然后就开始进行陆续试用helux
,并期间为helux
贡献了一些文档、构建、测试之类的外围工作。经过深入学习和使用,也发现了一些问题,主要是对helux
的API
设计有自己的想法,觉得不够优雅。
- 因此,我决定基于
helux
包装一个类似helux-starter
之类的封装库,用来简化helux
的使用。 - 随着
helux-starter
代码的增加,我冒出一个就地计算
的主意,如下:
const order = sharex({price:9.9,count:2,total:(state)=>state.price * state.count
})
以上order
经helux
处理后,会创建一个derive
对象,然后将派出计算结果写入到原始对象,如下:
order= {price:9.9,count:2,total:18.8
}
但此时的helux
还没有开放相应的hook
接口来做这件事,因此,在作者[钟正楷]的全力配合下,我们在某个周六花了5个小时将相关的代码加入,并发布正式支持此特性。
- 开发SpeedForm
有了就地计算
这个想法后,我进一步开发helux-starter
,随着对helux
的深入了解,有了更疯狂的的玩法和想法。
就是在一个复杂的JSON对象中,将就地计算发挥到极致,然后与表单进行结合,我想这将大大简化复杂的业务的表单处理,比如下面的orders
const orders = sharex({orders:[{ price:9.9, count:2, total:(state)=>state.price * state.count},{ price:9.9, count:2, total:(state)=>state.price * state.count}{ price:9.9, count:2, total:(state)=>state.price * state.count}]
})
一个由响应式核心helx
驱动的强大表单引擎开始有了雏形。
因此,我从2023/11
开始正式将helux-starter
更名为speedform
,正式定位为一个基于由响应式核心helx
驱动的强大表单引擎。
接下来,SpeedForm
的开发进入稳定期,陆续提交300+commits
,至2024/5
已基本完工,我跟[钟正楷]已经基本完工,也出了初步的文档, 但还不完善以及后续的文档了。
但由于各种原因,停更了一段时间,之间:
- 使用
SpeedForm
抽空参加了openInula 开源之夏活动,获取了三等奖。 - 开源了LiteTree一款在
Vitepress/MarkDown
下使用的树组件 - 开源了FlexStyled一款CSS-IN-JS库
- 开源了FlexTree:一款Nodejs下基于左右值的树存储库
- 开源了一些至今没有完工的坑…
第2个阶段: AutoStore
正在SpeedForm
进行收宫阶段时,很快就可以正式发布SpeedForm了,风云再起。
- 在打包阶段我发现
SpeedForm
打包后,产物超过100K
,对于一款表单库而言,虽然功能比较多,但是还是不太可接受。经过与作者[钟正楷]的沟通,由于设计原因,并不能支持Tree Shaking
之类的技术进行优化。 - 在
React
组件中开发时,我想实现一个useForm
的功能,在组件销毁时将helux
创建的sharex
销毁,但是helux
并不支持,这几乎意味着只能是使用为全局状态库。
基于以上两个主要原因,我开始思考如何解决此问题。
- 我先看了
helux
的源码,还是否可以进行改造之类的,发现很难,甚至都看不懂。 - 然后我发现
helux
的底层是由原作者开发的limu,limu
是一个不可变数据库,同样功能强大性能强劲。
是否可以直接使用limu
来为SpeedForm
重构一个响应式核心呢?一方面这相当于重写一个helux
,较大的工作量。另一方面,我预想中的响应式核心,并不需要不可变数据。需要为此买单吗?
犹豫之中,SpeedForm
停更了好长一段时间。
某一天,我试着想,能不能自己写一个响应式核心,我不需要不可变数据,就想满足SpeedForm
的设计。说干就干,没想到,非常顺利,几乎是2-3
天时间就将核心基于Proxy
的关键代码写完。
经过思考,我决定重构自己的响应式核心,并且SpeedForm
重命名为AutoStore
,自2024/8
开始,由了之前的工作基础,AutoStore
的开发非常顺利,终于于近日正式发布了。
AutoStore
是一款设计精巧而优雅的现代化响应式状态管理库,提供了强大的状态管理能力,支持响应式
、计算属性
、异步计算
、表单双向绑定
、信号组件
等功能,为您提供一站式状态管理。
主要特性:
- 响应式核心:基于
Proxy
实现,数据变化自动触发视图更新。 - 就地计算属性:独有的就地计算特性,可以在状态树中任意位置声明
computed
属性,计算结果原地写入。 - 依赖自动追踪:自动追踪
computed
属性的依赖,只有依赖变化时才会重新计算。 - 异步计算:强大的异步计算控制能力,支持
超时、重试、取消、倒计时、进度
等高级功能。 - 状态变更监听:能监听
get/set/delete/insert/update
等状态对象和数组的操作监听。 - 信号组件:支持
signal
信号机制,可以实现细粒度的组件更新。 - 调试与诊断:支持
chrome
的Redux DevTools Extension
调试工具,方便调试状态变化。 - 嵌套状态:支持任意深度的嵌套状态,无需担心状态管理的复杂性。
- 表单绑定:强大而简洁的双向表单绑定,数据收集简单快速。
- 循环依赖:能帮助检测循环依赖减少故障。
- Typescript: 完全支持Typescript,提供完整的类型推断和提示
- 单元测试:提供完整的单元测试覆盖率,保证代码质量。
AutoStore