svelte-plotly.js 0.2.1 → 0.3.1

package/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"useTabs": false,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"arrowParens": "avoid",
+	"printWidth": 100
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2
+}

package/README.md

@@ -4,7 +4,10 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
 ## Usage
 
 1. Install using `yarn add svelte-plotly.js` or `npm install svelte-plotly.js`.
-2. Use in your app
+2. Choose a Plotly distribution:
+   * If you want to use `plotly.js-dist`, just install it.
+   * If you want to use a different distribution, take a look at [this section](#custom-plotly-distribution).
+3. Use in your app:
 
 ```svelte
 <script lang="ts">
@@ -28,6 +31,26 @@ This is an unofficial package that lets you efficiently use [plotly.js](https://
 />
 ```
 
+## Custom Plotly distribution
+Let's say you want to use svelte-plotly.js with a custom Plotly.js distribution, for example [`plotly.js-basic-dist-min`](https://www.npmjs.com/package/plotly.js-basic-dist-min). If you use Vite for bundling, the recommended way to do this would be to install `plotly.js-basic-dist-min` and then register it as an alias for `plotly.js-dist` by adding the following to your [`vite.config.js`](https://vitejs.dev/config/shared-options.html#resolve-alias):
+```js
+resolve: {
+  alias: {
+    "plotly.js-dist": "plotly.js-basic-dist-min",
+    lodash: "lodash-es",
+  },
+},
+```
+If you don't use Vite, or this approach doesn't work for you, you can also use the `libPlotly` prop of the `Plotly` component:
+```svelte
+<script lang="ts">
+  import Plot from 'svelte-plotly.js';
+  import libPlotly from 'plotly.js-basic-dist-min';
+</script>
+
+<Plot {libPlotly} ... />
+```
+
 ## Properties
 | Prop      | Type        | Description
 | --------- | ----------- | -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-plotly.js",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "author": {
     "name": "Michal Grňo (m93a)",
     "url": "https://github.com/m93a/"
@@ -17,6 +17,17 @@
       "src/types/*.d.ts"
     ]
   },
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview",
+    "prepare": "svelte-kit sync",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+  },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -27,6 +38,7 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
+    "plotly.js-dist": "^2.12.1",
     "sass": "^1.51.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
@@ -38,15 +50,14 @@
   "type": "module",
   "dependencies": {
     "@types/lodash-es": "^4.17.6",
-    "@types/plotly.js": "^2.12.2",
-    "lodash-es": "^4.17.21",
-    "plotly.js-dist": "^2.12.1"
+    "@types/plotly.js": "^2.12.5",
+    "lodash-es": "^4.17"
+  },
+  "peerDependencies": {
+    "plotly.js-dist": "^2.12"
   },
   "types": "./Plot.svelte.d.ts",
   "exports": {
-    "./package.json": "./package.json",
-    ".": "./Plot.svelte",
-    "./Plot.svelte": "./Plot.svelte"
-  },
-  "svelte": "./Plot.svelte"
-}
+    ".": "./Plot.svelte"
+  }
+}

package/src/app.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare namespace App {
+	// interface Locals {}
+	// interface Platform {}
+	// interface Session {}
+	// interface Stuff {}
+}

package/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div>%svelte.body%</div>
+	</body>
+</html>

package/src/lib/Plot.svelte

@@ -0,0 +1,281 @@
+<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';
+  type not = undefined | null;
+
+  const nextFrame = browser ? requestAnimationFrame : () => void 0;
+
+  async function loadPlotly() {
+    if (!browser) return;
+
+    if (libPlotly === undefined) {
+      if (window.Plotly) {
+        libPlotly = window.Plotly;
+      } else {
+        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;
+
+  // 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;
+  }
+  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
+  export let element: HTMLDivElement | not = undefined;
+  export let plot: PlotlyHTMLElement | not = undefined;
+
+  // input props
+  export let libPlotly: typeof import('plotly.js-dist') | null | undefined = undefined;
+  export let data: Data[];
+  export let layout: Partial<Layout> | undefined = undefined;
+  export let config: Partial<Config> | undefined = undefined;
+  export let fillParent: FillParent = false;
+  export let debounce: number | DebounceOptions = 0;
+  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 };
+  $: draw(libPlotly, element, data, layout_, config_);
+  $: {
+    if (element && previousLib !== libPlotly) {
+      previousLib?.purge(element);
+      plot = undefined;
+    }
+    previousLib = libPlotly;
+    loadPlotly();
+  }
+  $: 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 = (
+    lib: typeof libPlotly,
+    e: HTMLDivElement | not,
+    d: Data[],
+    l: Partial<Layout>,
+    c: Partial<Config>
+  ) => {
+    if (e) lib?.react(e, d, l, c).then(p => (plot = p));
+  };
+
+  $: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
+
+  // destroy
+  onDestroy(() => element && libPlotly?.purge(element));
+
+  // autosizing
+  $: fillParent, nextFrame(onResize);
+  $: fillParentWidth = fillParent === true || fillParent === 'width';
+  $: fillParentHeight = fillParent === true || fillParent === 'height';
+  $: parent = element?.parentElement;
+  let lastParent: typeof parent = null;
+  $: {
+    parentMounted(parent);
+    parentUnmounted(lastParent);
+    lastParent = parent;
+  }
+
+  let resizeObserver: ResizeObserver | not;
+  onMount(() => (resizeObserver = new ResizeObserver(onResize)));
+  const parentMounted = (parent: Element | not) => parent && resizeObserver?.observe(parent);
+  const parentUnmounted = (parent: Element | not) => 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(paddingRight);
+
+    width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
+    height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
+  }
+</script>
+
+<div
+  class={className}
+  class:fillParent
+  class:fillParentWidth
+  class:fillParentHeight
+  bind:this={element}
+/>
+
+<style lang="scss">
+  .fillParent {
+    overflow: visible;
+  }
+  .fillParentWidth {
+    width: 0 !important;
+    max-width: 0 !important;
+  }
+  .fillParentHeight {
+    height: 0 !important;
+    max-height: 0 !important;
+  }
+</style>

package/src/routes/index.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import Plot from '$lib/Plot.svelte';
+  import type { Data, FillParent, DebounceOptions, Config } from '$lib/Plot.svelte';
+
+  // FA icons borrowed for testing purposes only
+  const MAXIMIZE_ICON = {
+    width: 448,
+    height: 512,
+    path: 'M447.1 319.1v135.1c0 13.26-10.75 23.1-23.1 23.1h-135.1c-12.94 0-24.61-7.781-29.56-19.75c-4.906-11.1-2.203-25.72 6.937-34.87l30.06-30.06L224 323.9l-71.43 71.44l30.06 30.06c9.156 9.156 11.91 22.91 6.937 34.87C184.6 472.2 172.9 479.1 160 479.1H24c-13.25 0-23.1-10.74-23.1-23.1v-135.1c0-12.94 7.781-24.61 19.75-29.56C23.72 288.8 27.88 288 32 288c8.312 0 16.5 3.242 22.63 9.367l30.06 30.06l71.44-71.44L84.69 184.6L54.63 214.6c-9.156 9.156-22.91 11.91-34.87 6.937C7.798 216.6 .0013 204.9 .0013 191.1v-135.1c0-13.26 10.75-23.1 23.1-23.1h135.1c12.94 0 24.61 7.781 29.56 19.75C191.2 55.72 191.1 59.87 191.1 63.1c0 8.312-3.237 16.5-9.362 22.63L152.6 116.7l71.44 71.44l71.43-71.44l-30.06-30.06c-9.156-9.156-11.91-22.91-6.937-34.87c4.937-11.95 16.62-19.75 29.56-19.75h135.1c13.26 0 23.1 10.75 23.1 23.1v135.1c0 12.94-7.781 24.61-19.75 29.56c-11.1 4.906-25.72 2.203-34.87-6.937l-30.06-30.06l-71.43 71.43l71.44 71.44l30.06-30.06c9.156-9.156 22.91-11.91 34.87-6.937C440.2 295.4 447.1 307.1 447.1 319.1z'
+  };
+  const MINIMIZE_ICON = {
+    width: 512,
+    height: 512,
+    path: 'M200 287.1H64c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.937 34.87l30.06 30.06l-62.06 62.07c-12.49 12.5-12.5 32.75-.0012 45.25l22.62 22.62c12.5 12.5 32.76 12.5 45.26 .0012l62.06-62.07l30.06 30.06c6.125 6.125 14.31 9.375 22.62 9.375c4.125 0 8.281-.7969 12.25-2.437c11.97-4.953 19.75-16.62 19.75-29.56V311.1C224 298.7 213.3 287.1 200 287.1zM312 224h135.1c12.94 0 24.62-7.797 29.56-19.75c4.969-11.97 2.219-25.72-6.937-34.87l-30.06-30.06l62.06-62.07c12.5-12.5 12.5-32.76 .0003-45.26l-22.62-22.62c-12.5-12.5-32.76-12.5-45.26-.0003l-62.06 62.07l-30.06-30.06c-9.156-9.141-22.87-11.84-34.87-6.937C295.8 39.39 288 51.06 288 64v135.1C288 213.3 298.7 224 312 224zM204.3 34.44C192.3 29.47 178.5 32.22 169.4 41.38L139.3 71.44L77.25 9.374C64.75-3.123 44.49-3.123 31.1 9.374l-22.63 22.63c-12.49 12.49-12.49 32.75 .0018 45.25l62.07 62.06L41.38 169.4C35.25 175.5 32 183.7 32 192c0 4.125 .7969 8.281 2.438 12.25C39.39 216.2 51.07 224 64 224h135.1c13.25 0 23.1-10.75 23.1-23.1V64C224 51.06 216.2 39.38 204.3 34.44zM440.6 372.7l30.06-30.06c9.141-9.156 11.84-22.88 6.938-34.87C472.6 295.8 460.9 287.1 448 287.1h-135.1c-13.25 0-23.1 10.75-23.1 23.1v135.1c0 12.94 7.797 24.62 19.75 29.56c11.97 4.969 25.72 2.219 34.87-6.937l30.06-30.06l62.06 62.06c12.5 12.5 32.76 12.5 45.26 .0002l22.62-22.62c12.5-12.5 12.5-32.76 .0002-45.26L440.6 372.7z'
+  };
+
+  let y0 = 1;
+  let useDefaultLib = true;
+  let fillParent: FillParent = false;
+  let debounce: DebounceOptions | number | undefined;
+
+  let fullscreen = false;
+  $: {
+    if (fullscreen) fillParent = true;
+    else fillParent = false;
+  }
+
+  let data: Data[];
+  $: data = [
+    {
+      x: [1, 2, 3, 4, 5],
+      y: [y0, 2, 4, 8, 16]
+    }
+  ];
+
+  let config: Partial<Config>;
+  $: config = {
+    modeBarButtonsToAdd: [
+      {
+        name: 'fullscreen',
+        title: fullscreen ? 'Disable Fullscreen' : 'Enable Fullscreen',
+        icon: fullscreen ? MINIMIZE_ICON : MAXIMIZE_ICON,
+        click: () => (fullscreen = !fullscreen)
+      }
+    ]
+  };
+
+  function addData() {
+    data.push({
+      x: [1, 2, 3, 4, 5],
+      y: Array(5)
+        .fill(0)
+        .map(_ => 10 * Math.random())
+    });
+    data = data;
+  }
+
+  function changeY0() {
+    y0++;
+  }
+</script>
+
+<Plot
+  {data}
+  {fillParent}
+  {debounce}
+  {config}
+  layout={{
+    margin: { t: 0 }
+  }}
+  libPlotly={useDefaultLib ? undefined : null}
+  on:click={console.log}
+  on:relayout={console.log}
+/>
+
+<div class="controls">
+  <button on:click={addData}>Add trace</button>
+  <button on:click={changeY0}>Increase y<sub>0</sub></button>
+  <button on:click={() => (useDefaultLib = !useDefaultLib)}>Swap lib</button>
+  <button on:click={() => (fillParent = false)}>Fixed size</button>
+  <button on:click={() => (fillParent = true)}>Fill parent</button>
+  <button on:click={() => (fillParent = 'width')}>Fill width</button>
+  <button on:click={() => (fillParent = 'height')}>Fill height</button>
+  <button on:click={() => (debounce = undefined)}>Don't debounce</button>
+  <button on:click={() => (debounce = 500)}>Debounce 500ms</button>
+  <button on:click={() => (debounce = { wait: 500, maxWait: 2000 })}
+    >Debounce 500ms, max wait 2s</button
+  >
+</div>
+
+<style lang="scss">
+  :global(html, body, body > div) {
+    padding: 0;
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+  .controls {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+</style>

package/src/types/plotly.d.ts

@@ -0,0 +1,3 @@
+declare module "plotly.js-dist" {
+    export * from "plotly.js";
+}

package/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: preprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"lib": ["es2020", "DOM"],
+		"moduleResolution": "node",
+		"module": "es2020",
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"target": "es2020"
+	}
+}

package/Plot.svelte

@@ -1,158 +0,0 @@
-<script context="module">export {};
-</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 === undefined) {
-        const p = await import('plotly.js-dist');
-        if (libPlotly === undefined)
-            libPlotly = 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();
-// bind props
-export let element = undefined;
-export let plot = undefined;
-// input props
-export let libPlotly = undefined;
-export let data;
-export let layout = undefined;
-export let config = undefined;
-export let fillParent = false;
-export let debounce = 0;
-let className = '';
-export { className as class };
-// set up
-onMount(async () => {
-    window.global = window;
-    await loadPlotly();
-});
-// state props
-let datarevision = 0;
-let previousLib = libPlotly;
-let previousPlot = plot;
-let width = DEFAULT_WIDTH;
-let height = 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 };
-$: draw(libPlotly, element, data, layout_, config_);
-$: {
-    if (element && previousLib !== libPlotly) {
-        previousLib?.purge(element);
-        plot = 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));
-    }
-    previousPlot = plot;
-}
-const drawUndebounced = (lib, e, d, l, c) => {
-    if (e)
-        lib?.react(e, d, l, c).then(p => (plot = p));
-};
-$: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
-// destroy
-onDestroy(() => element && libPlotly?.purge(element));
-// autosizing
-$: fillParent, nextFrame(onResize);
-$: fillParentWidth = fillParent === true || fillParent === 'width';
-$: fillParentHeight = fillParent === true || fillParent === 'height';
-$: parent = element?.parentElement;
-let lastParent = null;
-$: {
-    parentMounted(parent);
-    parentUnmounted(lastParent);
-    lastParent = parent;
-}
-let resizeObserver;
-onMount(() => (resizeObserver = new ResizeObserver(onResize)));
-const parentMounted = (parent) => parent && resizeObserver?.observe(parent);
-const parentUnmounted = (parent) => 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(paddingRight);
-    width = fillParentWidth ? maxWidth : DEFAULT_WIDTH;
-    height = fillParentHeight ? maxHeight : DEFAULT_HEIGHT;
-}
-</script>
-
-<div
-  class={className}
-  class:fillParent
-  class:fillParentWidth
-  class:fillParentHeight
-  bind:this={element}
-/>
-
-<style>.fillParent {
-  overflow: visible;
-}
-
-.fillParentWidth {
-  width: 0 !important;
-  max-width: 0 !important;
-}
-
-.fillParentHeight {
-  height: 0 !important;
-  max-height: 0 !important;
-}</style>

package/Plot.svelte.d.ts

@@ -1,76 +0,0 @@
-/// <reference types="lodash" />
-import { SvelteComponentTyped } 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 declare 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;
-}
-declare const __propDef: {
-    props: {
-        element?: (null | undefined) | HTMLDivElement;
-        plot?: (null | undefined) | PlotlyHTMLElement;
-        libPlotly?: typeof import('plotly.js-dist') | null | undefined;
-        data: Data[];
-        layout?: Partial<Layout> | undefined;
-        config?: Partial<Config> | undefined;
-        fillParent?: FillParent | undefined;
-        debounce?: number | DebounceOptions | undefined;
-        class?: string | undefined;
-    };
-    slots: {};
-    getters: {};
-    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;
-    };
-};
-export declare type PlotProps = typeof __propDef.props;
-export declare type PlotEvents = typeof __propDef.events;
-export declare type PlotSlots = typeof __propDef.slots;
-export default class Plot extends SvelteComponentTyped<PlotProps, PlotEvents, PlotSlots> {
-}