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

 import { Button } from './Button.ripple'; import { track } from '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 = track(0);   let double = track(() => @count * 2);
   <div class='counter'>     <h2>{'Counter'}</h2>     <p>{"Count: "}{@count}</p>     <p>{"Double: "}{@double}</p>
     <Button onClick={() => @count++} label={'Increment'} />     <Button onClick={() => @count = 0} label={'Reset'} />   </div> }

import { Context } from 'ripple';
const MyContext = new Context(null);
component Child() {  // 在子组件中读取 Context  const value = MyContext.get();
  console.log(value); // "Hello from context!"}
export component Parent() {  const value = MyContext.get();
  // 初次读取时尚未设置，回退到初始值 null  console.log(value);
  // 在父组件中设置 Context  MyContext.set("Hello from context!");
  <Child />}

import { track, effect } from 'ripple';
export component App() { let count = track(0);
effect(() => {console.log(@count); });
@count++}>{'Increment'} }