@myko/ui-svelte 4.8.1 → 4.11.0

package/dist/index.d.ts

@@ -15,4 +15,4 @@ export * from './utils/entity-diff';
 export * from './utils/entity-tree';
 export * from './utils/entity-apply';
 export { createMykoClient, getMykoClient, myko, myko as client, SvelteMykoClient, type CommandError, type CommandSuccess, type LiveQuery, type LiveReport } from './services/svelte-client.svelte';
-export { ConnectionStatus, type ClientStats } from '@myko/core';
+export { ConnectionStatus, MykoProtocol, type ClientStats } from '@myko/core';

package/dist/index.js

@@ -19,4 +19,4 @@ export * from './utils/entity-apply';
 // Svelte-friendly Myko client
 export { createMykoClient, getMykoClient, myko, myko as client, SvelteMykoClient } from './services/svelte-client.svelte';
 // Re-export useful types from @myko/core
-export { ConnectionStatus } from '@myko/core';
+export { ConnectionStatus, MykoProtocol } from '@myko/core';

package/dist/services/svelte-client.svelte.d.ts

@@ -5,7 +5,7 @@
  * 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, type ClientStats, type Command, type CommandResult, type MykoError, type Query, type QueryWindow, type QueryWatchOptions, type QueryItem, type QueryWindowInfo, type QueryResult, type View, type ViewItem, type ViewResult, type Report, type ReportResult } from '@myko/core';
+import { ConnectionStatus, MykoClient, MykoProtocol, type ClientStats, type Command, type CommandResult, type MykoError, type Query, type QueryWindow, type QueryWatchOptions, type QueryItem, type QueryWindowInfo, type QueryResult, type View, type ViewItem, type ViewResult, type Report, type ReportResult } from '@myko/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { type Observable } from 'rxjs';
 /** Command sent event (before response) */
@@ -107,6 +107,8 @@ export declare class SvelteMykoClient {
     enablePeerDiscovery(enabled: boolean, secure?: boolean): void;
     /** Set authentication token for commands */
     setToken(token: string | null): void;
+    /** Set the wire protocol (JSON or CBOR). Default is JSON. */
+    setProtocol(protocol: MykoProtocol): void;
     /** Disconnect from the server */
     disconnect(): void;
     /**

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

@@ -5,7 +5,7 @@
  * 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 { ConnectionStatus, MykoClient, MykoProtocol } from '@myko/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { Subject } from 'rxjs';
 import { untrack } from 'svelte';
@@ -41,6 +41,62 @@ function requestKey(kind, request) {
     const serialized = stableStringify(request);
     return serialized ? `${kind}:${serialized}` : null;
 }
+/**
+ * Frame-paced callback dispatcher for incoming report values.
+ *
+ * Default behaviour: every queued callback runs on the next animation frame.
+ * This already coalesces multiple updates per anchor into a single Svelte
+ * effect cascade per frame and combines bursts spanning several WS frames.
+ *
+ * Burst handling: when the queue grows past `BURST_THRESHOLD` (i.e. an
+ * initial scene load lands hundreds of pending updates at once), the flush
+ * processes only `BURST_BATCH` callbacks per frame and reschedules the rest.
+ * That spreads the cost across multiple frames so the main thread can paint
+ * between chunks. Steady-state high-frequency updates stay below the
+ * threshold and run every frame with no added lag.
+ *
+ * This logic belongs in the Svelte client (browser-specific) — the core
+ * MykoClient stays runtime-agnostic.
+ */
+const BURST_THRESHOLD = 96;
+const BURST_BATCH = 32;
+let pendingValueCallbacks = [];
+let valueFlushScheduled = false;
+function scheduleFlush() {
+    if (valueFlushScheduled)
+        return;
+    valueFlushScheduled = true;
+    if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(flushPendingValues);
+    }
+    else {
+        setTimeout(flushPendingValues, 0);
+    }
+}
+function scheduleValueDispatch(cb) {
+    pendingValueCallbacks.push(cb);
+    scheduleFlush();
+}
+function flushPendingValues() {
+    valueFlushScheduled = false;
+    if (pendingValueCallbacks.length <= BURST_THRESHOLD) {
+        // Normal path: process everything queued this frame. Per-anchor
+        // coalescing in liveReport keeps the queue size proportional to the
+        // number of distinct anchors with new data, so this scales naturally.
+        const drained = pendingValueCallbacks;
+        pendingValueCallbacks = [];
+        for (const cb of drained)
+            cb();
+        return;
+    }
+    // Burst: spread across multiple frames so the user sees mounted nodes
+    // before the entire value cascade lands.
+    const batch = pendingValueCallbacks.splice(0, BURST_BATCH);
+    for (const cb of batch)
+        cb();
+    if (pendingValueCallbacks.length > 0)
+        scheduleFlush();
+}
 /**
  * Svelte-friendly Myko client
  *
@@ -109,6 +165,10 @@ export class SvelteMykoClient {
     setToken(token) {
         this.client.setToken(token);
     }
+    /** Set the wire protocol (JSON or CBOR). Default is JSON. */
+    setProtocol(protocol) {
+        this.client.setProtocol(protocol);
+    }
     /** Disconnect from the server */
     disconnect() {
         // Unsubscribe stats
@@ -153,10 +213,18 @@ export class SvelteMykoClient {
                 return null;
             return requestKey('report', report);
         });
+        // Use the direct-callback subscribeReport instead of `watchReport().subscribe`.
+        // The Observable form wraps the per-tx Subject in `pipe(map, finalize,
+        // shareReplay, map)` — each subscriber walks that operator chain on
+        // subscribe, and a workspace with hundreds of anchor views was paying
+        // measurable cost in RxJS plumbing during scene mount.
+        //
+        // Cell writes (`value = result`) are routed through the frame-paced
+        // dispatcher so a burst of incoming responses doesn't all cascade
+        // through Svelte effects in a single task.
         $effect(() => {
             const key = reportKey;
             const report = untrack(factory);
-            // If factory returns null/undefined, don't subscribe
             if (!report) {
                 value = undefined;
                 error = undefined;
@@ -168,16 +236,32 @@ export class SvelteMykoClient {
                 return;
             }
             error = undefined;
-            const subscription = this.client.watchReport(report).subscribe({
-                next: (result) => {
-                    value = result;
+            let disposed = false;
+            let latestResult = undefined;
+            let hasPending = false;
+            const dispose = this.client.subscribeReport(report, (result) => {
+                if (disposed)
+                    return;
+                latestResult = result;
+                if (hasPending)
+                    return;
+                hasPending = true;
+                scheduleValueDispatch(() => {
+                    hasPending = false;
+                    if (disposed)
+                        return;
+                    value = latestResult;
                     error = undefined;
-                },
-                error: (e) => {
-                    error = e instanceof Error ? e : new Error(String(e));
-                }
+                });
+            }, (e) => {
+                if (disposed)
+                    return;
+                error = e;
             });
-            return () => subscription.unsubscribe();
+            return () => {
+                disposed = true;
+                dispose();
+            };
         });
         return {
             get value() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@myko/core": "^4.8.1",
+    "@myko/core": "^4.11.0",
     "luxon": "^3.5.0",
     "ramda": "^0.30.1",
     "rxjs": "^7.8.1",
@@ -64,7 +64,7 @@
     "**/*.css"
   ],
   "type": "module",
-  "version": "4.8.1",
+  "version": "4.11.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts"
 }