bump 0.4.0 go raw

Author: bySabi

README.md

@@ -29,7 +29,7 @@ Does _Hookleton_ make your life a little more easy? Consider <a href="https://ww
 - Low Memory Consumption and CPU Usage
 - Very fast, as fast as the React Hook _runtime_
 - Works in any environment that supports React Hook: _React Native_, _React Server-Side Rendering ([next.js](https://github.com/zeit/next.js/))_, _[Proto Native](https://github.com/kusti8/proton-native)_, ...
-- Extensible by advanced users
+- Extensible
 - Very low cognitive load
 
 ## Install
@@ -45,23 +45,8 @@ The Hookleton package exposes `createHook` function that does all.
 
 - `useHook` is the user provide Hook
 - `initial` any params that _useHook_ will accept
-- `useHookleton` returned Hookleton
-
-### a single convention
-
-By **convention** Hookleton inspect for changes in element **1** of _array_ returned by _useHook_ before notify(_force render_) to users components of the hookleton.
-Make sure you update that value, `hook Output[0]`, if you want the changes to be notified.
-
-An example, in case it has not been clear:
-
-```javascript
-const useExample = createHook(() => {
-  const [, setState] = useState(0);
-  return ['any value', setState];
-});
-```
-
-If you do something like this, when `setState` update state the hookleton **host** will be rendered but **Hookleton** will not see any change cause element **1** is a constant value, `any value`, hence the rest of users component will not be rendered.
+- `useHookleton` returned Hookleton. Called by *non-host* components
+- `useHookleton.use` returned Hookleton. Called by **the host** component
 
 ## usage Example
 
@@ -88,11 +73,13 @@ const Decrement = () => {
   return <button onClick={decrement}>-</button>;
 };
 
+// The host component
 const Value = () => {
-  const [count] = useCounter(0);
+  const [count] = useCounter.use(0);
   return <span>{count}</span>;
 };
 
+// Value componet must be at the top
 export default () => (
   <div>
     <Value />
@@ -102,20 +89,20 @@ export default () => (
 );
 ```
 
-The `Value` component is the **host** of `useCounter` hookleton for being the first component of the hierarchy that _use_ it.
-Remember that `useCounter` is **composing** a `useState` which is where all the logic happens. It could have been any Hook that return an **Array**
+The `Value` component is the **host** of `useCounter` hookleton for being the first component of the hierarchy that call `useCounter.use`.
+Remember that `useCounter` is **composing** a `useState` which is where all the logic happens.
+
+## a single convention
+Only one component, the `host`, can call created *hookleton* `use` hook and this component must be at the top of components of the hierarchy.   
+
 
 ## more Examples
 
 Examples [page](https://bysabi.github.io/hookleton/) include:
 
 - _Todo App_ [page](https://bysabi.github.io/hookleton/todo/) | [source](./example/pages/todo.js)
-- a _Mouse_ event listener that notify `{x,y}` position to 600 components in Real Time [page](https://bysabi.github.io/hookleton/mouse/) | [source](./example/pages/mouse.js)
+- a _Mouse_ event listener that notify `{x,y}` position to 1200 components in Real Time [page](https://bysabi.github.io/hookleton/mouse/) | [source](./example/pages/mouse.js)
 - basic _Counter_ showed above [page](https://bysabi.github.io/hookleton/counter/) | [source](./example/pages/counter.js)
-- 5 counters in 25 components. Include a basic `global store` [page](https://bysabi.github.io/hookleton/counters5x5/) | [source](./example/pages/counters5x5.js)
-- 5 counters in 400 components. Default non-blocking renderer [page](https://bysabi.github.io/hookleton/counters10x40/) | [source](./example/pages/counters10x40.js)
-- 5 counters in 400 components. With a custom blocking renderer [page](https://bysabi.github.io/hookleton/counters10x40blocking/) | [source](./example/pages/counters10x40blocking.js)
-- 10 counters in multiple nested context [page](https://bysabi.github.io/hookleton/counterNested/) | [source](./example/pages/counterNested.js)
 - showing Fetched 10 random users data in 16 components [page](https://bysabi.github.io/hookleton/fetch/) | [source](./example/pages/fetch.js)
 
 How would it be with React Context vs Hookletons?
@@ -129,10 +116,9 @@ How would it be with React Context vs Hookletons?
 
 The idea is very simple. The first time that a user component of the Hook is instantiated the hookleton is created and the result of the call to `user Hook` will be _linked_ to the `host` of the hookleton. The `user Hook` is the one you want to _globalize_.
 The result to the calls to the hookleton in the `host` component will become `The source of truth`. The rest of user components will receive a reference to _The source of truth_ on each **re-render**.
-As we said the `host` of the hookleton is the first component instance that _use_ it or _call_ it. This is important for two reasons:
+As we said the `host` of the hookleton is the first component instance that call `.use` hook. This is important because:
 
-- First, initial state of the Hook only can be defined in the `host` or in the creation moment with `createHook`. Any _initial_ value from the rest of components will be ignored.
-- Second, when the host component is unmounted `non-host` will retain the state but you can not update it until a new component that will be designated `Host` is mounted
+- Initial state of the Hook only can be defined in the `host` or in the creation moment with `createHook`. Any _initial_ value from the rest of components will be ignored.
 
 This is all that you need about _Hookletons_ before start to use it
 
@@ -146,7 +132,7 @@ A cloudy day googling I was looking for the simplest possible alternative to _Re
 
 This does not mean that they are badly constructed, just that they were not built on top of React Hook, they are prior to it or do not benefit at all of the **"Hook engine"**
 
-Hookleton solves it elegantly. Actually _Hookleton_ does not know anything about the `useHook` that want to be global, it only matters that the hook returns an _array_ of any size, its runtime `interface`. This means that its utility is to share the _interface_ of the hook not only its state.
+Hookleton solves it elegantly. Actually _Hookleton_ does not know anything about the `useHook` that want to be global. This means that its utility is to share the _interface_ of the hook not only its state.
 
 ### When and Where use it
 
@@ -160,19 +146,18 @@ Hookletons can be used in all kinds of projects, both large and small. Remember
 
 ## Pitfalls
 
-1. If element **1** of the returned _array_ does not change, the users of the hookleton will not be notified
-2. There are two ways to set the initial value of the hookleton. When created with `createHook` and when it is called from the host component.
+1. There are two ways to set the initial value of the hookleton. When created with `createHook` and when it is called from the host component.
    - The value passed in `createHook` creation has priority
-   - If it is `undefined` in _createHook_, the value set in the `host` component will be used. There is only one _host_ component, **the first one**
-3. `initial` values passed to **non-host** components will be **ignored**
-4. If the host component is **unmounted**, the calls to state `setter` will fail. To ensure that this does not happen, you can create a component that acts as the host of the hookleton or several of them at the top of the component hierarchy, Ex:
+   - If it is `undefined` in _createHook_, the value set in the `host` component will be used. There is only one _host_ component.
+2. `initial` values passed to **non-host** components will be **ignored**
+3. If the host component is **unmounted**, the calls to state `setter` will fail. To ensure that this does not happen, you can create a component that acts as the host of the hookleton or several of them at the top of the component hierarchy, Ex:
 
 ```javascript
 
 const Hookletons = () => {
-  useExample1(0);
-  useExample2('one');
-  useExample3({ three: 3 });
+  useExample1.use(0);
+  useExample2.use('one');
+  useExample3.use({ three: 3 });
   return null
 }
 
@@ -192,17 +177,6 @@ If you compare it with other non-Hook based solutions, I do not know that it's t
 
 You can see how the _rerender_ behave in the above provide examples: _Mouse_, _Counters_, and _Fetch data_
 
-## advanced users API
-
-Hookleton is implemented in an class with lifecycle methods that can be extended or replaced.
-
-`import { Hookleton, createHookWithClass } from 'hookleton'`
-
-- `Hookleton` it is the class that implements everything
-- `createHookWithClass` is a function for instantiate derived `Hookleton` classes and do some setup.
-
-**\*createHook** is a _createHookWithClass_ function
-
 ## Credits
 
 ### author

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@babel/env', '@babel/preset-react'],
+  presets: ['@babel/env'],
 };