onek - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
@@ -1,2 +0,2 @@ | ||
| var t=require("react"),i=Object.prototype.hasOwnProperty;function n(t){return t.constructor===Object||null===t.constructor}function r(t,r){if(t===r)return!0;if(Array.isArray(t)&&Array.isArray(r)){var s=t.length;if(s!==r.length)return!1;for(;s--;)if(t[s]!==r[s])return!1;return!0}if(t&&r&&"object"==typeof t&&"object"==typeof r&&n(t)&&n(r)){var h=Object.keys(t),o=h.length;if(Object.keys(r).length!==o)return!1;for(;o-- >0;){var u=h[o];if(!i.call(r,u)||t[u]!==r[u])return!1}return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;var f=!0;return t.forEach(function(t){r.has(t)||(f=!1)}),f}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;var e=!0;return t.forEach(function(t,i){r.get(i)!==t&&(e=!1)}),e}return!1}var s=0,h=null,o=[],u=!1,f=[],e=function(t){return t()},c=[],a=!0;function v(t){return function(){var i=h;h=null,++s;try{return t.apply(this,arguments)}finally{h=i,--s||l()}}}function l(){!u&&(f.length||c.length)&&(u=!0,e(p))}function p(){try{for(var t,i=100;f.length||c.length;){for(var n=void 0;n=c.pop();)n.t();for(;f.length&&--i;){var r=f;f=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=o.pop();)t.h()}finally{u=!1,f=[]}}var y=/*#__PURE__*/function(){function t(t,i){this.o=t,this.u=new Set,this.v=i?"function"==typeof i?v(i):r:void 0}var i=t.prototype;return i.l=function(t){this.u.add(t)},i.p=function(t){this.u.delete(t)},i.j=function(){var t=this;this.u.forEach(function(i){return i.j(3,t)}),!s&&l()},i.O=function(t){return void 0===t&&(t=h),t&&t.S(this),this.o},i.g=function(t,i){if(h&&h instanceof d)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.o)),this.v&&this.v(this.o,t))return;this.o=t}this.j()},t}(),d=/*#__PURE__*/function(){function t(t,i){this._=t,this.o=void 0,this.u=new Set,this.m=[],this.A=[],this.M=0,this.v=i?"function"==typeof i?v(i):r:void 0}var i=t.prototype;return i.q=function(){var t=this;this.m.forEach(function(i){return i.p(t)}),this.m=[],this.A=[]},i.R=function(t){var i=this;this.u.forEach(function(n){return n.j(t,i)})},i.S=function(t){t.u.has(this)||(t.u.add(this),this.m.push(t))},i.l=function(t){1!==this.M&&this.t(),this.u.add(t)},i.p=function(t){this.u.delete(t),this.u.size||o.push(this)},i.h=function(){this.u.size||0===this.M||this.k()},i.j=function(t,i){this.M>=t||(this.v?1===this.M&&this.R(2):this.R(t),this.M=t,2===t?this.A.push(i):this.q())},i.t=function(){if(2===this.M&&(this.M=1,this.A.forEach(function(t){t.t()}),this.A=[]),1!==this.M){var t=this.M,i=this.o,n=h,r=a||n;h=r?this:null,this.M=4;try{this.o=this._(),this.M=r?1:0}catch(t){throw this.k(),t}finally{h=n}this.v&&0!==t&&(this.v(i,this.o)?this.o=i:this.R(3))}},i.k=function(){this.M=0,this.o=void 0,this.q()},i.O=function(t){if(void 0===t&&(t=h),4===this.M)throw new Error("recursive computed call");return this.t(),t&&t.S(this),this.o},t}(),w=/*#__PURE__*/function(){function t(t,i){this._=t,this.B=i,this.m=[],this.C=void 0,this.D=!1,this.F=!0}var i=t.prototype;return i.G=function(){var t=this;this.m.forEach(function(i){return i.l(t)})},i.H=function(){var t=this;this.m.forEach(function(i){return i.p(t)})},i.I=function(){this.H(),this.C&&this.C(),this.m=[]},i.i=function(){this.D||(this.B?this.B():this.J())},i.k=function(){this.I(),this.D=!0},i.J=function(){this.I();var t=h;h=this,++s;try{this.D=!1,this.C=this._()}finally{h=t,--s||l()}},i.S=function(t){this.F?t.u.has(this)||(t.u.add(this),this.m.push(t)):this.m.push(t)},i.j=function(t,i){2===t?c.push(i):(this.I(),f.push(this))},t}(),b=[];exports.action=v,exports.computed=function(t,i){var n=new d(t,i),r=n.O.bind(n);return r.$$computed=n,r.destroy=n.k.bind(n),r},exports.configure=function(t){void 0!==t.reactionRunner&&(e=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(a=t.cacheOnUntrackedRead)},exports.observable=function(t,i){var n=new y(t,i),r=n.O.bind(n),s=n.g.bind(n);return r.$$observable=n,[r,s]},exports.reaction=function(t,i){var n=new w(t,i),r=n.k.bind(n);return r.run=n.J.bind(n),n.J(),r},exports.shallow=r,exports.tx=function(t){++s;try{t()}finally{--s||l()}},exports.useReactive=function(){var i=t.useMemo(function(){var t,i={},n=new w(function(){i={},t&&t()});return n.F=!1,{G:function(i){return t=i,n.F=!0,n.G(),function(){t=null,n.F=!1,n.H()}},K:function(){return i},L:n}},b),n=i.L;return n.I(),t.useSyncExternalStore(i.G,i.K),n},exports.utx=function(t){var i=h;h=null,++s;try{return t()}finally{h=i,--s||l()}}; | ||
| var t=require("react"),i=Object.prototype.hasOwnProperty;function n(t){return t.constructor===Object||null===t.constructor}function r(t,r){if(t===r)return!0;if(Array.isArray(t)&&Array.isArray(r)){var s=t.length;if(s!==r.length)return!1;for(;s--;)if(t[s]!==r[s])return!1;return!0}if(t&&r&&"object"==typeof t&&"object"==typeof r&&n(t)&&n(r)){var o=Object.keys(t),u=o.length;if(Object.keys(r).length!==u)return!1;for(;u-- >0;){var h=o[u];if(!i.call(r,h)||t[h]!==r[h])return!1}return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;var f=!0;return t.forEach(function(t){r.has(t)||(f=!1)}),f}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;var e=!0;return t.forEach(function(t,i){r.get(i)!==t&&(e=!1)}),e}return!1}var s=0,o=null,u=[],h=[],f=!1,e=[],c=function(t){Promise.resolve().then(t)},a=!0,v=null;function l(t){return function(){var i=o;o=null;try{return t.apply(this,arguments)}finally{o=i}}}function y(){!f&&(e.length||h.length||v)&&(f=!0,c(p))}function p(){try{v&&v();for(var t,i=100;e.length||h.length;){for(var n=void 0;n=h.pop();)n.t();for(;e.length&&--i;){var r=e;e=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=u.pop();)t.o()}finally{f=!1,e=[]}}var d=/*#__PURE__*/function(){function t(t,i){this.u=t,this.h=new Set,this.v=i?"function"==typeof i?l(i):r:void 0}var i=t.prototype;return i.l=function(t){return!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t)},i.j=function(){var t=this;this.h.forEach(function(i){return i.j(3,t)}),!s&&y()},i.S=function(t){return void 0===t&&(t=o),t&&t.g(this),this.u},i.O=function(t,i){if(o&&o instanceof w)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.u)),this.v&&this.v(this.u,t))return;this.u=t}this.j()},t}(),w=/*#__PURE__*/function(){function t(t,i){this._=t,this.u=void 0,this.h=new Set,this.m=[],this.R=[],this.A=0,this.v=i?"function"==typeof i?l(i):r:void 0}var i=t.prototype;return i.g=function(t){t.l(this)&&this.m.push(t)},i.M=function(){var t=this;this.m.forEach(function(i){i.p(t)}),this.m=[],this.R=[]},i.l=function(t){return 1!==this.A&&this.t(),!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t),this.h.size||u.push(this)},i.q=function(t){var i=this;this.h.forEach(function(n){n.j(t,i)})},i.o=function(){this.h.size||0===this.A||this.P()},i.j=function(t,i){this.A>=t||(this.v?1===this.A&&this.q(2):this.q(t),this.A=t,2===t?this.R.push(i):this.M())},i.t=function(){if(2===this.A&&(this.A=1,this.R.forEach(function(t){t.t()}),this.R=[]),1!==this.A){var t=o,i=0!==this.A,n=a||t;o=n?this:null,this.A=4;try{var r=this._();if(this.A=n?1:0,i&&this.v){if(this.v(this.u,r))return;this.q(3)}this.u=r}catch(t){throw this.P(),t}finally{o=t}}},i.P=function(){this.A=0,this.u=void 0,this.M()},i.S=function(t){if(void 0===t&&(t=o),4===this.A)throw new Error("recursive computed call");return this.t(),t&&t.g(this),this.u},t}(),b=/*#__PURE__*/function(){function t(t,i){this._=t,this.k=i,this.m=[],this.B=void 0,this.C=!1,this.D=!0}var i=t.prototype;return i.g=function(t){t.l(this)&&this.m.push(t)},i.j=function(t,i){2===t?h.push(i):(this.F(),e.push(this))},i.F=function(){var t=this;this.m.forEach(function(i){i.p(t)}),this.m=[],this.B&&this.B(),this.B=void 0},i.i=function(){this.C||(this.k?(this.F(),this.k()):this.G())},i.P=function(){this.F(),this.C=!0},i.G=function(){this.F();var t=o;o=this,++s;try{this.C=!1,this.B=this._()}finally{o=t,--s||y()}},t}(),x=[];exports.action=function(t){return function(){var i=o;o=null,++s;try{return t.apply(this,arguments)}finally{o=i,--s||y()}}},exports.computed=function(t,i){var n=new w(t,i),r=n.S.bind(n);return r.$$computed=n,r.destroy=n.P.bind(n),r},exports.configure=function(t){void 0!==t.reactionRunner&&(c=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(a=t.cacheOnUntrackedRead),void 0!==t.onTxEnd&&(v=t.onTxEnd)},exports.observable=function(t,i){var n=new d(t,i),r=n.S.bind(n),s=n.O.bind(n);return r.$$observable=n,[r,s]},exports.reaction=function(t,i){var n=new b(t,i),r=n.P.bind(n);return r.run=n.G.bind(n),n.G(),r},exports.shallowEquals=r,exports.tx=function(t){++s;try{t()}finally{--s||y()}},exports.useObserver=function(i){var n=t.useRef(i),r=t.useMemo(function(){var t={},i=new Set,r=null,s=new b(function(){r=null==n.current?void 0:n.current()},function(){t={},i.forEach(function(t){return t()})});return{H:function(t){return i.add(t),function(){i.delete(t),0===i.size&&s.F()}},I:function(){return t},J:function(){return r},K:s}},x),s=r.K;return t.useSyncExternalStore(r.H,r.I),i?(s.G(),r.J()):(s.F(),s)},exports.utx=function(t){var i=o;o=null,++s;try{return t()}finally{o=i,--s||y()}}; | ||
| //# sourceMappingURL=onek.js.map |
@@ -1,2 +0,2 @@ | ||
| import{useMemo as t,useSyncExternalStore as i}from"react";var n=Object.prototype.hasOwnProperty;function r(t){return t.constructor===Object||null===t.constructor}function s(t,i){if(t===i)return!0;if(Array.isArray(t)&&Array.isArray(i)){var s=t.length;if(s!==i.length)return!1;for(;s--;)if(t[s]!==i[s])return!1;return!0}if(t&&i&&"object"==typeof t&&"object"==typeof i&&r(t)&&r(i)){var h=Object.keys(t),o=h.length;if(Object.keys(i).length!==o)return!1;for(;o-- >0;){var u=h[o];if(!n.call(i,u)||t[u]!==i[u])return!1}return!0}if(t instanceof Set&&i instanceof Set){if(t.size!==i.size)return!1;var f=!0;return t.forEach(function(t){i.has(t)||(f=!1)}),f}if(t instanceof Map&&i instanceof Map){if(t.size!==i.size)return!1;var c=!0;return t.forEach(function(t,n){i.get(n)!==t&&(c=!1)}),c}return!1}var h=0,o=null,u=[],f=!1,c=[],e=function(t){return t()},a=[],v=!0;function l(t){void 0!==t.reactionRunner&&(e=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(v=t.cacheOnUntrackedRead)}function y(t){++h;try{t()}finally{--h||p()}}function d(t){var i=o;o=null,++h;try{return t()}finally{o=i,--h||p()}}function w(t){return function(){var i=o;o=null,++h;try{return t.apply(this,arguments)}finally{o=i,--h||p()}}}function p(){!f&&(c.length||a.length)&&(f=!0,e(b))}function b(){try{for(var t,i=100;c.length||a.length;){for(var n=void 0;n=a.pop();)n.t();for(;c.length&&--i;){var r=c;c=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=u.pop();)t.h()}finally{f=!1,c=[]}}var j=/*#__PURE__*/function(){function t(t,i){this.o=t,this.u=new Set,this.v=i?"function"==typeof i?w(i):s:void 0}var i=t.prototype;return i.l=function(t){this.u.add(t)},i.p=function(t){this.u.delete(t)},i.j=function(){var t=this;this.u.forEach(function(i){return i.j(3,t)}),!h&&p()},i.m=function(t){return void 0===t&&(t=o),t&&t.O(this),this.o},i.S=function(t,i){if(o&&o instanceof O)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.o)),this.v&&this.v(this.o,t))return;this.o=t}this.j()},t}();function m(t,i){var n=new j(t,i),r=n.m.bind(n),s=n.S.bind(n);return r.$$observable=n,[r,s]}var O=/*#__PURE__*/function(){function t(t,i){this.g=t,this.o=void 0,this.u=new Set,this._=[],this.A=[],this.M=0,this.v=i?"function"==typeof i?w(i):s:void 0}var i=t.prototype;return i.R=function(){var t=this;this._.forEach(function(i){return i.p(t)}),this._=[],this.A=[]},i.k=function(t){var i=this;this.u.forEach(function(n){return n.j(t,i)})},i.O=function(t){t.u.has(this)||(t.u.add(this),this._.push(t))},i.l=function(t){1!==this.M&&this.t(),this.u.add(t)},i.p=function(t){this.u.delete(t),this.u.size||u.push(this)},i.h=function(){this.u.size||0===this.M||this.q()},i.j=function(t,i){this.M>=t||(this.v?1===this.M&&this.k(2):this.k(t),this.M=t,2===t?this.A.push(i):this.R())},i.t=function(){if(2===this.M&&(this.M=1,this.A.forEach(function(t){t.t()}),this.A=[]),1!==this.M){var t=this.M,i=this.o,n=o,r=v||n;o=r?this:null,this.M=4;try{this.o=this.g(),this.M=r?1:0}catch(t){throw this.q(),t}finally{o=n}this.v&&0!==t&&(this.v(i,this.o)?this.o=i:this.k(3))}},i.q=function(){this.M=0,this.o=void 0,this.R()},i.m=function(t){if(void 0===t&&(t=o),4===this.M)throw new Error("recursive computed call");return this.t(),t&&t.O(this),this.o},t}();function S(t,i){var n=new O(t,i),r=n.m.bind(n);return r.$$computed=n,r.destroy=n.q.bind(n),r}var g=/*#__PURE__*/function(){function t(t,i){this.g=t,this.B=i,this._=[],this.C=void 0,this.D=!1,this.F=!0}var i=t.prototype;return i.G=function(){var t=this;this._.forEach(function(i){return i.l(t)})},i.H=function(){var t=this;this._.forEach(function(i){return i.p(t)})},i.I=function(){this.H(),this.C&&this.C(),this._=[]},i.i=function(){this.D||(this.B?this.B():this.J())},i.q=function(){this.I(),this.D=!0},i.J=function(){this.I();var t=o;o=this,++h;try{this.D=!1,this.C=this.g()}finally{o=t,--h||p()}},i.O=function(t){this.F?t.u.has(this)||(t.u.add(this),this._.push(t)):this._.push(t)},i.j=function(t,i){2===t?a.push(i):(this.I(),c.push(this))},t}();function E(t,i){var n=new g(t,i),r=n.q.bind(n);return r.run=n.J.bind(n),n.J(),r}var _=[];function A(){var n=t(function(){var t,i={},n=new g(function(){i={},t&&t()});return n.F=!1,{G:function(i){return t=i,n.F=!0,n.G(),function(){t=null,n.F=!1,n.H()}},K:function(){return i},L:n}},_),r=n.L;return r.I(),i(n.G,n.K),r}export{w as action,S as computed,l as configure,m as observable,E as reaction,s as shallow,y as tx,A as useReactive,d as utx}; | ||
| import{useRef as t,useMemo as i,useSyncExternalStore as n}from"react";var r=Object.prototype.hasOwnProperty;function s(t){return t.constructor===Object||null===t.constructor}function u(t,i){if(t===i)return!0;if(Array.isArray(t)&&Array.isArray(i)){var n=t.length;if(n!==i.length)return!1;for(;n--;)if(t[n]!==i[n])return!1;return!0}if(t&&i&&"object"==typeof t&&"object"==typeof i&&s(t)&&s(i)){var u=Object.keys(t),o=u.length;if(Object.keys(i).length!==o)return!1;for(;o-- >0;){var h=u[o];if(!r.call(i,h)||t[h]!==i[h])return!1}return!0}if(t instanceof Set&&i instanceof Set){if(t.size!==i.size)return!1;var f=!0;return t.forEach(function(t){i.has(t)||(f=!1)}),f}if(t instanceof Map&&i instanceof Map){if(t.size!==i.size)return!1;var e=!0;return t.forEach(function(t,n){i.get(n)!==t&&(e=!1)}),e}return!1}var o=0,h=null,f=[],e=[],c=!1,a=[],v=function(t){Promise.resolve().then(t)},l=!0,y=null;function d(t){void 0!==t.reactionRunner&&(v=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(l=t.cacheOnUntrackedRead),void 0!==t.onTxEnd&&(y=t.onTxEnd)}function w(t){++o;try{t()}finally{--o||m()}}function p(t){var i=h;h=null,++o;try{return t()}finally{h=i,--o||m()}}function b(t){return function(){var i=h;h=null;try{return t.apply(this,arguments)}finally{h=i}}}function j(t){return function(){var i=h;h=null,++o;try{return t.apply(this,arguments)}finally{h=i,--o||m()}}}function m(){!c&&(a.length||e.length||y)&&(c=!0,v(S))}function S(){try{y&&y();for(var t,i=100;a.length||e.length;){for(var n=void 0;n=e.pop();)n.t();for(;a.length&&--i;){var r=a;a=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=f.pop();)t.u()}finally{c=!1,a=[]}}var g=/*#__PURE__*/function(){function t(t,i){this.o=t,this.h=new Set,this.v=i?"function"==typeof i?b(i):u:void 0}var i=t.prototype;return i.l=function(t){return!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t)},i.j=function(){var t=this;this.h.forEach(function(i){return i.j(3,t)}),!o&&m()},i.m=function(t){return void 0===t&&(t=h),t&&t.S(this),this.o},i.g=function(t,i){if(h&&h instanceof _)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.o)),this.v&&this.v(this.o,t))return;this.o=t}this.j()},t}();function O(t,i){var n=new g(t,i),r=n.m.bind(n),s=n.g.bind(n);return r.$$observable=n,[r,s]}var _=/*#__PURE__*/function(){function t(t,i){this.O=t,this.o=void 0,this.h=new Set,this._=[],this.R=[],this.A=0,this.v=i?"function"==typeof i?b(i):u:void 0}var i=t.prototype;return i.S=function(t){t.l(this)&&this._.push(t)},i.M=function(){var t=this;this._.forEach(function(i){i.p(t)}),this._=[],this.R=[]},i.l=function(t){return 1!==this.A&&this.t(),!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t),this.h.size||f.push(this)},i.P=function(t){var i=this;this.h.forEach(function(n){n.j(t,i)})},i.u=function(){this.h.size||0===this.A||this.k()},i.j=function(t,i){this.A>=t||(this.v?1===this.A&&this.P(2):this.P(t),this.A=t,2===t?this.R.push(i):this.M())},i.t=function(){if(2===this.A&&(this.A=1,this.R.forEach(function(t){t.t()}),this.R=[]),1!==this.A){var t=h,i=0!==this.A,n=l||t;h=n?this:null,this.A=4;try{var r=this.O();if(this.A=n?1:0,i&&this.v){if(this.v(this.o,r))return;this.P(3)}this.o=r}catch(t){throw this.k(),t}finally{h=t}}},i.k=function(){this.A=0,this.o=void 0,this.M()},i.m=function(t){if(void 0===t&&(t=h),4===this.A)throw new Error("recursive computed call");return this.t(),t&&t.S(this),this.o},t}();function E(t,i){var n=new _(t,i),r=n.m.bind(n);return r.$$computed=n,r.destroy=n.k.bind(n),r}var R=/*#__PURE__*/function(){function t(t,i){this.O=t,this.q=i,this._=[],this.B=void 0,this.C=!1,this.D=!0}var i=t.prototype;return i.S=function(t){t.l(this)&&this._.push(t)},i.j=function(t,i){2===t?e.push(i):(this.F(),a.push(this))},i.F=function(){var t=this;this._.forEach(function(i){i.p(t)}),this._=[],this.B&&this.B(),this.B=void 0},i.i=function(){this.C||(this.q?(this.F(),this.q()):this.G())},i.k=function(){this.F(),this.C=!0},i.G=function(){this.F();var t=h;h=this,++o;try{this.C=!1,this.B=this.O()}finally{h=t,--o||m()}},t}();function A(t,i){var n=new R(t,i),r=n.k.bind(n);return r.run=n.G.bind(n),n.G(),r}var M=[];function x(r){var s=t(r),u=i(function(){var t={},i=new Set,n=null,r=new R(function(){n=null==s.current?void 0:s.current()},function(){t={},i.forEach(function(t){return t()})});return{H:function(t){return i.add(t),function(){i.delete(t),0===i.size&&r.F()}},I:function(){return t},J:function(){return n},K:r}},M),o=u.K;return n(u.H,u.I),r?(o.G(),u.J()):(o.F(),o)}export{j as action,E as computed,d as configure,O as observable,A as reaction,u as shallowEquals,w as tx,x as useObserver,p as utx}; | ||
| //# sourceMappingURL=onek.module.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],i):i((t||self).onek={},t.react)}(this,function(t,i){var n=Object.prototype.hasOwnProperty;function r(t){return t.constructor===Object||null===t.constructor}function s(t,i){if(t===i)return!0;if(Array.isArray(t)&&Array.isArray(i)){var s=t.length;if(s!==i.length)return!1;for(;s--;)if(t[s]!==i[s])return!1;return!0}if(t&&i&&"object"==typeof t&&"object"==typeof i&&r(t)&&r(i)){var o=Object.keys(t),h=o.length;if(Object.keys(i).length!==h)return!1;for(;h-- >0;){var f=o[h];if(!n.call(i,f)||t[f]!==i[f])return!1}return!0}if(t instanceof Set&&i instanceof Set){if(t.size!==i.size)return!1;var u=!0;return t.forEach(function(t){i.has(t)||(u=!1)}),u}if(t instanceof Map&&i instanceof Map){if(t.size!==i.size)return!1;var e=!0;return t.forEach(function(t,n){i.get(n)!==t&&(e=!1)}),e}return!1}var o=0,h=null,f=[],u=!1,e=[],c=function(t){return t()},a=[],v=!0;function l(t){return function(){var i=h;h=null,++o;try{return t.apply(this,arguments)}finally{h=i,--o||y()}}}function y(){!u&&(e.length||a.length)&&(u=!0,c(d))}function d(){try{for(var t,i=100;e.length||a.length;){for(var n=void 0;n=a.pop();)n.t();for(;e.length&&--i;){var r=e;e=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=f.pop();)t.o()}finally{u=!1,e=[]}}var p=/*#__PURE__*/function(){function t(t,i){this.h=t,this.u=new Set,this.v=i?"function"==typeof i?l(i):s:void 0}var i=t.prototype;return i.l=function(t){this.u.add(t)},i.p=function(t){this.u.delete(t)},i.j=function(){var t=this;this.u.forEach(function(i){return i.j(3,t)}),!o&&y()},i.g=function(t){return void 0===t&&(t=h),t&&t.O(this),this.h},i.S=function(t,i){if(h&&h instanceof b)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.h)),this.v&&this.v(this.h,t))return;this.h=t}this.j()},t}(),b=/*#__PURE__*/function(){function t(t,i){this.m=t,this.h=void 0,this.u=new Set,this._=[],this.A=[],this.M=0,this.v=i?"function"==typeof i?l(i):s:void 0}var i=t.prototype;return i.T=function(){var t=this;this._.forEach(function(i){return i.p(t)}),this._=[],this.A=[]},i.q=function(t){var i=this;this.u.forEach(function(n){return n.j(t,i)})},i.O=function(t){t.u.has(this)||(t.u.add(this),this._.push(t))},i.l=function(t){1!==this.M&&this.t(),this.u.add(t)},i.p=function(t){this.u.delete(t),this.u.size||f.push(this)},i.o=function(){this.u.size||0===this.M||this.R()},i.j=function(t,i){this.M>=t||(this.v?1===this.M&&this.q(2):this.q(t),this.M=t,2===t?this.A.push(i):this.T())},i.t=function(){if(2===this.M&&(this.M=1,this.A.forEach(function(t){t.t()}),this.A=[]),1!==this.M){var t=this.M,i=this.h,n=h,r=v||n;h=r?this:null,this.M=4;try{this.h=this.m(),this.M=r?1:0}catch(t){throw this.R(),t}finally{h=n}this.v&&0!==t&&(this.v(i,this.h)?this.h=i:this.q(3))}},i.R=function(){this.M=0,this.h=void 0,this.T()},i.g=function(t){if(void 0===t&&(t=h),4===this.M)throw new Error("recursive computed call");return this.t(),t&&t.O(this),this.h},t}(),w=/*#__PURE__*/function(){function t(t,i){this.m=t,this.k=i,this._=[],this.B=void 0,this.C=!1,this.D=!0}var i=t.prototype;return i.F=function(){var t=this;this._.forEach(function(i){return i.l(t)})},i.G=function(){var t=this;this._.forEach(function(i){return i.p(t)})},i.H=function(){this.G(),this.B&&this.B(),this._=[]},i.i=function(){this.C||(this.k?this.k():this.I())},i.R=function(){this.H(),this.C=!0},i.I=function(){this.H();var t=h;h=this,++o;try{this.C=!1,this.B=this.m()}finally{h=t,--o||y()}},i.O=function(t){this.D?t.u.has(this)||(t.u.add(this),this._.push(t)):this._.push(t)},i.j=function(t,i){2===t?a.push(i):(this.H(),e.push(this))},t}(),j=[];t.action=l,t.computed=function(t,i){var n=new b(t,i),r=n.g.bind(n);return r.$$computed=n,r.destroy=n.R.bind(n),r},t.configure=function(t){void 0!==t.reactionRunner&&(c=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(v=t.cacheOnUntrackedRead)},t.observable=function(t,i){var n=new p(t,i),r=n.g.bind(n),s=n.S.bind(n);return r.$$observable=n,[r,s]},t.reaction=function(t,i){var n=new w(t,i),r=n.R.bind(n);return r.run=n.I.bind(n),n.I(),r},t.shallow=s,t.tx=function(t){++o;try{t()}finally{--o||y()}},t.useReactive=function(){var t=i.useMemo(function(){var t,i={},n=new w(function(){i={},t&&t()});return n.D=!1,{F:function(i){return t=i,n.D=!0,n.F(),function(){t=null,n.D=!1,n.G()}},J:function(){return i},K:n}},j),n=t.K;return n.H(),i.useSyncExternalStore(t.F,t.J),n},t.utx=function(t){var i=h;h=null,++o;try{return t()}finally{h=i,--o||y()}}}); | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],i):i((t||self).onek={},t.react)}(this,function(t,i){var n=Object.prototype.hasOwnProperty;function r(t){return t.constructor===Object||null===t.constructor}function o(t,i){if(t===i)return!0;if(Array.isArray(t)&&Array.isArray(i)){var o=t.length;if(o!==i.length)return!1;for(;o--;)if(t[o]!==i[o])return!1;return!0}if(t&&i&&"object"==typeof t&&"object"==typeof i&&r(t)&&r(i)){var s=Object.keys(t),u=s.length;if(Object.keys(i).length!==u)return!1;for(;u-- >0;){var f=s[u];if(!n.call(i,f)||t[f]!==i[f])return!1}return!0}if(t instanceof Set&&i instanceof Set){if(t.size!==i.size)return!1;var e=!0;return t.forEach(function(t){i.has(t)||(e=!1)}),e}if(t instanceof Map&&i instanceof Map){if(t.size!==i.size)return!1;var h=!0;return t.forEach(function(t,n){i.get(n)!==t&&(h=!1)}),h}return!1}var s=0,u=null,f=[],e=[],h=!1,c=[],a=function(t){Promise.resolve().then(t)},v=!0,l=null;function d(t){return function(){var i=u;u=null;try{return t.apply(this,arguments)}finally{u=i}}}function y(){!h&&(c.length||e.length||l)&&(h=!0,a(p))}function p(){try{l&&l();for(var t,i=100;c.length||e.length;){for(var n=void 0;n=e.pop();)n.t();for(;c.length&&--i;){var r=c;c=[],r.forEach(function(t){return t.i()})}if(!i)throw new Error("infinite reactions loop")}for(;t=f.pop();)t.o()}finally{h=!1,c=[]}}var w=/*#__PURE__*/function(){function t(t,i){this.u=t,this.h=new Set,this.v=i?"function"==typeof i?d(i):o:void 0}var i=t.prototype;return i.l=function(t){return!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t)},i.j=function(){var t=this;this.h.forEach(function(i){return i.j(3,t)}),!s&&y()},i.g=function(t){return void 0===t&&(t=u),t&&t.S(this),this.u},i.m=function(t,i){if(u&&u instanceof b)throw new Error("changing observable inside of computed");if(arguments.length>0){if("function"!=typeof t||i||(t=t(this.u)),this.v&&this.v(this.u,t))return;this.u=t}this.j()},t}(),b=/*#__PURE__*/function(){function t(t,i){this.O=t,this.u=void 0,this.h=new Set,this._=[],this.R=[],this.A=0,this.v=i?"function"==typeof i?d(i):o:void 0}var i=t.prototype;return i.S=function(t){t.l(this)&&this._.push(t)},i.M=function(){var t=this;this._.forEach(function(i){i.p(t)}),this._=[],this.R=[]},i.l=function(t){return 1!==this.A&&this.t(),!this.h.has(t)&&(this.h.add(t),!0)},i.p=function(t){this.h.delete(t),this.h.size||f.push(this)},i.T=function(t){var i=this;this.h.forEach(function(n){n.j(t,i)})},i.o=function(){this.h.size||0===this.A||this.q()},i.j=function(t,i){this.A>=t||(this.v?1===this.A&&this.T(2):this.T(t),this.A=t,2===t?this.R.push(i):this.M())},i.t=function(){if(2===this.A&&(this.A=1,this.R.forEach(function(t){t.t()}),this.R=[]),1!==this.A){var t=u,i=0!==this.A,n=v||t;u=n?this:null,this.A=4;try{var r=this.O();if(this.A=n?1:0,i&&this.v){if(this.v(this.u,r))return;this.T(3)}this.u=r}catch(t){throw this.q(),t}finally{u=t}}},i.q=function(){this.A=0,this.u=void 0,this.M()},i.g=function(t){if(void 0===t&&(t=u),4===this.A)throw new Error("recursive computed call");return this.t(),t&&t.S(this),this.u},t}(),j=/*#__PURE__*/function(){function t(t,i){this.O=t,this.P=i,this._=[],this.k=void 0,this.B=!1,this.C=!0}var i=t.prototype;return i.S=function(t){t.l(this)&&this._.push(t)},i.j=function(t,i){2===t?e.push(i):(this.D(),c.push(this))},i.D=function(){var t=this;this._.forEach(function(i){i.p(t)}),this._=[],this.k&&this.k(),this.k=void 0},i.i=function(){this.B||(this.P?(this.D(),this.P()):this.F())},i.q=function(){this.D(),this.B=!0},i.F=function(){this.D();var t=u;u=this,++s;try{this.B=!1,this.k=this.O()}finally{u=t,--s||y()}},t}(),g=[];t.action=function(t){return function(){var i=u;u=null,++s;try{return t.apply(this,arguments)}finally{u=i,--s||y()}}},t.computed=function(t,i){var n=new b(t,i),r=n.g.bind(n);return r.$$computed=n,r.destroy=n.q.bind(n),r},t.configure=function(t){void 0!==t.reactionRunner&&(a=t.reactionRunner),void 0!==t.cacheOnUntrackedRead&&(v=t.cacheOnUntrackedRead),void 0!==t.onTxEnd&&(l=t.onTxEnd)},t.observable=function(t,i){var n=new w(t,i),r=n.g.bind(n),o=n.m.bind(n);return r.$$observable=n,[r,o]},t.reaction=function(t,i){var n=new j(t,i),r=n.q.bind(n);return r.run=n.F.bind(n),n.F(),r},t.shallowEquals=o,t.tx=function(t){++s;try{t()}finally{--s||y()}},t.useObserver=function(t){var n=i.useRef(t),r=i.useMemo(function(){var t={},i=new Set,r=null,o=new j(function(){r=null==n.current?void 0:n.current()},function(){t={},i.forEach(function(t){return t()})});return{G:function(t){return i.add(t),function(){i.delete(t),0===i.size&&o.D()}},H:function(){return t},I:function(){return r},J:o}},g),o=r.J;return i.useSyncExternalStore(r.G,r.H),t?(o.F(),r.I()):(o.D(),o)},t.utx=function(t){var i=u;u=null,++s;try{return t()}finally{u=i,--s||y()}}}); | ||
| //# sourceMappingURL=onek.umd.js.map |
136
package.json
| { | ||
| "name": "onek", | ||
| "version": "0.0.2", | ||
| "description": "1KB full-featured state management inspired by MobX and Solid, batteries included ⚡️", | ||
| "main": "./dist/onek.js", | ||
| "source": "src/index.ts", | ||
| "umd:main": "./dist/onek.umd.js", | ||
| "module": "./dist/onek.module.js", | ||
| "unpkg": "./dist/onek.umd.js", | ||
| "types": "./src/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./src/onek.d.ts", | ||
| "browser": "./dist/onek.module.js", | ||
| "umd": "./dist/onek.umd.js", | ||
| "import": "./dist/onek.mjs", | ||
| "require": "./dist/onek.js" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "build": "microbundle --generateTypes=false", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/zheksoon/onek.git" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^18.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^18.0.0", | ||
| "jest": "^29.0.3", | ||
| "microbundle": "^0.15.1" | ||
| }, | ||
| "files": [ | ||
| "src/", | ||
| "dist/", | ||
| "LICENSE", | ||
| "README.md", | ||
| "package.json", | ||
| "yarn.lock" | ||
| ], | ||
| "keywords": [ | ||
| "state", | ||
| "state management", | ||
| "react", | ||
| "reactive", | ||
| "observable", | ||
| "computed", | ||
| "frp", | ||
| "tfrp", | ||
| "mobx", | ||
| "solid", | ||
| "zustand", | ||
| "jotai", | ||
| "1kb" | ||
| ], | ||
| "author": "Eugene Daragan", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/zheksoon/onek/issues" | ||
| }, | ||
| "homepage": "https://github.com/zheksoon/onek#readme", | ||
| "mangle": { | ||
| "regex": "^_" | ||
| "name": "onek", | ||
| "version": "0.0.3", | ||
| "description": "1KB full-featured state management inspired by MobX and Solid, batteries included ⚡️", | ||
| "main": "./dist/onek.js", | ||
| "source": "src/index.ts", | ||
| "umd:main": "./dist/onek.umd.js", | ||
| "module": "./dist/onek.module.js", | ||
| "unpkg": "./dist/onek.umd.js", | ||
| "types": "./types/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./src/onek.d.ts", | ||
| "browser": "./dist/onek.module.js", | ||
| "umd": "./dist/onek.umd.js", | ||
| "import": "./dist/onek.mjs", | ||
| "require": "./dist/onek.js" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "build": "microbundle", | ||
| "test": "jest" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/zheksoon/onek.git" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^18.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/jest": "^29.4.0", | ||
| "@types/react": "^18.0.0", | ||
| "jest": "^29.0.3", | ||
| "microbundle": "^0.15.1", | ||
| "prettier": "^2.8.7", | ||
| "react": "^18.0.0", | ||
| "ts-jest": "^29.0.5", | ||
| "ts-node": "^10.9.1" | ||
| }, | ||
| "files": [ | ||
| "src/", | ||
| "dist/", | ||
| "types/", | ||
| "LICENSE", | ||
| "README.md", | ||
| "package.json", | ||
| "yarn.lock" | ||
| ], | ||
| "keywords": [ | ||
| "state", | ||
| "state management", | ||
| "react", | ||
| "reactive", | ||
| "observable", | ||
| "computed", | ||
| "frp", | ||
| "tfrp", | ||
| "mobx", | ||
| "solid", | ||
| "zustand", | ||
| "jotai", | ||
| "1kb" | ||
| ], | ||
| "author": "Eugene Daragan", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/zheksoon/onek/issues" | ||
| }, | ||
| "homepage": "https://github.com/zheksoon/onek#readme", | ||
| "mangle": { | ||
| "regex": "^_" | ||
| } | ||
| } |
306
README.md
| # onek | ||
| 1KB full-featured state management inspired by MobX and Solid, batteries included | ||
| <p> | ||
| <a href="https://www.npmjs.com/package/onek" > | ||
| <img src="https://badgen.net/npm/v/onek?color=5fbfcd"/> | ||
| </a> | ||
| <a href="https://bundlephobia.com/package/onek" > | ||
| <img src="https://badgen.net/badgesize/gzip/file-url/unpkg.com/onek/dist/onek.js?color=5fbfcd"/> | ||
| </a> | ||
| <a href="https://github.com/zheksoon/onek/blob/main/LICENSE" > | ||
| <img src="https://badgen.net/github/license/zheksoon/onek?color=5fbfcd"/> | ||
| </a> | ||
| </p> | ||
| ⚡️ **1.6KB** full-featured state management inspired by MobX and Solid, **batteries included** ⚡️ | ||
| **Onek** is a simple but powerfull state management library for React based on solid foundation of functional reactive data structures from MobX and Solid.js, providing everything needed for managing state for complex React applications, all in less then 2KB package. | ||
| **Features** | ||
| - 🚀 Reactive observable and computed values - just like MobX, Solid.js or Preact Signals | ||
| - 👁 Transparency - no data glitches guaranteed | ||
| - 🔄 Transactional updates - no unexpected side-effects | ||
| - 🙈 Lazyness - nothing happens until you need a value | ||
| - 🤓 Built-in shallow equality for easily optimizing re-renders | ||
| - 🤔 Not opinionated about structure of your models | ||
| - 🎱 No need for selectors or wrapping your components into lambdas | ||
| - 💾 IE11 support - just ES6 `Set` is required | ||
| - 💯 100% tests coverage with complex cases (WIP) | ||
| - ⭐️ Writen in 100% TypeScript | ||
| - 📦 ...and all in less than 2KB package | ||
| **Examples?** | ||
| <details> | ||
| <summary><b>Hello, WORLD!</b> - Basic example of shared state</summary> | ||
| ```jsx | ||
| import { observable, computed, useObserver } from "onek"; | ||
| const [name, setName] = observable("Eugene"); | ||
| const uppercaseName = computed(() => name().toUpperCase()); | ||
| const NameInput = () => { | ||
| const obs = useObserver(); | ||
| const onChange = useCallback((e) => setName(e.target.value), [setName]); | ||
| return <input type="text" value={name(obs)} onChange={onChange} />; | ||
| }; | ||
| const Greeter = () => { | ||
| const obs = useObserver(); | ||
| return <span>Hello, {uppercaseName(obs)}!</span>; | ||
| }; | ||
| root.render( | ||
| <> | ||
| <NameInput /> | ||
| <Greeter /> | ||
| </> | ||
| ); | ||
| ``` | ||
| </details> | ||
| <details> | ||
| <summary><b>Simple counter</b> - Actions and models</summary> | ||
| ```jsx | ||
| import { observable, action, useObserver } from "onek"; | ||
| const makeCounter = (initial) => { | ||
| const [count, setCount] = observable(initial); | ||
| const inc = action(() => setCount((count) => count + 1)); | ||
| const dec = action(() => setCount((count) => count - 1)); | ||
| const reset = action(() => setCount(initial)); | ||
| return { count, inc, dec, reset }; | ||
| }; | ||
| const Counter = ({ counter }) => { | ||
| const { counter, inc, dec, reset } = counter; | ||
| const obs = useObserver(); | ||
| return ( | ||
| <> | ||
| <button onClick={inc}>+</button> | ||
| <button onClick={dec}>-</button> | ||
| <button onClick={reset}>Reset</button> | ||
| Count: {counter(obs)} | ||
| </> | ||
| ); | ||
| }; | ||
| const counter = makeCounter(0); | ||
| root.render(<Counter counter={counter} />); | ||
| ``` | ||
| </details> | ||
| <details> | ||
| <summary><b>Counter list with stats</b> - Model composition and computed data</summary> | ||
| ```jsx | ||
| import { observable, computed, action, useObserver } from "onek"; | ||
| import { makeCounter, Counter } from "./Counter"; | ||
| const makeCountersList = () => { | ||
| const [counters, setCounters] = observable([]); | ||
| const countersCount = computed(() => counters().length); | ||
| const countersSum = computed(() => counters().reduce((sum, counter) => sum + counter.count(), 0)); | ||
| const addCounter = action(() => { | ||
| const counter = makeCounter(0); | ||
| setCounters((counters) => [...counters, counter]); | ||
| }); | ||
| const removeCounter = action((counter) => { | ||
| setCounters((counters) => counters.filter((_counter) => _counter !== counter)); | ||
| }); | ||
| const resetAll = action(() => { | ||
| counters().forEach((counter) => counter.reset()); | ||
| }); | ||
| return { | ||
| counters, | ||
| countersCount, | ||
| countersSum, | ||
| addCounter, | ||
| removeCounter, | ||
| resetAll, | ||
| }; | ||
| }; | ||
| const CounterStats = ({ count, sum }) => { | ||
| const obs = useObserver(); | ||
| return ( | ||
| <> | ||
| <p>Total count: {count(obs)}</p> | ||
| <p>Total sum: {sum(obs)}</p> | ||
| </> | ||
| ); | ||
| }; | ||
| const CountersList = ({ model }) => { | ||
| const obs = useObserver(); | ||
| return ( | ||
| <div> | ||
| <CounterStats count={model.countersCount} sum={model.countersSum} /> | ||
| <button onClick={model.addCounter}>Add</button> | ||
| <button onClick={model.resetAll}>Reset all</button> | ||
| {model.counters(obs).map((counter) => ( | ||
| <div> | ||
| <Counter model={counter} /> | ||
| <button onClick={() => model.removeCounter(counter)}>Remove</button> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
| const countersList = makeCountersList(); | ||
| root.render(<CountersList model={countersList} />); | ||
| ``` | ||
| </details> | ||
| <details> | ||
| <summary><b>Todo List</b> - Complex multi-component app</summary> | ||
| ```jsx | ||
| import { action, observable, computed, useObserver } from "onek"; | ||
| let id = 0; | ||
| export const makeTodo = (todoText) => { | ||
| const [text, setText] = observable(todoText); | ||
| const [done, setDone] = observable(false); | ||
| const toggleDone = action(() => { | ||
| setDone((done) => !done); | ||
| }); | ||
| return { | ||
| id: id++, | ||
| text, | ||
| done, | ||
| setText, | ||
| toggleDone, | ||
| }; | ||
| }; | ||
| export const makeTodoList = () => { | ||
| const [text, setText] = observable(""); | ||
| const [todos, setTodos] = observable([], true); | ||
| const [filter, setFilter] = observable("ALL"); | ||
| const doneTodos = computed(() => { | ||
| return todos().filter((todo) => todo.done()); | ||
| }); | ||
| const undoneTodos = computed(() => { | ||
| return todos().filter((todo) => !todo.done()); | ||
| }); | ||
| const visibleTodos = computed(() => { | ||
| switch (filter()) { | ||
| case "ALL": | ||
| return todos(); | ||
| case "DONE": | ||
| return doneTodos(); | ||
| case "UNDONE": | ||
| return undoneTodos(); | ||
| } | ||
| }, true); | ||
| const addTodo = action(() => { | ||
| const todo = makeTodo(text()); | ||
| setTodos((todos) => [...todos, todo]); | ||
| setText(""); | ||
| }); | ||
| const removeTodo = action((todo) => { | ||
| setTodos((todos) => todos.filter((_todo) => _todo !== todo)); | ||
| }); | ||
| const clearDone = action((todo) => { | ||
| setTodos(undoneTodos()); | ||
| }); | ||
| return { | ||
| text, | ||
| setText, | ||
| todos, | ||
| filter, | ||
| visibleTodos, | ||
| setFilter, | ||
| addTodo, | ||
| removeTodo, | ||
| clearDone, | ||
| }; | ||
| }; | ||
| const FILTER_OPTIONS = [ | ||
| { name: "All", value: "ALL" }, | ||
| { name: "Done", value: "DONE" }, | ||
| { name: "Undone", value: "UNDONE" }, | ||
| ]; | ||
| const NewTodoInput = ({ model }) => { | ||
| const { text, setText, addTodo } = model; | ||
| const obs = useObserver(); | ||
| return ( | ||
| <div> | ||
| <input onChange={(e) => setText(e.target.value)} value={text(obs)} /> | ||
| <button onClick={addTodo} disabled={text(obs).length === 0}> | ||
| Add | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
| const TodoListFilter = ({ model }) => { | ||
| const it = useObserver(); | ||
| return ( | ||
| <select value={model.filter(it)} onChange={(e) => model.setFilter(e.target.value)}> | ||
| {FILTER_OPTIONS.map(({ name, value }) => ( | ||
| <option key={value} value={value}> | ||
| {name} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| ); | ||
| }; | ||
| const Todo = ({ model }) => { | ||
| const it = useObserver(); | ||
| return ( | ||
| <div className="todo"> | ||
| <label> | ||
| <input type="checkbox" checked={model.done(it)} onChange={model.toggleDone} /> | ||
| <span style={{ textDecoration: model.done(it) ? "line-through" : "none" }}> | ||
| {model.text(it)} | ||
| </span> | ||
| </label> | ||
| </div> | ||
| ); | ||
| }; | ||
| export const TodoList = ({ model }) => { | ||
| const it = useObserver(); | ||
| return ( | ||
| <div className="todo-list"> | ||
| <button onClick={model.clearDone}>Clear done</button> | ||
| <TodoListFilter model={model} /> | ||
| <NewTodoInput model={model} /> | ||
| {model.visibleTodos(it).map((todo) => ( | ||
| <Todo key={todo.id} model={todo} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
| </details> |
284
src/core.ts
@@ -1,4 +0,4 @@ | ||
| import { shallow } from "./utils"; | ||
| import { shallowEquals } from "./utils"; | ||
| const enum States { | ||
| const enum State { | ||
| NOT_INITIALIZED = 0, | ||
@@ -11,11 +11,42 @@ CLEAN = 1, | ||
| const apply = (fn) => fn(); | ||
| export type CheckFn<T> = (prev: T, next: T) => boolean; | ||
| export type UpdaterFn<T> = (prevValue: T) => T; | ||
| export interface ValueGetter<T> { | ||
| (subscriber?: Subscriber): T; | ||
| } | ||
| export interface ObservableGetter<T> extends ValueGetter<T> { | ||
| $$observable: Observable<T>; | ||
| } | ||
| export interface ObservableSetter<T> { | ||
| (value: T | UpdaterFn<T>, asIs?: boolean): void; | ||
| } | ||
| export interface ComputedGetter<T> extends ValueGetter<T> { | ||
| destroy(): void; | ||
| $$computed: Computed<T>; | ||
| } | ||
| export type ReactionDestructorFn = void | undefined | (() => void); | ||
| export type ReactionFn = () => ReactionDestructorFn; | ||
| type Subscriber = Computed | Reaction; | ||
| type Subscription = Observable | Computed; | ||
| export type Options = { | ||
| reactionsRunner?: (runner: () => void) => void; | ||
| cacheOnUntrackedRead?: boolean; | ||
| }; | ||
| let txDepth = 0; | ||
| let subscriber: Computed | Reaction | null = null; | ||
| let subscriber: Subscriber | null = null; | ||
| let subscriberChecks: Array<Computed> = []; | ||
| let stateActualizationQueue: Array<Computed> = []; | ||
| let reactionsScheduled = false; | ||
| let reactionsQueue: Array<Reaction> = []; | ||
| let reactionsRunner = apply; | ||
| let stateActualizationQueue: Array<Computed> = []; | ||
| let reactionsRunner = (runner: () => void) => { | ||
| Promise.resolve().then(runner); | ||
| }; | ||
| let cacheOnUntrackedRead = true; | ||
@@ -32,3 +63,3 @@ | ||
| function tx(fn) { | ||
| function tx(fn: () => void): void { | ||
| ++txDepth; | ||
@@ -42,3 +73,3 @@ try { | ||
| function utx(fn) { | ||
| function utx<T>(fn: () => T): T { | ||
| const oldSubscriber = subscriber; | ||
@@ -55,6 +86,18 @@ subscriber = null; | ||
| function action(fn) { | ||
| function untracked<Args extends any[], T>(fn: (...args: Args) => T): (...args: Args) => T { | ||
| return function () { | ||
| const oldSubscriber = subscriber; | ||
| subscriber = null; | ||
| try { | ||
| return fn.apply(this, arguments); | ||
| } finally { | ||
| subscriber = oldSubscriber; | ||
| } | ||
| }; | ||
| } | ||
| function action<Args extends any[], T>(fn: (...args: Args) => T): (...args: Args) => T { | ||
| return function () { | ||
| const oldSubscriber = subscriber; | ||
| subscriber = null; | ||
| ++txDepth; | ||
@@ -70,5 +113,4 @@ try { | ||
| function endTx() { | ||
| const shouldRunReactions = | ||
| reactionsQueue.length || stateActualizationQueue.length; | ||
| function endTx(): void { | ||
| const shouldRunReactions = reactionsQueue.length || stateActualizationQueue.length; | ||
| if (!reactionsScheduled && shouldRunReactions) { | ||
@@ -80,5 +122,5 @@ reactionsScheduled = true; | ||
| function runReactions() { | ||
| function runReactions(): void { | ||
| try { | ||
| let i = 100; | ||
| let i = 1000; | ||
| while (reactionsQueue.length || stateActualizationQueue.length) { | ||
@@ -110,7 +152,5 @@ let comp; | ||
| type CheckFn<T> = (prev: T, next: T) => boolean; | ||
| class Observable<T = any> { | ||
| public declare _value: T; | ||
| public declare _subscribers: Set<Computed | Reaction>; | ||
| public declare _subscribers: Set<Subscriber>; | ||
| public declare _checkFn?: CheckFn<T>; | ||
@@ -123,21 +163,25 @@ | ||
| ? typeof checkFn === "function" | ||
| ? action(checkFn) | ||
| : shallow | ||
| ? untracked(checkFn) | ||
| : shallowEquals | ||
| : undefined; | ||
| } | ||
| _addSubscriber(subscriber) { | ||
| this._subscribers.add(subscriber); | ||
| _addSubscriber(subscriber: Subscriber): boolean { | ||
| if (!this._subscribers.has(subscriber)) { | ||
| this._subscribers.add(subscriber); | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| _removeSubscriber(subscriber) { | ||
| _removeSubscriber(subscriber: Subscriber): void { | ||
| this._subscribers.delete(subscriber); | ||
| } | ||
| _notify() { | ||
| this._subscribers.forEach((subs) => subs._notify(States.DIRTY, this)); | ||
| _notify(): void { | ||
| this._subscribers.forEach((subs) => subs._notify(State.DIRTY, this)); | ||
| !txDepth && endTx(); | ||
| } | ||
| _getValue(_subscriber = subscriber) { | ||
| _getValue(_subscriber = subscriber): T { | ||
| if (_subscriber) { | ||
@@ -149,3 +193,3 @@ _subscriber._addSubscription(this); | ||
| _setValue(newValue, asIs) { | ||
| _setValue(newValue: T | UpdaterFn<T>, asIs?: boolean): void { | ||
| if (subscriber && subscriber instanceof Computed) { | ||
@@ -156,8 +200,8 @@ throw new Error("changing observable inside of computed"); | ||
| if (typeof newValue === "function" && !asIs) { | ||
| newValue = newValue(this._value); | ||
| newValue = (newValue as UpdaterFn<T>)(this._value); | ||
| } | ||
| if (this._checkFn && this._checkFn(this._value, newValue)) { | ||
| if (this._checkFn && this._checkFn(this._value, newValue as T)) { | ||
| return; | ||
| } | ||
| this._value = newValue; | ||
| this._value = newValue as T; | ||
| } | ||
@@ -168,10 +212,10 @@ this._notify(); | ||
| function observable(value, checkFn) { | ||
| function observable<T>(value: T, checkFn?: boolean | CheckFn<T>) { | ||
| const obs = new Observable(value, checkFn); | ||
| const get = obs._getValue.bind(obs); | ||
| const set = obs._setValue.bind(obs); | ||
| const get = obs._getValue.bind(obs) as ObservableGetter<T>; | ||
| const set = obs._setValue.bind(obs) as ObservableSetter<T>; | ||
| get.$$observable = obs; | ||
| return [get, set]; | ||
| return [get, set] as const; | ||
| } | ||
@@ -182,6 +226,6 @@ | ||
| public declare _value?: T; | ||
| public declare _subscribers: Set<Computed | Reaction>; | ||
| public declare _subscriptions: Array<Observable | Computed>; | ||
| public declare _subscribers: Set<Subscriber>; | ||
| public declare _subscriptions: Array<Subscription>; | ||
| public declare _subscriptionsToActualize: Array<Computed>; | ||
| public declare _state: States; | ||
| public declare _state: State; | ||
| public declare _checkFn?: CheckFn<T>; | ||
@@ -195,12 +239,20 @@ | ||
| this._subscriptionsToActualize = []; | ||
| this._state = States.NOT_INITIALIZED; | ||
| this._state = State.NOT_INITIALIZED; | ||
| this._checkFn = checkFn | ||
| ? typeof checkFn === "function" | ||
| ? action(checkFn) | ||
| : shallow | ||
| ? untracked(checkFn) | ||
| : shallowEquals | ||
| : undefined; | ||
| } | ||
| _removeSubscriptions() { | ||
| this._subscriptions.forEach((subs) => subs._removeSubscriber(this)); | ||
| _addSubscription(subscription: Subscription): void { | ||
| if (subscription._addSubscriber(this)) { | ||
| this._subscriptions.push(subscription); | ||
| } | ||
| } | ||
| _removeSubscriptions(): void { | ||
| this._subscriptions.forEach((subs) => { | ||
| subs._removeSubscriber(this); | ||
| }); | ||
| this._subscriptions = []; | ||
@@ -210,21 +262,11 @@ this._subscriptionsToActualize = []; | ||
| _notifySubscribers(state) { | ||
| this._subscribers.forEach((subs) => subs._notify(state, this)); | ||
| } | ||
| _addSubscription(subscription) { | ||
| if (!subscription._subscribers.has(this)) { | ||
| subscription._subscribers.add(this); | ||
| this._subscriptions.push(subscription); | ||
| _addSubscriber(subscriber: Subscriber): boolean { | ||
| if (!this._subscribers.has(subscriber)) { | ||
| this._subscribers.add(subscriber); | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| _addSubscriber(subscriber) { | ||
| if (this._state !== States.CLEAN) { | ||
| this._actualizeAndRecompute(); | ||
| } | ||
| this._subscribers.add(subscriber); | ||
| } | ||
| _removeSubscriber(subscriber) { | ||
| _removeSubscriber(subscriber: Subscriber): void { | ||
| this._subscribers.delete(subscriber); | ||
@@ -236,4 +278,10 @@ if (!this._subscribers.size) { | ||
| _checkSubscribers() { | ||
| if (!this._subscribers.size && this._state !== States.NOT_INITIALIZED) { | ||
| _notifySubscribers(state: State): void { | ||
| this._subscribers.forEach((subs) => { | ||
| subs._notify(state, this); | ||
| }); | ||
| } | ||
| _checkSubscribers(): void { | ||
| if (!this._subscribers.size && this._state !== State.NOT_INITIALIZED) { | ||
| this._destroy(); | ||
@@ -243,8 +291,7 @@ } | ||
| _notify(state, subscription) { | ||
| _notify(state: State, subscription: Subscription) { | ||
| if (this._state >= state) return; | ||
| if (this._checkFn) { | ||
| if (this._state === States.CLEAN) | ||
| this._notifySubscribers(States.MAYBE_DIRTY); | ||
| if (this._state === State.CLEAN) this._notifySubscribers(State.MAYBE_DIRTY); | ||
| } else { | ||
@@ -256,4 +303,4 @@ this._notifySubscribers(state); | ||
| if (state === States.MAYBE_DIRTY) { | ||
| this._subscriptionsToActualize.push(subscription); | ||
| if (state === State.MAYBE_DIRTY) { | ||
| this._subscriptionsToActualize.push(subscription as Computed); | ||
| } else { | ||
@@ -264,5 +311,5 @@ this._removeSubscriptions(); | ||
| _actualizeAndRecompute() { | ||
| if (this._state === States.MAYBE_DIRTY) { | ||
| this._state = States.CLEAN; | ||
| _actualizeAndRecompute(): void { | ||
| if (this._state === State.MAYBE_DIRTY) { | ||
| this._state = State.CLEAN; | ||
| this._subscriptionsToActualize.forEach((subs) => { | ||
@@ -274,14 +321,19 @@ subs._actualizeAndRecompute(); | ||
| if (this._state !== States.CLEAN) { | ||
| const oldState = this._state; | ||
| const oldValue = this._value; | ||
| if (this._state !== State.CLEAN) { | ||
| const oldSubscriber = subscriber; | ||
| const shouldCheck = this._state !== State.NOT_INITIALIZED; | ||
| const shouldCache = cacheOnUntrackedRead || oldSubscriber; | ||
| subscriber = shouldCache ? this : null; | ||
| this._state = States.COMPUTING; | ||
| this._state = State.COMPUTING; | ||
| try { | ||
| this._value = this._fn(); | ||
| this._state = shouldCache | ||
| ? States.CLEAN | ||
| : States.NOT_INITIALIZED; | ||
| const newValue = this._fn(); | ||
| this._state = shouldCache ? State.CLEAN : State.NOT_INITIALIZED; | ||
| if (shouldCheck && this._checkFn) { | ||
| if (this._checkFn(this._value!, newValue)) { | ||
| return; | ||
| } | ||
| this._notifySubscribers(State.DIRTY); | ||
| } | ||
| this._value = newValue; | ||
| } catch (e) { | ||
@@ -293,15 +345,7 @@ this._destroy(); | ||
| } | ||
| if (this._checkFn && oldState !== States.NOT_INITIALIZED) { | ||
| if (this._checkFn(oldValue!, this._value!)) { | ||
| this._value = oldValue; | ||
| } else { | ||
| this._notifySubscribers(States.DIRTY); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| _destroy() { | ||
| this._state = States.NOT_INITIALIZED; | ||
| _destroy(): void { | ||
| this._state = State.NOT_INITIALIZED; | ||
| this._value = undefined; | ||
@@ -311,4 +355,4 @@ this._removeSubscriptions(); | ||
| _getValue(_subscriber = subscriber) { | ||
| if (this._state === States.COMPUTING) { | ||
| _getValue(_subscriber = subscriber): T { | ||
| if (this._state === State.COMPUTING) { | ||
| throw new Error("recursive computed call"); | ||
@@ -323,7 +367,7 @@ } | ||
| return this._value; | ||
| return this._value!; | ||
| } | ||
| } | ||
| function computed(fn, checkFn) { | ||
| function computed<T>(fn: () => T, checkFn?: boolean | CheckFn<T>): ComputedGetter<T> { | ||
| const comp = new Computed(fn, checkFn); | ||
@@ -338,12 +382,8 @@ const get = comp._getValue.bind(comp); | ||
| type ReactionDestructorFn = void | undefined | (() => void); | ||
| type ReactionFn = () => ReactionDestructorFn; | ||
| class Reaction { | ||
| public declare _fn: ReactionFn; | ||
| public declare _manager?: () => void; | ||
| public declare _subscriptions: Array<Observable | Computed>; | ||
| public declare _subscriptions: Array<Subscription>; | ||
| public declare _destructor: ReactionDestructorFn; | ||
| public declare _isDestroyed: boolean; | ||
| public declare _shouldSubscribe: boolean; | ||
@@ -356,22 +396,32 @@ constructor(fn: ReactionFn, manager?: () => void) { | ||
| this._isDestroyed = false; | ||
| this._shouldSubscribe = true; | ||
| } | ||
| _subscribe() { | ||
| this._subscriptions.forEach((subs) => subs._addSubscriber(this)); | ||
| _addSubscription(subscription: Subscription): void { | ||
| if (subscription._addSubscriber(this)) { | ||
| this._subscriptions.push(subscription); | ||
| } | ||
| } | ||
| _unsubscribe() { | ||
| this._subscriptions.forEach((subs) => subs._removeSubscriber(this)); | ||
| _notify(state: State, subscription: Subscription): void { | ||
| if (state === State.MAYBE_DIRTY) { | ||
| stateActualizationQueue.push(subscription as Computed); | ||
| } else { | ||
| this._unsubscribeAndRemove(); | ||
| reactionsQueue.push(this); | ||
| } | ||
| } | ||
| _unsubscribeAndRemove() { | ||
| this._unsubscribe(); | ||
| _unsubscribeAndRemove(): void { | ||
| this._subscriptions.forEach((subs) => { | ||
| subs._removeSubscriber(this); | ||
| }); | ||
| this._subscriptions = []; | ||
| this._destructor && this._destructor(); | ||
| this._subscriptions = []; | ||
| this._destructor = undefined; | ||
| } | ||
| _runManager() { | ||
| _runManager(): void { | ||
| if (!this._isDestroyed) { | ||
| if (this._manager) { | ||
| this._unsubscribeAndRemove(); | ||
| this._manager(); | ||
@@ -384,3 +434,3 @@ } else { | ||
| _destroy() { | ||
| _destroy(): void { | ||
| this._unsubscribeAndRemove(); | ||
@@ -390,3 +440,3 @@ this._isDestroyed = true; | ||
| _run() { | ||
| _run(): void { | ||
| this._unsubscribeAndRemove(); | ||
@@ -405,26 +455,5 @@ | ||
| } | ||
| _addSubscription(subscription) { | ||
| if (!this._shouldSubscribe) { | ||
| this._subscriptions.push(subscription); | ||
| return; | ||
| } | ||
| if (!subscription._subscribers.has(this)) { | ||
| subscription._subscribers.add(this); | ||
| this._subscriptions.push(subscription); | ||
| } | ||
| } | ||
| _notify(state, subscription) { | ||
| if (state === States.MAYBE_DIRTY) { | ||
| stateActualizationQueue.push(subscription); | ||
| } else { | ||
| this._unsubscribeAndRemove(); | ||
| reactionsQueue.push(this); | ||
| } | ||
| } | ||
| } | ||
| function reaction(fn, manager) { | ||
| function reaction(fn: ReactionFn, manager?: () => void): () => void { | ||
| const r = new Reaction(fn, manager); | ||
@@ -448,4 +477,5 @@ const destructor = r._destroy.bind(r); | ||
| utx, | ||
| untracked, | ||
| action, | ||
| configure, | ||
| }; |
@@ -10,3 +10,3 @@ export { | ||
| } from "./core"; | ||
| export { shallow } from "./utils"; | ||
| export { useReactive } from "./react"; | ||
| export { shallowEquals } from "./utils"; | ||
| export { useObserver } from "./react"; |
@@ -1,27 +0,35 @@ | ||
| import { useMemo, useSyncExternalStore } from "react"; | ||
| import { Reaction } from './core'; | ||
| import { useMemo, useRef, useSyncExternalStore } from "react"; | ||
| import { Reaction } from "./core"; | ||
| const EMPTY_ARRAY = []; | ||
| export function useReactive() { | ||
| export function useObserver<R extends () => any>( | ||
| renderFn?: R | ||
| ): R extends () => any ? ReturnType<R> : Reaction { | ||
| const renderFnRef = useRef(renderFn); | ||
| const store = useMemo(() => { | ||
| let revision = {}; | ||
| let notify; | ||
| const it = new Reaction(() => { | ||
| let subscribers = new Set<() => void>(); | ||
| let renderResult = null; | ||
| const reactionBody = () => { | ||
| renderResult = renderFnRef.current?.(); | ||
| }; | ||
| const r = new Reaction(reactionBody, () => { | ||
| revision = {}; | ||
| notify && notify(); | ||
| subscribers.forEach((notify) => notify()); | ||
| }); | ||
| it._shouldSubscribe = false; | ||
| return { | ||
| _subscribe(_notify) { | ||
| notify = _notify; | ||
| it._shouldSubscribe = true; | ||
| it._subscribe(); | ||
| _subscribe(notify: () => void): () => void { | ||
| subscribers.add(notify); | ||
| return () => { | ||
| notify = null; | ||
| it._shouldSubscribe = false; | ||
| it._unsubscribe(); | ||
| subscribers.delete(notify); | ||
| if (subscribers.size === 0) { | ||
| r._unsubscribeAndRemove(); | ||
| } | ||
| }; | ||
@@ -32,13 +40,22 @@ }, | ||
| }, | ||
| _it: it, | ||
| _getRenderResult() { | ||
| return renderResult; | ||
| }, | ||
| _reaction: r, | ||
| }; | ||
| }, EMPTY_ARRAY); | ||
| const it = store._it; | ||
| const r = store._reaction; | ||
| it._unsubscribeAndRemove(); | ||
| useSyncExternalStore(store._subscribe, store._getRevision); | ||
| return it; | ||
| } | ||
| if (renderFn) { | ||
| r._run(); | ||
| return store._getRenderResult(); | ||
| } else { | ||
| r._unsubscribeAndRemove(); | ||
| return r as any; | ||
| } | ||
| } |
@@ -7,3 +7,3 @@ const hasOwnProperty = Object.prototype.hasOwnProperty; | ||
| export function shallow<T>(prev: T, next: T): boolean { | ||
| export function shallowEquals<T>(prev: T, next: T): boolean { | ||
| if (prev === next) { | ||
@@ -10,0 +10,0 @@ return true; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.24%
383071
- Number of package files
- increased by25%
20
- Lines of code
- increased by25%
680
- Number of low quality alerts
- decreased by-25%
3
- Number of lines in readme file
- increased by10133.33%
307
Worsened metrics
- Dev dependency count
- increased by166.67%
8
No dependency changes