react-sync-ui 0.0.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +179 -0
- package/dist/index.d.ts +4 -4
- package/dist/react-sync-ui.cjs.development.js +9 -9
- package/dist/react-sync-ui.cjs.development.js.map +1 -1
- package/dist/react-sync-ui.cjs.production.min.js +1 -1
- package/dist/react-sync-ui.cjs.production.min.js.map +1 -1
- package/dist/react-sync-ui.esm.js +9 -9
- package/dist/react-sync-ui.esm.js.map +1 -1
- package/dist/syncUI.d.ts +2 -2
- package/package.json +1 -1
- package/src/index.ts +1 -1
- package/src/syncUI.tsx +6 -6
package/README.md
CHANGED
|
@@ -1 +1,180 @@
|
|
|
1
1
|
# React sync ui
|
|
2
|
+
|
|
3
|
+
This library enables to synchronous workflow like this where based on the sequential business logic is react state changed
|
|
4
|
+
|
|
5
|
+
## usage example
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
const workflow = async () => {
|
|
9
|
+
let isOk = false;
|
|
10
|
+
|
|
11
|
+
const name = await syncPrompt("fill your name");
|
|
12
|
+
|
|
13
|
+
let triesCount = 0;
|
|
14
|
+
|
|
15
|
+
while (
|
|
16
|
+
(await syncPrompt(`Hello ${name}, fill the secret password!`)) !== userName
|
|
17
|
+
) {
|
|
18
|
+
await syncAlert("Invalid password, keep trying");
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
await syncAlert(`Congratulation Mr. ${userName}, you are logged in`);
|
|
22
|
+
};
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
npm i react-sync-ui
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
### Setup SyncUI Component into the root of yout project
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { SyncUI } from 'react-sync-ui'
|
|
37
|
+
|
|
38
|
+
const App = () => (
|
|
39
|
+
<>
|
|
40
|
+
<SyncUI />
|
|
41
|
+
<YourAppStuffs />
|
|
42
|
+
<>
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
ReactDOM.render(<App />, document.getElementById("root"));
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Code usage examples
|
|
50
|
+
|
|
51
|
+
Create your UI connectd to the syncUI wrapper
|
|
52
|
+
|
|
53
|
+
syncUI enables you to do the abstraction to promisify your react Components
|
|
54
|
+
|
|
55
|
+
#### Alert example
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
59
|
+
import { SyncUI } from "react-sync-ui";
|
|
60
|
+
|
|
61
|
+
export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
62
|
+
<Modal isOpen={true} toggle={() => props.resolve()}>
|
|
63
|
+
<ModalHeader>{props.data}</ModalHeader>
|
|
64
|
+
<ModalFooter>
|
|
65
|
+
<Button onClick={() => props.resolve()}>OK</Button>
|
|
66
|
+
</ModalFooter>
|
|
67
|
+
</Modal>
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
/// usage:
|
|
72
|
+
|
|
73
|
+
<button
|
|
74
|
+
onClick={async () => {
|
|
75
|
+
await syncAlert("You're hacked");
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
click to me
|
|
79
|
+
</button>;
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
#### Prompt example
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
87
|
+
import { makeSyncUI } from "react-sync-ui";
|
|
88
|
+
|
|
89
|
+
export const syncPrompt = makeSyncUI<string, string>((props) => {
|
|
90
|
+
const [input, setInput] = React.useState("");
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<Modal
|
|
94
|
+
toggle={() => props.reject(new Error("User forced close prompt modal"))}
|
|
95
|
+
isOpen={true}
|
|
96
|
+
>
|
|
97
|
+
<form
|
|
98
|
+
onSubmit={(e) => {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
setInput("");
|
|
101
|
+
props.resolve(input);
|
|
102
|
+
}}
|
|
103
|
+
>
|
|
104
|
+
<ModalHeader>{props.data.title}</ModalHeader>
|
|
105
|
+
|
|
106
|
+
<ModalBody>
|
|
107
|
+
<label>
|
|
108
|
+
{props.data}
|
|
109
|
+
<input
|
|
110
|
+
value={input}
|
|
111
|
+
onChange={(e) => setInput(e.target.value)}
|
|
112
|
+
type="text"
|
|
113
|
+
/>
|
|
114
|
+
</label>
|
|
115
|
+
</ModalBody>
|
|
116
|
+
|
|
117
|
+
<ModalFooter>
|
|
118
|
+
<Button type="submit">Accept</Button>
|
|
119
|
+
</ModalFooter>
|
|
120
|
+
</form>
|
|
121
|
+
</Modal>
|
|
122
|
+
);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
/// usage:
|
|
126
|
+
|
|
127
|
+
<button
|
|
128
|
+
onClick={async () => {
|
|
129
|
+
const usersFeelings = await syncPrompt("how are you");
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
click to me
|
|
133
|
+
</button>;
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### Confirm example
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
140
|
+
import { makeSyncUI } from "../../dist";
|
|
141
|
+
|
|
142
|
+
export const syncConfirm = makeSyncUI<
|
|
143
|
+
{
|
|
144
|
+
title: string;
|
|
145
|
+
description?: string;
|
|
146
|
+
okBtn?: string;
|
|
147
|
+
notOkBtn?: string;
|
|
148
|
+
},
|
|
149
|
+
boolean
|
|
150
|
+
>((props) => (
|
|
151
|
+
<Modal isOpen={true} toggle={() => props.resolve(false)}>
|
|
152
|
+
<ModalHeader>{props.data.title}</ModalHeader>
|
|
153
|
+
|
|
154
|
+
<ModalBody>{props.data.description}</ModalBody>
|
|
155
|
+
|
|
156
|
+
<ModalFooter>
|
|
157
|
+
<Button autoFocus onClick={() => props.resolve(true)}>
|
|
158
|
+
{props.data.okBtn ?? "Yes"}
|
|
159
|
+
</Button>
|
|
160
|
+
<Button onClick={() => props.resolve(false)}>
|
|
161
|
+
{props.data.notOkBtn ?? "No"}
|
|
162
|
+
</Button>
|
|
163
|
+
</ModalFooter>
|
|
164
|
+
</Modal>
|
|
165
|
+
));
|
|
166
|
+
|
|
167
|
+
/// usage:
|
|
168
|
+
|
|
169
|
+
<button
|
|
170
|
+
onClick={async () => {
|
|
171
|
+
const isOk = await syncConfirm({
|
|
172
|
+
title: "How are you",
|
|
173
|
+
okBtn: "Good",
|
|
174
|
+
notOkBtn: "Not good",
|
|
175
|
+
});
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
click to me
|
|
179
|
+
</button>;
|
|
180
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const syncUIFactory: () => {
|
|
3
|
-
makeSyncUI: <ArgData, ResolveValue = void>(
|
|
3
|
+
makeSyncUI: <ArgData, ResolveValue = void>(SyncUIUserComp: import("react").FC<{
|
|
4
4
|
data: ArgData;
|
|
5
5
|
resolve: (value: ResolveValue) => void;
|
|
6
6
|
reject: (reason?: any) => void;
|
|
7
7
|
}>) => (input: ArgData) => Promise<ResolveValue>;
|
|
8
|
-
|
|
8
|
+
SyncUI: () => JSX.Element;
|
|
9
9
|
};
|
|
10
|
-
export declare const makeSyncUI: <ArgData, ResolveValue = void>(
|
|
10
|
+
export declare const makeSyncUI: <ArgData, ResolveValue = void>(SyncUIUserComp: import("react").FC<{
|
|
11
11
|
data: ArgData;
|
|
12
12
|
resolve: (value: ResolveValue) => void;
|
|
13
13
|
reject: (reason?: any) => void;
|
|
14
|
-
}>) => (input: ArgData) => Promise<ResolveValue>,
|
|
14
|
+
}>) => (input: ArgData) => Promise<ResolveValue>, SyncUI: () => JSX.Element;
|
|
@@ -70,12 +70,12 @@ var useAsyncQueue = function useAsyncQueue() {
|
|
|
70
70
|
};
|
|
71
71
|
var syncUIFactory = function syncUIFactory() {
|
|
72
72
|
var mutSyncUIComponentsRenderQueue = [];
|
|
73
|
-
var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <
|
|
73
|
+
var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <SyncUI /> just one time");
|
|
74
74
|
return {
|
|
75
|
-
makeSyncUI: function makeSyncUI(
|
|
76
|
-
var _ref,
|
|
75
|
+
makeSyncUI: function makeSyncUI(SyncUIUserComp) {
|
|
76
|
+
var _ref, _SyncUIUserComp$displ;
|
|
77
77
|
|
|
78
|
-
var _debugName = (_ref = (
|
|
78
|
+
var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
|
|
79
79
|
|
|
80
80
|
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
|
|
81
81
|
|
|
@@ -92,7 +92,7 @@ var syncUIFactory = function syncUIFactory() {
|
|
|
92
92
|
});
|
|
93
93
|
if (!props.head) return null;
|
|
94
94
|
if (props.head.type !== syncUIComponentType) return null;
|
|
95
|
-
return React__default.createElement(
|
|
95
|
+
return React__default.createElement(SyncUIUserComp, {
|
|
96
96
|
data: props.head.data,
|
|
97
97
|
resolve: props.head.resolve,
|
|
98
98
|
reject: props.head.reject
|
|
@@ -101,11 +101,11 @@ var syncUIFactory = function syncUIFactory() {
|
|
|
101
101
|
|
|
102
102
|
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
|
|
103
103
|
return function (input) {
|
|
104
|
-
if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <
|
|
104
|
+
if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <SyncUI />");
|
|
105
105
|
return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
|
|
106
106
|
};
|
|
107
107
|
},
|
|
108
|
-
|
|
108
|
+
SyncUI: function SyncUI() {
|
|
109
109
|
var queue = useAsyncQueue();
|
|
110
110
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
|
|
111
111
|
return React__default.createElement(React__default.Fragment, {
|
|
@@ -120,9 +120,9 @@ var syncUIFactory$1 = syncUIFactory;
|
|
|
120
120
|
|
|
121
121
|
var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
|
|
122
122
|
makeSyncUI = _syncUIFactory2.makeSyncUI,
|
|
123
|
-
|
|
123
|
+
SyncUI = _syncUIFactory2.SyncUI;
|
|
124
124
|
|
|
125
|
-
exports.
|
|
125
|
+
exports.SyncUI = SyncUI;
|
|
126
126
|
exports.makeSyncUI = makeSyncUI;
|
|
127
127
|
exports.syncUIFactory = syncUIFactory$1;
|
|
128
128
|
//# sourceMappingURL=react-sync-ui.cjs.development.js.map
|
|
@@ -1 +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\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 <
|
|
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 <SyncUI /> just one time\");\n\n return {\n makeSyncUI: <ArgData, ResolveValue = void>(\n SyncUIUserComp: React.FC<{\n data: ArgData;\n resolve: (value: ResolveValue) => void;\n reject: (reason?: any) => void;\n }>\n ) => {\n const _debugName = SyncUIUserComp.displayName ?? SyncUIUserComp.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 <SyncUIUserComp 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 <SyncUI />`);\n return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n };\n },\n SyncUI: () => {\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, SyncUI } = 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","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComp","props","push","input","SyncUI","map","SyncComp","key","_syncUIFactory"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),
|
|
1
|
+
"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(e){t.useEffect(e,[])},u=function(){var e,u=[],o=(e=0,function(){return r((function(){if(e>0)throw new Error("You have to init <SyncUI /> just one time");e++})),n.createElement(n.Fragment,null)});return{makeSyncUI:function(e){var t,o,a=null!=(t=null!=(o=e.displayName)?o:e.name)?t:"uniqSymbolMessageType",c=Symbol(a),i={registerToQueue:void 0};return u.push((function(t){return r((function(){return i.registerToQueue=t.registerToQueue,function(){return i.registerToQueue=void 0}})),t.head?t.head.type!==c?null:n.createElement(e,{data:t.head.data,resolve:t.head.resolve,reject:t.head.reject}):null})),function(e){if(!i.registerToQueue)throw new Error("You have to initialize <SyncUI />");return i.registerToQueue(c,e)}},SyncUI:function(){var e,r,a,c,i,l,s,f,d=(c=(a=t.useState([]))[0],i=a[1],l=t.useCallback((function(e,t){return new Promise((function(n,r){return i((function(u){return[].concat(u,[{type:e,data:t,resolve:n,reject:r}])}))}))}),[]),s=t.useCallback((function(e){i((function(t){var n=t[0],r=t.slice(1);return null==n||n.resolve(e),r}))}),[]),f=t.useCallback((function(e){i((function(t){var n=t[0],r=t.slice(1);return null==n||n.reject(e),r}))}),[]),{head:c[0]?{data:null==(e=c[0])?void 0:e.data,type:null==(r=c[0])?void 0:r.type,resolve:s,reject:f}:void 0,registerToQueue:l});return n.createElement(n.Fragment,null,n.createElement(o,null),u.map((function(e,t){return n.createElement(n.Fragment,{key:t},n.createElement(e,Object.assign({},d)))})))}}},o=u(),a=o.makeSyncUI;exports.SyncUI=o.SyncUI,exports.makeSyncUI=a,exports.syncUIFactory=u;
|
|
2
2
|
//# sourceMappingURL=react-sync-ui.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
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 <
|
|
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 <SyncUI /> just one time\");\n\n return {\n makeSyncUI: <ArgData, ResolveValue = void>(\n SyncUIUserComp: React.FC<{\n data: ArgData;\n resolve: (value: ResolveValue) => void;\n reject: (reason?: any) => void;\n }>\n ) => {\n const _debugName = SyncUIUserComp.displayName ?? SyncUIUserComp.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 <SyncUIUserComp 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 <SyncUI />`);\n return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n };\n },\n SyncUI: () => {\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, SyncUI } = syncUIFactory();\n"],"names":["useComponentDidMount","fn","useEffect","syncUIFactory","globalMountCounter","mutSyncUIComponentsRenderQueue","ThrowIfMoreInstances","Error","React","Fragment","makeSyncUI","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","registerToQueue","undefined","push","props","head","type","data","resolve","reject","input","SyncUI","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,6CApE/CH,OAEKI,gBAACA,EAAMC,uBAoET,CACLC,WAAY,SACVC,WAMMC,oBAAaD,EAAeE,eAAeF,EAAeG,QAAQ,wBAElEC,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,GAAea,KAAMH,EAAMC,KAAKE,KAAMC,QAASJ,EAAMC,KAAKG,QAASC,OAAQL,EAAMC,KAAKI,SAHtE,QAQnB,SAACC,OACDV,EAAmBC,gBAAiB,MAAM,IAAIX,kDAC5CU,EAAmBC,gBAAgBH,EAAqBY,KAGnEC,OAAQ,qBAlGHC,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,cC3HU9B,IAAvBO,IAAAA,4BAAYkB"}
|
|
@@ -63,12 +63,12 @@ var useAsyncQueue = function useAsyncQueue() {
|
|
|
63
63
|
};
|
|
64
64
|
var syncUIFactory = function syncUIFactory() {
|
|
65
65
|
var mutSyncUIComponentsRenderQueue = [];
|
|
66
|
-
var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <
|
|
66
|
+
var ThrowIfMoreInstances = getSingletonCompCheck("You have to init <SyncUI /> just one time");
|
|
67
67
|
return {
|
|
68
|
-
makeSyncUI: function makeSyncUI(
|
|
69
|
-
var _ref,
|
|
68
|
+
makeSyncUI: function makeSyncUI(SyncUIUserComp) {
|
|
69
|
+
var _ref, _SyncUIUserComp$displ;
|
|
70
70
|
|
|
71
|
-
var _debugName = (_ref = (
|
|
71
|
+
var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
|
|
72
72
|
|
|
73
73
|
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
|
|
74
74
|
|
|
@@ -85,7 +85,7 @@ var syncUIFactory = function syncUIFactory() {
|
|
|
85
85
|
});
|
|
86
86
|
if (!props.head) return null;
|
|
87
87
|
if (props.head.type !== syncUIComponentType) return null;
|
|
88
|
-
return React.createElement(
|
|
88
|
+
return React.createElement(SyncUIUserComp, {
|
|
89
89
|
data: props.head.data,
|
|
90
90
|
resolve: props.head.resolve,
|
|
91
91
|
reject: props.head.reject
|
|
@@ -94,11 +94,11 @@ var syncUIFactory = function syncUIFactory() {
|
|
|
94
94
|
|
|
95
95
|
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
|
|
96
96
|
return function (input) {
|
|
97
|
-
if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <
|
|
97
|
+
if (!singletonSyncUIRef.registerToQueue) throw new Error("You have to initialize <SyncUI />");
|
|
98
98
|
return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
|
|
99
99
|
};
|
|
100
100
|
},
|
|
101
|
-
|
|
101
|
+
SyncUI: function SyncUI() {
|
|
102
102
|
var queue = useAsyncQueue();
|
|
103
103
|
return React.createElement(React.Fragment, null, React.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
|
|
104
104
|
return React.createElement(React.Fragment, {
|
|
@@ -113,7 +113,7 @@ var syncUIFactory$1 = syncUIFactory;
|
|
|
113
113
|
|
|
114
114
|
var _syncUIFactory2 = /*#__PURE__*/syncUIFactory$1(),
|
|
115
115
|
makeSyncUI = _syncUIFactory2.makeSyncUI,
|
|
116
|
-
|
|
116
|
+
SyncUI = _syncUIFactory2.SyncUI;
|
|
117
117
|
|
|
118
|
-
export {
|
|
118
|
+
export { SyncUI, makeSyncUI, syncUIFactory$1 as syncUIFactory };
|
|
119
119
|
//# sourceMappingURL=react-sync-ui.esm.js.map
|
|
@@ -1 +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\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 <
|
|
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 <SyncUI /> just one time\");\n\n return {\n makeSyncUI: <ArgData, ResolveValue = void>(\n SyncUIUserComp: React.FC<{\n data: ArgData;\n resolve: (value: ResolveValue) => void;\n reject: (reason?: any) => void;\n }>\n ) => {\n const _debugName = SyncUIUserComp.displayName ?? SyncUIUserComp.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 <SyncUIUserComp 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 <SyncUI />`);\n return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);\n };\n },\n SyncUI: () => {\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, SyncUI } = 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","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","SyncUISingletonComp","props","push","input","SyncUI","map","SyncComp","key","_syncUIFactory"],"mappings":"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"}
|
package/dist/syncUI.d.ts
CHANGED
|
@@ -10,10 +10,10 @@ export declare const useAsyncQueue: <Data, ResolveValue = void>() => {
|
|
|
10
10
|
registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;
|
|
11
11
|
};
|
|
12
12
|
export declare const syncUIFactory: () => {
|
|
13
|
-
makeSyncUI: <ArgData, ResolveValue = void>(
|
|
13
|
+
makeSyncUI: <ArgData, ResolveValue = void>(SyncUIUserComp: React.FC<{
|
|
14
14
|
data: ArgData;
|
|
15
15
|
resolve: (value: ResolveValue) => void;
|
|
16
16
|
reject: (reason?: any) => void;
|
|
17
17
|
}>) => (input: ArgData) => Promise<ResolveValue>;
|
|
18
|
-
|
|
18
|
+
SyncUI: () => JSX.Element;
|
|
19
19
|
};
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
package/src/syncUI.tsx
CHANGED
|
@@ -78,17 +78,17 @@ type QueueItem<Data, ResolveValue> = {
|
|
|
78
78
|
export const syncUIFactory = () => {
|
|
79
79
|
const mutSyncUIComponentsRenderQueue = [] as React.FC<QueueItem<any, any>>[];
|
|
80
80
|
|
|
81
|
-
const ThrowIfMoreInstances = getSingletonCompCheck("You have to init <
|
|
81
|
+
const ThrowIfMoreInstances = getSingletonCompCheck("You have to init <SyncUI /> just one time");
|
|
82
82
|
|
|
83
83
|
return {
|
|
84
84
|
makeSyncUI: <ArgData, ResolveValue = void>(
|
|
85
|
-
|
|
85
|
+
SyncUIUserComp: React.FC<{
|
|
86
86
|
data: ArgData;
|
|
87
87
|
resolve: (value: ResolveValue) => void;
|
|
88
88
|
reject: (reason?: any) => void;
|
|
89
89
|
}>
|
|
90
90
|
) => {
|
|
91
|
-
const _debugName =
|
|
91
|
+
const _debugName = SyncUIUserComp.displayName ?? SyncUIUserComp.name ?? "uniqSymbolMessageType";
|
|
92
92
|
|
|
93
93
|
const syncUIComponentType = Symbol(_debugName);
|
|
94
94
|
|
|
@@ -106,17 +106,17 @@ export const syncUIFactory = () => {
|
|
|
106
106
|
if (!props.head) return null;
|
|
107
107
|
if (props.head.type !== syncUIComponentType) return null;
|
|
108
108
|
|
|
109
|
-
return <
|
|
109
|
+
return <SyncUIUserComp data={props.head.data} resolve={props.head.resolve} reject={props.head.reject} />;
|
|
110
110
|
};
|
|
111
111
|
|
|
112
112
|
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComp);
|
|
113
113
|
|
|
114
114
|
return (input: ArgData) => {
|
|
115
|
-
if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <
|
|
115
|
+
if (!singletonSyncUIRef.registerToQueue) throw new Error(`You have to initialize <SyncUI />`);
|
|
116
116
|
return singletonSyncUIRef.registerToQueue(syncUIComponentType, input);
|
|
117
117
|
};
|
|
118
118
|
},
|
|
119
|
-
|
|
119
|
+
SyncUI: () => {
|
|
120
120
|
const queue = useAsyncQueue();
|
|
121
121
|
return (
|
|
122
122
|
<>
|