1. Summary
Implemented a lightweight fix in HtmlTemplateProcessor.mjs to correctly handle self-closing custom component tags (e.g., <MyComponent /> or <${Button} />).
2. Rationale
The parse5 library, while robust for HTML, does not correctly parse self-closing tags for custom elements that are not standard HTML void elements. This would lead to incorrect VDOM structures. The initial thought was to use a full JS parser like acorn to identify these, but that would add a significant overhead (~120KB) to the zero-builds development environment. The chosen solution is much more efficient.
3. Scope & Implementation Plan
- Identify the Issue: Confirmed that
parse5 fails to create a proper AST for templates containing self-closing custom component tags.
- Implement Regex Pre-processing:
- A new regular expression (
selfClosingComponentRegex) was added to HtmlTemplateProcessor.mjs.
- This regex specifically finds component tags (identified by starting with a capital letter or being a
neotag placeholder) that are self-closed (/>).
- Before passing the template string to
parse5, a replace() call uses this regex to convert the self-closing tag into a standard tag with an explicit closing tag (e.g., <MyComponent /> becomes <MyComponent></MyComponent>).
- Ensure Specificity: The regex is carefully crafted to not affect standard HTML void elements (like
<br>, <img>), ensuring correct HTML parsing is preserved.
- Cleanup: Removed unused imports for
acorn and astring from HtmlTemplateProcessor.mjs as they were no longer needed.
4. Definition of Done
HtmlTemplateProcessor.mjs now correctly parses templates containing self-closing custom components.- The fix is implemented with a minimal performance footprint, avoiding large new dependencies in the development build.
- Standard HTML void elements are unaffected and continue to parse correctly.
- Unnecessary
acorn and astring imports have been removed from the processor.
1. Summary
Implemented a lightweight fix in
HtmlTemplateProcessor.mjsto correctly handle self-closing custom component tags (e.g.,<MyComponent />or<${Button} />).2. Rationale
The
parse5library, while robust for HTML, does not correctly parse self-closing tags for custom elements that are not standard HTML void elements. This would lead to incorrect VDOM structures. The initial thought was to use a full JS parser likeacornto identify these, but that would add a significant overhead (~120KB) to the zero-builds development environment. The chosen solution is much more efficient.3. Scope & Implementation Plan
parse5fails to create a proper AST for templates containing self-closing custom component tags.selfClosingComponentRegex) was added toHtmlTemplateProcessor.mjs.neotagplaceholder) that are self-closed (/>).parse5, areplace()call uses this regex to convert the self-closing tag into a standard tag with an explicit closing tag (e.g.,<MyComponent />becomes<MyComponent></MyComponent>).<br>,<img>), ensuring correct HTML parsing is preserved.acornandastringfromHtmlTemplateProcessor.mjsas they were no longer needed.4. Definition of Done
HtmlTemplateProcessor.mjsnow correctly parses templates containing self-closing custom components.acornandastringimports have been removed from the processor.