@faasjs/react 0.0.3-beta.9 → 0.0.3-beta.91
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 +22 -83
- package/dist/index.d.mts +122 -0
- package/dist/index.d.ts +7 -6
- package/dist/index.js +65 -68
- package/dist/index.mjs +43 -32
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ React plugin for FaasJS.
|
|
|
10
10
|
|
|
11
11
|
## Install
|
|
12
12
|
|
|
13
|
-
npm install @faasjs/react
|
|
13
|
+
npm install @faasjs/react react react-dom
|
|
14
14
|
|
|
15
15
|
## Modules
|
|
16
16
|
|
|
@@ -20,14 +20,17 @@ React plugin for FaasJS.
|
|
|
20
20
|
- [Response](classes/Response.md)
|
|
21
21
|
- [ResponseError](classes/ResponseError.md)
|
|
22
22
|
|
|
23
|
+
### Interfaces
|
|
24
|
+
|
|
25
|
+
- [FaasDataInjection](interfaces/FaasDataInjection.md)
|
|
26
|
+
- [FaasDataWrapperProps](interfaces/FaasDataWrapperProps.md)
|
|
27
|
+
- [FaasReactClientInstance](interfaces/FaasReactClientInstance.md)
|
|
28
|
+
|
|
23
29
|
### Type Aliases
|
|
24
30
|
|
|
25
31
|
- [FaasAction](#faasaction)
|
|
26
32
|
- [FaasData](#faasdata)
|
|
27
|
-
- [FaasDataInjection](#faasdatainjection)
|
|
28
|
-
- [FaasDataWrapperProps](#faasdatawrapperprops)
|
|
29
33
|
- [FaasParams](#faasparams)
|
|
30
|
-
- [FaasReactClientInstance](#faasreactclientinstance)
|
|
31
34
|
- [Options](#options)
|
|
32
35
|
- [ResponseHeaders](#responseheaders)
|
|
33
36
|
|
|
@@ -59,60 +62,6 @@ ___
|
|
|
59
62
|
|
|
60
63
|
___
|
|
61
64
|
|
|
62
|
-
### FaasDataInjection
|
|
63
|
-
|
|
64
|
-
Ƭ **FaasDataInjection**<`Data`\>: `Object`
|
|
65
|
-
|
|
66
|
-
Injects FaasData props.
|
|
67
|
-
|
|
68
|
-
#### Type parameters
|
|
69
|
-
|
|
70
|
-
| Name | Type |
|
|
71
|
-
| :------ | :------ |
|
|
72
|
-
| `Data` | `any` |
|
|
73
|
-
|
|
74
|
-
#### Type declaration
|
|
75
|
-
|
|
76
|
-
| Name | Type |
|
|
77
|
-
| :------ | :------ |
|
|
78
|
-
| `action` | `string` \| `any` |
|
|
79
|
-
| `data` | `Data` |
|
|
80
|
-
| `error` | `any` |
|
|
81
|
-
| `loading` | `boolean` |
|
|
82
|
-
| `params` | `Record`<`string`, `any`\> |
|
|
83
|
-
| `promise` | `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
|
|
84
|
-
| `setData` | `React.Dispatch`<`React.SetStateAction`<`Data`\>\> |
|
|
85
|
-
| `setError` | `React.Dispatch`<`React.SetStateAction`<`any`\>\> |
|
|
86
|
-
| `setLoading` | `React.Dispatch`<`React.SetStateAction`<`boolean`\>\> |
|
|
87
|
-
| `setPromise` | `React.Dispatch`<`React.SetStateAction`<`Promise`<[`Response`](classes/Response.md)<`Data`\>\>\>\> |
|
|
88
|
-
| `reload` | (`params?`: `Record`<`string`, `any`\>) => `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
|
|
89
|
-
|
|
90
|
-
___
|
|
91
|
-
|
|
92
|
-
### FaasDataWrapperProps
|
|
93
|
-
|
|
94
|
-
Ƭ **FaasDataWrapperProps**<`PathOrData`\>: `Object`
|
|
95
|
-
|
|
96
|
-
#### Type parameters
|
|
97
|
-
|
|
98
|
-
| Name | Type |
|
|
99
|
-
| :------ | :------ |
|
|
100
|
-
| `PathOrData` | extends [`FaasAction`](#faasaction) |
|
|
101
|
-
|
|
102
|
-
#### Type declaration
|
|
103
|
-
|
|
104
|
-
| Name | Type | Description |
|
|
105
|
-
| :------ | :------ | :------ |
|
|
106
|
-
| `action` | `string` | - |
|
|
107
|
-
| `data?` | [`FaasData`](#faasdata)<`PathOrData`\> | use custom data, should work with setData |
|
|
108
|
-
| `fallback?` | `JSX.Element` \| ``false`` | - |
|
|
109
|
-
| `params?` | [`FaasParams`](#faasparams)<`PathOrData`\> | - |
|
|
110
|
-
| `setData?` | `React.Dispatch`<`React.SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> | use custom setData, should work with data |
|
|
111
|
-
| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `void` | - |
|
|
112
|
-
| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
|
|
113
|
-
|
|
114
|
-
___
|
|
115
|
-
|
|
116
65
|
### FaasParams
|
|
117
66
|
|
|
118
67
|
Ƭ **FaasParams**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Params"``] : `any`
|
|
@@ -125,20 +74,6 @@ ___
|
|
|
125
74
|
|
|
126
75
|
___
|
|
127
76
|
|
|
128
|
-
### FaasReactClientInstance
|
|
129
|
-
|
|
130
|
-
Ƭ **FaasReactClientInstance**: `Object`
|
|
131
|
-
|
|
132
|
-
#### Type declaration
|
|
133
|
-
|
|
134
|
-
| Name | Type |
|
|
135
|
-
| :------ | :------ |
|
|
136
|
-
| `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: [`FaasParams`](#faasparams)<`PathOrData`\>) => `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\> |
|
|
137
|
-
| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: [`FaasParams`](#faasparams)<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\> |
|
|
138
|
-
| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
|
|
139
|
-
|
|
140
|
-
___
|
|
141
|
-
|
|
142
77
|
### Options
|
|
143
78
|
|
|
144
79
|
Ƭ **Options**: `RequestInit` & { `beforeRequest?`: (`{
|
|
@@ -173,7 +108,7 @@ A data wrapper for react components
|
|
|
173
108
|
|
|
174
109
|
| Name | Type |
|
|
175
110
|
| :------ | :------ |
|
|
176
|
-
| `props` | [`FaasDataWrapperProps`](
|
|
111
|
+
| `props` | [`FaasDataWrapperProps`](interfaces/FaasDataWrapperProps.md)<`PathOrData`\> |
|
|
177
112
|
|
|
178
113
|
#### Returns
|
|
179
114
|
|
|
@@ -194,7 +129,7 @@ ___
|
|
|
194
129
|
|
|
195
130
|
### FaasReactClient
|
|
196
131
|
|
|
197
|
-
▸ **FaasReactClient**(
|
|
132
|
+
▸ **FaasReactClient**(`«destructured»`): [`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
|
|
198
133
|
|
|
199
134
|
Before use faas, you should initialize a FaasReactClient.
|
|
200
135
|
|
|
@@ -202,14 +137,14 @@ Before use faas, you should initialize a FaasReactClient.
|
|
|
202
137
|
|
|
203
138
|
| Name | Type |
|
|
204
139
|
| :------ | :------ |
|
|
205
|
-
|
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
140
|
+
| `«destructured»` | `Object` |
|
|
141
|
+
| › `domain` | `string` |
|
|
142
|
+
| › `onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
|
|
143
|
+
| › `options?` | [`Options`](#options) |
|
|
209
144
|
|
|
210
145
|
#### Returns
|
|
211
146
|
|
|
212
|
-
[`FaasReactClientInstance`](
|
|
147
|
+
[`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
|
|
213
148
|
|
|
214
149
|
```ts
|
|
215
150
|
const client = FaasReactClient({
|
|
@@ -252,7 +187,7 @@ ___
|
|
|
252
187
|
|
|
253
188
|
### getClient
|
|
254
189
|
|
|
255
|
-
▸ **getClient**(`domain?`): [`FaasReactClientInstance`](
|
|
190
|
+
▸ **getClient**(`domain?`): [`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
|
|
256
191
|
|
|
257
192
|
Get FaasReactClient instance
|
|
258
193
|
|
|
@@ -264,7 +199,7 @@ Get FaasReactClient instance
|
|
|
264
199
|
|
|
265
200
|
#### Returns
|
|
266
201
|
|
|
267
|
-
[`FaasReactClientInstance`](
|
|
202
|
+
[`FaasReactClientInstance`](interfaces/FaasReactClientInstance.md)
|
|
268
203
|
|
|
269
204
|
```ts
|
|
270
205
|
getClient()
|
|
@@ -276,7 +211,7 @@ ___
|
|
|
276
211
|
|
|
277
212
|
### useFaas
|
|
278
213
|
|
|
279
|
-
▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](
|
|
214
|
+
▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`, `options?`): [`FaasDataInjection`](interfaces/FaasDataInjection.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>
|
|
280
215
|
|
|
281
216
|
Request faas server with React hook
|
|
282
217
|
|
|
@@ -292,10 +227,14 @@ Request faas server with React hook
|
|
|
292
227
|
| :------ | :------ | :------ |
|
|
293
228
|
| `action` | `string` \| `PathOrData` | {string} action name |
|
|
294
229
|
| `defaultParams` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} initial action params |
|
|
230
|
+
| `options?` | `Object` | - |
|
|
231
|
+
| `options.data?` | [`FaasData`](#faasdata)<`PathOrData`\> | - |
|
|
232
|
+
| `options.setData?` | `Dispatch`<`SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> | - |
|
|
233
|
+
| `options.skip?` | `boolean` | - |
|
|
295
234
|
|
|
296
235
|
#### Returns
|
|
297
236
|
|
|
298
|
-
[`FaasDataInjection`](
|
|
237
|
+
[`FaasDataInjection`](interfaces/FaasDataInjection.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>
|
|
299
238
|
|
|
300
239
|
```ts
|
|
301
240
|
function Post ({ id }) {
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Response, Options, ResponseError } from '@faasjs/browser';
|
|
2
|
+
export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
|
|
3
|
+
import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
4
|
+
export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Injects FaasData props.
|
|
8
|
+
*/
|
|
9
|
+
interface FaasDataInjection<Data = any> {
|
|
10
|
+
action: string | any;
|
|
11
|
+
params: Record<string, any>;
|
|
12
|
+
loading: boolean;
|
|
13
|
+
data: Data;
|
|
14
|
+
error: any;
|
|
15
|
+
promise: Promise<Response<Data>>;
|
|
16
|
+
reload(params?: Record<string, any>): Promise<Response<Data>>;
|
|
17
|
+
setData: React.Dispatch<React.SetStateAction<Data>>;
|
|
18
|
+
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
|
+
setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>;
|
|
20
|
+
setError: React.Dispatch<React.SetStateAction<any>>;
|
|
21
|
+
}
|
|
22
|
+
interface FaasDataWrapperProps<PathOrData extends FaasAction> {
|
|
23
|
+
render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
|
|
24
|
+
children?: React.ReactElement<Partial<FaasDataInjection>>;
|
|
25
|
+
fallback?: JSX.Element | false;
|
|
26
|
+
action: string;
|
|
27
|
+
params?: FaasParams<PathOrData>;
|
|
28
|
+
onDataChange?(args: FaasDataInjection<FaasData<PathOrData>>): void;
|
|
29
|
+
/** use custom data, should work with setData */
|
|
30
|
+
data?: FaasData<PathOrData>;
|
|
31
|
+
/** use custom setData, should work with data */
|
|
32
|
+
setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
|
|
33
|
+
}
|
|
34
|
+
interface FaasReactClientInstance {
|
|
35
|
+
faas: <PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>;
|
|
36
|
+
useFaas: <PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
|
|
37
|
+
data?: FaasData<PathOrData>;
|
|
38
|
+
setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
|
|
39
|
+
skip?: boolean;
|
|
40
|
+
}) => FaasDataInjection<FaasData<PathOrData>>;
|
|
41
|
+
FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Before use faas, you should initialize a FaasReactClient.
|
|
45
|
+
*
|
|
46
|
+
* @param props.domain {string} The domain of your faas server
|
|
47
|
+
* @param props.options {Options} The options of client
|
|
48
|
+
* @returns {FaasReactClientInstance}
|
|
49
|
+
*
|
|
50
|
+
* ```ts
|
|
51
|
+
* const client = FaasReactClient({
|
|
52
|
+
* domain: 'localhost:8080/api'
|
|
53
|
+
* })
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
declare function FaasReactClient({ domain, options, onError }: {
|
|
57
|
+
domain: string;
|
|
58
|
+
options?: Options;
|
|
59
|
+
onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
|
|
60
|
+
}): FaasReactClientInstance;
|
|
61
|
+
/**
|
|
62
|
+
* Get FaasReactClient instance
|
|
63
|
+
* @param domain {string} empty string for default domain
|
|
64
|
+
* @returns {FaasReactClientInstance}
|
|
65
|
+
*
|
|
66
|
+
* ```ts
|
|
67
|
+
* getClient()
|
|
68
|
+
* // or
|
|
69
|
+
* getClient('another-domain')
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
declare function getClient(domain?: string): FaasReactClientInstance;
|
|
73
|
+
/**
|
|
74
|
+
* Request faas server
|
|
75
|
+
*
|
|
76
|
+
* @param action {string} action name
|
|
77
|
+
* @param params {object} action params
|
|
78
|
+
* @returns {Promise<Response<any>>}
|
|
79
|
+
*
|
|
80
|
+
* ```ts
|
|
81
|
+
* faas<{ title: string }>('post/get', { id: 1 }).then(res => {
|
|
82
|
+
* console.log(res.data.title)
|
|
83
|
+
* })
|
|
84
|
+
* ```
|
|
85
|
+
*/
|
|
86
|
+
declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response<FaasData<PathOrData>>>;
|
|
87
|
+
/**
|
|
88
|
+
* Request faas server with React hook
|
|
89
|
+
* @param action {string} action name
|
|
90
|
+
* @param defaultParams {object} initial action params
|
|
91
|
+
* @returns {FaasDataInjection<any>}
|
|
92
|
+
*
|
|
93
|
+
* ```ts
|
|
94
|
+
* function Post ({ id }) {
|
|
95
|
+
* const { data } = useFaas<{ title: string }>('post/get', { id })
|
|
96
|
+
* return <h1>{data.title}</h1>
|
|
97
|
+
* }
|
|
98
|
+
* ```
|
|
99
|
+
*/
|
|
100
|
+
declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
|
|
101
|
+
data?: FaasData<PathOrData>;
|
|
102
|
+
setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
|
|
103
|
+
skip?: boolean;
|
|
104
|
+
}): FaasDataInjection<FaasData<PathOrData>>;
|
|
105
|
+
/**
|
|
106
|
+
* A data wrapper for react components
|
|
107
|
+
* @returns {JSX.Element}
|
|
108
|
+
*
|
|
109
|
+
* ```ts
|
|
110
|
+
* <FaasDataWrapper<{
|
|
111
|
+
* id: string
|
|
112
|
+
* title: string
|
|
113
|
+
* }>
|
|
114
|
+
* action='post/get'
|
|
115
|
+
* params={ { id: 1 } }
|
|
116
|
+
* render={ ({ data }) => <h1>{ data.title }</h1> }
|
|
117
|
+
* />
|
|
118
|
+
* ```
|
|
119
|
+
*/
|
|
120
|
+
declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
121
|
+
|
|
122
|
+
export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
|
6
6
|
/**
|
|
7
7
|
* Injects FaasData props.
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
interface FaasDataInjection<Data = any> {
|
|
10
10
|
action: string | any;
|
|
11
11
|
params: Record<string, any>;
|
|
12
12
|
loading: boolean;
|
|
@@ -18,9 +18,10 @@ type FaasDataInjection<Data = any> = {
|
|
|
18
18
|
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
19
|
setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>;
|
|
20
20
|
setError: React.Dispatch<React.SetStateAction<any>>;
|
|
21
|
-
}
|
|
22
|
-
|
|
21
|
+
}
|
|
22
|
+
interface FaasDataWrapperProps<PathOrData extends FaasAction> {
|
|
23
23
|
render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
|
|
24
|
+
children?: React.ReactElement<Partial<FaasDataInjection>>;
|
|
24
25
|
fallback?: JSX.Element | false;
|
|
25
26
|
action: string;
|
|
26
27
|
params?: FaasParams<PathOrData>;
|
|
@@ -29,8 +30,8 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
|
|
|
29
30
|
data?: FaasData<PathOrData>;
|
|
30
31
|
/** use custom setData, should work with data */
|
|
31
32
|
setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
|
|
32
|
-
}
|
|
33
|
-
|
|
33
|
+
}
|
|
34
|
+
interface FaasReactClientInstance {
|
|
34
35
|
faas: <PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>;
|
|
35
36
|
useFaas: <PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
|
|
36
37
|
data?: FaasData<PathOrData>;
|
|
@@ -38,7 +39,7 @@ type FaasReactClientInstance = {
|
|
|
38
39
|
skip?: boolean;
|
|
39
40
|
}) => FaasDataInjection<FaasData<PathOrData>>;
|
|
40
41
|
FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
41
|
-
}
|
|
42
|
+
}
|
|
42
43
|
/**
|
|
43
44
|
* Before use faas, you should initialize a FaasReactClient.
|
|
44
45
|
*
|
package/dist/index.js
CHANGED
|
@@ -1,41 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var browser = require('@faasjs/browser');
|
|
4
|
+
var react = require('react');
|
|
19
5
|
|
|
20
6
|
// src/index.tsx
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
FaasDataWrapper: () => FaasDataWrapper,
|
|
24
|
-
FaasReactClient: () => FaasReactClient,
|
|
25
|
-
faas: () => faas,
|
|
26
|
-
getClient: () => getClient,
|
|
27
|
-
useFaas: () => useFaas
|
|
28
|
-
});
|
|
29
|
-
module.exports = __toCommonJS(src_exports);
|
|
30
|
-
var import_browser = require("@faasjs/browser");
|
|
31
|
-
var import_react = require("react");
|
|
32
7
|
var clients = {};
|
|
33
8
|
function FaasReactClient({
|
|
34
9
|
domain,
|
|
35
10
|
options,
|
|
36
11
|
onError
|
|
37
12
|
}) {
|
|
38
|
-
const client = new
|
|
13
|
+
const client = new browser.FaasBrowserClient(domain, options);
|
|
39
14
|
async function faas2(action, params) {
|
|
40
15
|
if (onError)
|
|
41
16
|
return client.action(action, params).catch(async (res) => {
|
|
@@ -47,40 +22,55 @@ function FaasReactClient({
|
|
|
47
22
|
function useFaas2(action, defaultParams, options2) {
|
|
48
23
|
if (!options2)
|
|
49
24
|
options2 = {};
|
|
50
|
-
const [loading, setLoading] =
|
|
51
|
-
const [data, setData] =
|
|
52
|
-
const [error, setError] =
|
|
53
|
-
const [promise, setPromise] =
|
|
54
|
-
const [params, setParams] =
|
|
55
|
-
const [reloadTimes, setReloadTimes] =
|
|
56
|
-
|
|
25
|
+
const [loading, setLoading] = react.useState(true);
|
|
26
|
+
const [data, setData] = react.useState();
|
|
27
|
+
const [error, setError] = react.useState();
|
|
28
|
+
const [promise, setPromise] = react.useState();
|
|
29
|
+
const [params, setParams] = react.useState(defaultParams);
|
|
30
|
+
const [reloadTimes, setReloadTimes] = react.useState(0);
|
|
31
|
+
const [fails, setFails] = react.useState(0);
|
|
32
|
+
react.useEffect(function() {
|
|
57
33
|
if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
|
|
58
34
|
setParams(defaultParams);
|
|
59
35
|
}
|
|
60
36
|
}, [JSON.stringify(defaultParams)]);
|
|
61
|
-
|
|
62
|
-
if (options2 == null ? void 0 : options2.skip) {
|
|
37
|
+
react.useEffect(function() {
|
|
38
|
+
if (!action || (options2 == null ? void 0 : options2.skip)) {
|
|
63
39
|
setLoading(false);
|
|
64
40
|
return;
|
|
65
41
|
}
|
|
66
42
|
setLoading(true);
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
43
|
+
const controller = new AbortController();
|
|
44
|
+
function send() {
|
|
45
|
+
const request = client.action(action, options2.params || params, { signal: controller.signal });
|
|
46
|
+
setPromise(request);
|
|
47
|
+
request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
|
|
48
|
+
if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
|
|
49
|
+
return;
|
|
50
|
+
if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
|
|
51
|
+
console.warn(`FaasReactClient: ${e.message} retry...`);
|
|
52
|
+
setFails(1);
|
|
53
|
+
return send();
|
|
75
54
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
if (onError)
|
|
56
|
+
try {
|
|
57
|
+
await onError(action, params)(e);
|
|
58
|
+
} catch (error2) {
|
|
59
|
+
setError(error2);
|
|
60
|
+
}
|
|
61
|
+
else
|
|
62
|
+
setError(e);
|
|
63
|
+
return Promise.reject(e);
|
|
64
|
+
}).finally(() => setLoading(false));
|
|
65
|
+
}
|
|
66
|
+
send();
|
|
67
|
+
return () => {
|
|
68
|
+
controller.abort();
|
|
69
|
+
setLoading(false);
|
|
70
|
+
};
|
|
81
71
|
}, [
|
|
82
72
|
action,
|
|
83
|
-
JSON.stringify(params),
|
|
73
|
+
JSON.stringify(options2.params || params),
|
|
84
74
|
reloadTimes,
|
|
85
75
|
options2.skip
|
|
86
76
|
]);
|
|
@@ -111,6 +101,7 @@ function FaasReactClient({
|
|
|
111
101
|
params,
|
|
112
102
|
fallback,
|
|
113
103
|
render,
|
|
104
|
+
children,
|
|
114
105
|
onDataChange,
|
|
115
106
|
data,
|
|
116
107
|
setData
|
|
@@ -119,17 +110,21 @@ function FaasReactClient({
|
|
|
119
110
|
data,
|
|
120
111
|
setData
|
|
121
112
|
});
|
|
122
|
-
const [loaded, setLoaded] =
|
|
123
|
-
|
|
113
|
+
const [loaded, setLoaded] = react.useState(false);
|
|
114
|
+
react.useEffect(function() {
|
|
124
115
|
if (!loaded && !request.loading)
|
|
125
116
|
setLoaded(true);
|
|
126
117
|
}, [request.loading]);
|
|
127
|
-
|
|
118
|
+
react.useEffect(function() {
|
|
128
119
|
if (onDataChange)
|
|
129
120
|
onDataChange(request);
|
|
130
121
|
}, [JSON.stringify(request.data)]);
|
|
131
|
-
if (loaded)
|
|
132
|
-
|
|
122
|
+
if (loaded) {
|
|
123
|
+
if (children)
|
|
124
|
+
return react.cloneElement(children, request);
|
|
125
|
+
if (render)
|
|
126
|
+
return render(request);
|
|
127
|
+
}
|
|
133
128
|
return fallback || null;
|
|
134
129
|
}
|
|
135
130
|
};
|
|
@@ -149,21 +144,23 @@ function useFaas(action, defaultParams, options) {
|
|
|
149
144
|
return getClient().useFaas(action, defaultParams, options);
|
|
150
145
|
}
|
|
151
146
|
function FaasDataWrapper(props) {
|
|
152
|
-
const [client, setClient] =
|
|
153
|
-
|
|
147
|
+
const [client, setClient] = react.useState();
|
|
148
|
+
react.useEffect(() => {
|
|
154
149
|
if (client)
|
|
155
150
|
return;
|
|
156
151
|
setClient(getClient());
|
|
157
152
|
}, []);
|
|
158
153
|
if (!client)
|
|
159
154
|
return props.fallback || null;
|
|
160
|
-
return
|
|
155
|
+
return react.createElement(client.FaasDataWrapper, props);
|
|
161
156
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
faas,
|
|
167
|
-
getClient,
|
|
168
|
-
useFaas
|
|
157
|
+
|
|
158
|
+
Object.defineProperty(exports, 'FaasBrowserClient', {
|
|
159
|
+
enumerable: true,
|
|
160
|
+
get: function () { return browser.FaasBrowserClient; }
|
|
169
161
|
});
|
|
162
|
+
exports.FaasDataWrapper = FaasDataWrapper;
|
|
163
|
+
exports.FaasReactClient = FaasReactClient;
|
|
164
|
+
exports.faas = faas;
|
|
165
|
+
exports.getClient = getClient;
|
|
166
|
+
exports.useFaas = useFaas;
|
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
+
import { FaasBrowserClient } from '@faasjs/browser';
|
|
2
|
+
export { FaasBrowserClient } from '@faasjs/browser';
|
|
3
|
+
import { useState, useEffect, createElement, cloneElement } from 'react';
|
|
4
|
+
|
|
1
5
|
// src/index.tsx
|
|
2
|
-
import {
|
|
3
|
-
FaasBrowserClient
|
|
4
|
-
} from "@faasjs/browser";
|
|
5
|
-
import {
|
|
6
|
-
useState,
|
|
7
|
-
useEffect,
|
|
8
|
-
createElement
|
|
9
|
-
} from "react";
|
|
10
6
|
var clients = {};
|
|
11
7
|
function FaasReactClient({
|
|
12
8
|
domain,
|
|
@@ -31,34 +27,49 @@ function FaasReactClient({
|
|
|
31
27
|
const [promise, setPromise] = useState();
|
|
32
28
|
const [params, setParams] = useState(defaultParams);
|
|
33
29
|
const [reloadTimes, setReloadTimes] = useState(0);
|
|
30
|
+
const [fails, setFails] = useState(0);
|
|
34
31
|
useEffect(function() {
|
|
35
32
|
if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
|
|
36
33
|
setParams(defaultParams);
|
|
37
34
|
}
|
|
38
35
|
}, [JSON.stringify(defaultParams)]);
|
|
39
36
|
useEffect(function() {
|
|
40
|
-
if (options2 == null ? void 0 : options2.skip) {
|
|
37
|
+
if (!action || (options2 == null ? void 0 : options2.skip)) {
|
|
41
38
|
setLoading(false);
|
|
42
39
|
return;
|
|
43
40
|
}
|
|
44
41
|
setLoading(true);
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
const controller = new AbortController();
|
|
43
|
+
function send() {
|
|
44
|
+
const request = client.action(action, options2.params || params, { signal: controller.signal });
|
|
45
|
+
setPromise(request);
|
|
46
|
+
request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
|
|
47
|
+
if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
|
|
48
|
+
return;
|
|
49
|
+
if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
|
|
50
|
+
console.warn(`FaasReactClient: ${e.message} retry...`);
|
|
51
|
+
setFails(1);
|
|
52
|
+
return send();
|
|
53
53
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
if (onError)
|
|
55
|
+
try {
|
|
56
|
+
await onError(action, params)(e);
|
|
57
|
+
} catch (error2) {
|
|
58
|
+
setError(error2);
|
|
59
|
+
}
|
|
60
|
+
else
|
|
61
|
+
setError(e);
|
|
62
|
+
return Promise.reject(e);
|
|
63
|
+
}).finally(() => setLoading(false));
|
|
64
|
+
}
|
|
65
|
+
send();
|
|
66
|
+
return () => {
|
|
67
|
+
controller.abort();
|
|
68
|
+
setLoading(false);
|
|
69
|
+
};
|
|
59
70
|
}, [
|
|
60
71
|
action,
|
|
61
|
-
JSON.stringify(params),
|
|
72
|
+
JSON.stringify(options2.params || params),
|
|
62
73
|
reloadTimes,
|
|
63
74
|
options2.skip
|
|
64
75
|
]);
|
|
@@ -89,6 +100,7 @@ function FaasReactClient({
|
|
|
89
100
|
params,
|
|
90
101
|
fallback,
|
|
91
102
|
render,
|
|
103
|
+
children,
|
|
92
104
|
onDataChange,
|
|
93
105
|
data,
|
|
94
106
|
setData
|
|
@@ -106,8 +118,12 @@ function FaasReactClient({
|
|
|
106
118
|
if (onDataChange)
|
|
107
119
|
onDataChange(request);
|
|
108
120
|
}, [JSON.stringify(request.data)]);
|
|
109
|
-
if (loaded)
|
|
110
|
-
|
|
121
|
+
if (loaded) {
|
|
122
|
+
if (children)
|
|
123
|
+
return cloneElement(children, request);
|
|
124
|
+
if (render)
|
|
125
|
+
return render(request);
|
|
126
|
+
}
|
|
111
127
|
return fallback || null;
|
|
112
128
|
}
|
|
113
129
|
};
|
|
@@ -137,10 +153,5 @@ function FaasDataWrapper(props) {
|
|
|
137
153
|
return props.fallback || null;
|
|
138
154
|
return createElement(client.FaasDataWrapper, props);
|
|
139
155
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
FaasReactClient,
|
|
143
|
-
faas,
|
|
144
|
-
getClient,
|
|
145
|
-
useFaas
|
|
146
|
-
};
|
|
156
|
+
|
|
157
|
+
export { FaasDataWrapper, FaasReactClient, faas, getClient, useFaas };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faasjs/react",
|
|
3
|
-
"version": "0.0.3-beta.
|
|
3
|
+
"version": "0.0.3-beta.91",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
},
|
|
17
17
|
"funding": "https://github.com/sponsors/faasjs",
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "tsup src/index.tsx --
|
|
20
|
-
"build:types": "tsup-node src/index.tsx --dts-only"
|
|
19
|
+
"build": "tsup src/index.tsx --config ../../tsup.config.json"
|
|
21
20
|
},
|
|
22
21
|
"files": [
|
|
23
22
|
"dist"
|
|
24
23
|
],
|
|
25
24
|
"dependencies": {
|
|
26
|
-
"@faasjs/browser": "^0.0.3-beta.
|
|
27
|
-
|
|
25
|
+
"@faasjs/browser": "^0.0.3-beta.91"
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
28
|
"react": "*"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|