Including "bokeh build" extensions

I’ve noticed as my project has grown that custom extensions have started taking an excruciatingly long time to build every time I start a server. So, I’d like to switch to using pre-built extensions with bokeh build. I think I’ve figured out how to get the build to run (have to change all the imports to start with @bokeh!) thanks to the example PR from Panel. But now I’m left with a “dist” directory containing compiled minified and non-minified javascript - how do I then actually get that javascript included in my project? I am not using custom templates, so I can’t just add a script tag to the header. Should I set __javascript__ on my custom model class to point to the minified js file? If so, which of the many custom models should I put that on - all of them? Can I even put a local filename in __javascript__? Thanks.

P.S. bokeh init gives a package.json file that points to Boken 1.x, even though I’m on 2.1.1. I had to manually change the dependency to @bokeh/bokehjs.

cc @Philipp_Rudiger @mateusz who have the most experience with this.

I continued fighting with the (AFAICT completely undocumented) build process. I learned a few things, in no particular order:

  • bokehjs has to be imported as @bokehjs. Even though the npm module is @bokeh/bokehjs now.
  • css file imports only work if you manually place the css file or a symlink in dist/lib/ before beginning the build.
  • less file imports don’t work at all (there doesn’t seem to be a way for bokeh build to trigger less compilation)
  • Models should omit __implementation__ entirely. When they do so, however, they must be defined in a package and directory with the same name (they can’t be imported as foo.py from the same folder as your app). And each Model subclass needs to have static __module__ = "directoryname" set.
  • Models must be manually registered with a call to register_models in index.ts
  • The output dist directory needs to be placed in the same directory as your models (which, per above, needs to match the package name)
  • tsconfig.json needs to have a paths section:
   "paths": {
     "@bokehjs/*": [
       "./node_modules/@bokeh/bokehjs/build/js/lib/*",
       "./node_modules/@bokeh/bokehjs/build/js/types/*"
     ]
   }

It looks like from reading the code you might be able to omit tsconfig.json entirely and this will be autogenerated, but bokeh init put (a broken) one there, so I kept it.

  • If the build process fails, bokeh build will spit out an error, but invoking it a second time will claim the build has succeeded. It hasn’t.
  • css files need to be imported with // @ts-ignore

The rough edges here are super, super sharp, and the lack of documentation really doesn’t help. :frowning:

So I think the only remaining thing here is to figure out how I’m supposed to be including css and less files. Placing things in dist/lib by hand doesn’t seem right.

Here’s what I ended up with so far if anyone comes across this and wants some examples: Build custom models as an out-of-tree extension to reduce page load time · w1xm/gnuradio@5db5e36 · GitHub

Have either of you had a chance to look at this yet? Thanks!