sld-dom-expressions

[danielrkling]

[Discord discussion] (https://discordapp.com/channels/722131463138705510/1394408373176369202)

Overview

Goals:

• Provide an alternative to current html tagged template literals to more closely match JSX for no-build
• Avoid using a RegExp parser to prevent parsing edge cases.

Main Differences to html

• Components are registered by string to an instance of the sld template.
• Component tags are closed with instead of <//>

Future Tooling Opportunities

• https://github.com/[danielrkling/sld-tools](https://github.com/danielrkling/sld-tools)
• Syntax Highlighter
• Formatter
• Typescript Plugin
• JSX <--> sld transformers

Development Notes

Template Setup

1. Templates get joined with marker & index.
2. Templates get parsed by html5parser (Retains tag casing and otherwise pretty minimal)
3. html5parser AST gets processed for hole indexes, components, text nodes get trimmed etc.
4. AST get's looped through to build out template elements via innerHTML for any root node or component node with element children with the same tree structure. Static attributes are applied to the template and removed from AST.
5. AST and template elements get cached per template literal

Template Run

1. Template is cloned.
2. Clone is walked though in sync with the AST.
3. Dynamic properties are collected from AST and applied via spread.
4. When insert or component nodes are hit, they are applied with insert

Potential areas of improvements

• Write a custom parser designed for tagged templates to parse directly to desired AST.
• Build template nodes with createElement and createTextNode. Have to check tags against namespaced tags (svg mathml). Do we want html encoded characters like × to get decoded.

Performance

• No benchmarks have been performed yet