前端圈炸了！这个新框架同时超越React、Solid、Svelte？

大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

Ripple 是一个 TypeScript UI 框架，其汲取了 React、Solid 和 Svelte 的精华并整合到同一个包中，Ripple 的设计目标是 JS/TS 优先，而不是 HTML 优先。

Ripple 模块拥有自己的 .ripple 扩展名，并且这些模块完全支持 TypeScript。通过引入新的扩展，Ripple 还可以创造自己的超集语言，其与 TypeScript 和 JSX 完美兼容，并带有一些有趣的特性，例如：较好的 DX 和 LLM 支持。

Ripple 的典型特征包括：

响应式状态管理：内置响应式，带有 $ 前缀的变量和对象属性
基于组件的架构：简洁、可复用的组件，带有 props 和 children
类似 JSX 的语法：熟悉的模板，并带有 Ripple 特有的增强功能
性能优先：支持细粒度渲染，性能和内存使用率业界领先
TypeScript 支持：完全集成 TypeScript 并进行类型检查
VSCode 集成：丰富的编辑器支持，带有诊断和 IntelliSense
控制流：模板中原生的 if、for 和 try
作用域样式：使用 <style> 元素实现组件本地 CSS
Prettier 支持：完全支持 .ripple 模块的 Prettier 格式

Ripple 的作者参与或主导了一系列超级优秀的前端开源项目，从 Inferno 开始，到 React 和 React Hooks ，再到创建 Lexical，再到 Svelte 5 及其新的编译器和基于信号的反应性运行时等等。

目前 Ripple 在 github 通过 MIT 协议开源，短短几周已经有超过 5k 的 star，是一个值得关注的前端开源项目。

最后值得一提的是，目前该项目仍处于早期开发阶段，不宜用于生产。

如何使用 Ripple

渲染组件

开发者可以使用 ripple 包中的 mount API 来渲染 Ripple 组件，并使用 target 选项指定想要渲染组件的 DOM 元素。

// index.ts
import { mount } from "ripple";
import { App } from "/App.ripple";
mount(App, {
  props: {
    title: "Hello world!",
  },
  target: document.getElementById("root"),
});

Effects

在处理响应式状态时，开发者可能希望能够基于更新时发生的变化创建副作用。为此，可以使用 effect：

import { effect } from 'ripple';
export component App() {
  let $count = 0;
  effect(() => {
    console.log($count);
  });
  <button onClick={() => $count++}>{'Increment'}</button>
}

if/for 支持

如果块与 Ripple 的模板语言无缝协作，开发者可以将其放入类似 JSX 的语句中，从而使控制流更易于阅读和推理。

component Truthy({ x }) {
  <div>
    if (x) {
      <span>{'x is truthy'}</span>
    } else {
      <span>{'x is falsy'}</span>
    }
  </div>
}

开发者还可以使用 for…of 块来渲染集合，而不需要像其他框架那样指定 key 属性。

component ListView({ title, items }) {
  <h2>{title}</h2>
  <ul>
    for (const item of items) {
      <li>{item.text}</li>
    }
  </ul>
}

样式

Ripple 支持使用 <style> 元素本地化到指定组件的原生 CSS 样式。

component MyComponent() {
  <div class="container"><h1>{'Hello World'}</h1></div>
  <style>
    .container {
      background: blue;
      padding: 1rem;
    }

    h1 {
      color: white;
      font-size: 2rem;
    }
  </style>
}

下面是一个 Ripple 组件 Examples.ripple 的完整用例：

import { Button } from './Button.ripple';
export component TodoList({ todos, addTodo }: Props) {
   <div class="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>
     }
     <Button onClick={addTodo} label={"Add Todo"} />
   </div>

   <style>
     .container {
       text-align: center;
       font-family: "Arial", sans-serif;
     }
   </style>
 }

export component Counter() {
   let $count = 0;
   let $doubled = $count * 2;
   <div class='counter'>
     <h2>{'Counter'}</h2>
     <p>{`Count: ${$count}`}</p>
     <p>{`Doubled: ${$doubled}`}</p>
     <Button onClick={() => $count++} label={'Increment'} />
     <Button onClick={() => $count = 0} label={'Reset'} />
   </div>
 }