release: v0.4.0

bucatinicode · Aug 7, 2019 · 9381fa6 · 9381fa6
2 parents 4e6ed44 + 4777c4e
commit 9381fa6
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 446 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ yarn add react-model-store
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Model, createComponent } from 'react-model-store';
+import { Model, useModel } from 'react-model-store';
 
 class CounterModel extends Model {
   count: number = this.state(0);
@@ -42,18 +42,18 @@ class CounterModel extends Model {
   decrement = () => setTimeout(() => this.count--, 1000);
 }
 
-const Counter = createComponent(
-  CounterModel,
-  ({ count, increment, decrement }) => (
+const Counter = () => {
+  const { count, increment, decrement } = useModel(CounterModel);
+  return (
     <div>
       <p>Count: {count}</p>
       <div>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     </div>
-  )
-);
+  );
+};
 
 ReactDOM.render(<Counter />, document.getElementById('root'));
 ```
@@ -63,7 +63,7 @@ ReactDOM.render(<Counter />, document.getElementById('root'));
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Model, createStore, createComponent } from 'react-model-store';
+import { Model, createStore, useModel } from 'react-model-store';
 
 interface Todo {
   key: number;
@@ -134,32 +134,37 @@ class TodoModel extends Model {
   constructor(todo: Todo) {
     super();
     this.todo = todo;
-    const { logic } = this.use(RootModelStore);
+    const { logic } = this.model(RootModelStore);
     this.onRemoveClick = logic.remove.bind(logic, todo.key);
   }
 }
 
 const RootModelStore = createStore(RootModel);
 
-const ControlPanel = createComponent(
-  RootModelStore,
-  ({ control: { textInput, onAddClick, onKeyPress } }) => (
+const ControlPanel = () => {
+  const {
+    control: { textInput, onAddClick, onKeyPress },
+  } = useModel(RootModelStore);
+  return (
     <div>
       <input type='text' ref={textInput} onKeyPress={onKeyPress} />
       <button onClick={onAddClick}>Add</button>
     </div>
-  )
-);
-
-const TodoItem = createComponent(
-  TodoModel,
-  ({ todo: { text }, onRemoveClick }) => (
+  );
+};
+
+const TodoItem = (props: { todo: Todo }) => {
+  const {
+    todo: { text },
+    onRemoveClick,
+  } = useModel(TodoModel, props.todo);
+  return (
     <li>
       <button onClick={onRemoveClick}>Remove</button>
       <span>{text}</span>
     </li>
-  )
-);
+  );
+};
 
 ReactDOM.render(  
   <RootModelStore.Provider>
@@ -170,7 +175,7 @@ ReactDOM.render(
           {({ logic: { todos } }) =>
             todos.map(todo => (
               <li>
-                <TodoItem key={todo.key} initialValue={todo} />
+                <TodoItem key={todo.key} todo={todo} />
               </li>
             ))
           }
@@ -187,7 +192,7 @@ ReactDOM.render(
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Model, createComponent, createStore } from 'react-model-store';
+import { Model, createStore, useModel } from 'react-model-store';
 
 class RootModel extends Model {
   // RootModelStore.Provider component is re-rendered when this state is changed.
@@ -210,7 +215,7 @@ class RootModel extends Model {
 const RootModelStore = createStore(RootModel);
 
 class HighFrequencyTimerModel extends Model {
-  root = this.use(RootModelStore); // use RootModel
+  root = this.model(RootModelStore); // use RootModel
 
   // HighFrequencyTimer component is re-rendered when this state is changed.
   time = this.state(0);
@@ -250,22 +255,24 @@ class HighFrequencyTimerModel extends Model {
   };
 }
 
-const HighFrequencyTimer = createComponent(
-  HighFrequencyTimerModel,
-  ({ time }) => <span>{(time / 1000).toFixed(2)}</span>
-);
+const HighFrequencyTimer = () => {
+  const { time } = useModel(HighFrequencyTimerModel);
+  return <span>{(time / 1000).toFixed(2)}</span>;
+};
 
-const Controller = createComponent(
-  RootModelStore,
-  ({ onReset, onToggle, toggleText, resetButton }) => (
+const Controller = () => {
+  const { onReset, onToggle, toggleText, resetButton } = useModel(
+    RootModelStore
+  );
+  return (
     <div>
       <button onClick={onToggle}>{toggleText}</button>
       <button onClick={onReset} ref={resetButton}>
         Reset
       </button>
     </div>
-  )
-);
+  );
+};
 
 ReactDOM.render(
   <RootModelStore.Provider>

diff --git a/example/chat.tsx b/example/chat.tsx
@@ -3,7 +3,7 @@ import 'react-app-polyfill/stable';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createStore, Model, createComponent } from '../src/react-model-store';
+import { createStore, Model, useModel } from '../src/react-model-store';
 
 interface Chat {
   readonly key: number;
@@ -40,7 +40,7 @@ class RootModel extends Model {
 }
 
 class ChatViewModel extends Model {
-  root = this.use(RootModelStore);
+  root = this.model(RootModelStore);
   chats = this.state(this.root.chats);
 
   addChat = (_user: string, _message: string) => (this.chats = this.root.chats);
@@ -52,7 +52,7 @@ class ChatViewModel extends Model {
 }
 
 class ChatRoomModel extends Model {
-  root = this.use(RootModelStore);
+  root = this.model(RootModelStore);
   chats = this.state<Chat[]>([]);
   isFocus: boolean;
   user: string;
@@ -128,44 +128,47 @@ const ChatDisplay = (props: { chats: Chat[] }) => (
   </div>
 );
 
-const ChatView = createComponent(ChatViewModel, ({ chats }) => (
-  <div>
-    <p>Chat View</p>
-    <ChatDisplay chats={chats} />
-  </div>
-));
+const ChatView = () => {
+  const { chats } = useModel(ChatViewModel);
+  return (
+    <div>
+      <p>Chat View</p>
+      <ChatDisplay chats={chats} />
+    </div>
+  );
+};
 
-const ChatRoom = createComponent(
-  ChatRoomModel,
-  ({
+const ChatRoom = (props: {
+  initialValue?: { user: string; focus: boolean };
+}) => {
+  const {
     chats,
     user,
     sendMessage,
     sendLocaslMessage,
     onTextKeyPress,
     input: textRef,
-  }) => {
-    const display = React.useMemo(() => <ChatDisplay chats={chats} />, [chats]);
+  } = useModel(ChatRoomModel, props.initialValue);
+  const display = React.useMemo(() => <ChatDisplay chats={chats} />, [chats]);
 
-    return (
+  return (
+    <div>
+      <p>Chat Room: {user}</p>
       <div>
-        <p>Chat Room: {user}</p>
-        <div>
-          <input ref={textRef} type='text' onKeyPress={onTextKeyPress} />
-        </div>
-        <div>
-          <button onClick={sendMessage}>Send Message (Enter)</button>
-        </div>
-        <div>
-          <button onClick={sendLocaslMessage}>
-            Send Local Message (Shift + Enter)
-          </button>
-        </div>
-        {display}
+        <input ref={textRef} type='text' onKeyPress={onTextKeyPress} />
       </div>
-    );
-  }
-);
+      <div>
+        <button onClick={sendMessage}>Send Message (Enter)</button>
+      </div>
+      <div>
+        <button onClick={sendLocaslMessage}>
+          Send Local Message (Shift + Enter)
+        </button>
+      </div>
+      {display}
+    </div>
+  );
+};
 
 const App = () => {
   const style = { marginLeft: 10, marginRight: 10 };

diff --git a/example/counter.tsx b/example/counter.tsx
@@ -3,7 +3,7 @@ import 'react-app-polyfill/stable';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Model, createComponent } from '../src/react-model-store';
+import { Model, useModel } from '../src/react-model-store';
 
 class CounterModel extends Model {
   count: number = this.state(0);
@@ -15,18 +15,18 @@ class CounterModel extends Model {
   decrement = () => setTimeout(() => this.count--, 1000);
 }
 
-const Counter = createComponent(
-  CounterModel,
-  ({ count, increment, decrement }) => (
+const Counter = () => {
+  const { count, increment, decrement } = useModel(CounterModel);
+  return (
     <div>
       <p>Count: {count}</p>
       <div>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     </div>
-  )
-);
+  );
+};
 
 ReactDOM.render(
   <div>

diff --git a/example/timer.tsx b/example/timer.tsx
@@ -3,7 +3,7 @@ import 'react-app-polyfill/stable';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Model, createComponent, createStore } from '../src/react-model-store';
+import { Model, createStore, useModel } from '../src/react-model-store';
 
 class RootModel extends Model {
   // RootModelStore.Provider component is re-rendered when this state is changed.
@@ -26,7 +26,7 @@ class RootModel extends Model {
 const RootModelStore = createStore(RootModel);
 
 class HighFrequencyTimerModel extends Model {
-  root = this.use(RootModelStore); // use RootModel
+  root = this.model(RootModelStore); // use RootModel
 
   // HighFrequencyTimer component is re-rendered when this state is changed.
   time = this.state(0);
@@ -66,22 +66,24 @@ class HighFrequencyTimerModel extends Model {
   };
 }
 
-const HighFrequencyTimer = createComponent(
-  HighFrequencyTimerModel,
-  ({ time }) => <span>{(time / 1000).toFixed(2)}</span>
-);
+const HighFrequencyTimer = () => {
+  const { time } = useModel(HighFrequencyTimerModel);
+  return <span>{(time / 1000).toFixed(2)}</span>;
+};
 
-const Controller = createComponent(
-  RootModelStore,
-  ({ onReset, onToggle, toggleText, resetButton }) => (
+const Controller = () => {
+  const { onReset, onToggle, toggleText, resetButton } = useModel(
+    RootModelStore
+  );
+  return (
     <div>
       <button onClick={onToggle}>{toggleText}</button>
       <button onClick={onReset} ref={resetButton}>
         Reset
       </button>
     </div>
-  )
-);
+  );
+};
 
 ReactDOM.render(
   <div>