Linking External Custom Components to Bokeh project

Community Support
1

I’m in the process of moving a few custom components out of the main project so they can be pre-complied and to remove the dependency on node at runtime.

So far we got the components to compile running bokeh(2.3.0dev12), node(14.15.5) and npm(6.14.11) (thanks to @mateusz’s help) .

To get the files to compile I had to change the path of the packages ( seams related ) to :
"@bokeh/bokehjs": "^2.3.0-dev.12"

and add to the .tsconfig :
“paths”: {
“@bokehjs/": [
"./node_modules/@bokeh/bokehjs/build/js/lib/”,
“./node_modules/@bokeh/bokehjs/build/js/types/*”
]
}

As mentioned things compile correctly now. leading me to my next question as I’ve been following the documentation at :
https://docs.bokeh.org/en/latest/docs/user_guide/extensions.html#pre-built-extensions

(+ tweaks to get things to run and a lot of searches here and online)
there is no information as far as I can find on how to connect between the project and these output js files. As such, I tried to insert the direct js files to the python side these ways :

class AlertBox(HTMLBox):

__implementation__ = "extentions.js" # or/and alert_box.js

title = String()
message = String()
item_type = String()

i tried switching around the implementation line but in all attempts i keep getting “compiler errors” of paths not found such as:

RuntimeError: no such module: @bokehjs/core/properties

is there any more information on how to connect the dots between the compiled TS code and the project - we have no intention on distributing the components just trying to remove the step of compiling the components at runtime to remove the dependency on having node at run time.

Thanks (again) in advance!

2

There is some info in this link

https://awesome-panel.readthedocs.io/en/latest/prebuilt_bokeh_model_extensions.html

3

Hey @nghenzi thanks for that link. I’ve actually been using that one to modify my import and ts rules. but i still don’t understand from the later part of the document there how i import my component into Bokeh without diving into the ecosystem of awesome-panel - is that critical to move forward with integrating a component?

4

I followed that guide with the instructions in this issue.

5

Thanks again @nghenzi - but if i can avoid it i’m planing not to add another framework such as awesome-panel - i already have 3 components that work as long as i don’t compile them and all i want to do is compile them to reduce the dependency on node at run time. (been following those documents as well) - hopefully @mateusz or someone on the team might have more info - i’m trying now to mask with aliases in the mean time but trying to avoid needing to get another framework involved (if that can be avoided).