JuliaPluto · disberd · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ Manifest.toml
 test*.jl
 .vscode/
 .DS_Store
+js/dist/
diff --git a/js/bundle.js b/js/bundle.js
@@ -0,0 +1,30 @@
+import * as esbuild from "npm:[email protected]";
+// Import the WASM build on platforms where running subprocesses is not
+// permitted, such as Deno Deploy, or when running without `--allow-run`.
+// import * as esbuild from "https://deno.land/x/[email protected]/wasm.js";
+
+// the plugin wants an absolute path for the deno config so we have to compute the directory of this file.
+// Pointing to the correct config is needed to use the import map linking the @emotion/css url to the npm version of the package to fix a bug with the library not realizing it is inside a browser otherwise.
+import * as path from "https://deno.land/[email protected]/path/mod.ts";
+const __dirname = path.dirname(path.fromFileUrl(import.meta.url));
+const __config = path.join(__dirname, "deno.jsonc");
+
+import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.10.3";
+// import { processPlotObj } from "./src/utils.js";
+
+const result = await esbuild.build({
+  plugins: [...denoPlugins({configPath: __config})],
+  entryPoints: ["./src/prehooks.js"],
+  outfile: "./dist/library.esm.min.js",
+  bundle: true,
+  format: "esm",
+  minify: true,
+  metafile: true,
+  treeShaking: true,
+});
+
+Deno.writeTextFile("./dist/meta.json", JSON.stringify(result.metafile))
+
+// console.log(result.metafile);
+
+esbuild.stop();
diff --git a/js/deno.jsonc b/js/deno.jsonc
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "esnext",
+      "dom",
+      "deno.ns"
+    ],
+    "checkJs": true
+  },
+  "tasks": {
+    "bundle": "deno run --allow-read --allow-write --allow-env --allow-net --allow-run bundle.js"
+  },
+  "imports": {
+    /* We create an import map for the URL as the bundling with the url directly
+    breaks @emotion/css as it does not recognize it inside a browser.
+    Strangely enough, when using the package from npm instead of esm.sh
+    directly it bundles fine. The direct inclusion from esm.sh from the
+    browser also works fine so it seems to be just a bundling problem probably
+    tied to how deno-esbuild-loader works? */
+    "https://esm.sh/@emotion/[email protected]": "npm:@emotion/[email protected]",
+    "https://esm.sh/[email protected]": "npm:[email protected]",
+    "https://esm.sh/[email protected]": "npm:[email protected]",
+    "https://esm.sh/@floating-ui/[email protected]": "npm:@floating-ui/[email protected]"
+  }
+}
diff --git a/js/deno.lock b/js/deno.lock
diff --git a/js/index.html b/js/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>
+    <title>My Simple HTML Document</title>
+    <script type="module">
+        const asd = await import('./src/prehooks.js');
+        const deps = await import('./src/url_deps.js');
+        const { makeContainer, setGlobalDeps, GlobalDeps, updatePlotData, computeContainerPosition } = asd
+        setGlobalDeps(deps)
+        console.log(asd)
+        const { emotion: { css } } = GlobalDeps
+        console.log(css)
+        const dv = document.getElementById('asd');
+        const container = dv.insertAdjacentElement('afterend', makeContainer());
+
+        // Do the plot
+        // Sample data
+        const trace = {
+            x: [1, 2, 3, 4, 5],
+            y: [10, 15, 13, 17, 20],
+            mode: 'markers',
+            type: 'scatter',
+            marker: { size: 12 }
+        };
+
+        const layout = {
+            title: 'Sample Scatter Plot',
+            xaxis: {
+                title: 'X Axis'
+            },
+            yaxis: {
+                title: 'Y Axis'
+            }
+        };
+
+        const data = [trace];
+        const plot_obj = { data, layout }
+
+        // Render the plot
+        updatePlotData(container, plot_obj)
+        window.computeContainerPosition = computeContainerPosition
+        window.container = container
+        window.option_spans = container.CLIPBOARD_HEADER.option_spans
+        // container.classList.toggle('popped-out', true)
+        container.CLIPBOARD_HEADER.classList.toggle('hidden')
+        window.width = option_spans['width']
+        // container.togglePopout()
+    </script>
+</head>
+
+<body>
+    <h1>Hello, World!</h1>
+    <p>This is a simple HTML document.</p>
+    <div id="asd" style="margin: 10px 100px;">ASD</div>
+</body>
+
+</html>
diff --git a/js/index2.html b/js/index2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>My Simple HTML Document</title>
+    <script type="module">
+        const tst = await import('./src/url_deps.js')
+        window.tst = tst
+        console.log(tst)
+    </script>
+</head>
+<body>
+    <h1>Hello, World!</h1>
+    <p>This is a simple HTML document.</p>
+    <div id="asd" style="margin-top: 400px;">ASD</div>
+</body>
+</html>