More flexible control over ReactiveHTML child rendering

[philippjfr]

This PR aims to provide better control over the way children of DOM nodes are rendered inside ReactiveHTML. Specifically this PR adds a _child_config parameter. Additionally this PR renames the _html to _template.

Child types

• 'model': The children are treated as Panel components, converted using pn.panel and inserted by bokeh as model roots.
• 'literal': The children are treated as a literal string.
• 'template': The child parameter treated like other DOM attributes, i.e. they are templated into the _template and bi-directionally synced.

Child templates

The _child_config may also declare a child template which will be used to wrap children which are of'model' and 'literal' type.

Example

This kind of control is important for many types of component, e.g. here is a <select> component which has to template its children:

class Select(ReactiveHTML, SelectBase):
    
    value = param.Parameter()
    
    _child_config = {'options': 'literal'}

    _template = """
      <div>
        <b>${name}</b>
        <select onchange="${_on_change}" id="select">
          {% for option in options %}
            <option>${options[{{ loop.index0 }}]}</option>
          {% endfor %}
        </select>
      </div>'
    """

    _rename = {}
    
    def _on_change(self, event):
        self.value = self._items[event.data['value']]

    def _process_children(self, children):
        children['select'] = self.labels
        return children

Fixes #2114

[MarcSkovMadsen]

Should this be renamed to ReactiveTemplate or just Reactive then @philippjfr ?

[codecov]

Codecov Report

Merging #2115 (184ca13) into master (43de0fa) will decrease coverage by 0.40%.
The diff coverage is 74.19%.

@@            Coverage Diff             @@
##           master    #2115      +/-   ##
==========================================
- Coverage   84.27%   83.86%   -0.41%     
==========================================
  Files         182      182              
  Lines       21415    21095     -320     
==========================================
- Hits        18047    17692     -355     
- Misses       3368     3403      +35     

Impacted Files	Coverage Δ
panel/reactive.py	74.89% <67.30%> (-2.33%)	⬇️
panel/models/reactive_html.py	77.11% <80.64%> (+0.27%)	⬆️
panel/tests/test_reactive.py	98.95% <100.00%> (+0.09%)	⬆️
panel/config.py	46.15% <0.00%> (-5.79%)	⬇️
panel/auth.py	36.21% <0.00%> (-3.30%)	⬇️
panel/pane/ipywidget.py	47.05% <0.00%> (-2.95%)	⬇️
panel/io/callbacks.py	54.16% <0.00%> (-2.42%)	⬇️
panel/tests/template/test_manual.py	60.63% <0.00%> (-2.37%)	⬇️
panel/io/state.py	58.42% <0.00%> (-2.28%)	⬇️
panel/pane/plot.py	54.33% <0.00%> (-2.26%)	⬇️
... and 85 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 43de0fa...184ca13. Read the comment docs.

[philippjfr]

Merging and releasing a dev release. This will need revisiting and further tweaking though. @xavArtley Note that you have to rename _html to _template on your ReactiveHTML components.