Loading widget models from npm package

After the great answer in Configuring type definitions when depending on bokehjs npm package - #5 I’ve now managed to import the bokehjs npm package and can now render all the models in the core bundle but I can’t figure out how I can include the widget models. If I try to render any widget I get this error message indicating that the widgets weren’t loaded:

Model ‘Div’ does not exist. This could be due to a widget or a custom model not being registered before first usage.

Running the import does not seem sufficient:

import "@bokehjs/models/widgets"

(…) can now render all the models in the core bundle but I can’t figure out how I can include the widget models.

Given that you mention the core bundle, I suppose adding bokeh-widget.js should help. In Python this is added automatically if one uses any models that extend Widget. If this doesn’t work, you will have to expand on the specific configuration you use.

Also on a side note, normally you would have to configure your bundler to process module paths like @bokehjs/models/widgets. However, bokehjs’ core bundle’s module loader conveniently resolves @bokehjs/ prefix, so additional run time configuration, for the most part, isn’t needed. If one doesn’t use a bundler, but individual modules instead, then bokehjs’ examples contain a nice hack for allowing usage of modules (sort of):

Given that you mention the core bundle, I suppose adding bokeh-widget.js should help

I guess that was confusing, I did not actually mean the core bundle but the individual modules in lib as you so nicely outlined in Configuring type definitions when depending on bokehjs npm package - #2 by mateusz.

I don’t particularly mind if I have to register all models at all times.

For some context, I was attending the Jupyter Dashboarding workshop and in order to ensure that Bokeh is well supported in that ecosystem I’ve started writing an IPython/Jupyter widget which a) bundles and imports bokehjs from npm and 2) performs bi-directional communication in Jupyter just like bokeh server does. My prototype is already working and by manually doing something like this:

import {Div} from "@bokehjs/models/widgets"
import {overrides} from "@bokehjs/base"

overrides["Div"] = Div as any

I can get widget models to render as well, but would like to find a nice way to do this more easily.

Registering models is needed to be able to use them with bokeh’s JSON protocol. The preferred way is as follows (based on widget bundle’s entry point):

This is for registering in bulk, but you can register a single model as well. overrides is meant for testing and shouldn’t be used otherwise. Due to technical reasons it’s exposed publicly right now. Given the ongoing work on improving bokehjs’ modularization, the way models are registered is likely going to change, so that models will be registered automatically at definition site using a fully qualified name (so that we can disambiguate different models sharing a name).