<pre class="shiki github-dark shaku"><code>/** * MyElement is the type your implementation supports * * type MyNode = MyElement | string *//** * @param { string } type - valid HTML tag name * @param { object } [props] - properties. * @param { ...MyNode} [children] - elements as rest arguments * @return { MyElement } */function createElement(type, props, ...children) { return { type, props: { ...props, children }, }}/** * @param { MyElement } * @returns { HTMLElement } */function render(obj) { if(typeof(obj) === 'string') { return document.createTextNode(obj); } const {type, props: {children, ...attrs}} = obj; const element = document.createElement(type); for(const key in attrs) { element[key] = attrs[key]; } const childrenArr = Array.isArray(children) ? children : [children] for(const child of childrenArr) { element.appendChild(render(child)); } return element;}const h = createElementconst p = h('p', {}, 'paragraph');const json = h('h1', {id: 'app-header'}, 'this is header', p);console.log('===========================================');// const json = h(// 'div',// {},// h('h1', {}, ' this is '),// h(// 'p',// { className: 'paragraph' },// ' a ',// h('button', {}, ' button '),// ' from ',// h('a', { href: 'https://bfe.dev' }, h('b', {}, 'BFE'), '.dev')// )// )console.log(json);</code></pre>