oof

Author: cshaa

lib/Plot.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    let Plotly: null | typeof import("plotly.js");
+
+    export let element: HTMLDivElement = null as never;
+
+    console.log(element);
+
+    onMount(async () => {
+        Plotly = await import("plotly.js");
+        console.log('loaded', Plotly);
+    });
+</script>
+
+<div bind:this={element}></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-plotly.js",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -17,6 +17,7 @@
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
+    "buffer": "^6.0.3",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -28,5 +29,9 @@
     "tslib": "^2.3.1",
     "typescript": "~4.6.2"
   },
-  "type": "module"
-}
+  "type": "module",
+  "dependencies": {
+    "@types/plotly.js": "^1.54.20",
+    "plotly.js": "^2.12.1"
+  }
+}

src/routes/index.svelte

@@ -1,2 +1,8 @@
+<script lang="ts">
+    import Plot from "../../lib/Plot.svelte";
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<Plot />