UNPKG

react-signify

Version:

A JS library for predictable and maintainable global state management

3 lines (2 loc) 12 kB
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import n,{memo as o,useRef as s,useLayoutEffect as i,useEffect as a,useCallback as l,useState as c}from"react";function u(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function p(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}"function"==typeof SuppressedError&&SuppressedError,function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".signify_popup {\r\n font-size: 12px;\r\n width: 300px;\r\n height: 300px;\r\n background-color: white;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n position: fixed;\r\n display: block;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n box-sizing: border-box;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n}\r\n.signify_popup_header {\r\n cursor: move;\r\n display: flex;\r\n align-items: center;\r\n padding: 5px 20px;\r\n gap: 10px;\r\n font-size: 16px;\r\n color: white;\r\n user-select: none;\r\n}\r\n.signify_popup_header_button {\r\n cursor: pointer;\r\n}\r\n.signify_popup_header_label {\r\n margin-right: auto;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-wrap: nowrap;\r\n}\r\n.signify_popup_resizer {\r\n width: 20px;\r\n height: 20px;\r\n background-color: rgba(0, 0, 0, 0.1);\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n cursor: se-resize;\r\n border-radius: 10px 0px 10px;\r\n}\r\n.signify_popup_json_viewer {\r\n margin: 0;\r\n height: calc(100% - 32px);\r\n overflow: auto;\r\n padding: 10px 20px;\r\n white-space: pre;\r\n box-sizing: border-box;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar-thumb {\r\n background: gray;\r\n}\r\n.signify_popup_json_viewer::-webkit-scrollbar-track {\r\n background: #fff;\r\n}\r\n.signify_popup_json_key {\r\n color: brown;\r\n}\r\n.signify_popup_json_string {\r\n color: green;\r\n}\r\n.signify_popup_json_number {\r\n color: blue;\r\n}\r\n.signify_popup_json_boolean {\r\n color: purple;\r\n}\r\n.signify_popup_json_null {\r\n color: gray;\r\n}\r\n");let f=100;const h=n=>o((({name:o,pick:c=e=>e,color:u})=>{const p=s(null);let h=`rs-${o}`,d=!1,y=!1,g=0,v=0,m=0;i((()=>{var e;if(p.current){const{x:t,y:r,h:n,w:o}=JSON.parse(null!==(e=function(e){let t=e+"=",r=decodeURIComponent(document.cookie).split(";");for(let e=0;e<r.length;e++){let n=r[e];for(;" "==n.charAt(0);)n=n.substring(1);if(0==n.indexOf(t))return n.substring(t.length,n.length)}return null}(h))&&void 0!==e?e:"{}");t&&(p.current.style.left=t),r&&(p.current.style.top=r),o&&(p.current.style.width=o),n&&(p.current.style.height=n)}}),[]),a((()=>{const e=e=>{if(d&&p.current&&(p.current.style.left=e.clientX-g+"px",p.current.style.top=e.clientY-v+"px"),y&&p.current){const t=p.current.getBoundingClientRect(),r=e.clientX-t.left,n=e.clientY-t.top;r>100&&(p.current.style.width=`${r+10}px`),n>100&&(p.current.style.height=`${n+10}px`)}},t=()=>{d=!1,y=!1,document.body.style.cursor="default",p.current&&function(e,t,r=30){const n=new Date;n.setTime(n.getTime()+24*r*60*60*1e3);let o="expires="+n.toUTCString();document.cookie=e+"="+t+";"+o+";path=/"}(h,JSON.stringify({x:p.current.style.left,y:p.current.style.top,w:p.current.style.width,h:p.current.style.height}))};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",t),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",t)}}),[]);const b=l((({clientX:e,clientY:t})=>{var r,n;p.current&&(d=!0,p.current.style.zIndex=""+f++,g=e-(null===(r=p.current)||void 0===r?void 0:r.offsetLeft),v=t-(null===(n=p.current)||void 0===n?void 0:n.offsetTop))}),[]),w=l((e=>{y=!0,document.body.style.cursor="se-resize",e.preventDefault()}),[]),_=l((e=>()=>{p.current&&(p.current.style.fontSize||(p.current.style.fontSize="12px"),p.current.style.fontSize=Number(p.current.style.fontSize.replace("px",""))+(e?2:-2)+"px")}),[]),x=l((e=>("string"!=typeof e&&(e=JSON.stringify(e,void 0,2)),(e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")).replace(/("(\\u[a-zA-Z0-9]{4}|\ $^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,(function(e){let t="number";return/^"/.test(e)?t=/:$/.test(e)?"key":"string":/true|false/.test(e)?t="boolean":/null/.test(e)&&(t="null"),'<span class="signify_popup_json_'+t+'">'+e+"</span>"})))),[]);return e("div",{ref:p,className:"signify_popup",children:[e("div",{style:{backgroundColor:null!=u?u:`rgb(${Math.floor(128*Math.random())}, ${Math.floor(128*Math.random())}, ${Math.floor(128*Math.random())})`},className:"signify_popup_header",onMouseDown:b,children:[t("label",{className:"signify_popup_header_label",children:t(n,{children:()=>e(r,{children:[o," - ",++m]})})}),t("span",{className:"signify_popup_header_button",onClick:_(!0),dangerouslySetInnerHTML:{__html:"&bigtriangleup;"}}),t("span",{className:"signify_popup_header_button",onClick:_(!1),dangerouslySetInnerHTML:{__html:"&bigtriangledown;"}})]}),t(n,{children:e=>t("pre",{className:"signify_popup_json_viewer",dangerouslySetInnerHTML:{__html:x(JSON.stringify(c(e),null,2))}})}),t("div",{onMouseDown:w,className:"signify_popup_resizer"})]})}),(()=>!0)),d={LocalStorage:()=>localStorage,SesionStorage:()=>sessionStorage},y=(e,t)=>{var r;(null==t?void 0:t.key)&&d[null!==(r=null==t?void 0:t.type)&&void 0!==r?r:"LocalStorage"]().setItem(t.key,JSON.stringify(e))},g=e=>{if("object"!=typeof e||null===e)return e;const t=new WeakMap,r=new Map;r.set(Date,(e=>new Date(e))),r.set(Map,((e,t)=>new Map(Array.from(e.entries()).map((([e,r])=>[t(e),t(r)]))))),r.set(Set,((e,t)=>new Set(Array.from(e).map((e=>t(e)))))),r.set(RegExp,(e=>new RegExp(e.source,e.flags))),r.set(Error,((e,t)=>{const r=new Error(e.message);return e.stack&&(r.stack=e.stack),e.cause&&(r.cause=t(e.cause)),r})),r.set(URL,(e=>new URL(e.toString()))),r.set(Blob,(e=>e.slice(0,e.size,e.type))),r.set(File,(e=>new File([e.slice(0,e.size)],e.name,{type:e.type,lastModified:e.lastModified}))),r.set(FileList,((e,t)=>{const r=Array.from(e).map((e=>t(e)));return Object.defineProperty(r,"item",{value:e=>r[e],enumerable:!1})}));const n=e=>{if("object"!=typeof e||null===e)return e;if(t.has(e))return t.get(e);if(Array.isArray(e)){const r=[];t.set(e,r);for(let t=0;t<e.length;t++)r[t]=n(e[t]);return r}if(ArrayBuffer.isView(e))return(o=e)instanceof Buffer?Buffer.from(o):new o.constructor(o.buffer.slice(),o.byteOffset,o.length);var o;if(e.constructor!==Object&&r.has(e.constructor)){const o=r.get(e.constructor)(e,n);return"object"==typeof o&&null!==o&&t.set(e,o),o}const s=Object.create(Object.getPrototypeOf(e));t.set(e,s);for(const t of Object.keys(e))s[t]=n(e[t]);for(const t of Object.getOwnPropertyNames(e))if(!Object.prototype.propertyIsEnumerable.call(e,t)){const r=Object.getOwnPropertyDescriptor(e,t);r&&(void 0!==r.value&&(r.value=n(r.value)),Object.defineProperty(s,t,r))}for(const t of Object.getOwnPropertySymbols(e)){const r=Object.getOwnPropertyDescriptor(e,t);r&&(void 0!==r.value&&(r.value=n(r.value)),Object.defineProperty(s,t,r))}return s};return n(e)},v=(e,t)=>{if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){if(e.constructor!==t.constructor)return!1;var r,n,o;if(Array.isArray(e)){if((r=e.length)!=t.length)return!1;for(n=r;0!=n--;)if(!v(e[n],t[n]))return!1;return!0}if(e.constructor===RegExp)return e.source===t.source&&e.flags===t.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===t.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===t.toString();if((r=(o=Object.keys(e)).length)!==Object.keys(t).length)return!1;for(n=r;0!=n--;)if(!Object.prototype.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){var s=o[n];if(!v(e[s],t[s]))return!1}return!0}return e!=e&&t!=t},m=e=>(t,r)=>{i((()=>(e.add(t),()=>{e.delete(t)})),null!=r?r:[])},b=(e,t)=>r=>{const n=c({})[1],o=s((()=>{let e=null==r?void 0:r(t());return()=>{if(r){let n=r(t());if(v(e,n))return;e=n}n({})}})());return i((()=>(e.add(o.current),()=>{e.delete(o.current)})),[]),r?r(t()):t()},w=e=>n.createElement((()=>e())),_=e=>({children:t})=>t(e()),x=e=>o(_(e),(()=>!0));var k,S,j,O,M,E,N,T,z,W,C;class L{constructor(e,t){if(k.set(this,!0),S.set(this,void 0),j.set(this,void 0),O.set(this,void 0),M.set(this,new Set),E.set(this,new Set),N.set(this,void 0),T.set(this,void 0),z.set(this,void 0),W.set(this,((e=!0)=>{!u(this,k,"f")||u(this,z,"f")&&!u(this,z,"f").call(this,this.value)||u(this,M,"f").forEach((e=>e(this.value))),e&&u(this,E,"f").forEach((e=>e(this.value)))})),C.set(this,(e=>{var t,r;void 0!==e&&p(this,j,e,"f"),y(this.value,null===(t=u(this,O,"f"))||void 0===t?void 0:t.cache),null===(r=u(this,N,"f"))||void 0===r||r.call(this,this.value),u(this,W,"f").call(this)})),this.set=e=>{let t;if("function"==typeof e){let r={value:g(u(this,j,"f"))};e(r),t=r.value}else t=e;v(this.value,t)||u(this,T,"f")&&!u(this,T,"f").call(this,this.value,t)||u(this,C,"f").call(this,t)},this.stop=()=>{p(this,k,!1,"f")},this.resume=()=>{p(this,k,!0,"f"),u(this,W,"f").call(this,!1)},this.reset=()=>{u(this,C,"f").call(this,g(u(this,S,"f")))},this.conditionUpdating=e=>p(this,T,e,"f"),this.conditionRendering=e=>p(this,z,e,"f"),this.use=b(u(this,M,"f"),(()=>this.value)),this.watch=m(u(this,E,"f")),this.html=w(this.use),this.Wrap=_(this.use),this.HardWrap=x(this.use),this.slice=e=>{let t,r=e(this.value),n=!0;const o=new Set,s=new Set,i=(i=!0)=>{const a=e(this.value);!n||t&&!t(a)||(r=a,o.forEach((e=>e(a)))),i&&s.forEach((e=>e(a)))},a=b(o,(()=>r)),l={value:r,use:a,watch:m(s),html:w(a),Wrap:_(a),HardWrap:x(a),stop:()=>n=!1,resume:()=>{n=!0,i(!1)},conditionRendering:e=>t=e,DevTool:h(x(b(s,(()=>e(this.value)))))};return u(this,M,"f").add((()=>{v(e(this.value),r)||i()})),Object.defineProperty(l,"value",{get:()=>r,enumerable:!1,configurable:!1}),l},this.DevTool=h(x(b(u(this,E,"f"),(()=>this.value)))),p(this,S,e,"f"),p(this,j,((e,t)=>{var r;if(null==t?void 0:t.key){if("undefined"==typeof window)throw new Error("The cache feature is not recommended for Server-Side Rendering. Please remove the cache properties from the Signify variable.");const n=null!==(r=null==t?void 0:t.type)&&void 0!==r?r:"LocalStorage",o=d[n]().getItem(t.key);if(o)return JSON.parse(o);d[n]().setItem(t.key,JSON.stringify(e))}return e})(g(e),null==t?void 0:t.cache),"f"),p(this,O,t,"f"),null==t?void 0:t.syncKey){const{post:e,sync:r}=(({key:e,cb:t})=>{const r=`bc_${e}`,n=new BroadcastChannel(r);return n.onmessage=e=>t(e.data),{post:e=>{n.postMessage(e)},sync:e=>{const t=new BroadcastChannel("bcs");t.onmessage=t=>r===t.data&&n.postMessage(e()),t.postMessage(r)}}})({key:t.syncKey,cb:e=>{var t;p(this,j,e,"f"),y(this.value,null===(t=u(this,O,"f"))||void 0===t?void 0:t.cache),u(this,W,"f").call(this)}});p(this,N,e,"f"),r((()=>this.value))}}get value(){return u(this,j,"f")}}k=new WeakMap,S=new WeakMap,j=new WeakMap,O=new WeakMap,M=new WeakMap,E=new WeakMap,N=new WeakMap,T=new WeakMap,z=new WeakMap,W=new WeakMap,C=new WeakMap;const P=(e,t)=>new L(e,t);export{P as signify}; //# sourceMappingURL=index.js.map