fix: fix Model types (#76)

* fix: fix Model types

* fix: fix types error

* chore: commit examples to sync with lockfile

* fix: fix ci

.gitignore

@@ -37,8 +37,6 @@ output_resource/
 **/*/adapters/**/index.ts
 **/*/adapters/**/index.js
 
-pnpm-lock.yaml
-
 **/*/tsconfig.temp.json
 
 .changeset/pre.json

examples/todos/package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@modern-js-reduck/plugin-devtools": "workspace:*",
-    "@modern-js-reduck/plugin-immutable": "workspace:*",
     "@modern-js-reduck/react": "workspace:*",
-    "@modern-js-reduck/store": "workspace:*",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^14",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-scripts": "5.0.1",
+    "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

examples/todos/src/components/App.tsx

@@ -0,0 +1,13 @@
+import Footer from './Footer';
+import AddTodo from '../containers/AddTodo';
+import VisibleTodoList from '../containers/VisibleTodoList';
+
+const App = () => (
+  <div>
+    <AddTodo />
+    <VisibleTodoList />
+    <Footer />
+  </div>
+);
+
+export default App;

examples/todos/src/components/Footer.js → examples/todos/src/components/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import FilterLink from '../containers/FilterLink'
 import { VisibilityFilters } from '../models/todos'
 

examples/todos/src/components/Link.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+
+interface Props {
+  active: boolean;
+  onClick: () => void;
+}
+
+const Link = ({ active, children, onClick }: PropsWithChildren<Props>) => (
+  <button
+    onClick={onClick}
+    disabled={active}
+    style={{
+      marginLeft: '4px',
+    }}
+  >
+    {children}
+  </button>
+);
+
+export default Link;

examples/todos/src/components/Todo.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react"
+
+interface Props {
+  text: string,
+  completed: boolean,
+  onClick: () => void
+}
+
+const Todo = ({ onClick, completed, text }: PropsWithChildren<Props>) => (
+  <li
+    onClick={onClick}
+    style={{
+      textDecoration: completed ? 'line-through' : 'none'
+    }}
+  >
+    {text}
+  </li>
+)
+
+export default Todo

examples/todos/src/components/TodoList.tsx

@@ -0,0 +1,24 @@
+import Todo from './Todo'
+import todos from '../models/todos'
+import type {Todo as TTodo} from '../models/todos'
+import { GetModelActions } from '@modern-js-reduck/react'
+import { PropsWithChildren } from 'react'
+
+interface Props {
+  todos: TTodo[],
+  toggleTodo: GetModelActions<typeof todos>['toggleTodo']
+}
+
+const TodoList = ({ todos, toggleTodo }: PropsWithChildren<Props>) => (
+  <ul>
+    {todos.map(todo =>
+      <Todo
+        key={todo.id}
+        {...todo}
+        onClick={() => toggleTodo(todo.id)}
+      />
+    )}
+  </ul>
+)
+
+export default TodoList

examples/todos/src/containers/AddTodo.tsx

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { useModel } from '@modern-js-reduck/react';
+import todos from '../models/todos';
+
+const AddTodo = () => {
+  const [, actions] = useModel(todos);
+
+  // won't re-render when todos state change, because the state selector always return null
+  // const [,actions] = useModel(todos, (state) => null);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div>
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          if (!inputRef.current?.value.trim()) {
+            return;
+          }
+          actions.addTodo(inputRef.current.value);
+          inputRef.current.value = '';
+        }}
+      >
+        <input ref={inputRef} />
+        <button type="submit">Add Todo</button>
+      </form>
+    </div>
+  );
+};
+
+export default AddTodo;

examples/todos/src/containers/FilterLink.tsx

@@ -0,0 +1,28 @@
+import { useModel } from '@modern-js-reduck/react';
+import { PropsWithChildren } from 'react';
+import Link from '../components/Link';
+import todos, { VisibilityFilters } from '../models/todos';
+
+interface Props {
+  filter: VisibilityFilters;
+}
+
+const FilterLink = (props: PropsWithChildren<Props>) => {
+  const { filter, children } = props;
+  const [{ visibilityFilter }, { setVisibilityFilter }] = useModel(todos);
+
+  // won't re-render when only the `data` slice of state change,
+  // because the state selector lets `FilterLink` only subscribe the `visibilityFilter` slice of the state
+  // const [visibilityFilter, {setVisibilityFilter}] = useModel(todos, (state) => state.visibilityFilter)
+
+  return (
+    <Link
+      active={visibilityFilter === filter}
+      onClick={() => setVisibilityFilter(filter)}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default FilterLink;

examples/todos/src/containers/VisibleTodoList.js → examples/todos/src/containers/VisibleTodoList.tsx

@@ -1,6 +1,6 @@
-import { useModel } from "@modern-js-reduck/react";
-import todos from "../models/todos";
-import TodoList from "../components/TodoList";
+import { useModel } from '@modern-js-reduck/react';
+import todos from '../models/todos';
+import TodoList from '../components/TodoList';
 
 const VisibleTodoList = () => {
   const [{ visibleTodos }, { toggleTodo }] = useModel(todos);
@@ -9,4 +9,3 @@ const VisibleTodoList = () => {
 };
 
 export default VisibleTodoList;
-

examples/todos/src/index.tsx

@@ -0,0 +1,10 @@
+import ReactDOM from 'react-dom/client';
+import { Provider } from '@modern-js-reduck/react';
+import App from './components/App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <Provider>
+    <App />
+  </Provider>,
+);