This ticket documents a significant enhancement to Neo.button.Base, allowing its text config to accept a VDOM cn (children) array in addition to a standard string. This provides a cleaner, more secure, and more performant way to define complex button content.
Problem
Previously, creating a button with mixed content (e.g., an icon or styled text next to plain text) required workarounds. A temporary solution involved parsing the text string for HTML, which was convenient but had several drawbacks:
- It was architecturally inconsistent with the framework's VDOM-first approach.
- It relied on setting
innerHTML, which is a potential Cross-Site Scripting (XSS) security risk.
- It was inefficient, as any change required replacing the entire button content instead of allowing for granular updates.
Solution
The afterSetText method in src/button/Base.mjs has been updated to intelligently handle its value:
- If the
value is a String, it is assigned to the textNode.text property as before.
- If the
value is an Array, it is treated as a VDOM cn array and assigned to the textNode.cn property.
This allows developers to define rich button content using a standard VDOM structure.
Example
{
handler: 'onSeriesButtonClick',
series : 'active',
text : '<span style="color: #64b5f6">●</span> Active'
}
{
handler: 'onSeriesButtonClick',
series : 'active',
text : [{tag: 'span', style: {color: '#64b5f6'}, text: '●'}, {vtype: 'text', text: ' Active'}]
}
Key Advantages
Cleaner & More Consistent API: This change aligns button.Base with the rest of the framework. Developers can now compose button content using the same declarative VDOM structure they use everywhere else, making the API more predictable and idiomatic.
XSS Secure by Default: By processing a VDOM structure instead of an HTML string, the framework builds the DOM programmatically. This completely avoids the use of innerHTML for the button's content, eliminating the risk of XSS attacks from malicious strings.
Enables Granular Delta Updates: When the button's content is part of the VDOM tree, the framework's diffing engine can perform highly efficient delta updates. If only one part of the button's content changes (e.g., a number in a label), only that specific text node will be updated in the DOM, rather than re-rendering the entire button's content. This significantly improves rendering performance for dynamic buttons.
This ticket documents a significant enhancement to
Neo.button.Base, allowing itstextconfig to accept a VDOMcn(children) array in addition to a standard string. This provides a cleaner, more secure, and more performant way to define complex button content.Problem
Previously, creating a button with mixed content (e.g., an icon or styled text next to plain text) required workarounds. A temporary solution involved parsing the
textstring for HTML, which was convenient but had several drawbacks:innerHTML, which is a potential Cross-Site Scripting (XSS) security risk.Solution
The
afterSetTextmethod insrc/button/Base.mjshas been updated to intelligently handle itsvalue:valueis aString, it is assigned to thetextNode.textproperty as before.valueis anArray, it is treated as a VDOMcnarray and assigned to thetextNode.cnproperty.This allows developers to define rich button content using a standard VDOM structure.
Example
// Before (using an HTML string hack, plus regression issue in v10) { handler: 'onSeriesButtonClick', series : 'active', text : '<span style="color: #64b5f6">●</span> Active' } // After (using a clean VDOM array) { handler: 'onSeriesButtonClick', series : 'active', text : [{tag: 'span', style: {color: '#64b5f6'}, text: '●'}, {vtype: 'text', text: ' Active'}] }Key Advantages
Cleaner & More Consistent API: This change aligns
button.Basewith the rest of the framework. Developers can now compose button content using the same declarative VDOM structure they use everywhere else, making the API more predictable and idiomatic.XSS Secure by Default: By processing a VDOM structure instead of an HTML string, the framework builds the DOM programmatically. This completely avoids the use of
innerHTMLfor the button's content, eliminating the risk of XSS attacks from malicious strings.Enables Granular Delta Updates: When the button's content is part of the VDOM tree, the framework's diffing engine can perform highly efficient delta updates. If only one part of the button's content changes (e.g., a number in a label), only that specific text node will be updated in the DOM, rather than re-rendering the entire button's content. This significantly improves rendering performance for dynamic buttons.