modulize the TodoApp

README.md

@@ -7,7 +7,7 @@ An elegant state management solution for React.
 - **Non-opinionated**: Like useState, only one core function, others are built on top of it.
 - **Type safe**: The state is type safe and the return value is intuitive.
 - **Global**: The state is global, you can access it anywhere.
-- **Scalable**: Supports selector to avoid unnecessary re-render.
+- **Scalable**: Naturally scale large state into multiple modules and files without performance degradation.
 - **Tiny**: Less than [0.3KB](https://bundlephobia.com/package/create-global-state).
 
 ## Documentation
@@ -44,4 +44,5 @@ Its implementation is not type safe and the return value is not intuitive. It's
 
 > Why not [zustand](https://github.com/pmndrs/zustand)?
 
-The typescript support is not good enough, the API is not intuitive. `create-global-state` is more like `useState` which aligns with the react API style. Check the [comparison](https://github.com/ysmood/create-global-state/issues/1).
+The typescript support is not good enough, the API is not intuitive. `create-global-state` is more like `useState` which aligns with the react API style. Check the [comparison](https://github.com/ysmood/create-global-state/issues/1). Zustand [Slices Pattern](https://zustand.docs.pmnd.rs/guides/slices-pattern) can cause naming conflict issues.
+`create-global-state` can naturally scale states by modules and files.

examples/TodoApp/Actions.tsx

@@ -0,0 +1,35 @@
+import Filter from "./Filter";
+import { addTodo, clearCompleted } from "./todos/actions";
+import { useZeroDone } from "./todos";
+import ToggleAll from "./ToggleAll";
+
+export default function Actions() {
+  return (
+    <div className="flex gap-1">
+      <ToggleAll />
+      <Filter />
+      <AddTodo />
+      <ClearCompleted />
+    </div>
+  );
+}
+
+function AddTodo() {
+  return (
+    <button onClick={addTodo} title="Add new todo">
+      +
+    </button>
+  );
+}
+
+function ClearCompleted() {
+  return (
+    <button
+      onClick={clearCompleted}
+      disabled={useZeroDone()}
+      title="Delete all completed todos"
+    >
+      ✂️
+    </button>
+  );
+}

examples/TodoApp/Filter.tsx

@@ -0,0 +1,12 @@
+import { filters, setFilter } from "./todos/filter";
+
+// The component to filter the todos.
+export default function Filter() {
+  return (
+    <select onChange={(e) => setFilter(e.target.value)}>
+      {filters.map((f) => (
+        <option key={f}>{f}</option>
+      ))}
+    </select>
+  );
+}

examples/TodoApp/Title.tsx

@@ -0,0 +1,5 @@
+import { useLeftCount } from "./todos";
+
+export default function Title() {
+  return <h3>Todo App ({useLeftCount()} todos left)</h3>;
+}

examples/TodoApp/TodoItem.tsx

@@ -0,0 +1,24 @@
+import { delTodo, toggleTodo, updateTodo, useTodo } from "./todos";
+
+// The component to display a todo.
+export default function TodoItem({ id }: { id: number }) {
+  const { done, text } = useTodo(id);
+
+  return (
+    <div className="flex gap-1 my-1">
+      <input type="checkbox" checked={done} onChange={() => toggleTodo(id)} />
+
+      <input
+        placeholder="Input text here"
+        value={text}
+        onChange={(e) => updateTodo(id, e.target.value)}
+        disabled={done}
+        autoFocus
+      />
+
+      <button onClick={() => delTodo(id)} title="Delete current todo">
+        ✕
+      </button>
+    </div>
+  );
+}

examples/TodoApp/TodoList.tsx

@@ -0,0 +1,13 @@
+import { useTodoIds } from "./todos";
+import TodoItem from "./TodoItem";
+
+// The component to display all filtered todos.
+export default function Todos() {
+  return (
+    <>
+      {useTodoIds().map((id) => {
+        return <TodoItem key={id} id={id} />;
+      })}
+    </>
+  );
+}

examples/TodoApp/ToggleAll.tsx

@@ -0,0 +1,14 @@
+import { toggleAll, useToggleAll } from "./todos/actions";
+import { useZeroCount } from "./todos";
+
+// The component to toggle all todos.
+export default function ToggleAll() {
+  return (
+    <input
+      type="checkbox"
+      checked={useToggleAll()}
+      onChange={toggleAll}
+      disabled={useZeroCount()}
+    />
+  );
+}

examples/TodoApp/index.tsx

@@ -1,95 +1,13 @@
-import {
-  useList,
-  useTodo,
-  delTodo,
-  toggleTodo,
-  updateTodo,
-  addTodo,
-  clearCompleted,
-  filters,
-  setFilter,
-  toggleAll,
-  useCount,
-  useToggleAll,
-} from "./store";
+import Actions from "./Actions";
+import Title from "./Title";
+import TodoList from "./TodoList";
 
 export default function TodoApp() {
-  return (
-    <div>
-      <h3>Todo App ({useCount(false)} todos left)</h3>
-      <div className="flex gap-1">
-        <ToggleAll />
-        <Filter />
-        <button onClick={addTodo} title="Add new todo">
-          +
-        </button>
-        <button
-          onClick={clearCompleted}
-          disabled={useCount(true) === 0}
-          title="Delete all completed todos"
-        >
-          ✂️
-        </button>
-      </div>
-
-      <TodoList />
-    </div>
-  );
-}
-
-// The component to toggle all todos.
-function ToggleAll() {
-  return (
-    <input
-      type="checkbox"
-      checked={useToggleAll()}
-      onChange={toggleAll}
-      disabled={useList().length === 0}
-    />
-  );
-}
-
-// The component to filter the todos.
-function Filter() {
-  return (
-    <select onChange={(e) => setFilter(e.target.value)}>
-      {filters.map((f) => (
-        <option key={f}>{f}</option>
-      ))}
-    </select>
-  );
-}
-
-// The component to display all filtered todos.
-function TodoList() {
   return (
     <>
-      {useList().map((id) => {
-        return <TodoItem key={id} id={id} />;
-      })}
+      <Title />
+      <Actions />
+      <TodoList />
     </>
   );
 }
-
-// The component to display a todo.
-function TodoItem({ id }: { id: number }) {
-  const { done, text } = useTodo(id);
-
-  return (
-    <div className="flex gap-1 my-1">
-      <input type="checkbox" checked={done} onChange={() => toggleTodo(id)} />
-
-      <input
-        placeholder="Input text here"
-        value={text}
-        onChange={(e) => updateTodo(id, e.target.value)}
-        disabled={done}
-        autoFocus
-      />
-
-      <button onClick={() => delTodo(id)} title="Delete current todo">
-        ✕
-      </button>
-    </div>
-  );
-}