Error updating component with static template

[Kal-Aster]

Help us to manage our issues by answering the following:

1. Describe your issue:

As the title says I encountered an error when a component of mine, that has a static template because it then manipulate autonomously the dom, is updated.
At the mounting stage it runs properly, but when it is updated it throws the following error:

Uncaught TypeError: e.bindingsData[0] is undefined

This is the affected line:
template?.bindingsData?.[0].expressions?.reduce(
and I think that it could be simply edited like:
template?.bindingsData?.[0]?.expressions?.reduce(

2. Can you reproduce the issue?

Yes: here
initially everything is ok, but when the button "update" is pressed, it throws the aforementioned error.

3. On which browser/OS does the issue appear?

I think everyone, but I encountered it on Firefox on Windows 10

4. Which version of Riot does it affect?

9.1.5

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

[GianlucaGuarini]

Thank you, would you mind adding a test and patching this method?
I'll be glad to review your PR

[Kal-Aster]

I'll do asap.

Just a couple questions to understand better the scenario and craft accurate test cases:

• why bindingsData is a list?
• if bindingsData is a list for a good reason (and I think so): why is it considered just the first item in this function?

[GianlucaGuarini]

why bindingsData is a list?

You can play a bit here -> https://riot.js.org/online-compiler/
A Riot.js component/template is compiled detecting all of its bindings. The static parts of the template are simply rendered as strings, while its bindings will be updated in runtime.
For example

<my-tag>
  <h1>{props.title}</h1>
  <p>{props.message}</p>
  <small>hey there</small>
</my-tag>

The above template has 2 Text bindings set on the my-tag template. If you want to know more about Riot.js bindings you might read also this readme https://github.com/riot/dom-bindings

if bindingsData is a list for a good reason (and I think so): why is it considered just the first item in this function?

Since the bindings are detected from the root node, the first either belongs to the root node or to the first tag of the component.
The getRootComputedAttributeNames aims to fix #2994 so its implementation checks for attributes on the root node to filter them out from recursive computations.

I think that the method might be slightly improved, because now also nested bindings might filter out props on the root node. I will patch it asap but I hope that this explanation clarifies a bit how Riot.js works internally

[Kal-Aster]

I see you committed a solution. I was about to edit the code but it seems that there’s no need anymore.

Thank you for the explanation! Very helpful.
However why is it considered only the first binding? Can't the root component have multiple bindings?