feat(omi): v7.7.0, using latest version of reactive-signal

Tencent · Sep 8, 2024 · d83264b · d83264b
1 parent 086014c
commit d83264b
Show file tree

Hide file tree

Showing 10 changed files with 6,902 additions and 15,570 deletions.
diff --git a/packages/omi/examples/todo-app.tsx b/packages/omi/examples/todo-app.tsx
@@ -1,66 +1,50 @@
-import { render, Signal, tag, Component, h, computed, registerDirective } from '@/index'
+import { render, signal, tag, Component, h, computed, registerDirective } from '@/index'
 
 import autoAnimate from '@formkit/auto-animate'
 registerDirective('auto-animate', autoAnimate)
 
-type Todo = { text: string, completed: boolean, id: number }
-
-class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {
-  completedCount: ReturnType<typeof computed>
-
-  constructor(todos: Todo[] = []) {
-    super({ todos, filter: 'all', newItem: '' })
-    this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)
-  }
+const newItem = signal('')
+const todos = signal([
+  { text: 'Learn OMI', completed: true, id: 1 },
+  { text: 'Learn Web Components', completed: false, id: 2  },
+  { text: 'Learn JSX', completed: false, id: 3  },
+  { text: 'Learn Signal', completed: false, id: 4  }
+])
 
-  addTodo = () => {
-    // api a
-    this.value.todos.push({ text: this.value.newItem, completed: false, id: Math.random() })
-    this.value.newItem = ''
-    this.update()
+const completedCount = computed(() => todos.value.filter(todo => todo.completed).length)
 
-    // api b, same as api a
-    // this.update((value) => {
-    //   value.todos.push({ text: value.newItem, completed: false })
-    //   value.newItem = ''
-    // })
-  }
+const addTodo = () => {
+  todos.value.push({ text: newItem.value, completed: false, id: Math.random() })
+  newItem.value = ''
+  todos.update()
+}
 
-  toggleTodo = (index: number) => {
-    const todo = this.value.todos[index]
-    todo.completed = !todo.completed
-    this.update()
-  }
+const toggleTodo = (index: number) => {
+  todos.value[index].completed = !todos.value[index].completed
+  todos.update()
+}
 
-  removeTodo = (index: number) => {
-    this.value.todos.splice(index, 1)
-    this.update()
-  }
+const removeTodo = (index: number) => {
+  todos.value.splice(index, 1)
+  todos.update()
 }
 
-const todoApp = new TodoApp([
-  { text: 'Learn OMI', completed: true, id: 1 },
-  { text: 'Learn Web Components', completed: false, id: 2  },
-  { text: 'Learn JSX', completed: false, id: 3  },
-  { text: 'Learn Signal', completed: false, id: 4  }
-])
 
 @tag('todo-list')
 class TodoList extends Component {
   onInput = (event: Event) => {
     const target = event.target as HTMLInputElement
-    todoApp.value.newItem = target.value
+    newItem.value = target.value
   }
 
   render() {
-    const { todos } = todoApp.value
-    const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp
+
     return (
       <>
-        <input type="text" value={todoApp.value.newItem} onInput={this.onInput} />
+        <input type="text" value={newItem.value} onInput={this.onInput} />
         <button onClick={addTodo}>Add</button>
         <ul o-auto-animate>
-          {todos.map((todo, index) => {
+          {todos.value.map((todo, index) => {
             return (
               <li key={todo.id}>
                 <label>