@faasjs/react 0.0.2-beta.362 → 0.0.2-beta.363
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 +66 -58
- package/dist/index.d.ts +18 -6
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# @faasjs/react
|
|
2
2
|
|
|
3
|
-
React 插件
|
|
4
|
-
|
|
5
3
|
[](https://github.com/faasjs/faasjs/blob/main/packages/faasjs/react/LICENSE)
|
|
6
4
|
[](https://www.npmjs.com/package/@faasjs/react)
|
|
7
5
|
[](https://www.npmjs.com/package/@faasjs/react)
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
React plugin for FaasJS.
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
npm install @faasjs/react
|
|
10
12
|
|
|
11
13
|
## Modules
|
|
12
14
|
|
|
@@ -18,19 +20,19 @@ https://faasjs.com/guide/excel/react.html
|
|
|
18
20
|
|
|
19
21
|
### Type aliases
|
|
20
22
|
|
|
21
|
-
- [FaasDataInjection](
|
|
22
|
-
- [FaasDataWrapperProps](
|
|
23
|
-
- [FaasReactClientInstance](
|
|
24
|
-
- [Options](
|
|
25
|
-
- [ResponseHeaders](
|
|
23
|
+
- [FaasDataInjection](#faasdatainjection)
|
|
24
|
+
- [FaasDataWrapperProps](#faasdatawrapperprops)
|
|
25
|
+
- [FaasReactClientInstance](#faasreactclientinstance)
|
|
26
|
+
- [Options](#options)
|
|
27
|
+
- [ResponseHeaders](#responseheaders)
|
|
26
28
|
|
|
27
29
|
### Functions
|
|
28
30
|
|
|
29
|
-
- [FaasDataWrapper](
|
|
30
|
-
- [FaasReactClient](
|
|
31
|
-
- [faas](
|
|
32
|
-
- [getClient](
|
|
33
|
-
- [useFaas](
|
|
31
|
+
- [FaasDataWrapper](#faasdatawrapper)
|
|
32
|
+
- [FaasReactClient](#faasreactclient)
|
|
33
|
+
- [faas](#faas)
|
|
34
|
+
- [getClient](#getclient)
|
|
35
|
+
- [useFaas](#usefaas)
|
|
34
36
|
|
|
35
37
|
## Type aliases
|
|
36
38
|
|
|
@@ -38,6 +40,8 @@ https://faasjs.com/guide/excel/react.html
|
|
|
38
40
|
|
|
39
41
|
Ƭ **FaasDataInjection**<`Data`\>: `Object`
|
|
40
42
|
|
|
43
|
+
Injects FaasData props.
|
|
44
|
+
|
|
41
45
|
#### Type parameters
|
|
42
46
|
|
|
43
47
|
| Name | Type |
|
|
@@ -81,8 +85,8 @@ ___
|
|
|
81
85
|
| `fallback?` | `JSX.Element` \| ``false`` | - |
|
|
82
86
|
| `params?` | `FaasParams`<`PathOrData`\> | - |
|
|
83
87
|
| `setData?` | `React.Dispatch`<`React.SetStateAction`<`FaasData`<`PathOrData`\>\>\> | use custom setData, should work with data |
|
|
84
|
-
| `onDataChange?` | (`args`: [`FaasDataInjection`](
|
|
85
|
-
| `render?` | (`args`: [`FaasDataInjection`](
|
|
88
|
+
| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `void` | - |
|
|
89
|
+
| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
|
|
86
90
|
|
|
87
91
|
___
|
|
88
92
|
|
|
@@ -94,15 +98,15 @@ ___
|
|
|
94
98
|
|
|
95
99
|
| Name | Type |
|
|
96
100
|
| :------ | :------ |
|
|
97
|
-
| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](
|
|
101
|
+
| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
|
|
98
102
|
| `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: `FaasParams`<`PathOrData`\>) => `Promise`<[`Response`](classes/Response.md)<`FaasData`<`PathOrData`\>\>\> |
|
|
99
|
-
| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: `FaasParams`<`PathOrData`\>) => [`FaasDataInjection`](
|
|
103
|
+
| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: `FaasParams`<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\> |
|
|
100
104
|
|
|
101
105
|
___
|
|
102
106
|
|
|
103
107
|
### Options
|
|
104
108
|
|
|
105
|
-
Ƭ **Options**: `RequestInit` & { `headers?`: { [key: string]: `string`; } ; `beforeRequest?`: (`__namedParameters`: { `action`: `string` ; `options`: [`Options`](
|
|
109
|
+
Ƭ **Options**: `RequestInit` & { `headers?`: { [key: string]: `string`; } ; `beforeRequest?`: (`__namedParameters`: { `action`: `string` ; `options`: [`Options`](#options) ; `params`: `Record`<`string`, `any`\> }) => `void` \| `Promise`<`void`\> }
|
|
106
110
|
|
|
107
111
|
___
|
|
108
112
|
|
|
@@ -122,16 +126,6 @@ ___
|
|
|
122
126
|
|
|
123
127
|
A data wrapper for react components
|
|
124
128
|
|
|
125
|
-
**`example`**
|
|
126
|
-
<FaasDataWrapper<{
|
|
127
|
-
id: string
|
|
128
|
-
title: string
|
|
129
|
-
}>
|
|
130
|
-
action='post/get'
|
|
131
|
-
params={ { id: 1 } }
|
|
132
|
-
render={ ({ data }) => <h1>{ data.title }</h1> }
|
|
133
|
-
/>
|
|
134
|
-
|
|
135
129
|
#### Type parameters
|
|
136
130
|
|
|
137
131
|
| Name | Type |
|
|
@@ -142,37 +136,49 @@ A data wrapper for react components
|
|
|
142
136
|
|
|
143
137
|
| Name | Type |
|
|
144
138
|
| :------ | :------ |
|
|
145
|
-
| `props` | [`FaasDataWrapperProps`](
|
|
139
|
+
| `props` | [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\> |
|
|
146
140
|
|
|
147
141
|
#### Returns
|
|
148
142
|
|
|
149
143
|
`JSX.Element`
|
|
150
144
|
|
|
145
|
+
```ts
|
|
146
|
+
<FaasDataWrapper<{
|
|
147
|
+
id: string
|
|
148
|
+
title: string
|
|
149
|
+
}>
|
|
150
|
+
action='post/get'
|
|
151
|
+
params={ { id: 1 } }
|
|
152
|
+
render={ ({ data }) => <h1>{ data.title }</h1> }
|
|
153
|
+
/>
|
|
154
|
+
```
|
|
155
|
+
|
|
151
156
|
___
|
|
152
157
|
|
|
153
158
|
### FaasReactClient
|
|
154
159
|
|
|
155
|
-
▸ **FaasReactClient**(`__namedParameters`): [`FaasReactClientInstance`](
|
|
160
|
+
▸ **FaasReactClient**(`__namedParameters`): [`FaasReactClientInstance`](#faasreactclientinstance)
|
|
156
161
|
|
|
157
162
|
Before use faas, you should initialize a FaasReactClient.
|
|
158
163
|
|
|
159
|
-
**`example`**
|
|
160
|
-
const client = FaasReactClient({
|
|
161
|
-
domain: 'localhost:8080/api'
|
|
162
|
-
})
|
|
163
|
-
|
|
164
164
|
#### Parameters
|
|
165
165
|
|
|
166
166
|
| Name | Type |
|
|
167
167
|
| :------ | :------ |
|
|
168
168
|
| `__namedParameters` | `Object` |
|
|
169
169
|
| `__namedParameters.domain` | `string` |
|
|
170
|
-
| `__namedParameters.options?` | [`Options`](
|
|
170
|
+
| `__namedParameters.options?` | [`Options`](#options) |
|
|
171
171
|
| `__namedParameters.onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
|
|
172
172
|
|
|
173
173
|
#### Returns
|
|
174
174
|
|
|
175
|
-
[`FaasReactClientInstance`](
|
|
175
|
+
[`FaasReactClientInstance`](#faasreactclientinstance)
|
|
176
|
+
|
|
177
|
+
```ts
|
|
178
|
+
const client = FaasReactClient({
|
|
179
|
+
domain: 'localhost:8080/api'
|
|
180
|
+
})
|
|
181
|
+
```
|
|
176
182
|
|
|
177
183
|
___
|
|
178
184
|
|
|
@@ -182,11 +188,6 @@ ___
|
|
|
182
188
|
|
|
183
189
|
Request faas server
|
|
184
190
|
|
|
185
|
-
**`example`**
|
|
186
|
-
faas<{ title: string }>('post/get', { id: 1 }).then(res => {
|
|
187
|
-
console.log(res.data.title)
|
|
188
|
-
})
|
|
189
|
-
|
|
190
191
|
#### Type parameters
|
|
191
192
|
|
|
192
193
|
| Name | Type |
|
|
@@ -204,19 +205,20 @@ faas<{ title: string }>('post/get', { id: 1 }).then(res => {
|
|
|
204
205
|
|
|
205
206
|
`Promise`<[`Response`](classes/Response.md)<`FaasData`<`PathOrData`\>\>\>
|
|
206
207
|
|
|
208
|
+
```ts
|
|
209
|
+
faas<{ title: string }>('post/get', { id: 1 }).then(res => {
|
|
210
|
+
console.log(res.data.title)
|
|
211
|
+
})
|
|
212
|
+
```
|
|
213
|
+
|
|
207
214
|
___
|
|
208
215
|
|
|
209
216
|
### getClient
|
|
210
217
|
|
|
211
|
-
▸ **getClient**(`domain?`): [`FaasReactClientInstance`](
|
|
218
|
+
▸ **getClient**(`domain?`): [`FaasReactClientInstance`](#faasreactclientinstance)
|
|
212
219
|
|
|
213
220
|
Get FaasReactClient instance
|
|
214
221
|
|
|
215
|
-
**`example`**
|
|
216
|
-
getClient()
|
|
217
|
-
// or
|
|
218
|
-
getClient('another-domain')
|
|
219
|
-
|
|
220
222
|
#### Parameters
|
|
221
223
|
|
|
222
224
|
| Name | Type | Description |
|
|
@@ -225,23 +227,22 @@ getClient('another-domain')
|
|
|
225
227
|
|
|
226
228
|
#### Returns
|
|
227
229
|
|
|
228
|
-
[`FaasReactClientInstance`](
|
|
230
|
+
[`FaasReactClientInstance`](#faasreactclientinstance)
|
|
231
|
+
|
|
232
|
+
```ts
|
|
233
|
+
getClient()
|
|
234
|
+
// or
|
|
235
|
+
getClient('another-domain')
|
|
236
|
+
```
|
|
229
237
|
|
|
230
238
|
___
|
|
231
239
|
|
|
232
240
|
### useFaas
|
|
233
241
|
|
|
234
|
-
▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](
|
|
242
|
+
▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>
|
|
235
243
|
|
|
236
244
|
Request faas server with React hook
|
|
237
245
|
|
|
238
|
-
**`example`**
|
|
239
|
-
function Post ({ id }) {
|
|
240
|
-
const { data } = useFaas<{ title: string }>('post/get', { id })
|
|
241
|
-
|
|
242
|
-
return <h1>{data.title}</h1>
|
|
243
|
-
}
|
|
244
|
-
|
|
245
246
|
#### Type parameters
|
|
246
247
|
|
|
247
248
|
| Name | Type |
|
|
@@ -257,4 +258,11 @@ function Post ({ id }) {
|
|
|
257
258
|
|
|
258
259
|
#### Returns
|
|
259
260
|
|
|
260
|
-
[`FaasDataInjection`](
|
|
261
|
+
[`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>
|
|
262
|
+
|
|
263
|
+
```ts
|
|
264
|
+
function Post ({ id }) {
|
|
265
|
+
const { data } = useFaas<{ title: string }>('post/get', { id })
|
|
266
|
+
return <h1>{data.title}</h1>
|
|
267
|
+
}
|
|
268
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,9 @@ import { Response, Options, ResponseError } from '@faasjs/browser';
|
|
|
2
2
|
export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
|
|
3
3
|
import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Injects FaasData props.
|
|
7
|
+
*/
|
|
5
8
|
declare type FaasDataInjection<Data = any> = {
|
|
6
9
|
action: string | any;
|
|
7
10
|
params: Record<string, any>;
|
|
@@ -37,10 +40,12 @@ declare type FaasReactClientInstance = {
|
|
|
37
40
|
* @param props.domain {string} The domain of your faas server
|
|
38
41
|
* @param props.options {Options} The options of client
|
|
39
42
|
* @returns {FaasReactClientInstance}
|
|
40
|
-
*
|
|
43
|
+
*
|
|
44
|
+
* ```ts
|
|
41
45
|
* const client = FaasReactClient({
|
|
42
46
|
* domain: 'localhost:8080/api'
|
|
43
47
|
* })
|
|
48
|
+
* ```
|
|
44
49
|
*/
|
|
45
50
|
declare function FaasReactClient({ domain, options, onError }: {
|
|
46
51
|
domain: string;
|
|
@@ -51,10 +56,12 @@ declare function FaasReactClient({ domain, options, onError }: {
|
|
|
51
56
|
* Get FaasReactClient instance
|
|
52
57
|
* @param domain {string} empty string for default domain
|
|
53
58
|
* @returns {FaasReactClientInstance}
|
|
54
|
-
*
|
|
59
|
+
*
|
|
60
|
+
* ```ts
|
|
55
61
|
* getClient()
|
|
56
62
|
* // or
|
|
57
63
|
* getClient('another-domain')
|
|
64
|
+
* ```
|
|
58
65
|
*/
|
|
59
66
|
declare function getClient(domain?: string): FaasReactClientInstance;
|
|
60
67
|
/**
|
|
@@ -63,10 +70,12 @@ declare function getClient(domain?: string): FaasReactClientInstance;
|
|
|
63
70
|
* @param action {string} action name
|
|
64
71
|
* @param params {object} action params
|
|
65
72
|
* @returns {Promise<Response<any>>}
|
|
66
|
-
*
|
|
73
|
+
*
|
|
74
|
+
* ```ts
|
|
67
75
|
* faas<{ title: string }>('post/get', { id: 1 }).then(res => {
|
|
68
76
|
* console.log(res.data.title)
|
|
69
77
|
* })
|
|
78
|
+
* ```
|
|
70
79
|
*/
|
|
71
80
|
declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response<FaasData<PathOrData>>>;
|
|
72
81
|
/**
|
|
@@ -74,18 +83,20 @@ declare function faas<PathOrData extends FaasAction>(action: string | PathOrData
|
|
|
74
83
|
* @param action {string} action name
|
|
75
84
|
* @param defaultParams {object} initial action params
|
|
76
85
|
* @returns {FaasDataInjection<any>}
|
|
77
|
-
*
|
|
86
|
+
*
|
|
87
|
+
* ```ts
|
|
78
88
|
* function Post ({ id }) {
|
|
79
89
|
* const { data } = useFaas<{ title: string }>('post/get', { id })
|
|
80
|
-
*
|
|
81
90
|
* return <h1>{data.title}</h1>
|
|
82
91
|
* }
|
|
92
|
+
* ```
|
|
83
93
|
*/
|
|
84
94
|
declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>): FaasDataInjection<FaasData<PathOrData>>;
|
|
85
95
|
/**
|
|
86
96
|
* A data wrapper for react components
|
|
87
97
|
* @returns {JSX.Element}
|
|
88
|
-
*
|
|
98
|
+
*
|
|
99
|
+
* ```ts
|
|
89
100
|
* <FaasDataWrapper<{
|
|
90
101
|
* id: string
|
|
91
102
|
* title: string
|
|
@@ -94,6 +105,7 @@ declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrD
|
|
|
94
105
|
* params={ { id: 1 } }
|
|
95
106
|
* render={ ({ data }) => <h1>{ data.title }</h1> }
|
|
96
107
|
* />
|
|
108
|
+
* ```
|
|
97
109
|
*/
|
|
98
110
|
declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
|
|
99
111
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faasjs/react",
|
|
3
|
-
"version": "0.0.2-beta.
|
|
3
|
+
"version": "0.0.2-beta.363",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
-
"homepage": "https://faasjs.com/doc/react
|
|
8
|
+
"homepage": "https://faasjs.com/doc/react",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git+https://github.com/faasjs/faasjs.git",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"dist"
|
|
24
24
|
],
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@faasjs/browser": "^0.0.2-beta.
|
|
27
|
-
"@faasjs/types": "^0.0.2-beta.
|
|
26
|
+
"@faasjs/browser": "^0.0.2-beta.363",
|
|
27
|
+
"@faasjs/types": "^0.0.2-beta.363",
|
|
28
28
|
"react": "*"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|