正确性的前端框架:基于 Effect,采用 Elm 体系结构
Beta 正确性的前端框架。基于 Effect。采用 Elm 的体系结构。使用 TypeScript 编写。npx create-foldkit-app@latest 声明行为。发布。重复。React、Vue、Svelte 和 Solid 解决渲染问题,将体系结构留给您。Foldkit 提供体系结构,以便您可以专注于您的领域。可预测的状态一个不可变的模型保存整个应用程序的状态。每个更改都通过单个更新函数流动。没有隐藏的变更,没有过时的闭包,没有意外情况。显式效应副作用是您从更新中返回的值,而不是埋在处理程序中的命令式调用。命令描述该发生什么。运行时处理何时以及如何发生。优雅地扩展复杂性线性增长,而不是指数增长。一个 50 文件的应用程序遵循与 5 文件应用程序相同的模式,因此每个特性增加结构,而不是与已有结构纠缠在一起。新团队成员可以阅读代码并理解它。基于 Effect。内外都如此。如果您已经了解 Effect,Foldkit 感觉自然。如果您是 Effect 的新手,Foldkit 是一个学习它的好方法。每个 Foldkit 应用程序都是一个 Effect 所有状态都是一个单一的 Schema 副作用被建模为从不失败的 Effects 看到它的工作。观看消息通过更新流入模型。代码实时高亮,向您展示每个步骤中发生的事情。 // MODEL const Model = S . Struct ( { count : S . Number , isResetting : S . Boolean , resetDuration : S . Number , } ) // MESSAGE const ClickedIncrement = m ( 'ClickedIncrement' ) const ChangedResetDuration = m ( 'ChangedResetDuration' , { seconds : S . Number , } ) const ClickedResetAfterDelay = m ( 'ClickedResetAfterDelay' ) const CompletedDelayReset = m ( 'CompletedDelayReset' ) // COMMAND const DelayReset = Command . define ( 'DelayReset' , { seconds : S . Number }, CompletedDelayReset , )( ({ seconds }) => Effect . sleep ( ` ${ seconds } seconds` ) . pipe ( Effect . as ( CompletedDelayReset ()) , ) , ) // UPDATE M . tagsExhaustive ( { ClickedIncrement : () => [ evo ( model , { count : count => count + 1 } ) , [] , ] , ChangedResetDuration : ({ seconds }) => [ evo ( model , { resetDuration : () => seconds } ) , [] , ] , ClickedResetAfterDelay : () => [ evo ( model , { isResetting : () => true } ) , [ DelayReset ( { seconds : model . resetDuration } )] , ] , CompletedDelayReset : () => [ evo ( model , { count : () => 0 , isResetting : () => false } ) , [] , ] , } ) 0 重置延迟(秒)模型状态 count : 0 isResetting : false resetDuration : 2 阶段空闲消息日志电池包括。大多数框架要求您自带路由库、状态管理器、UI 套件和表单验证器。Foldkit 将它们作为一个一致的系统提供。路由类型安全的双向路由。URLs 解析为类型的路由,路由再构建为 URLs。没有字符串匹配,没有解析和构建之间的不匹配。探索路由 UI 组件可访问的组件(对话框、菜单、选项卡、列表框、披露等)是为 Elm 体系结构构建的。易于样式和自定义。浏览组件子模型一个自包含的模型、消息、更新和视图,嵌入在一个更大的程序内。子组件将领域事实作为类型的 OutMessages 显示,父组件在更新中处理它们。每个有状态的 Foldkit UI 组件都是作为子模型提供的。探索子模型订阅将模型的一部分绑定到可能会发出消息的作用域流。运行时打开作用域,同时切片保持其值并在切片发生变化时关闭。探索订阅管理资源基于模型的生命周期,适用于长寿命的浏览器资源,例如 WebSocket、AudioContext 和 RTCPeerConnection。当模型需要资源时,运行时获取资源,当不再需要时释放。探索管理资源字段验证每字段验证,支持同步和异步。将规则定义为谓词,在更新中应用,模型跟踪每个字段状态。探索字段验证测试两个测试原语。故事通过更新发送消息,并对结果模型和命令进行断言。场景通过可访问的定位器驱动呈现的视图,并对重新渲染的 HTML 进行断言。探索测试 DevTools 检查消息、模型状态和命令。当您的应用程序运行时。时间旅行模式使您的 UI 回到任何过去的模型。AI代理可以通过 MCP 连接到相同的数据。探索 DevTools 嵌入在任何主机应用程序中运行 Foldkit 小部件,使用 Runtime.embed。主机通过 Schema 类型的端口推动数据并接收输出值,并通过 dispose 拆除小部件。探索嵌入像故事和场景一样阅读的测试。纯更新函数意味着纯测试。故事测试状态机。场景通过视图测试特性(点击按钮、输入内容)并使用可访问的定位器。没有 DOM,没有模拟。了解测试 import { Scene , Story } from 'foldkit' import { expect , test } from 'vitest' // 故事 — 测试状态机 test ( '获取天气更新模型' , () => { Story . st
本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。
☕请我喝杯咖啡