82: series primitive component

src/package/components/internal/utils.ts

@@ -3,12 +3,14 @@ import type {PriceLineActionResult, PriceLineParams} from '../../internal/lines'
 import type {Reference} from '../../internal/utils.js';
 import type {PriceScaleActionResult, PriceScaleParams} from '../../internal/price-scale';
 import type {TimeScaleActionResult, TimeScaleParams} from '../../internal/time-scale';
+import type {SeriesPrimitiveActionResult, SeriesPrimitiveParams} from '../../internal/series-primitive';
 
 import {afterUpdate, getContext, onMount, setContext} from 'svelte';
 import {series, SeriesActionResult, SeriesParams} from '../../internal/series.js';
 import {line} from '../../internal/lines.js';
 import {timeScale} from '../../internal/time-scale.js';
 import {priceScale} from '../../internal/price-scale.js';
+import {seriesPrimitive} from '../../internal/series-primitive.js';
 
 export type Context = IChartApi | ISeriesApi<SeriesType>;
 
@@ -109,3 +111,24 @@ export function usePriceScaleEffect(callback: () => [params: PriceScaleParams, r
         subject?.updateReference(ref);
     });
 }
+
+export function useSeriesPrimitiveEffect<S extends SeriesType, T = Time>(callback: () => [params: SeriesPrimitiveParams<T>]): void {
+    let subject: SeriesPrimitiveActionResult<T> | null = null;
+
+    const api = context<ISeriesApi<S>>();
+
+    onMount(() => {
+        const [params] = callback();
+        subject = seriesPrimitive<S, T>(api as unknown as ISeriesApi<S, T>, params);
+
+        return () => {
+            subject?.destroy();
+            subject = null;
+        }
+    });
+
+    afterUpdate(() => {
+        const [params] = callback();
+        subject?.update(params);
+    });
+}

src/package/components/series-primitive.interface.ts

@@ -0,0 +1,10 @@
+import type {Time, ISeriesPrimitive} from 'lightweight-charts';
+
+export interface $$PROPS<T = Time> {
+    view: ISeriesPrimitive<T>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface $$EVENTS {
+
+}

src/package/components/series-primitive.svelte

@@ -0,0 +1,11 @@
+<svelte:options immutable={true}/>
+
+<script lang="ts">
+    import type {$$PROPS} from './series-primitive.interface.js';
+
+    import {useSeriesPrimitiveEffect} from './internal/utils.js';
+
+    export let view: $$PROPS['view'];
+
+    useSeriesPrimitiveEffect(() => [{ view }]);
+</script>

src/package/index.ts

@@ -9,6 +9,7 @@ export {default as CustomSeries} from './components/custom-series.svelte';
 export {default as PriceLine} from './components/price-line.svelte';
 export {default as PriceScale} from './components/price-scale.svelte';
 export {default as TimeScale} from './components/time-scale.svelte';
+export {default as SeriesPrimitiv} from './components/series-primitive.svelte';
 
 export type {$$PROPS as ChartProps, $$EVENTS as ChartEventArgs, $$EVENTS_DETAIL as ChartEventDetails} from './components/chart.interface.js';
 export type {$$PROPS as AreaSeriesProps} from './components/area-series.interface.js';
@@ -21,4 +22,5 @@ export type {$$PROPS as CustomSeriesProps} from './components/custom-series.inte
 export type {$$PROPS as PriceLineProps} from './components/price-line.interface.js';
 export type {$$PROPS as PriceScaleProps} from './components/price-scale.interface.js';
 export type {$$PROPS as TimeScaleProps, $$EVENTS as TimeScaleEventArgs, $$EVENTS_DETAIL as TimeScaleEventDetails} from './components/time-scale.interface.js';
+export type {$$PROPS as SeriesPrimitiveProps} from './components/series-primitive.interface.js';
 export type {Reference} from './internal/utils.js';

src/package/internal/series-primitive.ts

@@ -0,0 +1,29 @@
+import type {ISeriesApi, ISeriesPrimitive, SeriesType, Time} from 'lightweight-charts';
+import type {ActionResult} from './utils.js';
+
+export interface SeriesPrimitiveParams<T = Time> {
+    view: ISeriesPrimitive<T>;
+}
+
+export type SeriesPrimitiveActionResult<T = Time> = ActionResult<SeriesPrimitiveParams<T>>;
+
+export function seriesPrimitive<S extends SeriesType, T = Time>(
+    target: ISeriesApi<S, T>,
+    params: SeriesPrimitiveParams<T>
+): SeriesPrimitiveActionResult<T> {
+    let { view } = params;
+    target.attachPrimitive(view);
+
+    return {
+        update(nextParams: SeriesPrimitiveParams<T>): void {
+            if (nextParams.view !== view) {
+                target.detachPrimitive(view);
+                view = nextParams.view;
+                target.attachPrimitive(view);
+            }
+        },
+        destroy(): void {
+            target.detachPrimitive(view);
+        }
+    };
+}