react-sync-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Jakub Švehla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# React sync ui

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const syncUIFactory: () => {
+    makeSyncUI: <ArgData, ResolveValue = void>(SyncUserComp: import("react").FC<{
+        data: ArgData;
+        resolve: (value: ResolveValue) => void;
+        reject: (reason?: any) => void;
+    }>) => (input: ArgData) => Promise<ResolveValue>;
+    RegisterSyncUI: () => JSX.Element;
+};
+export declare const makeSyncUI: <ArgData, ResolveValue = void>(SyncUserComp: import("react").FC<{
+    data: ArgData;
+    resolve: (value: ResolveValue) => void;
+    reject: (reason?: any) => void;
+}>) => (input: ArgData) => Promise<ResolveValue>, RegisterSyncUI: () => JSX.Element;

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./react-sync-ui.cjs.production.min.js')
+} else {
+  module.exports = require('./react-sync-ui.cjs.development.js')
+}

package/dist/react-sync-ui.cjs.development.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var useComponentDidMount = function useComponentDidMount(fn) {
+  React.useEffect(fn, []);
+};
+
+var getSingletonCompCheck = function getSingletonCompCheck(errorMsg) {
+  var globalMountCounter = 0;
+  return function () {
+    useComponentDidMount(function () {
+      if (globalMountCounter > 0) throw new Error(errorMsg);
+      globalMountCounter++;
+    });
+    return React__default.createElement(React__default.Fragment, null);
+  };
+}; // TODO: add docs + add tests
+
+
+var useAsyncQueue = function useAsyncQueue() {
+  var _asyncQueue$, _asyncQueue$2;
+
+  var _useState = React.useState([]),
+      asyncQueue = _useState[0],
+      setAsyncQueue = _useState[1];
+
+  var registerToQueue = React.useCallback(function (type, data) {
+    return new Promise(function (resolve, reject) {
+      return setAsyncQueue(function (p) {
+        return [].concat(p, [{
+          type: type,
+          data: data,
+          resolve: resolve,
+          reject: reject
+        }]);
+      });
+    });
+  }, []);
+  var resolveHeadItem = React.useCallback(function (value) {
+    setAsyncQueue(function (queue) {
+      var first = queue[0],
+          rest = queue.slice(1);
+      first == null ? void 0 : first.resolve(value);
+      return rest;
+    });
+  }, []);
+  var rejectHeadItem = React.useCallback(function (reason) {
+    setAsyncQueue(function (queue) {
+      var first = queue[0],
+          rest = queue.slice(1);
+      first == null ? void 0 : first.reject(reason);
+      return rest;
+    });
+  }, []);
+  return {
+    head: asyncQueue[0] ? {
+      data: (_asyncQueue$ = asyncQueue[0]) == null ? void 0 : _asyncQueue$.data,
+      type: (_asyncQueue$2 = asyncQueue[0]) == null ? void 0 : _asyncQueue$2.type,
+      resolve: resolveHeadItem,
+      reject: rejectHeadItem
+    } : undefined,
+    registerToQueue: registerToQueue
+  };
+};
+var syncUIFactory = function syncUIFactory() {
+  var mutSyncUIComponentsRenderQueue = [];
+  var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <RegisterSyncUI /> just one time");
+  return {
+    makeSyncUI: function makeSyncUI(SyncUserComp) {
+      var _ref, _SyncUserComp$display;
+
+      var _debugName = (_ref = (_SyncUserComp$display = SyncUserComp.displayName) != null ? _SyncUserComp$display : SyncUserComp.name) != null ? _ref : "uniqSymbolMessageType";
+
+      var syncUIComponentType = Symbol(_debugName); // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called
+
+      var singletonSyncUIRef = {
+        registerToQueue: undefined
+      };
+
+      var SyncUISingletonComp = function SyncUISingletonComp(props) {
+        useComponentDidMount(function () {
+          singletonSyncUIRef.registerToQueue = props.registerToQueue;
+          return function () {
+            return singletonSyncUIRef.registerToQueue = undefined;
+          };
+        });
+        if (!props.head) return null;
+        if (props.head.type !== syncUIComponentType) return null;
+        return React__default.createElement(SyncUserComp, {
+          data: props.head.data,
+          resolve: props.head.resolve,
+          reject: props.head.reject
+        });
+      };
+
+      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
+      return function (input) {
+        if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <RegisterSyncUI />");
+        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
+      };
+    },
+    RegisterSyncUI: function RegisterSyncUI() {
+      var queue = useAsyncQueue();
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
+        return React__default.createElement(React__default.Fragment, {
+          key: key
+        }, React__default.createElement(SyncComp, Object.assign({}, queue)));
+      }));
+    }
+  };
+};
+
+var syncUIFactory$1 = syncUIFactory;
+
+var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
+    makeSyncUI = _syncUIFactory2.makeSyncUI,
+    RegisterSyncUI = _syncUIFactory2.RegisterSyncUI;
+
+exports.RegisterSyncUI = RegisterSyncUI;
+exports.makeSyncUI = makeSyncUI;
+exports.syncUIFactory = syncUIFactory$1;
+//# sourceMappingURL=react-sync-ui.cjs.development.js.map

package/dist/react-sync-ui.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-sync-ui.cjs.development.js","sources":["../src/syncUI.tsx","../src/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nexport const useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\nconst getSingletonCompCheck = (errorMsg: string) => {\n  let globalMountCounter = 0;\n\n  return () => {\n    useComponentDidMount(() => {\n      if (globalMountCounter > 0) throw new Error(errorMsg);\n      globalMountCounter++;\n    });\n    return <React.Fragment />;\n  };\n};\n\n// TODO: add docs + add tests\nexport const useAsyncQueue = <Data, ResolveValue = void>() => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      // TODO: rename type into typeId\n      type: Symbol;\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const registerToQueue = useCallback((type: Symbol, data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) => setAsyncQueue(p => [...p, { type, data, resolve, reject }]));\n  }, []);\n\n  const resolveHeadItem = useCallback((value: ResolveValue) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.resolve(value);\n      return rest;\n    });\n  }, []);\n\n  const rejectHeadItem = useCallback((reason?: any) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.reject(reason);\n      return rest;\n    });\n  }, []);\n\n  return {\n    head: asyncQueue[0]\n      ? {\n          data: asyncQueue[0]?.data,\n          type: asyncQueue[0]?.type,\n          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    registerToQueue\n  };\n};\n// https://github.com/jaredpalmer/tsdx/issues/200???\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// type QueueItem<Data, ResolveValue> = ReturnType<typeof useAsyncQueue<any, any>>\ntype QueueItem<Data, ResolveValue> = {\n  head:\n    | {\n        data: Data;\n        type: Symbol;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }\n    | undefined;\n  registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;\n};\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<QueueItem<any, any>>[];\n\n  const ThrowIfMoreInstances = getSingletonCompCheck(\"You have to init <RegisterSyncUI /> just one time\");\n\n  return {\n    makeSyncUI: <ArgData, ResolveValue = void>(\n      SyncUserComp: React.FC<{\n        data: ArgData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      const _debugName = SyncUserComp.displayName ?? SyncUserComp.name ?? \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        registerToQueue: undefined as undefined | QueueItem<ArgData, ResolveValue>[\"registerToQueue\"]\n      };\n\n      const SyncUISingletonComp = (props: QueueItem<ArgData, ResolveValue>) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.registerToQueue = props.registerToQueue;\n          return () => (singletonSyncUIRef.registerToQueue = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.type !== syncUIComponentType) return null;\n\n        return <SyncUserComp data={props.head.data} resolve={props.head.resolve} reject={props.head.reject} />;\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);\n\n      return (input: ArgData) => {\n        if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <RegisterSyncUI />`);\n        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n      };\n    },\n    RegisterSyncUI: () => {\n      const queue = useAsyncQueue();\n      return (\n        <>\n          <ThrowIfMoreInstances />\n          {mutSyncUIComponentsRenderQueue.map((SyncComp, key) => (\n            <React.Fragment key={key}>\n              <SyncComp {...queue} />\n            </React.Fragment>\n          ))}\n        </>\n      );\n    }\n  };\n};\n","import { syncUIFactory as _syncUIFactory } from \"./syncUI\";\nexport const syncUIFactory = _syncUIFactory;\nexport const { makeSyncUI, RegisterSyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","getSingletonCompCheck","errorMsg","globalMountCounter","Error","React","Fragment","useAsyncQueue","useState","asyncQueue","setAsyncQueue","registerToQueue","useCallback","type","data","Promise","resolve","reject","p","resolveHeadItem","value","queue","first","rest","rejectHeadItem","reason","head","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","ThrowIfMoreInstances","makeSyncUI","SyncUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComp","props","push","input","RegisterSyncUI","map","SyncComp","key","_syncUIFactory"],"mappings":"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"}

package/dist/react-sync-ui.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=function(e){t.useEffect(e,[])},u=function(){var e,u=[],o=(e=0,function(){return n((function(){if(e>0)throw new Error("You have to init <RegisterSyncUI /> just one time");e++})),r.createElement(r.Fragment,null)});return{makeSyncUI:function(e){var t,o,a=null!=(t=null!=(o=e.displayName)?o:e.name)?t:"uniqSymbolMessageType",i=Symbol(a),c={registerToQueue:void 0};return u.push((function(t){return n((function(){return c.registerToQueue=t.registerToQueue,function(){return c.registerToQueue=void 0}})),t.head?t.head.type!==i?null:r.createElement(e,{data:t.head.data,resolve:t.head.resolve,reject:t.head.reject}):null})),function(e){if(!c.registerToQueue)throw new Error("You have to initialize <RegisterSyncUI />");return c.registerToQueue(i,e)}},RegisterSyncUI:function(){var e,n,a,i,c,l,s,f,d=(i=(a=t.useState([]))[0],c=a[1],l=t.useCallback((function(e,t){return new Promise((function(r,n){return c((function(u){return[].concat(u,[{type:e,data:t,resolve:r,reject:n}])}))}))}),[]),s=t.useCallback((function(e){c((function(t){var r=t[0],n=t.slice(1);return null==r||r.resolve(e),n}))}),[]),f=t.useCallback((function(e){c((function(t){var r=t[0],n=t.slice(1);return null==r||r.reject(e),n}))}),[]),{head:i[0]?{data:null==(e=i[0])?void 0:e.data,type:null==(n=i[0])?void 0:n.type,resolve:s,reject:f}:void 0,registerToQueue:l});return r.createElement(r.Fragment,null,r.createElement(o,null),u.map((function(e,t){return r.createElement(r.Fragment,{key:t},r.createElement(e,Object.assign({},d)))})))}}},o=u(),a=o.makeSyncUI;exports.RegisterSyncUI=o.RegisterSyncUI,exports.makeSyncUI=a,exports.syncUIFactory=u;
+//# sourceMappingURL=react-sync-ui.cjs.production.min.js.map

package/dist/react-sync-ui.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-sync-ui.cjs.production.min.js","sources":["../src/syncUI.tsx","../src/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nexport const useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\nconst getSingletonCompCheck = (errorMsg: string) => {\n  let globalMountCounter = 0;\n\n  return () => {\n    useComponentDidMount(() => {\n      if (globalMountCounter > 0) throw new Error(errorMsg);\n      globalMountCounter++;\n    });\n    return <React.Fragment />;\n  };\n};\n\n// TODO: add docs + add tests\nexport const useAsyncQueue = <Data, ResolveValue = void>() => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      // TODO: rename type into typeId\n      type: Symbol;\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const registerToQueue = useCallback((type: Symbol, data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) => setAsyncQueue(p => [...p, { type, data, resolve, reject }]));\n  }, []);\n\n  const resolveHeadItem = useCallback((value: ResolveValue) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.resolve(value);\n      return rest;\n    });\n  }, []);\n\n  const rejectHeadItem = useCallback((reason?: any) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.reject(reason);\n      return rest;\n    });\n  }, []);\n\n  return {\n    head: asyncQueue[0]\n      ? {\n          data: asyncQueue[0]?.data,\n          type: asyncQueue[0]?.type,\n          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    registerToQueue\n  };\n};\n// https://github.com/jaredpalmer/tsdx/issues/200???\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// type QueueItem<Data, ResolveValue> = ReturnType<typeof useAsyncQueue<any, any>>\ntype QueueItem<Data, ResolveValue> = {\n  head:\n    | {\n        data: Data;\n        type: Symbol;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }\n    | undefined;\n  registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;\n};\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<QueueItem<any, any>>[];\n\n  const ThrowIfMoreInstances = getSingletonCompCheck(\"You have to init <RegisterSyncUI /> just one time\");\n\n  return {\n    makeSyncUI: <ArgData, ResolveValue = void>(\n      SyncUserComp: React.FC<{\n        data: ArgData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      const _debugName = SyncUserComp.displayName ?? SyncUserComp.name ?? \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        registerToQueue: undefined as undefined | QueueItem<ArgData, ResolveValue>[\"registerToQueue\"]\n      };\n\n      const SyncUISingletonComp = (props: QueueItem<ArgData, ResolveValue>) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.registerToQueue = props.registerToQueue;\n          return () => (singletonSyncUIRef.registerToQueue = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.type !== syncUIComponentType) return null;\n\n        return <SyncUserComp data={props.head.data} resolve={props.head.resolve} reject={props.head.reject} />;\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);\n\n      return (input: ArgData) => {\n        if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <RegisterSyncUI />`);\n        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n      };\n    },\n    RegisterSyncUI: () => {\n      const queue = useAsyncQueue();\n      return (\n        <>\n          <ThrowIfMoreInstances />\n          {mutSyncUIComponentsRenderQueue.map((SyncComp, key) => (\n            <React.Fragment key={key}>\n              <SyncComp {...queue} />\n            </React.Fragment>\n          ))}\n        </>\n      );\n    }\n  };\n};\n","import { syncUIFactory as _syncUIFactory } from \"./syncUI\";\nexport const syncUIFactory = _syncUIFactory;\nexport const { makeSyncUI, RegisterSyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","syncUIFactory","globalMountCounter","mutSyncUIComponentsRenderQueue","ThrowIfMoreInstances","Error","React","Fragment","makeSyncUI","SyncUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","registerToQueue","undefined","push","props","head","type","data","resolve","reject","input","RegisterSyncUI","asyncQueue","setAsyncQueue","resolveHeadItem","rejectHeadItem","queue","useState","useCallback","Promise","p","value","first","rest","reason","_asyncQueue$","_asyncQueue$2","map","SyncComp","key"],"mappings":"oJAEaA,EAAuB,SAACC,GACnCC,YAAUD,EAAI,KCFHE,ED4EgB,eAtEvBC,EAuEEC,EAAiC,GAEjCC,GAzEFF,EAAqB,EAElB,kBACLJ,GAAqB,cACfI,EAAqB,EAAG,MAAM,IAAIG,MAqES,qDApE/CH,OAEKI,gBAACA,EAAMC,uBAoET,CACLC,WAAY,SACVC,WAMMC,oBAAaD,EAAaE,eAAeF,EAAaG,QAAQ,wBAE9DC,EAAsBC,OAAOJ,GAG7BK,EAAqB,CACzBC,qBAAiBC,UAenBd,EAA+Be,MAZH,SAACC,UAC3BrB,GAAqB,kBACnBiB,EAAmBC,gBAAkBG,EAAMH,gBACpC,kBAAOD,EAAmBC,qBAAkBC,MAGhDE,EAAMC,KACPD,EAAMC,KAAKC,OAASR,EAA4B,KAE7CP,gBAACG,GAAaa,KAAMH,EAAMC,KAAKE,KAAMC,QAASJ,EAAMC,KAAKG,QAASC,OAAQL,EAAMC,KAAKI,SAHpE,QAQnB,SAACC,OACDV,EAAmBC,gBAAiB,MAAM,IAAIX,0DAC5CU,EAAmBC,gBAAgBH,EAAqBY,KAGnEC,eAAgB,qBAlGXC,EAAYC,EAUbZ,EAIAa,EAQAC,EA6EIC,GAnGHJ,KAA6BK,WAClC,QADiBJ,OAUbZ,EAAkBiB,eAAY,SAACZ,EAAcC,UAC1C,IAAIY,SAAsB,SAACX,EAASC,UAAWI,GAAc,SAAAO,mBAASA,GAAG,CAAEd,KAAAA,EAAMC,KAAAA,EAAMC,QAAAA,EAASC,OAAAA,aACtG,IAEGK,EAAkBI,eAAY,SAACG,GACnCR,GAAc,SAAAG,OACLM,EAAkBN,KAARO,EAAQP,wBACzBM,GAAAA,EAAOd,QAAQa,GACRE,OAER,IAEGR,EAAiBG,eAAY,SAACM,GAClCX,GAAc,SAAAG,OACLM,EAAkBN,KAARO,EAAQP,wBACzBM,GAAAA,EAAOb,OAAOe,GACPD,OAER,IAEI,CACLlB,KAAMO,EAAW,GACb,CACEL,cAAMK,EAAW,WAAXa,EAAelB,KACrBD,cAAMM,EAAW,WAAXc,EAAepB,KACrBE,QAASM,EACTL,OAAQM,QAEVb,EACJD,gBAAAA,WA8DIV,gCACEA,gBAACF,QACAD,EAA+BuC,KAAI,SAACC,EAAUC,UAC7CtC,gBAACA,EAAMC,UAASqC,IAAKA,GACnBtC,gBAACqC,mBAAaZ,cC3HkB9B,IAA/BO,IAAAA,oCAAYkB"}

package/dist/react-sync-ui.esm.js

@@ -0,0 +1,119 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+var useComponentDidMount = function useComponentDidMount(fn) {
+  useEffect(fn, []);
+};
+
+var getSingletonCompCheck = function getSingletonCompCheck(errorMsg) {
+  var globalMountCounter = 0;
+  return function () {
+    useComponentDidMount(function () {
+      if (globalMountCounter > 0) throw new Error(errorMsg);
+      globalMountCounter++;
+    });
+    return React.createElement(React.Fragment, null);
+  };
+}; // TODO: add docs + add tests
+
+
+var useAsyncQueue = function useAsyncQueue() {
+  var _asyncQueue$, _asyncQueue$2;
+
+  var _useState = useState([]),
+      asyncQueue = _useState[0],
+      setAsyncQueue = _useState[1];
+
+  var registerToQueue = useCallback(function (type, data) {
+    return new Promise(function (resolve, reject) {
+      return setAsyncQueue(function (p) {
+        return [].concat(p, [{
+          type: type,
+          data: data,
+          resolve: resolve,
+          reject: reject
+        }]);
+      });
+    });
+  }, []);
+  var resolveHeadItem = useCallback(function (value) {
+    setAsyncQueue(function (queue) {
+      var first = queue[0],
+          rest = queue.slice(1);
+      first == null ? void 0 : first.resolve(value);
+      return rest;
+    });
+  }, []);
+  var rejectHeadItem = useCallback(function (reason) {
+    setAsyncQueue(function (queue) {
+      var first = queue[0],
+          rest = queue.slice(1);
+      first == null ? void 0 : first.reject(reason);
+      return rest;
+    });
+  }, []);
+  return {
+    head: asyncQueue[0] ? {
+      data: (_asyncQueue$ = asyncQueue[0]) == null ? void 0 : _asyncQueue$.data,
+      type: (_asyncQueue$2 = asyncQueue[0]) == null ? void 0 : _asyncQueue$2.type,
+      resolve: resolveHeadItem,
+      reject: rejectHeadItem
+    } : undefined,
+    registerToQueue: registerToQueue
+  };
+};
+var syncUIFactory = function syncUIFactory() {
+  var mutSyncUIComponentsRenderQueue = [];
+  var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <RegisterSyncUI /> just one time");
+  return {
+    makeSyncUI: function makeSyncUI(SyncUserComp) {
+      var _ref, _SyncUserComp$display;
+
+      var _debugName = (_ref = (_SyncUserComp$display = SyncUserComp.displayName) != null ? _SyncUserComp$display : SyncUserComp.name) != null ? _ref : "uniqSymbolMessageType";
+
+      var syncUIComponentType = Symbol(_debugName); // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called
+
+      var singletonSyncUIRef = {
+        registerToQueue: undefined
+      };
+
+      var SyncUISingletonComp = function SyncUISingletonComp(props) {
+        useComponentDidMount(function () {
+          singletonSyncUIRef.registerToQueue = props.registerToQueue;
+          return function () {
+            return singletonSyncUIRef.registerToQueue = undefined;
+          };
+        });
+        if (!props.head) return null;
+        if (props.head.type !== syncUIComponentType) return null;
+        return React.createElement(SyncUserComp, {
+          data: props.head.data,
+          resolve: props.head.resolve,
+          reject: props.head.reject
+        });
+      };
+
+      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
+      return function (input) {
+        if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <RegisterSyncUI />");
+        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
+      };
+    },
+    RegisterSyncUI: function RegisterSyncUI() {
+      var queue = useAsyncQueue();
+      return React.createElement(React.Fragment, null, React.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
+        return React.createElement(React.Fragment, {
+          key: key
+        }, React.createElement(SyncComp, Object.assign({}, queue)));
+      }));
+    }
+  };
+};
+
+var syncUIFactory$1 = syncUIFactory;
+
+var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
+    makeSyncUI = _syncUIFactory2.makeSyncUI,
+    RegisterSyncUI = _syncUIFactory2.RegisterSyncUI;
+
+export { RegisterSyncUI, makeSyncUI, syncUIFactory$1 as syncUIFactory };
+//# sourceMappingURL=react-sync-ui.esm.js.map

package/dist/react-sync-ui.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-sync-ui.esm.js","sources":["../src/syncUI.tsx","../src/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nexport const useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\nconst getSingletonCompCheck = (errorMsg: string) => {\n  let globalMountCounter = 0;\n\n  return () => {\n    useComponentDidMount(() => {\n      if (globalMountCounter > 0) throw new Error(errorMsg);\n      globalMountCounter++;\n    });\n    return <React.Fragment />;\n  };\n};\n\n// TODO: add docs + add tests\nexport const useAsyncQueue = <Data, ResolveValue = void>() => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      // TODO: rename type into typeId\n      type: Symbol;\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const registerToQueue = useCallback((type: Symbol, data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) => setAsyncQueue(p => [...p, { type, data, resolve, reject }]));\n  }, []);\n\n  const resolveHeadItem = useCallback((value: ResolveValue) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.resolve(value);\n      return rest;\n    });\n  }, []);\n\n  const rejectHeadItem = useCallback((reason?: any) => {\n    setAsyncQueue(queue => {\n      const [first, ...rest] = queue;\n      first?.reject(reason);\n      return rest;\n    });\n  }, []);\n\n  return {\n    head: asyncQueue[0]\n      ? {\n          data: asyncQueue[0]?.data,\n          type: asyncQueue[0]?.type,\n          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    registerToQueue\n  };\n};\n// https://github.com/jaredpalmer/tsdx/issues/200???\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// type QueueItem<Data, ResolveValue> = ReturnType<typeof useAsyncQueue<any, any>>\ntype QueueItem<Data, ResolveValue> = {\n  head:\n    | {\n        data: Data;\n        type: Symbol;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }\n    | undefined;\n  registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;\n};\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<QueueItem<any, any>>[];\n\n  const ThrowIfMoreInstances = getSingletonCompCheck(\"You have to init <RegisterSyncUI /> just one time\");\n\n  return {\n    makeSyncUI: <ArgData, ResolveValue = void>(\n      SyncUserComp: React.FC<{\n        data: ArgData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      const _debugName = SyncUserComp.displayName ?? SyncUserComp.name ?? \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        registerToQueue: undefined as undefined | QueueItem<ArgData, ResolveValue>[\"registerToQueue\"]\n      };\n\n      const SyncUISingletonComp = (props: QueueItem<ArgData, ResolveValue>) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.registerToQueue = props.registerToQueue;\n          return () => (singletonSyncUIRef.registerToQueue = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.type !== syncUIComponentType) return null;\n\n        return <SyncUserComp data={props.head.data} resolve={props.head.resolve} reject={props.head.reject} />;\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);\n\n      return (input: ArgData) => {\n        if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <RegisterSyncUI />`);\n        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n      };\n    },\n    RegisterSyncUI: () => {\n      const queue = useAsyncQueue();\n      return (\n        <>\n          <ThrowIfMoreInstances />\n          {mutSyncUIComponentsRenderQueue.map((SyncComp, key) => (\n            <React.Fragment key={key}>\n              <SyncComp {...queue} />\n            </React.Fragment>\n          ))}\n        </>\n      );\n    }\n  };\n};\n","import { syncUIFactory as _syncUIFactory } from \"./syncUI\";\nexport const syncUIFactory = _syncUIFactory;\nexport const { makeSyncUI, RegisterSyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","getSingletonCompCheck","errorMsg","globalMountCounter","Error","React","Fragment","useAsyncQueue","useState","asyncQueue","setAsyncQueue","registerToQueue","useCallback","type","data","Promise","resolve","reject","p","resolveHeadItem","value","queue","first","rest","rejectHeadItem","reason","head","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","ThrowIfMoreInstances","makeSyncUI","SyncUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComp","props","push","input","RegisterSyncUI","map","SyncComp","key","_syncUIFactory"],"mappings":"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"}

package/dist/syncUI.d.ts

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+export declare const useComponentDidMount: (fn: Parameters<typeof useEffect>[0]) => void;
+export declare const useAsyncQueue: <Data, ResolveValue = void>() => {
+    head: {
+        data: Data;
+        type: Symbol;
+        resolve: (value: ResolveValue) => void;
+        reject: (reason?: any) => void;
+    } | undefined;
+    registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;
+};
+export declare const syncUIFactory: () => {
+    makeSyncUI: <ArgData, ResolveValue = void>(SyncUserComp: React.FC<{
+        data: ArgData;
+        resolve: (value: ResolveValue) => void;
+        reject: (reason?: any) => void;
+    }>) => (input: ArgData) => Promise<ResolveValue>;
+    RegisterSyncUI: () => JSX.Element;
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "react-sync-ui",
+  "version": "0.0.1",
+  "repository": "https://github.com/Svehla/react-sync-ui",
+  "license": "MIT",
+  "author": "Jakub Švehla",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "analyze": "size-limit --why",
+    "build": "tsdx build",
+    "lint": "tsdx lint",
+    "lint:fix": "tsdx lint --fix",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "start": "tsdx watch",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --passWithNoTests --watchAll"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^5.0.5",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "husky": "^7.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^5.0.5",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "size-limit": []
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import { syncUIFactory as _syncUIFactory } from "./syncUI";
+export const syncUIFactory = _syncUIFactory;
+export const { makeSyncUI, RegisterSyncUI } = syncUIFactory();

package/src/syncUI.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+export const useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {
+  useEffect(fn, []);
+};
+
+const getSingletonCompCheck = (errorMsg: string) => {
+  let globalMountCounter = 0;
+
+  return () => {
+    useComponentDidMount(() => {
+      if (globalMountCounter > 0) throw new Error(errorMsg);
+      globalMountCounter++;
+    });
+    return <React.Fragment />;
+  };
+};
+
+// TODO: add docs + add tests
+export const useAsyncQueue = <Data, ResolveValue = void>() => {
+  const [asyncQueue, setAsyncQueue] = useState(
+    [] as {
+      // TODO: rename type into typeId
+      type: Symbol;
+      data: Data;
+      resolve: (arg: ResolveValue) => void;
+      reject: (arg: any) => void;
+    }[]
+  );
+
+  const registerToQueue = useCallback((type: Symbol, data: Data) => {
+    return new Promise<ResolveValue>((resolve, reject) => setAsyncQueue(p => [...p, { type, data, resolve, reject }]));
+  }, []);
+
+  const resolveHeadItem = useCallback((value: ResolveValue) => {
+    setAsyncQueue(queue => {
+      const [first, ...rest] = queue;
+      first?.resolve(value);
+      return rest;
+    });
+  }, []);
+
+  const rejectHeadItem = useCallback((reason?: any) => {
+    setAsyncQueue(queue => {
+      const [first, ...rest] = queue;
+      first?.reject(reason);
+      return rest;
+    });
+  }, []);
+
+  return {
+    head: asyncQueue[0]
+      ? {
+          data: asyncQueue[0]?.data,
+          type: asyncQueue[0]?.type,
+          resolve: resolveHeadItem,
+          reject: rejectHeadItem
+        }
+      : undefined,
+    registerToQueue
+  };
+};
+// https://github.com/jaredpalmer/tsdx/issues/200???
+// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...
+// type QueueItem<Data, ResolveValue> = ReturnType<typeof useAsyncQueue<any, any>>
+type QueueItem<Data, ResolveValue> = {
+  head:
+    | {
+        data: Data;
+        type: Symbol;
+        resolve: (value: ResolveValue) => void;
+        reject: (reason?: any) => void;
+      }
+    | undefined;
+  registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;
+};
+
+export const syncUIFactory = () => {
+  const mutSyncUIComponentsRenderQueue = [] as React.FC<QueueItem<any, any>>[];
+
+  const ThrowIfMoreInstances = getSingletonCompCheck("You have to init <RegisterSyncUI /> just one time");
+
+  return {
+    makeSyncUI: <ArgData, ResolveValue = void>(
+      SyncUserComp: React.FC<{
+        data: ArgData;
+        resolve: (value: ResolveValue) => void;
+        reject: (reason?: any) => void;
+      }>
+    ) => {
+      const _debugName = SyncUserComp.displayName ?? SyncUserComp.name ?? "uniqSymbolMessageType";
+
+      const syncUIComponentType = Symbol(_debugName);
+
+      // object with the registerToQueue key has to be there to change returned mutable reference object while the function is already called
+      const singletonSyncUIRef = {
+        registerToQueue: undefined as undefined | QueueItem<ArgData, ResolveValue>["registerToQueue"]
+      };
+
+      const SyncUISingletonComp = (props: QueueItem<ArgData, ResolveValue>) => {
+        useComponentDidMount(() => {
+          singletonSyncUIRef.registerToQueue = props.registerToQueue;
+          return () => (singletonSyncUIRef.registerToQueue = undefined);
+        });
+
+        if (!props.head) return null;
+        if (props.head.type !== syncUIComponentType) return null;
+
+        return <SyncUserComp data={props.head.data} resolve={props.head.resolve} reject={props.head.reject} />;
+      };
+
+      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
+
+      return (input: ArgData) => {
+        if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <RegisterSyncUI />`);
+        return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
+      };
+    },
+    RegisterSyncUI: () => {
+      const queue = useAsyncQueue();
+      return (
+        <>
+          <ThrowIfMoreInstances />
+          {mutSyncUIComponentsRenderQueue.map((SyncComp, key) => (
+            <React.Fragment key={key}>
+              <SyncComp {...queue} />
+            </React.Fragment>
+          ))}
+        </>
+      );
+    }
+  };
+};