@gradio/core 1.0.0-dev.0 → 1.0.0-dev.3

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 (106) hide show
  1. package/CHANGELOG.md +79 -0
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/src/Blocks.svelte +518 -1001
  5. package/dist/src/Blocks.svelte.d.ts +31 -45
  6. package/dist/src/Embed.svelte +82 -55
  7. package/dist/src/Embed.svelte.d.ts +39 -30
  8. package/dist/src/Login.svelte +33 -29
  9. package/dist/src/Login.svelte.d.ts +21 -19
  10. package/dist/src/MountComponents.svelte +19 -25
  11. package/dist/src/MountComponents.svelte.d.ts +5 -28
  12. package/dist/src/{init.d.ts → _init.d.ts} +5 -4
  13. package/dist/src/{init.js → _init.js} +31 -108
  14. package/dist/src/api_docs/ApiBanner.svelte +12 -8
  15. package/dist/src/api_docs/ApiBanner.svelte.d.ts +22 -20
  16. package/dist/src/api_docs/ApiDocs.svelte +337 -245
  17. package/dist/src/api_docs/ApiDocs.svelte.d.ts +26 -24
  18. package/dist/src/api_docs/ApiRecorder.svelte +9 -3
  19. package/dist/src/api_docs/ApiRecorder.svelte.d.ts +19 -17
  20. package/dist/src/api_docs/CodeSnippet.svelte +60 -30
  21. package/dist/src/api_docs/CodeSnippet.svelte.d.ts +27 -24
  22. package/dist/src/api_docs/CopyButton.svelte +69 -13
  23. package/dist/src/api_docs/CopyButton.svelte.d.ts +18 -16
  24. package/dist/src/api_docs/CopyMarkdown.svelte +734 -0
  25. package/dist/src/api_docs/CopyMarkdown.svelte.d.ts +37 -0
  26. package/dist/src/api_docs/EndpointDetail.svelte +8 -6
  27. package/dist/src/api_docs/EndpointDetail.svelte.d.ts +20 -18
  28. package/dist/src/api_docs/IconArrowUpRight.svelte +34 -0
  29. package/dist/src/api_docs/IconArrowUpRight.svelte.d.ts +20 -0
  30. package/dist/src/api_docs/IconCaret.svelte +39 -0
  31. package/dist/src/api_docs/IconCaret.svelte.d.ts +20 -0
  32. package/dist/src/api_docs/IconHuggingChat.svelte +62 -0
  33. package/dist/src/api_docs/IconHuggingChat.svelte.d.ts +20 -0
  34. package/dist/src/api_docs/InputPayload.svelte +17 -11
  35. package/dist/src/api_docs/InputPayload.svelte.d.ts +25 -23
  36. package/dist/src/api_docs/InstallSnippet.svelte +9 -6
  37. package/dist/src/api_docs/InstallSnippet.svelte.d.ts +18 -16
  38. package/dist/src/api_docs/MCPSnippet.svelte +119 -99
  39. package/dist/src/api_docs/MCPSnippet.svelte.d.ts +59 -58
  40. package/dist/src/api_docs/NoApi.svelte +7 -4
  41. package/dist/src/api_docs/NoApi.svelte.d.ts +20 -18
  42. package/dist/src/api_docs/ParametersSnippet.svelte +8 -6
  43. package/dist/src/api_docs/ParametersSnippet.svelte.d.ts +21 -19
  44. package/dist/src/api_docs/RecordingSnippet.svelte +124 -110
  45. package/dist/src/api_docs/RecordingSnippet.svelte.d.ts +24 -22
  46. package/dist/src/api_docs/ResponseSnippet.svelte +7 -5
  47. package/dist/src/api_docs/ResponseSnippet.svelte.d.ts +21 -19
  48. package/dist/src/api_docs/Settings.svelte +73 -62
  49. package/dist/src/api_docs/Settings.svelte.d.ts +25 -23
  50. package/dist/src/api_docs/SettingsBanner.svelte +11 -8
  51. package/dist/src/api_docs/SettingsBanner.svelte.d.ts +20 -18
  52. package/dist/src/api_docs/TryButton.svelte +5 -3
  53. package/dist/src/api_docs/TryButton.svelte.d.ts +19 -17
  54. package/dist/src/api_docs/img/IconCheck.svelte +33 -0
  55. package/dist/src/api_docs/img/IconCheck.svelte.d.ts +26 -0
  56. package/dist/src/api_docs/img/IconCopy.svelte +40 -0
  57. package/dist/src/api_docs/img/IconCopy.svelte.d.ts +26 -0
  58. package/dist/src/api_docs/img/clear.svelte.d.ts +22 -21
  59. package/dist/src/dependency.d.ts +142 -0
  60. package/dist/src/dependency.js +653 -0
  61. package/dist/src/init.svelte.d.ts +78 -0
  62. package/dist/src/init.svelte.js +469 -0
  63. package/dist/src/init_utils.d.ts +32 -0
  64. package/dist/src/init_utils.js +73 -0
  65. package/dist/src/lang/en.json +10 -1
  66. package/dist/src/lang/get_lang_names.js +0 -3
  67. package/dist/src/lang/ru.json +10 -1
  68. package/dist/src/stores.d.ts +0 -21
  69. package/dist/src/stories/I18nMultiLanguageTestComponent.svelte +5 -3
  70. package/dist/src/stories/I18nMultiLanguageTestComponent.svelte.d.ts +16 -14
  71. package/dist/src/stories/I18nTestSetup.svelte +14 -10
  72. package/dist/src/stories/I18nTestSetup.svelte.d.ts +18 -16
  73. package/dist/src/types.d.ts +30 -26
  74. package/index.ts +1 -1
  75. package/package.json +59 -59
  76. package/src/Blocks.svelte +344 -1063
  77. package/src/MountComponents.svelte +17 -27
  78. package/src/{init.ts → _init.ts} +49 -126
  79. package/src/api_docs/ApiDocs.svelte +65 -60
  80. package/src/api_docs/ApiRecorder.svelte +3 -0
  81. package/src/api_docs/CodeSnippet.svelte +20 -5
  82. package/src/api_docs/CopyButton.svelte +61 -7
  83. package/src/api_docs/CopyMarkdown.svelte +734 -0
  84. package/src/api_docs/IconArrowUpRight.svelte +34 -0
  85. package/src/api_docs/IconCaret.svelte +39 -0
  86. package/src/api_docs/IconHuggingChat.svelte +62 -0
  87. package/src/api_docs/MCPSnippet.svelte +24 -46
  88. package/src/api_docs/ParametersSnippet.svelte +1 -1
  89. package/src/api_docs/ResponseSnippet.svelte +1 -1
  90. package/src/api_docs/Settings.svelte +11 -11
  91. package/src/api_docs/img/IconCheck.svelte +33 -0
  92. package/src/api_docs/img/IconCopy.svelte +40 -0
  93. package/src/dependency.ts +880 -0
  94. package/src/init.svelte.ts +717 -0
  95. package/src/init_utils.ts +99 -0
  96. package/src/lang/en.json +10 -1
  97. package/src/lang/get_lang_names.js +0 -3
  98. package/src/lang/ru.json +10 -1
  99. package/src/stores.ts +22 -22
  100. package/src/types.ts +54 -43
  101. package/dist/src/Render.svelte +0 -105
  102. package/dist/src/Render.svelte.d.ts +0 -31
  103. package/dist/src/RenderComponent.svelte +0 -72
  104. package/dist/src/RenderComponent.svelte.d.ts +0 -33
  105. package/src/Render.svelte +0 -126
  106. package/src/RenderComponent.svelte +0 -91
@@ -0,0 +1,880 @@
1
+ import type {
2
+ ComponentMeta,
3
+ DependencyTypes,
4
+ Dependency as IDependency,
5
+ LayoutNode,
6
+ Payload
7
+ } from "./types.js";
8
+ import { AsyncFunction } from "./init_utils";
9
+ import { Client, type client_return } from "@gradio/client";
10
+ import { LoadingStatus, type LoadingStatusArgs } from "@gradio/statustracker";
11
+ import type { ToastMessage } from "@gradio/statustracker";
12
+ import type { StatusMessage, ValidationError } from "@gradio/client";
13
+ const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
14
+
15
+ const NOVALUE = Symbol("NOVALUE");
16
+ /**
17
+ * A dependency as used by the frontend
18
+ * This class represents a discrete dependency that can be triggered by an event
19
+ * It is responsible calling the appropriate functions and reporting back results
20
+ */
21
+ export class Dependency {
22
+ id: number;
23
+ inputs: number[];
24
+ outputs: number[];
25
+ cancels: number[];
26
+ pending = false;
27
+ trigger_modes: "once" | "multiple" | "always_last";
28
+ event_args: Record<string, unknown> = {};
29
+ targets: [number, string][] = [];
30
+ connection_type: "stream" | "sse";
31
+
32
+ // if this dependency has any then, success or failure triggers
33
+ triggers: [number, "success" | "failure" | "all"][] = [];
34
+
35
+ // the id of the original event_id that caused this dependency to run
36
+ // in the case of chained events, it would be the id of the initial trigger
37
+ original_trigger_id: number | null = null;
38
+ show_progress_on: number[] | null = null;
39
+
40
+ functions: {
41
+ frontend?: (...args: unknown[]) => Promise<unknown[]>;
42
+ backend: boolean;
43
+ backend_js?: (...args: unknown[]) => Promise<unknown[]>;
44
+ };
45
+
46
+ constructor(dep_config: IDependency) {
47
+ this.id = dep_config.id;
48
+ this.original_trigger_id = dep_config.id;
49
+ this.inputs = dep_config.inputs;
50
+ this.outputs = dep_config.outputs;
51
+ this.connection_type = dep_config.connection;
52
+ this.functions = {
53
+ frontend: dep_config.js
54
+ ? process_frontend_fn(
55
+ dep_config.js,
56
+ dep_config.backend_fn,
57
+ dep_config.inputs.length,
58
+ dep_config.outputs.length
59
+ )
60
+ : undefined,
61
+ backend: dep_config.backend_fn,
62
+ backend_js: dep_config.js_implementation
63
+ ? new AsyncFunction(
64
+ `let result = await (${dep_config.js_implementation})(...arguments);
65
+ return (!Array.isArray(result)) ? [result] : result;`
66
+ )
67
+ : undefined
68
+ };
69
+ this.targets = dep_config.targets;
70
+ this.cancels = dep_config.cancels;
71
+ this.trigger_modes = dep_config.trigger_mode;
72
+ this.show_progress_on = dep_config.show_progress_on || null;
73
+
74
+ for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
75
+ const key = dep_config.event_specific_args[i];
76
+ this.event_args[key] = dep_config[key] ?? null;
77
+ }
78
+ }
79
+
80
+ async run(
81
+ client: client_return,
82
+ data_payload: unknown[],
83
+ event_data: unknown,
84
+ target_id: number | null | undefined
85
+ ): Promise<
86
+ | { type: "data"; data: unknown[] }
87
+ | { type: "void"; data: null }
88
+ | { type: "submit"; data: ReturnType<client_return["submit"]> }
89
+ > {
90
+ let _data_payload = data_payload;
91
+
92
+ // if the function is backend_js, then it's the entire event
93
+ // no need to chain frontend and backend
94
+ if (this.functions.backend_js) {
95
+ const data = await this.functions.backend_js(..._data_payload);
96
+ return { type: "data", data };
97
+ }
98
+
99
+ // If it has a js implementation, the correct behavior
100
+ // is to run that and pass the output to the backend
101
+ if (this.functions.frontend) {
102
+ _data_payload = await this.functions.frontend(data_payload);
103
+ }
104
+
105
+ if (this.functions.backend) {
106
+ return {
107
+ type: "submit",
108
+ data: client.submit(this.id, _data_payload, event_data, target_id)
109
+ };
110
+ } else if (this.functions.frontend) {
111
+ return { type: "data", data: _data_payload };
112
+ }
113
+ return { type: "void", data: null };
114
+ }
115
+
116
+ add_trigger(dep_id: number, condition: "success" | "failure" | "all") {
117
+ this.triggers.push([dep_id, condition]);
118
+ }
119
+
120
+ get_triggers(): { success: number[]; failure: number[]; all: number[] } {
121
+ return {
122
+ success: this.triggers
123
+ .filter(([, condition]) => condition === "success")
124
+ .map(([id]) => id),
125
+ failure: this.triggers
126
+ .filter(([, condition]) => condition === "failure")
127
+ .map(([id]) => id),
128
+ all: this.triggers
129
+ .filter(([, condition]) => condition === "all")
130
+ .map(([id]) => id)
131
+ };
132
+ }
133
+ }
134
+
135
+ interface DispatchFunction {
136
+ type: "fn";
137
+ event_data: unknown;
138
+ fn_index?: number;
139
+ target_id?: number;
140
+ }
141
+
142
+ interface DispatchEvent {
143
+ type: "event";
144
+ event_name?: string;
145
+ target_id?: number;
146
+ event_data: unknown;
147
+ }
148
+
149
+ /**
150
+ * Manages all dependencies for an app acting as a bridge between app state and Dependencies
151
+ * Responsible for registering dependencies and dispatching events to them
152
+ * It is also responsible for orchestrating dependencies based on the follwing:
153
+ * - Cancelling dependencies
154
+ * - Ensuring individual dependencies respect `trigger_mode`
155
+ * - Managing then, success and failure events
156
+ * - Ensuring that dependencies bound to the same id are treated a single unit
157
+ * - updating loading states
158
+ * - updating component states
159
+ */
160
+ export class DependencyManager {
161
+ dependencies_by_fn: Map<number, Dependency> = new Map();
162
+ dependencies_by_event: Map<string, Dependency[]> = new Map();
163
+ render_id_deps = new Map<number, Set<number>>();
164
+
165
+ submissions: Map<number, ReturnType<Client["submit"]>> = new Map();
166
+ client: Client;
167
+ queue: Set<number> = new Set();
168
+ add_to_api_calls: (payload: Payload) => void;
169
+
170
+ update_state_cb: (
171
+ id: number,
172
+ state: Record<string, unknown>,
173
+ check_visibility?: boolean
174
+ ) => Promise<void>;
175
+ get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
176
+ rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
177
+ log_cb: (
178
+ title: string,
179
+ message: string,
180
+ fn_index: number,
181
+ type: ToastMessage["type"],
182
+ duration?: number | null,
183
+ visible?: boolean
184
+ ) => void;
185
+ loading_stati = new LoadingStatus();
186
+
187
+ constructor(
188
+ dependencies: IDependency[],
189
+ client: Client,
190
+ update_state_cb: (
191
+ id: number,
192
+ state: Record<string, unknown>,
193
+ check_visibility?: boolean
194
+ ) => Promise<void>,
195
+ get_state_cb: (id: number) => Promise<Record<string, unknown> | null>,
196
+ rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void,
197
+ log_cb: (
198
+ title: string,
199
+ message: string,
200
+ fn_index: number,
201
+ type: ToastMessage["type"],
202
+ duration?: number | null,
203
+ visible?: boolean
204
+ ) => void,
205
+ add_to_api_calls: (payload: Payload) => void
206
+ ) {
207
+ this.add_to_api_calls = add_to_api_calls;
208
+ this.client = client;
209
+ this.log_cb = log_cb;
210
+ // this.update_state_cb = update_state_cb;
211
+ // this.get_state_cb = get_state_cb;
212
+ // this.rerender_cb = rerender_cb;
213
+ this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
214
+ }
215
+
216
+ reload(
217
+ dependencies: IDependency[],
218
+ update_state,
219
+ get_state,
220
+ rerender,
221
+ client
222
+ ) {
223
+ const { by_id, by_event } = this.create(dependencies);
224
+ this.dependencies_by_event = by_event;
225
+ this.dependencies_by_fn = by_id;
226
+ for (const [dep_id, dep] of this.dependencies_by_fn) {
227
+ for (const [output_id] of dep.targets) {
228
+ this.set_event_args(output_id, dep.event_args);
229
+ }
230
+ }
231
+ this.client = client;
232
+ this.update_state_cb = update_state;
233
+ this.get_state_cb = get_state;
234
+ this.rerender_cb = rerender;
235
+ this.register_loading_stati(by_id);
236
+ }
237
+ register_loading_stati(deps: Map<number, Dependency>): void {
238
+ for (const [_, dep] of deps) {
239
+ this.loading_stati.register(
240
+ dep.id,
241
+ dep.show_progress_on || dep.outputs,
242
+ dep.inputs
243
+ );
244
+ }
245
+ }
246
+
247
+ clear_loading_status(component_id: number): void {
248
+ this.loading_stati.clear(component_id);
249
+ }
250
+
251
+ async update_loading_stati_state() {
252
+ for (const [component_id, loading_status] of Object.entries(
253
+ this.loading_stati.current
254
+ )) {
255
+ this.update_state_cb(
256
+ Number(component_id),
257
+ {
258
+ loading_status: loading_status
259
+ },
260
+ false
261
+ );
262
+ }
263
+ }
264
+
265
+ dispatch_state_change_events(result: StatusMessage): void {
266
+ if (result.changed_state_ids) {
267
+ for (const changed_id of result.changed_state_ids) {
268
+ const change_dep = this.dependencies_by_event.get(
269
+ "change-" + changed_id
270
+ );
271
+ change_dep?.forEach((dep) => {
272
+ this.dispatch({
273
+ type: "fn",
274
+ fn_index: dep.id,
275
+ target_id: changed_id,
276
+ event_data: null
277
+ });
278
+ });
279
+ }
280
+ }
281
+ }
282
+
283
+ /** Dispatches an event to the appropriate dependency
284
+ * @param event_name the name of the event
285
+ * @param target_id the id of the component that triggered the event
286
+ * @param event_data any additional data to pass to the dependency
287
+ * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
288
+ */
289
+ async dispatch(event_meta: DispatchFunction | DispatchEvent): Promise<void> {
290
+ let deps: Dependency[] | undefined;
291
+ if (event_meta.type === "fn") {
292
+ const dep = this.dependencies_by_fn.get(event_meta.fn_index!);
293
+ if (dep) deps = [dep];
294
+ } else {
295
+ deps = this.dependencies_by_event.get(
296
+ `${event_meta.event_name}-${event_meta.target_id}`
297
+ );
298
+ }
299
+
300
+ for (let i = 0; i < (deps?.length || 0); i++) {
301
+ const dep = deps ? deps[i] : undefined;
302
+ if (dep) {
303
+ this.cancel(dep.cancels);
304
+
305
+ const dispatch_status = should_dispatch(
306
+ dep.trigger_modes,
307
+ this.submissions.has(dep.id)
308
+ );
309
+
310
+ if (dispatch_status === "skip") {
311
+ continue;
312
+ } else if (dispatch_status === "defer") {
313
+ this.queue.add(dep.id);
314
+ continue;
315
+ }
316
+
317
+ // No loading status for js-only deps
318
+ if (dep.functions.backend) {
319
+ this.loading_stati.update({
320
+ status: "pending",
321
+ fn_index: dep.id,
322
+ stream_state: null
323
+ });
324
+ this.update_loading_stati_state();
325
+ }
326
+
327
+ const data_payload = await this.gather_state(dep.inputs);
328
+ const unset_args = await Promise.all(
329
+ dep.targets.map(([output_id]) =>
330
+ this.set_event_args(output_id, dep.event_args)
331
+ )
332
+ );
333
+
334
+ const { success, failure, all } = dep.get_triggers();
335
+
336
+ try {
337
+ let target_id: number | null = null;
338
+ if (
339
+ event_meta.target_id !== undefined ||
340
+ event_meta.type === "event"
341
+ ) {
342
+ target_id = event_meta.target_id || null;
343
+ } else {
344
+ target_id = dep.original_trigger_id;
345
+ }
346
+
347
+ if (
348
+ dep.connection_type === "stream" &&
349
+ this.submissions.has(dep.id)
350
+ ) {
351
+ const submission = this.submissions.get(dep.id);
352
+ let payload: Payload = {
353
+ fn_index: dep.id,
354
+ data: data_payload,
355
+ event_data: event_meta.event_data
356
+ };
357
+ submission!.send_chunk(payload);
358
+ unset_args.forEach((fn) => fn());
359
+ continue;
360
+ }
361
+
362
+ this.add_to_api_calls({
363
+ fn_index: dep.id,
364
+ data: data_payload,
365
+ event_data: event_meta.event_data,
366
+ trigger_id: target_id
367
+ });
368
+ const dep_submission = await dep.run(
369
+ this.client,
370
+ data_payload,
371
+ event_meta.event_data,
372
+ target_id
373
+ );
374
+
375
+ if (dep_submission.type === "void") {
376
+ unset_args.forEach((fn) => fn());
377
+ } else if (dep_submission.type === "data") {
378
+ this.handle_data(dep.outputs, dep_submission.data);
379
+ unset_args.forEach((fn) => fn());
380
+ } else {
381
+ let stream_state: "open" | "closed" | "waiting" | null = null;
382
+
383
+ if (
384
+ dep.connection_type === "stream" &&
385
+ !this.submissions.has(dep.id)
386
+ ) {
387
+ stream_state = "waiting";
388
+ }
389
+
390
+ this.submissions.set(dep.id, dep_submission.data);
391
+ let index = 0;
392
+ // fn for this?
393
+ submit_loop: for await (const result of dep_submission.data) {
394
+ if (index === 0) {
395
+ // Clear out previously set validation errors
396
+ dep.inputs.forEach((input_id) => {
397
+ this.update_state_cb(
398
+ input_id,
399
+ {
400
+ loading_status: {
401
+ validation_error: null
402
+ }
403
+ },
404
+ false
405
+ );
406
+ });
407
+ }
408
+ index += 1;
409
+ if (result === null) continue;
410
+ if (result.type === "data") {
411
+ this.handle_data(dep.outputs, result.data);
412
+ }
413
+ if (result.type === "status") {
414
+ if (
415
+ result.original_msg === "process_starts" &&
416
+ dep.connection_type === "stream"
417
+ ) {
418
+ stream_state = "open";
419
+ }
420
+ const { fn_index, ...status } = result;
421
+
422
+ // handle status updates here
423
+ if (result.stage === "complete") {
424
+ stream_state = "closed";
425
+ success.forEach((dep_id) => {
426
+ this.dispatch({
427
+ type: "fn",
428
+ fn_index: dep_id,
429
+ event_data: null,
430
+ target_id: target_id as number | undefined
431
+ });
432
+ });
433
+ this.dispatch_state_change_events(result);
434
+ // @ts-ignore
435
+ this.loading_stati.update({
436
+ ...status,
437
+ status: status.stage,
438
+ fn_index: dep.id,
439
+ stream_state
440
+ });
441
+ this.update_loading_stati_state();
442
+ break submit_loop;
443
+ } else if (result.stage === "generating") {
444
+ this.dispatch_state_change_events(result);
445
+ // @ts-ignore
446
+ this.loading_stati.update({
447
+ ...status,
448
+ status: status.stage,
449
+ fn_index: dep.id,
450
+ stream_state
451
+ });
452
+ this.update_loading_stati_state();
453
+ } else if (result.stage === "error") {
454
+ if (Array.isArray(result?.message)) {
455
+ result.message.forEach((m: ValidationError, i) => {
456
+ this.update_state_cb(
457
+ dep.inputs[i],
458
+ {
459
+ loading_status: {
460
+ validation_error: !m.is_valid ? m.message : null,
461
+ show_validation_error: true
462
+ }
463
+ },
464
+ false
465
+ );
466
+ });
467
+
468
+ // Manually set the output statuses to null
469
+ // Doing this in update_loading_stati_state would
470
+ // validation errors set above
471
+ // For example, if the input component is an output component (chatinterface)
472
+ dep.outputs.forEach((output_id) => {
473
+ if (dep.inputs.includes(output_id)) return;
474
+ this.update_state_cb(
475
+ output_id,
476
+ {
477
+ loading_status: {
478
+ status: null
479
+ }
480
+ },
481
+ false
482
+ );
483
+ });
484
+ unset_args.forEach((fn) => fn());
485
+ this.submissions.delete(dep.id);
486
+ if (this.queue.has(dep.id)) {
487
+ this.queue.delete(dep.id);
488
+ this.dispatch(event_meta);
489
+ }
490
+ return;
491
+ }
492
+
493
+ const _message = result?.message?.replace(
494
+ MESSAGE_QUOTE_RE,
495
+ (_, b) => b
496
+ );
497
+ this.log_cb(
498
+ result._title ?? "Error",
499
+ _message,
500
+ fn_index,
501
+ "error",
502
+ status.duration,
503
+ status.visible
504
+ );
505
+ throw new Error("Dependency function failed");
506
+ } else {
507
+ // @ts-ignore
508
+ this.loading_stati.update({
509
+ ...status,
510
+ status: status.stage,
511
+ fn_index: dep.id,
512
+ stream_state
513
+ });
514
+ this.update_loading_stati_state();
515
+ }
516
+ }
517
+
518
+ if (result.type === "render") {
519
+ const { layout, components, render_id, dependencies } =
520
+ result.data;
521
+
522
+ this.rerender_cb(components, layout);
523
+ // update dependencies
524
+ const { by_id, by_event } = this.create(
525
+ dependencies as unknown as IDependency[]
526
+ );
527
+ this.register_loading_stati(by_id);
528
+
529
+ by_id.forEach((dep) =>
530
+ this.dependencies_by_fn.set(dep.id, dep)
531
+ );
532
+ by_event.forEach((dep, key) =>
533
+ this.dependencies_by_event.set(key, dep)
534
+ );
535
+ const current_deps = this.render_id_deps.get(render_id);
536
+ if (current_deps) {
537
+ current_deps.forEach((old_dep_id) => {
538
+ if (!by_id.has(old_dep_id)) {
539
+ this.dependencies_by_fn.delete(old_dep_id);
540
+ }
541
+ });
542
+ }
543
+ this.render_id_deps.set(
544
+ render_id,
545
+ new Set(Array.from(by_id.keys()))
546
+ );
547
+ this.register_loading_stati(by_id);
548
+ break submit_loop;
549
+ }
550
+
551
+ if (result.type === "log") {
552
+ this.handle_log(result);
553
+ }
554
+ }
555
+ all.forEach((dep_id) => {
556
+ this.dispatch({
557
+ type: "fn",
558
+ fn_index: dep_id,
559
+ event_data: null,
560
+ target_id: target_id as number | undefined
561
+ });
562
+ });
563
+ unset_args.forEach((fn) => fn());
564
+ this.submissions.delete(dep.id);
565
+
566
+ if (this.queue.has(dep.id)) {
567
+ this.queue.delete(dep.id);
568
+ this.dispatch(event_meta);
569
+ }
570
+ }
571
+ } catch (error) {
572
+ this.loading_stati.update({
573
+ status: "error",
574
+ fn_index: dep.id,
575
+ eta: 0,
576
+ queue: false,
577
+ stream_state: null
578
+ });
579
+ this.update_loading_stati_state();
580
+ this.submissions.delete(dep.id);
581
+ failure.forEach((dep_id) => {
582
+ this.dispatch({
583
+ type: "fn",
584
+ fn_index: dep_id,
585
+ event_data: null
586
+ });
587
+ });
588
+ }
589
+ }
590
+ }
591
+ return;
592
+ }
593
+
594
+ /**
595
+ * Creates a map of dependencies for easy lookup
596
+ *
597
+ * @param dependencies the list of dependencies from the backend
598
+ * @returns a map of dependencies keyed by `${event_name}-${target_id}`
599
+ * */
600
+ create(dependencies: IDependency[]): {
601
+ by_id: Map<number, Dependency>;
602
+ by_event: Map<string, Dependency[]>;
603
+ } {
604
+ const _deps_by_id = new Map<number, Dependency>();
605
+ const _deps_by_event = new Map<string, Dependency[]>();
606
+ const then_triggers: [number, number, "success" | "failure" | "all"][] = [];
607
+
608
+ for (const dep_config of dependencies) {
609
+ const dependency = new Dependency(dep_config);
610
+
611
+ for (const [target_id, event_name] of dep_config.targets) {
612
+ // if the key is already present, add it to the list. Otherwise, create a new element with the list
613
+ if (!_deps_by_event.has(`${event_name}-${target_id}`)) {
614
+ _deps_by_event.set(`${event_name}-${target_id}`, []);
615
+ }
616
+ _deps_by_event.get(`${event_name}-${target_id}`)?.push(dependency);
617
+ }
618
+
619
+ _deps_by_id.set(dep_config.id, dependency);
620
+
621
+ if (dep_config.trigger_after !== undefined) {
622
+ const then_mode = dep_config.trigger_only_on_failure
623
+ ? "failure"
624
+ : dep_config.trigger_only_on_success
625
+ ? "success"
626
+ : "all";
627
+
628
+ then_triggers.push([
629
+ dep_config.id,
630
+ dep_config.trigger_after,
631
+ then_mode
632
+ ]);
633
+ }
634
+ }
635
+
636
+ for (const [dep_id, trigger_after, condition] of then_triggers) {
637
+ const dependency = _deps_by_id.get(trigger_after);
638
+ if (dependency) {
639
+ dependency.add_trigger(dep_id, condition);
640
+ dependency.original_trigger_id = walk_after_to_original(
641
+ dependencies,
642
+ trigger_after
643
+ );
644
+ }
645
+ }
646
+
647
+ return { by_id: _deps_by_id, by_event: _deps_by_event };
648
+ }
649
+
650
+ handle_log(msg: LogMessage): void {
651
+ const { title, log, fn_index, level, duration, visible } = msg;
652
+
653
+ this.log_cb(title, log, fn_index, level, duration, visible);
654
+ }
655
+
656
+ /**
657
+ * Updates the state of the outputs based on the data received from the dependency
658
+ *
659
+ * @param outputs the ids of the output components
660
+ * @param data the data to update the components with
661
+ * */
662
+ async handle_data(outputs: number[], data: unknown[]) {
663
+ outputs.forEach(async (output_id, i) => {
664
+ const _data = data[i] === undefined ? NOVALUE : data[i];
665
+ if (_data === NOVALUE) return;
666
+
667
+ if (is_prop_update(_data)) {
668
+ let pending_visibility_update = false;
669
+ let pending_visibility_value = null;
670
+ for (const [update_key, update_value] of Object.entries(_data)) {
671
+ if (update_key === "__type__") continue;
672
+ if (update_key === "visible") {
673
+ pending_visibility_update = true;
674
+ pending_visibility_value = update_value;
675
+ continue;
676
+ }
677
+ await this.update_state_cb(
678
+ outputs[i],
679
+ {
680
+ [update_key]: update_value
681
+ },
682
+ false
683
+ );
684
+ }
685
+ if (pending_visibility_update) {
686
+ await this.update_state_cb(
687
+ outputs[i],
688
+ {
689
+ visible: pending_visibility_value
690
+ },
691
+ true
692
+ );
693
+ }
694
+ } else {
695
+ await this.update_state_cb(output_id, { value: _data }, false);
696
+ }
697
+ });
698
+ }
699
+
700
+ /**
701
+ * Gathers the current state of the inputs
702
+ *
703
+ * @param ids the ids of the components to gather state from
704
+ * @returns an array of the current state of the components, in the same order as the ids
705
+ */
706
+ async gather_state(ids: number[]): Promise<(unknown | null)[]> {
707
+ return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map(
708
+ (state) => {
709
+ return state?.value ?? null;
710
+ }
711
+ );
712
+ }
713
+
714
+ /** Sets the event arguments for a specific component
715
+ *
716
+ * @param id the id of the component to set the event arguments for
717
+ * @param args the event arguments to set
718
+ * @returns a function that can be called to reset the event arguments to their previous values
719
+ */
720
+ async set_event_args(
721
+ id: number,
722
+ args: Record<string, unknown>
723
+ ): Promise<() => void> {
724
+ let current_args: Record<string, unknown> = {};
725
+ const current_state = await this.get_state_cb(id);
726
+ for (const [key] of Object.entries(args)) {
727
+ current_args[key] = current_state?.[key] ?? null;
728
+ }
729
+
730
+ if (Object.keys(args).length === 0) {
731
+ return () => {
732
+ // do nothing
733
+ };
734
+ }
735
+
736
+ await this.update_state_cb(id, args, false);
737
+
738
+ return () => {
739
+ this.update_state_cb(id, current_args, false);
740
+ };
741
+ }
742
+
743
+ async cancel(ids: number[] | undefined): Promise<void> {
744
+ if (!ids) return;
745
+
746
+ for (const id of ids) {
747
+ const submission = this.submissions.get(id);
748
+ if (submission) {
749
+ await submission.cancel();
750
+ this.submissions.delete(id);
751
+ }
752
+ }
753
+ }
754
+
755
+ dispatch_load_events() {
756
+ this.dependencies_by_fn.forEach((dep) => {
757
+ dep.targets.forEach(([target_id, event_name]) => {
758
+ if (event_name === "load") {
759
+ this.dispatch({
760
+ type: "fn",
761
+ fn_index: dep.id,
762
+ event_data: null,
763
+ target_id: target_id
764
+ });
765
+ }
766
+ });
767
+ });
768
+ }
769
+
770
+ get_fns_from_targets(target_id: number): number[] {
771
+ const fn_indices: number[] = [];
772
+ this.dependencies_by_event.forEach((deps, key) => {
773
+ const [, dep_target_id] = key.split("-");
774
+ if (Number(dep_target_id) === target_id) {
775
+ deps.forEach((dep) => {
776
+ fn_indices.push(dep.id);
777
+ });
778
+ }
779
+ });
780
+ return fn_indices;
781
+ }
782
+
783
+ close_stream(id: number): void {
784
+ const fn_ids = this.get_fns_from_targets(id);
785
+
786
+ for (const fn_id of fn_ids) {
787
+ const submission = this.submissions.get(fn_id);
788
+ if (submission) {
789
+ submission.close_stream();
790
+ this.submissions.delete(fn_id);
791
+ }
792
+
793
+ this.loading_stati.update({
794
+ status: "complete",
795
+ fn_index: fn_id,
796
+ eta: 0,
797
+ queue: false,
798
+ stream_state: "closed"
799
+ });
800
+ }
801
+
802
+ this.update_loading_stati_state();
803
+ }
804
+ }
805
+
806
+ function is_prop_update(payload: unknown): payload is Record<string, unknown> {
807
+ return (
808
+ typeof payload === "object" &&
809
+ payload !== null &&
810
+ "__type__" in payload &&
811
+ payload?.__type__ === "update"
812
+ );
813
+ }
814
+
815
+ function should_dispatch(
816
+ mode: Dependency["trigger_modes"],
817
+ is_running: boolean
818
+ ): "run" | "skip" | "defer" {
819
+ if (!is_running) return "run";
820
+
821
+ if (mode === "always_last") {
822
+ return "defer";
823
+ } else if (mode === "multiple") {
824
+ return "run";
825
+ } else if (mode === "once") {
826
+ return "skip";
827
+ }
828
+ return "run";
829
+ }
830
+
831
+ /**
832
+ * Takes a string of source code and returns a function that can be called with arguments
833
+ * @param source the source code
834
+ * @param backend_fn if there is also a backend function
835
+ * @param input_length the number of inputs
836
+ * @param output_length the number of outputs
837
+ * @returns The function, or null if the source code is invalid or missing
838
+ */
839
+ export function process_frontend_fn(
840
+ source: string,
841
+ backend_fn: boolean,
842
+ input_length: number,
843
+ output_length: number
844
+ ): (...args: unknown[]) => Promise<unknown[]> {
845
+ const wrap = backend_fn ? input_length === 1 : output_length === 1;
846
+ try {
847
+ return new AsyncFunction(
848
+ "__fn_args",
849
+ ` let result = await (${source})(...__fn_args);
850
+ if (typeof result === "undefined") return [];
851
+ return (${wrap} && !Array.isArray(result)) ? [result] : result;`
852
+ );
853
+ } catch (e) {
854
+ throw e;
855
+ }
856
+ }
857
+
858
+ /**
859
+ * Walks the dependency graph to find the original trigger ID for a given dependency.
860
+ * @param dependency_map The map of all dependencies.
861
+ * @param dep_id The ID of the dependency to start from.
862
+ * @returns The ID of the original trigger dependency, or the input ID if not found.
863
+ */
864
+ function walk_after_to_original(dependency_map: IDependency[], dep_id: number) {
865
+ // TODO: hoist this cache later so it is useful across multiple calls
866
+ let cache = new Map<number, IDependency>();
867
+ let current_id = dep_id;
868
+ let safety_counter = 0;
869
+ while (safety_counter < 100) {
870
+ const dep =
871
+ cache.get(current_id) || dependency_map.find((d) => d.id === current_id);
872
+ if (!dep) break;
873
+ cache.set(dep.id, dep);
874
+ if (dep.trigger_after === null || dep.trigger_after === undefined) break;
875
+
876
+ current_id = dep.trigger_after;
877
+ safety_counter += 1;
878
+ }
879
+ return current_id;
880
+ }