From d83264bf30a018393d2516468d6d44259e034fe9 Mon Sep 17 00:00:00 2001 From: dntzhang Date: Sun, 8 Sep 2024 15:07:35 +0800 Subject: [PATCH] feat(omi): v7.7.0, using latest version of reactive-signal --- packages/omi/examples/todo-app.tsx | 66 +- packages/omi/package-lock.json | 12251 ++-------------- packages/omi/package.json | 4 +- packages/omi/src/index.ts | 5 +- packages/omi/test/signal.test.jsx | 57 - packages/omi/yarn.lock | 10045 +++++++------ packages/reactive-signal/package-lock.json | 4 +- packages/reactive-signal/package.json | 2 +- packages/reactive-signal/src/reactivity.ts | 36 +- .../reactive-signal/test/reactivity.test.jsx | 2 +- 10 files changed, 6902 insertions(+), 15570 deletions(-) delete mode 100644 packages/omi/test/signal.test.jsx diff --git a/packages/omi/examples/todo-app.tsx b/packages/omi/examples/todo-app.tsx index b96b0f72fa..456ca98af6 100644 --- 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 - - 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 ( <> - +