Importing additional JS resources to standalone html document

I’ve come up with a super hacky python function to savean html with additional JS resources attached to it:

from bokeh.embed import components
from bokeh.resources import Resources

def save_html_wJSResources(bk_obj,fname,resources_list,html_title='Bokeh Plot'):
    '''function to save a bokeh figure/layout/widget but with additional JS resources imported at the top of the html
    resources_list is a list input of where to import additional JS libs so they can be utilized into CustomJS etc in bokeh work
    e.g. ['http://d3js.org/d3.v6.js']
    '''
    script, div = components(bk_obj)
    resources = Resources()
    # print(resources)
    
    tpl = '''<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>'''+html_title+'''</title>
            '''
    tpl = tpl+resources.render_js()            
    for r in resources_list:
        tpl = tpl +'''\n<script src="'''+r+'''"></script>'''
      
    tpl = tpl+script+\
        '''
            </head>
            <body>'''\
                +div+\
            '''</body>
        </html>'''
    
    with open(fname,'w') as f:
        f.write(tpl)

Basically just separating out the components and the resources as text, splicing in additional resources to that test, then zipping it all back up and saving it… it works… but I’m wondering if there’s actually a built in way to do this that I’ve missed.

@gmerritt123 I might be missing something, but components is intended for creating snippets that can be templated into Jinja templates. Couldn’t you include whatever additional resources you want to include in a template, instead of manually manipulating strings? This example adds extra CSS stylesheets in the template, but the general idea is the same, I think?

Right, this seems pretty similar in purpose/applicable to what I’ve hacked out but is far more versatile and as a result a bit more cumbersome for my (currently) simple needs. Good to know for the future though -one day I’ll need to write a template like this for standardized reporting etc + grab additional js resources at the same time. Thanks.

1 Like