Release 1.0.0

.eslintrc.js

@@ -1,18 +1,9 @@
-const { tslint, deepmerge } = require('@ice/spec');
+const { getESLintConfig } = require('@iceworks/spec');
 
-module.exports = deepmerge(tslint, {
-  env: {
-    jest: true
-  },
+module.exports = getESLintConfig('react-ts', {
   rules: {
-    "@typescript-eslint/explicit-member-accessibility": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/interface-name-prefix": 1,
-  },
-  settings: {
-    "react": {
-      "pragma": "React",
-      "version": "detect"
-    }
+    'react-hooks/exhaustive-deps': 0,
+    'no-param-reassign': 0,
+    '@typescript-eslint/member-ordering': 0,
   },
 });

.gitignore

@@ -61,8 +61,9 @@ typings/
 .next
 
 # Compile directory
-lib
+esm
 
 package-lock.json
 
 yarn.lock
+examples/*/pnpm-lock.yaml

README.md

@@ -60,15 +60,15 @@ const hooks = {
 const store = createStore(hooks);
 
 // 3️⃣ Consume hooks
-const { useHooks } = store;
+const { useHook } = store;
 function Button() {
-  const { increment } = useHooks('useCounter');
+  const { increment } = useHook('useCounter');
   return (
     <button type="button" onClick={increment}> + </button>
   );
 }
 function Count() {
-  const { count } = useHooks('useCounter');
+  const { count } = useHook('useCounter');
   return (<span>{count}</span>);
 }
 
@@ -102,13 +102,13 @@ npm install @ice/hooks-store --save
 In some scenarios, you may only want to call the method returned by the hooks to update the state instead of subscribing to the update of the hooks state.
 For example, the button component in the "Basic example", you do not consume the state of the hooks in the component, so you may not expect the change of the state of the hooks to trigger the re-render of the component.
 
-At this time, you can use the `getHooks` API, check following example and compare them with the above example:
+At this time, you can use the `getHook` API, check following example and compare them with the above example:
 
 ```jsx
-const { getHooks } = store;
+const { getHook } = store;
 function Button() {
   function handleIncrement() {
-    getHooks('useCounter').increment();
+    getHook('useCounter').increment();
   }
   return (
     <button type="button" onClick={handleIncrement}> + </button>
@@ -135,7 +135,7 @@ import '@/store';
 
 function useUser() {
   const [state, setState] = useState({ todos: 0 });
-  const [todos] = store.useHooks('useTodos');
+  const [todos] = store.useHook('useTodos');
 
   useEffect(() => {
     setState(produce((draft) => {
@@ -164,7 +164,7 @@ function useTodos() {
   function setTodos(todos) {
     setState(todos);
 
-    const [, setUser] = store.getHooks('useUser');
+    const [, setUser] = store.getHook('useUser');
     setUser(produce((draft) => {
       draft.todos = todos.length;
     }));
@@ -181,10 +181,10 @@ import { Component } from 'react';
 import store from '@/store';
 import useTodos from '@/hooks/useTodos';
 
-const { withHooks } = store;
+const { withHook } = store;
 
 interface MapHooksToProp {
-  useTodos: ReturnType<typeof useTodos>; // This field is automatically added by withHooks
+  useTodos: ReturnType<typeof useTodos>; // This field is automatically added by withHook
 }
 
 interface CustomProp {
@@ -214,7 +214,7 @@ class Todos extends Component<Props> {
   }
 }
 
-export default withHooks('useTodos')<MapHooksToProp, Props>(Todos);
+export default withHook('useTodos')<MapHooksToProp, Props>(Todos);
 ```
 
 ## Browser Compatibility

examples/counter/package.json

@@ -3,21 +3,15 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@ice/hooks-store": "^0.1.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@ice/hooks-store": "../../"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "react-scripts": "3.4.0",
-    "typescript": "^3.7.5"
+    "react-scripts": "^5.0.0",
+    "typescript": "^4.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
   },
   "browserslist": {
     "production": [

examples/counter/src/index.tsx

@@ -28,10 +28,10 @@ const hooks = {
 const store = createStore(hooks);
 
 // 3️⃣ Consume hooks
-const { useHooks, getHooks } = store;
+const { useHook, getHook } = store;
 function Button() {
   function getCounter() {
-    return getHooks('useCounter');
+    return getHook('useCounter');
   }
   function handleDecrementAsync() {
     getCounter().decrementAsync();
@@ -40,18 +40,16 @@ function Button() {
     getCounter().decrement();
   }
 
-  console.log('Render Button.');
   return (
     <>
-      <button type="button" onClick={handleDecrement}>-</button>
-      <button type="button" onClick={handleDecrementAsync}>Async-</button>
+      <button type="button" onClick={() => handleDecrement()}>-</button>
+      <button type="button" onClick={() => handleDecrementAsync()}>Async-</button>
     </>
   );
 }
 function Count() {
-  const { count } = useHooks('useCounter');
+  const { count } = useHook('useCounter');
 
-  console.log('Render Count.');
   return (<span>{count}</span>);
 }
 

examples/counter/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"

examples/todos/package.json

@@ -3,23 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@ice/hooks-store": "^0.1.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "@ice/hooks-store": "../../",
     "react-use": "^13.27.0"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "react-scripts": "3.4.0",
-    "typescript": "^3.7.5",
+    "react-scripts": "^5.0.0",
+    "typescript": "^4.0.0",
     "utility-types": "^3.10.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
   },
   "browserslist": {
     "production": [

examples/todos/src/components/Car.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import store from '../store';
 
-const { useHooks } = store;
+const { useHook } = store;
 
 export default function UserApp() {
-  const [ state ] = useHooks('useCar');
+  const [state] = useHook('useCar');
   const { logo } = state;
 
-  console.debug('Car rending...');
   return (
     <div>
       {logo}

examples/todos/src/components/TodoAdd.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import store from '../store';
 
-const { getHooks } = store;
+const { getHook } = store;
 
 export default function TodoAdd() {
-  console.debug('TodoAdd rending...');
   return (
     <input
       onKeyDown={(event) => {
         if (event.keyCode === 13) {
-          const [, { add }] = getHooks('useTodos');
+          const [, { add }] = getHook('useTodos');
           add({
             name: event.currentTarget.value,
           });

examples/todos/src/components/TodoList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import store from '../store';
 
-const { useHooks } = store;
+const { useHook } = store;
 
 export function TodoList({ state, actions, effectsState }) {
   const { title, subTitle, dataSource } = state;
@@ -15,7 +15,7 @@ export function TodoList({ state, actions, effectsState }) {
       </p>
       <ul>
         {dataSource.map(({ name, done = false }, index) => (
-          <li key={index}>
+          <li key={name}>
             <label>
               <input
                 type="checkbox"
@@ -36,8 +36,8 @@ export function TodoList({ state, actions, effectsState }) {
   );
 }
 
-export default function({ title }) {
-  const [ state, actions, effectsState ] = useHooks('useTodos');
+export default function ({ title }) {
+  const [state, actions, effectsState] = useHook('useTodos');
   return TodoList(
     {
       state: { dataSource: state, title, subTitle: 'Function Component' },

examples/todos/src/components/TodoListClass.tsx

@@ -1,9 +1,9 @@
 import { Component } from 'react';
 import store from '../store';
 import { TodoList as TodoListFn } from './TodoList';
-import useTodos from '../hooks/useTodos';
+import type useTodos from '../models/useTodos';
 
-const { withHooks } = store;
+const { withHook } = store;
 
 interface MapHooksToProp {
   useTodos: ReturnType<typeof useTodos>;
@@ -15,20 +15,21 @@ interface CustomProp {
 
 type Props = CustomProp & MapHooksToProp;
 
+// eslint-disable-next-line
 class TodoList extends Component<Props> {
   onRemove = (index) => {
     const [, actions] = this.props.useTodos;
     actions.remove(index);
-  }
+  };
 
   onToggle = (index) => {
     const [, actions] = this.props.useTodos;
     actions.toggle(index);
-  }
+  };
 
   render() {
     const { title, useTodos } = this.props;
-    const [ state, , effectsState ] = useTodos;
+    const [state, , effectsState] = useTodos;
     return TodoListFn({
       state: { title, dataSource: state, subTitle: 'Class Component' },
       actions: { toggle: this.onToggle, remove: this.onRemove },
@@ -37,4 +38,4 @@ class TodoList extends Component<Props> {
   }
 }
 
-export default withHooks('useTodos')<MapHooksToProp, Props>(TodoList);
+export default withHook('useTodos')<MapHooksToProp, Props>(TodoList);

examples/todos/src/components/Todos.tsx

@@ -3,10 +3,10 @@ import store from '../store';
 import TodoList from './TodoListClass';
 // import TodoList from './TodoList';
 
-const { useHooks } = store;
+const { useHook } = store;
 
 export default function Todos() {
-  const [ dataSource, actions, effectsState ] = useHooks('useTodos');
+  const [dataSource, actions, effectsState] = useHook('useTodos');
   const { refresh } = actions;
 
   useEffect(() => {
@@ -17,6 +17,5 @@ export default function Todos() {
   const loadingView = <div>loading...</div>;
   const taskView = dataSource.length ? <TodoList title="Todos" /> : noTaskView;
 
-  console.debug('Todos rending... ');
-  return effectsState.refresh.loading? loadingView : taskView;
+  return effectsState.refresh.loading ? loadingView : taskView;
 }

examples/todos/src/components/User.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import store from '../store';
 
-const { useHooks } = store;
+const { useHook } = store;
 
 export default function UserApp() {
-  const [ state, actions ] = useHooks('useUser');
+  const [state, actions] = useHook('useUser');
   const { dataSource, auth, todos } = state;
   const { login } = actions;
   const { name } = dataSource;
@@ -13,18 +13,19 @@ export default function UserApp() {
     login();
   }, []);
 
-  console.debug('UserApp rending...');
-  return auth ?
-    (<div>
+  return auth ? (
+    <div>
       <h2>
         User Information
       </h2>
       <ul>
         <li>Name：{name}</li>
         <li>Todos：{todos}</li>
       </ul>
-    </div>) :
-    (<div>
+    </div>
+  ) : (
+    <div>
       Not logged in
-    </div>);
+    </div>
+  );
 }

examples/todos/src/hooks/index.ts → examples/todos/src/models/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 export { default as useTodos } from './useTodos';
 export { default as useUser } from './useUser';
 export { default as useCar } from './useCar';

examples/todos/src/hooks/useCar.ts → examples/todos/src/models/useCar.ts

@@ -4,6 +4,5 @@
 import { useState } from 'react';
 
 export default function useCar() {
-  console.log('useCar');
   return useState({ logo: 'string' });
-};
+}