MVU library
Published: 2022-09-07 07:03:06

**MVU** is a little wrapper around some functions coming from functions coming from different libraries :

  

* m [(MVU)](https://efpage.de/DML/DML_homepage/)
* dom [(Dml)](https://efpage.de/DML/DML_homepage/)
* udom [(Dml)](https://efpage.de/DML/DML_homepage/)
/d3ce9f23edb1567cbd5d9d72298d7e0f)
* observable [(Sinuous)](https://github.com/luwes/sinuous/tree/main/src/observable#observable)
* morphdom [(Morphdom)](https://github.com/patrick-steele-idem/morphdom)

  

> **m (wrapper around _make_ in DML)**
> 
> > return a function which creates an element, and append it to the current base
> 
> **dom (selectBase in DML)**
> 
> > Select a position to append the following objects
> 
> **udom (unselectBase in DML)**
> 
> > Release position to the previous context
> 
> **observable**
> 
> > Creates a new observable, returns a function which can be used to get the observable's value by calling the function without any arguments and set the value by passing one argument of any type.
> 
> **morphdom**
> 
> > Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  

> **Demo**  
>   
> &lt;div&gt;id='app'>&lt;/div&gt;
> 
> Here we create a 'h2 element creator' function named **h2**.  
> We then use this function to create an actual 'h2' element.  
> We finally append this element to a div tag which id is 'app'
> 
> ```js
>   import "https://cdn.jsdelivr.net/gh/artydev/mvu@DMLMorph/dist/mvu.es.js";
>     
>   let h2 = m("h2")
> 
>   dom(app)
>     let title = h2("Hello MVU");
>     title.style.color = "orange"
>   udom()
>   ``` 

You can test it here : [demo](https://flems.io/#0=N4IgtglgJlA2CmIBcAWAzAOhSgNCAzgMYBOA9rLMgNoAMO2ArALp4BmEC+1oAdgIZhESEBgAWAFzCU8hUj3Hx5yEAB4ADgD4AOjwAEulQCMNAWQBqAVRUB6Y7vgAPNaXzx8u-KUG7WAVx6E4hBy7rKQPADmPmRgulAQrKzwxIriurAQhsR8xBBuukg6NppFWbrW2jwqvrCV+ioZGrEqfLqiKawAvADkEuJq+EjW1vCsanwR8BhQ8NYAIiYAMvNLAPqiXvDjk9bdGgAU5hYAlDZ8GjaNOvWNUF4Gre2jPX0DQyNjE1MzK8sLi+tNttZnt9nMpKdrOdLhA6gZGr47s1Hh0XuJ+oNhqNgdNZv9foDBMDdgdwbBIdDrFc9PDYRIpA82qitCBXpjrBEIPhxBhOeJRL5DBgwtYAFZyPj8vjyHjwPiwaxQNCEeAATlYACY0PAoIYAIwMABsAHZCIYoAwoKqoMaNRrVQAOG3wGisFkHADiXPEFIuVNh11pGlIhlcxAAbnxDAhGU8ur10W9hnyBUKRbBfAB3NzWfAQHi+Ui+fDWcQpWZgPj53PEQjWENhyPR+AAYgbySbCFBAGV84Xi76YXCGrCwKRiGpREjY8zWYn2SnBcKvNZxmWIIQANYAWm58HgCG30HgYGsY4nU687sO48nSMH-sqNhqT7KFR0pVgpC3AEdCwo4Q-KpXECYIeGHeJwzheoShpfR6kMDxxAATwQToWQUBxxG3GZZGyII5CQfwZmIDJZXdWJ9kzbI1DUZJdByIseCgAxRz4Td4BsWFdHzXR-khYxA3qVdoIMaNv03P9SAAoT4JScRfGIPRWj8AICL0TNRA3URdBIOUFAYmkDxPVIcEMli+FoxQWIgNJxFIXR+XgXTFJSeRdEMPhXF0WSbHE39-3gYdFQgKDAxUSDRPUUSEKQ1D4HQkBMOw3Dx0lMCiOY5IyPgd1p32VwEECAAhLznN4-i-KikTfP8yTApi3Ru2MwIGN0Zw83UxyHMsujmMc0RnNYcgv0zfMohDUV4ECfBfNsL8AukoLwpCsKaQi0Kotg+D4KMOK0IwxwUumtL1MykicvdRF7n2fxCum8RSu8iqlgE6rtt2uqpJkuD4IAJWMsr2pcWywO6gbnLUFJw2CYtdLkZK5q+hqVsioD6jR37otk2LuXixLkpwk78Iy4jsvzXKQA0elYCquaPoQhb6qWxqAYUpT3GlXQAAkABUlmiCZBHc1gYja7lckiJGme+5b1tWypwsxnbsd+3GUIOpKjqJvD0sIsnSIp912wjKMEDprGaqx5Glv2hKWUrBxtzGqB+VQGgaDUBx3RxgBhFJJXyVpZUzXQTc7eAzPkxSeE5nx-FAuRdE07TdK5wxnOLHVwcmOzBrD0MOzN+BuncSMM2cwxkLTihxoh+O1LBsb+SLNJpWrnIIl8YXxE5-rXDz5zy98Svq-GfA80iMPZQY4gu57sPWEM6uULojBpYk2XguVnysZ3mDGr2vHNcJ1KSf1rLDfIqnzzvLwLZVq2VZtn6dv0AAxLy2-6jIIgkbMIB-zSHMAA8iYOICR2CRFXJKQgWkp77B4A5GGxAFLyj4mA3QsodQ6mOLvR+L85bCUxjYEC6kND6BWoQ18xByiKx4J+TeKMaRARUGQsCw5jBzBPKQC24UsgXDfHCAAZLAcQABuSCwiIgSOgD0XqexRESNWtIiRStQo8SgIlXq7obA73CgzHmyRnLZl0gHAyrRegansAgBeelJTjm6A3ROeh+CCBYkYamGoqrr2trQ0SAB1ZyTk9BZwGlyZxXV7JmP0s5LmfBAi+HQVYpxxke6+Ofv42SQSfD5nlLADuVl+r8giWk1I4NWiQUchMZOWk4GaJ4u4boCihLFEAutWQMwtopFEgAA36aKWav0IBgGcKgnyc4MTvEIFAHgGBBkzAyOGYgGBZTiA5KIKEqDkIzHDGecMvgAAC-wTC3k2fEbk+zfAYDcPM2aIBxGyVkggNIohrGdF0GAfYLI3ksmOOjeCSJ9i9X+WrdI8A7K2RjB8t53yQDcwPF+XQRw-mPLBUEcQCAMDHymLIL8tCPksjSpESmslrpfNBTtfpvT6Y9KAkUawnSiH4N3qQh6HDWHzSYSzelDC+W8oFfyoVgrBUgDwPdFxXBhAOmNEgBgGoQAAF8cC8AEEIEQgyxUgFkPIVIygRljLSD8+c0zZl3MWaFFZayNlbJQrsq5xylinIvCFS5YADk3PwHclkaKdAvLaO8z5cLfkgFBToIFILAz+oxdCgNcKEUUAcii0NaL9AxqmDi5c+LdCEpAMSyYLIdDkv2GGngWqJXqSlSAVUSAaBKpVSANx6rhQTy1TqhQShhCGFIFAauwBAyeS3BEMgxEkC6Dnp5fYdANQMDMjO44qb4b4rHSnBQi7hryG3KwAQHBkJjuahEUgzkLAAElF2VjnvmbcCBWDiDHXqT2Dg0WKqAhkXQ-aaQXs5Dwbc3b0ReHvY+yhPAX18taB+-QeLxxjvzblEDOhEIQcctrM+eseDnXJuRED5aWqVuUAaJAGpjRKpYI2tVygjgAAUUiuHkGhpVQA)

See you for the new post...