@tradecanvas/svelte 1.3.9 → 1.3.11

package/dist/TradeCanvas.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, untrack } from 'svelte';
   import {
     Chart,
     BinanceAdapter,
@@ -30,7 +30,12 @@
     chartType?: ChartType;
     /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */
     indicators?: IndicatorSpec[];
-    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */
+    /**
+     * Bars: the chart shows these, and opens no stream of its own when it has
+     * them at mount. A bar pushed onto the same array, or its last bar changed,
+     * goes in as a live tick (the view stays where it is); a new array is a new
+     * series. An older bar changed in place needs a new array.
+     */
     data?: OHLCBar[];
     adapter?: DataAdapter;
     /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */
@@ -91,6 +96,8 @@
   const indicatorIds = new Map<string, string>();
   /** The stream open now (`symbol|timeframe`), or null. */
   let streamKey: string | null = null;
+  /** The bars last given to the chart: the array, how many, and the last one as text. */
+  let fed: { bars: OHLCBar[]; length: number; last: string } | null = null;
   /** The features last applied, as text. */
   let featuresKey: string | null = null;
 
@@ -126,7 +133,7 @@
     chart = instance;
 
     if (data) {
-      instance.setData(data);
+      feed(instance, data);
     } else if (stream) {
       const dataAdapter = adapter ?? new BinanceAdapter();
       instance.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });
@@ -175,7 +182,42 @@
 
   $effect(() => { instance?.setTheme(resolveTheme(theme)); });
   $effect(() => { instance?.setChartType(chartType); });
-  $effect(() => { if (data) instance?.setData(data); });
+  const barKey = (b: OHLCBar | undefined) => (b ? `${b.time},${b.open},${b.high},${b.low},${b.close},${b.volume}` : '');
+  const plain = (b: OHLCBar) => $state.snapshot(b) as OHLCBar;
+
+  /**
+   * Bars into the chart: on the same array, a bar pushed or the last one
+   * changed goes in as a tick, so the view stays put and only the end is
+   * recalculated; anything else is a new series. The chart gets plain copies,
+   * not $state proxies, to read in its frames.
+   */
+  function feed(target: Chart, bars: OHLCBar[]): void {
+    const n = bars.length;
+    const last = barKey(bars[n - 1]);
+    const prev = fed;
+    fed = { bars, length: n, last };
+    if (prev && prev.bars === bars && prev.length > 0) {
+      if (n === prev.length) {
+        if (last !== prev.last) target.updateLastBar(plain(bars[n - 1]));
+        return;
+      }
+      if (n === prev.length + 1) {
+        target.updateLastBar(plain(bars[n - 2]));
+        target.appendBar(plain(bars[n - 1]));
+        return;
+      }
+    }
+    target.setData($state.snapshot(bars) as OHLCBar[]);
+  }
+
+  // Follows the array, its length and the last bar's fields: a bar pushed onto
+  // $state data or the forming bar changed, without walking every bar.
+  $effect(() => {
+    const bars = data;
+    if (!bars) return;
+    void barKey(bars[bars.length - 1]);
+    untrack(() => { if (instance) feed(instance, bars); });
+  });
 
   $effect(() => {
     const specs = $state.snapshot(indicators) as IndicatorSpec[];

package/dist/TradeCanvas.svelte.d.ts

@@ -7,7 +7,12 @@ interface Props {
     chartType?: ChartType;
     /** Indicators by id (`'rsi'`), or with their inputs (`{ id: 'ema', params: { period: 50 } }`). */
     indicators?: IndicatorSpec[];
-    /** Static bars: the chart shows these, and opens no stream of its own when it has them at mount. */
+    /**
+     * Bars: the chart shows these, and opens no stream of its own when it has
+     * them at mount. A bar pushed onto the same array, or its last bar changed,
+     * goes in as a live tick (the view stays where it is); a new array is a new
+     * series. An older bar changed in place needs a new array.
+     */
     data?: OHLCBar[];
     adapter?: DataAdapter;
     /** `false`: no stream until you say so (no Binance by default); the chart waits for `data`. Default `true`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradecanvas/svelte",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "type": "module",
   "description": "Svelte 5 component for @tradecanvas/chart — reactive props, runes, zero boilerplate.",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@tradecanvas/chart": "1.27.0"
+    "@tradecanvas/chart": "1.29.0"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"