`js
const Hello = text => div(
p("👋Hello"),
ul(
li(text),
li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
),
)

const Counter = ({initValue}) => {
const counter = van.state(initValue)
return button({onclick: () => ++counter.val}, counter)
}
`

You can simply specify the input HTML string like this:

`html


Hello

`js
h2(
"Hello",
),
Hello(
"🗺️World",
),
h2(
"Counter",
),
Counter({initValue: "1"}),
Counter({initValue: "2"}),
`

$3

* indent: Type number. Default 2. Optional. The indent level of the generated VanJS code.
* spacing: Type boolean. Default false. Optional. The style of the property object in the generated VanJS code. If true, the property object will look like {href: "https://vanjs.org/"}; Otherwise, the property object will look like { href: "https://vanjs.org/" }.
* skipEmptyText: Type boolean. Default false. Optional. Whether to skip empty text nodes in the generated VanJS code. For instance, the HTML snippet:

`html


`js
div(
p(
"👋Hello",
),
ul(
li(
"🗺️World",
),
li(
a({href: "https://vanjs.org/"},
"🍦VanJS",
),
),
),
)
`

if skipEmptyText is true. But it will be converted to:

`js
div(
"\n ",
p(
"👋Hello",
),
"\n ",
ul(
"\n ",
li(
"🗺️World",
),
"\n ",
li(
a({href: "https://vanjs.org/"},
"🍦VanJS",
),
),
"\n ",
),
"\n",
)
`

if skipEmptyText is false.

* htmlTagPred: Type (name: string) => boolean. Default s => s.toLowerCase() === s. Optional. A predicate function to check whether a specific tag snippet such as should be treated as a native HTML element or a custom UI component built with VanJS. By default, it will be treated as a native HTML element if the letters in the name are all lowercase.

$3

A plain object with the following fields:
* code: A string[] for all lines of the generated VanJS code.
* tags: A string[] for all HTML tag names used in the generated VanJS code, which can be used in the importing line of tag functions such as:
`js
const {} = van.tags
`
* components: A string[] for all custom VanJS components used in the generated VanJS code, which can be used in the importing line such as:
`js
import {} from "./my-component-lib.js"
`

$3

_This is only supported in the converter library, not in the UI._

There are 2 special cases while specifying custom VanJS components in the input HTML string. The first special case is that, sometimes, a custom component needs properties being specified in its first argument, even for empty properties {} (e.g.: the Counter component defined in the section above). In this case, you can specify the special DUMMY property as a placeholder. For instance:

`html
content
`

will be converted to:

`js
CustomElement({},
"content",
)
`

whereas

`html
content
`

will be converted to:

`js
CustomElement(
"content",
)
`

The second special case is that, sometimes, a custom VanJS component needs consecutive string arguments. You can achieve that by inserting element between text pieces. For instance:

`html
🍦VanJShttps://vanjs.org/
`

will be converted to:

`js
Link(
"🍦VanJS",
"https://vanjs.org/",
)
`

mdToVanCode: Convert MD snippet to VanJS Code

$3

`js
mdToVanCode(, ) => {code: , tags: , components: }
`

Under the hood, there are 2 steps for converting an MD snippet to VanJS code:
1. Convert the MD string into an HTML string with Marked library.
2. Convert the HTML string into VanJS code with htmlToVanCode.

$3

`js
mdToVanCode(👋Hello
* 🗺️World
* 🍦VanJS
)
/*
The following result will be returned:
{
code: [
'p(',
' "👋Hello",',
'),',
'ul(',
' li(',
' "🗺️World",',
' ),',
' li(',
' a({href: "https://vanjs.org/"},',
' "🍦VanJS",',
' ),',
' ),',
'),',
],
tags: ["a", "li", "p", "ul"],
components: [],
}
*/
`

Note that, you can insert custom HTML snippets, or even custom VanJS components in the input MD string.

$3

* indent: Type number. Default 2. Optional. The indent level of the generated VanJS code.
* spacing: Type boolean. Default false. Optional. The style of the property object in the generated VanJS code. If true, the property object will look like {href: "https://vanjs.org/"}; Otherwise, the property object will look like { href: "https://vanjs.org/" }.
* htmlTagPred: Type (name: string) => boolean. Default s => s.toLowerCase() === s. Optional. A predicate function to check whether a specific tag snippet such as represents a native HTML element or a custom UI component built with VanJS. By default, it will be considered a native HTML element if the letters in the name are all lowercase.
* renderer: Optional. _Custom renderer is only supported in the converter library, not in the UI._ A custom object used to override how tokens in the MD string are being rendered. The specification of the renderer object can be found in Marked doc. For instance, the renderer object:

`js
{
codespan: s => ${s},
link: (href, _unused_title, text) => ${text}${href},
}
`

will convert text in MD string into Symbol("text") (here Symbol is a custom VanJS component) instead of code("text"), and will convert text in MD string into Link("text", "link") instead of a({href: "link"}, "text").

$3

The same as the return value of htmlToVanCode.

Showroom

The https://vanjs.org/ website is using this library to keep README.md files in sync with their corresponding web pages (source code of the code generation):
* The VanUI page is kept in sync with the README.md file in GitHub with the help of this library.
* This README.md` file is kept in sync with this page in https://vanjs.org/ website.