Stricter validation for linking syntax in ReactiveHTML._template

[philippjfr]

Improved validation for #2684

class Slideshow(ReactiveHTML):

    index = param.Integer(default=0)

    _template = '<img src="https://picsum.photos/800/300?image=${index}" onclick="${_callback}"></img>'

    def _callback(self, event):
        self.index += 1

now raises:

ValueError: DOM nodes with an attached callback must declare an id. Found node with onclick callback referencing _callback method. Add an id attribute like this: <img id="img" onclick="${_callback}>...</img>.

and:

    _template = '<img src="https://picsum.photos/800/300?image=${index}"></img>'

raises:

ValueError: DOM node with a linked parameter declaration must declare an id. Found node with the src attribute referencing the index parameter. Either declare an id on the node, i.e. <img id="img" src="https://picsum.photos/800/300?image=${index}">...</img>, or insert the value as a literal: <img src="https://picsum.photos/800/300?image={{index}}">...</img>.

Being stricter about this validation should eliminate a lot of confusion about linked parameters (${parameter}) and literal values ({{ index }}) and also alert that their callbacks won't fire unless they add an id.

[codecov]

Codecov Report

Merging #2689 (d76c313) into master (492f418) will increase coverage by 0.01%.
The diff coverage is 91.42%.

@@            Coverage Diff             @@
##           master    #2689      +/-   ##
==========================================
+ Coverage   81.80%   81.82%   +0.01%     
==========================================
  Files         187      187              
  Lines       23847    23878      +31     
==========================================
+ Hits        19509    19537      +28     
- Misses       4338     4341       +3     

Impacted Files	Coverage Δ
panel/models/reactive_html.py	80.28% <90.47%> (+1.08%)	⬆️
panel/tests/test_reactive.py	98.68% <92.85%> (-0.38%)	⬇️

---

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 492f418...d76c313. Read the comment docs.

[MarcSkovMadsen]

Best way to go 👍