react-sync-ui 0.1.5 → 0.1.6
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
CHANGED
|
@@ -8,6 +8,30 @@
|
|
|
8
8
|
<button
|
|
9
9
|
onClick={async () => {
|
|
10
10
|
// call synchronous UI workflow with promisified React components
|
|
11
|
+
|
|
12
|
+
const likeSyncUI = await syncConfirm("Do you like this library?");
|
|
13
|
+
|
|
14
|
+
if (likeSyncUI) {
|
|
15
|
+
await syncAlert("Thanks, we like you too");
|
|
16
|
+
} else {
|
|
17
|
+
const isUserSure = await syncConfirm("Are you sure?");
|
|
18
|
+
if (isUserSure) {
|
|
19
|
+
await syncAlert("Try to give it a second try");
|
|
20
|
+
} else {
|
|
21
|
+
await syncAlert("Thanks, we like you too");
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
Run
|
|
27
|
+
</button>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<button
|
|
34
|
+
onClick={async () => {
|
|
11
35
|
const name = await syncPrompt("Fill your name");
|
|
12
36
|
|
|
13
37
|
while ((await syncPrompt(`Fill your password!`)) !== "1234") {
|
|
@@ -21,7 +45,7 @@
|
|
|
21
45
|
</button>
|
|
22
46
|
```
|
|
23
47
|
|
|
24
|
-
|
|
25
49
|
|
|
26
50
|
`react-sync-ui` provides function `makeSyncUI<InputData, ResolveValue>` which transform your declarative React Components
|
|
27
51
|
into the promisified awaitable functions.
|
|
@@ -55,7 +79,7 @@ Thanks to `react-sync-ui` you can simply promisify your React Components UI and
|
|
|
55
79
|
|
|
56
80
|
And that's why `react-sync-ui` was created. ❤
|
|
57
81
|
|
|
58
|
-
PS:
|
|
82
|
+
PS: I took inspiration from awesome functions: `window.alert`, `window.confirm` and `window.prompt`.
|
|
59
83
|
|
|
60
84
|
## Installation
|
|
61
85
|
|
|
@@ -215,3 +239,20 @@ export const syncConfirm = makeSyncUI<
|
|
|
215
239
|
click to me
|
|
216
240
|
</button>;
|
|
217
241
|
```
|
|
242
|
+
|
|
243
|
+
## Advance use-case, Multiple async queues
|
|
244
|
+
|
|
245
|
+
You're able to initialized multiple independent instances of `react-sync-ui` queue.
|
|
246
|
+
|
|
247
|
+
Multiple instances are made by `xxx`
|
|
248
|
+
|
|
249
|
+
```tsx
|
|
250
|
+
import { syncUIFactory } from "react-sync-ui";
|
|
251
|
+
|
|
252
|
+
export const syncUI1 = syncUIFactory();
|
|
253
|
+
export const syncUI2 = syncUIFactory();
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
You may check the full multiple queue example here
|
|
257
|
+
|
|
258
|
+
[react-sync-ui/example/MultiQueuesApp.tsx](https://github.com/Svehla/react-sync-ui/blob/main/example/MultiQueuesApp.tsx)
|
|
@@ -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\
|
|
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\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 +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\
|
|
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\nconst 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":"oJAEMA,EAAuB,SAACC,GAC5BC,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"}
|
|
@@ -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\
|
|
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\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
package/package.json
CHANGED
package/src/syncUI.tsx
CHANGED