react-sync-ui 0.1.1 → 0.1.3
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 +198 -1
- package/dist/react-sync-ui.cjs.development.js +23 -22
- 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 +23 -22
- package/dist/react-sync-ui.esm.js.map +1 -1
- package/dist/syncUI.d.ts +9 -8
- package/package.json +7 -6
- package/src/syncUI.tsx +65 -41
package/README.md
CHANGED
|
@@ -1 +1,198 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-sync-ui
|
|
2
|
+
|
|
3
|
+
`react-sync-ui` enable to do the sequential synchronous workflow with usage of React Components.
|
|
4
|
+
|
|
5
|
+
## usage example
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<button
|
|
9
|
+
onClick={async () => {
|
|
10
|
+
// call synchronous UI workflow with promisified React components
|
|
11
|
+
const name = await syncPrompt("Fill your name");
|
|
12
|
+
|
|
13
|
+
while ((await syncPrompt(`Fill your password!`)) !== "1234") {
|
|
14
|
+
await syncAlert("Invalid password, keep trying");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
await syncAlert(`Congratulation Mr. ${name}, you are logged in`);
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
Login
|
|
21
|
+
</button>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
Library provides simple `makeSyncUI<InputData, ResolveValue>` function which can transform your declarative React Components
|
|
27
|
+
into the promisified callable functions.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// defining of your custom react-sync-ui component
|
|
31
|
+
export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
32
|
+
<Modal isOpen toggle={() => props.resolve()}>
|
|
33
|
+
<ModalHeader>{props.data}</ModalHeader>
|
|
34
|
+
<ModalFooter>
|
|
35
|
+
<Button onClick={() => props.resolve()}>OK</Button>
|
|
36
|
+
</ModalFooter>
|
|
37
|
+
</Modal>
|
|
38
|
+
);
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Installation
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm i react-sync-ui
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
### Setup `<SyncUI />` Component into the root of yout project
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { SyncUI } from 'react-sync-ui'
|
|
53
|
+
|
|
54
|
+
const App = () => (
|
|
55
|
+
<>
|
|
56
|
+
<SyncUI />
|
|
57
|
+
<YourAppStuffs />
|
|
58
|
+
<>
|
|
59
|
+
)
|
|
60
|
+
|
|
61
|
+
const root = createRoot(document.getElementById('root')!);
|
|
62
|
+
root.render(<App />);
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### create sync UI
|
|
67
|
+
|
|
68
|
+
Now, you just have to define your custom UI which will be promisifed by `react-sync-ui` library.
|
|
69
|
+
|
|
70
|
+
`makeSyncUI` returns Promise which render your custom React Component and
|
|
71
|
+
will be resolve when you call `props.resolve(any)` in it.
|
|
72
|
+
|
|
73
|
+
#### Alert example
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
77
|
+
import { makeSyncUI } from "react-sync-ui";
|
|
78
|
+
|
|
79
|
+
export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
80
|
+
<Modal isOpen={true} toggle={() => props.resolve()}>
|
|
81
|
+
<ModalHeader>{props.data}</ModalHeader>
|
|
82
|
+
<ModalFooter>
|
|
83
|
+
<Button onClick={() => props.resolve()}>OK</Button>
|
|
84
|
+
</ModalFooter>
|
|
85
|
+
</Modal>
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
// usage:
|
|
90
|
+
|
|
91
|
+
<button
|
|
92
|
+
onClick={async () => {
|
|
93
|
+
await syncAlert("Wait for it...");
|
|
94
|
+
await syncAlert("Wait for it...");
|
|
95
|
+
await syncAlert("You're hacked");
|
|
96
|
+
}}
|
|
97
|
+
>
|
|
98
|
+
click to me
|
|
99
|
+
</button>;
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
#### Prompt example
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import { Button, Modal, ModalBody, ModalFooter } from "reactstrap";
|
|
107
|
+
import { makeSyncUI } from "react-sync-ui";
|
|
108
|
+
|
|
109
|
+
export const syncPrompt = makeSyncUI<string, string>((props) => {
|
|
110
|
+
const [input, setInput] = React.useState("");
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<Modal
|
|
114
|
+
toggle={() => props.reject(new Error("User forced close prompt modal"))}
|
|
115
|
+
isOpen={true}
|
|
116
|
+
>
|
|
117
|
+
<form
|
|
118
|
+
onSubmit={(e) => {
|
|
119
|
+
e.preventDefault();
|
|
120
|
+
setInput("");
|
|
121
|
+
props.resolve(input);
|
|
122
|
+
}}
|
|
123
|
+
>
|
|
124
|
+
<ModalBody>
|
|
125
|
+
<label>
|
|
126
|
+
{props.data}
|
|
127
|
+
<input
|
|
128
|
+
value={input}
|
|
129
|
+
onChange={(e) => setInput(e.target.value)}
|
|
130
|
+
type="text"
|
|
131
|
+
/>
|
|
132
|
+
</label>
|
|
133
|
+
</ModalBody>
|
|
134
|
+
|
|
135
|
+
<ModalFooter>
|
|
136
|
+
<Button type="submit">Accept</Button>
|
|
137
|
+
</ModalFooter>
|
|
138
|
+
</form>
|
|
139
|
+
</Modal>
|
|
140
|
+
);
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
// usage:
|
|
144
|
+
|
|
145
|
+
<button
|
|
146
|
+
onClick={async () => {
|
|
147
|
+
const usersFeelings = await syncPrompt("how are you");
|
|
148
|
+
}}
|
|
149
|
+
>
|
|
150
|
+
click to me
|
|
151
|
+
</button>;
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
#### Confirm example
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
158
|
+
import { makeSyncUI } from "react-sync-ui";
|
|
159
|
+
|
|
160
|
+
export const syncConfirm = makeSyncUI<
|
|
161
|
+
{
|
|
162
|
+
title: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
okBtn?: string;
|
|
165
|
+
notOkBtn?: string;
|
|
166
|
+
},
|
|
167
|
+
boolean
|
|
168
|
+
>((props) => (
|
|
169
|
+
<Modal isOpen={true} toggle={() => props.resolve(false)}>
|
|
170
|
+
<ModalHeader>{props.data.title}</ModalHeader>
|
|
171
|
+
|
|
172
|
+
<ModalBody>{props.data.description}</ModalBody>
|
|
173
|
+
|
|
174
|
+
<ModalFooter>
|
|
175
|
+
<Button autoFocus onClick={() => props.resolve(true)}>
|
|
176
|
+
{props.data.okBtn ?? "Yes"}
|
|
177
|
+
</Button>
|
|
178
|
+
<Button onClick={() => props.resolve(false)}>
|
|
179
|
+
{props.data.notOkBtn ?? "No"}
|
|
180
|
+
</Button>
|
|
181
|
+
</ModalFooter>
|
|
182
|
+
</Modal>
|
|
183
|
+
));
|
|
184
|
+
|
|
185
|
+
// usage:
|
|
186
|
+
|
|
187
|
+
<button
|
|
188
|
+
onClick={async () => {
|
|
189
|
+
const isOk = await syncConfirm({
|
|
190
|
+
title: "How are you",
|
|
191
|
+
okBtn: "Good",
|
|
192
|
+
notOkBtn: "Not good",
|
|
193
|
+
});
|
|
194
|
+
}}
|
|
195
|
+
>
|
|
196
|
+
click to me
|
|
197
|
+
</button>;
|
|
198
|
+
```
|
|
@@ -11,7 +11,7 @@ var useComponentDidMount = function useComponentDidMount(fn) {
|
|
|
11
11
|
React.useEffect(fn, []);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var getSingletonComponentCheck = function getSingletonComponentCheck(errorMsg) {
|
|
15
15
|
var globalMountCounter = 0;
|
|
16
16
|
return function () {
|
|
17
17
|
useComponentDidMount(function () {
|
|
@@ -20,21 +20,19 @@ var getSingletonCompCheck = function getSingletonCompCheck(errorMsg) {
|
|
|
20
20
|
});
|
|
21
21
|
return React__default.createElement(React__default.Fragment, null);
|
|
22
22
|
};
|
|
23
|
-
};
|
|
24
|
-
|
|
23
|
+
};
|
|
25
24
|
|
|
26
|
-
var
|
|
27
|
-
var _asyncQueue
|
|
25
|
+
var usePromiseQueue = function usePromiseQueue() {
|
|
26
|
+
var _asyncQueue$;
|
|
28
27
|
|
|
29
28
|
var _useState = React.useState([]),
|
|
30
29
|
asyncQueue = _useState[0],
|
|
31
30
|
setAsyncQueue = _useState[1];
|
|
32
31
|
|
|
33
|
-
var
|
|
32
|
+
var push = React.useCallback(function (data) {
|
|
34
33
|
return new Promise(function (resolve, reject) {
|
|
35
34
|
return setAsyncQueue(function (p) {
|
|
36
35
|
return [].concat(p, [{
|
|
37
|
-
type: type,
|
|
38
36
|
data: data,
|
|
39
37
|
resolve: resolve,
|
|
40
38
|
reject: reject
|
|
@@ -61,52 +59,55 @@ var useAsyncQueue = function useAsyncQueue() {
|
|
|
61
59
|
return {
|
|
62
60
|
head: asyncQueue[0] ? {
|
|
63
61
|
data: (_asyncQueue$ = asyncQueue[0]) == null ? void 0 : _asyncQueue$.data,
|
|
64
|
-
type: (_asyncQueue$2 = asyncQueue[0]) == null ? void 0 : _asyncQueue$2.type,
|
|
65
62
|
resolve: resolveHeadItem,
|
|
66
63
|
reject: rejectHeadItem
|
|
67
64
|
} : undefined,
|
|
68
|
-
|
|
65
|
+
push: push
|
|
69
66
|
};
|
|
70
|
-
};
|
|
67
|
+
}; // ------------------------------------------------------------------------------------
|
|
68
|
+
|
|
71
69
|
var syncUIFactory = function syncUIFactory() {
|
|
72
70
|
var mutSyncUIComponentsRenderQueue = [];
|
|
73
|
-
var ThrowIfMoreInstances =
|
|
71
|
+
var ThrowIfMoreInstances = getSingletonComponentCheck("<SyncUI /> has to be initialized only once");
|
|
74
72
|
return {
|
|
75
73
|
makeSyncUI: function makeSyncUI(SyncUIUserComp) {
|
|
76
74
|
var _ref, _SyncUIUserComp$displ;
|
|
77
75
|
|
|
78
76
|
var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
|
|
79
77
|
|
|
80
|
-
var syncUIComponentType = Symbol(_debugName); // object with the
|
|
78
|
+
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
|
|
81
79
|
|
|
82
80
|
var singletonSyncUIRef = {
|
|
83
|
-
|
|
81
|
+
push: undefined
|
|
84
82
|
};
|
|
85
83
|
|
|
86
|
-
var
|
|
84
|
+
var SyncUISingletonComponent = function SyncUISingletonComponent(props) {
|
|
87
85
|
useComponentDidMount(function () {
|
|
88
|
-
singletonSyncUIRef.
|
|
86
|
+
singletonSyncUIRef.push = props.push;
|
|
89
87
|
return function () {
|
|
90
|
-
return singletonSyncUIRef.
|
|
88
|
+
return singletonSyncUIRef.push = undefined;
|
|
91
89
|
};
|
|
92
90
|
});
|
|
93
91
|
if (!props.head) return null;
|
|
94
|
-
if (props.head.type !== syncUIComponentType) return null;
|
|
92
|
+
if (props.head.data.type !== syncUIComponentType) return null;
|
|
95
93
|
return React__default.createElement(SyncUIUserComp, {
|
|
96
|
-
data: props.head.data,
|
|
94
|
+
data: props.head.data.inputData,
|
|
97
95
|
resolve: props.head.resolve,
|
|
98
96
|
reject: props.head.reject
|
|
99
97
|
});
|
|
100
98
|
};
|
|
101
99
|
|
|
102
|
-
mutSyncUIComponentsRenderQueue.push(
|
|
100
|
+
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);
|
|
103
101
|
return function (input) {
|
|
104
|
-
if (!singletonSyncUIRef.
|
|
105
|
-
return singletonSyncUIRef.
|
|
102
|
+
if (!singletonSyncUIRef.push) throw new Error("You have to initialize <SyncUI />");
|
|
103
|
+
return singletonSyncUIRef.push({
|
|
104
|
+
type: syncUIComponentType,
|
|
105
|
+
inputData: input
|
|
106
|
+
});
|
|
106
107
|
};
|
|
107
108
|
},
|
|
108
109
|
SyncUI: function SyncUI() {
|
|
109
|
-
var queue =
|
|
110
|
+
var queue = usePromiseQueue();
|
|
110
111
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
|
|
111
112
|
return React__default.createElement(React__default.Fragment, {
|
|
112
113
|
key: key
|
|
@@ -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
|
|
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 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// 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 const ThrowIfMoreInstances = getSingletonComponentCheck(\n \"<SyncUI /> has to be initialized only once\"\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","getSingletonComponentCheck","errorMsg","globalMountCounter","Error","React","Fragment","usePromiseQueue","useState","asyncQueue","setAsyncQueue","push","useCallback","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","SyncUISingletonComponent","props","type","inputData","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,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=function(e){n.useEffect(e,[])},u=function(){var e,u=[],a=(e=0,function(){return r((function(){if(e>0)throw new Error("<SyncUI /> has to be initialized only once");e++})),t.createElement(t.Fragment,null)});return{makeSyncUI:function(e){var n,a,c=null!=(n=null!=(a=e.displayName)?a:e.name)?n:"uniqSymbolMessageType",l=Symbol(c),o={push:void 0};return u.push((function(n){return r((function(){return o.push=n.push,function(){return o.push=void 0}})),n.head?n.head.data.type!==l?null:t.createElement(e,{data:n.head.data.inputData,resolve:n.head.resolve,reject:n.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 e,r,c,l,o,i,s,f=(c=(r=n.useState([]))[0],l=r[1],o=n.useCallback((function(e){return new Promise((function(n,t){return l((function(r){return[].concat(r,[{data:e,resolve:n,reject:t}])}))}))}),[]),i=n.useCallback((function(e){l((function(n){var t=n[0],r=n.slice(1);return null==t||t.resolve(e),r}))}),[]),s=n.useCallback((function(e){l((function(n){var t=n[0],r=n.slice(1);return null==t||t.reject(e),r}))}),[]),{head:c[0]?{data:null==(e=c[0])?void 0:e.data,resolve:i,reject:s}:void 0,push:o});return t.createElement(t.Fragment,null,t.createElement(a,null),u.map((function(e,n){return t.createElement(t.Fragment,{key:n},t.createElement(e,Object.assign({},f)))})))}}},a=u(),c=a.makeSyncUI;exports.SyncUI=a.SyncUI,exports.makeSyncUI=c,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
|
|
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 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// 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 const ThrowIfMoreInstances = getSingletonComponentCheck(\n \"<SyncUI /> has to be initialized only once\"\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","syncUIFactory","globalMountCounter","mutSyncUIComponentsRenderQueue","ThrowIfMoreInstances","Error","React","Fragment","makeSyncUI","SyncUIUserComp","_debugName","displayName","name","syncUIComponentType","Symbol","singletonSyncUIRef","push","undefined","props","head","data","type","inputData","resolve","reject","input","SyncUI","asyncQueue","setAsyncQueue","resolveHeadItem","rejectHeadItem","queue","useState","useCallback","Promise","p","value","first","rest","reason","_asyncQueue$","map","SyncComp","key"],"mappings":"oJAEaA,EAAuB,SAACC,GACnCC,YAAUD,EAAI,KCFHE,ED8EgB,eAxEvBC,EAyEEC,EAAiC,GAIjCC,GA7EFF,EAAqB,EAElB,kBACLJ,GAAqB,cACfI,EAAqB,EAAG,MAAM,IAAIG,MA0ExC,8CAzEEH,OAEKI,gBAACA,EAAMC,uBA0ET,CACLC,WAAY,SACVC,WAWMC,oBACJD,EAAeE,eACfF,EAAeG,QACf,wBAEIC,EAAsBC,OAAOJ,GAG7BK,EAAqB,CACzBC,UAAMC,UAqBRd,EAA+Ba,MAlBE,SAACE,UAChCpB,GAAqB,kBACnBiB,EAAmBC,KAAOE,EAAMF,KACzB,kBAAOD,EAAmBC,UAAOC,MAGrCC,EAAMC,KACPD,EAAMC,KAAKC,KAAKC,OAASR,EAA4B,KAGvDP,gBAACG,GACCW,KAAMF,EAAMC,KAAKC,KAAKE,UACtBC,QAASL,EAAMC,KAAKI,QACpBC,OAAQN,EAAMC,KAAKK,SAPC,QAcnB,SAACC,OACDV,EAAmBC,KACtB,MAAM,IAAIX,kDACLU,EAAmBC,KAAK,CAC7BK,KAAMR,EACNS,UAAWG,MAIjBC,OAAQ,mBA3GHC,EAAYC,EAQbZ,EAMAa,EAQAC,EAsFIC,GA5GHJ,KAA6BK,WAClC,QADiBJ,OAQbZ,EAAOiB,eAAY,SAACb,UACjB,IAAIc,SAAsB,SAACX,EAASC,UACzCI,GAAc,SAAAO,mBAASA,GAAG,CAAEf,KAAAA,EAAMG,QAAAA,EAASC,OAAAA,aAE5C,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,CACLnB,KAAMQ,EAAW,GACb,CACEP,cAAMO,EAAW,WAAXa,EAAepB,KACrBG,QAASM,EACTL,OAAQM,QAEVb,EACJD,KAAAA,WAwEIV,gCACEA,gBAACF,QACAD,EAA+BsC,KAAI,SAACC,EAAUC,UAC7CrC,gBAACA,EAAMC,UAASoC,IAAKA,GACnBrC,gBAACoC,mBAAaX,cCnJU9B,IAAvBO,IAAAA,4BAAYkB"}
|
|
@@ -4,7 +4,7 @@ var useComponentDidMount = function useComponentDidMount(fn) {
|
|
|
4
4
|
useEffect(fn, []);
|
|
5
5
|
};
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var getSingletonComponentCheck = function getSingletonComponentCheck(errorMsg) {
|
|
8
8
|
var globalMountCounter = 0;
|
|
9
9
|
return function () {
|
|
10
10
|
useComponentDidMount(function () {
|
|
@@ -13,21 +13,19 @@ var getSingletonCompCheck = function getSingletonCompCheck(errorMsg) {
|
|
|
13
13
|
});
|
|
14
14
|
return React.createElement(React.Fragment, null);
|
|
15
15
|
};
|
|
16
|
-
};
|
|
17
|
-
|
|
16
|
+
};
|
|
18
17
|
|
|
19
|
-
var
|
|
20
|
-
var _asyncQueue
|
|
18
|
+
var usePromiseQueue = function usePromiseQueue() {
|
|
19
|
+
var _asyncQueue$;
|
|
21
20
|
|
|
22
21
|
var _useState = useState([]),
|
|
23
22
|
asyncQueue = _useState[0],
|
|
24
23
|
setAsyncQueue = _useState[1];
|
|
25
24
|
|
|
26
|
-
var
|
|
25
|
+
var push = useCallback(function (data) {
|
|
27
26
|
return new Promise(function (resolve, reject) {
|
|
28
27
|
return setAsyncQueue(function (p) {
|
|
29
28
|
return [].concat(p, [{
|
|
30
|
-
type: type,
|
|
31
29
|
data: data,
|
|
32
30
|
resolve: resolve,
|
|
33
31
|
reject: reject
|
|
@@ -54,52 +52,55 @@ var useAsyncQueue = function useAsyncQueue() {
|
|
|
54
52
|
return {
|
|
55
53
|
head: asyncQueue[0] ? {
|
|
56
54
|
data: (_asyncQueue$ = asyncQueue[0]) == null ? void 0 : _asyncQueue$.data,
|
|
57
|
-
type: (_asyncQueue$2 = asyncQueue[0]) == null ? void 0 : _asyncQueue$2.type,
|
|
58
55
|
resolve: resolveHeadItem,
|
|
59
56
|
reject: rejectHeadItem
|
|
60
57
|
} : undefined,
|
|
61
|
-
|
|
58
|
+
push: push
|
|
62
59
|
};
|
|
63
|
-
};
|
|
60
|
+
}; // ------------------------------------------------------------------------------------
|
|
61
|
+
|
|
64
62
|
var syncUIFactory = function syncUIFactory() {
|
|
65
63
|
var mutSyncUIComponentsRenderQueue = [];
|
|
66
|
-
var ThrowIfMoreInstances =
|
|
64
|
+
var ThrowIfMoreInstances = getSingletonComponentCheck("<SyncUI /> has to be initialized only once");
|
|
67
65
|
return {
|
|
68
66
|
makeSyncUI: function makeSyncUI(SyncUIUserComp) {
|
|
69
67
|
var _ref, _SyncUIUserComp$displ;
|
|
70
68
|
|
|
71
69
|
var _debugName = (_ref = (_SyncUIUserComp$displ = SyncUIUserComp.displayName) != null ? _SyncUIUserComp$displ : SyncUIUserComp.name) != null ? _ref : "uniqSymbolMessageType";
|
|
72
70
|
|
|
73
|
-
var syncUIComponentType = Symbol(_debugName); // object with the
|
|
71
|
+
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
|
|
74
72
|
|
|
75
73
|
var singletonSyncUIRef = {
|
|
76
|
-
|
|
74
|
+
push: undefined
|
|
77
75
|
};
|
|
78
76
|
|
|
79
|
-
var
|
|
77
|
+
var SyncUISingletonComponent = function SyncUISingletonComponent(props) {
|
|
80
78
|
useComponentDidMount(function () {
|
|
81
|
-
singletonSyncUIRef.
|
|
79
|
+
singletonSyncUIRef.push = props.push;
|
|
82
80
|
return function () {
|
|
83
|
-
return singletonSyncUIRef.
|
|
81
|
+
return singletonSyncUIRef.push = undefined;
|
|
84
82
|
};
|
|
85
83
|
});
|
|
86
84
|
if (!props.head) return null;
|
|
87
|
-
if (props.head.type !== syncUIComponentType) return null;
|
|
85
|
+
if (props.head.data.type !== syncUIComponentType) return null;
|
|
88
86
|
return React.createElement(SyncUIUserComp, {
|
|
89
|
-
data: props.head.data,
|
|
87
|
+
data: props.head.data.inputData,
|
|
90
88
|
resolve: props.head.resolve,
|
|
91
89
|
reject: props.head.reject
|
|
92
90
|
});
|
|
93
91
|
};
|
|
94
92
|
|
|
95
|
-
mutSyncUIComponentsRenderQueue.push(
|
|
93
|
+
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);
|
|
96
94
|
return function (input) {
|
|
97
|
-
if (!singletonSyncUIRef.
|
|
98
|
-
return singletonSyncUIRef.
|
|
95
|
+
if (!singletonSyncUIRef.push) throw new Error("You have to initialize <SyncUI />");
|
|
96
|
+
return singletonSyncUIRef.push({
|
|
97
|
+
type: syncUIComponentType,
|
|
98
|
+
inputData: input
|
|
99
|
+
});
|
|
99
100
|
};
|
|
100
101
|
},
|
|
101
102
|
SyncUI: function SyncUI() {
|
|
102
|
-
var queue =
|
|
103
|
+
var queue = usePromiseQueue();
|
|
103
104
|
return React.createElement(React.Fragment, null, React.createElement(ThrowIfMoreInstances, null), mutSyncUIComponentsRenderQueue.map(function (SyncComp, key) {
|
|
104
105
|
return React.createElement(React.Fragment, {
|
|
105
106
|
key: key
|
|
@@ -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
|
|
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 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// 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 const ThrowIfMoreInstances = getSingletonComponentCheck(\n \"<SyncUI /> has to be initialized only once\"\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","getSingletonComponentCheck","errorMsg","globalMountCounter","Error","React","Fragment","usePromiseQueue","useState","asyncQueue","setAsyncQueue","push","useCallback","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","SyncUISingletonComponent","props","type","inputData","input","SyncUI","map","SyncComp","key","_syncUIFactory"],"mappings":"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"}
|
package/dist/syncUI.d.ts
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React, { useEffect } from "react";
|
|
2
2
|
export declare const useComponentDidMount: (fn: Parameters<typeof useEffect>[0]) => void;
|
|
3
|
-
|
|
4
|
-
head
|
|
3
|
+
declare type PromiseQueueAPI<Data, ResolveValue> = {
|
|
4
|
+
head?: {
|
|
5
5
|
data: Data;
|
|
6
|
-
type: Symbol;
|
|
7
6
|
resolve: (value: ResolveValue) => void;
|
|
8
7
|
reject: (reason?: any) => void;
|
|
9
|
-
}
|
|
10
|
-
|
|
8
|
+
};
|
|
9
|
+
push: (data: Data) => Promise<ResolveValue>;
|
|
11
10
|
};
|
|
11
|
+
export declare const usePromiseQueue: <Data, ResolveValue = void>() => PromiseQueueAPI<Data, ResolveValue>;
|
|
12
12
|
export declare const syncUIFactory: () => {
|
|
13
|
-
makeSyncUI: <
|
|
14
|
-
data:
|
|
13
|
+
makeSyncUI: <InputData, ResolveValue = void>(SyncUIUserComp: React.FC<{
|
|
14
|
+
data: InputData;
|
|
15
15
|
resolve: (value: ResolveValue) => void;
|
|
16
16
|
reject: (reason?: any) => void;
|
|
17
|
-
}>) => (input:
|
|
17
|
+
}>) => (input: InputData) => Promise<ResolveValue>;
|
|
18
18
|
SyncUI: () => JSX.Element;
|
|
19
19
|
};
|
|
20
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-sync-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"repository": "https://github.com/Svehla/react-sync-ui",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Jakub Švehla",
|
|
@@ -29,16 +29,17 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@size-limit/preset-small-lib": "^5.0.5",
|
|
32
|
-
"@testing-library/react
|
|
33
|
-
"@types/react": "^
|
|
34
|
-
"@types/react-dom": "^
|
|
32
|
+
"@testing-library/react": "^13.4.0",
|
|
33
|
+
"@types/react": "^18.0.21",
|
|
34
|
+
"@types/react-dom": "^18.0.6",
|
|
35
35
|
"@typescript-eslint/parser": "^4.33.0",
|
|
36
36
|
"eslint-config-react-app": "^6.0.0",
|
|
37
37
|
"eslint-plugin-react": "^7.31.10",
|
|
38
38
|
"eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
|
|
39
39
|
"husky": "^7.0.2",
|
|
40
|
-
"react": "^
|
|
41
|
-
"react-dom": "^
|
|
40
|
+
"react": "^18.2.0",
|
|
41
|
+
"react-dom": "^18.2.0",
|
|
42
|
+
"react-test-renderer": "^18.2.0",
|
|
42
43
|
"size-limit": "^5.0.5",
|
|
43
44
|
"tsdx": "^0.14.1",
|
|
44
45
|
"tslib": "^2.3.1",
|
package/src/syncUI.tsx
CHANGED
|
@@ -4,7 +4,7 @@ export const useComponentDidMount = (fn: Parameters<typeof useEffect>[0]) => {
|
|
|
4
4
|
useEffect(fn, []);
|
|
5
5
|
};
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const getSingletonComponentCheck = (errorMsg: string) => {
|
|
8
8
|
let globalMountCounter = 0;
|
|
9
9
|
|
|
10
10
|
return () => {
|
|
@@ -16,20 +16,35 @@ const getSingletonCompCheck = (errorMsg: string) => {
|
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
//
|
|
20
|
-
|
|
19
|
+
// ------------------------------------------------------------------------------------
|
|
20
|
+
// TODO: there is tsdx old typescript parser and new ts fancy syntax is not working...
|
|
21
|
+
// https://github.com/jaredpalmer/tsdx/issues/200
|
|
22
|
+
// type PromiseQueueAPI<Data, ResolveValue> = ReturnType<typeof usePromiseQueue<any, any>>
|
|
23
|
+
type PromiseQueueAPI<Data, ResolveValue> = {
|
|
24
|
+
head?: {
|
|
25
|
+
data: Data;
|
|
26
|
+
resolve: (value: ResolveValue) => void;
|
|
27
|
+
reject: (reason?: any) => void;
|
|
28
|
+
};
|
|
29
|
+
push: (data: Data) => Promise<ResolveValue>;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const usePromiseQueue = <Data, ResolveValue = void>(): PromiseQueueAPI<
|
|
33
|
+
Data,
|
|
34
|
+
ResolveValue
|
|
35
|
+
> => {
|
|
21
36
|
const [asyncQueue, setAsyncQueue] = useState(
|
|
22
37
|
[] as {
|
|
23
|
-
// TODO: rename type into typeId
|
|
24
|
-
type: Symbol;
|
|
25
38
|
data: Data;
|
|
26
39
|
resolve: (arg: ResolveValue) => void;
|
|
27
40
|
reject: (arg: any) => void;
|
|
28
41
|
}[]
|
|
29
42
|
);
|
|
30
43
|
|
|
31
|
-
const
|
|
32
|
-
return new Promise<ResolveValue>((resolve, reject) =>
|
|
44
|
+
const push = useCallback((data: Data) => {
|
|
45
|
+
return new Promise<ResolveValue>((resolve, reject) =>
|
|
46
|
+
setAsyncQueue(p => [...p, { data, resolve, reject }])
|
|
47
|
+
);
|
|
33
48
|
}, []);
|
|
34
49
|
|
|
35
50
|
const resolveHeadItem = useCallback((value: ResolveValue) => {
|
|
@@ -52,72 +67,81 @@ export const useAsyncQueue = <Data, ResolveValue = void>() => {
|
|
|
52
67
|
head: asyncQueue[0]
|
|
53
68
|
? {
|
|
54
69
|
data: asyncQueue[0]?.data,
|
|
55
|
-
type: asyncQueue[0]?.type,
|
|
56
70
|
resolve: resolveHeadItem,
|
|
57
71
|
reject: rejectHeadItem
|
|
58
72
|
}
|
|
59
73
|
: undefined,
|
|
60
|
-
|
|
74
|
+
push
|
|
61
75
|
};
|
|
62
76
|
};
|
|
63
|
-
|
|
64
|
-
//
|
|
65
|
-
// type QueueItem<Data, ResolveValue> = ReturnType<typeof useAsyncQueue<any, any>>
|
|
66
|
-
type QueueItem<Data, ResolveValue> = {
|
|
67
|
-
head:
|
|
68
|
-
| {
|
|
69
|
-
data: Data;
|
|
70
|
-
type: Symbol;
|
|
71
|
-
resolve: (value: ResolveValue) => void;
|
|
72
|
-
reject: (reason?: any) => void;
|
|
73
|
-
}
|
|
74
|
-
| undefined;
|
|
75
|
-
registerToQueue: (type: Symbol, data: Data) => Promise<ResolveValue>;
|
|
76
|
-
};
|
|
77
|
+
|
|
78
|
+
// ------------------------------------------------------------------------------------
|
|
77
79
|
|
|
78
80
|
export const syncUIFactory = () => {
|
|
79
|
-
const mutSyncUIComponentsRenderQueue = [] as React.FC<
|
|
81
|
+
const mutSyncUIComponentsRenderQueue = [] as React.FC<
|
|
82
|
+
PromiseQueueAPI<any, any>
|
|
83
|
+
>[];
|
|
80
84
|
|
|
81
|
-
const ThrowIfMoreInstances =
|
|
85
|
+
const ThrowIfMoreInstances = getSingletonComponentCheck(
|
|
86
|
+
"<SyncUI /> has to be initialized only once"
|
|
87
|
+
);
|
|
82
88
|
|
|
83
89
|
return {
|
|
84
|
-
makeSyncUI: <
|
|
90
|
+
makeSyncUI: <InputData, ResolveValue = void>(
|
|
85
91
|
SyncUIUserComp: React.FC<{
|
|
86
|
-
data:
|
|
92
|
+
data: InputData;
|
|
87
93
|
resolve: (value: ResolveValue) => void;
|
|
88
94
|
reject: (reason?: any) => void;
|
|
89
95
|
}>
|
|
90
96
|
) => {
|
|
91
|
-
|
|
97
|
+
type QItem = PromiseQueueAPI<
|
|
98
|
+
{ type: Symbol; inputData: InputData },
|
|
99
|
+
ResolveValue
|
|
100
|
+
>;
|
|
101
|
+
|
|
102
|
+
const _debugName =
|
|
103
|
+
SyncUIUserComp.displayName ??
|
|
104
|
+
SyncUIUserComp.name ??
|
|
105
|
+
"uniqSymbolMessageType";
|
|
92
106
|
|
|
93
107
|
const syncUIComponentType = Symbol(_debugName);
|
|
94
108
|
|
|
95
|
-
// object with the
|
|
109
|
+
// object pointer reference with the push key has to be there to change returned mutable reference object while the function is already called
|
|
96
110
|
const singletonSyncUIRef = {
|
|
97
|
-
|
|
111
|
+
push: undefined as undefined | QItem["push"]
|
|
98
112
|
};
|
|
99
113
|
|
|
100
|
-
const
|
|
114
|
+
const SyncUISingletonComponent = (props: QItem) => {
|
|
101
115
|
useComponentDidMount(() => {
|
|
102
|
-
singletonSyncUIRef.
|
|
103
|
-
return () => (singletonSyncUIRef.
|
|
116
|
+
singletonSyncUIRef.push = props.push;
|
|
117
|
+
return () => (singletonSyncUIRef.push = undefined);
|
|
104
118
|
});
|
|
105
119
|
|
|
106
120
|
if (!props.head) return null;
|
|
107
|
-
if (props.head.type !== syncUIComponentType) return null;
|
|
108
|
-
|
|
109
|
-
return
|
|
121
|
+
if (props.head.data.type !== syncUIComponentType) return null;
|
|
122
|
+
|
|
123
|
+
return (
|
|
124
|
+
<SyncUIUserComp
|
|
125
|
+
data={props.head.data.inputData}
|
|
126
|
+
resolve={props.head.resolve}
|
|
127
|
+
reject={props.head.reject}
|
|
128
|
+
/>
|
|
129
|
+
);
|
|
110
130
|
};
|
|
111
131
|
|
|
112
|
-
mutSyncUIComponentsRenderQueue.push(
|
|
132
|
+
mutSyncUIComponentsRenderQueue.push(SyncUISingletonComponent);
|
|
113
133
|
|
|
114
|
-
return (input:
|
|
115
|
-
if (!singletonSyncUIRef.
|
|
116
|
-
|
|
134
|
+
return (input: InputData) => {
|
|
135
|
+
if (!singletonSyncUIRef.push)
|
|
136
|
+
throw new Error(`You have to initialize <SyncUI />`);
|
|
137
|
+
return singletonSyncUIRef.push({
|
|
138
|
+
type: syncUIComponentType,
|
|
139
|
+
inputData: input
|
|
140
|
+
});
|
|
117
141
|
};
|
|
118
142
|
},
|
|
119
143
|
SyncUI: () => {
|
|
120
|
-
const queue =
|
|
144
|
+
const queue = usePromiseQueue();
|
|
121
145
|
return (
|
|
122
146
|
<>
|
|
123
147
|
<ThrowIfMoreInstances />
|