├── .gitignore
├── .npmignore
├── .npmrc
├── .travis.yml
├── LICENSE
├── README.md
├── async.js
├── cjs
    ├── async.js
    ├── context.js
    ├── e.js
    ├── effect.js
    ├── extras.js
    ├── hooks.js
    ├── index.js
    ├── memo.js
    ├── package.json
    ├── reducer.js
    └── ref.js
├── e.js
├── es.js
├── esm.js
├── esm
    ├── async.js
    ├── context.js
    ├── e.js
    ├── effect.js
    ├── extras.js
    ├── hooks.js
    ├── index.js
    ├── memo.js
    ├── reducer.js
    └── ref.js
├── index.js
├── package.json
├── rollup
    ├── async.config.js
    ├── es.config.js
    ├── esm.config.js
    └── index.config.js
├── test
    ├── async.html
    ├── context.html
    ├── context.js
    ├── e.js
    ├── index.js
    ├── multi.html
    ├── package.json
    └── timer.js
└── uhooks.jpg


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | node_modules/
4 | coverage/
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | .travis.yml
4 | node_modules/
5 | rollup/
6 | test/
7 | coverage/
8 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - stable
 4 | git:
 5 |   depth: 1
 6 | branches:
 7 |   only:
 8 |     - main
 9 | after_success:
10 |   - "npm run coveralls"
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2020, Andrea Giammarchi, @WebReflection
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <em>µ</em>hooks
 2 | 
 3 | [![Build Status](https://travis-ci.com/WebReflection/uhooks.svg?branch=main)](https://travis-ci.com/WebReflection/uhooks) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhooks/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/uhooks?branch=main) [![CSP strict](https://webreflection.github.io/csp/strict.svg)](https://webreflection.github.io/csp/#-csp-strict)
 4 | 
 5 | ![hooks](./uhooks.jpg)
 6 | 
 7 | <sup>**Social Media Photo by [Tatiana Rodriguez](https://unsplash.com/@tata186) on [Unsplash](https://unsplash.com/)**</sup>
 8 | 
 9 | ### 📣 Community Announcement
10 | 
11 | Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow ♥
12 | 
13 | ---
14 | 
15 | _micro hooks_ is a simplified _~0.8K_ alternative to [augmentor](https://github.com/WebReflection/augmentor#readme), with the following differences:
16 | 
17 |   * `hooked(fn)` is the *augmentor* entry point equivalent
18 |   * multiple states update are applied at once asynchronously <sup><sub>(these are a *Promise.then(...)* away)</sub><sup>
19 |   * `useEffect` is also applied asynchronously
20 |   * there are no extra options whatsoever so it's less configurable
21 |   * there is no `contextual` export, as every hook can have a context passed along, whenever it's needed, or a good idea at all
22 |   * exports from `uhooks/async` allows `hooked(async () => { ... })` definitions
23 |   * the [uhooks/e](./esm/e.js) export provides an *essential* utility with `useState` and `useRef`, usable in micro-controllers or whenever synchronous, simplified, hooks are enough, and code size/memory constraints are relevant.
24 | 
25 | The reason for this module to exist is to explore a slightly different pattern that is *not* stack-based, but that should perform overall better in real-world use cases, thanks to its smaller size and its reduced amount of invokes applied in bulks.
26 | 
27 | ```js
28 | // <script type="module"> import('//unpkg.com/uhooks?module') for ESM
29 | // <script src="//unpkg.com/uhooks"> for a global uhooks
30 | // const {...} = require('uhooks'); for CommonJS
31 | 
32 | import {
33 |   hooked, wait,
34 |   dropEffect, hasEffect,
35 |   createContext, useContext,
36 |   useCallback, useMemo,
37 |   useEffect, useLayoutEffect,
38 |   useReducer, useState,
39 |   useRef
40 | } from 'uhooks'; // or 'uhooks/async'
41 | 
42 | const Counter = (start) => {
43 |   const [count, setCount] = useState(start);
44 |   const {current} = useRef({});
45 |   current.increment = () => {
46 |     setCount(count + 1);
47 |   };
48 |   console.log(count);
49 |   return current;
50 | };
51 | 
52 | // logs 1, 1
53 | const comp1 = hooked(Counter)(1);
54 | const comp2 = hooked(Counter)(1);
55 | 
56 | // logs 2
57 | comp1.increment();
58 | ```
59 | 
60 | ### Extras
61 | 
62 | These hooks are reachable via `uhooks/extras`, and can be handy in various occasions:
63 | 
64 |   * `useUpdatedRef(value)` it's like `useRef`, except it updates the `current` value each time.
65 |   * `useMutationObserver(options)` observe `options.ref` or a new *ref* accordingly, with the `options` properties, and it invokes the `options.mutations(records)` whenever mutations happen.
66 |   * `useSWR(key, fetcher, options)` is a simplified version of [vercel's useSWR](https://github.com/vercel/swr). The `options` can have `initialData` and a `fetcher`, but other features might land soon.
67 |   * `useDebugValue(data, transform)` is a simplified version of its *React* counterpart. It simply logs `data` through an optional `transform` callback.
68 | 


--------------------------------------------------------------------------------
/async.js:
--------------------------------------------------------------------------------
1 | self.uhooks=function(e){"use strict";let t=null,n=new Set;const s=e=>{const{$:t,r:n,h:s}=e;l(n)&&(o.get(s).delete(e),n()),l(e.r=t())&&o.get(s).add(e)},c=()=>{const e=n;n=new Set,e.forEach((({h:e,c:t,a:n,e:s})=>{s&&e.apply(t,n)}))},o=new WeakMap,a=[],r=[];function u(e,t){return e!==this[t]}const h=()=>t,l=e=>"function"==typeof e,i=e=>{const n={h:c,c:null,a:null,e:0,i:0,s:[]};return c;function c(){const c=t;t=n,n.e=n.i=0;try{return e.apply(n.c=this,n.a=arguments)}finally{t=c,a.length&&f.then(a.forEach.bind(a.splice(0),s)),r.length&&r.splice(0).forEach(s)}}},f=Promise.resolve();function p(e){const{_:t,value:n}=this;n!==e&&(this._=new Set,this.value=e,t.forEach((({h:e,c:t,a:n})=>{e.apply(t,n)})))}const d=(e,t)=>{const n=h(),{i:s,s:c}=n;return s!==c.length&&t&&!t.some(u,c[s]._)||(c[s]={$:e(),_:t}),c[n.i++].$},g=e=>(t,n)=>{const s=h(),{i:c,s:a,h:r}=s,l=c===a.length;s.i++,l&&(o.has(r)||o.set(r,new Set),a[c]={$:t,_:n,r:null,d:!1,h:r}),(l||!n||a[c].d||n.some(u,a[c]._))&&e.push(a[c]),a[c].$=t,a[c]._=n,a[c].d=!1},w=g(a),y=g(r),E=(e,t)=>l(t)?t(e):t,$=(e,t,s)=>{const o=h(),{i:a,s:r}=o;a===r.length&&r.push({$:l(s)?s(t):E(void 0,t),set:t=>{r[a].$=e(r[a].$,t),(e=>{n.has(e)||(e.e=1,n.add(e),f.then(c))})(o)}});const{$:u,set:i}=r[o.i++];return[u,i]},_=new WeakMap;return e.createContext=e=>({_:new Set,provide:p,value:e}),e.dropEffect=e=>(e=>{const t=o.get(e);t&&f.then((()=>{t.forEach((e=>{e.r(),e.r=null,e.d=!0})),t.clear()}))})(_.get(e)),e.hasEffect=e=>(e=>o.has(e))(_.get(e)),e.hooked=e=>{const t=i(e);return _.set(n,t),n;async function n(){return await t.apply(this,arguments)}},e.useCallback=(e,t)=>d((()=>e),t),e.useContext=({_:e,value:t})=>(e.add(h()),t),e.useEffect=w,e.useLayoutEffect=y,e.useMemo=d,e.useReducer=$,e.useRef=e=>{const t=h(),{i:n,s:s}=t;return n===s.length&&s.push({current:e}),s[t.i++]},e.useState=e=>$(E,e),e.wait=f,e}({});
2 | 


--------------------------------------------------------------------------------
/cjs/async.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {
 3 |   hooked: $hooked,
 4 |   dropEffect: $dropEffect,
 5 |   hasEffect: $hasEffect
 6 | } = require('./hooks.js');
 7 | 
 8 | const hooks = new WeakMap;
 9 | 
10 | const dropEffect = hook => $dropEffect(hooks.get(hook));
11 | exports.dropEffect = dropEffect;
12 | 
13 | const hasEffect = hook => $hasEffect(hooks.get(hook));
14 | exports.hasEffect = hasEffect;
15 | 
16 | const hooked = callback => {
17 |   const $hook = $hooked(callback);
18 |   hooks.set(hook, $hook);
19 |   return hook;
20 |   async function hook() {
21 |     return await $hook.apply(this, arguments);
22 |   }
23 | };
24 | exports.hooked = hooked;
25 | 
26 | (m => {
27 |   exports.wait = m.wait;
28 |   exports.createContext = m.createContext;
29 |   exports.useContext = m.useContext;
30 |   exports.useCallback = m.useCallback;
31 |   exports.useMemo = m.useMemo;
32 |   exports.useEffect = m.useEffect;
33 |   exports.useLayoutEffect = m.useLayoutEffect;
34 |   exports.useReducer = m.useReducer;
35 |   exports.useState = m.useState;
36 |   exports.useRef = m.useRef;
37 | })(require('./index.js'));
38 | 


--------------------------------------------------------------------------------
/cjs/context.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {getInfo} = require('./hooks.js');
 3 | 
 4 | const createContext = value => ({
 5 |   _: new Set,
 6 |   provide,
 7 |   value
 8 | });
 9 | exports.createContext = createContext;
10 | 
11 | const useContext = ({_, value}) => {
12 |   _.add(getInfo());
13 |   return value;
14 | };
15 | exports.useContext = useContext;
16 | 
17 | function provide(newValue) {
18 |   const {_, value} = this;
19 |   if (value !== newValue) {
20 |     this._ = new Set;
21 |     this.value = newValue;
22 |     _.forEach(({h, c, a}) => {
23 |       h.apply(c, a);
24 |     });
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/cjs/e.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*! (c) Andrea Giammarchi - ISC */
 3 | const uhooks = ((h, o, O, K) => ({
 4 |   hooked: f => {
 5 |     const k = {i: 0, s: []};
 6 |     return function H() {
 7 |       // const [p, r, e, v] = [h, o, O, K];
 8 |       // [h, o, O, K] = [H, this, arguments, k];
 9 |       const p = h, r = o, e = O, v = K;
10 |       h = H; o = this; O = arguments; K = k;
11 |       K.i = 0;
12 |       try { return f.apply(o, O); }
13 |       finally {
14 |         h = p; o = r; O = e; K = v;
15 |         // [h, o, O, K] = [p, r, e, v];
16 |       }
17 |     };
18 |   },
19 |   useRef: current => {
20 |     // const {i, s} = K;
21 |     if (K.i == K.s.length)
22 |       K.s.push({current: current});
23 |     return K.s[K.i++];
24 |   },
25 |   useState: value => {
26 |     // const [y, u, p, {i, s}] = [h, o, O, K];
27 |     const y = h, u = o, p = O, i = K.i, s = K.s;
28 |     if (i == s.length)
29 |       s.push(value);
30 |     return [
31 |       s[K.i++],
32 |       value => {
33 |         s[i] = value;
34 |         y.apply(u, p);
35 |       }
36 |     ];
37 |   }
38 | }))();
39 | 
40 | const hooked = uhooks.hooked;
41 | const useRef = uhooks.useRef;
42 | const useState = uhooks.useState;
43 | 
44 | exports.hooked = hooked;
45 | exports.useState = useState;
46 | exports.useRef = useRef;
47 | 


--------------------------------------------------------------------------------
/cjs/effect.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {fx, effects, layoutEffects, different, getInfo} = require('./hooks.js');
 3 | 
 4 | const createEffect = stack => (callback, guards) => {
 5 |   const info = getInfo();
 6 |   const {i, s, h} = info;
 7 |   const call = i === s.length;
 8 |   info.i++;
 9 |   if (call) {
10 |     if (!fx.has(h))
11 |       fx.set(h, new Set);
12 |     s[i] = {$: callback, _: guards, r: null, d: false, h};
13 |   }
14 |   if (call || !guards || s[i].d || guards.some(different, s[i]._))
15 |     stack.push(s[i]);
16 |   s[i].$ = callback;
17 |   s[i]._ = guards;
18 |   s[i].d = false;
19 | };
20 | 
21 | const useEffect = createEffect(effects);
22 | exports.useEffect = useEffect;
23 | 
24 | const useLayoutEffect = createEffect(layoutEffects);
25 | exports.useLayoutEffect = useLayoutEffect;
26 | 


--------------------------------------------------------------------------------
/cjs/extras.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*! (c) Andrea Giammarchi - ISC */
 3 | 
 4 | const {useMemo} = require('./memo.js');
 5 | const {useLayoutEffect} = require('./effect.js');
 6 | const {useState} = require('./reducer.js');
 7 | const {useRef} = require('./ref.js');
 8 | 
 9 | /**
10 |  * Persist the same reference while updating its current value.
11 |  * @param {any} value
12 |  * @returns {object} An always-same reference.
13 |  */
14 | const useUpdatedRef = value => {
15 |   const ref = useRef(value);
16 |   ref.current = value;
17 |   return ref;
18 | };
19 | exports.useUpdatedRef = useUpdatedRef;
20 | 
21 | /**
22 |  * Given a `MutationObserverInit` object with two extra properties,
23 |  * such as `mutations(records){}`, and an optional `ref` to recycle,
24 |  * observes the reference on layout effect and invokes `mutations`.
25 |  * @param {MutationObserverInit} options
26 |  * @returns {object} An always-same reference.
27 |  */
28 | const useMutationObserver = options => {
29 |   const fn = useUpdatedRef(options.mutations);
30 |   const ref = options.ref || useRef(null);
31 |   const _ = [];
32 |   const mo = useMemo(
33 |     () => new MutationObserver(
34 |       records => { fn.current(records); }
35 |     ),
36 |     _
37 |   );
38 |   useLayoutEffect(
39 |     () => {
40 |       mo.observe(ref.current, options);
41 |       return () => { mo.disconnect(); };
42 |     },
43 |     _
44 |   );
45 |   return ref;
46 | };
47 | exports.useMutationObserver = useMutationObserver;
48 | 
49 | const defaultFetcher = url => fetch(url).then(res => res.json());
50 | 
51 | /**
52 |  * A simplified version of the vercel useSWR
53 |  * @see https://github.com/vercel/swr
54 |  * @param {string|function} key the `url` to fetch
55 |  * @param {function?} fetcher a function to fetch the `url`
56 |  * @param {object?} options a configuration object
57 |  */
58 | const useSWR = (key, fetcher, options) => {
59 |   const path = typeof key === 'function' ? key() : key;
60 |   if (typeof fetcher === 'object') {
61 |     options = fetcher;
62 |     fetcher = null;
63 |   }
64 |   if (!options)
65 |     options = {};
66 |   if (!fetcher)
67 |     fetcher = options.fetcher || defaultFetcher;
68 |   const [data, update] = useState(options.initialData);
69 |   const ref = useRef(null);
70 |   if (!ref.current || path !== ref.current)
71 |     fetcher(ref.current = path).then(update, update);
72 |   const isError = data instanceof Error;
73 |   return {
74 |     data: isError ? null : data,
75 |     error: isError ? data : null
76 |   };
77 | };
78 | exports.useSWR = useSWR;
79 | 
80 | /**
81 |  * A simplified version of React `useDebugValue`
82 |  * @param {any} data data to show
83 |  * @param {function?} callback callback to transform data
84 |  */
85 | const useDebugValue = (data, callback = data => data) => {
86 |   console.log('%cµhooks:', 'font-weight:bold', callback(data));
87 | };
88 | exports.useDebugValue = useDebugValue;
89 | 


--------------------------------------------------------------------------------
/cjs/hooks.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | let info = null, schedule = new Set;
 3 | 
 4 | const invoke = effect => {
 5 |   const {$, r, h} = effect;
 6 |   if (isFunction(r)) {
 7 |     fx.get(h).delete(effect);
 8 |     r();
 9 |   }
10 |   if (isFunction(effect.r = $()))
11 |     fx.get(h).add(effect);
12 | };
13 | 
14 | const runSchedule = () => {
15 |   const previous = schedule;
16 |   schedule = new Set;
17 |   previous.forEach(({h, c, a, e}) => {
18 |     // avoid running schedules when the hook is
19 |     // re-executed before such schedule happens
20 |     if (e)
21 |       h.apply(c, a);
22 |   });
23 | };
24 | 
25 | const fx = new WeakMap;
26 | exports.fx = fx;
27 | const effects = [];
28 | exports.effects = effects;
29 | const layoutEffects = [];
30 | exports.layoutEffects = layoutEffects;
31 | 
32 | function different(value, i) {
33 |   return value !== this[i];
34 | }
35 | exports.different = different;
36 | 
37 | const dropEffect = hook => {
38 |   const effects = fx.get(hook);
39 |   if (effects)
40 |     wait.then(() => {
41 |       effects.forEach(effect => {
42 |         effect.r();
43 |         effect.r = null;
44 |         effect.d = true;
45 |       });
46 |       effects.clear();
47 |     });
48 | };
49 | exports.dropEffect = dropEffect;
50 | 
51 | const getInfo = () => info;
52 | exports.getInfo = getInfo;
53 | 
54 | const hasEffect = hook => fx.has(hook);
55 | exports.hasEffect = hasEffect;
56 | 
57 | const isFunction = f => typeof f === 'function';
58 | exports.isFunction = isFunction;
59 | 
60 | const hooked = callback => {
61 |   const current = {h: hook, c: null, a: null, e: 0, i: 0, s: []};
62 |   return hook;
63 |   function hook() {
64 |     const prev = info;
65 |     info = current;
66 |     current.e = current.i = 0;
67 |     try {
68 |       return callback.apply(current.c = this, current.a = arguments);
69 |     }
70 |     finally {
71 |       info = prev;
72 |       if (effects.length)
73 |         wait.then(effects.forEach.bind(effects.splice(0), invoke));
74 |       if (layoutEffects.length)
75 |         layoutEffects.splice(0).forEach(invoke);
76 |     }
77 |   }
78 | };
79 | exports.hooked = hooked;
80 | 
81 | const reschedule = info => {
82 |   if (!schedule.has(info)) {
83 |     info.e = 1;
84 |     schedule.add(info);
85 |     wait.then(runSchedule);
86 |   }
87 | };
88 | exports.reschedule = reschedule;
89 | 
90 | const wait = Promise.resolve();
91 | exports.wait = wait;
92 | 


--------------------------------------------------------------------------------
/cjs/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*! (c) Andrea Giammarchi - ISC */
 3 | 
 4 | (m => {
 5 |   exports.hooked = m.hooked;
 6 |   exports.wait = m.wait;
 7 |   exports.dropEffect = m.dropEffect;
 8 |   exports.hasEffect = m.hasEffect;
 9 | })(require('./hooks.js'));
10 | (m => {
11 |   exports.createContext = m.createContext;
12 |   exports.useContext = m.useContext;
13 | })(require('./context.js'));
14 | (m => {
15 |   exports.useCallback = m.useCallback;
16 |   exports.useMemo = m.useMemo;
17 | })(require('./memo.js'));
18 | (m => {
19 |   exports.useEffect = m.useEffect;
20 |   exports.useLayoutEffect = m.useLayoutEffect;
21 | })(require('./effect.js'));
22 | (m => {
23 |   exports.useReducer = m.useReducer;
24 |   exports.useState = m.useState;
25 | })(require('./reducer.js'));
26 | (m => {
27 |   exports.useRef = m.useRef;
28 | })(require('./ref.js'));
29 | 


--------------------------------------------------------------------------------
/cjs/memo.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {different, getInfo} = require('./hooks.js');
 3 | 
 4 | const useCallback = (fn, guards) => useMemo(() => fn, guards);
 5 | exports.useCallback = useCallback;
 6 | 
 7 | const useMemo = (memo, guards) => {
 8 |   const info = getInfo();
 9 |   const {i, s} = info;
10 |   if (i === s.length || !guards || guards.some(different, s[i]._))
11 |     s[i] = {$: memo(), _: guards};
12 |   return s[info.i++].$;
13 | };
14 | exports.useMemo = useMemo;
15 | 


--------------------------------------------------------------------------------
/cjs/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/cjs/reducer.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {getInfo, isFunction, reschedule} = require('./hooks.js');
 3 | 
 4 | const getValue = (value, f) => isFunction(f) ? f(value) : f;
 5 | 
 6 | const useReducer = (reducer, value, init) => {
 7 |   const info = getInfo();
 8 |   const {i, s} = info;
 9 |   if (i === s.length)
10 |     s.push({
11 |       $: isFunction(init) ?
12 |           init(value) : getValue(void 0, value),
13 |       set: value => {
14 |         s[i].$ = reducer(s[i].$, value);
15 |         reschedule(info);
16 |       }
17 |     });
18 |   const {$, set} = s[info.i++];
19 |   return [$, set];
20 | };
21 | exports.useReducer = useReducer;
22 | 
23 | const useState = value => useReducer(getValue, value);
24 | exports.useState = useState;
25 | 


--------------------------------------------------------------------------------
/cjs/ref.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const {getInfo} = require('./hooks.js');
 3 | 
 4 | const useRef = current => {
 5 |   const info = getInfo();
 6 |   const {i, s} = info;
 7 |   if (i === s.length)
 8 |     s.push({current});
 9 |   return s[info.i++];
10 | };
11 | exports.useRef = useRef;
12 | 


--------------------------------------------------------------------------------
/e.js:
--------------------------------------------------------------------------------
 1 | /*! (c) Andrea Giammarchi - ISC */
 2 | const uhooks = ((h, o, O, K) => ({
 3 |   hooked: f => {
 4 |     const k = {i: 0, s: []};
 5 |     return function H() {
 6 |       const p = h, r = o, e = O, v = K;
 7 |       h = H; o = this; O = arguments; K = k;
 8 |       K.i = 0;
 9 |       try { return f.apply(o, O); }
10 |       finally {
11 |         h = p; o = r; O = e; K = v;
12 |       }
13 |     };
14 |   },
15 |   useRef: current => {
16 |     if (K.i == K.s.length)
17 |       K.s.push({current: current});
18 |     return K.s[K.i++];
19 |   },
20 |   useState: value => {
21 |     const y = h, u = o, p = O, i = K.i, s = K.s;
22 |     if (i == s.length)
23 |       s.push(value);
24 |     return [
25 |       s[K.i++],
26 |       value => {
27 |         s[i] = value;
28 |         y.apply(u, p);
29 |       }
30 |     ];
31 |   }
32 | }))();
33 | 
34 | const hooked = uhooks.hooked;
35 | const useRef = uhooks.useRef;
36 | const useState = uhooks.useState;
37 | 


--------------------------------------------------------------------------------
/es.js:
--------------------------------------------------------------------------------
1 | self.uhooks=function(e){"use strict";let t=null,n=new Set;const s=e=>{const{$:t,r:n,h:s}=e;l(n)&&(o.get(s).delete(e),n()),l(e.r=t())&&o.get(s).add(e)},c=()=>{const e=n;n=new Set,e.forEach((({h:e,c:t,a:n,e:s})=>{s&&e.apply(t,n)}))},o=new WeakMap,u=[],r=[];function a(e,t){return e!==this[t]}const h=()=>t,l=e=>"function"==typeof e,i=Promise.resolve();function f(e){const{_:t,value:n}=this;n!==e&&(this._=new Set,this.value=e,t.forEach((({h:e,c:t,a:n})=>{e.apply(t,n)})))}const d=(e,t)=>{const n=h(),{i:s,s:c}=n;return s!==c.length&&t&&!t.some(a,c[s]._)||(c[s]={$:e(),_:t}),c[n.i++].$},p=e=>(t,n)=>{const s=h(),{i:c,s:u,h:r}=s,l=c===u.length;s.i++,l&&(o.has(r)||o.set(r,new Set),u[c]={$:t,_:n,r:null,d:!1,h:r}),(l||!n||u[c].d||n.some(a,u[c]._))&&e.push(u[c]),u[c].$=t,u[c]._=n,u[c].d=!1},g=p(u),E=p(r),$=(e,t)=>l(t)?t(e):t,_=(e,t,s)=>{const o=h(),{i:u,s:r}=o;u===r.length&&r.push({$:l(s)?s(t):$(void 0,t),set:t=>{r[u].$=e(r[u].$,t),(e=>{n.has(e)||(e.e=1,n.add(e),i.then(c))})(o)}});const{$:a,set:f}=r[o.i++];return[a,f]};return e.createContext=e=>({_:new Set,provide:f,value:e}),e.dropEffect=e=>{const t=o.get(e);t&&i.then((()=>{t.forEach((e=>{e.r(),e.r=null,e.d=!0})),t.clear()}))},e.hasEffect=e=>o.has(e),e.hooked=e=>{const n={h:c,c:null,a:null,e:0,i:0,s:[]};return c;function c(){const c=t;t=n,n.e=n.i=0;try{return e.apply(n.c=this,n.a=arguments)}finally{t=c,u.length&&i.then(u.forEach.bind(u.splice(0),s)),r.length&&r.splice(0).forEach(s)}}},e.useCallback=(e,t)=>d((()=>e),t),e.useContext=({_:e,value:t})=>(e.add(h()),t),e.useEffect=g,e.useLayoutEffect=E,e.useMemo=d,e.useReducer=_,e.useRef=e=>{const t=h(),{i:n,s:s}=t;return n===s.length&&s.push({current:e}),s[t.i++]},e.useState=e=>_($,e),e.wait=i,e}({});
2 | 


--------------------------------------------------------------------------------
/esm.js:
--------------------------------------------------------------------------------
1 | let e=null,t=new Set;const n=e=>{const{$:t,r:n,h:s}=e;u(n)&&(c.get(s).delete(e),n()),u(e.r=t())&&c.get(s).add(e)},s=()=>{const e=t;t=new Set,e.forEach((({h:e,c:t,a:n,e:s})=>{s&&e.apply(t,n)}))},c=new WeakMap,h=[],l=[];function o(e,t){return e!==this[t]}const r=e=>{const t=c.get(e);t&&d.then((()=>{t.forEach((e=>{e.r(),e.r=null,e.d=!0})),t.clear()}))},a=()=>e,i=e=>c.has(e),u=e=>"function"==typeof e,p=t=>{const s={h:c,c:null,a:null,e:0,i:0,s:[]};return c;function c(){const c=e;e=s,s.e=s.i=0;try{return t.apply(s.c=this,s.a=arguments)}finally{e=c,h.length&&d.then(h.forEach.bind(h.splice(0),n)),l.length&&l.splice(0).forEach(n)}}},d=Promise.resolve(),f=e=>({_:new Set,provide:$,value:e}),g=({_:e,value:t})=>(e.add(a()),t);function $(e){const{_:t,value:n}=this;n!==e&&(this._=new Set,this.value=e,t.forEach((({h:e,c:t,a:n})=>{e.apply(t,n)})))}const _=(e,t)=>v((()=>e),t),v=(e,t)=>{const n=a(),{i:s,s:c}=n;return s!==c.length&&t&&!t.some(o,c[s]._)||(c[s]={$:e(),_:t}),c[n.i++].$},w=e=>(t,n)=>{const s=a(),{i:h,s:l,h:r}=s,i=h===l.length;s.i++,i&&(c.has(r)||c.set(r,new Set),l[h]={$:t,_:n,r:null,d:!1,h:r}),(i||!n||l[h].d||n.some(o,l[h]._))&&e.push(l[h]),l[h].$=t,l[h]._=n,l[h].d=!1},y=w(h),E=w(l),S=(e,t)=>u(t)?t(e):t,m=(e,n,c)=>{const h=a(),{i:l,s:o}=h;l===o.length&&o.push({$:u(c)?c(n):S(void 0,n),set:n=>{o[l].$=e(o[l].$,n),(e=>{t.has(e)||(e.e=1,t.add(e),d.then(s))})(h)}});const{$:r,set:i}=o[h.i++];return[r,i]},b=e=>m(S,e),k=e=>{const t=a(),{i:n,s:s}=t;return n===s.length&&s.push({current:e}),s[t.i++]};export{f as createContext,r as dropEffect,i as hasEffect,p as hooked,_ as useCallback,g as useContext,y as useEffect,E as useLayoutEffect,v as useMemo,m as useReducer,k as useRef,b as useState,d as wait};
2 | 


--------------------------------------------------------------------------------
/esm/async.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   hooked as $hooked,
 3 |   dropEffect as $dropEffect,
 4 |   hasEffect as $hasEffect
 5 | } from './hooks.js';
 6 | 
 7 | const hooks = new WeakMap;
 8 | 
 9 | export const dropEffect = hook => $dropEffect(hooks.get(hook));
10 | 
11 | export const hasEffect = hook => $hasEffect(hooks.get(hook));
12 | 
13 | export const hooked = callback => {
14 |   const $hook = $hooked(callback);
15 |   hooks.set(hook, $hook);
16 |   return hook;
17 |   async function hook() {
18 |     return await $hook.apply(this, arguments);
19 |   }
20 | };
21 | 
22 | export {
23 |   wait,
24 |   createContext, useContext,
25 |   useCallback, useMemo,
26 |   useEffect, useLayoutEffect,
27 |   useReducer, useState,
28 |   useRef
29 | } from './index.js';
30 | 


--------------------------------------------------------------------------------
/esm/context.js:
--------------------------------------------------------------------------------
 1 | import {getInfo} from './hooks.js';
 2 | 
 3 | export const createContext = value => ({
 4 |   _: new Set,
 5 |   provide,
 6 |   value
 7 | });
 8 | 
 9 | export const useContext = ({_, value}) => {
10 |   _.add(getInfo());
11 |   return value;
12 | };
13 | 
14 | function provide(newValue) {
15 |   const {_, value} = this;
16 |   if (value !== newValue) {
17 |     this._ = new Set;
18 |     this.value = newValue;
19 |     _.forEach(({h, c, a}) => {
20 |       h.apply(c, a);
21 |     });
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/esm/e.js:
--------------------------------------------------------------------------------
 1 | /*! (c) Andrea Giammarchi - ISC */
 2 | const uhooks = ((h, o, O, K) => ({
 3 |   hooked: f => {
 4 |     const k = {i: 0, s: []};
 5 |     return function H() {
 6 |       // const [p, r, e, v] = [h, o, O, K];
 7 |       // [h, o, O, K] = [H, this, arguments, k];
 8 |       const p = h, r = o, e = O, v = K;
 9 |       h = H; o = this; O = arguments; K = k;
10 |       K.i = 0;
11 |       try { return f.apply(o, O); }
12 |       finally {
13 |         h = p; o = r; O = e; K = v;
14 |         // [h, o, O, K] = [p, r, e, v];
15 |       }
16 |     };
17 |   },
18 |   useRef: current => {
19 |     // const {i, s} = K;
20 |     if (K.i == K.s.length)
21 |       K.s.push({current: current});
22 |     return K.s[K.i++];
23 |   },
24 |   useState: value => {
25 |     // const [y, u, p, {i, s}] = [h, o, O, K];
26 |     const y = h, u = o, p = O, i = K.i, s = K.s;
27 |     if (i == s.length)
28 |       s.push(value);
29 |     return [
30 |       s[K.i++],
31 |       value => {
32 |         s[i] = value;
33 |         y.apply(u, p);
34 |       }
35 |     ];
36 |   }
37 | }))();
38 | 
39 | const hooked = uhooks.hooked;
40 | const useRef = uhooks.useRef;
41 | const useState = uhooks.useState;
42 | 
43 | export {hooked, useState, useRef};
44 | 


--------------------------------------------------------------------------------
/esm/effect.js:
--------------------------------------------------------------------------------
 1 | import {fx, effects, layoutEffects, different, getInfo} from './hooks.js';
 2 | 
 3 | const createEffect = stack => (callback, guards) => {
 4 |   const info = getInfo();
 5 |   const {i, s, h} = info;
 6 |   const call = i === s.length;
 7 |   info.i++;
 8 |   if (call) {
 9 |     if (!fx.has(h))
10 |       fx.set(h, new Set);
11 |     s[i] = {$: callback, _: guards, r: null, d: false, h};
12 |   }
13 |   if (call || !guards || s[i].d || guards.some(different, s[i]._))
14 |     stack.push(s[i]);
15 |   s[i].$ = callback;
16 |   s[i]._ = guards;
17 |   s[i].d = false;
18 | };
19 | 
20 | export const useEffect = createEffect(effects);
21 | 
22 | export const useLayoutEffect = createEffect(layoutEffects);
23 | 


--------------------------------------------------------------------------------
/esm/extras.js:
--------------------------------------------------------------------------------
 1 | /*! (c) Andrea Giammarchi - ISC */
 2 | 
 3 | import {useMemo} from './memo.js';
 4 | import {useLayoutEffect} from './effect.js';
 5 | import {useState} from './reducer.js';
 6 | import {useRef} from './ref.js';
 7 | 
 8 | /**
 9 |  * Persist the same reference while updating its current value.
10 |  * @param {any} value
11 |  * @returns {object} An always-same reference.
12 |  */
13 | export const useUpdatedRef = value => {
14 |   const ref = useRef(value);
15 |   ref.current = value;
16 |   return ref;
17 | };
18 | 
19 | /**
20 |  * Given a `MutationObserverInit` object with two extra properties,
21 |  * such as `mutations(records){}`, and an optional `ref` to recycle,
22 |  * observes the reference on layout effect and invokes `mutations`.
23 |  * @param {MutationObserverInit} options
24 |  * @returns {object} An always-same reference.
25 |  */
26 | export const useMutationObserver = options => {
27 |   const fn = useUpdatedRef(options.mutations);
28 |   const ref = options.ref || useRef(null);
29 |   const _ = [];
30 |   const mo = useMemo(
31 |     () => new MutationObserver(
32 |       records => { fn.current(records); }
33 |     ),
34 |     _
35 |   );
36 |   useLayoutEffect(
37 |     () => {
38 |       mo.observe(ref.current, options);
39 |       return () => { mo.disconnect(); };
40 |     },
41 |     _
42 |   );
43 |   return ref;
44 | };
45 | 
46 | const defaultFetcher = url => fetch(url).then(res => res.json());
47 | 
48 | /**
49 |  * A simplified version of the vercel useSWR
50 |  * @see https://github.com/vercel/swr
51 |  * @param {string|function} key the `url` to fetch
52 |  * @param {function?} fetcher a function to fetch the `url`
53 |  * @param {object?} options a configuration object
54 |  */
55 | export const useSWR = (key, fetcher, options) => {
56 |   const path = typeof key === 'function' ? key() : key;
57 |   if (typeof fetcher === 'object') {
58 |     options = fetcher;
59 |     fetcher = null;
60 |   }
61 |   if (!options)
62 |     options = {};
63 |   if (!fetcher)
64 |     fetcher = options.fetcher || defaultFetcher;
65 |   const [data, update] = useState(options.initialData);
66 |   const ref = useRef(null);
67 |   if (!ref.current || path !== ref.current)
68 |     fetcher(ref.current = path).then(update, update);
69 |   const isError = data instanceof Error;
70 |   return {
71 |     data: isError ? null : data,
72 |     error: isError ? data : null
73 |   };
74 | };
75 | 
76 | /**
77 |  * A simplified version of React `useDebugValue`
78 |  * @param {any} data data to show
79 |  * @param {function?} callback callback to transform data
80 |  */
81 | export const useDebugValue = (data, callback = data => data) => {
82 |   console.log('%cµhooks:', 'font-weight:bold', callback(data));
83 | };
84 | 


--------------------------------------------------------------------------------
/esm/hooks.js:
--------------------------------------------------------------------------------
 1 | let info = null, schedule = new Set;
 2 | 
 3 | const invoke = effect => {
 4 |   const {$, r, h} = effect;
 5 |   if (isFunction(r)) {
 6 |     fx.get(h).delete(effect);
 7 |     r();
 8 |   }
 9 |   if (isFunction(effect.r = $()))
10 |     fx.get(h).add(effect);
11 | };
12 | 
13 | const runSchedule = () => {
14 |   const previous = schedule;
15 |   schedule = new Set;
16 |   previous.forEach(({h, c, a, e}) => {
17 |     // avoid running schedules when the hook is
18 |     // re-executed before such schedule happens
19 |     if (e)
20 |       h.apply(c, a);
21 |   });
22 | };
23 | 
24 | export const fx = new WeakMap;
25 | export const effects = [];
26 | export const layoutEffects = [];
27 | 
28 | export function different(value, i) {
29 |   return value !== this[i];
30 | };
31 | 
32 | export const dropEffect = hook => {
33 |   const effects = fx.get(hook);
34 |   if (effects)
35 |     wait.then(() => {
36 |       effects.forEach(effect => {
37 |         effect.r();
38 |         effect.r = null;
39 |         effect.d = true;
40 |       });
41 |       effects.clear();
42 |     });
43 | };
44 | 
45 | export const getInfo = () => info;
46 | 
47 | export const hasEffect = hook => fx.has(hook);
48 | 
49 | export const isFunction = f => typeof f === 'function';
50 | 
51 | export const hooked = callback => {
52 |   const current = {h: hook, c: null, a: null, e: 0, i: 0, s: []};
53 |   return hook;
54 |   function hook() {
55 |     const prev = info;
56 |     info = current;
57 |     current.e = current.i = 0;
58 |     try {
59 |       return callback.apply(current.c = this, current.a = arguments);
60 |     }
61 |     finally {
62 |       info = prev;
63 |       if (effects.length)
64 |         wait.then(effects.forEach.bind(effects.splice(0), invoke));
65 |       if (layoutEffects.length)
66 |         layoutEffects.splice(0).forEach(invoke);
67 |     }
68 |   }
69 | };
70 | 
71 | export const reschedule = info => {
72 |   if (!schedule.has(info)) {
73 |     info.e = 1;
74 |     schedule.add(info);
75 |     wait.then(runSchedule);
76 |   }
77 | };
78 | 
79 | export const wait = Promise.resolve();
80 | 


--------------------------------------------------------------------------------
/esm/index.js:
--------------------------------------------------------------------------------
1 | /*! (c) Andrea Giammarchi - ISC */
2 | 
3 | export {hooked, wait, dropEffect, hasEffect} from './hooks.js';
4 | export {createContext, useContext} from './context.js';
5 | export {useCallback, useMemo} from './memo.js';
6 | export {useEffect, useLayoutEffect} from './effect.js';
7 | export {useReducer, useState} from './reducer.js';
8 | export {useRef} from './ref.js';
9 | 


--------------------------------------------------------------------------------
/esm/memo.js:
--------------------------------------------------------------------------------
 1 | import {different, getInfo} from './hooks.js';
 2 | 
 3 | export const useCallback = (fn, guards) => useMemo(() => fn, guards);
 4 | 
 5 | export const useMemo = (memo, guards) => {
 6 |   const info = getInfo();
 7 |   const {i, s} = info;
 8 |   if (i === s.length || !guards || guards.some(different, s[i]._))
 9 |     s[i] = {$: memo(), _: guards};
10 |   return s[info.i++].$;
11 | };
12 | 


--------------------------------------------------------------------------------
/esm/reducer.js:
--------------------------------------------------------------------------------
 1 | import {getInfo, isFunction, reschedule} from './hooks.js';
 2 | 
 3 | const getValue = (value, f) => isFunction(f) ? f(value) : f;
 4 | 
 5 | export const useReducer = (reducer, value, init) => {
 6 |   const info = getInfo();
 7 |   const {i, s} = info;
 8 |   if (i === s.length)
 9 |     s.push({
10 |       $: isFunction(init) ?
11 |           init(value) : getValue(void 0, value),
12 |       set: value => {
13 |         s[i].$ = reducer(s[i].$, value);
14 |         reschedule(info);
15 |       }
16 |     });
17 |   const {$, set} = s[info.i++];
18 |   return [$, set];
19 | };
20 | 
21 | export const useState = value => useReducer(getValue, value);
22 | 


--------------------------------------------------------------------------------
/esm/ref.js:
--------------------------------------------------------------------------------
 1 | import {getInfo} from './hooks.js';
 2 | 
 3 | export const useRef = current => {
 4 |   const info = getInfo();
 5 |   const {i, s} = info;
 6 |   if (i === s.length)
 7 |     s.push({current});
 8 |   return s[info.i++];
 9 | };
10 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | self.uhooks = (function (exports) {
  2 |   'use strict';
  3 | 
  4 |   let info = null, schedule = new Set;
  5 | 
  6 |   const invoke = effect => {
  7 |     const {$, r, h} = effect;
  8 |     if (isFunction(r)) {
  9 |       fx.get(h).delete(effect);
 10 |       r();
 11 |     }
 12 |     if (isFunction(effect.r = $()))
 13 |       fx.get(h).add(effect);
 14 |   };
 15 | 
 16 |   const runSchedule = () => {
 17 |     const previous = schedule;
 18 |     schedule = new Set;
 19 |     previous.forEach(({h, c, a, e}) => {
 20 |       // avoid running schedules when the hook is
 21 |       // re-executed before such schedule happens
 22 |       if (e)
 23 |         h.apply(c, a);
 24 |     });
 25 |   };
 26 | 
 27 |   const fx = new WeakMap;
 28 |   const effects = [];
 29 |   const layoutEffects = [];
 30 | 
 31 |   function different(value, i) {
 32 |     return value !== this[i];
 33 |   }
 34 |   const dropEffect = hook => {
 35 |     const effects = fx.get(hook);
 36 |     if (effects)
 37 |       wait.then(() => {
 38 |         effects.forEach(effect => {
 39 |           effect.r();
 40 |           effect.r = null;
 41 |           effect.d = true;
 42 |         });
 43 |         effects.clear();
 44 |       });
 45 |   };
 46 | 
 47 |   const getInfo = () => info;
 48 | 
 49 |   const hasEffect = hook => fx.has(hook);
 50 | 
 51 |   const isFunction = f => typeof f === 'function';
 52 | 
 53 |   const hooked = callback => {
 54 |     const current = {h: hook, c: null, a: null, e: 0, i: 0, s: []};
 55 |     return hook;
 56 |     function hook() {
 57 |       const prev = info;
 58 |       info = current;
 59 |       current.e = current.i = 0;
 60 |       try {
 61 |         return callback.apply(current.c = this, current.a = arguments);
 62 |       }
 63 |       finally {
 64 |         info = prev;
 65 |         if (effects.length)
 66 |           wait.then(effects.forEach.bind(effects.splice(0), invoke));
 67 |         if (layoutEffects.length)
 68 |           layoutEffects.splice(0).forEach(invoke);
 69 |       }
 70 |     }
 71 |   };
 72 | 
 73 |   const reschedule = info => {
 74 |     if (!schedule.has(info)) {
 75 |       info.e = 1;
 76 |       schedule.add(info);
 77 |       wait.then(runSchedule);
 78 |     }
 79 |   };
 80 | 
 81 |   const wait = Promise.resolve();
 82 | 
 83 |   const createContext = value => ({
 84 |     _: new Set,
 85 |     provide,
 86 |     value
 87 |   });
 88 | 
 89 |   const useContext = ({_, value}) => {
 90 |     _.add(getInfo());
 91 |     return value;
 92 |   };
 93 | 
 94 |   function provide(newValue) {
 95 |     const {_, value} = this;
 96 |     if (value !== newValue) {
 97 |       this._ = new Set;
 98 |       this.value = newValue;
 99 |       _.forEach(({h, c, a}) => {
100 |         h.apply(c, a);
101 |       });
102 |     }
103 |   }
104 | 
105 |   const useCallback = (fn, guards) => useMemo(() => fn, guards);
106 | 
107 |   const useMemo = (memo, guards) => {
108 |     const info = getInfo();
109 |     const {i, s} = info;
110 |     if (i === s.length || !guards || guards.some(different, s[i]._))
111 |       s[i] = {$: memo(), _: guards};
112 |     return s[info.i++].$;
113 |   };
114 | 
115 |   const createEffect = stack => (callback, guards) => {
116 |     const info = getInfo();
117 |     const {i, s, h} = info;
118 |     const call = i === s.length;
119 |     info.i++;
120 |     if (call) {
121 |       if (!fx.has(h))
122 |         fx.set(h, new Set);
123 |       s[i] = {$: callback, _: guards, r: null, d: false, h};
124 |     }
125 |     if (call || !guards || s[i].d || guards.some(different, s[i]._))
126 |       stack.push(s[i]);
127 |     s[i].$ = callback;
128 |     s[i]._ = guards;
129 |     s[i].d = false;
130 |   };
131 | 
132 |   const useEffect = createEffect(effects);
133 | 
134 |   const useLayoutEffect = createEffect(layoutEffects);
135 | 
136 |   const getValue = (value, f) => isFunction(f) ? f(value) : f;
137 | 
138 |   const useReducer = (reducer, value, init) => {
139 |     const info = getInfo();
140 |     const {i, s} = info;
141 |     if (i === s.length)
142 |       s.push({
143 |         $: isFunction(init) ?
144 |             init(value) : getValue(void 0, value),
145 |         set: value => {
146 |           s[i].$ = reducer(s[i].$, value);
147 |           reschedule(info);
148 |         }
149 |       });
150 |     const {$, set} = s[info.i++];
151 |     return [$, set];
152 |   };
153 | 
154 |   const useState = value => useReducer(getValue, value);
155 | 
156 |   const useRef = current => {
157 |     const info = getInfo();
158 |     const {i, s} = info;
159 |     if (i === s.length)
160 |       s.push({current});
161 |     return s[info.i++];
162 |   };
163 | 
164 |   exports.createContext = createContext;
165 |   exports.dropEffect = dropEffect;
166 |   exports.hasEffect = hasEffect;
167 |   exports.hooked = hooked;
168 |   exports.useCallback = useCallback;
169 |   exports.useContext = useContext;
170 |   exports.useEffect = useEffect;
171 |   exports.useLayoutEffect = useLayoutEffect;
172 |   exports.useMemo = useMemo;
173 |   exports.useReducer = useReducer;
174 |   exports.useRef = useRef;
175 |   exports.useState = useState;
176 |   exports.wait = wait;
177 | 
178 |   return exports;
179 | 
180 | })({});
181 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "uhooks",
 3 |   "version": "0.4.0",
 4 |   "description": "micro hooks: a minimalistic client/server hooks' implementation",
 5 |   "main": "./cjs/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run cjs && npm run espruino && npm run rollup:index && npm run rollup:es && npm run rollup:async && npm run rollup:esm && npm run test && npm run size",
 8 |     "cjs": "ascjs --no-default esm cjs",
 9 |     "espruino": "node -e 'console.log(require(`fs`).readFileSync(`esm/e.js`).toString().replace(/^ *\\/\\/.*\\n/gm,``).replace(/export.*/,``).trim())'>e.js",
10 |     "rollup:async": "rollup --config rollup/async.config.js && sed -i.bck 's/^var /self./' async.js && rm -rf async.js.bck",
11 |     "rollup:esm": "rollup --config rollup/esm.config.js",
12 |     "rollup:es": "rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck",
13 |     "rollup:index": "rollup --config rollup/index.config.js && sed -i.bck 's/^var /self./' index.js && rm -rf index.js.bck",
14 |     "coveralls": "c8 report --reporter=text-lcov | coveralls",
15 |     "size": "echo 'async ES6' && cat async.js | brotli | wc -c && echo '' && echo 'sync ESM / ES6' && cat esm.js | brotli | wc -c && cat es.js | brotli | wc -c && echo '' && echo 'espruino' && cat e.js | brotli | wc -c",
16 |     "test": "c8 node test/e.js && c8 node test/index.js"
17 |   },
18 |   "keywords": [
19 |     "hooks",
20 |     "lightweight",
21 |     "minimal",
22 |     "client",
23 |     "server"
24 |   ],
25 |   "author": "Andrea Giammarchi",
26 |   "license": "ISC",
27 |   "devDependencies": {
28 |     "@rollup/plugin-node-resolve": "^13.3.0",
29 |     "@ungap/degap": "^0.2.8",
30 |     "ascjs": "^5.0.1",
31 |     "c8": "^7.11.3",
32 |     "coveralls": "^3.1.1",
33 |     "rollup": "^2.74.1",
34 |     "rollup-plugin-terser": "^7.0.2"
35 |   },
36 |   "module": "./esm/index.js",
37 |   "type": "module",
38 |   "exports": {
39 |     ".": {
40 |       "import": "./esm/index.js",
41 |       "default": "./cjs/index.js"
42 |     },
43 |     "./async": {
44 |       "import": "./esm/async.js",
45 |       "default": "./cjs/async.js"
46 |     },
47 |     "./e": {
48 |       "import": "./esm/e.js",
49 |       "default": "./cjs/e.js"
50 |     },
51 |     "./extras": {
52 |       "import": "./esm/extras.js",
53 |       "default": "./cjs/extras.js"
54 |     },
55 |     "./package.json": "./package.json"
56 |   },
57 |   "unpkg": "esm.js",
58 |   "repository": {
59 |     "type": "git",
60 |     "url": "git+https://github.com/WebReflection/uhooks.git"
61 |   },
62 |   "bugs": {
63 |     "url": "https://github.com/WebReflection/uhooks/issues"
64 |   },
65 |   "homepage": "https://github.com/WebReflection/uhooks#readme"
66 | }
67 | 


--------------------------------------------------------------------------------
/rollup/async.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | 
 4 | export default {
 5 |   input: './esm/async.js',
 6 |   plugins: [
 7 |     nodeResolve(),
 8 |     terser()
 9 |   ],
10 |   output: {
11 |     esModule: false,
12 |     exports: 'named',
13 |     file: './async.js',
14 |     format: 'iife',
15 |     name: 'uhooks'
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/rollup/es.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     nodeResolve(),
 8 |     terser()
 9 |   ],
10 |   output: {
11 |     esModule: false,
12 |     exports: 'named',
13 |     file: './es.js',
14 |     format: 'iife',
15 |     name: 'uhooks'
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/rollup/esm.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     nodeResolve(),
 8 |     terser()
 9 |   ],
10 |   output: {
11 |     file: './esm.js',
12 |     format: 'module'
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/rollup/index.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | 
 3 | export default {
 4 |   input: './esm/index.js',
 5 |   plugins: [
 6 |     nodeResolve()
 7 |   ],
 8 |   output: {
 9 |     esModule: false,
10 |     exports: 'named',
11 |     file: './index.js',
12 |     format: 'iife',
13 |     name: 'uhooks'
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/test/async.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>uhooks</title>
 7 |   <script type="module">
 8 |   import {hooked, createContext, useContext} from '../esm/async.js';
 9 |   
10 |   const context = createContext(false);
11 | 
12 |   const toggle = (element, context) => hooked(async () => {
13 |     const value = await Promise.resolve(useContext(context));
14 |     element.style.background = value ? 'black' : 'white';
15 |   })();
16 | 
17 |   toggle(document.body, context);
18 | 
19 |   button.addEventListener('click', () => {
20 |     context.provide(!context.value);
21 |   });
22 |   </script>
23 | </head>
24 | <body>
25 |   <button id="button">click me</button>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/test/context.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>uhooks</title>
 7 |   <script type="module">
 8 |   import(
 9 |     /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
10 |     '../esm/index.js' :
11 |     'https://unpkg.com/uhooks?module'
12 |   )
13 |   .then(({hooked, createContext, useContext}) => {
14 |     const context = createContext(false);
15 | 
16 |     const toggle = (element, context) => hooked(() => {
17 |       const value = useContext(context);
18 |       element.style.background = value ? 'black' : 'white';
19 |     })();
20 | 
21 |     toggle(document.body, context);
22 | 
23 |     button.addEventListener('click', () => {
24 |       context.provide(!context.value);
25 |     });
26 |   });
27 |   </script>
28 | </head>
29 | <body>
30 |   <button id="button">click me</button>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/test/context.js:
--------------------------------------------------------------------------------
 1 | const {
 2 |   hooked,
 3 |   createContext, useContext,
 4 | } = require('../cjs');
 5 | 
 6 | const ctx = createContext(0);
 7 | 
 8 | const log = () => {
 9 |   console.log(useContext(ctx));
10 | };
11 | 
12 | const log1 = hooked(log);
13 | 
14 | const log2 = hooked(log);
15 | 
16 | log1();
17 | log2();
18 | 
19 | setTimeout(() => {
20 |   ctx.provide(1);
21 | });
22 | 


--------------------------------------------------------------------------------
/test/e.js:
--------------------------------------------------------------------------------
 1 | const {hooked, useState, useRef} = require('../cjs/e');
 2 | 
 3 | const context = new Set;
 4 | const args = new Set;
 5 | const driver = {};
 6 | 
 7 | const test = hooked(function () {
 8 |   context.add(this);
 9 |   args.add(arguments);
10 |   const [state1, update1] = useState(1);
11 |   const [state2, update2] = useState(2);
12 |   const ref1 = useRef(1);
13 |   const ref2 = useRef(2);
14 |   driver.states = [
15 |     [state1, update1],
16 |     [state2, update2]
17 |   ];
18 |   driver.refs = [
19 |     ref1,
20 |     ref2
21 |   ];
22 | });
23 | 
24 | test.call(Object, 1, 2, 3);
25 | 
26 | console.assert([...context][0] === Object, 'unexpected context');
27 | console.assert([].slice.call([...args][0]).join(',') === '1,2,3', 'unexpected arguments');
28 | 
29 | console.assert(driver.states[0][0] === 1);
30 | console.assert(driver.states[1][0] === 2);
31 | console.assert(driver.refs[0].current === 1);
32 | console.assert(driver.refs[1].current === 2);
33 | 
34 | driver.refs[1].current = 3;
35 | driver.states[1][1](3);
36 | 
37 | console.assert(driver.states[0][0] === 1);
38 | console.assert(driver.states[1][0] === 3);
39 | console.assert(driver.refs[0].current === 1);
40 | console.assert(driver.refs[1].current === 3);
41 | 
42 | console.assert(context.size === 1);
43 | console.assert(args.size === 2);
44 | 
45 | driver.refs[0].current = 2;
46 | driver.states[0][1](2);
47 | 
48 | console.assert(driver.states[0][0] === 2);
49 | console.assert(driver.states[1][0] === 3);
50 | console.assert(driver.refs[0].current === 2);
51 | console.assert(driver.refs[1].current === 3);
52 | 
53 | console.assert(context.size === 1);
54 | console.assert(args.size === 3);
55 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
  1 | const {
  2 |   hooked,
  3 |   hasEffect, dropEffect,
  4 |   createContext, useContext,
  5 |   useCallback, useMemo,
  6 |   useEffect, useLayoutEffect,
  7 |   useReducer, useState,
  8 |   useRef
  9 | } = require('../cjs');
 10 | 
 11 | const Counter = (start) => {
 12 |   const [count, setCount] = useState(start);
 13 |   const {current} = useRef({});
 14 |   current.increment = () => {
 15 |     setCount(count + 1);
 16 |   };
 17 |   console.log(count);
 18 |   return current;
 19 | };
 20 | 
 21 | const comp = hooked(Counter)(1);
 22 | comp.increment();
 23 | 
 24 | (async () => {
 25 | 
 26 |   let test = function () {
 27 |     console.assert(arguments.length === 1 && arguments[0] === 123);
 28 |     console.assert(this == 1);
 29 |   };
 30 |   hooked(test).call(1, 123);
 31 | 
 32 |   test = function () {
 33 |     const [value, update] = useState(0);
 34 |     if (value === 0)
 35 |       update(value + 1);
 36 |     else
 37 |       console.assert(value === 1);
 38 |   };
 39 |   hooked(test)();
 40 | 
 41 |   test = function () {
 42 |     const [value, update] = useState(() => 0);
 43 |     if (value === 0)
 44 |       update(() => value + 2);
 45 |     else
 46 |       console.assert(value === 2);
 47 |   };
 48 |   hooked(test)();
 49 | 
 50 |   test = function () {
 51 |     const [value, update] = useReducer((_, curr) => curr, -1, () => 0);
 52 |     const [other, refresh] = useReducer((_, curr) => curr, -1, () => 0);
 53 |     if (value === 0) {
 54 |       update(value + 1);
 55 |       refresh(other + 2);
 56 |     }
 57 |     else {
 58 |       console.assert(value === 1);
 59 |       console.assert(other === 2);
 60 |     }
 61 |   };
 62 |   hooked(test)();
 63 | 
 64 |   test = function () {
 65 |     const ref = useRef(null);
 66 |     const [value, update] = useState(ref.current);
 67 |     if (value === null)
 68 |       update(ref.current = 123);
 69 |     else
 70 |       console.assert(ref.current === 123);
 71 |   };
 72 |   hooked(test)();
 73 | 
 74 |   test = hooked(function () {
 75 |     const [value, update] = useState(() => 0);
 76 |     let i = 0, y = 1;
 77 |     useLayoutEffect(() => {
 78 |       console.assert(i === 0);
 79 |     });
 80 |     useEffect(() => {
 81 |       return () => {
 82 |         y = 2;
 83 |       };
 84 |     });
 85 |     if (value === 0)
 86 |       update(1);
 87 |   });
 88 |   test();
 89 |   test();
 90 | 
 91 |   let i = 0;
 92 |   test = hooked(function () {
 93 |     const [value, update] = useState(() => 0);
 94 |     useEffect(() => {
 95 |       console.assert(i++ === 0);
 96 |       return () => { console.log('dropEffect'); };
 97 |     }, []);
 98 |     if (value === 0)
 99 |       update(1);
100 |   });
101 |   test();
102 |   console.assert(hasEffect(test));
103 |   dropEffect(test);
104 | 
105 |   test = hooked(function () {
106 |     const [count, setCount] = useState(0);
107 |     const handleCount = useCallback(() => setCount(count + 1), [count]);
108 |     if (count === 0)
109 |       handleCount();
110 |   });
111 |   test();
112 |   dropEffect(test);
113 | 
114 |   test = function () {
115 |     const [count, setCount] = useState(0);
116 |     const handleCount = useCallback(() => setCount(count + 1));
117 |     if (count === 0)
118 |       handleCount();
119 |   };
120 |   hooked(test)();
121 | 
122 |   let ctx = createContext(1);
123 |   test = function () {
124 |     const value = useContext(ctx);
125 |     useEffect(() => {
126 |       if (value === 1) {
127 |         ctx.provide(value + 1);
128 |         ctx.provide(value + 1);
129 |       }
130 |     }, [value]);
131 |   };
132 |   hooked(test)();
133 | 
134 |   test = function () {
135 |     const [count, setCount] = useState(0);
136 |     const current = useMemo(() => count, [count]);
137 |     const future = useMemo(() => count, []);
138 |     if (current === future)
139 |       setCount(current + 1);
140 |   };
141 |   hooked(test)();
142 | })();
143 | 


--------------------------------------------------------------------------------
/test/multi.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <script type="module">
 8 |     import(
 9 |       /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
10 |       '../esm/index.js' :
11 |       'https://unpkg.com/uland?module'
12 |     )
13 |     .then(({hooked, useState}) => {
14 |       const ok = document.createElement('button');
15 |       ok.textContent = 'true';
16 | 
17 |       const nope = document.createElement('button');
18 |       nope.textContent = 'false';
19 | 
20 |       const comp = hooked(() => {
21 |         const [state, setState] = useState(false);
22 | 
23 |         function flipTrue (ev) {
24 |           console.log('flipping to true');
25 |           ev.preventDefault();
26 |           Promise.resolve().then(render);
27 |           setState(true);
28 |         }
29 | 
30 |         function flipFalse (ev) {
31 |           console.log('flipping to false');
32 |           ev.preventDefault();
33 |           Promise.resolve().then(render);
34 |           setState(false);
35 |         }
36 | 
37 |         console.log('state', state);
38 | 
39 |         if (state) {
40 |           ok.onclick = flipFalse;
41 |           return ok;
42 |         }
43 | 
44 |         if (!state) {
45 |           nope.onclick = flipTrue;
46 |           return nope;
47 |         }
48 |       });
49 | 
50 |       const render = () => {
51 |         console.log('rendering');
52 |         document.body.textContent = '';
53 |         document.body.append(comp());
54 |       };
55 | 
56 |       render();
57 | 
58 |     });
59 |     </script>
60 | </head>
61 | <body class="app"></body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/test/timer.js:
--------------------------------------------------------------------------------
 1 | const {hooked, useState, useEffect} = require('../cjs');
 2 | 
 3 | const Counter = hooked(name => {
 4 |   const [count, setCount] = useState(0);
 5 | 
 6 |   useEffect(() => {
 7 |     const time = setTimeout(setCount, 1000, count + 1);
 8 |     return () => clearTimeout(time);
 9 |   }, [count]);
10 | 
11 |   console.log(`${name}: ${count}`);
12 | });
13 | 
14 | Counter('Hit');
15 | 


--------------------------------------------------------------------------------
/uhooks.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WebReflection/uhooks/105eab5b8cc318840095c19c6dd587f0e6433d06/uhooks.jpg


--------------------------------------------------------------------------------