html.trim

[tbranyen]

Currently, diffHTML makes it slightly more complicated to use outerHTML when you have leading and trailing whitespace. This makes a #document-fragment with [#text,div, #text] as children:

import { html } from 'diffhtml';

export default () => html`
  <div></div>
`;

This feature would allow someone to write:

import { html } from 'diffhtml';

export default () => html.trim`
  <div></div>
`;

When invoked this function would return only a <div /> VTree. There is probably a better way of solving this.

[tbranyen]

One question would be using this with isStrict. I suppose options could be passed, but perhaps a chaining mechanism would make sense so you could do something like:

html.strict.trim`
  <div></div>
`

or

html.trim.strict`
  <div></div>
`

[tbranyen]

This isn't a good idea, if we implemented this, we'd end up introducing code like:

html.strict.trim.something.else`
  <div id="test">hello world</div>
`

The better way of addressing this is to introduce a parser option which can be configured to trim white space.

[tbranyen]

Ultimately the problem here seems to be that diffHTML doesn't handle newlines well in some cases. This motivates the need for a trim. Someone could just reformat their code to support this natively, without any changes. This will not look as consistent as other template blocks.

If diffHTML handled the newlines better for outerHTML, this would be less of an overall problem.

[tbranyen]

Turns out this can be solved with outerHTML. When diffing take the first match and interpolate the rest.