html template tag formatting white space like actual HTML

[trusktr]

Not sure if this should be posted as a bug, so posting here.

The HTML inside an ```` html`` ``` template tag string does not get its white space formatted the same as plain HTML. Same with JSX.

In plain HTML, all adjacent white space (including new lines) collapses into a single space. But in html, new lines collapse into no space.

This is some example markup:

        <div class="ui">
          <fieldset>
            <legend>Rotation</legend>
            <label>
              <input type="checkbox" checked=\${() => this.rotationEnabled} onChange=\${this.toggleRotation} /> Enable
              rotation.
            </label>
            <br />
            <label>
              <input
                type="checkbox"
                checked=\${() => this.rotationDirection < 0}
                onChange=\${this.toggleRotationDirection}
              />
              Clockwise rotation.
            </label>
          </fieldset>
          <fieldset>
            <legend>View</legend>
            <label>
              <input type="radio" name="side" checked=\${() => this.view === 'side'} onChange=\${this.changeView} />
              Side view.
            </label>
            <br />
            <label>
              <input type="radio" name="top" checked=\${() => this.view === 'top'} onChange=\${this.changeView} /> Top
              view
            </label>
            <br />
            <label>
              <input type="radio" name="free" checked=\${() => this.view === 'free'} onChange=\${this.changeView} />
              Free view
            </label>
          </fieldset>
        </div>

in plain HTML, the output looks like this:

In Solid html or JSX templates, the pasted HTML looks like this:

I love that Solid's templating is closer to HTML than, for example, React JSX.

It would be great if Solid templating space treatment would match HTML. What is important is that, even if a beginner doesn't know about the spacing rules, pasting some markup into a Solid template should yield the same result as much as possible.

I think it would be at least safe to fix this in the html template tag. As for JSX, tools like prettier will already re-format lines properly using {" "} to preserve spaces, so this isn't as much of a problem in the JSX case. But I still think if it is possible to also match the same behavior in JSX, then everything will be more consistent, and Solid will be that much more of a DOM library rather than a new-DOM library trying to re-invent existing rules and spawning a generation of devs that know different rules (React world).

On a higher level, matching with HTML semantics really makes Solid shine in my eyes. I love it: It's a lib on top of DOM for the DOM, not a lib that molds DOM into a misaligned version without its own trees abstracting original DOM away.

[ryansolid]

Removing the excess text nodes actually make a reasonable performance consideration. Some early experiments didn't and wrongly assumed cloning was slower than individual create. So definitely want to remove most of them.

First scenario:

<div>
  <span />
  <span />
  <span />
</div>

This generates the following AST:

JSXElement
-  JSXText
-  JSXElement
-  JSXText
-  JSXElement
-  JSXText
-  JSXElement
-  JSXText

Or if minimizing to single space:
<div> <span/> <span/> <span/> </div>
I'm positive for this case we want what I'm currently doing:
<div><span/><span/><span/></div>

Second scenario:

<div>
  <span />
  Hi
  Joe
</div>

This generates the following AST:

JSXElement
-  JSXText
-  JSXElement
-  JSXText

If minimizing to a single space would become:
<div> <span/> Hi Joe </div>
I currently output:
<div><span/>Hi Joe</div>
Is the desired output:
<div><span/> Hi Joe</div>?