react-sync-ui 1.0.1 → 1.0.3

package/README.md

@@ -59,7 +59,7 @@ export const syncAlert = makeSyncUI<string, void>((props) => (
       <Button onClick={() => props.resolve()}>OK</Button>
     </ModalFooter>
   </Modal>
-);
+));
 ```
 
 ## what is `react-sync-ui` solving?

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

@@ -10,11 +10,14 @@ var React__default = _interopDefault(React);
 var useComponentDidMount = function useComponentDidMount(fn) {
   React.useEffect(fn, []);
 };
+
 var usePromiseQueue = function usePromiseQueue() {
   var _asyncQueue$;
+
   var _useState = React.useState([]),
-    asyncQueue = _useState[0],
-    setAsyncQueue = _useState[1];
+      asyncQueue = _useState[0],
+      setAsyncQueue = _useState[1];
+
   var push = React.useCallback(function (data) {
     return new Promise(function (resolve, reject) {
       return setAsyncQueue(function (p) {
@@ -29,7 +32,7 @@ var usePromiseQueue = function usePromiseQueue() {
   var resolveHeadItem = React.useCallback(function (value) {
     setAsyncQueue(function (queue) {
       var first = queue[0],
-        rest = queue.slice(1);
+          rest = queue.slice(1);
       first == null ? void 0 : first.resolve(value);
       return rest;
     });
@@ -37,7 +40,7 @@ var usePromiseQueue = function usePromiseQueue() {
   var rejectHeadItem = React.useCallback(function (reason) {
     setAsyncQueue(function (queue) {
       var first = queue[0],
-        rest = queue.slice(1);
+          rest = queue.slice(1);
       first == null ? void 0 : first.reject(reason);
       return rest;
     });
@@ -50,8 +53,8 @@ var usePromiseQueue = function usePromiseQueue() {
     } : undefined,
     push: push
   };
-};
-// ------------------------------------------------------------------------------------
+}; // ------------------------------------------------------------------------------------
+
 var syncUIFactory = function syncUIFactory() {
   var mutSyncUIComponentsRenderQueue = [];
   /*
@@ -60,15 +63,19 @@ var syncUIFactory = function syncUIFactory() {
     "<SyncUI /> has to be initialized only once"
   );
   */
+
   return {
     makeSyncUI: function makeSyncUI(SyncUIUserComp) {
       var _ref, _SyncUIUserComp$displ;
+
       var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
-      var syncUIComponentType = Symbol(_debugName);
-      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called
+
+      var syncUIComponentType = Symbol(_debugName); // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called
+
       var singletonSyncUIRef = {
         push: undefined
       };
+
       var SyncUISingletonComponent = function SyncUISingletonComponent(props) {
         useComponentDidMount(function () {
           singletonSyncUIRef.push = props.push;
@@ -79,17 +86,21 @@ var syncUIFactory = function syncUIFactory() {
         if (!props.head) return null;
         if (props.head.data.type !== syncUIComponentType) return null;
         return React__default.createElement(SyncUIUserComp, {
+          key: props.head.data.reactCompKey,
           data: props.head.data.inputData,
           resolve: props.head.resolve,
           reject: props.head.reject
         });
       };
+
       mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);
       return function (input) {
         if (!singletonSyncUIRef.push) throw new Error("You have to initialize <SyncUI />");
+        var reactCompKey = Math.random().toString();
         return singletonSyncUIRef.push({
           type: syncUIComponentType,
-          inputData: input
+          inputData: input,
+          reactCompKey: reactCompKey
         });
       };
     },
@@ -105,9 +116,10 @@ var syncUIFactory = function syncUIFactory() {
 };
 
 var syncUIFactory$1 = syncUIFactory;
+
 var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
-  makeSyncUI = _syncUIFactory2.makeSyncUI,
-  SyncUI = _syncUIFactory2.SyncUI;
+    makeSyncUI = _syncUIFactory2.makeSyncUI,
+    SyncUI = _syncUIFactory2.SyncUI;
 
 exports.SyncUI = SyncUI;
 exports.makeSyncUI = makeSyncUI;

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

@@ -1 +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\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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, SyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","usePromiseQueue","_useState","useState","asyncQueue","setAsyncQueue","push","useCallback","data","Promise","resolve","reject","p","concat","resolveHeadItem","value","queue","first","rest","slice","rejectHeadItem","reason","head","_asyncQueue$","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","_ref","_SyncUIUserComp$displ","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComponent","props","type","React","inputData","input","Error","SyncUI","map","SyncComp","key","Fragment","_syncUIFactory","_syncUIFactory2"],"mappings":"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"}
+{"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\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData; reactCompKey: string },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            key={props.head.data.reactCompKey}\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n\n        const reactCompKey = Math.random().toString();\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input,\n          reactCompKey\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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, SyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","usePromiseQueue","useState","asyncQueue","setAsyncQueue","push","useCallback","data","Promise","resolve","reject","p","resolveHeadItem","value","queue","first","rest","rejectHeadItem","reason","head","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComponent","props","type","React","key","reactCompKey","inputData","input","Error","Math","random","toString","SyncUI","map","SyncComp","Fragment","_syncUIFactory"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"react-sync-ui.cjs.production.min.js","sources":["../src/index.ts","../src/syncUI.tsx"],"sourcesContent":["import { syncUIFactory as _syncUIFactory } from \"./syncUI\";\nexport const syncUIFactory = _syncUIFactory;\nexport const { makeSyncUI, SyncUI } = syncUIFactory();\n","import React, { useCallback, useEffect, useState } from \"react\";\n\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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"],"names":["syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","_ref","_SyncUIUserComp$displ","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","push","undefined","props","useEffect","head","data","type","React","inputData","resolve","reject","input","Error","SyncUI","_useState","asyncQueue","setAsyncQueue","resolveHeadItem","rejectHeadItem","queue","useState","useCallback","Promise","p","concat","value","first","rest","slice","reason","_asyncQueue$","map","SyncComp","key","Fragment","_syncUIFactory2"],"mappings":"oJACaA,ECiFgB,WAC3B,IAAMC,EAAiC,GAWvC,MAAO,CACLC,WAAY,SACVC,WAWMC,SAAUC,SAAAC,EACdH,EAAeI,aAAWD,EAC1BH,EAAeK,MAAIH,EACnB,wBAEII,EAAsBC,OAAON,GAG7BO,EAAqB,CACzBC,UAAMC,GAuBR,OAFAZ,EAA+BW,MAlBE,SAACE,GAMhC,OA1HNC,aAqH2B,WAEnB,OADAJ,EAAmBC,KAAOE,EAAMF,KACzB,WAAA,OAAOD,EAAmBC,UAAOC,KAvHlC,IA0HHC,EAAME,KACPF,EAAME,KAAKC,KAAKC,OAAST,EAA4B,KAGvDU,gBAAChB,GACCc,KAAMH,EAAME,KAAKC,KAAKG,UACtBC,QAASP,EAAME,KAAKK,QACpBC,OAAQR,EAAME,KAAKM,SAPC,QAcnB,SAACC,GACN,IAAKZ,EAAmBC,KACtB,MAAM,IAAIY,2CACZ,OAAOb,EAAmBC,KAAK,CAC7BM,KAAMT,EACNW,UAAWG,MAIjBE,OAAQ,WACN,MA/GJC,EAAOC,EAAYC,EAQbhB,EAMAiB,EAQAC,EAyFIC,GA/GHJ,GAAPD,EAAoCM,WAClC,QADiBJ,EAAaF,KAQ1Bd,EAAOqB,eAAY,SAAChB,GACxB,OAAO,IAAIiB,SAAsB,SAACb,EAASC,GAAM,OAC/CM,GAAc,SAAAO,GAAC,SAAAC,OAAQD,GAAG,CAAElB,KAAAA,EAAMI,QAAAA,EAASC,OAAAA,aAE5C,IAEGO,EAAkBI,eAAY,SAACI,GACnCT,GAAc,SAAAG,GACZ,IAAOO,EAAkBP,KAARQ,EAAQR,EAAKS,SAE9B,aADAF,GAAAA,EAAOjB,QAAQgB,GACRE,OAER,IAEGT,EAAiBG,eAAY,SAACQ,GAClCb,GAAc,SAAAG,GACZ,IAAOO,EAAkBP,KAARQ,EAAQR,EAAKS,SAE9B,aADAF,GAAAA,EAAOhB,OAAOmB,GACPF,OAER,IAEI,CACLvB,KAAMW,EAAW,GACb,CACEV,YAAIyB,EAAEf,EAAW,WAAXe,EAAezB,KACrBI,QAASQ,EACTP,OAAQQ,QAEVjB,EACJD,KAAAA,IA0EE,OACEO,gCAEGlB,EAA+B0C,KAAI,SAACC,EAAUC,GAAG,OAChD1B,gBAACA,EAAM2B,UAASD,IAAKA,GACnB1B,gBAACyB,mBAAab,YDzJrBgB,EAA+B/C,IAAvBE,EAAU6C,EAAV7C,0BAAkB6C,EAANtB"}
+{"version":3,"file":"react-sync-ui.cjs.production.min.js","sources":["../src/index.ts","../src/syncUI.tsx"],"sourcesContent":["import { syncUIFactory as _syncUIFactory } from \"./syncUI\";\nexport const syncUIFactory = _syncUIFactory;\nexport const { makeSyncUI, SyncUI } = syncUIFactory();\n","import React, { useCallback, useEffect, useState } from \"react\";\n\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData; reactCompKey: string },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            key={props.head.data.reactCompKey}\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n\n        const reactCompKey = Math.random().toString();\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input,\n          reactCompKey\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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"],"names":["syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","push","undefined","props","useEffect","head","data","type","React","key","reactCompKey","inputData","resolve","reject","input","Error","Math","random","toString","SyncUI","asyncQueue","setAsyncQueue","resolveHeadItem","rejectHeadItem","queue","useState","useCallback","Promise","p","value","first","rest","reason","_asyncQueue$","map","SyncComp","Fragment"],"mappings":"oJACaA,ECiFgB,eACrBC,EAAiC,SAWhC,CACLC,WAAY,SACVC,WAWMC,oBACJD,EAAeE,eACfF,EAAeG,QACf,wBAEIC,EAAsBC,OAAOJ,GAG7BK,EAAqB,CACzBC,UAAMC,UAsBRV,EAA+BS,MAnBE,SAACE,UApHtCC,aAqH2B,kBACnBJ,EAAmBC,KAAOE,EAAMF,KACzB,kBAAOD,EAAmBC,UAAOC,KAvHlC,IA0HHC,EAAME,KACPF,EAAME,KAAKC,KAAKC,OAAST,EAA4B,KAGvDU,gBAACd,GACCe,IAAKN,EAAME,KAAKC,KAAKI,aACrBJ,KAAMH,EAAME,KAAKC,KAAKK,UACtBC,QAAST,EAAME,KAAKO,QACpBC,OAAQV,EAAME,KAAKQ,SARC,QAenB,SAACC,OACDd,EAAmBC,KACtB,MAAM,IAAIc,+CAENL,EAAeM,KAAKC,SAASC,kBAC5BlB,EAAmBC,KAAK,CAC7BM,KAAMT,EACNa,UAAWG,EACXJ,aAAAA,MAINS,OAAQ,mBAlHHC,EAAYC,EAQbpB,EAMAqB,EAQAC,EA6FIC,GAnHHJ,KAA6BK,WAClC,QADiBJ,OAQbpB,EAAOyB,eAAY,SAACpB,UACjB,IAAIqB,SAAsB,SAACf,EAASC,UACzCQ,GAAc,SAAAO,mBAASA,GAAG,CAAEtB,KAAAA,EAAMM,QAAAA,EAASC,OAAAA,aAE5C,IAEGS,EAAkBI,eAAY,SAACG,GACnCR,GAAc,SAAAG,OACLM,EAAkBN,KAARO,EAAQP,wBACzBM,GAAAA,EAAOlB,QAAQiB,GACRE,OAER,IAEGR,EAAiBG,eAAY,SAACM,GAClCX,GAAc,SAAAG,OACLM,EAAkBN,KAARO,EAAQP,wBACzBM,GAAAA,EAAOjB,OAAOmB,GACPD,OAER,IAEI,CACL1B,KAAMe,EAAW,GACb,CACEd,cAAMc,EAAW,WAAXa,EAAe3B,KACrBM,QAASU,EACTT,OAAQU,QAEVrB,EACJD,KAAAA,WA+EIO,gCAEGhB,EAA+B0C,KAAI,SAACC,EAAU1B,UAC7CD,gBAACA,EAAM4B,UAAS3B,IAAKA,GACnBD,gBAAC2B,mBAAaX,cD7JUjC,IAAvBE,IAAAA,4BAAY0B"}

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

@@ -3,11 +3,14 @@ import React, { useState, useCallback, useEffect } from 'react';
 var useComponentDidMount = function useComponentDidMount(fn) {
   useEffect(fn, []);
 };
+
 var usePromiseQueue = function usePromiseQueue() {
   var _asyncQueue$;
+
   var _useState = useState([]),
-    asyncQueue = _useState[0],
-    setAsyncQueue = _useState[1];
+      asyncQueue = _useState[0],
+      setAsyncQueue = _useState[1];
+
   var push = useCallback(function (data) {
     return new Promise(function (resolve, reject) {
       return setAsyncQueue(function (p) {
@@ -22,7 +25,7 @@ var usePromiseQueue = function usePromiseQueue() {
   var resolveHeadItem = useCallback(function (value) {
     setAsyncQueue(function (queue) {
       var first = queue[0],
-        rest = queue.slice(1);
+          rest = queue.slice(1);
       first == null ? void 0 : first.resolve(value);
       return rest;
     });
@@ -30,7 +33,7 @@ var usePromiseQueue = function usePromiseQueue() {
   var rejectHeadItem = useCallback(function (reason) {
     setAsyncQueue(function (queue) {
       var first = queue[0],
-        rest = queue.slice(1);
+          rest = queue.slice(1);
       first == null ? void 0 : first.reject(reason);
       return rest;
     });
@@ -43,8 +46,8 @@ var usePromiseQueue = function usePromiseQueue() {
     } : undefined,
     push: push
   };
-};
-// ------------------------------------------------------------------------------------
+}; // ------------------------------------------------------------------------------------
+
 var syncUIFactory = function syncUIFactory() {
   var mutSyncUIComponentsRenderQueue = [];
   /*
@@ -53,15 +56,19 @@ var syncUIFactory = function syncUIFactory() {
     "<SyncUI /> has to be initialized only once"
   );
   */
+
   return {
     makeSyncUI: function makeSyncUI(SyncUIUserComp) {
       var _ref, _SyncUIUserComp$displ;
+
       var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
-      var syncUIComponentType = Symbol(_debugName);
-      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called
+
+      var syncUIComponentType = Symbol(_debugName); // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called
+
       var singletonSyncUIRef = {
         push: undefined
       };
+
       var SyncUISingletonComponent = function SyncUISingletonComponent(props) {
         useComponentDidMount(function () {
           singletonSyncUIRef.push = props.push;
@@ -72,17 +79,21 @@ var syncUIFactory = function syncUIFactory() {
         if (!props.head) return null;
         if (props.head.data.type !== syncUIComponentType) return null;
         return React.createElement(SyncUIUserComp, {
+          key: props.head.data.reactCompKey,
           data: props.head.data.inputData,
           resolve: props.head.resolve,
           reject: props.head.reject
         });
       };
+
       mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);
       return function (input) {
         if (!singletonSyncUIRef.push) throw new Error("You have to initialize <SyncUI />");
+        var reactCompKey = Math.random().toString();
         return singletonSyncUIRef.push({
           type: syncUIComponentType,
-          inputData: input
+          inputData: input,
+          reactCompKey: reactCompKey
         });
       };
     },
@@ -98,9 +109,10 @@ var syncUIFactory = function syncUIFactory() {
 };
 
 var syncUIFactory$1 = syncUIFactory;
+
 var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
-  makeSyncUI = _syncUIFactory2.makeSyncUI,
-  SyncUI = _syncUIFactory2.SyncUI;
+    makeSyncUI = _syncUIFactory2.makeSyncUI,
+    SyncUI = _syncUIFactory2.SyncUI;
 
 export { SyncUI, makeSyncUI, syncUIFactory$1 as syncUIFactory };
 //# sourceMappingURL=react-sync-ui.esm.js.map

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

@@ -1 +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\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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, SyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","usePromiseQueue","_useState","useState","asyncQueue","setAsyncQueue","push","useCallback","data","Promise","resolve","reject","p","concat","resolveHeadItem","value","queue","first","rest","slice","rejectHeadItem","reason","head","_asyncQueue$","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","_ref","_SyncUIUserComp$displ","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComponent","props","type","React","inputData","input","Error","SyncUI","map","SyncComp","key","Fragment","_syncUIFactory","_syncUIFactory2"],"mappings":"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"}
+{"version":3,"file":"react-sync-ui.esm.js","sources":["../src/syncUI.tsx","../src/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nconst useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {\n  useEffect(fn, []);\n};\n\n// this function broke the working of the hot reloading\n/*\nconst getSingletonComponentCheck = (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\n// ------------------------------------------------------------------------------------\n// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...\n// https://github.com/jaredpalmer/tsdx/issues/200\n// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>\ntype PromiseQueueAPI<Data, ResolveValue> = {\n  head?: {\n    data: Data;\n    resolve: (value: ResolveValue) => void;\n    reject: (reason?: any) => void;\n  };\n  push: (data: Data) => Promise<ResolveValue>;\n};\n\nexport const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<\n  Data,\n  ResolveValue\n> => {\n  const [asyncQueue, setAsyncQueue] = useState(\n    [] as {\n      data: Data;\n      resolve: (arg: ResolveValue) => void;\n      reject: (arg: any) => void;\n    }[]\n  );\n\n  const push = useCallback((data: Data) => {\n    return new Promise<ResolveValue>((resolve, reject) =>\n      setAsyncQueue(p => [...p, { data, resolve, reject }])\n    );\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          resolve: resolveHeadItem,\n          reject: rejectHeadItem\n        }\n      : undefined,\n    push\n  };\n};\n\n// ------------------------------------------------------------------------------------\n\nexport const syncUIFactory = () => {\n  const mutSyncUIComponentsRenderQueue = [] as React.FC<\n    PromiseQueueAPI<any, any>\n  >[];\n\n  /*\n  // this check broke the working of the hot reloading\n  const ThrowIfMoreInstances = getSingletonComponentCheck(\n    \"<SyncUI /> has to be initialized only once\"\n  );\n  */\n\n  return {\n    makeSyncUI: <InputData, ResolveValue = void>(\n      SyncUIUserComp: React.FC<{\n        data: InputData;\n        resolve: (value: ResolveValue) => void;\n        reject: (reason?: any) => void;\n      }>\n    ) => {\n      type QItem = PromiseQueueAPI<\n        { type: Symbol; inputData: InputData; reactCompKey: string },\n        ResolveValue\n      >;\n\n      const _debugName =\n        SyncUIUserComp.displayName ??\n        SyncUIUserComp.name ??\n        \"uniqSymbolMessageType\";\n\n      const syncUIComponentType = Symbol(_debugName);\n\n      // object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called\n      const singletonSyncUIRef = {\n        push: undefined as undefined | QItem[\"push\"]\n      };\n\n      const SyncUISingletonComponent = (props: QItem) => {\n        useComponentDidMount(() => {\n          singletonSyncUIRef.push = props.push;\n          return () => (singletonSyncUIRef.push = undefined);\n        });\n\n        if (!props.head) return null;\n        if (props.head.data.type !== syncUIComponentType) return null;\n\n        return (\n          <SyncUIUserComp\n            key={props.head.data.reactCompKey}\n            data={props.head.data.inputData}\n            resolve={props.head.resolve}\n            reject={props.head.reject}\n          />\n        );\n      };\n\n      mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);\n\n      return (input: InputData) => {\n        if (!singletonSyncUIRef.push)\n          throw new Error(`You have to initialize <SyncUI />`);\n\n        const reactCompKey = Math.random().toString();\n        return singletonSyncUIRef.push({\n          type: syncUIComponentType,\n          inputData: input,\n          reactCompKey\n        });\n      };\n    },\n    SyncUI: () => {\n      const queue = usePromiseQueue();\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, SyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","usePromiseQueue","useState","asyncQueue","setAsyncQueue","push","useCallback","data","Promise","resolve","reject","p","resolveHeadItem","value","queue","first","rest","rejectHeadItem","reason","head","undefined","syncUIFactory","mutSyncUIComponentsRenderQueue","makeSyncUI","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComponent","props","type","React","key","reactCompKey","inputData","input","Error","Math","random","toString","SyncUI","map","SyncComp","Fragment","_syncUIFactory"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sync-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "repository": "https://github.com/Svehla/react-sync-ui",
   "license": "MIT",
   "author": "Jakub Švehla",
@@ -52,4 +52,4 @@
     "node": ">=10"
   },
   "size-limit": []
-}
+}

package/src/syncUI.tsx

@@ -101,7 +101,7 @@ export const syncUIFactory = () => {
       }>
     ) => {
       type QItem = PromiseQueueAPI<
-        { type: Symbol; inputData: InputData },
+        { type: Symbol; inputData: InputData; reactCompKey: string },
         ResolveValue
       >;
 
@@ -128,6 +128,7 @@ export const syncUIFactory = () => {
 
         return (
           <SyncUIUserComp
+            key={props.head.data.reactCompKey}
             data={props.head.data.inputData}
             resolve={props.head.resolve}
             reject={props.head.reject}
@@ -140,9 +141,12 @@ export const syncUIFactory = () => {
       return (input: InputData) => {
         if (!singletonSyncUIRef.push)
           throw new Error(`You have to initialize <SyncUI />`);
+
+        const reactCompKey = Math.random().toString();
         return singletonSyncUIRef.push({
           type: syncUIComponentType,
-          inputData: input
+          inputData: input,
+          reactCompKey
         });
       };
     },