@myko/ui-svelte 4.4.0 → 4.4.3

package/dist/services/svelte-client.svelte.js

@@ -0,0 +1,678 @@
+/**
+ * Svelte-friendly Myko client wrapper
+ *
+ * Provides reactive state using Svelte 5 runes and SvelteMap for efficient updates.
+ * Queries and reports are deduplicated - multiple calls with the same args share
+ * the same subscription and are only cancelled when all consumers unsubscribe.
+ */
+import { ConnectionStatus, MykoClient } from '@myko/core';
+import { SvelteMap } from 'svelte/reactivity';
+import { Subject } from 'rxjs';
+import { untrack } from 'svelte';
+function stableStringify(value) {
+    const seen = new WeakSet();
+    try {
+        return JSON.stringify(value, (_key, raw) => {
+            if (typeof raw === 'bigint') {
+                return `__bigint:${raw.toString()}`;
+            }
+            if (!raw || typeof raw !== 'object') {
+                return raw;
+            }
+            if (seen.has(raw)) {
+                return '__circular__';
+            }
+            seen.add(raw);
+            if (Array.isArray(raw)) {
+                return raw;
+            }
+            const sorted = {};
+            for (const key of Object.keys(raw).sort()) {
+                sorted[key] = raw[key];
+            }
+            return sorted;
+        });
+    }
+    catch {
+        return null;
+    }
+}
+function requestKey(kind, request) {
+    const serialized = stableStringify(request);
+    return serialized ? `${kind}:${serialized}` : null;
+}
+/**
+ * Svelte-friendly Myko client
+ *
+ * Wraps MykoClient to provide reactive Svelte state with automatic lifecycle management.
+ */
+export class SvelteMykoClient {
+    client;
+    // Command lifecycle subjects
+    commandSentSubject = new Subject();
+    commandSuccessSubject = new Subject();
+    commandErrorSubject = new Subject();
+    /** Observable of all commands when sent (before response) */
+    commandSent$ = this.commandSentSubject.asObservable();
+    /** Observable of all command successes */
+    commandSuccess$ = this.commandSuccessSubject.asObservable();
+    /** Observable of all command errors */
+    commandError$ = this.commandErrorSubject.asObservable();
+    // Reactive connection status
+    #connectionStatus = $state(ConnectionStatus.Disconnected);
+    // Reactive connection stats
+    #stats = $state(null);
+    statsSubscription = null;
+    constructor() {
+        this.client = new MykoClient();
+        // Sync connection status to reactive state
+        this.client.connectionStatus$.subscribe((status) => {
+            this.#connectionStatus = status;
+            // Start/stop stats subscription based on connection
+            if (status === ConnectionStatus.Connected && !this.statsSubscription) {
+                this.statsSubscription = this.client.stats().subscribe((stats) => {
+                    this.#stats = stats;
+                });
+            }
+            else if (status === ConnectionStatus.Disconnected && this.statsSubscription) {
+                this.statsSubscription.unsubscribe();
+                this.statsSubscription = null;
+                this.#stats = null;
+            }
+        });
+    }
+    /** Current connection status (reactive) */
+    get connectionStatus() {
+        return this.#connectionStatus;
+    }
+    /** Whether currently connected (reactive) */
+    get isConnected() {
+        return this.#connectionStatus === ConnectionStatus.Connected;
+    }
+    /** Current connection stats (reactive, null when disconnected) */
+    get stats() {
+        return this.#stats;
+    }
+    /** Set the server address and connect */
+    connect(address) {
+        this.client.setAddress(address);
+    }
+    /**
+     * Enable automatic peer discovery via GetPeerServers query.
+     * When enabled, the client will automatically add discovered peer servers
+     * to the connection pool for redundancy and load balancing.
+     */
+    enablePeerDiscovery(enabled, secure = false) {
+        this.client.enablePeerDiscovery(enabled, secure);
+    }
+    /** Set authentication token for commands */
+    setToken(token) {
+        this.client.setToken(token);
+    }
+    /** Disconnect from the server */
+    disconnect() {
+        // Unsubscribe stats
+        if (this.statsSubscription) {
+            this.statsSubscription.unsubscribe();
+            this.statsSubscription = null;
+            this.#stats = null;
+        }
+        this.client.disconnect();
+    }
+    /**
+     * Create a live report subscription with automatic lifecycle management.
+     *
+     * The subscription automatically:
+     * - Re-subscribes when dependencies in the factory function change
+     * - Cleans up when the component unmounts
+     * - No manual release() call needed
+     *
+     * If the factory returns null/undefined, no subscription is created and value remains undefined.
+     *
+     * IMPORTANT: Must be called during component initialization (in the <script> block),
+     * not inside event handlers or other callbacks.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   let { nodeId, sessionId } = $props()
+     *   const output = client.liveReport(() =>
+     *     sessionId ? new BindingNodeOutputValue({ nodeId, sessionId }) : null
+     *   )
+     * </script>
+     *
+     * <div>{output.value?.datagram.data}</div>
+     * ```
+     */
+    liveReport(factory) {
+        let value = $state(undefined);
+        let error = $state(undefined);
+        const reportKey = $derived.by(() => {
+            const report = factory();
+            if (!report)
+                return null;
+            return requestKey('report', report);
+        });
+        $effect(() => {
+            const key = reportKey;
+            const report = untrack(factory);
+            // If factory returns null/undefined, don't subscribe
+            if (!report) {
+                value = undefined;
+                error = undefined;
+                return;
+            }
+            if (!key) {
+                value = undefined;
+                error = new Error('Failed to compute stable report key');
+                return;
+            }
+            error = undefined;
+            const subscription = this.client.watchReport(report).subscribe({
+                next: (result) => {
+                    value = result;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            return () => subscription.unsubscribe();
+        });
+        return {
+            get value() {
+                return value;
+            },
+            get error() {
+                return error;
+            }
+        };
+    }
+    /**
+     * Create a live query subscription with automatic lifecycle management.
+     *
+     * The subscription automatically:
+     * - Re-subscribes when dependencies in the factory function change
+     * - Cleans up when the component unmounts
+     * - No manual release() call needed
+     *
+     * If the factory returns null/undefined, no subscription is created and items map is cleared.
+     *
+     * IMPORTANT: Must be called during component initialization (in the <script> block),
+     * not inside event handlers or other callbacks.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   let { sceneId } = $props()
+     *   const nodes = client.liveQuery(() =>
+     *     sceneId ? new GetBindingNodesByQuery({ sceneId }) : null
+     *   )
+     * </script>
+     *
+     * {#each nodes.items as [id, node] (id)}
+     *   <div>{node.name}</div>
+     * {/each}
+     * ```
+     */
+    liveQuery(factory) {
+        const items = new SvelteMap();
+        let resolved = $state(false);
+        let error = $state(undefined);
+        const queryKey = $derived.by(() => {
+            const query = factory();
+            if (!query)
+                return null;
+            return requestKey('query', query);
+        });
+        $effect(() => {
+            const key = queryKey;
+            const query = untrack(factory);
+            // If factory returns null/undefined, clear and don't subscribe
+            if (!query) {
+                items.clear();
+                resolved = false;
+                error = undefined;
+                return;
+            }
+            if (!key) {
+                items.clear();
+                resolved = false;
+                error = new Error('Failed to compute stable query key');
+                return;
+            }
+            error = undefined;
+            const subscription = this.client.watchQueryDiff(query).subscribe({
+                next: (diff) => {
+                    if (diff.sequence === 0n) {
+                        items.clear();
+                    }
+                    for (const id of diff.deletes) {
+                        items.delete(id);
+                    }
+                    for (const item of diff.upserts) {
+                        const typedItem = item;
+                        items.set(typedItem.id, typedItem);
+                    }
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            return () => {
+                subscription.unsubscribe();
+                items.clear();
+                resolved = false;
+            };
+        });
+        return {
+            items,
+            get resolved() {
+                return resolved;
+            },
+            get error() {
+                return error;
+            }
+        };
+    }
+    /** Create a live view subscription with automatic lifecycle management. */
+    liveView(factory) {
+        const items = new SvelteMap();
+        let resolved = $state(false);
+        let error = $state(undefined);
+        const viewKey = $derived.by(() => {
+            const view = factory();
+            if (!view)
+                return null;
+            return requestKey('view', view);
+        });
+        $effect(() => {
+            const key = viewKey;
+            const view = untrack(factory);
+            if (!view) {
+                items.clear();
+                resolved = false;
+                error = undefined;
+                return;
+            }
+            if (!key) {
+                items.clear();
+                resolved = false;
+                error = new Error('Failed to compute stable view key');
+                return;
+            }
+            error = undefined;
+            const subscription = this.client.watchViewDiff(view).subscribe({
+                next: (diff) => {
+                    if (diff.sequence === 0n) {
+                        items.clear();
+                    }
+                    for (const id of diff.deletes) {
+                        items.delete(id);
+                    }
+                    for (const item of diff.upserts) {
+                        const typedItem = item;
+                        items.set(typedItem.id, typedItem);
+                    }
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            return () => {
+                subscription.unsubscribe();
+                items.clear();
+                resolved = false;
+            };
+        });
+        return {
+            items,
+            get resolved() {
+                return resolved;
+            },
+            get error() {
+                return error;
+            }
+        };
+    }
+    /**
+     * Create a live windowed query with automatic lifecycle management.
+     *
+     * Uses server-side query windows while exposing Svelte-native reactive state.
+     */
+    liveQueryWindowed(factory, optionsFactory) {
+        let items = $state([]);
+        let totalCount = $state(null);
+        let window = $state(null);
+        let resolved = $state(false);
+        let error = $state(undefined);
+        let setWindowFn = () => { };
+        const queryWindowKey = $derived.by(() => {
+            const query = factory();
+            if (!query)
+                return null;
+            const q = requestKey('query', query);
+            const o = stableStringify(optionsFactory?.());
+            if (!q)
+                return null;
+            return `${q}|options:${o ?? '__none__'}`;
+        });
+        $effect(() => {
+            const key = queryWindowKey;
+            const query = untrack(factory);
+            const options = untrack(() => optionsFactory?.());
+            if (!query) {
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                error = undefined;
+                setWindowFn = () => { };
+                return;
+            }
+            if (!key) {
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                error = new Error('Failed to compute stable windowed query key');
+                setWindowFn = () => { };
+                return;
+            }
+            error = undefined;
+            resolved = false;
+            const handle = this.client.watchQueryWindowed(query, options);
+            setWindowFn = handle.setWindow;
+            const itemsSub = handle.results$.subscribe({
+                next: (next) => {
+                    items = next;
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            const infoSub = handle.windowInfo$.subscribe({
+                next: (info) => {
+                    totalCount = info.totalCount;
+                    window = info.window;
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            return () => {
+                itemsSub.unsubscribe();
+                infoSub.unsubscribe();
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                setWindowFn = () => { };
+            };
+        });
+        return {
+            get items() {
+                return items;
+            },
+            get totalCount() {
+                return totalCount;
+            },
+            get window() {
+                return window;
+            },
+            get resolved() {
+                return resolved;
+            },
+            get error() {
+                return error;
+            },
+            setWindow(nextWindow) {
+                setWindowFn(nextWindow);
+            }
+        };
+    }
+    /** Create a live windowed view with automatic lifecycle management. */
+    liveViewWindowed(factory, optionsFactory) {
+        let items = $state([]);
+        let totalCount = $state(null);
+        let window = $state(null);
+        let resolved = $state(false);
+        let error = $state(undefined);
+        let setWindowFn = () => { };
+        const viewWindowKey = $derived.by(() => {
+            const view = factory();
+            if (!view)
+                return null;
+            const v = requestKey('view', view);
+            const o = stableStringify(optionsFactory?.());
+            if (!v)
+                return null;
+            return `${v}|options:${o ?? '__none__'}`;
+        });
+        $effect(() => {
+            const key = viewWindowKey;
+            const view = untrack(factory);
+            const options = untrack(() => optionsFactory?.());
+            if (!view) {
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                error = undefined;
+                setWindowFn = () => { };
+                return;
+            }
+            if (!key) {
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                error = new Error('Failed to compute stable windowed view key');
+                setWindowFn = () => { };
+                return;
+            }
+            error = undefined;
+            resolved = false;
+            const handle = this.client.watchViewWindowed(view, options);
+            setWindowFn = handle.setWindow;
+            const itemsSub = handle.results$.subscribe({
+                next: (next) => {
+                    items = next;
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            const infoSub = handle.windowInfo$.subscribe({
+                next: (info) => {
+                    totalCount = info.totalCount;
+                    window = info.window;
+                    resolved = true;
+                    error = undefined;
+                },
+                error: (e) => {
+                    error = e instanceof Error ? e : new Error(String(e));
+                }
+            });
+            return () => {
+                itemsSub.unsubscribe();
+                infoSub.unsubscribe();
+                items = [];
+                totalCount = null;
+                window = null;
+                resolved = false;
+                setWindowFn = () => { };
+            };
+        });
+        return {
+            get items() {
+                return items;
+            },
+            get totalCount() {
+                return totalCount;
+            },
+            get window() {
+                return window;
+            },
+            get resolved() {
+                return resolved;
+            },
+            get error() {
+                return error;
+            },
+            setWindow(nextWindow) {
+                setWindowFn(nextWindow);
+            }
+        };
+    }
+    /**
+     * Watch a query with Observable-based updates.
+     *
+     * Returns an Observable that emits the full array of items whenever
+     * the result set changes.
+     *
+     * @deprecated Use `liveQuery()` for component usage. This method requires manual
+     * subscription management and doesn't integrate with Svelte's lifecycle.
+     * Only use for non-component contexts (e.g., context classes).
+     */
+    watchQuery(queryFactory) {
+        return this.client.watchQuery(queryFactory);
+    }
+    /**
+     * Watch a view with Observable-based updates.
+     *
+     * @deprecated Use `liveView()` for component usage. Kept for backward compatibility
+     * with existing service code paths that still consume observables.
+     */
+    watchView(viewFactory) {
+        return this.client.watchView(viewFactory);
+    }
+    /**
+     * Watch a query with optional server-side windowing.
+     *
+     * @deprecated Use `liveQuery()` (or `liveQueryWindowed()` for runes-native windowing)
+     * in component/service rune contexts.
+     */
+    watchQueryWithOptions(queryFactory, options) {
+        return this.client.watchQuery(queryFactory, options);
+    }
+    /**
+     * Watch a view with optional server-side windowing.
+     *
+     * @deprecated Use `liveView()` in component/service rune contexts.
+     */
+    watchViewWithOptions(viewFactory, options) {
+        return this.client.watchView(viewFactory, options);
+    }
+    /**
+     * Watch a query and mutate its server-side window without re-subscribing.
+     *
+     * @deprecated Use `liveQueryWindowed()` in component/service rune contexts.
+     */
+    watchQueryWindowed(queryFactory, options) {
+        return this.client.watchQueryWindowed(queryFactory, options);
+    }
+    /**
+     * Watch a view and mutate its server-side window without re-subscribing.
+     *
+     * @deprecated Use `liveView()` in component/service rune contexts.
+     */
+    watchViewWindowed(viewFactory, options) {
+        return this.client.watchViewWindowed(viewFactory, options);
+    }
+    /**
+     * Watch a report with Observable-based updates.
+     *
+     * Returns an Observable that emits whenever the report result changes.
+     *
+     * @deprecated Use `liveReport()` for component usage. This method requires manual
+     * subscription management and doesn't integrate with Svelte's lifecycle.
+     * Only use for non-component contexts (e.g., context classes).
+     */
+    watchReport(reportFactory) {
+        return this.client.watchReport(reportFactory);
+    }
+    /**
+     * Send a command and wait for the response.
+     *
+     * Emits to commandSuccess$ or commandError$ observables for generic handling.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     *   async function deleteMachine(id: string) {
+     *     const result = await myko.sendCommand(new DeleteMachine({ id }))
+     *     console.log('Deleted:', result)
+     *   }
+     * </script>
+     * ```
+     */
+    async sendCommand(commandFactory) {
+        const commandId = commandFactory.commandId;
+        this.commandSentSubject.next({ commandId });
+        try {
+            const response = await this.client.sendCommand(commandFactory);
+            this.commandSuccessSubject.next({ commandId, response });
+            return response;
+        }
+        catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            this.commandErrorSubject.next({ commandId, error });
+            throw e;
+        }
+    }
+    /** Access the underlying MykoClient for advanced use cases */
+    get raw() {
+        return this.client;
+    }
+    /** Measure round-trip latency */
+    ping() {
+        return this.client.ping();
+    }
+    /** Observable of all errors from the server */
+    get errors() {
+        return this.client.errors$;
+    }
+    /**
+     * Watch command completion status.
+     * Note: This is a compatibility shim - the underlying MykoClient doesn't track
+     * command completions the same way as the legacy WSMClient.
+     */
+    watchCommandStatus() {
+        // Return empty observable - command tracking is handled via sendCommand promises
+        return new Subject().asObservable();
+    }
+    /**
+     * Clear a command completion from tracking.
+     * Note: This is a compatibility shim - no-op in the new client.
+     */
+    clearCommandCompletion(_tx) {
+        // No-op - command tracking is handled via sendCommand promises
+    }
+}
+/** Global singleton client instance (auto-initialized) */
+export const myko = new SvelteMykoClient();
+// HMR cleanup - disconnect old client when module is hot-reloaded
+if (import.meta.hot) {
+    import.meta.hot.dispose(() => {
+        myko.disconnect();
+    });
+}
+/** Get the global MykoClient instance */
+export function getMykoClient() {
+    return myko;
+}
+/** Create a new SvelteMykoClient instance (non-singleton, for advanced use) */
+export function createMykoClient() {
+    return new SvelteMykoClient();
+}

package/dist/utils/entity-apply.d.ts

@@ -0,0 +1,17 @@
+import type { ExportedEntity, DiffStatus, FieldDiff } from './entity-diff.js';
+export interface ApplyPlan {
+    toSet: ExportedEntity[];
+    toDel: ExportedEntity[];
+}
+/**
+ * Compute the minimal SET/DEL operations to apply an import.
+ *
+ * @param diffs - Flat diff map from diffEntityLists()
+ * @param allFkFields - All FK field names used in BelongsTo relationships (for cascade detection)
+ * @param excluded - Optional set of "Type:id" keys to skip (user chose to keep current version)
+ */
+export declare function computeApplyPlan(diffs: Map<string, {
+    status: DiffStatus;
+    fields?: FieldDiff[];
+    entity: ExportedEntity;
+}>, allFkFields: string[], excluded?: Set<string>): ApplyPlan;