how to convert mithril.js code to vanjs

[kangaroolab]

hi, wondering if there is an example, tutorial or tool to convert mithril.js code to vanjs, e.g. a tree view based on mithril.js below...how to convert it to vanjs?

function Log() {
    let counter = 1
    let log = []

    let me = {
        add(message) {
            log.push({id: counter++, time: new Date(), message: message})
            return me
        },

        log() {
            console.log(log)
        },

        map(f) {
            return log.map(f)
        }
    }

    return me
}

var log = new Log()
//log.add('test 1').add('test 2')
//log.add('test 3')

App = {
    views: {}
}

App.views.Log = function() {

            let dom = undefined

            let me = {

                view: (vnode) => {
                    //dom && setTimeout(render)
                    return [
                        m('button', {
                                onclick: () => {
                                }
                            },
                            'Redraw'
                        ),

                        m('button', {
                                onclick: (e) => {
                                    e.redraw = false
                                    log = new Log()
                                    render()
                                }
                            },
                            'Clear'
                        ),
                        m('button', {
                            innerHTML: 'Break',
                            onclick: (e) => {
                                e.redraw = false
                                log.add('***')
                                render()
                            }
                        }),

                        m('', {
                            oncreate: (vnode) => {
                                dom = vnode.dom
                                render()
                            },
                            onupdate: () => render()
                        }),

                    ]
                }
            }

            return me

            function render() {
                m.render(dom, [
                    m("span", ["Current time:", new Date().toString()]),
                    log.map((it) => {
                        return m('pre', JSON.stringify(it))
                    })
                ])

            }
        }
//    }
//}

App.views.Node = function (vnode) {

    let key = vnode.attrs.key
    let subnodes = []

    return {
        oninit: (vnode) => {
            log.add(key + ' -- oninit')
        },

        oncreate: (vnode) => {
            log.add(key + ' -- oncreate')
        },

        onupdate: (vnode) => {
            log.add(key + ' -- onupdate')
        },

        onbeforeupdate: (vnode) => {
            log.add(key + ' -- onbeforeupdate')
        },

        onbeforeremove: (vnode) => {
            log.add(key + ' -- onbeforeremove')
        },

        onremove: (vnode) => {
            log.add(key + ' -- onremove')
        },

        view: ({
                   tag,
                   attrs: {remove},
                   output,
               }) => {

            log.add(key + ' -- view (start)')

            let retVnode = m('[style=border: 1px solid; padding: .5em; margin: .5em]', {}, [
                'Node',
                key,
                ' ',

                remove && m('button', {
                    innerHTML: 'x',
                    onclick: remove,
                }),
                m('hr'),

                subnodes.map((key, i) =>
                    m(tag, {
                        key,
                        remove: () =>
                            subnodes.splice(i, 1),
                    })
                ),

                m('button', {
                    innerHTML: '+',
                    onclick: () =>
                        subnodes.push(key + '.' + (subnodes.length + 1))
                }),
            ])

            //setTimeout(() => {
            log.add(key + ' -- view (end)')
            //})
            log.add(subnodes)
            return retVnode
        }
    }

}

m.mount(document.body, {
    view() {
        return [
            m('[style=flex: 0 1 50%; overflow-y: auto;]', m(App.views.Node, {key: 1})),
            m('[style=flex: 1 1 50%; overflow-y: auto;]', m(App.views.Log))
        ]
    }
})

[kangaroolab]

``I managed to convert the node code (see below). however, not sure how to do redraw with vanjs....is van.add the only way to refresh to display new dom element? e.g. when click the + button, how to display new node? then how to remove existing node if clicking on X button?

`App.views.Node = function ({mykey}) {

let key = mykey
let subnodes = []

        log.add(key + ' -- view (start)')

        let retVnode = (mykey) => div({style: 'border: 1px solid; padding: .5em; margin: .5em]'}, [
            'Node',
            key,
            ' ',

            button({
                innerHTML: 'x',
                onclick: () => alert("add remove here"),
            }),
            hr(),

            subnodes.map((key, i) =>
                div({
                    key,
                    remove: () =>
                        subnodes.splice(i, 1),
                })
            ),
            
            button({
                innerHTML: '+',
                onclick: () =>
                    {subnodes.push(key + '.' + (subnodes.length + 1))
                    console.log(subnodes)}
            }),

        ])

        //setTimeout(() => {
        log.add(key + ' -- view (end)')
        //})
       return retVnode()

}
van.add(document.body, div({style: 'flex: 0 1 50%; overflow-y: auto;'}, App.views.Node({mykey: 1})))

[Tao-VanJS]

The tag functions in VanJS just return vanilla DOM nodes. So all the DOM functions like remove and appendChild can just be used as normal.

[kangaroolab]

thanks...could you please advise how to create a tree with vanjs? it seems it is not easy to dynamically add/remove child component if just using html element directly. appreciate any code example

[Tao-VanJS]

I don't think it's not easy to dynamically add/remove child in VanJS. Calling DOM method is just one line of code, for example:

const containerDom = div()
containerDom.appendChild(div("Line 1"))
containerDom.appendChild(div("Line 2"))
containerDom.appendChild(div("Line 3"))
...
containerDom.removeChild(containerDom.firstChild)

[Tao-VanJS]

Actually, I think you will find all the answers after reading the code of demos in "VanJS by Example" page.

[kangaroolab]

Thanks...I did look at the example and also used vanjs app builder which produced following code, but the line I noted below returns sth like [object HTMLLIElement]...remove function doesn't work either. can you please advise how to correct it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VanJS Tree with Delete State</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        const {div, ul, li, button, input, span} = van.tags;

        const TreeNode = ({text}) => {
            const children = van.state([]);
            const deleteState = van.state(false);
            const nodeText = van.state(text);

            return () => deleteState.val ? null : li(
                span({style: "margin-right: 5px;"}, nodeText),
                button({onclick: () => {
                    const newText = prompt("Enter text for new child node:");
                    if (newText) {
                        children.val = [...children.val, TreeNode({text: newText})];
                    }
                }}, "➕ Add Child"),
                button({onclick: () => deleteState.val = true}, "❌ Remove Node"),
                ul(() => children.val.map(child => child()))  //this line never executed
            );
        };

        const Tree = () => {
            const root = TreeNode({text: "Root Node"});
            return div(
                ul(root())
            );
        };

        van.add(document.body, Tree());
    </script>
</body>
</html>

[Tao-VanJS]

I changed the line:

ul(() => children.val.map(child => child()))

into:

() => ul(children.val.map(child => child()))

I think now it works. Basically, for state-derived child node, the derivation function needs to return a single DOM node. Returning an array of nodes doesn't work for VanJS.

[kangaroolab]

it works..thanks very much...maybe this could be another good example to add to the list of examples for others reference

[Tao-VanJS]

Yeah. I can add your example into "Community Examples" section of "VanJS by Example" page if you feel it's ready.

[kangaroolab]

please feel free to add to the example with above line replaced as you advised

[Tao-VanJS]

I won't directly use code from community in "VanJS by Example" page. If you have any link to your specific app, I can include the link in the "Community Examples" section.

[kangaroolab]

I put this together as a pwa app that people can play with and refer as example. please feel free to include in community example

https://kangaroolab.github.io/tippy/

[Tao-VanJS]

Thanks @kangaroolab for providing your example. Where can I find your codebase?

[Tao-VanJS]

I think I have found it: https://github.com/kangaroolab/tippy. Let me know if otherwise.

[Tao-VanJS]

I just added your example there.

[kangaroolab]

cool...thanks...hope it provides some good examples and references. keep up with the good work of vanjs...I love it and plan to continue using it for my app development

[kangaroolab]

regarding your comment:

I think now it works. Basically, for state-derived child node, the derivation function needs to return a single DOM node. Returning an array of nodes doesn't work for VanJS.

how to handle it for select/options. for code example below, how can I wrap up options with one single DOM?

thanks.

select(
    {
      id: "templateSelect",
      onchange: (e) => (selectedTemplate.val = e.target.value),
    },
    () => // Using a function to make it reactive
      Object.entries(templates.val).map(([name, content]) =>
        option({ value: name }, name)
      )
  );

[Tao-VanJS]

You can just make the binding function return <select> element instead:

() => select(
  {
    id: "templateSelect",
    onchange: (e) => (selectedTemplate.val = e.target.value),
  },
  Object.entries(templates.val).map(([name, content]) =>
    option({ value: name }, name)
  ),
)

[kangaroolab]

thanks for your quick response and help.

btw do you have any recommendation how to work with shadow DOM? especially how to extract and restore innerHTML of it?

[Tao-VanJS]

I don't have any specific recommendations. In my experience shadow DOM is just like DOM with special rules about how CSS is being applied.