svelte-plotly.js 1.2.0 → 2.0.0

package/dist/Plot.svelte

@@ -1,141 +1,317 @@
-<script context="module"></script>
-
-<script>import { onMount, onDestroy, createEventDispatcher } from "svelte";
-import { debounce as debouncify } from "lodash-es";
-const browser = typeof window === "object";
-const nextFrame = browser ? requestAnimationFrame : () => void 0;
-async function loadPlotly() {
-  if (!browser) return;
-  if (libPlotly === void 0) {
+<script context="module" lang="ts">
+  import type {
+    Data,
+    Layout,
+    Config,
+    PlotlyHTMLElement,
+    BeforePlotEvent,
+    ClickAnnotationEvent,
+    FrameAnimationEvent,
+    LegendClickEvent,
+    PlotMouseEvent,
+    PlotHoverEvent,
+    PlotRelayoutEvent,
+    PlotRestyleEvent,
+    PlotSelectionEvent,
+    SliderEndEvent,
+    SliderChangeEvent,
+    SliderStartEvent,
+    SunburstClickEvent
+  } from 'plotly.js';
+
+  export type {
+    Data,
+    Layout,
+    Config,
+    PlotlyHTMLElement,
+    BeforePlotEvent,
+    ClickAnnotationEvent,
+    FrameAnimationEvent,
+    LegendClickEvent,
+    PlotMouseEvent,
+    PlotHoverEvent,
+    PlotRelayoutEvent,
+    PlotRestyleEvent,
+    PlotSelectionEvent,
+    SliderChangeEvent,
+    SliderStartEvent,
+    SunburstClickEvent
+  };
+
+  export type FillParent = boolean | 'width' | 'height';
+  import type { DebounceSettings } from 'lodash-es';
+
+  export interface DebounceOptions extends DebounceSettings {
+    wait: number;
+  }
+
+  export interface ButtonClickedEvent {
+    menu: any;
+    button: any;
+    active: any;
+  }
+
+  export interface PlotUpdateEvent {
+    data: Data;
+    layout: Layout;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+  import { debounce as debouncify } from 'lodash-es';
+  const browser = typeof window === 'object';
+
+  const nextFrame = browser ? requestAnimationFrame : () => void 0;
+
+  async function loadPlotly() {
+    if (!browser || libPlotly) return;
+
     if (window.Plotly) {
       libPlotly = window.Plotly;
     } else {
-      const p = await import("plotly.js-dist");
-      if (libPlotly === void 0) libPlotly = "default" in p ? p.default : p;
+      const p = await import('plotly.js-dist');
+      if (libPlotly === undefined) libPlotly = 'default' in p ? p.default : p;
     }
   }
-}
-const DEFAULT_WIDTH = 500;
-const DEFAULT_HEIGHT = 300;
-const events = {
-  plotly_afterexport: "afterExport",
-  plotly_afterplot: "afterPlot",
-  plotly_animated: "animated",
-  plotly_animating: "animating",
-  plotly_animatingframe: "animatingFrame",
-  plotly_animationinterrupted: "animationInterrupted",
-  plotly_autosize: "autoSize",
-  plotly_beforeexport: "beforeExport",
-  plotly_beforehover: "beforeHover",
-  plotly_beforeplot: "beforePlot",
-  plotly_buttonclicked: "buttonClicked",
-  plotly_click: "click",
-  plotly_clickannotation: "clickAnnotation",
-  plotly_deselect: "deselect",
-  plotly_doubleclick: "doubleClick",
-  plotly_framework: "framework",
-  plotly_hover: "hover",
-  plotly_legendclick: "legendClick",
-  plotly_legenddoubleclick: "legendDoubleClick",
-  plotly_react: "react",
-  plotly_redraw: "redraw",
-  plotly_relayout: "relayout",
-  plotly_relayouting: "relayouting",
-  plotly_restyle: "restyle",
-  plotly_selected: "selected",
-  plotly_selecting: "selecting",
-  plotly_sliderchange: "sliderChange",
-  plotly_sliderend: "sliderEnd",
-  plotly_sliderstart: "sliderStart",
-  plotly_sunburstclick: "sunburstClick",
-  plotly_transitioned: "transitioned",
-  plotly_transitioning: "transitioning",
-  plotly_transitioninterrupted: "transitionInterrupted",
-  plotly_unhover: "unhover",
-  plotly_update: "update",
-  plotly_webglcontextlost: "webGLContextLost"
-  // TODO add all plotly_${traceType}click
-};
-const dispatch = createEventDispatcher();
-export let element = void 0;
-export let plot = void 0;
-export let libPlotly = void 0;
-export let data;
-export let layout = void 0;
-export let config = void 0;
-export let fillParent = false;
-export let debounce = 0;
-export let configReactivityStrategy = "static-plot";
-let className = "";
-export { className as class };
-onMount(async () => {
-  window.global = window;
-  await loadPlotly();
-});
-let datarevision = 0;
-let previousLib = libPlotly;
-let previousPlot = plot;
-let width = DEFAULT_WIDTH;
-let height = DEFAULT_HEIGHT;
-$: debounceWait = typeof debounce === "object" ? debounce.wait : debounce ?? 0;
-$: debounceOptions = typeof debounce === "object" ? debounce : {};
-$: data, datarevision = (datarevision + 1) % 1e3;
-$: layout_ = { datarevision, width, height, ...layout };
-$: config_ = { displaylogo: false, ...config };
-let configUpdated = false;
-$: config_, configUpdated = true;
-$: {
-  if (element && previousLib !== libPlotly) {
-    previousLib?.purge(element);
-    plot = void 0;
+
+  const DEFAULT_WIDTH = 500;
+  const DEFAULT_HEIGHT = 300;
+
+  // events
+  interface Events {
+    afterExport: undefined;
+    afterPlot: undefined;
+    animated: undefined;
+    animating: undefined;
+    animatingFrame: FrameAnimationEvent;
+    animationInterrupted: undefined;
+    autoSize: undefined;
+    beforeExport: undefined;
+    beforeHover: PlotMouseEvent;
+    beforePlot: BeforePlotEvent;
+    buttonClicked: ButtonClickedEvent;
+    click: PlotMouseEvent;
+    clickAnnotation: ClickAnnotationEvent;
+    deselect: undefined;
+    doubleClick: undefined;
+    framework: undefined;
+    hover: PlotHoverEvent;
+    legendClick: LegendClickEvent;
+    legendDoubleClick: LegendClickEvent;
+    react: PlotUpdateEvent;
+    redraw: undefined;
+    relayout: PlotRelayoutEvent;
+    relayouting: PlotRelayoutEvent;
+    restyle: PlotRestyleEvent;
+    selected: PlotSelectionEvent;
+    selecting: PlotSelectionEvent;
+    sliderChange: SliderChangeEvent;
+    sliderEnd: SliderEndEvent;
+    sliderStart: SliderStartEvent;
+    sunburstClick: SunburstClickEvent;
+    transitioned: undefined;
+    transitioning: undefined;
+    transitionInterrupted: undefined;
+    unhover: PlotMouseEvent;
+    update: PlotUpdateEvent;
+    webGLContextLost: undefined;
   }
-  previousLib = libPlotly;
-  loadPlotly();
-}
-$: if (previousPlot !== plot) {
-  for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
-    previousPlot?.removeAllListeners?.(plotlyEvent);
-    plot?.on(plotlyEvent, (e) => dispatch(svelteEvent, e));
+  const events = <const>{
+    plotly_afterexport: 'afterExport',
+    plotly_afterplot: 'afterPlot',
+    plotly_animated: 'animated',
+    plotly_animating: 'animating',
+    plotly_animatingframe: 'animatingFrame',
+    plotly_animationinterrupted: 'animationInterrupted',
+    plotly_autosize: 'autoSize',
+    plotly_beforeexport: 'beforeExport',
+    plotly_beforehover: 'beforeHover',
+    plotly_beforeplot: 'beforePlot',
+    plotly_buttonclicked: 'buttonClicked',
+    plotly_click: 'click',
+    plotly_clickannotation: 'clickAnnotation',
+    plotly_deselect: 'deselect',
+    plotly_doubleclick: 'doubleClick',
+    plotly_framework: 'framework',
+    plotly_hover: 'hover',
+    plotly_legendclick: 'legendClick',
+    plotly_legenddoubleclick: 'legendDoubleClick',
+    plotly_react: 'react',
+    plotly_redraw: 'redraw',
+    plotly_relayout: 'relayout',
+    plotly_relayouting: 'relayouting',
+    plotly_restyle: 'restyle',
+    plotly_selected: 'selected',
+    plotly_selecting: 'selecting',
+    plotly_sliderchange: 'sliderChange',
+    plotly_sliderend: 'sliderEnd',
+    plotly_sliderstart: 'sliderStart',
+    plotly_sunburstclick: 'sunburstClick',
+    plotly_transitioned: 'transitioned',
+    plotly_transitioning: 'transitioning',
+    plotly_transitioninterrupted: 'transitionInterrupted',
+    plotly_unhover: 'unhover',
+    plotly_update: 'update',
+    plotly_webglcontextlost: 'webGLContextLost'
+    // TODO add all plotly_${traceType}click
+  };
+  const dispatch = createEventDispatcher<Events>();
+
+  //
+  // Bind Props
+  /** The HTML element wrapping the plot. */
+  export let element: HTMLDivElement | undefined = undefined;
+  /** The inner HTML element containing the plot. */
+  export let plot: PlotlyHTMLElement | undefined = undefined;
+
+  //
+  // Input Props
+
+  /**
+   * Alternative Plotly bundle to use. If `undefined`, it defaults to
+   * the `plotly.js-dist` package; if null, no plot will be drawn and
+   * no library will be downloaded.
+   */
+  export let libPlotly: typeof import('plotly.js-dist') | null | undefined = undefined;
+
+  /**
+   * Array of trace data, see https://plot.ly/javascript/reference/
+   */
+  export let data: Data[];
+
+  /**
+   * Layout of the plot, see https://plot.ly/javascript/reference/#layout
+   */
+  export let layout: Partial<Layout> | undefined = undefined;
+
+  /**
+   * Configuration, see https://plot.ly/javascript/configuration-options/
+   */
+  export let config: Partial<Config> | undefined = undefined;
+
+  /**
+   * Automatically resize the plot to fill the width and/or
+   * height of its parent element.
+   */
+  export let fillParent: FillParent = false;
+
+  /**
+   * Debounce all changes to the plot.
+   */
+  export let debounce: number | DebounceOptions = 0;
+
+  /**
+   * Because of an [upstream bug](https://github.com/m93a/svelte-plotly.js/issues/10),
+   * changes in the `config` prop don't always render.
+   * This prop enables a walkaround, which makes sure
+   * that changes in `config` just work.
+   *
+   * - `'static-plot'` – when changing `config`, briefly disable
+   * chart interactivity to force update
+   *
+   * - `'none'` – disable the walkaround; updating mode bar
+   * buttons might not work
+   */
+  export let configReactivityStrategy: 'none' | 'static-plot' = 'static-plot';
+
+  /**
+   * Class attribute that will be passed to the HTML element
+   * wrapping the plot
+   */
+  let className = '';
+  export { className as class };
+
+  // set up
+  onMount(async () => {
+    (window as any).global = window;
+    await loadPlotly();
+  });
+
+  // state props
+  let datarevision = 0;
+  let previousLib = libPlotly;
+  let previousPlot = plot;
+  let width: number = DEFAULT_WIDTH;
+  let height: number = DEFAULT_HEIGHT;
+
+  // updates
+  $: debounceWait = typeof debounce === 'object' ? debounce.wait : (debounce ?? 0);
+  $: debounceOptions = typeof debounce === 'object' ? debounce : {};
+  $: (data, (datarevision = (datarevision + 1) % 1000));
+  $: layout_ = { datarevision, width, height, ...layout };
+  $: config_ = { displaylogo: false, ...config };
+
+  let configUpdated = false;
+  $: (config_, (configUpdated = true));
+
+  $: {
+    if (element && previousLib !== libPlotly) {
+      previousLib?.purge(element);
+      plot = undefined;
+    }
+    previousLib = libPlotly;
+    loadPlotly();
   }
-  previousPlot = plot;
-}
-const drawUndebounced = async () => {
-  if (!libPlotly || !element) return;
-  if (configUpdated && configReactivityStrategy === "static-plot") {
-    configUpdated = false;
-    await libPlotly.react(element, data, layout_, {
-      ...config_,
-      staticPlot: !config_.staticPlot
-    });
+  $: if (previousPlot !== plot) {
+    for (const [plotlyEvent, svelteEvent] of Object.entries(events)) {
+      previousPlot?.removeAllListeners?.(plotlyEvent);
+      plot?.on(plotlyEvent as any, (e: any) => dispatch(svelteEvent, e));
+    }
+    previousPlot = plot;
+  }
+
+  const drawUndebounced = async () => {
+    if (!libPlotly || !element) return;
+
+    if (configUpdated && configReactivityStrategy === 'static-plot') {
+      configUpdated = false;
+      await libPlotly.react(element, data, layout_, {
+        ...config_,
+        staticPlot: !config_.staticPlot
+      });
+    }
+
+    plot = await libPlotly.react(element, data, layout_, config_);
+  };
+
+  $: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
+  $: (libPlotly, element, data, layout_, config_, configUpdated, draw());
+
+  // destroy
+  onDestroy(() => element && libPlotly?.purge(element));
+
+  // autosizing
+  $: (fillParent, nextFrame(onResize));
+  $: fillParentWidth = fillParent === true || fillParent === 'width';
+  $: fillParentHeight = fillParent === true || fillParent === 'height';
+  $: parent = element?.parentElement ?? undefined;
+  let lastParent: typeof parent = undefined;
+  $: {
+    parentMounted(parent);
+    parentUnmounted(lastParent);
+    lastParent = parent;
+  }
+
+  let resizeObserver: ResizeObserver | undefined;
+  onMount(() => (resizeObserver = new ResizeObserver(onResize)));
+  const parentMounted = (parent: Element | undefined) => parent && resizeObserver?.observe(parent);
+  const parentUnmounted = (parent: Element | undefined) =>
+    parent && resizeObserver?.unobserve(parent);
+
+  function onResize() {
+    if (!parent || !element) return;
+
+    const { offsetHeight, offsetWidth } = parent;
+    const { paddingLeft, paddingTop, paddingRight, paddingBottom } =
+      window.getComputedStyle(parent);
+
+    const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
+    const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);
+
+    width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
+    height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
   }
-  plot = await libPlotly.react(element, data, layout_, config_);
-};
-$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
-$: libPlotly, element, data, layout_, config_, configUpdated, draw();
-onDestroy(() => element && libPlotly?.purge(element));
-$: fillParent, nextFrame(onResize);
-$: fillParentWidth = fillParent === true || fillParent === "width";
-$: fillParentHeight = fillParent === true || fillParent === "height";
-$: parent = element?.parentElement ?? void 0;
-let lastParent = void 0;
-$: {
-  parentMounted(parent);
-  parentUnmounted(lastParent);
-  lastParent = parent;
-}
-let resizeObserver;
-onMount(() => resizeObserver = new ResizeObserver(onResize));
-const parentMounted = (parent2) => parent2 && resizeObserver?.observe(parent2);
-const parentUnmounted = (parent2) => parent2 && resizeObserver?.unobserve(parent2);
-function onResize() {
-  if (!parent || !element) return;
-  const { offsetHeight, offsetWidth } = parent;
-  const { paddingLeft, paddingTop, paddingRight, paddingBottom } = window.getComputedStyle(parent);
-  const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
-  const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);
-  width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
-  height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
-}
 </script>
 
 <div
@@ -144,7 +320,7 @@ function onResize() {
   class:fillParentWidth
   class:fillParentHeight
   bind:this={element}
-/>
+></div>
 
 <style>.fillParent {
   overflow: visible;

package/dist/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderEndEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent } from 'plotly.js';
 export type { Data, Layout, Config, PlotlyHTMLElement, BeforePlotEvent, ClickAnnotationEvent, FrameAnimationEvent, LegendClickEvent, PlotMouseEvent, PlotHoverEvent, PlotRelayoutEvent, PlotRestyleEvent, PlotSelectionEvent, SliderChangeEvent, SliderStartEvent, SunburstClickEvent };
 export type FillParent = boolean | 'width' | 'height';
@@ -15,94 +14,98 @@ export interface PlotUpdateEvent {
     data: Data;
     layout: Layout;
 }
-declare const __propDef: {
-    props: {
-        /** The HTML element wrapping the plot. */ element?: HTMLDivElement | undefined;
-        /** The inner HTML element containing the plot. */ plot?: PlotlyHTMLElement | undefined;
-        /**
-           * Alternative Plotly bundle to use. If `undefined`, it defaults to
-           * the `plotly.js-dist` package; if null, no plot will be drawn and
-           * no library will be downloaded.
-           */ libPlotly?: typeof import("plotly.js-dist") | null | undefined;
-        /**
-           * Array of trace data, see https://plot.ly/javascript/reference/
-           */ data: Data[];
-        /**
-           * Layout of the plot, see https://plot.ly/javascript/reference/#layout
-           */ layout?: Partial<Layout> | undefined;
-        /**
-           * Configuration, see https://plot.ly/javascript/configuration-options/
-           */ config?: Partial<Config> | undefined;
-        /**
-           * Automatically resize the plot to fill the width and/or
-           * height of its parent element.
-           */ fillParent?: FillParent;
-        /**
-           * Debounce all changes to the plot.
-           */ debounce?: number | DebounceOptions;
-        /**
-           * Because of an [upstream bug](https://github.com/m93a/svelte-plotly.js/issues/10),
-           * changes in the `config` prop don't always render.
-           * This prop enables a walkaround, which makes sure
-           * that changes in `config` just work.
-           *
-           * - `'static-plot'` – when changing `config`, briefly disable
-           * chart interactivity to force update
-           *
-           * - `'none'` – disable the walkaround; updating mode bar
-           * buttons might not work
-           */ configReactivityStrategy?: "none" | "static-plot";
-        /**
-           * Class attribute that will be passed to the HTML element
-           * wrapping the plot
-           */ class?: string;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        afterExport: CustomEvent<undefined>;
-        afterPlot: CustomEvent<undefined>;
-        animated: CustomEvent<undefined>;
-        animating: CustomEvent<undefined>;
-        animatingFrame: CustomEvent<FrameAnimationEvent>;
-        animationInterrupted: CustomEvent<undefined>;
-        autoSize: CustomEvent<undefined>;
-        beforeExport: CustomEvent<undefined>;
-        beforeHover: CustomEvent<PlotMouseEvent>;
-        beforePlot: CustomEvent<BeforePlotEvent>;
-        buttonClicked: CustomEvent<ButtonClickedEvent>;
-        click: CustomEvent<PlotMouseEvent>;
-        clickAnnotation: CustomEvent<ClickAnnotationEvent>;
-        deselect: CustomEvent<undefined>;
-        doubleClick: CustomEvent<undefined>;
-        framework: CustomEvent<undefined>;
-        hover: CustomEvent<PlotHoverEvent>;
-        legendClick: CustomEvent<LegendClickEvent>;
-        legendDoubleClick: CustomEvent<LegendClickEvent>;
-        react: CustomEvent<PlotUpdateEvent>;
-        redraw: CustomEvent<undefined>;
-        relayout: CustomEvent<PlotRelayoutEvent>;
-        relayouting: CustomEvent<PlotRelayoutEvent>;
-        restyle: CustomEvent<PlotRestyleEvent>;
-        selected: CustomEvent<PlotSelectionEvent>;
-        selecting: CustomEvent<PlotSelectionEvent>;
-        sliderChange: CustomEvent<SliderChangeEvent>;
-        sliderEnd: CustomEvent<SliderEndEvent>;
-        sliderStart: CustomEvent<SliderStartEvent>;
-        sunburstClick: CustomEvent<SunburstClickEvent>;
-        transitioned: CustomEvent<undefined>;
-        transitioning: CustomEvent<undefined>;
-        transitionInterrupted: CustomEvent<undefined>;
-        unhover: CustomEvent<PlotMouseEvent>;
-        update: CustomEvent<PlotUpdateEvent>;
-        webGLContextLost: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PlotProps = typeof __propDef.props;
-export type PlotEvents = typeof __propDef.events;
-export type PlotSlots = typeof __propDef.slots;
-export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
+    z_$$bindings?: Bindings;
 }
+declare const Plot: $$__sveltets_2_IsomorphicComponent<{
+    /** The HTML element wrapping the plot. */ element?: HTMLDivElement | undefined;
+    /** The inner HTML element containing the plot. */ plot?: PlotlyHTMLElement | undefined;
+    /**
+       * Alternative Plotly bundle to use. If `undefined`, it defaults to
+       * the `plotly.js-dist` package; if null, no plot will be drawn and
+       * no library will be downloaded.
+       */ libPlotly?: typeof import("plotly.js-dist") | null | undefined;
+    /**
+       * Array of trace data, see https://plot.ly/javascript/reference/
+       */ data: Data[];
+    /**
+       * Layout of the plot, see https://plot.ly/javascript/reference/#layout
+       */ layout?: Partial<Layout> | undefined;
+    /**
+       * Configuration, see https://plot.ly/javascript/configuration-options/
+       */ config?: Partial<Config> | undefined;
+    /**
+       * Automatically resize the plot to fill the width and/or
+       * height of its parent element.
+       */ fillParent?: FillParent;
+    /**
+       * Debounce all changes to the plot.
+       */ debounce?: number | DebounceOptions;
+    /**
+       * Because of an [upstream bug](https://github.com/m93a/svelte-plotly.js/issues/10),
+       * changes in the `config` prop don't always render.
+       * This prop enables a walkaround, which makes sure
+       * that changes in `config` just work.
+       *
+       * - `'static-plot'` – when changing `config`, briefly disable
+       * chart interactivity to force update
+       *
+       * - `'none'` – disable the walkaround; updating mode bar
+       * buttons might not work
+       */ configReactivityStrategy?: "none" | "static-plot";
+    /**
+       * Class attribute that will be passed to the HTML element
+       * wrapping the plot
+       */ class?: string;
+}, {
+    afterExport: CustomEvent<undefined>;
+    afterPlot: CustomEvent<undefined>;
+    animated: CustomEvent<undefined>;
+    animating: CustomEvent<undefined>;
+    animatingFrame: CustomEvent<FrameAnimationEvent>;
+    animationInterrupted: CustomEvent<undefined>;
+    autoSize: CustomEvent<undefined>;
+    beforeExport: CustomEvent<undefined>;
+    beforeHover: CustomEvent<PlotMouseEvent>;
+    beforePlot: CustomEvent<BeforePlotEvent>;
+    buttonClicked: CustomEvent<ButtonClickedEvent>;
+    click: CustomEvent<PlotMouseEvent>;
+    clickAnnotation: CustomEvent<ClickAnnotationEvent>;
+    deselect: CustomEvent<undefined>;
+    doubleClick: CustomEvent<undefined>;
+    framework: CustomEvent<undefined>;
+    hover: CustomEvent<PlotHoverEvent>;
+    legendClick: CustomEvent<LegendClickEvent>;
+    legendDoubleClick: CustomEvent<LegendClickEvent>;
+    react: CustomEvent<PlotUpdateEvent>;
+    redraw: CustomEvent<undefined>;
+    relayout: CustomEvent<PlotRelayoutEvent>;
+    relayouting: CustomEvent<PlotRelayoutEvent>;
+    restyle: CustomEvent<PlotRestyleEvent>;
+    selected: CustomEvent<PlotSelectionEvent>;
+    selecting: CustomEvent<PlotSelectionEvent>;
+    sliderChange: CustomEvent<SliderChangeEvent>;
+    sliderEnd: CustomEvent<SliderEndEvent>;
+    sliderStart: CustomEvent<SliderStartEvent>;
+    sunburstClick: CustomEvent<SunburstClickEvent>;
+    transitioned: CustomEvent<undefined>;
+    transitioning: CustomEvent<undefined>;
+    transitionInterrupted: CustomEvent<undefined>;
+    unhover: CustomEvent<PlotMouseEvent>;
+    update: CustomEvent<PlotUpdateEvent>;
+    webGLContextLost: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Plot = InstanceType<typeof Plot>;
+export default Plot;

package/dist/PlotV2.svelte

@@ -0,0 +1,250 @@
+<script module lang="ts">
+  import { debounce as debouncify } from 'lodash-es';
+
+  import type { Data, Layout, Config, PlotlyHTMLElement } from 'plotly.js';
+
+  export type FillParent = boolean | 'width' | 'height';
+  import type { DebounceSettings } from 'lodash-es';
+
+  export interface DebounceOptions extends DebounceSettings {
+    wait: number;
+  }
+
+  export interface ButtonClickedEvent {
+    menu: any;
+    button: any;
+    active: any;
+  }
+
+  export interface PlotUpdateEvent {
+    data: Data;
+    layout: Layout;
+  }
+
+  export const plotlyEvents = [
+    'plotly_afterexport',
+    'plotly_afterplot',
+    'plotly_animated',
+    'plotly_animating',
+    'plotly_animatingframe',
+    'plotly_animationinterrupted',
+    'plotly_autosize',
+    'plotly_beforeexport',
+    'plotly_beforehover',
+    'plotly_beforeplot',
+    'plotly_buttonclicked',
+    'plotly_click',
+    'plotly_clickannotation',
+    'plotly_deselect',
+    'plotly_doubleclick',
+    'plotly_framework',
+    'plotly_hover',
+    'plotly_legendclick',
+    'plotly_legenddoubleclick',
+    'plotly_react',
+    'plotly_redraw',
+    'plotly_relayout',
+    'plotly_relayouting',
+    'plotly_restyle',
+    'plotly_selected',
+    'plotly_selecting',
+    'plotly_sliderchange',
+    'plotly_sliderend',
+    'plotly_sliderstart',
+    'plotly_sunburstclick',
+    'plotly_transitioned',
+    'plotly_transitioning',
+    'plotly_transitioninterrupted',
+    'plotly_unhover',
+    'plotly_update',
+    'plotly_webglcontextlost'
+  ] as const;
+</script>
+
+<script lang="ts">
+  const browser = typeof window === 'object';
+
+  const nextFrame = browser ? requestAnimationFrame : () => void 0;
+
+  function loadPlotly() {
+    if (!browser || libPlotly) return;
+
+    if (window.Plotly) {
+      libPlotly = window.Plotly;
+    } else {
+      import('plotly.js-dist').then(p => {
+        if (libPlotly === undefined) libPlotly = 'default' in p ? p.default : p;
+      });
+    }
+  }
+
+  const DEFAULT_WIDTH = 500;
+  const DEFAULT_HEIGHT = 300;
+
+  interface Props {
+    /** The HTML element wrapping the plot. */
+    element?: HTMLDivElement;
+    /** The inner HTML element containing the plot. */
+    plot?: PlotlyHTMLElement;
+
+    /**
+     * Alternative Plotly bundle to use. If `undefined`, it defaults to
+     * the `plotly.js-dist` package; if null, no plot will be drawn and
+     * no library will be downloaded.
+     */
+    libPlotly: typeof import('plotly.js-dist') | null | undefined;
+
+    /**
+     * Array of trace data, see https://plot.ly/javascript/reference/
+     */
+    data: Data[];
+
+    /**
+     * Layout of the plot, see https://plot.ly/javascript/reference/#layout
+     */
+    layout?: Partial<Layout>;
+
+    /**
+     * Configuration, see https://plot.ly/javascript/configuration-options/
+     */
+    config?: Partial<Config>;
+
+    /**
+     * Automatically resize the plot to fill the width and/or
+     * height of its parent element.
+     */
+    fillParent: FillParent;
+
+    /**
+     * Debounce all changes to the plot.
+     */
+    debounce?: number | DebounceOptions;
+
+    /**
+     * Class attribute that will be passed to the HTML element
+     * wrapping the plot
+     */
+    class?: string;
+
+    onEvent: ((event: (typeof plotlyEvents)[number], data: unknown) => void) | undefined;
+  }
+
+  let {
+    element = $bindable(),
+    plot = $bindable(),
+
+    libPlotly,
+    data,
+    layout,
+    config,
+    fillParent,
+    debounce,
+    class: className,
+
+    onEvent
+  }: Props = $props();
+
+  // set up
+  $effect(() => {
+    (window as any).global = window;
+    loadPlotly();
+
+    return () => {
+      if (element) libPlotly?.purge(element);
+    };
+  });
+
+  // state props
+  let width: number = $state(DEFAULT_WIDTH);
+  let height: number = $state(DEFAULT_HEIGHT);
+
+  // updates
+  const debounceWait = $derived(typeof debounce === 'object' ? debounce.wait : (debounce ?? 0));
+  const debounceOptions = $derived(typeof debounce === 'object' ? debounce : {});
+
+  const layout_ = $derived({ width, height, ...layout });
+  const config_ = $derived({ displaylogo: false, ...config });
+
+  $effect(() => {
+    if (!plot || !onEvent) return;
+
+    for (const event of plotlyEvents) {
+      plot?.on(event as any, e => onEvent(event, e));
+    }
+
+    return () => {
+      for (const event of plotlyEvents) {
+        plot?.removeAllListeners?.(event);
+      }
+    };
+  });
+
+  const drawUndebounced = async () => {
+    if (!libPlotly || !element) return;
+
+    plot = await libPlotly.react(element, data, layout_, config_);
+  };
+
+  const draw = $derived(debouncify(drawUndebounced, debounceWait, debounceOptions));
+
+  $effect(() => {
+    void (void libPlotly, element, data, layout_, config_);
+    draw();
+  });
+
+  // autosizing
+  const fillParentWidth = $derived(fillParent === true || fillParent === 'width');
+  const fillParentHeight = $derived(fillParent === true || fillParent === 'height');
+  const parent = $derived(element?.parentElement ?? undefined);
+
+  function onResize() {
+    if (!parent || !element) return;
+
+    const { offsetHeight, offsetWidth } = parent;
+    const { paddingLeft, paddingTop, paddingRight, paddingBottom } =
+      window.getComputedStyle(parent);
+
+    const maxWidth = offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
+    const maxHeight = offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);
+
+    width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
+    height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
+  }
+
+  $effect(() => {
+    void fillParent;
+
+    nextFrame(onResize);
+  });
+
+  $effect(() => {
+    if (!parent) return;
+
+    const resizeObserver = new ResizeObserver(onResize);
+
+    if (parent) resizeObserver.observe(parent);
+    return () => resizeObserver.disconnect();
+  });
+</script>
+
+<div
+  class={className}
+  class:fillParent
+  class:fillParentWidth
+  class:fillParentHeight
+  bind:this={element}
+></div>
+
+<style>.fillParent {
+  overflow: visible;
+}
+
+.fillParentWidth {
+  width: 0 !important;
+  max-width: 0 !important;
+}
+
+.fillParentHeight {
+  height: 0 !important;
+  max-height: 0 !important;
+}</style>

package/dist/PlotV2.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { Data, Layout, Config, PlotlyHTMLElement } from 'plotly.js';
+export type FillParent = boolean | 'width' | 'height';
+import type { DebounceSettings } from 'lodash-es';
+export interface DebounceOptions extends DebounceSettings {
+    wait: number;
+}
+export interface ButtonClickedEvent {
+    menu: any;
+    button: any;
+    active: any;
+}
+export interface PlotUpdateEvent {
+    data: Data;
+    layout: Layout;
+}
+export declare const plotlyEvents: readonly ["plotly_afterexport", "plotly_afterplot", "plotly_animated", "plotly_animating", "plotly_animatingframe", "plotly_animationinterrupted", "plotly_autosize", "plotly_beforeexport", "plotly_beforehover", "plotly_beforeplot", "plotly_buttonclicked", "plotly_click", "plotly_clickannotation", "plotly_deselect", "plotly_doubleclick", "plotly_framework", "plotly_hover", "plotly_legendclick", "plotly_legenddoubleclick", "plotly_react", "plotly_redraw", "plotly_relayout", "plotly_relayouting", "plotly_restyle", "plotly_selected", "plotly_selecting", "plotly_sliderchange", "plotly_sliderend", "plotly_sliderstart", "plotly_sunburstclick", "plotly_transitioned", "plotly_transitioning", "plotly_transitioninterrupted", "plotly_unhover", "plotly_update", "plotly_webglcontextlost"];
+interface Props {
+    /** The HTML element wrapping the plot. */
+    element?: HTMLDivElement;
+    /** The inner HTML element containing the plot. */
+    plot?: PlotlyHTMLElement;
+    /**
+     * Alternative Plotly bundle to use. If `undefined`, it defaults to
+     * the `plotly.js-dist` package; if null, no plot will be drawn and
+     * no library will be downloaded.
+     */
+    libPlotly: typeof import('plotly.js-dist') | null | undefined;
+    /**
+     * Array of trace data, see https://plot.ly/javascript/reference/
+     */
+    data: Data[];
+    /**
+     * Layout of the plot, see https://plot.ly/javascript/reference/#layout
+     */
+    layout?: Partial<Layout>;
+    /**
+     * Configuration, see https://plot.ly/javascript/configuration-options/
+     */
+    config?: Partial<Config>;
+    /**
+     * Automatically resize the plot to fill the width and/or
+     * height of its parent element.
+     */
+    fillParent: FillParent;
+    /**
+     * Debounce all changes to the plot.
+     */
+    debounce?: number | DebounceOptions;
+    /**
+     * Class attribute that will be passed to the HTML element
+     * wrapping the plot
+     */
+    class?: string;
+    onEvent: ((event: (typeof plotlyEvents)[number], data: unknown) => void) | undefined;
+}
+declare const PlotV2: import("svelte").Component<Props, {}, "element" | "plot">;
+type PlotV2 = ReturnType<typeof PlotV2>;
+export default PlotV2;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Plot.svelte';
 export { default } from './Plot.svelte';
+export { default as PlotV2 } from './PlotV2.svelte';
 export * from './utils.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './Plot.svelte';
 export { default } from './Plot.svelte';
+export { default as PlotV2 } from './PlotV2.svelte';
 export * from './utils.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-plotly.js",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "author": {
     "name": "Michal Grňo (m93a)",
     "url": "https://github.com/m93a/"
@@ -24,34 +24,35 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-common-types": "^6.6.0",
+    "@fortawesome/fontawesome-common-types": "^7.2.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/plotly.js": "^2.33.3",
-    "lodash-es": "^4.17.21"
+    "@types/plotly.js": "^3.0.10",
+    "lodash-es": "^4.18.1"
   },
   "devDependencies": {
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@types/eslint": "^9.6.0",
-    "eslint": "^9.8.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "globals": "^15.8.0",
-    "plotly.js-dist": "^2.34.0",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "publint": "^0.2.9",
-    "sass": "^1.77.8",
-    "svelte-check": "^3.8.5",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^7.18.0",
-    "vite": "^5.3.5"
+    "@eslint/js": "^10.0.1",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.56.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/eslint": "^9.6.1",
+    "eslint": "^10.2.0",
+    "eslint-plugin-svelte": "^3.17.0",
+    "globals": "^17.4.0",
+    "plotly.js-dist": "^3.5.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "sass": "^1.99.0",
+    "svelte-check": "^4.4.6",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.7"
   },
   "peerDependencies": {
-    "plotly.js-dist": "^2.34.0",
-    "svelte": "^4.2.0"
+    "plotly.js-dist": "^3.0.0",
+    "svelte": "^5.0.0"
   },
   "scripts": {
     "dev": "vite dev",