MVU update
Tags: mvu, javascript
Published: 2023-04-28 08:55:16

I have update MVU with the newly discovered **[html](https://github.com/observablehq/htl/releases)** function from
observableHQ

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

```js

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())
```

You can test it here : [HtmlMVU](https://flems.io/#0=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-TJTyB-F4OlyB-V+Ckkw8k-q2H9R5XywNmkkT4A+Tin5eK-XOsxD+FIN8ESXNMIVYKpr-lUI2Hch5wAUWInvFSoosTTBcGfL5L4Fqc7WtKRWoNCh7CaB-Gmke2I4gsivtyAtGrh1st5UUGUxIpASuwcRMw7rLiesinEH15Y4ixKEsmxh1C+h7tMCsWtCQ-G0AUFAmBBKe3LrVu4PgXgT1Ds9HwxA6F72Htmk+xxUwFUACYD3LtlsGhWmgn3IAWD4fA3ysCGWjYezSatn2Qb4MgOYsH4OIdA8hxgOg5CzrTZKTGtAaTbEpLu3N+ba1OHAxcCjVJv2aT0Xhtjh7WDcP0Qy25diTKAqgM6Ns1lKndnshKVZQUfR+jcgobd9By4tRGb5OJpxZRSH+mgcoGBGg0m0xKgloUYDdRiqEEaSr97lw2dKweWLPROvkCyC1LIJ5ia7NU7ywyYBFRgJ8uISqurUmBRmuFfSBnBs0IKYUop8Ded8-O0UFJqREXTWK-5cQGwhdBURJV+BdP6darJMomXJSQzyccl5CJ3M1dDFZXI8XomWZCPIN42IpgSEYBmOJOnQviqU-QLrChqBqZ4gXR6b5muBgRHSwean9WGtDFN7lOcaV7H+esP6exqCOzgCnJAjFKQ7esHAI01XatiaXDUgcIzksG1FbCkx781ZIgFEKEUUg4sjMS1IO7qtg3UASHAN05wMCUi8HEEHzbKTLOB6DqjNyiKzRuQwmNfRIXtJRwqlkUysA8VMNyVHxF0maBcOEsYTSGVtk0i06VmP5WskRYTtVGxU0rLOJs7ZA4GXqerT25HQOodg5AwR-LemmBKnwFLm5Paq1FBZ8RVNBWJdeOgEqG5V9ZfU+InovRs05VE7S7ijLQKHs-L4-WCrSIqu5Au5d9suQ3Ti+08UQpLWipuXOJplsDvXF27cVd7yyvtMLxR+F4N6owr1KuZTyVfQ1RpDVGLwrquSswCIpgonhjyTRY+wwfAFgAkBv4u92LhfSgw+D0qdPVDZq57L0XtI9fPvl8r87oravAWbUzwr2QJQy6vAp3seZwVohF4xbQIIpQNEDjgyZ4gzLJAMG44zKnaw9F7K7+ec7-uA++6d4V13DrsWe48vyNrkxJ-De8Z4fOZOUm+93+4wPK5FBV9DzLOPCkbCbST1X1P6uGe9yWCxEze+ereyeEusee4FWsegqO+T+gs9WjEGATq1wjWRQwSmmF+HWg2mmPW-07e1YJ+g43ujcvuZa8Ac23wC25yS2buCgGQIAq2SA62hcz022u2+21wWAR2XBZ2tuiBVsL+4QhUTqd22Wj2A478ey7+8QGBEhZuFgT2wmQYuQbwza4u5gohqBWYrMjEEOkK8qswi8eBDAkhPycAxhDCL2UAy8YhNYkKFhFgcAJiZhRsawSIYomAOAXgkK-G3wXh5sCm3wFqcQrhShMhFWDhO0Fqz0dKxqqhhg+hgo7smgcQ-IUWWUO0z0I+KQ1h9cC8tQII+hAgqRXge8UcmuxoIRWgeg4R7KYwERUuaaAgLhoQjY4EVhdYagasDSkeyg9RiKzRUucAbRcg2Ify5YVhM4chAI-R+aM4ey-RLy+hBwAAagAKpkqZBYAUCZCpH7FrBlGJJHEbAqAGAIxtgmbjjbAMIbGbGGiUAIqRxdF4CAYADMAAbIgHMB8WwBwCAD4dwCANoCIGIDQO4XgAiCQMQI0HAIgDkJlJMG0XFoklkJkjYKYCYBYLAIQH5FkNoCGgsPgB8fgHMPIMyo0JSByGMCQPIIBgsHMAAJyhiMmAYUkFJYk4mwCYgJDBCBxoBLQhGAoUAbRMFTZ7DMgY69A3F+hwAABkCpewU+r0Xw48IAK0MpjEAS0yMAAA-DsHKdsFYZ+uACLPQFKeoNqQJJAKiEqbaeqfllgKUPqY6aiHEMgHsMacQPtj4GKSkIgDsICuoCqdpmqaiKUHsFqXTr0GMK8FYFABsrJHAPqfGZkkFMmTFIgDAAAD65mRBgApC6BQDqDABcasAUgpkUBboWloBd5MEtBFDJIqogBXy1FGkpDAD6HEDqBgFigYE-YMA7SMBYAjy+boRXx7Jijs7rJbJHDqAwAUD9nLJjl+iXKNIDnuEUBLTLCsC1H1np7dn0ByAhR9ml6faDkaYMDnJOA7SwmNCIlZBvAvn4BvBkmXBjBZCMlLBZBwB8BIqUB7CAX5rTnLJoCrKc4LlLn6L6GmDqD2pWYnYQBjD1kbIUg1kwB0zAA9BxAj7MiLnupCRyAAEpDLHTJQBXy4VlyQCmAkXFalAEUD5OykV7JlzahYC0CFAAGApEV0UL4MX5o9nnkxaXnfbXl8L6xxKTlgX-4MVd5ilcYpAcCuz9yiiIDoXECYV0zp4pBcYUAYAIUMH5Z7YoVoV4XaXTD4XMg0XEUCVq76kj45l8X0Vq5MUjAsUMX6nsXEhcUwA8W2X8WkU5n5EqXNpjDqXoVoCWXHl1wKC9krkYFJAXkMAABi4VSW+aKUcQV8gVrlZQV8KQYoclneeV9lZQoFFW+i+R+lcA6gXxnUEA9VgGFAtA6gAALAAOwUDUAdUACsFApZHxHxFAYA9Vm8Ag6giwy5U1m8jQU1LVFgU1I1hAU17VFA7gU13VYw6ggGLVWAu1I1bwu1XxFA3UoZoJXyj5OQL5bwb5H5pgX5P5Cwf5AFrELUF1D5T5t191+An5WQLJzJzJWQ3UnoaA4UlAlIn1V131r575f1j1WQAAGscADUDQABxZDAlSXUC2CUB8DQ1wmw13Xw3-XPUg1kB1zFiUBujqDMzyAHC6ael7CUHnJcCsQs19aMA2Y0gc0gC1DpUwABRMDUBlJAX82OBkaQB8r7E0BBTUAHBXJ807YQCNCbhFSECbFoDYj7ay0txgCBA2CL4jikji1fgSiK0CR83S3Pha06183xnUiEAABKr0DtzaLcUgGyzadcKUWA7tKYEAUgdtvpfNTqeoSIjN3y3UYdZwqIUAIdRwBETi4t-qm4nEDAutew-qTgw6qIWdIA-qGyEAycfNcMbopQwgLQm2stnoF05mYwi+fm4wMtewhUpg4dayMAKFJAfN7d4dIdBd-dZwAA6jnCnbLYVHAO4IvkNoPX3dYO4PPeLbjvcCEAUPAHzbEpMEnSpGeOLdvc+GgLPcHdraHQfSCnHd7XEnAH7VvZfXqMvbLY+JnZ8kjVvRnb6Z8gAJof1PjA7EAABaW9tsZwhQHojQhAGAID8AYDfm+s+8ztRUYQIDJdU4hQT9ew2oYA794t2Dv9eDMANIRUzKQQNdWDRDPmxASQuofN2oAUQkX4UovUTAk4J5dDQtAgjDpQqVVDuom94tCDwojspgxtrgptstQj0yZgzD44qIEjYyyYpQBwkovoUZgjrg2w9wBtd4fNcgpQSQMA2cyDlpGj2IkUxdsABdYxzwbgzgI2rdCKLqo5RwcSYwgUEofNrguJMA6xQUf4BdmjlYuDstQTkoBDoT8+u9Fk4t2caIY+MdsTQdbwGyZglYfN3UXicS8d9GyIlwfNlIWTEFSIuT+8+T4tJ0tAiSbo2m6tEysGhUBkIZ0wyAZcH4Rw7wZwLU8QylMAPg+Ryl5ydNaIDNTNyAXpIAoNXw7giAbgjYE5lALU-pEzUz4Nszpgwy-e71yzewqzMzhA2D2zFAKzYNMzFwMtSzxzuzpziArQ7wRzJz0zQZ2IFzOzkzNz-hizbz3UZAiAjsPSFAlI3zvzONeNgLwLUAdcrEfAELdciAez0LPg-T7ZdZ8g6FMFXZeyIpDMGAbwiACMXZAyBlZ1FALUgLU1FABNewrEtN182VL26gnUvZaTeevp-6uVd8xAV8r8R5wlaArTPgVF9IMA0wywsVp58FLLoocAArV8cAF+m6Aa3ZuCeLuFI+K0p64r166gAABgACQMysA6tCtxBSiyr5F8B0SEXajjm41xBZDIB3w+BZBjAUBHD5qYI4X0j02u1jCyNxA6t3xZAGsYCsBen6ARtwDTBZA+A6uy0QDoRz5yBxB8Bpqeh2uhgYD-pskpB0S6WTAXAfD00UTdw7RjQAxFDNofBnKbb5qWuLmsCsAoI+buBXwjYPJzD4sUXMimD5mZawIm2410jyAbl5m5ldKNHRnWmxnqxKmmDIBOCUh44lDLLPhFSXA+D5lZBxD6mIAAB6uZ0wKQerWQSbOw-LMAG8-TSpWQe7O7iAd8uZerKQp7G2FIKQ+pKbVr1L+g3UHx1AS04YiAZpebdEew4YEbf7YLbouZC16NgZ9b+rhrOr+ANrjsdrDrd8Cpzrrr7r+azbqBbbuCzJiAwAasGAJrUNBst74bUbzrZ777XZar3b6gvbuZS0cwBFmrBNqbcA6bNYnU3UoYF7V7-6+HqCrAuFu5XH+Z1LIAzIsqurBrpgRr+RwA9bewLIrmbZBH7gkn9IE7s6VpdNrTonfHEAdr3UpLKQSpBwmWKQsn5pbyVp2p3H37SAIHS5MHU1V8unjbuFfAnE5QCwBFGASpinSHKnOrylcnoXRVBzfExbB0ZbdcFbtcAUV6X4pwY5MCiKk59bWbaHdj9re7yA2nm7tH0w2HLrbr4nLbrA7bjaiAiHynRrqHRD6HNYDrkbVXOHtXvnqCRHDy0+LXyH7XtrXXZX1XuHdXhHjXo0zXVrkXbXRXGHEz03-XunQ3RQPxuFdnp6XZGnHnewoHUpWnNLsHcwA39XBbiXIzJblwO0XwP4OcFQ7aKSwI238gMzW3tpGA0yxAQZCXRb93yXewz3QUr3Fg73PSel+5j3DLnUaA1p7LMAd8aA3LebXZ+hyPA5UDojVy-m6ecrCrbQSr83nbyPzIipCpcQUNwG13c3uCgG+LBFUA+p9PfVrPzItAHP6gHxiAd5aAH7mWi5Bl6ggXr3nUUN614Y6eiAXxHxBFaAn7UNA1cvgZdPFLGvjPrb83AvQvIvMvFAGv3P6gEAfPnbWv6voYxPW3837ViAmxeFRv9V4vwgGFpgFAulZvvPUNhAZvEA4XhlHvWlXv6e5Ler5r+peLcws3evuCPxzvwvfbVP6gtA+ZafFvWv3VpvafYAqv6g6NZ1i5dEm8H1kvwXmvUNxfcvJfMAZfpLEvQX8gyw8fX36NTvLvmfBFGfuZWfhfuftvTf8v+f4XUNzJI-7f83nVXfKfuZeFvffPAf+ffPJHA-UNUfGAH7sfiAWvtfw-51Df5fzfUv+RuvX3JHyfDnC-Hx7VyvfPAgiAHxzJD-UN0+G-6gW-O-vxe-VHJvtvc-vb1wRP87+yvcfuoDBQX95u0+F-uANp5Q0oBwAh5I+Wv588fiWfCAd-xj6-Fp+uCCwHPw-ZQ0MBS-f3oHz57YDd+WvU6jr2QFFAV+BFC3lDSt7ECABdvQbvNy56YCEBU1PAR2y4EEVqAlvEgcyCYFTU-+6gZyLQI4G4I5gIg9QEIKhpYByBzAiQVIMAHQDcEMzNPqmWYGd80+1ACAWMD4FFA5g+gtnpb3X4rR1ANPLXuoPYEtsvuLJM3ooN2oLA1BbAkwQyXcEGC+eHJCQXsWkGOD5u-gpQWwM0EPIxgLgvnsoLsGeCIh50FQeILT7s96ejvIUsyEME8D7BXgwDOkMEF88ohn-FgZIPiF0CGSAgzIUqTx5mBmUAkInmXxSAFCtecwAajy2r7qAbeDgpng8jxY6CIBgGTqrkNn5p8-eu1TvlrzeBlCZBDyQDJ30N6ft4KS5enpP1N6TDphwQ5nlfxd5KlDKzIUPhQHD5ED6qvvXYQRQOFHDl+gfM4fsM97e9jhnbQ3n2yhpTCghhHP7gD0QBQ1K+rfRtvW1gonkFAQzGsHwGUobIRKrLL7FQxgDe0YAMAEekFHDpxAjUboCgCPh3Jx8KAztdQL4HbKPcr4GyfAKiAuQx5802PQEacHUCEjSCN5K5CT3MZtAy4-RHmry1kGkdhKZcSgnADxGmAz4waZHp1Hgpig4YV8NAHfFMCY9heWrYAMCVmaUt-G70U7NaWQBoBBWuFW9sB1faFxzW5IuKmeSlaLpkAdELNuZztbAZBW24JctvwAHRVwwEo7Kjj1gQhRdRErZUaqNFEsc2OHHGTgvz2AhEXOM7UwN5RVE+BWOZpIjHyngH7cP20QQFCGMOGBl7gopaKtJx7b6k5OiAA7o20zzqi92mohjlYRdHxV1ABozOkaLgBpsLONYc0VfEtEGVlK4YW0aGC95+i6yAYtpL0GIDBiMAoYwHrGJgDIAexAZRtn53m6d9cx+Yt9mXFKBFRt+RYs8mXCbRSBR2aIksY9VZYys82+AGca4ErFmiUgao71gO3EZDtego7IquBSxJVhXon4CysTxzEGdKU5OKdtqTQBKl+Wi7ZdjoGxBnB12pgfpmq2PFxJTxI7K5EcDMyZ8gJwQKFPICgrMoZk+8csCkHpbBp4KaAbNpvEMowApydCa+HaJSCGUZydcUiNEBvHag8KyAf8fWNyrAEJ8vIuCsUD8QpB1WrHaoZeJIlkSaw5gL4IOxgmjt9SVwRKiMg2Tz5R29ne4TRIeRESrxpEt6HECEnQiRJJIxpMLwknO0mgvwLvI23h70SKRRQYds7RSCLizAy4q5O104rcV5KxPacsiLh61EjgDZRmDqwVIABiA1mXEii1DCeOwZYHBloD35xggIVgFfB1b7lUWd5I8nsi+J9U74i5JUmj3UDMkFg+ZZkp1VikwB4psUuYHtTClvJ5AzvSKRVlf42V8yiwJiqVMAzlTcyHxSqSVNzJ-EmKuU67HZ0KknJTg8UvyQFJ2rMhEKIQJoBcA-CQpOpjRJqd5Cj6tSmwXSYZKrU2xVTDOkYuqWa3TyjSVwS0zFnkjYK9QTJ0DeTnVPWwvM8ajU2oh7xgpoj1pbUsuKaMcJnS-JHTN4F0x6YrTwgSY06VKKZFcBQWmxZ2gkAIrdRwuvZMUO006aiMemYpdQG6HFCSh32+ZLSuciIDWBGO3lEjMQE+TpYYAt5ZEZDJ2AbQxSZ05ykbkzSMAMKwvJ6d8DrHil3pycWJLjS+k-TmQf02ngDNunAzumk0MGRDMrDQzcysM+GQCg2gfsfKFkvzFzXRl3k4ZnMnGRtGcocU-KqM43I4T0q1F+xAZYAA6IpHfBqI4pOCm6MFboSRwJpMepMB2gQdgQSMu8GRiYxUZoqp6HMiGNY7ZjdAZAVjt7zTQAUSxLsp4Gw2R57ASSZJOYKxF6lih3SMAC2aRCoxLk9gigRQPAEtp6lWI6nBUYgF3IVlz+hgZ4vXGmLvFEACwAEpwBwB4BwSzxTrFIDwCGAS6txRggzS2LyAXQCSd2HsHwBZB+AQgUQNS2CAUjgAhxUaF3IuIuhNADxaoiIW+CkNJA5gHcImBnDnxggagdItYVWCEoHYwaKSt8E0ADhJ8o8-AMLVMCUhSmIQR7myHGQTp7IvRYND+D-BeBl54FVZEpK5bHyYkcSK+WcBvleBzkIofHCmwVFpAGIV3GcPzEXnDZ15NcLwBcR1bHy74hAOYNMD8a-gig1wO+MvM+CMUWQP4FkKKyDbLzpgYC35F8nCD0AVaHgL-jhWCCsBpgLUdNu4CDbYKPwaAWYPIFAXZg9kdAMhmcHNhqxGa1EWeRoFmDzz-5KBaiG9ndiIZCUIC8BZAvYVijCSkC+hYShHnPghF3cxJPIsKhfA4sXBcCXIHyylAlQLIZRWgG5BLFoiGAL4MEVRYH4+g00E+X2j0wCLzFx8kRRAoHBcF1ALIRyCmDOCoKu6bi0wEGwgXTBpFBKcRbYt7B1EyAgbBxcdj2zOLXwmXAnNMFSpVNnwPiqRTOBOIIYQQSYCrAVnNgrkICVeSHHph0TpzXimcngO4IWChgPiXPQYbnKBJcAC51APbEXKhI8BW8PRNea8EOgyQfx1RNQFYA8BjALgU+a4C5KWCfE7+1RQVEQB8wCRzAPCvpe4AGXrzp8-EOEXpmmbmx8AuitpfMsWVDK0oJcalFcWNBroYl2yoYLsu0zXBcSQwHpTRARhFLkQJSkAIsEQCMk2A-pWpfnJ4AXED8EuKUB4BgD49lGWxNgEAA)