@faasjs/react 0.0.4-beta.9 → 0.0.5-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +105 -44
  2. package/dist/index.d.mts +50 -7
  3. package/dist/index.d.ts +50 -7
  4. package/dist/index.js +106 -69
  5. package/dist/index.mjs +78 -70
  6. package/package.json +7 -4
package/README.md CHANGED
@@ -33,8 +33,10 @@ React plugin for FaasJS.
33
33
  - [FaasDataWrapperProps](#faasdatawrapperprops)
34
34
  - [FaasParams](#faasparams)
35
35
  - [FaasReactClientInstance](#faasreactclientinstance)
36
+ - [FaasReactClientOptions](#faasreactclientoptions)
36
37
  - [Options](#options)
37
38
  - [ResponseHeaders](#responseheaders)
39
+ - [SignalOptions](#signaloptions)
38
40
  - [useFaasOptions](#usefaasoptions)
39
41
 
40
42
  ### Functions
@@ -43,6 +45,7 @@ React plugin for FaasJS.
43
45
  - [FaasReactClient](#faasreactclient)
44
46
  - [faas](#faas)
45
47
  - [getClient](#getclient)
48
+ - [signal](#signal)
46
49
  - [useFaas](#usefaas)
47
50
 
48
51
  ## Type Aliases
@@ -64,13 +67,13 @@ ___
64
67
 
65
68
  ### FaasAction
66
69
 
67
- Ƭ **FaasAction**: `FaasActionPaths` \| `Record`<`string`, `any`\>
70
+ Ƭ **FaasAction**: `FaasActionPaths` \| `Record`\<`string`, `any`\>
68
71
 
69
72
  ___
70
73
 
71
74
  ### FaasData
72
75
 
73
- Ƭ **FaasData**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Data"``] : `T`
76
+ Ƭ **FaasData**\<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Data"``] : `T`
74
77
 
75
78
  #### Type parameters
76
79
 
@@ -82,7 +85,7 @@ ___
82
85
 
83
86
  ### FaasDataInjection
84
87
 
85
- Ƭ **FaasDataInjection**<`Data`\>: `Object`
88
+ Ƭ **FaasDataInjection**\<`Data`\>: `Object`
86
89
 
87
90
  Injects FaasData props.
88
91
 
@@ -100,20 +103,20 @@ Injects FaasData props.
100
103
  | `data` | `Data` |
101
104
  | `error` | `any` |
102
105
  | `loading` | `boolean` |
103
- | `params` | `Record`<`string`, `any`\> |
104
- | `promise` | `Promise`<`Response`<`Data`\>\> |
106
+ | `params` | `Record`\<`string`, `any`\> |
107
+ | `promise` | `Promise`\<`Response`\<`Data`\>\> |
105
108
  | `reloadTimes` | `number` |
106
- | `setData` | `React.Dispatch`<`React.SetStateAction`<`Data`\>\> |
107
- | `setError` | `React.Dispatch`<`React.SetStateAction`<`any`\>\> |
108
- | `setLoading` | `React.Dispatch`<`React.SetStateAction`<`boolean`\>\> |
109
- | `setPromise` | `React.Dispatch`<`React.SetStateAction`<`Promise`<`Response`<`Data`\>\>\>\> |
110
- | `reload` | (`params?`: `Record`<`string`, `any`\>) => `Promise`<`any`\> |
109
+ | `setData` | `React.Dispatch`\<`React.SetStateAction`\<`Data`\>\> |
110
+ | `setError` | `React.Dispatch`\<`React.SetStateAction`\<`any`\>\> |
111
+ | `setLoading` | `React.Dispatch`\<`React.SetStateAction`\<`boolean`\>\> |
112
+ | `setPromise` | `React.Dispatch`\<`React.SetStateAction`\<`Promise`\<`Response`\<`Data`\>\>\>\> |
113
+ | `reload` | (`params?`: `Record`\<`string`, `any`\>) => `Promise`\<`any`\> |
111
114
 
112
115
  ___
113
116
 
114
117
  ### FaasDataWrapperProps
115
118
 
116
- Ƭ **FaasDataWrapperProps**<`PathOrData`\>: `Object`
119
+ Ƭ **FaasDataWrapperProps**\<`PathOrData`\>: `Object`
117
120
 
118
121
  #### Type parameters
119
122
 
@@ -126,19 +129,19 @@ ___
126
129
  | Name | Type | Description |
127
130
  | :------ | :------ | :------ |
128
131
  | `action` | `string` | - |
129
- | `children?` | `React.ReactElement`<`Partial`<[`FaasDataInjection`](#faasdatainjection)\>\> | - |
130
- | `data?` | `FaasData`<`PathOrData`\> | use custom data, should work with setData |
132
+ | `children?` | `React.ReactElement`\<`Partial`\<[`FaasDataInjection`](#faasdatainjection)\>\> | - |
133
+ | `data?` | `FaasData`\<`PathOrData`\> | use custom data, should work with setData |
131
134
  | `fallback?` | `JSX.Element` \| ``false`` | - |
132
- | `params?` | `FaasParams`<`PathOrData`\> | - |
133
- | `setData?` | `React.Dispatch`<`React.SetStateAction`<`FaasData`<`PathOrData`\>\>\> | use custom setData, should work with data |
134
- | `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `void` | - |
135
- | `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
135
+ | `params?` | `FaasParams`\<`PathOrData`\> | - |
136
+ | `setData?` | `React.Dispatch`\<`React.SetStateAction`\<`FaasData`\<`PathOrData`\>\>\> | use custom setData, should work with data |
137
+ | `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)\<`FaasData`\<`PathOrData`\>\>) => `void` | - |
138
+ | `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)\<`FaasData`\<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
136
139
 
137
140
  ___
138
141
 
139
142
  ### FaasParams
140
143
 
141
- Ƭ **FaasParams**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Params"``] : `any`
144
+ Ƭ **FaasParams**\<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Params"``] : `any`
142
145
 
143
146
  #### Type parameters
144
147
 
@@ -156,20 +159,34 @@ ___
156
159
 
157
160
  | Name | Type |
158
161
  | :------ | :------ |
159
- | `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: `FaasParams`<`PathOrData`\>) => `Promise`<`Response`<`FaasData`<`PathOrData`\>\>\> |
162
+ | `faas` | \<PathOrData\>(`action`: `string` \| `PathOrData`, `params`: `FaasParams`\<`PathOrData`\>) => `Promise`\<`Response`\<`FaasData`\<`PathOrData`\>\>\> |
160
163
  | `id` | `string` |
161
- | `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: `FaasParams`<`PathOrData`\>, `options?`: [`useFaasOptions`](#usefaasoptions)<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\> |
162
- | `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
164
+ | `useFaas` | \<PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: `FaasParams`\<`PathOrData`\>, `options?`: [`useFaasOptions`](#usefaasoptions)\<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)\<`FaasData`\<`PathOrData`\>\> |
165
+ | `FaasDataWrapper` | \<PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)\<`PathOrData`\>) => `Element` |
166
+
167
+ ___
168
+
169
+ ### FaasReactClientOptions
170
+
171
+ Ƭ **FaasReactClientOptions**: `Object`
172
+
173
+ #### Type declaration
174
+
175
+ | Name | Type |
176
+ | :------ | :------ |
177
+ | `domain` | `string` |
178
+ | `onError?` | (`action`: `string`, `params`: `Record`\<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`\<`void`\> |
179
+ | `options?` | [`Options`](#options) |
163
180
 
164
181
  ___
165
182
 
166
183
  ### Options
167
184
 
168
- Ƭ **Options**: `RequestInit` & { `beforeRequest?`: (`{
185
+ Ƭ **Options**: `RequestInit` & \{ `beforeRequest?`: (`{
169
186
  action,
170
187
  params,
171
188
  options,
172
- }`: { `action`: `string` ; `options`: [`Options`](#options) ; `params`: `Record`<`string`, `any`\> }) => `Promise`<`void`\> \| `void` ; `headers?`: { `[key: string]`: `string`; } ; `request?`: <PathOrData\>(`url`: `string`, `options`: [`Options`](#options)) => `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\> }
189
+ }`: \{ `action`: `string` ; `options`: [`Options`](#options) ; `params`: `Record`\<`string`, `any`\> }) => `Promise`\<`void`\> ; `headers?`: \{ `[key: string]`: `string`; } ; `request?`: \<PathOrData\>(`url`: `string`, `options`: [`Options`](#options)) => `Promise`\<[`Response`](classes/Response.md)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>\> }
173
190
 
174
191
  ___
175
192
 
@@ -183,9 +200,21 @@ ___
183
200
 
184
201
  ___
185
202
 
203
+ ### SignalOptions
204
+
205
+ Ƭ **SignalOptions**: `Object`
206
+
207
+ #### Type declaration
208
+
209
+ | Name | Type |
210
+ | :------ | :------ |
211
+ | `debugName?` | `string` |
212
+
213
+ ___
214
+
186
215
  ### useFaasOptions
187
216
 
188
- Ƭ **useFaasOptions**<`PathOrData`\>: `Object`
217
+ Ƭ **useFaasOptions**\<`PathOrData`\>: `Object`
189
218
 
190
219
  #### Type parameters
191
220
 
@@ -197,17 +226,17 @@ ___
197
226
 
198
227
  | Name | Type | Description |
199
228
  | :------ | :------ | :------ |
200
- | `data?` | `FaasData`<`PathOrData`\> | - |
229
+ | `data?` | `FaasData`\<`PathOrData`\> | - |
201
230
  | `debounce?` | `number` | send the last request after milliseconds |
202
- | `params?` | `FaasParams`<`PathOrData`\> | - |
203
- | `setData?` | `React.Dispatch`<`React.SetStateAction`<`FaasData`<`PathOrData`\>\>\> | - |
204
- | `skip?` | `boolean` \| (`params`: `FaasParams`<`PathOrData`\>) => `boolean` | if skip is true, will not send request |
231
+ | `params?` | `FaasParams`\<`PathOrData`\> | - |
232
+ | `setData?` | `React.Dispatch`\<`React.SetStateAction`\<`FaasData`\<`PathOrData`\>\>\> | - |
233
+ | `skip?` | `boolean` \| (`params`: `FaasParams`\<`PathOrData`\>) => `boolean` | if skip is true, will not send request |
205
234
 
206
235
  ## Functions
207
236
 
208
237
  ### FaasDataWrapper
209
238
 
210
- ▸ **FaasDataWrapper**<`PathOrData`\>(`props`): `JSX.Element`
239
+ ▸ **FaasDataWrapper**\<`PathOrData`\>(`props`): `JSX.Element`
211
240
 
212
241
  A data wrapper for react components
213
242
 
@@ -215,13 +244,13 @@ A data wrapper for react components
215
244
 
216
245
  | Name | Type |
217
246
  | :------ | :------ |
218
- | `PathOrData` | extends `Record`<`string`, `any`\> |
247
+ | `PathOrData` | extends `Record`\<`string`, `any`\> |
219
248
 
220
249
  #### Parameters
221
250
 
222
251
  | Name | Type |
223
252
  | :------ | :------ |
224
- | `props` | [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\> |
253
+ | `props` | [`FaasDataWrapperProps`](#faasdatawrapperprops)\<`PathOrData`\> |
225
254
 
226
255
  #### Returns
227
256
 
@@ -250,10 +279,7 @@ Before use faas, you should initialize a FaasReactClient.
250
279
 
251
280
  | Name | Type |
252
281
  | :------ | :------ |
253
- | `«destructured»` | `Object` |
254
- | › `domain` | `string` |
255
- | › `onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
256
- | › `options?` | [`Options`](#options) |
282
+ | `«destructured»` | [`FaasReactClientOptions`](#faasreactclientoptions) |
257
283
 
258
284
  #### Returns
259
285
 
@@ -269,7 +295,7 @@ ___
269
295
 
270
296
  ### faas
271
297
 
272
- ▸ **faas**<`PathOrData`\>(`action`, `params`): `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\>
298
+ ▸ **faas**\<`PathOrData`\>(`action`, `params`): `Promise`\<[`Response`](classes/Response.md)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>\>
273
299
 
274
300
  Request faas server
275
301
 
@@ -277,18 +303,18 @@ Request faas server
277
303
 
278
304
  | Name | Type |
279
305
  | :------ | :------ |
280
- | `PathOrData` | extends `Record`<`string`, `any`\> |
306
+ | `PathOrData` | extends `Record`\<`string`, `any`\> |
281
307
 
282
308
  #### Parameters
283
309
 
284
310
  | Name | Type | Description |
285
311
  | :------ | :------ | :------ |
286
312
  | `action` | `string` \| `PathOrData` | {string} action name |
287
- | `params` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} action params |
313
+ | `params` | [`FaasParams`](#faasparams)\<`PathOrData`\> | {object} action params |
288
314
 
289
315
  #### Returns
290
316
 
291
- `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\>
317
+ `Promise`\<[`Response`](classes/Response.md)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>\>
292
318
 
293
319
  ```ts
294
320
  faas<{ title: string }>('post/get', { id: 1 }).then(res => {
@@ -322,9 +348,44 @@ getClient('another-domain')
322
348
 
323
349
  ___
324
350
 
351
+ ### signal
352
+
353
+ ▸ **signal**\<`T`\>(`initialValue`, `options?`): `Signal`\<`T`\>
354
+
355
+ Create a [signal](https://preactjs.com/guide/v10/signals) with options
356
+
357
+ #### Type parameters
358
+
359
+ | Name | Type |
360
+ | :------ | :------ |
361
+ | `T` | `any` |
362
+
363
+ #### Parameters
364
+
365
+ | Name | Type |
366
+ | :------ | :------ |
367
+ | `initialValue` | `any` |
368
+ | `options` | [`SignalOptions`](#signaloptions) |
369
+
370
+ #### Returns
371
+
372
+ `Signal`\<`T`\>
373
+
374
+ **`Example`**
375
+
376
+ ```ts
377
+ import { signal } from '@faasjs/react'
378
+
379
+ const count = signal(0, { debugName: 'count' })
380
+
381
+ count.value = 1
382
+ ```
383
+
384
+ ___
385
+
325
386
  ### useFaas
326
387
 
327
- ▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`, `options?`): [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
388
+ ▸ **useFaas**\<`PathOrData`\>(`action`, `defaultParams`, `options?`): [`FaasDataInjection`](#faasdatainjection)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>
328
389
 
329
390
  Request faas server with React hook
330
391
 
@@ -332,19 +393,19 @@ Request faas server with React hook
332
393
 
333
394
  | Name | Type |
334
395
  | :------ | :------ |
335
- | `PathOrData` | extends `Record`<`string`, `any`\> |
396
+ | `PathOrData` | extends `Record`\<`string`, `any`\> |
336
397
 
337
398
  #### Parameters
338
399
 
339
400
  | Name | Type | Description |
340
401
  | :------ | :------ | :------ |
341
402
  | `action` | `string` \| `PathOrData` | {string} action name |
342
- | `defaultParams` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} initial action params |
343
- | `options?` | [`useFaasOptions`](#usefaasoptions)<`PathOrData`\> | - |
403
+ | `defaultParams` | [`FaasParams`](#faasparams)\<`PathOrData`\> | {object} initial action params |
404
+ | `options?` | [`useFaasOptions`](#usefaasoptions)\<`PathOrData`\> | - |
344
405
 
345
406
  #### Returns
346
407
 
347
- [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
408
+ [`FaasDataInjection`](#faasdatainjection)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>
348
409
 
349
410
  ```ts
350
411
  function Post ({ id }) {
package/dist/index.d.mts CHANGED
@@ -3,7 +3,9 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
3
3
  import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
4
4
  export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
- import { ReactNode, ReactElement, Component } from 'react';
6
+ import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
7
+ import * as _preact_signals_core from '@preact/signals-core';
8
+ export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
7
9
 
8
10
  type FaasReactClientInstance = {
9
11
  id: string
@@ -64,6 +66,11 @@ type useFaasOptions<PathOrData extends FaasAction> = {
64
66
  debounce?: number
65
67
  }
66
68
 
69
+ type FaasReactClientOptions = {
70
+ domain: string;
71
+ options?: Options;
72
+ onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
73
+ };
67
74
  /**
68
75
  * Before use faas, you should initialize a FaasReactClient.
69
76
  *
@@ -77,11 +84,7 @@ type useFaasOptions<PathOrData extends FaasAction> = {
77
84
  * })
78
85
  * ```
79
86
  */
80
- declare function FaasReactClient({ domain, options, onError, }: {
81
- domain: string;
82
- options?: Options;
83
- onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
84
- }): FaasReactClientInstance;
87
+ declare function FaasReactClient({ domain, options, onError, }: FaasReactClientOptions): FaasReactClientInstance;
85
88
  /**
86
89
  * Get FaasReactClient instance
87
90
  * @param domain {string} empty string for default domain
@@ -161,4 +164,44 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
161
164
  render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
162
165
  }
163
166
 
164
- export { ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas, useFaasOptions };
167
+ type SignalOptions = {
168
+ debugName?: string;
169
+ };
170
+ /**
171
+ * Create a [signal](https://preactjs.com/guide/v10/signals) with options
172
+ *
173
+ * @param initialValue
174
+ * @param options
175
+ * @param options.debugName - debug name for signal, will print signal value to console.debug
176
+ *
177
+ * @example
178
+ * ```ts
179
+ * import { signal } from '@faasjs/react'
180
+ *
181
+ * const count = signal(0, { debugName: 'count' })
182
+ *
183
+ * count.value = 1
184
+ * ```
185
+ */
186
+ declare function signal<T = any>(initialValue: any, options?: SignalOptions): _preact_signals_core.Signal<T>;
187
+ /**
188
+ * Create a [signal](https://preactjs.com/guide/v10/signals) like useState.
189
+ *
190
+ * ```tsx
191
+ * import { useSignalState, useSignalEffect } from '@faasjs/react'
192
+ *
193
+ * function App () {
194
+ * const [count, setCount] = useSignalState(0, { debugName: 'count' })
195
+ *
196
+ * useSignalEffect(() => console.log('count', count))
197
+ *
198
+ * return <div>
199
+ * <button onClick={() => setCount(count + 1)}>+</button>
200
+ * <span>{count}</span>
201
+ * </div>
202
+ * }
203
+ * ```
204
+ */
205
+ declare function useSignalState<T = any>(initialValue: T, options?: SignalOptions): readonly [T, (changes: SetStateAction<T>) => void];
206
+
207
+ export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useFaas, type useFaasOptions, useSignalState };
package/dist/index.d.ts CHANGED
@@ -3,7 +3,9 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
3
3
  import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
4
4
  export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
- import { ReactNode, ReactElement, Component } from 'react';
6
+ import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
7
+ import * as _preact_signals_core from '@preact/signals-core';
8
+ export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
7
9
 
8
10
  type FaasReactClientInstance = {
9
11
  id: string
@@ -64,6 +66,11 @@ type useFaasOptions<PathOrData extends FaasAction> = {
64
66
  debounce?: number
65
67
  }
66
68
 
69
+ type FaasReactClientOptions = {
70
+ domain: string;
71
+ options?: Options;
72
+ onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
73
+ };
67
74
  /**
68
75
  * Before use faas, you should initialize a FaasReactClient.
69
76
  *
@@ -77,11 +84,7 @@ type useFaasOptions<PathOrData extends FaasAction> = {
77
84
  * })
78
85
  * ```
79
86
  */
80
- declare function FaasReactClient({ domain, options, onError, }: {
81
- domain: string;
82
- options?: Options;
83
- onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
84
- }): FaasReactClientInstance;
87
+ declare function FaasReactClient({ domain, options, onError, }: FaasReactClientOptions): FaasReactClientInstance;
85
88
  /**
86
89
  * Get FaasReactClient instance
87
90
  * @param domain {string} empty string for default domain
@@ -161,4 +164,44 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
161
164
  render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
162
165
  }
163
166
 
164
- export { ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas, useFaasOptions };
167
+ type SignalOptions = {
168
+ debugName?: string;
169
+ };
170
+ /**
171
+ * Create a [signal](https://preactjs.com/guide/v10/signals) with options
172
+ *
173
+ * @param initialValue
174
+ * @param options
175
+ * @param options.debugName - debug name for signal, will print signal value to console.debug
176
+ *
177
+ * @example
178
+ * ```ts
179
+ * import { signal } from '@faasjs/react'
180
+ *
181
+ * const count = signal(0, { debugName: 'count' })
182
+ *
183
+ * count.value = 1
184
+ * ```
185
+ */
186
+ declare function signal<T = any>(initialValue: any, options?: SignalOptions): _preact_signals_core.Signal<T>;
187
+ /**
188
+ * Create a [signal](https://preactjs.com/guide/v10/signals) like useState.
189
+ *
190
+ * ```tsx
191
+ * import { useSignalState, useSignalEffect } from '@faasjs/react'
192
+ *
193
+ * function App () {
194
+ * const [count, setCount] = useSignalState(0, { debugName: 'count' })
195
+ *
196
+ * useSignalEffect(() => console.log('count', count))
197
+ *
198
+ * return <div>
199
+ * <button onClick={() => setCount(count + 1)}>+</button>
200
+ * <span>{count}</span>
201
+ * </div>
202
+ * }
203
+ * ```
204
+ */
205
+ declare function useSignalState<T = any>(initialValue: T, options?: SignalOptions): readonly [T, (changes: SetStateAction<T>) => void];
206
+
207
+ export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useFaas, type useFaasOptions, useSignalState };
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var react = require('react');
4
4
  var browser = require('@faasjs/browser');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
+ var signalsReact = require('@preact/signals-react');
6
7
 
7
8
  // src/client.tsx
8
9
  var clients = {};
@@ -40,66 +41,60 @@ function FaasReactClient({
40
41
  }, [
41
42
  typeof options2.skip === "function" ? JSON.stringify(params) : options2.skip
42
43
  ]);
43
- react.useEffect(
44
- function() {
45
- if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
46
- setParams(defaultParams);
47
- }
48
- },
49
- [JSON.stringify(defaultParams)]
50
- );
51
- react.useEffect(
52
- function() {
53
- if (!action || skip) {
54
- setLoading(false);
55
- return;
56
- }
57
- setLoading(true);
58
- const controller = new AbortController();
59
- function send() {
60
- const request = client.action(
61
- action,
62
- options2.params || params,
63
- { signal: controller.signal }
64
- );
65
- setPromise(request);
66
- request.then(
67
- (r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)
68
- ).catch(async (e) => {
69
- if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
70
- return;
71
- if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
72
- console.warn(`FaasReactClient: ${e.message} retry...`);
73
- setFails(1);
74
- return send();
44
+ react.useEffect(() => {
45
+ if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
46
+ setParams(defaultParams);
47
+ }
48
+ }, [JSON.stringify(defaultParams)]);
49
+ react.useEffect(() => {
50
+ if (!action || skip) {
51
+ setLoading(false);
52
+ return;
53
+ }
54
+ setLoading(true);
55
+ const controller = new AbortController();
56
+ function send() {
57
+ const request = client.action(
58
+ action,
59
+ options2.params || params,
60
+ { signal: controller.signal }
61
+ );
62
+ setPromise(request);
63
+ request.then(
64
+ (r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)
65
+ ).catch(async (e) => {
66
+ if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
67
+ return;
68
+ if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
69
+ console.warn(`FaasReactClient: ${e.message} retry...`);
70
+ setFails(1);
71
+ return send();
72
+ }
73
+ if (onError)
74
+ try {
75
+ await onError(action, params)(e);
76
+ } catch (error2) {
77
+ setError(error2);
75
78
  }
76
- if (onError)
77
- try {
78
- await onError(action, params)(e);
79
- } catch (error2) {
80
- setError(error2);
81
- }
82
- else
83
- setError(e);
84
- return Promise.reject(e);
85
- }).finally(() => setLoading(false));
86
- }
87
- if (options2 == null ? void 0 : options2.debounce) {
88
- const timeout = setTimeout(send, options2.debounce);
89
- return () => {
90
- clearTimeout(timeout);
91
- controller.abort();
92
- setLoading(false);
93
- };
94
- }
95
- send();
79
+ else
80
+ setError(e);
81
+ return Promise.reject(e);
82
+ }).finally(() => setLoading(false));
83
+ }
84
+ if (options2 == null ? void 0 : options2.debounce) {
85
+ const timeout = setTimeout(send, options2.debounce);
96
86
  return () => {
87
+ clearTimeout(timeout);
97
88
  controller.abort();
98
89
  setLoading(false);
99
90
  };
100
- },
101
- [action, JSON.stringify(options2.params || params), reloadTimes, skip]
102
- );
91
+ }
92
+ send();
93
+ return () => {
94
+ controller.abort();
95
+ setLoading(false);
96
+ };
97
+ }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
103
98
  return {
104
99
  action,
105
100
  params,
@@ -139,20 +134,14 @@ function FaasReactClient({
139
134
  setData
140
135
  });
141
136
  const [loaded, setLoaded] = react.useState(false);
142
- react.useEffect(
143
- function() {
144
- if (!loaded && !request.loading)
145
- setLoaded(true);
146
- },
147
- [request.loading]
148
- );
149
- react.useEffect(
150
- function() {
151
- if (onDataChange)
152
- onDataChange(request);
153
- },
154
- [JSON.stringify(request.data)]
155
- );
137
+ react.useEffect(() => {
138
+ if (!loaded && !request.loading)
139
+ setLoaded(true);
140
+ }, [request.loading]);
141
+ react.useEffect(() => {
142
+ if (onDataChange)
143
+ onDataChange(request);
144
+ }, [JSON.stringify(request.data)]);
156
145
  if (loaded) {
157
146
  if (children)
158
147
  return react.cloneElement(children, request);
@@ -224,10 +213,58 @@ var ErrorBoundary = class extends react.Component {
224
213
  return this.props.children;
225
214
  }
226
215
  };
216
+ function signal(initialValue, options = {}) {
217
+ const state = signalsReact.signal(initialValue);
218
+ if (options.debugName)
219
+ signalsReact.effect(() => console.debug(options.debugName, state.value));
220
+ return state;
221
+ }
222
+ function useSignalState(initialValue, options = {}) {
223
+ const state = signalsReact.useSignal(initialValue);
224
+ if (options.debugName) {
225
+ signalsReact.useSignalEffect(() => console.log(options.debugName, state.value));
226
+ }
227
+ return [
228
+ state.value,
229
+ (changes) => {
230
+ state.value = typeof changes === "function" ? changes(state.value) : changes;
231
+ }
232
+ ];
233
+ }
227
234
 
235
+ Object.defineProperty(exports, 'batch', {
236
+ enumerable: true,
237
+ get: function () { return signalsReact.batch; }
238
+ });
239
+ Object.defineProperty(exports, 'computed', {
240
+ enumerable: true,
241
+ get: function () { return signalsReact.computed; }
242
+ });
243
+ Object.defineProperty(exports, 'effect', {
244
+ enumerable: true,
245
+ get: function () { return signalsReact.effect; }
246
+ });
247
+ Object.defineProperty(exports, 'originSignal', {
248
+ enumerable: true,
249
+ get: function () { return signalsReact.signal; }
250
+ });
251
+ Object.defineProperty(exports, 'originUseSignal', {
252
+ enumerable: true,
253
+ get: function () { return signalsReact.useSignal; }
254
+ });
255
+ Object.defineProperty(exports, 'useComputed', {
256
+ enumerable: true,
257
+ get: function () { return signalsReact.useComputed; }
258
+ });
259
+ Object.defineProperty(exports, 'useSignalEffect', {
260
+ enumerable: true,
261
+ get: function () { return signalsReact.useSignalEffect; }
262
+ });
228
263
  exports.ErrorBoundary = ErrorBoundary;
229
264
  exports.FaasDataWrapper = FaasDataWrapper;
230
265
  exports.FaasReactClient = FaasReactClient;
231
266
  exports.faas = faas;
232
267
  exports.getClient = getClient;
268
+ exports.signal = signal;
233
269
  exports.useFaas = useFaas;
270
+ exports.useSignalState = useSignalState;
package/dist/index.mjs CHANGED
@@ -1,6 +1,8 @@
1
1
  import { useState, useEffect, cloneElement, Component } from 'react';
2
2
  import { FaasBrowserClient } from '@faasjs/browser';
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
+ import { signal as signal$1, effect, useSignal, useSignalEffect } from '@preact/signals-react';
5
+ export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
4
6
 
5
7
  // src/client.tsx
6
8
  var clients = {};
@@ -38,66 +40,60 @@ function FaasReactClient({
38
40
  }, [
39
41
  typeof options2.skip === "function" ? JSON.stringify(params) : options2.skip
40
42
  ]);
41
- useEffect(
42
- function() {
43
- if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
44
- setParams(defaultParams);
45
- }
46
- },
47
- [JSON.stringify(defaultParams)]
48
- );
49
- useEffect(
50
- function() {
51
- if (!action || skip) {
52
- setLoading(false);
53
- return;
54
- }
55
- setLoading(true);
56
- const controller = new AbortController();
57
- function send() {
58
- const request = client.action(
59
- action,
60
- options2.params || params,
61
- { signal: controller.signal }
62
- );
63
- setPromise(request);
64
- request.then(
65
- (r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)
66
- ).catch(async (e) => {
67
- if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
68
- return;
69
- if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
70
- console.warn(`FaasReactClient: ${e.message} retry...`);
71
- setFails(1);
72
- return send();
43
+ useEffect(() => {
44
+ if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
45
+ setParams(defaultParams);
46
+ }
47
+ }, [JSON.stringify(defaultParams)]);
48
+ useEffect(() => {
49
+ if (!action || skip) {
50
+ setLoading(false);
51
+ return;
52
+ }
53
+ setLoading(true);
54
+ const controller = new AbortController();
55
+ function send() {
56
+ const request = client.action(
57
+ action,
58
+ options2.params || params,
59
+ { signal: controller.signal }
60
+ );
61
+ setPromise(request);
62
+ request.then(
63
+ (r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)
64
+ ).catch(async (e) => {
65
+ if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
66
+ return;
67
+ if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
68
+ console.warn(`FaasReactClient: ${e.message} retry...`);
69
+ setFails(1);
70
+ return send();
71
+ }
72
+ if (onError)
73
+ try {
74
+ await onError(action, params)(e);
75
+ } catch (error2) {
76
+ setError(error2);
73
77
  }
74
- if (onError)
75
- try {
76
- await onError(action, params)(e);
77
- } catch (error2) {
78
- setError(error2);
79
- }
80
- else
81
- setError(e);
82
- return Promise.reject(e);
83
- }).finally(() => setLoading(false));
84
- }
85
- if (options2 == null ? void 0 : options2.debounce) {
86
- const timeout = setTimeout(send, options2.debounce);
87
- return () => {
88
- clearTimeout(timeout);
89
- controller.abort();
90
- setLoading(false);
91
- };
92
- }
93
- send();
78
+ else
79
+ setError(e);
80
+ return Promise.reject(e);
81
+ }).finally(() => setLoading(false));
82
+ }
83
+ if (options2 == null ? void 0 : options2.debounce) {
84
+ const timeout = setTimeout(send, options2.debounce);
94
85
  return () => {
86
+ clearTimeout(timeout);
95
87
  controller.abort();
96
88
  setLoading(false);
97
89
  };
98
- },
99
- [action, JSON.stringify(options2.params || params), reloadTimes, skip]
100
- );
90
+ }
91
+ send();
92
+ return () => {
93
+ controller.abort();
94
+ setLoading(false);
95
+ };
96
+ }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
101
97
  return {
102
98
  action,
103
99
  params,
@@ -137,20 +133,14 @@ function FaasReactClient({
137
133
  setData
138
134
  });
139
135
  const [loaded, setLoaded] = useState(false);
140
- useEffect(
141
- function() {
142
- if (!loaded && !request.loading)
143
- setLoaded(true);
144
- },
145
- [request.loading]
146
- );
147
- useEffect(
148
- function() {
149
- if (onDataChange)
150
- onDataChange(request);
151
- },
152
- [JSON.stringify(request.data)]
153
- );
136
+ useEffect(() => {
137
+ if (!loaded && !request.loading)
138
+ setLoaded(true);
139
+ }, [request.loading]);
140
+ useEffect(() => {
141
+ if (onDataChange)
142
+ onDataChange(request);
143
+ }, [JSON.stringify(request.data)]);
154
144
  if (loaded) {
155
145
  if (children)
156
146
  return cloneElement(children, request);
@@ -222,5 +212,23 @@ var ErrorBoundary = class extends Component {
222
212
  return this.props.children;
223
213
  }
224
214
  };
215
+ function signal(initialValue, options = {}) {
216
+ const state = signal$1(initialValue);
217
+ if (options.debugName)
218
+ effect(() => console.debug(options.debugName, state.value));
219
+ return state;
220
+ }
221
+ function useSignalState(initialValue, options = {}) {
222
+ const state = useSignal(initialValue);
223
+ if (options.debugName) {
224
+ useSignalEffect(() => console.log(options.debugName, state.value));
225
+ }
226
+ return [
227
+ state.value,
228
+ (changes) => {
229
+ state.value = typeof changes === "function" ? changes(state.value) : changes;
230
+ }
231
+ ];
232
+ }
225
233
 
226
- export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, useFaas };
234
+ export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, signal, useFaas, useSignalState };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/react",
3
- "version": "0.0.4-beta.9",
3
+ "version": "0.0.5-beta.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -22,14 +22,17 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@faasjs/browser": "0.0.4-beta.9"
25
+ "@faasjs/browser": "0.0.5-beta.2"
26
26
  },
27
27
  "peerDependencies": {
28
- "react": "*"
28
+ "react": "*",
29
+ "@preact/signals-react": "*"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@types/react": "*",
32
- "react": "*"
33
+ "react": "*",
34
+ "@preact/signals-react": "*",
35
+ "@types/use-sync-external-store": "*"
33
36
  },
34
37
  "engines": {
35
38
  "npm": ">=9.0.0",