@tradecanvas/svelte 1.0.10 → 1.0.13

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 TradeCanvas Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 TradeCanvas Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,44 +1,44 @@
-# @tradecanvas/svelte
-
-Svelte 5 component for [`@tradecanvas/chart`](https://www.npmjs.com/package/@tradecanvas/chart) — reactive props, runes, zero boilerplate.
-
-## Install
-
-```bash
-npm install @tradecanvas/svelte @tradecanvas/chart
-```
-
-`svelte` (>= 5) is a peer dependency.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import { TradeCanvas } from '@tradecanvas/svelte'
-  import type { Chart } from '@tradecanvas/chart'
-
-  let chart = $state<Chart | null>(null)
-</script>
-
-<div style="height: 500px">
-  <TradeCanvas
-    symbol="BTCUSDT"
-    timeframe="5m"
-    theme="dark"
-    indicators={['rsi', 'macd']}
-    bind:chart
-  />
-</div>
-```
-
-Streams live Binance data by default. Pass `data={bars}` for static OHLC, or `adapter={...}` for any feed. `bind:chart` gives you the underlying `Chart` (or use `onReady`).
-
-## Props
-
-`symbol`, `timeframe`, `theme`, `chartType`, `indicators`, `data`, `adapter`, `historyLimit`, `features`, `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `watermarkText`, `onReady`, and `bind:chart`.
-
-Reach the underlying `Chart` (drawings, trading, execution adapters, plugins, resizable panes) via `bind:chart` or `onReady`. See the [main docs](https://github.com/bonguynvan/tradecanvas).
-
-## License
-
-MIT
+# @tradecanvas/svelte
+
+Svelte 5 component for [`@tradecanvas/chart`](https://www.npmjs.com/package/@tradecanvas/chart) — reactive props, runes, zero boilerplate.
+
+## Install
+
+```bash
+npm install @tradecanvas/svelte @tradecanvas/chart
+```
+
+`svelte` (>= 5) is a peer dependency.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { TradeCanvas } from '@tradecanvas/svelte'
+  import type { Chart } from '@tradecanvas/chart'
+
+  let chart = $state<Chart | null>(null)
+</script>
+
+<div style="height: 500px">
+  <TradeCanvas
+    symbol="BTCUSDT"
+    timeframe="5m"
+    theme="dark"
+    indicators={['rsi', 'macd']}
+    bind:chart
+  />
+</div>
+```
+
+Streams live Binance data by default. Pass `data={bars}` for static OHLC, or `adapter={...}` for any feed. `bind:chart` gives you the underlying `Chart` (or use `onReady`).
+
+## Props
+
+`symbol`, `timeframe`, `theme`, `chartType`, `indicators`, `data`, `adapter`, `historyLimit`, `features`, `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `watermarkText`, `onReady`, and `bind:chart`.
+
+Reach the underlying `Chart` (drawings, trading, execution adapters, plugins, resizable panes) via `bind:chart` or `onReady`. See the [main docs](https://github.com/bonguynvan/tradecanvas).
+
+## License
+
+MIT

package/dist/TradeCanvas.svelte

@@ -1,164 +1,164 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import {
-    Chart,
-    BinanceAdapter,
-    DARK_THEME,
-    LIGHT_THEME,
-  } from '@tradecanvas/chart';
-  import type {
-    ChartType,
-    TimeFrame,
-    FeaturesConfig,
-    Theme,
-    OHLCBar,
-    SignalMarker,
-    TradeZone,
-    SignalMarkerStyle,
-    TradeZoneStyle,
-    DataAdapter,
-  } from '@tradecanvas/chart';
-
-  interface Props {
-    symbol?: string;
-    timeframe?: TimeFrame;
-    theme?: 'dark' | 'light' | Theme;
-    chartType?: ChartType;
-    indicators?: string[];
-    data?: OHLCBar[];
-    adapter?: DataAdapter;
-    historyLimit?: number;
-    features?: FeaturesConfig;
-    autoScale?: boolean;
-    signalMarkers?: SignalMarker[];
-    signalMarkerStyle?: SignalMarkerStyle;
-    tradeZones?: TradeZone[];
-    tradeZoneStyle?: TradeZoneStyle;
-    watermarkText?: string;
-    onReady?: (chart: Chart) => void;
-    chart?: Chart | null;
-  }
-
-  let {
-    symbol = 'BTCUSDT',
-    timeframe = '5m' as TimeFrame,
-    theme = 'dark' as 'dark' | 'light' | Theme,
-    chartType = 'candlestick' as ChartType,
-    indicators = [] as string[],
-    data = undefined as OHLCBar[] | undefined,
-    adapter = undefined as DataAdapter | undefined,
-    historyLimit = 500,
-    features = undefined as FeaturesConfig | undefined,
-    autoScale = true,
-    signalMarkers = undefined as SignalMarker[] | undefined,
-    signalMarkerStyle = undefined as SignalMarkerStyle | undefined,
-    tradeZones = undefined as TradeZone[] | undefined,
-    tradeZoneStyle = undefined as TradeZoneStyle | undefined,
-    watermarkText = undefined as string | undefined,
-    onReady = undefined as ((chart: Chart) => void) | undefined,
-    chart = $bindable(null) as Chart | null,
-  }: Props = $props();
-
-  function resolveTheme(t: 'dark' | 'light' | Theme): Theme {
-    if (t === 'dark') return DARK_THEME;
-    if (t === 'light') return LIGHT_THEME;
-    return t as Theme;
-  }
-
-  let container: HTMLDivElement;
-  let instance: Chart | null = null;
-  const indicatorIds = new Map<string, string>();
-  let prevSymbol = symbol;
-  let prevTimeframe = timeframe;
-
-  onMount(() => {
-    instance = new Chart(container, {
-      chartType,
-      theme: resolveTheme(theme),
-      autoScale,
-      rightMargin: 5,
-      crosshair: { mode: 'magnet' },
-      watermark: watermarkText
-        ? { text: watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }
-        : undefined,
-      features: {
-        drawings: true,
-        drawingMagnet: true,
-        drawingUndoRedo: true,
-        indicators: true,
-        trading: true,
-        volume: true,
-        legend: true,
-        crosshair: true,
-        keyboard: true,
-        screenshot: true,
-        alerts: true,
-        barCountdown: true,
-        logScale: true,
-        watermark: true,
-        ...features,
-      },
-    });
-
-    chart = instance;
-
-    if (data) {
-      instance.setData(data);
-    } else {
-      const dataAdapter = adapter ?? new BinanceAdapter();
-      instance.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });
-    }
-
-    onReady?.(instance);
-  });
-
-  onDestroy(() => {
-    if (instance) {
-      instance.disconnectStream();
-      instance.destroy();
-      instance = null;
-      chart = null;
-    }
-  });
-
-  $effect(() => {
-    if (!instance || data) return;
-    const _s = symbol;
-    const _tf = timeframe;
-    if (_s === prevSymbol && _tf === prevTimeframe) return;
-    prevSymbol = _s;
-    prevTimeframe = _tf;
-    instance.disconnectStream();
-    const dataAdapter = adapter ?? new BinanceAdapter();
-    instance.connect({ adapter: dataAdapter, symbol: _s, timeframe: _tf, historyLimit });
-    if (watermarkText) instance.setWatermark(watermarkText);
-  });
-
-  $effect(() => { instance?.setTheme(resolveTheme(theme)); });
-  $effect(() => { instance?.setChartType(chartType); });
-  $effect(() => { if (data) instance?.setData(data); });
-
-  $effect(() => {
-    if (!instance) return;
-    const desired = new Set(indicators);
-    for (const [name, instanceId] of indicatorIds) {
-      if (!desired.has(name)) {
-        instance.removeIndicator(instanceId);
-        indicatorIds.delete(name);
-      }
-    }
-    for (const name of indicators) {
-      if (!indicatorIds.has(name)) {
-        const instanceId = instance.addIndicator(name);
-        if (instanceId) indicatorIds.set(name, instanceId);
-      }
-    }
-  });
-
-  $effect(() => { if (signalMarkers) instance?.setSignalMarkers(signalMarkers); });
-  $effect(() => { if (signalMarkerStyle) instance?.setSignalMarkerStyle(signalMarkerStyle); });
-  $effect(() => { if (tradeZones) instance?.setTradeZones(tradeZones); });
-  $effect(() => { if (tradeZoneStyle) instance?.setTradeZoneStyle(tradeZoneStyle); });
-</script>
-
-<div bind:this={container} style="width:100%;height:100%"></div>
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import {
+    Chart,
+    BinanceAdapter,
+    DARK_THEME,
+    LIGHT_THEME,
+  } from '@tradecanvas/chart';
+  import type {
+    ChartType,
+    TimeFrame,
+    FeaturesConfig,
+    Theme,
+    OHLCBar,
+    SignalMarker,
+    TradeZone,
+    SignalMarkerStyle,
+    TradeZoneStyle,
+    DataAdapter,
+  } from '@tradecanvas/chart';
+
+  interface Props {
+    symbol?: string;
+    timeframe?: TimeFrame;
+    theme?: 'dark' | 'light' | Theme;
+    chartType?: ChartType;
+    indicators?: string[];
+    data?: OHLCBar[];
+    adapter?: DataAdapter;
+    historyLimit?: number;
+    features?: FeaturesConfig;
+    autoScale?: boolean;
+    signalMarkers?: SignalMarker[];
+    signalMarkerStyle?: SignalMarkerStyle;
+    tradeZones?: TradeZone[];
+    tradeZoneStyle?: TradeZoneStyle;
+    watermarkText?: string;
+    onReady?: (chart: Chart) => void;
+    chart?: Chart | null;
+  }
+
+  let {
+    symbol = 'BTCUSDT',
+    timeframe = '5m' as TimeFrame,
+    theme = 'dark' as 'dark' | 'light' | Theme,
+    chartType = 'candlestick' as ChartType,
+    indicators = [] as string[],
+    data = undefined as OHLCBar[] | undefined,
+    adapter = undefined as DataAdapter | undefined,
+    historyLimit = 500,
+    features = undefined as FeaturesConfig | undefined,
+    autoScale = true,
+    signalMarkers = undefined as SignalMarker[] | undefined,
+    signalMarkerStyle = undefined as SignalMarkerStyle | undefined,
+    tradeZones = undefined as TradeZone[] | undefined,
+    tradeZoneStyle = undefined as TradeZoneStyle | undefined,
+    watermarkText = undefined as string | undefined,
+    onReady = undefined as ((chart: Chart) => void) | undefined,
+    chart = $bindable(null) as Chart | null,
+  }: Props = $props();
+
+  function resolveTheme(t: 'dark' | 'light' | Theme): Theme {
+    if (t === 'dark') return DARK_THEME;
+    if (t === 'light') return LIGHT_THEME;
+    return t as Theme;
+  }
+
+  let container: HTMLDivElement;
+  let instance: Chart | null = null;
+  const indicatorIds = new Map<string, string>();
+  let prevSymbol = symbol;
+  let prevTimeframe = timeframe;
+
+  onMount(() => {
+    instance = new Chart(container, {
+      chartType,
+      theme: resolveTheme(theme),
+      autoScale,
+      rightMargin: 5,
+      crosshair: { mode: 'magnet' },
+      watermark: watermarkText
+        ? { text: watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' }
+        : undefined,
+      features: {
+        drawings: true,
+        drawingMagnet: true,
+        drawingUndoRedo: true,
+        indicators: true,
+        trading: true,
+        volume: true,
+        legend: true,
+        crosshair: true,
+        keyboard: true,
+        screenshot: true,
+        alerts: true,
+        barCountdown: true,
+        logScale: true,
+        watermark: true,
+        ...features,
+      },
+    });
+
+    chart = instance;
+
+    if (data) {
+      instance.setData(data);
+    } else {
+      const dataAdapter = adapter ?? new BinanceAdapter();
+      instance.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });
+    }
+
+    onReady?.(instance);
+  });
+
+  onDestroy(() => {
+    if (instance) {
+      instance.disconnectStream();
+      instance.destroy();
+      instance = null;
+      chart = null;
+    }
+  });
+
+  $effect(() => {
+    if (!instance || data) return;
+    const _s = symbol;
+    const _tf = timeframe;
+    if (_s === prevSymbol && _tf === prevTimeframe) return;
+    prevSymbol = _s;
+    prevTimeframe = _tf;
+    instance.disconnectStream();
+    const dataAdapter = adapter ?? new BinanceAdapter();
+    instance.connect({ adapter: dataAdapter, symbol: _s, timeframe: _tf, historyLimit });
+    if (watermarkText) instance.setWatermark(watermarkText);
+  });
+
+  $effect(() => { instance?.setTheme(resolveTheme(theme)); });
+  $effect(() => { instance?.setChartType(chartType); });
+  $effect(() => { if (data) instance?.setData(data); });
+
+  $effect(() => {
+    if (!instance) return;
+    const desired = new Set(indicators);
+    for (const [name, instanceId] of indicatorIds) {
+      if (!desired.has(name)) {
+        instance.removeIndicator(instanceId);
+        indicatorIds.delete(name);
+      }
+    }
+    for (const name of indicators) {
+      if (!indicatorIds.has(name)) {
+        const instanceId = instance.addIndicator(name);
+        if (instanceId) indicatorIds.set(name, instanceId);
+      }
+    }
+  });
+
+  $effect(() => { if (signalMarkers) instance?.setSignalMarkers(signalMarkers); });
+  $effect(() => { if (signalMarkerStyle) instance?.setSignalMarkerStyle(signalMarkerStyle); });
+  $effect(() => { if (tradeZones) instance?.setTradeZones(tradeZones); });
+  $effect(() => { if (tradeZoneStyle) instance?.setTradeZoneStyle(tradeZoneStyle); });
+</script>
+
+<div bind:this={container} style="width:100%;height:100%"></div>

package/package.json

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