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 (Cached)

1. Templates gets parsed into JSX-like AST.
2. Loop through AST to build template elements 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. Holes and Components locations are marked with Comment Nodes.
3. 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. (Text Nodes skipped)
3. Dynamic properties are collected from AST and applied via spread.
4. When insert or component Comment nodes are hit, they are applied with insert

Performance

• 1.25 in js-framework-benchmark (Compiled Solid ~ 1.10)

[trusktr]

Using the html5parser adds bundle size. Using DOMParser wouldn't. However html mode is case-insensitive, which requires some additional processing of templates. xml mode is case-sensitive.

I'm more in favor of leaning on the platform. But I think @ryansolid it's really up to you exactly which direction you are ok with.

[titoBouzout]

ok, this is a list of every issue in solid/dom-expressions related to the tagged template feature.

Some would become obsolete/fixed by this PR, but there are a bunch that would require testing/test cases. Im dealing with some unrelated PRs right now, if nobody does it first I will eventually get to this.

• [html] closing tag with component renders extra ">" character in output #156
• bug: tagged template literals error when dynamic tag and quoted text as children #248
• [html] top level <style> causes TypeError: Cannot read properties of undefined (reading 'firstChild') #268
• [html] empty html template causes TypeError: Cannot read properties of undefined (reading 'name') #269
• lit-dom-expressions doesn't set value-less props as true #399
• [lit-html] expressions being assigned to incorrect element attributes #403
• SVG fragments do not render when using html tagged template literals solidjs/solid#1879
• Using imported object for style attribute is reevaluated if other attribute uses updated signal solidjs/solid#1938
• [html] Unable to use a <template> element in html template solidjs/solid#1967
• [solid-js/html] attr:foo="123" in html template outputs as verbatim attr:foo="123", inconsistent with JSX solidjs/solid#1996
• [solid-js/html] template assigns values to wrong element properties solidjs/solid#2019
• [solid-js/html] template marker <!--#-- ends up as attribute value solidjs/solid#2022
• [solid-js/html] <Show> inside html causes TypeError: Cannot read properties of undefined (reading 'keyed') solidjs/solid#2032
• [solid-js/html] <Show> in html template renders function source code to DOM solidjs/solid#2033
• [html] html template can fail to include text nodes in the output solidjs/solid#2299
• [html] html template function throws error, if no tags are included solidjs/solid#2334
• [html] failure to initially run effect solidjs/solid#2580
• [html] runtime error: props undefined in <For> solidjs/solid#2582

[titoBouzout]

Linking for reference

• https://x.com/RyanCarniato/status/2024161784001941527
• https://bsky.app/profile/ryansolid.bsky.social/post/3mf5jd7vdpc2a