Bokehjs, require, and observablehq

I’m interested in trying to use the bokehjs library in the observablehq world. I think this will be a good way for me to understand javascript better, plus it opens up other interesting possibilities.

I haven’t figured out whether it is possible to load the bokehjs library in a straightforward way. There is an old notebook that does this, but it seems to only work on version 1. Here is how that is done:

Bokeh = {
  const ver = '1.1.0';
  if (!document.getElementById('bokehjs-css'))
    document.head.appendChild(html`<link id='bokehjs-css' href='https://cdn.pydata.org/bokeh/release/bokeh-${ver}.min.css' rel=stylesheet>`);
  await require(`https://cdn.pydata.org/bokeh/release/bokeh-${ver}.min.js`).catch(() => {})
  const Bokeh = window.Bokeh;
  await require(`https://cdn.pydata.org/bokeh/release/bokeh-api-${ver}.min.js`).catch(() => {});
  return Bokeh;
}

Added in press: actually the code above does seem to work with version 2.0.2. I am still curious about require.

Ideally I would hope to be able to do just var Bokeh = require(@bokeh/bokehjs) and go from there. But the bokehjs module on npm doesn’t load with the observable require function. The debugger for require reports this:

Okay, so: nothing worked. We tried UMD, we tried bundling, we 
tried searching for random files that 
might be loadable. Unfortunately, no 🎲.
This doesn’t mean nothing can work - this is an automated tool
and doesn’t have human intuition. 
You might want to browse the files this module exposes on unpkg to 
see if any of them look viable.
 Or you might want to ask the module’s author whether there’s a file that
people can use with browsers.

My newly acquired superficial knowledge of javascript isn’t enough to interpret this. In fact, I may be completely confused about the whole situation. Any help appreciated. I am also asking on the observable forum.

It’s not a question about JavaScript or Bokeh. It’s more a question about inner workings of ObservableHQ.

In your case, what’s wrong with just using the CDN links, as in the top code block?

Having looked at this more and gotten some help from Observable, I now know a little more about how Observable works, and there’s nothing wrong with the CDN links – thanks -