Svelte 团队成员开源新框架 Ripple，又一个想“改写前端”的框架？

TONY 发表于 2025-12-21 20:45:53

作者 | Bruno Couriol 
译者 | 田橙 
Ripple 是一款全新的开源前端框架，融合了 React、SolidJS 和 Svelte 的理念，采用 Type 优先的设计思路，以组件为中心，并提供类似 JSX 的编译式语言、细粒度响应式机制以及作用域 CSS。该框架由 Svelte 核心维护者 Dominic Gannaway 打造，其响应式系统支持自动依赖追踪，无需虚拟 DOM 即可直接更新 DOM 节点，同时计划通过 AI 智能代理为开发者提供更高效的调试能力。import{ Button} from./Button.ripple; import{ track } fromripple; exportcomponent TodoList({ todos, addTodo }: Props) { <divclass="container"><h2>{Todo List} h2><ul>for (const todo of todos) {<li>{todo.text} li>}ul>if (todos.length > 0) {<p>{todos.length}{" items"} p>}<ButtononClick={addTodo}label={"AddTodo"} />div><style>.container{ text-align: center; font-family: "Arial", sans-serif; }style>}exportcomponent Counter{ letcount = track( 0); letdouble = track( =>@count* 2); <divclass=counter><h2>{Counter} h2><p>{"Count: "}{@count} p><p>{"Double: "}{@double} p><ButtononClick={=>@count++} label={Increment} /> <ButtononClick={=>@count = 0} label={Reset} /> div>}
在 Ripple 中，开发者通过组件（例如 TodoList、Counter）来构建界面。组件本质是包含 DOM 表达式语句的函数，语法大量借鉴 Type 与 JSX，同时统一描述界面的标记结构（DOM）、样式（CSS）及交互行为。
界面标记以原生语句形式直接表达，控制流逻辑（例如 if (todos.length > 0)、for (const todo of todos)）可以自然穿插在 JSX 风格的结构中。样式默认作用域隔离，仅对当前组件生效。组件行为则由事件处理函数驱动，并依赖细粒度响应系统，使其能像 Svelte 一样精确更新真实 DOM，而非重新计算整个虚拟 DOM。
track 原语用于定义独立响应式变量（如 count），其值通过 @ 运算符读取。计算型响应式变量（如 double）可通过 track( => @count * 2) 声明依赖关系。Ripple 的响应系统会确保这些变量始终保持同步。同时，它也保证 DOM 元素的状态随依赖变化自动更新。例如，点击按钮会让 count 自增，从而同步更新段落中的文本内容。
Gannaway 在 Twitter 上解释道：
Ripple 的响应式系统既不是虚拟 DOM，也不是 signals，而是基于细粒度、惰性求值的机制，它更多依赖编译器而非运行时，实现上述响应式能力。
Ripple 虽然不支持全局状态，但支持 Context，用于在组件间共享必要的应用状态。不过，Context 只能在其闭包范围内的组件使用，并且只能在组件上下文中读写，不能在事件处理器中进行读写操作。import { Context } fromripple; constMyContext = newContext( null); component Child{ // 在子组件中读取 Contextconstvalue= MyContext. get; console.log( value); // "Hello from context!"}export component Parent{ constvalue= MyContext. get; // 初次读取时尚未设置，回退到初始值 nullconsole.log( value); // 在父组件中设置 ContextMyContext. set( "Hello from context!"); }
Ripple 也允许以 effect 将副作用与状态变化关联：import{ track, effect } fromripple; exportcomponent App{ letcount = track( 0); effect( =>{ console. log( @count); }); @count++}>{ Increment} } 
Ripple 的目标是为 Web 应用开发者带来更简单的思维模型和更好的开发体验。例如，默认不必使用 useMemo、CSS 自带作用域、没有额外抽象层隔离 DOM 与标记。该语言设计与编译器深度协作，使其能够更好地理解 Type 类型和响应式状态结构，为智能补全、错误检查和工具链打下基础。Ripple 团队也在探索在开发服务器中直接集成 AI 能力，实现主动式调试建议与问题诊断。
Ripple 由 Dominic Gannaway 创建，他曾在 Meta 参与 React Hooks 开发，创建富文本编辑器框架 Lexical，编写过轻量级框架 Inferno，并是 Svelte 5 核心团队成员。虽然 Ripple 已经存在数年，但最近才以 MIT 许可正式开源。目前框架仍处于早期阶段，欢迎社区贡献，并应遵循其贡献指南。返回搜狐，查看更多

页: [1]

W10站长论坛's Archiver

Svelte 团队成员开源新框架 Ripple，又一个想“改写前端”的框架？