DEV Community

artydev
artydev

Posted on

MVU update

I have update MVU with the newly discovered html function from
observableHQ

Follow the next posts to see what this brings....


import { MVU } from "./mvu.js"
const {dom, udom, html} = MVU;

function Counter () {

  let inc  = () => {
     let span =  counter.querySelector('span');
     let value = span.innerText;
     span.innerText = Number(value) + 1;
  }
  let counter  = html`
    <h1>Value : <span id='val'>0</span>
    <button onclick=${inc}>Click</button>  `
  return counter
}

let Main = () => {
  let main  = dom ()
    html`<h1>Main</h1>`
    Counter()
  udom()
  main.classList.add('main')
  return main
}

function App () {
  let app = dom ()
    html`<h1 class='header'>Header</h1>`
    Main ()
    html`<h1 class='footer'>Footer</h1>`
  udom()
  return app
}

document.body.append(App())
Enter fullscreen mode Exit fullscreen mode

You can test it here : HtmlMVU

Top comments (0)