@tradecanvas/svelte 1.0.0

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +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

package/dist/TradeCanvas.svelte

@@ -0,0 +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>

package/dist/TradeCanvas.svelte.d.ts

@@ -0,0 +1,24 @@
+import { Chart } 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;
+}
+declare const TradeCanvas: import("svelte").Component<Props, {}, "chart">;
+type TradeCanvas = ReturnType<typeof TradeCanvas>;
+export default TradeCanvas;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as TradeCanvas } from './TradeCanvas.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as TradeCanvas } from './TradeCanvas.svelte';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@tradecanvas/svelte",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Svelte 5 component for @tradecanvas/chart — reactive props, runes, zero boilerplate.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bonguynvan/tradecanvas.git",
+    "directory": "packages/svelte"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "trading",
+    "chart",
+    "svelte",
+    "svelte5",
+    "candlestick",
+    "canvas",
+    "technical-analysis"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@tradecanvas/chart": "1.0.1"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/svelte": "^5.2.4",
+    "jsdom": "^25.0.1",
+    "svelte": "^5.20.0",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "build": "svelte-package -i src",
+    "dev": "svelte-package -i src --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run"
+  }
+}