How to add raw HTML child in isomorphic components (van & van-plate)?

[btakita]

I could not find a way to add raw html as a child element. A DocumentFragment can be used to add HTML for DOM rendering but does not work on the server.

Is there an API to render raw html?

[Tao-VanJS]

1. Usually this is not recommended due to security concerns.
2. Does setting outerHTML or innerHTML properties of the elements work for your use case?

[btakita]

For the DOM, I would rather not have to use innerHTML, since it would require extra elements. DocumentFragment would work better. Perhaps a solution where van-core uses DocumentFragment for the DOM & van-plate just adds the given HTML directly into the buffer?

This could be a vanX function...

[Tao-VanJS]

I am confused. In the example you listed in #160:

function fragment_(html:string) {
	const frag = document.createDocumentFragment()
	const temp = document.createElement('div')
	temp.innerHTML = html
	while (temp.firstChild) {
		frag.appendChild(temp.firstChild)
	}
	return frag
}

An extra element is used and innerHTML property is set. What's the extra benefit that DocumentFragment can offer but the alternative solution couldn't?

[Tao-VanJS]

In theory, for van-plate mode, we are able to add support for directly appending HTML snippet. Concatenating a string without escaping will just do that.

However, what's on top of my mind is whether we really want to do it. Appending raw HTML strings in VanJS/Mini-Van introduces security risks of HTML injection.

If you want to work with existing HTML files (or even MD files), you can use 3rd party DOM parsers. For instance, the code for generating https://vanjs.org/ website is using deno-dom to parse the DOM from a template file: https://github.com/vanjs-org/vanjs-org.github.io/blob/5163b969411e38fedad658057a6e9d93bfb2cdba/sitegen/render.ts#L24. Alternatively, you can also take a look at VanJS Code Converter, which can convert any HTML or MD snippet into valid VanJS code.

[btakita]

An extra element is used and innerHTML property is set. What's the extra benefit that DocumentFragment can offer but the alternative solution couldn't?

In https://jsfiddle.net/btakita/L03b79dp/4/, we can compare the dom trees.

const Hello = () => div(
  p("👋Hello ", fragment_("<em>there</em><b>!!!</b>")),
  p("👋Hello ", span({ innerHTML: "<em>there</em><b>!!!</b>"})),
)

produces:

<div>
<p>👋Hello <em>there</em><b>!!!</b></p>
<p>👋Hello <span><em>there</em><b>!!!</b></span></p>
</div>

[Tao-VanJS]

I see your point! I will look into this to see if I can get something helpful.

[Tao-VanJS]

Mini-Van 0.5.3 was released. The 0.5.3 release added support of Node type (derived from Element["childNode"]) as parameters of tag functions. Thus with this release, DocumentFragment (which is a subtype of Node) becomes valid parameter of tag functions.

For sample usage, you can refer to this test case:

fragment: () => {
  const fragment = new DocumentFragment
  fragment.append(div(1), div(2))
  const dom = div(div(0), fragment)
  assertEq(dom.outerHTML, "<div><div>0</div><div>1</div><div>2</div></div>")
}

Let me know if it's helpful for your use cases.

The solution is a little bit hacky, though. Future changes of childNode implementation in the 3rd party DOM library you're using might break the type compatibility. You can report an issue if this happens in the future.