Support for Bokeh 3.4

.github/workflows/test.yaml

@@ -131,7 +131,7 @@ jobs:
         with:
           name: unit_test_suite
           python-version: ${{ matrix.python-version }}
-          channels: pyviz/label/dev,numba,bokeh,conda-forge,nodefaults
+          channels: pyviz/label/dev,numba,bokeh/label/dev,conda-forge,nodefaults
           conda-update: true
           nodejs: true
           envs: -o examples -o recommended -o tests -o build
@@ -222,7 +222,7 @@ jobs:
         with:
           name: ui_test_suite
           python-version: 3.9
-          channels: pyviz/label/dev,bokeh,conda-forge,nodefaults
+          channels: pyviz/label/dev,bokeh/label/dev,conda-forge,nodefaults
           envs: "-o recommended -o tests -o build"
           cache: ${{ github.event.inputs.cache || github.event.inputs.cache == '' }}
           nodejs: true

panel/io/resources.py

@@ -37,7 +37,7 @@
 from markupsafe import Markup
 
 from ..config import config, panel_extension as extension
-from ..util import isurl, url_path
+from ..util import bokeh34, isurl, url_path
 from .state import state
 
 if TYPE_CHECKING:
@@ -69,10 +69,18 @@ def get_env():
 def conffilter(value):
     return json.dumps(OrderedDict(value)).replace('"', '\'')
 
+class json_dumps(json.JSONEncoder):
+    def default(self, obj):
+        if bokeh34:
+            from bokeh.embed.bundle import URL
+            if isinstance(obj, URL):
+                return str(obj)
+        return super().default(obj)
+
 _env = get_env()
 _env.trim_blocks = True
 _env.lstrip_blocks = True
-_env.filters['json'] = lambda obj: Markup(json.dumps(obj))
+_env.filters['json'] = lambda obj: Markup(json.dumps(obj, cls=json_dumps))
 _env.filters['conffilter'] = conffilter
 _env.filters['sorted'] = sorted
 
@@ -383,7 +391,7 @@ def bundle_resources(roots, resources, notebook=False, reloading=False, enable_m
     extensions = _bundle_extensions(None, js_resources)
     if reloading:
         extensions = [
-            ext for ext in extensions if not (ext.cdn_url is not None and ext.cdn_url.startswith('https://unpkg.com/@holoviz/panel@'))
+            ext for ext in extensions if not (ext.cdn_url is not None and str(ext.cdn_url).startswith('https://unpkg.com/@holoviz/panel@'))
         ]
 
     extra_js = []
@@ -392,6 +400,8 @@ def bundle_resources(roots, resources, notebook=False, reloading=False, enable_m
     elif mode == "server":
         for bundle in extensions:
             server_url = bundle.server_url
+            if not isinstance(server_url, str):
+                server_url = str(server_url)
             if resources.root_url and not resources.absolute:
                 server_url = server_url.replace(resources.root_url, '', 1)
                 if state.rel_path:
@@ -412,6 +422,13 @@ def bundle_resources(roots, resources, notebook=False, reloading=False, enable_m
         js_raw.append(ext)
 
     hashes = js_resources.hashes if js_resources else {}
+
+    if bokeh34:
+        from bokeh.embed.bundle import URL
+
+        js_files = list(map(URL, js_files))
+        css_files = list(map(URL, css_files))
+
     return Bundle(
         css_files=css_files,
         css_raw=css_raw,
@@ -599,6 +616,8 @@ def adjust_paths(self, resources):
         new_resources = []
         cdn_base = f'{config.npm_cdn}/@holoviz/panel@{JS_VERSION}/dist/'
         for resource in resources:
+            if not isinstance(resource, str):
+                resource = str(resource)
             resource = resource.replace('https://unpkg.com', config.npm_cdn)
             if resource.startswith(cdn_base):
                 resource = resource.replace(cdn_base, CDN_DIST)

panel/models/customselect.ts

@@ -1,4 +1,4 @@
-import { Select, SelectView } from "@bokehjs/models/widgets/selectbox"
+import { Select, SelectView } from "@bokehjs/models/widgets/select"
 import * as p from "@bokehjs/core/properties"
 
 

panel/models/datetime_picker.ts

@@ -74,15 +74,16 @@ export class DatetimePickerView extends InputWidgetView {
     return [...super.stylesheets(), flatpickr_css]
   }
 
+  _render_input(): HTMLElement {
+    return this.input_el = input({type: "text", class: inputs.input, disabled: this.model.disabled})
+  }
+
   render(): void {
     if (this._picker != null)
       return
 
     super.render()
 
-    this.input_el = input({type: "text", class: inputs.input, disabled: this.model.disabled})
-    this.group_el.appendChild(this.input_el)
-
     const options: flatpickr.Options.Options = {
       appendTo: this.group_el,
       positionElement: this.input_el,

panel/models/file_download.ts

@@ -8,7 +8,7 @@ import {Icon, IconView} from "@bokehjs/models/ui/icons/icon"
 
 import buttons_css, * as buttons from "@bokehjs/styles/buttons.css"
 import type {StyleSheetLike} from "@bokehjs/core/dom"
-import {prepend, nbsp, text, button} from "@bokehjs/core/dom"
+import {prepend, nbsp, text, button, input} from "@bokehjs/core/dom"
 
 function dataURItoBlob(dataURI: string) {
   // convert base64 to raw binary data held in a string
@@ -37,6 +37,7 @@ export class FileDownloadView extends InputWidgetView {
 
   anchor_el: HTMLAnchorElement
   button_el: HTMLButtonElement
+  input_el: HTMLInputElement  // HACK: So this.input_el.id = "input" can be set in Bokeh 3.4
   _downloadable: boolean = false
   _click_listener: any
   _prev_href: string | null = ""
@@ -75,10 +76,7 @@ export class FileDownloadView extends InputWidgetView {
     }
   }
 
-  render(): void {
-    super.render()
-    this.group_el.style.display = "flex"
-    this.group_el.style.alignItems = "stretch"
+  _render_input(): HTMLElement {
     // Create an anchor HTML element that is styled as a bokeh button.
     // When its 'href' and 'download' attributes are set, it's a downloadable link:
     // * A click triggers a download
@@ -127,7 +125,14 @@ export class FileDownloadView extends InputWidgetView {
       this.anchor_el.addEventListener("click", this._click_listener)
     }
     this.button_el.appendChild(this.anchor_el)
-    this.group_el.appendChild(this.button_el)
+    this.input_el = input() // HACK: So this.input_el.id = "input" can be set in Bokeh 3.4
+    return this.button_el
+  }
+
+  render(): void {
+    super.render()
+    this.group_el.style.display = "flex"
+    this.group_el.style.alignItems = "stretch"
   }
 
   stylesheets(): StyleSheetLike[] {

panel/models/plotly.ts

@@ -316,7 +316,7 @@ export class PlotlyPlotView extends HTMLBoxView {
   }
 
   _get_trace(index: number, update: boolean): any {
-    const trace = clone(this.model.data[index]);
+    const trace = clone(this.model.data[index]) as any;
     const cds = this.model.data_sources[index];
     for (const column of cds.columns()) {
       let array = cds.get_array(column)[0];

panel/models/reactive_html.ts

@@ -138,7 +138,8 @@ export class ReactiveHTMLView extends HTMLBoxView {
     super.connect_signals()
     this.connect(this.model.properties.children.change, async () => {
       this.html = htmlDecode(this.model.html) || this.model.html
-      await this.rebuild()
+      await this.build_child_views()
+      this.invalidate_render()
     })
     this._recursive_connect(this.model.data, true, '')
     this.connect(this.model.properties.events.change, () => {

panel/models/singleselect.ts

@@ -21,7 +21,10 @@ export class SingleSelectView extends InputWidgetView {
 
   render(): void {
     super.render()
+    this.render_selection()
+  }
 
+  _render_input(): HTMLElement {
     const options = this.model.options.map((opt) => {
       let value, _label
       if (isString(opt))
@@ -43,9 +46,7 @@ export class SingleSelectView extends InputWidgetView {
     this.input_el.style.backgroundImage = 'none';
 
     this.input_el.addEventListener("change", () => this.change_input())
-    this.group_el.appendChild(this.input_el)
-
-    this.render_selection()
+    return this.input_el
   }
 
   render_selection(): void {