import plotly.js?

[ryan-williams]

semi-related to #94, I've tried to use plotly.js in Starboard in a few ways, but nothing I've tried has worked. Here (and below) are a few things I've tried: https://starboard.gg/runsascoded/plotly-js-test-nDXqtpJ

Is there a way to use plotly.js in Starboard?

Update: I think I found a way! It's in the notebook above now, JS cell:

const Plotly = await import("https://cdn.plot.ly/plotly-2.8.3.min.js")

const div = document.createElement("div")
var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot(div, data);
div

Screencast

Will leave the trail of failed attempts below, and issue open, in case there's any documentation etc. that should come from this. Feel free to close though!

---

JS cell

const Plotly = await import("https://cdn.plot.ly/plotly-2.8.3.min.js")
console.log(Plotly)

seemingly gives an empty module object

ESM cell

import Plotly from "https://cdn.plot.ly/plotly-2.8.3.min.js"

gives error:

SyntaxError: The requested module 'https://cdn.plot.ly/plotly-2.8.3.min.js' does not provide an export named 'default'

Skypack imports

I noticed that the demo imports on the homepage starboard.gg all come from cdn.skypack.dev, so I tried a few of those (in ESM cells):

plotly.js:

import plotlyJs from 'https://cdn.skypack.dev/plotly.js';

errors with:

TypeError: Failed to fetch dynamically imported module: blob:https://runsascoded.starboard.host/d9dab86a-eb32-4da3-8441-a7a5f54a9b78

plotly.js-dist

Similar error:

import plotlyJs from 'https://cdn.skypack.dev/plotly.js-dist';

TypeError: Failed to fetch dynamically imported module: blob:https://runsascoded.starboard.host/c0c66b4a-a605-46f8-bd32-8d37689bcb9e

plotly

Seems to have a different problem:

import plotlyJs from 'https://cdn.skypack.dev/plotly';

Error: [Package Error] "https" does not exist. (Imported by "plotly"). 
    at https://cdn.skypack.dev/error/node:https?from=plotly:14:7

[gzuidhof]

I'm happy you were able to figure it out! Starboard needs a documentation site badly, one of the things that should definitely be in there is a guide to importing code. There are quite some configurations:

• ESM with default export
• ESM with named exports
• CommonJS
• AMD.js (not common at all anymore thankfully)
• No module system: it just puts something on the window object
• No module system & auto-executes a bunch of JS (e.g. P5.js)

And for each of these there are either the dynamic import style and ES import style:

// Dynamic import
import "bla.js"
import MyLib from "bla.js";
import * as MyLib from "bla.js";
import {someFunction} from "bla.js";
import {someFunction as anotherName} from "bla.js";
import {default as MyLib} from "bla.js"; // This one is weird: a named export of `default` is dodgy.

// JS style import
await import("bla.js");
const MyLib = await import("bla.js");
const {someFunction} = await import("bla.js");
const {default: MyLib} = await import("bla.js"); // a bit weird..

And then some packages will import Node-only stuff (like https in the last of your examples), which need to be polyfilled (or excluded).

Here is an idea: there could be an online tool that statically analyzes the code and tells you how to import it and whether it is browser-friendly or not (and whether skypack can make it browser friendly).