ReactiveHTML: TypeError: Object of type Button is not JSON serializable

[MarcSkovMadsen]

I'm on Panel 0.12.1 and trying to create a floating panel using jsPanel and ReactiveHTML https://discourse.holoviz.org/t/how-do-i-use-jspanel-with-panel-and-reactivehtml/2819.

While experimenting I get the error

  File "C:\Users\masma\Anaconda3\envs\aw-lib\lib\json\encoder.py", line 257, in iterencode
    return _iterencode(o, 0)
  File "C:\Users\masma\Anaconda3\envs\aw-lib\lib\site-packages\bokeh\core\json_encoder.py", line 261, in default
    return self.transform_python_types(obj)
  File "C:\Users\masma\Anaconda3\envs\aw-lib\lib\site-packages\bokeh\core\json_encoder.py", line 228, in transform_python_types
    return super().default(obj)
  File "C:\Users\masma\Anaconda3\envs\aw-lib\lib\json\encoder.py", line 179, in default
    raise TypeError(f'Object of type {o.__class__.__name__} '
TypeError: Object of type Button is not JSON serializable

from

import panel as pn
import param

pn.extension()


class JsPanel(pn.reactive.ReactiveHTML):
    object = param.Parameter()

    _template = """
<div id="element">My content</div>
"""
JsPanel(object=pn.widgets.Button(name="My Widget")).servable()

I believe there are use cases where the reactiveHTML class would like to hold Panel widgets.

[arifin-chemist89]

As user cases that Marc have shown here, reactiveHTML could be potentially to be used as a wrapper for panel objects to improve its applicability. Really hope this could be implemented soon.

[philippjfr]

This is supported, the error message just sucks, you have to actually insert the object into the template though:

import panel as pn
import param

class JsPanel(pn.reactive.ReactiveHTML):
    object = param.Parameter()

    _template = """
<div id="element">${object}</div>
"""

JsPanel(object=pn.widgets.Button(name="My Widget"))

[MarcSkovMadsen]

My use case is to NOT insert it into the ReactiveHTML _template. That seems not be supported then?

[philippjfr]

Oh, I think you can do that by setting a negative precedence on the parameter.

[philippjfr]

Okay let's discuss some behaviors that we could consider here. I think the best solution here is to check whether a parameter is referenced in the template or in a script and if it isn't we simply do not sync it. This will require some additional parsing of the scripts but overall seems fairly straightforward and most sensible.