@kemu-io/hs-react 0.2.36 → 0.2.37
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/cjs/WidgetWrapper.d.ts +0 -2
- package/cjs/components/ResizableContainer.d.ts +71 -0
- package/cjs/components/WidgetContainer.d.ts +20 -0
- package/cjs/components/index.d.ts +85 -0
- package/cjs/constants.d.ts +14 -0
- package/cjs/hooks/index.d.ts +695 -0
- package/cjs/hooks/useOnBroadcastEvent.d.ts +552 -0
- package/cjs/hooks/useOnParentEvent.d.ts +545 -0
- package/cjs/hooks/useOnSetOutputsEvent.d.ts +554 -0
- package/cjs/hooks/useReactiveWidgetState.d.ts +46 -0
- package/cjs/hooks/useResizableWidgetDimensions.d.ts +39 -0
- package/cjs/hooks/useWidgetState.d.ts +46 -0
- package/cjs/lib/InstanceContext.d.ts +523 -0
- package/cjs/lib/cache.d.ts +14 -0
- package/cjs/lib/globalContext.d.ts +429 -0
- package/cjs/types/context_t.d.ts +427 -0
- package/cjs/types/hooks_t.d.ts +44 -0
- package/cjs/types/widgetUI_t.d.ts +519 -0
- package/mjs/WidgetWrapper.d.ts +0 -2
- package/mjs/components/ResizableContainer.d.ts +71 -0
- package/mjs/components/WidgetContainer.d.ts +20 -0
- package/mjs/components/index.d.ts +85 -0
- package/mjs/constants.d.ts +14 -0
- package/mjs/hooks/index.d.ts +695 -0
- package/mjs/hooks/useOnBroadcastEvent.d.ts +552 -0
- package/mjs/hooks/useOnParentEvent.d.ts +545 -0
- package/mjs/hooks/useOnSetOutputsEvent.d.ts +554 -0
- package/mjs/hooks/useReactiveWidgetState.d.ts +46 -0
- package/mjs/hooks/useResizableWidgetDimensions.d.ts +39 -0
- package/mjs/hooks/useWidgetState.d.ts +46 -0
- package/mjs/lib/InstanceContext.d.ts +523 -0
- package/mjs/lib/cache.d.ts +14 -0
- package/mjs/lib/globalContext.d.ts +429 -0
- package/mjs/types/context_t.d.ts +427 -0
- package/mjs/types/hooks_t.d.ts +44 -0
- package/mjs/types/widgetUI_t.d.ts +519 -0
- package/package.json +1 -1
|
@@ -0,0 +1,554 @@
|
|
|
1
|
+
export type Rect = {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
top: number;
|
|
5
|
+
left: number;
|
|
6
|
+
};
|
|
7
|
+
export type Point = {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
};
|
|
11
|
+
export type BinaryFile<D extends ArrayBuffer | Uint8Array | Uint8ClampedArray | Buffer = ArrayBuffer> = {
|
|
12
|
+
format: string;
|
|
13
|
+
data: D;
|
|
14
|
+
};
|
|
15
|
+
declare enum DataType {
|
|
16
|
+
Number = 0,
|
|
17
|
+
String = 1,
|
|
18
|
+
ArrayBuffer = 2,
|
|
19
|
+
Array = 3,
|
|
20
|
+
Boolean = 4,
|
|
21
|
+
/** a javascript object */
|
|
22
|
+
JsonObj = 5,
|
|
23
|
+
/**
|
|
24
|
+
* Does not care; mostly used by actions to indicate they accept anything since they probably won't use the
|
|
25
|
+
* value.
|
|
26
|
+
**/
|
|
27
|
+
Anything = 6,
|
|
28
|
+
/** Raw image data, produced in browser environments */
|
|
29
|
+
ImageData = 7,
|
|
30
|
+
/** Raw audio data fraction */
|
|
31
|
+
AudioBuffer = 8,
|
|
32
|
+
Rect = 9,
|
|
33
|
+
Point = 10,
|
|
34
|
+
ImageBitmap = 11,
|
|
35
|
+
/**
|
|
36
|
+
* Custom binary data. Use the `format` property to specify the type of data, i.e. 'image/png', 'audio/mp3', etc.
|
|
37
|
+
**/
|
|
38
|
+
BinaryFile = 12
|
|
39
|
+
}
|
|
40
|
+
export type JsonType = {
|
|
41
|
+
[key: string]: SupportedTypes;
|
|
42
|
+
};
|
|
43
|
+
export type KemuType = number | string | ArrayBuffer | JsonType | boolean | ImageData | AudioBuffer | Rect | Point | ImageBitmap | BinaryFile;
|
|
44
|
+
export type SupportedTypes = KemuType | KemuType[];
|
|
45
|
+
/** Type passed around between gates and blocks */
|
|
46
|
+
export type Data = {
|
|
47
|
+
/** the type of data represented */
|
|
48
|
+
type: DataType;
|
|
49
|
+
value: SupportedTypes;
|
|
50
|
+
/** original time when the event was first picked up by an input gate. */
|
|
51
|
+
timestamp: number;
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* Describe the shape of objects. For example:
|
|
55
|
+
*
|
|
56
|
+
* Given the following object:
|
|
57
|
+
* ```
|
|
58
|
+
* const obj = {
|
|
59
|
+
* property1: 12,
|
|
60
|
+
* property2: 'Hello'
|
|
61
|
+
* };
|
|
62
|
+
* ```
|
|
63
|
+
*
|
|
64
|
+
* The shape definition would be:
|
|
65
|
+
* ```
|
|
66
|
+
* {
|
|
67
|
+
* 'property1': DataType.Number,
|
|
68
|
+
* 'property2': DataType.String,
|
|
69
|
+
* }
|
|
70
|
+
* ```
|
|
71
|
+
*
|
|
72
|
+
* Use a JsonPrimitiveFormat (`$$primitive_{x}`) to specify the type of an array of primitive objects,
|
|
73
|
+
* where 'x' is the index in the array the value of the property belongs to. For example:
|
|
74
|
+
*
|
|
75
|
+
* An event with `[1, 'hi', {other: 'yes}]` would produce the following jsonShape:
|
|
76
|
+
*
|
|
77
|
+
* ```
|
|
78
|
+
* {
|
|
79
|
+
* '$$primitive_0': DataType.Number,
|
|
80
|
+
* '$$primitive_1': DataType.String,
|
|
81
|
+
* '$$primitive_2': DataType.JsonObj,
|
|
82
|
+
* }
|
|
83
|
+
* ```
|
|
84
|
+
*
|
|
85
|
+
* If no primitive index is specified, the system assumes all the items in the array
|
|
86
|
+
* will have the given primitive type. For example:
|
|
87
|
+
*
|
|
88
|
+
* An array of `[1, 2, 3, 4]` should be described as:
|
|
89
|
+
* ```
|
|
90
|
+
* {
|
|
91
|
+
* '$$primitive': DataType.Number
|
|
92
|
+
* }
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
95
|
+
export type JsonTypeShape = {
|
|
96
|
+
[key: string]: DataType;
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Used by Widget (formerly known as Gates) modules when defining their
|
|
100
|
+
* input/output port list
|
|
101
|
+
*/
|
|
102
|
+
export type WidgetPort = {
|
|
103
|
+
/** a unique identifier (in the context of the widget) for this port. */
|
|
104
|
+
name: string;
|
|
105
|
+
/** alternative label used to replace the name for presentation purposes only */
|
|
106
|
+
label?: string;
|
|
107
|
+
/** Type of data the port accepts or produces, an array indicates the gate can receive multiple types */
|
|
108
|
+
type: DataType | DataType[];
|
|
109
|
+
/**
|
|
110
|
+
* If true, processors won't be invoked until at least an event is received in this port.
|
|
111
|
+
*/
|
|
112
|
+
required?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Describes the shape of a JSON object when dataType == JsonObj. Or the shape of items
|
|
115
|
+
* when dataType == Array
|
|
116
|
+
*/
|
|
117
|
+
jsonShape?: JsonTypeShape;
|
|
118
|
+
/** help description markdown */
|
|
119
|
+
description?: string;
|
|
120
|
+
};
|
|
121
|
+
export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
|
|
122
|
+
export type TargetOutput = {
|
|
123
|
+
/**
|
|
124
|
+
* the name of the port the `data` will be sent from.
|
|
125
|
+
* This name MUST match one of the ports
|
|
126
|
+
* returned by the `getOutputs` function or defined in the widget
|
|
127
|
+
* manifest. If the name does not match, the data will not be sent.
|
|
128
|
+
**/
|
|
129
|
+
name: string;
|
|
130
|
+
/**
|
|
131
|
+
* The data to send to the output port.
|
|
132
|
+
* If the value is `undefined` or `null`, no data will be sent.
|
|
133
|
+
* Also, the data type MUST match the type defined in the widget manifest.
|
|
134
|
+
*/
|
|
135
|
+
value: SupportedTypes | undefined | null;
|
|
136
|
+
/**
|
|
137
|
+
* the data type of the value being sent.
|
|
138
|
+
* This value is automatically inferred from the widget manifest.
|
|
139
|
+
**/
|
|
140
|
+
type: DataType;
|
|
141
|
+
/** id of the variant that defined the output */
|
|
142
|
+
variantId?: string;
|
|
143
|
+
};
|
|
144
|
+
export type WidgetPortStr = Omit<WidgetPort, "type"> & {
|
|
145
|
+
type: string;
|
|
146
|
+
};
|
|
147
|
+
declare enum ProcessorType {
|
|
148
|
+
Javascript = "js",
|
|
149
|
+
Python = "py",
|
|
150
|
+
Executable = "exe"
|
|
151
|
+
}
|
|
152
|
+
export type ServiceSecret = {
|
|
153
|
+
/** a markdown description of the secret */
|
|
154
|
+
description: string;
|
|
155
|
+
/** if true, the secret is optional and the service will still start if the secret is not provided */
|
|
156
|
+
optional?: boolean;
|
|
157
|
+
};
|
|
158
|
+
export type ServiceWidgetVariant<P extends WidgetPort | WidgetPortStr> = {
|
|
159
|
+
/** unique identifier for the variant */
|
|
160
|
+
id: string;
|
|
161
|
+
name: string;
|
|
162
|
+
description: string;
|
|
163
|
+
/**
|
|
164
|
+
* custom color for the variant. If not provided, the main
|
|
165
|
+
* color defined in the manifest will be used.
|
|
166
|
+
**/
|
|
167
|
+
color?: string;
|
|
168
|
+
/** SVG icon data */
|
|
169
|
+
svgIcon?: string;
|
|
170
|
+
inputs?: P[];
|
|
171
|
+
outputs?: P[];
|
|
172
|
+
};
|
|
173
|
+
export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
|
|
174
|
+
/** the unique name defined by the service */
|
|
175
|
+
name: string;
|
|
176
|
+
/** a unique identifier given during startup */
|
|
177
|
+
version: string;
|
|
178
|
+
/** a service title for UI purposes */
|
|
179
|
+
title?: string;
|
|
180
|
+
/** a shorten title to be used in the canvas */
|
|
181
|
+
shortTitle?: string;
|
|
182
|
+
description: string;
|
|
183
|
+
processor: ProcessorType;
|
|
184
|
+
/**
|
|
185
|
+
* if true, it indicates other services can subscribe
|
|
186
|
+
* to events emitted by this service. Only services
|
|
187
|
+
* with `eventEmitter` set to true can use `broadcast`
|
|
188
|
+
* to emit events.
|
|
189
|
+
*/
|
|
190
|
+
eventEmitter?: boolean;
|
|
191
|
+
/**
|
|
192
|
+
* Specifies the default timeout in seconds when a parentEvent is received.
|
|
193
|
+
* This is used to discard events that take too long to process.
|
|
194
|
+
* Set to 0 to disable the timeout. Warning this may
|
|
195
|
+
* cause some parent widgets to hang indefinitely if the child
|
|
196
|
+
* widget does not respond to the event.
|
|
197
|
+
**/
|
|
198
|
+
processingTimeoutSec?: number;
|
|
199
|
+
/**
|
|
200
|
+
* if true, parent events sent to this widget will
|
|
201
|
+
* be resolved immediately, meaning the parent widget
|
|
202
|
+
* will not have to wait for this service to respond
|
|
203
|
+
* before continuing execution.
|
|
204
|
+
*/
|
|
205
|
+
asyncParentEvents?: boolean;
|
|
206
|
+
/**
|
|
207
|
+
* if true, it indicates the service is only meant to be used in a
|
|
208
|
+
* web environment. The widget won't work when exported.
|
|
209
|
+
*/
|
|
210
|
+
webOnly?: boolean;
|
|
211
|
+
/**
|
|
212
|
+
* if set the service will only receive env vars that start with this prefix.
|
|
213
|
+
* Use it to isolate the information services have access to.
|
|
214
|
+
* Eg:
|
|
215
|
+
* - `KEMU_{CUSTOM_PREFIX}_DB_URL`: Your service will receive this env var as `DB_URL`
|
|
216
|
+
*
|
|
217
|
+
* Remember that only variables that start with `KEMU_` are forwarded to services.
|
|
218
|
+
*/
|
|
219
|
+
envVarPrefix?: string;
|
|
220
|
+
color?: string;
|
|
221
|
+
svgIcon?: string;
|
|
222
|
+
/**
|
|
223
|
+
* Flags this service as internal. Internal services are not
|
|
224
|
+
* meant to be used by the end-user. Attempts to use an internal service
|
|
225
|
+
* will likely result in an error.
|
|
226
|
+
*/
|
|
227
|
+
internal?: boolean;
|
|
228
|
+
/**
|
|
229
|
+
* if true, the service is expected to have a `widgetUI.js` file in the root directory
|
|
230
|
+
* that will be used to mount a new UI onto the canvas.
|
|
231
|
+
**/
|
|
232
|
+
widgetUI?: boolean;
|
|
233
|
+
/**
|
|
234
|
+
* If true, the processor won't be forwarded any parent events.
|
|
235
|
+
* Use it when you have a widget with custom UI that performs all processing
|
|
236
|
+
* inside of its own component. Keep in mind that when exported, any processing
|
|
237
|
+
* logic that does not exist in the processor will not be available in the exported
|
|
238
|
+
* recipe.
|
|
239
|
+
*/
|
|
240
|
+
ignoreParentEvents?: boolean;
|
|
241
|
+
/**
|
|
242
|
+
* A list of relative paths to `txt` files where custom widget clipboard data are stored. Eg:
|
|
243
|
+
* ```json
|
|
244
|
+
* {
|
|
245
|
+
* "customWidgets": [
|
|
246
|
+
* "customWidgets/widget1.txt",
|
|
247
|
+
* "customWidgets/widget2.txt",
|
|
248
|
+
* ]
|
|
249
|
+
* }
|
|
250
|
+
* ```
|
|
251
|
+
* This will cause the service to be rendered as a folder with the custom widgets as sub-widgets.
|
|
252
|
+
*/
|
|
253
|
+
customWidgets?: string[];
|
|
254
|
+
/**
|
|
255
|
+
* A list of widget variants that can be selected by the user.
|
|
256
|
+
* All variants will invoke the same processor, but they can have different input/output ports
|
|
257
|
+
* and be visually distinct.
|
|
258
|
+
*/
|
|
259
|
+
variants?: ServiceWidgetVariant<P>[];
|
|
260
|
+
/**
|
|
261
|
+
* A list of relative paths to folders containing extra services that are part of this service. Eg:
|
|
262
|
+
* ```json
|
|
263
|
+
* {
|
|
264
|
+
* "subServices": [
|
|
265
|
+
* "subServices/subService1",
|
|
266
|
+
* "subServices/subService2",
|
|
267
|
+
* ]
|
|
268
|
+
* }
|
|
269
|
+
* ```
|
|
270
|
+
*
|
|
271
|
+
* Each folder should contain all the required files that represent a service (manifest, processor, etc).
|
|
272
|
+
*/
|
|
273
|
+
subServices?: string[];
|
|
274
|
+
/** the list of input ports. If not provided,
|
|
275
|
+
* `dynamicInputs` MUST be set to true, or loading the
|
|
276
|
+
* widget will fail.
|
|
277
|
+
*/
|
|
278
|
+
inputs: P[];
|
|
279
|
+
/**
|
|
280
|
+
* the list of output ports. If not provided,
|
|
281
|
+
* `dynamicOutputs` MUST be set to true, or loading the
|
|
282
|
+
* widget will fail.
|
|
283
|
+
*/
|
|
284
|
+
outputs: P[];
|
|
285
|
+
/**
|
|
286
|
+
* A map of secret names to their descriptions
|
|
287
|
+
*/
|
|
288
|
+
requiredSecrets?: {
|
|
289
|
+
[name: string]: ServiceSecret;
|
|
290
|
+
};
|
|
291
|
+
};
|
|
292
|
+
export type ServiceWidgetInfo = {
|
|
293
|
+
name: string;
|
|
294
|
+
icon?: string;
|
|
295
|
+
color?: string;
|
|
296
|
+
description: string;
|
|
297
|
+
contents: string;
|
|
298
|
+
/**
|
|
299
|
+
* The id of the first root group in the widget.
|
|
300
|
+
* Keep in mind this id will be re-generated when the widget is added to the canvas.
|
|
301
|
+
*/
|
|
302
|
+
rootGroupId: string;
|
|
303
|
+
protocolVersion: string;
|
|
304
|
+
};
|
|
305
|
+
/**
|
|
306
|
+
* This is the output of the service library after processing its own manifest file.
|
|
307
|
+
*/
|
|
308
|
+
export type PartiallyProcessedManifest<B extends Buffer | ArrayBuffer = Buffer, SM extends WidgetPort | WidgetPortStr = WidgetPortStr> = ServiceManifest<SM> & {
|
|
309
|
+
widgetUIContents?: B;
|
|
310
|
+
uiContentChecksum?: string;
|
|
311
|
+
/** path to the root directory where the service resides */
|
|
312
|
+
path: string;
|
|
313
|
+
/** added by the service automatically when the service is running in dev mode */
|
|
314
|
+
readonly devMode?: boolean;
|
|
315
|
+
};
|
|
316
|
+
/**
|
|
317
|
+
* This is the output of the Hub after combining a PartiallyProcessedManifest and processing variants, sub-services and custom widgets.
|
|
318
|
+
*/
|
|
319
|
+
export type ProcessedManifest<B extends Buffer | ArrayBuffer = Buffer> = Omit<PartiallyProcessedManifest<B, WidgetPort>, "customWidgets"> & {
|
|
320
|
+
customWidgets?: ServiceWidgetInfo[];
|
|
321
|
+
/** if present, it indicates this service is a sub-service of another service */
|
|
322
|
+
parentService?: {
|
|
323
|
+
name: string;
|
|
324
|
+
version: string;
|
|
325
|
+
};
|
|
326
|
+
};
|
|
327
|
+
export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
|
|
328
|
+
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
|
|
329
|
+
}[Keys];
|
|
330
|
+
export type DefineDynamicPortsArgs = RequireAtLeastOne<{
|
|
331
|
+
/**
|
|
332
|
+
* Set to null to remove any previously defined ports or
|
|
333
|
+
* set to an empty array to remove ports from the widget.
|
|
334
|
+
*/
|
|
335
|
+
outputs?: WidgetPort[] | null;
|
|
336
|
+
/**
|
|
337
|
+
* Set to null to remove any previously defined ports or
|
|
338
|
+
* set to an empty array to remove ports from the widget.
|
|
339
|
+
*/
|
|
340
|
+
inputs?: WidgetPort[] | null;
|
|
341
|
+
}, "outputs" | "inputs"> & {
|
|
342
|
+
/** the id of the variant this definition applies to */
|
|
343
|
+
variantId?: string;
|
|
344
|
+
};
|
|
345
|
+
export type UseWidgetStateResponse<T extends WidgetState = WidgetState> = {
|
|
346
|
+
/**
|
|
347
|
+
* the current state of the widget at the time the hook was created.
|
|
348
|
+
* This state is not reactive and will not trigger a re-render when the state changes.
|
|
349
|
+
**/
|
|
350
|
+
state: Readonly<T>;
|
|
351
|
+
/**
|
|
352
|
+
* @returns the current state of the widget. This function is memoized and will always return the latest state.
|
|
353
|
+
*/
|
|
354
|
+
getState: () => Readonly<T>;
|
|
355
|
+
/**
|
|
356
|
+
* Updates the state of the widget.
|
|
357
|
+
* @param newState the new state to set.
|
|
358
|
+
* @param triggerEvents if true, the widget will notify listeners that its state has changed. Default is true.
|
|
359
|
+
*/
|
|
360
|
+
setState: (newState: T, triggerEvents?: boolean) => void;
|
|
361
|
+
};
|
|
362
|
+
/**
|
|
363
|
+
* @returns the current state and a memoized function to get the current state.
|
|
364
|
+
*/
|
|
365
|
+
export type UseWidgetStateHook<T extends WidgetState = WidgetState> = () => UseWidgetStateResponse<T>;
|
|
366
|
+
export type DeepReadOnly<T> = T extends (infer R)[] ? ReadonlyArray<DeepReadOnly<R>> : T extends object ? {
|
|
367
|
+
readonly [K in keyof T]: DeepReadOnly<T[K]>;
|
|
368
|
+
} : T;
|
|
369
|
+
export type DeepReadOnlyArray<T> = ReadonlyArray<DeepReadOnly<T>>;
|
|
370
|
+
export type ServiceParentEvent = {
|
|
371
|
+
/** information about the widget producing */
|
|
372
|
+
sourceWidget: {
|
|
373
|
+
id: string;
|
|
374
|
+
port: string;
|
|
375
|
+
};
|
|
376
|
+
targetPort: string;
|
|
377
|
+
data: Data;
|
|
378
|
+
};
|
|
379
|
+
export type BroadcastEvent = {
|
|
380
|
+
outputs: TargetOutput[];
|
|
381
|
+
source: {
|
|
382
|
+
serviceName: string;
|
|
383
|
+
serviceVersion: string;
|
|
384
|
+
sessionId: number;
|
|
385
|
+
};
|
|
386
|
+
};
|
|
387
|
+
export type ServiceParentEventHandler = (event: ServiceParentEvent) => void | Promise<void>;
|
|
388
|
+
export type ServiceBroadcastEventHandler = (event: DeepReadOnly<BroadcastEvent>) => void | Promise<void>;
|
|
389
|
+
export type ServiceSetOutputsEventHandler = (outputs: DeepReadOnlyArray<TargetOutput>) => void | Promise<void>;
|
|
390
|
+
export type LimitedManifest = Omit<ProcessedManifest, "widgetUIContents" | "settingsUIContents" | "path">;
|
|
391
|
+
export type ReactWidgetUtils = {
|
|
392
|
+
/**
|
|
393
|
+
* Shows a native dialog to choose a file.
|
|
394
|
+
* @returns a promise that resolves to the paths of the chosen files.
|
|
395
|
+
**/
|
|
396
|
+
showChooseFileDialog: (args: {
|
|
397
|
+
title?: string;
|
|
398
|
+
fileTypes?: string[];
|
|
399
|
+
allowMultiple?: boolean;
|
|
400
|
+
}) => Promise<string[]>;
|
|
401
|
+
/**
|
|
402
|
+
* Shows a native dialog to choose a directory.
|
|
403
|
+
* @returns a promise that resolves to the path of the chosen directory.
|
|
404
|
+
*/
|
|
405
|
+
showChooseDirectoryDialog: (args: {
|
|
406
|
+
title?: string;
|
|
407
|
+
}) => Promise<string>;
|
|
408
|
+
browser: {
|
|
409
|
+
/**
|
|
410
|
+
* @returns the Cache Storage path for the given file
|
|
411
|
+
**/
|
|
412
|
+
getCacheFilePath: (fileName: string) => string;
|
|
413
|
+
/**
|
|
414
|
+
* Adds the given data to the service cache
|
|
415
|
+
* @param filePath the full path of the file, including the file name and extension
|
|
416
|
+
* @param data the raw data to store
|
|
417
|
+
* @param headers optional response headers
|
|
418
|
+
* @returns
|
|
419
|
+
*/
|
|
420
|
+
cacheFile: (filePath: string, data: string | ArrayBuffer | Uint8Array | Uint8ClampedArray | Blob, headers?: Headers) => Promise<void>;
|
|
421
|
+
/**
|
|
422
|
+
* Attempts to load the file from the cache storage
|
|
423
|
+
* @param filePath full path of the file, including the file name and extension
|
|
424
|
+
* @returns the cached file or undefined if the file is not found
|
|
425
|
+
*/
|
|
426
|
+
getCachedFile: (filePath: string) => Promise<Response | undefined>;
|
|
427
|
+
/**
|
|
428
|
+
* Removes the file from the cache storage. If path does not exist, nothing happens.
|
|
429
|
+
* @param filePath full path of the file, including the file name and extension
|
|
430
|
+
*/
|
|
431
|
+
removeCachedFile: (filePath: string) => Promise<void>;
|
|
432
|
+
/**
|
|
433
|
+
* Removes all entries linked to this service
|
|
434
|
+
*/
|
|
435
|
+
clearServiceCache: () => Promise<void>;
|
|
436
|
+
};
|
|
437
|
+
};
|
|
438
|
+
export type CustomWidgetProps = {
|
|
439
|
+
/** the id of this widget in the recipe */
|
|
440
|
+
readonly widgetId: string;
|
|
441
|
+
/** the id of the recipe */
|
|
442
|
+
readonly recipeId: string;
|
|
443
|
+
/** the widget variant that was added to the workspace */
|
|
444
|
+
readonly variantId?: string;
|
|
445
|
+
/** the manifest file of the running service */
|
|
446
|
+
manifest: DeepReadOnly<LimitedManifest>;
|
|
447
|
+
serviceOnline: boolean;
|
|
448
|
+
disabled: boolean;
|
|
449
|
+
/**
|
|
450
|
+
* Redraws the ports and their connections.
|
|
451
|
+
* Useful when the size of your widget changes dynamically.
|
|
452
|
+
**/
|
|
453
|
+
repaintPorts: () => void;
|
|
454
|
+
/**
|
|
455
|
+
* Sets the value of the outputs of the widget.
|
|
456
|
+
* IMPORTANT: Keep in mind that port changes triggered from UI components won't work
|
|
457
|
+
* when the recipe is exported as a standalone service.
|
|
458
|
+
**/
|
|
459
|
+
setOutputs: GlobalContext["setOutputs"];
|
|
460
|
+
/**
|
|
461
|
+
* Invokes an `onUIEvent` in the processor file.
|
|
462
|
+
* @param name the name of the handler to be called.
|
|
463
|
+
* @returns a promise that resolves to the return value of the processor handler.
|
|
464
|
+
**/
|
|
465
|
+
callProcessorHandler: <R = any>(name: string, data?: any) => Promise<R>;
|
|
466
|
+
/**
|
|
467
|
+
* Allows the UI instance to change the default
|
|
468
|
+
* ports definition of a widget service based on custom logic. The interface
|
|
469
|
+
* will repaint the ports for the given widget accordingly.
|
|
470
|
+
*
|
|
471
|
+
* Keep in mind that calling this method while attached to other widgets will
|
|
472
|
+
* automatically remove the links with any parent or child widget.
|
|
473
|
+
**/
|
|
474
|
+
defineDynamicPorts: (config: DefineDynamicPortsArgs) => Promise<void>;
|
|
475
|
+
/**
|
|
476
|
+
* Utility functions
|
|
477
|
+
*/
|
|
478
|
+
utils: ReactWidgetUtils;
|
|
479
|
+
};
|
|
480
|
+
export type WidgetCanvasDimensions = {
|
|
481
|
+
width: number;
|
|
482
|
+
height: number;
|
|
483
|
+
};
|
|
484
|
+
export type Output = Omit<TargetOutput, "value"> & {
|
|
485
|
+
value: SupportedTypes;
|
|
486
|
+
};
|
|
487
|
+
export type GlobalContext<T extends WidgetState = WidgetState> = {
|
|
488
|
+
useWidgetState: UseWidgetStateHook<T>;
|
|
489
|
+
setOutputs: (outputs: Output[]) => Promise<void>;
|
|
490
|
+
defineDynamicPorts: (config: DefineDynamicPortsArgs) => Promise<void>;
|
|
491
|
+
callProcessorHandler: <R = any>(name: string, data?: any) => Promise<R>;
|
|
492
|
+
setWidgetDimensions: (width: number, height: number) => void;
|
|
493
|
+
getWidgetDimensions: () => WidgetCanvasDimensions;
|
|
494
|
+
utils: ReactWidgetUtils;
|
|
495
|
+
widgetId: string;
|
|
496
|
+
recipeId: string;
|
|
497
|
+
variantId?: string;
|
|
498
|
+
manifest: LimitedManifest;
|
|
499
|
+
};
|
|
500
|
+
export type InstanceContext = {
|
|
501
|
+
/** defines an event listener to be invoked when a parent widgets sends data to this widget */
|
|
502
|
+
useOnParentEvent: (cb: ServiceParentEventHandler) => void;
|
|
503
|
+
/** Defines an event listener to be invoked when the processor produces a broadcast event */
|
|
504
|
+
useOnBroadcastEvent: (cb: ServiceBroadcastEventHandler) => void;
|
|
505
|
+
/** Defines an event listener to be invoked when the processor calls `setOutputs()` */
|
|
506
|
+
useOnSetOutputsEvent: (cb: ServiceSetOutputsEventHandler) => void;
|
|
507
|
+
/**
|
|
508
|
+
* Sets the dimensions of the widget's canvas. It's used to automatically restore
|
|
509
|
+
* the widget's size when the recipe is re-loaded.
|
|
510
|
+
**/
|
|
511
|
+
setWidgetDimensions: (width: number, height: number) => void;
|
|
512
|
+
getWidgetDimensions: () => WidgetCanvasDimensions;
|
|
513
|
+
/** returns the original props passed to a widget instance */
|
|
514
|
+
getWidgetProps: () => CustomWidgetProps;
|
|
515
|
+
};
|
|
516
|
+
/**
|
|
517
|
+
* Defines an event listener to be invoked when this widget's processor is setting
|
|
518
|
+
* the value of one of its outputs as a result of a parent event.
|
|
519
|
+
*
|
|
520
|
+
* This is useful for intercepting the actual value being set to the output and displaying it in the UI.
|
|
521
|
+
*
|
|
522
|
+
* IMPORTANT: Avoid controlling logic flow (e.g., calling `setOutputs()` or `setState`) in this event handler,
|
|
523
|
+
* since exported recipes won't have UI components to handle the changes. Only do this if your service
|
|
524
|
+
* is intended to be used as a web component only.
|
|
525
|
+
*
|
|
526
|
+
* @param cb The event handler to be invoked.
|
|
527
|
+
* @example
|
|
528
|
+
*
|
|
529
|
+
* ```tsx
|
|
530
|
+
* const MyWidget = () => {
|
|
531
|
+
* const [portValue, setPortValue] = useState(0);
|
|
532
|
+
*
|
|
533
|
+
* // Widget's processor has called `setOutputs()`
|
|
534
|
+
* useOnSetOutputsEvent((event) => {
|
|
535
|
+
* const firstOutput = event.outputs[0];
|
|
536
|
+
* console.log(`Changing port ${firstOutput.name}'s value to "${firstOutput.value}"`);
|
|
537
|
+
* setPortValue(firstOutput.value);
|
|
538
|
+
* });
|
|
539
|
+
*
|
|
540
|
+
* return (
|
|
541
|
+
* <div>
|
|
542
|
+
* <p>Port value: {portValue}</p>
|
|
543
|
+
* </div>
|
|
544
|
+
* );
|
|
545
|
+
* }
|
|
546
|
+
* ```
|
|
547
|
+
**/
|
|
548
|
+
declare const useOnSetOutputsEvent: InstanceContext["useOnSetOutputsEvent"];
|
|
549
|
+
|
|
550
|
+
export {
|
|
551
|
+
useOnSetOutputsEvent as default,
|
|
552
|
+
};
|
|
553
|
+
|
|
554
|
+
export {};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
|
|
2
|
+
export type GetStateFunction<T extends WidgetState = WidgetState> = ((currentState: T) => T | Promise<T>);
|
|
3
|
+
export type NewStateOrFunction<T extends WidgetState = WidgetState> = (T) | GetStateFunction<T>;
|
|
4
|
+
/**
|
|
5
|
+
* A function that updates the widget state.
|
|
6
|
+
* @param newState the new state to set or a function that returns the new state.
|
|
7
|
+
* @param triggerEvents if true, the widget will notify listeners that its state has changed. Default is true.
|
|
8
|
+
*/
|
|
9
|
+
export type SetStateFun<T extends WidgetState = WidgetState> = (newState: NewStateOrFunction<T>, triggerEvents?: boolean) => Promise<void>;
|
|
10
|
+
export type ReactiveWidgetStateResponse<T extends WidgetState = WidgetState> = [
|
|
11
|
+
currentState: Readonly<T>,
|
|
12
|
+
setState: SetStateFun<T>
|
|
13
|
+
];
|
|
14
|
+
export type CompareFunction<T extends WidgetState> = (prevState: Readonly<T>, newState: Readonly<T>) => boolean | Promise<boolean>;
|
|
15
|
+
/**
|
|
16
|
+
* Reacts to changes to the internal state of a widget and updates the state accordingly.
|
|
17
|
+
* @param defaultState the default state of the widget when it is first created.
|
|
18
|
+
* @param compareFun an optional function that can be used to compare
|
|
19
|
+
* the current state with the new state to determine if the state should be updated.
|
|
20
|
+
* @returns a tuple containing the current state and a function to update the state.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* const [state, setState] = useReactiveWidgetState({ count: 0 });
|
|
25
|
+
*
|
|
26
|
+
* const increment = () => {
|
|
27
|
+
* setState((state) => {
|
|
28
|
+
* return { count: state.count + 1 };
|
|
29
|
+
* });
|
|
30
|
+
* }
|
|
31
|
+
*
|
|
32
|
+
* return (
|
|
33
|
+
* <div>
|
|
34
|
+
* <p>Count: {state.count}</p>
|
|
35
|
+
* <button onClick={increment}>Increment</button>
|
|
36
|
+
* </div>
|
|
37
|
+
* );
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
declare const useReactiveWidgetState: <T extends WidgetState>(defaultState?: T, compareFun?: CompareFunction<T>) => ReactiveWidgetStateResponse<T>;
|
|
41
|
+
|
|
42
|
+
export {
|
|
43
|
+
useReactiveWidgetState as default,
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export type WidgetCanvasDimensions = {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* @returns the internal dimensions of a widget in the canvas.
|
|
7
|
+
* Use in conjunction with a `ResizableContainer` initialize a widget with the correct
|
|
8
|
+
* size the first time it's rendered.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const defaultWidth = 200;
|
|
13
|
+
* const defaultHeight = 200;
|
|
14
|
+
*
|
|
15
|
+
* const { width, height } = useResizableWidgetDimensions(); // Get initial widget size
|
|
16
|
+
* const [widgetSize, setWidgetSize] = useState({ width, height }); // Set the initial size
|
|
17
|
+
*
|
|
18
|
+
* // React the resize events
|
|
19
|
+
* const onSizeChange = useCallback((width: number, height: number) => {
|
|
20
|
+
* setWidgetSize({ width, height });
|
|
21
|
+
* }, []);
|
|
22
|
+
*
|
|
23
|
+
* return (
|
|
24
|
+
* <ResizableContainer onResize={handleSomeEvent} defaultWidth={defaultWidth} defaultHeight={defaultHeight}>
|
|
25
|
+
* Size: {widgetSize.width} x {widgetSize.height}
|
|
26
|
+
* </ResizableContainer>
|
|
27
|
+
* );
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
declare const useResizableWidgetDimensions: (props?: {
|
|
31
|
+
defaultWidth: number;
|
|
32
|
+
defaultHeight: number;
|
|
33
|
+
}) => WidgetCanvasDimensions;
|
|
34
|
+
|
|
35
|
+
export {
|
|
36
|
+
useResizableWidgetDimensions as default,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
|
|
2
|
+
export type UseWidgetStateResponse<T extends WidgetState = WidgetState> = {
|
|
3
|
+
/**
|
|
4
|
+
* the current state of the widget at the time the hook was created.
|
|
5
|
+
* This state is not reactive and will not trigger a re-render when the state changes.
|
|
6
|
+
**/
|
|
7
|
+
state: Readonly<T>;
|
|
8
|
+
/**
|
|
9
|
+
* @returns the current state of the widget. This function is memoized and will always return the latest state.
|
|
10
|
+
*/
|
|
11
|
+
getState: () => Readonly<T>;
|
|
12
|
+
/**
|
|
13
|
+
* Updates the state of the widget.
|
|
14
|
+
* @param newState the new state to set.
|
|
15
|
+
* @param triggerEvents if true, the widget will notify listeners that its state has changed. Default is true.
|
|
16
|
+
*/
|
|
17
|
+
setState: (newState: T, triggerEvents?: boolean) => void;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* @returns an object with the current state of the widget,
|
|
21
|
+
* a function to get the current state, and a function to update the state.
|
|
22
|
+
* Use it to handle widget state from memoized functions without causing re-renders.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const { state, getState, setState } = useWidgetState();
|
|
27
|
+
*
|
|
28
|
+
* const handleSomeEvent = useCallback(() => {
|
|
29
|
+
* const currentState = getState();
|
|
30
|
+
* if(currentState.someValue === 'someValue') {
|
|
31
|
+
* setState({ someValue: 'newValue' });
|
|
32
|
+
* }
|
|
33
|
+
* }, [getState, setState])
|
|
34
|
+
*
|
|
35
|
+
* return (
|
|
36
|
+
* <BigChildComponent onEvent={handleSomeEvent} />
|
|
37
|
+
* );
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
declare const useWidgetState: <T extends WidgetState>() => UseWidgetStateResponse<T>;
|
|
41
|
+
|
|
42
|
+
export {
|
|
43
|
+
useWidgetState as default,
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export {};
|