How do you create a text content with mixed html

[iongion]

I am trying to migrate JSX

<div class="Callout">
  Long-form information about the important content. This text is styled
  as <a href="#core/typography.running-text">"Running text"</a>, so it
  may contain things like headers, links, lists,
  <code class="bp4-code">code</code> etc.
</div>

Supposed we have Callout function implemented, how is the Long-form information... supposed to be created, as it also has an <a> and a <code> mixed in ?

Is there a type of node / element without tag, much like Fragment in react ?

[artydev]

Hello have tried HTML to VanJS converter ?

Demo

Regards

[iongion]

Sure, but I want it programmatically

[artydev]

What do you think of this Demo:

import van from "./van.js"

const { span, h1, div, form, input, label, button, hr } = van.tags

const add = (base) => (elt) => van.add(base, elt)

const target = document.getElementById("app");


function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}


const s = `<div class="Callout">
  Long-form information about the important content. This text is styled
  as <a href="#core/typography.running-text">"Running text"</a>, so it
  may contain things like headers, links, lists,
  <code class="bp4-code">code</code> etc.
</div>`

const CallOut = htmlToElement(s)

add(app)(
  div(
    h1("Hello"),
    CallOut
  )
)

[iongion]

Sure, that could work, but is it vanjs idiomatic ?

Other ways to create nodes from string source

• new DOMParser().parseFromString(htmlSource, 'text/html')
• Using createContextualFragment

[artydev]

VanJS is very minimalistic, and so, there are many egde cases where you have to create or bring your own tools
in order to keep it thin.

There is no specially VanJS way of doing things.
You can adopt the procedural way, the functional way, the object oriented way, it is up to you.

VanJS doesn't impose you anything regarding the coding way, only some advises :-)

Regards

[Tao-VanJS]

The most straightforward way in VanJS is to use primitive-valued arguments (string, number, etc.) in tag functions to represent Text node. Thus as @artydev mentioned, the code generated with VanJS converter is pretty idiomatic.

That said, the solution mentioned in #21 (reply in thread) also works. VanJS is unopinionated thus you can choose the way you like as long as you have a good understanding of the behavior of the code :-)