Backticks break ReactiveHTML templating

[MarcSkovMadsen]

I'm on the main branch of Panel trying to find examples that show that param and __doc__ can actually be used using Jinja2 templating.

I would expect the below to output a list of parameter doc values.

import panel as pn
import param

pn.extension()


class CustomComponent(pn.reactive.ReactiveHTML):
    """I'm a custom ReactiveHTML component"""
    value = param.String("My value", doc="My Documentation")

    _template = """
<p>{{ param.value.doc }})</p>
<p id="loop">
{% for object in param.params().values() %}
<div>{{object.doc}}</div>
{% endfor %}
</p>
"""
CustomComponent(value="A new value", width=500).servable()

But it does not.

bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:163  Error rendering Bokeh items: TypeError: html(...) is not a function
    at eval (eval at _render_html (panel.min.js?v=99aabb6a9103ff3217ba97b3ebc7c607739a51323ce984684044c0d582cea0e1:136:5530), <anonymous>:17:52)
    at v._render_html (panel.min.js?v=99aabb6a9103ff3217ba97b3ebc7c607739a51323ce984684044c0d582cea0e1:136:5613)
    at v._update (panel.min.js?v=99aabb6a9103ff3217ba97b3ebc7c607739a51323ce984684044c0d582cea0e1:136:7596)
    at v.render (panel.min.js?v=99aabb6a9103ff3217ba97b3ebc7c607739a51323ce984684044c0d582cea0e1:136:3210)
    at v.render_to (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:554:6277)
    at bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:218:375
    at async f (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:218:198)
    at async t.add_document_standalone (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:218:459)
    at async k (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:163:812)

[MarcSkovMadsen]

I can see the issue is the aspect_ratio parameter

import panel as pn
import param

pn.extension()


class CustomComponent(pn.reactive.ReactiveHTML):
    """I'm a custom ReactiveHTML component"""
    value = param.String("My value", doc="My Documentation")

    _template = """
<p>{{ param.aspect_ratio.doc }})</p>
"""
CustomComponent(value="A new value", width=500).servable()

[MarcSkovMadsen]

I can see the problem is the tilde '`' similar to #5499

If I replace the tilde as below it works.

import panel as pn
import param

pn.extension()


class CustomComponent(pn.reactive.ReactiveHTML):
    """I'm a custom ReactiveHTML component"""
    value = param.String("My value", doc="My Documentation")

    _template = """
<p>{{ param.aspect_ratio.doc| replace("`", "") }})</p>
"""
component = CustomComponent(value="A new value", width=500).servable()

[philippjfr]

Note that '`' is called a backtick, this ~ is a tilde.