DOM Diffing with diffDOM
Tags: javascript, dom
Published: 2022-10-16 21:29:02

What if you want to update dom elements without relying on virtual DOM, what is the alternative ?.

In fact there are many alternatives, [diffDOM](https://github.com/fiduswriter/diffDOM/graphs/contributors) is one of them.

Here is an example of its use : [diffDOMSample](https://flems.io/#0=N4IgtglgJlA2CmIBcBmAHAOgCxoDQgGcBjAJwHtZZkBtABl1oF18AzCBAm0AOwEMxESEBgAWAFzBV8RMtzHw5yECAC+uHv0EhYEAEYYAVp2mz5ioTO4ExAAigQWLACIB5ALIBeFgFduRMRCyABTwAJTAADog3gTwNtYkEP5RANw+fgGyNmIhuNy4ZOEAbrwk8Skk8GLeJNxRAMTyAB5iUR7t8BjcZFDwAHKaAPwEHmQYUGRE3gJyGKTwvPIAKvAtfT3wIeOLvKFIDTJgM60g7R6d3b0DAsOj45PTCmJzlYvwAMJkR09bUDt7QW4tzGEymxxeC3kAFEEMc+gBlIJRcRiAAOSAA9BiAO64jDYlAYMgkADmGIATLQqRiCEUSVFcBcNtcwvtCHS2h0uszNBgxGQADJkbHwEjvXixIKhQZBEYgh7g+ZvGHwOGI5FiNGYnF4glE0kUqm0GkckC4KK0+kgUJ5DwAQloezl9zBTwhythPyZV00Ns6izEiV03nkBAAZGGXLoDPB-Bgnol4AQtgGgyGk6EMCxiVDeEQREEgul-IFuCFiqVsuc6MxuNWAIyMCpVGrceIYWJiACCmrT8iCYjyoRUoT9cxE7Cg6164bDnXzk+nSazObzBaLvhLwTCwEq1Vq7d4qNRCig7wnsCgA9y+UKw9HBQwJVg3ngTgcbG4JIjW2fr5-BBPrwL7wOcQEgWO+axgA1vAUAAeOMFwWBUFELBUBjrECD+HBCFYbG8hQGB+E4RhD4ECoxaZG2ZbwLgYjhNmJADh4zwEDoRCbKEKTPAgX5iCIAB8tApOEDhBHa84XlOGwEKEe6tna9YpCUZR1mxqIcZs9D1qENYpKBUmLrJ1DcIwKgKQe8CUZu1E2GQuRkLgcnAKpNgQLgvC4LAuBELgJAeLRBTUIBAD6ljWBg5DpowNreB4wD2I4SBOZc8BICQKgpOJgGopU76OF2x6wAAnkE3ijpZ3AOikBDYhAYj5kEZAhRg4WyJFebUbFwBEBKcRhRFzy8DAPaBno6ZIOJdokAAPrNM0dlUY19mEVVKRUS3dr2E39i1g0dc8fACMw+1tUN4GvrFKS6K80EpH1sTtu1VjPGAPQOCVK27el01zQtJBbd9wbyPJLa1BtgOdsD6bNa1L2Rcd8CnfDF3cPA2IAGrAVdNpRAAkn0AAKACqSych4gNpSyEZRH+8AU2dCNHZojA-oD9OjKjh1dBj2Mgddt0LPdj0DedPOVO9RTwDD8hTSwEn-YtktkNLstreD1XKYDKtqztIObEzaOs9xQu8CL-XPRd71JSVKwtCqxzy4r80oHa7RUxsSwlSeYP7lrtV8qsYgFQrJD+dsYheUbPMUFA-NXcFB2vbzWM48jpt3Q9lvJ5FNufQnv0KzN81FGQ0A2LQZwc+nfuKdrl2gTHKfo2nAs3VnotWzz+csCVnzfHIzsl7NZcV1XHuR7s63KYBzQhx+QTh4DfxR0n4sp3Hhco7nR18+ngudznG95x9ffnkhUDD-9Y9QJX1eIWhcF1xDDeoehXO76n28d8L2dPV-XuJV4TwGwoRa+pdy53wnpTJaYDn4z02iRQin8T57zbldX+5t-5i2ZlFeAmk8zwEdk8DKGBUSlCeEufBhDOLnknNeZuiN94C3NCAFE6IsS4mxPiQkxIySUmpJaCmVNNAEAoZxEmAAlfGzkbQkEzn-LuX9KiwEmG8AA4tFdEXYSAkF4CVDAR5NJlVvpXPIGMbC6P0WVMYJJtECgUCSASo4MBgCPIWKipYpS7k1jYHWqpVYfGkkvccxkZzUCYc8Fg5AwCMFiiOTMTFcxNQ3BkbxdEGLABgWIH8vBYELkvEuAgkTuYp35PE+RGAIBWFFGIAAQvAJimw6K8HmtwbwlB7yKOwcotB+CpbEM9EPQGFDKhyGobrYJDCFFYItgA-pI0oAkKHkQDwQRYCoLwdFeQjAOxaSlJmcRBzYAYD4s4kQABaesuBdI1lwEvQKuRYCuJqbEEgDSmnEk2DkKJ8ZhliGYBqLUXDdR8INII40wjTiTyRuIoh0jZFyQjoUmSESiCMHaZ0l5cycHdxTlM+2YgVliAgbNN2sKvY+w1v7SG5DKETI2AMoJ9DLxLx6fM3BF0llEpJc7NZGytkXR2cjfZSQuJHM0uKjZZynECWubcvSTBcAQA8IBUEjxZhKmWMHJccMv701irgO0jygovNCPNRaqLikvwDoDN5dTGnNKCB5QG1qTIYqxV03FvQWC8E6aSiKFBOhqJJEiaI3BoLdGxG2LqpYojDiqjYbwqclweA8rlMg1hQ5FRMeVG0DobLpKyMmTJQ5XKVjINWQFBlqCAurGZRkplGCjCLVuNsEBciDm4OEXicqRDzRYnWo1LE2IHNcZUaWJBJQ2miauVJXjghZLtIuoK3bwh1Qak1MQplFntp6l3bgizRr60mjuo9eC42yBbRe4VgS9bjQNgULtQ5cWHv6UA9WSBkzdv6VvdOeR+mt0LjaByZae1vstreiW96Zanrluevd3VArHqgOrZ94GOV4ugynIBvKAVIHfXgoBhdCNQY-WffuXwnZEetpRi+T8r60Z7pRkB8CmPke2QQ2ARC+U-sA3g-9IEBNoxYa+UDL6INm05TYHDkVVHqPkFosg3h0T8bk9E2JImeb8gk5hyDT0NPMulnyxDl790ocvTAElGH6Kvuk9h1Dpnd3meQ0ZqZNmwN2ak0fQz-TCXB2c0Zq9ZlLPcpgPh1UTxbProM3EYLEXAsEbM9yiz7nYOReODF+zWdfX+tgIGjqwazlkDDVEXwUbhSxvbQmlQKhJPdJUG5fJq7ywVrKGIViE4CAqSgffDoP5QLABHLgKMMY4wJggEmcsK4SApPXK1ncbk6zwHuVW1bjZmz+2yM21to4sqrpsLANrblOvUCbEm54qIYgFm9P0X0bDGjByiO7MC1NNC0xAPUQ4xwXtcnewICM-p4NJkG0YkHgEiA8YILOK7N2tgA-gAAaiiBgKISPgePvTJD6HgFKi0M2BiGwGISRsLR9aMcqYfqAWgBGOHBBbvch9AIFHX30eY9WjTsi9E212SICdysnXhu2mG1t1sNhOjJLXJ42yGTwjHbCLN+bMvi20QrGUdb7k2xiBSGQeacQamycGGQH8vQEDyB28jPI1Bkb2kdEgHdtvC37YfGIXnpZ-FdvV7Jjw-OwgFF9wOG0IxRdJrGwRDAsESrJh7Ur6XaT21tZasjACNuW0Om6c5d3WRvBtaTWbqocROgqfkCQJwsg6IF4t50Gp6My8V9wFXovjdy-o2NUZIpsl9dhM7zOeMU6yoVWz22K8mSxLF2oFERHDI6bpxnyAd+cF5-IKX2aKIq9eBRD2fAAfKvE89t8dt1boX2jnvMqOW1G1xL1LIMG3gtFwdY9DKEV7N+79lmGhDyqmsr8Kzfwge-LYd1GcF-dof-BYD-HvNFDMS-ZScSDnanb3OscPOMKPUtR-TnUDDwFA54NAgcDAxA7KBWI9c5ASV7MYUgkQWAogiSI9HfUUMqBPaiQEcIJNBAg2EpE-ViAgjg5tRJWAlQeAqAm1YAIQ4A5cSg17Z4cQwCSg6g6aDvaAwCegkgRgxbctfPLtYQkyMybpAQ9aWgYfGwW7bzAoORUQ4ueAS1BiRBIQxHKQpne7AQeQhWBoeeCmO7FkS-O0AgbvDfM4Z4DfGgzwzQLXWTS-ESIQqnDgunHg7HcfFMCHapDCCwxIp-ZcaABw6I7HZIlwhHHkFnBodnOI0MZIsIntAwwQhWdgnIqHCUWcGo0ouomHAIko5cZouSOwgo5HVHYo7Ipo3HGhHjTiIIInEnMnBNQ3Con-Qw8SQoAwlSSsVVRQ4pQYFY2SMVEYzMSdUUGdJAc7TybgmQwYaQ6SYpTYrifBKdPY87GgiAWVfiEQV7XgB4i5PIuSJNe4lQtQ2XbceiVgvxEIgQM4XgYdRwlkRJRYsoTZZiDyXYMXA8L43fJgjJf4w-cXEw0EwFbyY1egDPRJIw6ogE7bAAKXhBcD6HpWnU2DJIpI7HGi-E+nLGHEO1REkwKG9xGHoFVQOPyRDX7V8m4MoNwHimsQMSMWKlMT63oFbisT0QMSCF4CR10kzHcTZJROCGJNbHO0SUb0pi91wBYA8HyXaCIDSCBw7C+E2A1KCgPzcirQV2Dw8GOzP24iTQoP7Ve1kP7RlCNKUlxIBDGAICtL32YLH1SPgC9OHVtRsD9JuWdwLRYEgXHm6TSGJCCDclRA8BElRAAB5eAUhUQkckdQgmIMzKwwBqxURmBQpsyUhQpcyzTQpizvdMZWJqBQomxuBqBqz5oWpOzLUCwwBcBMZG9DTpRvAezlTGAOzpzsykByopzGxZzGwPBJzqyOzGBBh1yZzOzlSkAbl1zpyVzGBBI1UAI1ylzdzpyVUPAlzcBmzGx9sk1aAvSIxgAhNXwpoaxLkCALEMFfpqBGxfzvJ+1v06tDswAvd0SDwxTDFjFSoMzpT-y5SbFmS3EPEbSfFLsCSXi8oyB+QxBqU+QyB4QGSSQvBfiywtSDxaTKSEgakSQmSBIIA5I1A8LyBCLiLOxC5KLVdoLLtus09WJ6Jusso3JazWte1uszlWKztzI0gqKbBMZoLlszCRh4A0zmJOsx1pVuI+1HjhJRJUifDtCQDEEq0NIDkdIlVaw1VnI1UzKkxIlzIqpgA0pv1cAxkqENgkB8g0p8ZuBegmgUoIKlKw1MMYLtc48F0qKg9gAV04rIr7TnIVVDiVLMkXNhUS8M5vJjTHDBS8KGUxAlx-J8qAqgrVgRS7zmAiJEoPwHc8hfLYAspxIj08p4BMYIAPlvBgIc1JSggyIFjN1GoCwUseYQsD1ONws0MQckBTl+ikxB0FqIcEoRsVr0iSlxqW5WYW1trIpDU2FF8oAKZ9qWYTpBhTljq7c2QV8TqYV2yjMkYtzTk7qbqCZiYyYKZTlEdPt6ZTqsqeZnqfxTlOYzrG5D4lFpqWNbYv0NrOc61AadqTo9qkbmEAKmwHNmMCVYMv0m8js2itq0bzrkZmAYEcDI94Bo8ZVFq5JXiBIIx8b4bqcjqRBL4AanrWZLrH4P4lJbrQECJV8Ajiauguama4FBar4PrSZyYHqfrui-q58Hrwbgawxxb6Y4tZMKNbZMtSFTl-CVaxNkZNajMSN055rG5HqgMjbMbfN4ttbPoB4nZ9adgra8FgMD4TaHbz42bGMLbrrDaMavbiNWMBbSILa3rA6f4sboacaCc+VmovABwRaPaBZXEcr690Y7dHxa9RRW9QIHRHx6Z87s6iAnKSkSAW0yBg6701E+olNtF-aziNjjlpVwaYkvhmBnh7EVNURHFHjtiVCZ0YqFskqaK2wrrm6+9W6RjwaKkGBGRM9XrvBdBOxZxl7V6qhAIpdYr+KdxxJ27YlGBcy56yA2Y5wiRLxC5cy3aLoKkLTPz4BBJD7O7whi8r705LluCe7VN+6LkoT7IwJH6Md6arlT6mwyBhIfwU1rsGcggPyP6QIHcRaKkkdu6HEBTU6vyLgjaQHKDLknJKDQqxx8HRhhxQEnoD6RaO64ln6UGz6H7EHXw6GjN76L7H6T7qGj637L74504kdv6MHHiAGNLeHC48H+1LlwHaooGwxypyF4cEG+GkHwG0GMAf6+7MGjakAcGAKJHHiQKiGKISHJG1VyHYAnp37lHXxhajMaHz6thH7b6dMz7UyY6-MuNBk+Uy6ZCOwpURjw5dJfIOwV616Iwy6CBQmt6R7Qy5dgArHC5BISA1ixHP6PB6wdHUmQJq4Umm8bqEn05cySBGHrHkd+TDLim5GCmQJ9GLlrkcnym6nLkFyYHFGsH0pdHxGSBLlqnXwCgmH0pw4iHGn5USAQHH7rkRsRmRBKYemsnxMl7fca6JrrMCMRhwaRU9l2I9LbzAIZ7NhvSDGbk7llVNkMq5ECrE6FZwaBbjhYpMwM6S7C6xhc7M6C76Axhi6K9s7J7wklrZoZUZCaqbQIAzzfne8JCfTwWlCFG4HCgm6-m9n-HNgPIPmbQN6wmwwMXomd7R696Ejemn701QhCWBHlIKGDdqj5n4BcyIASnxHpnBIIBvdOtSXpnLkIAUhWm4H3LtHOn+H2XBxH6pplTQLHiHcpnQGv63dIT3H7bPGgldbVly6-GDlAm8YQAlgoQAANJYLsKRKELsCmMu36tWgWi3Mu+mYJyJzesQWcCJqJu1mJrCncQlpJlJiZ9JzJpxj2XJ819571gZop+lgV0BpJsHYB9l+sBpqV5p+R2BgsXlgCzJ9ppHbpwl-p0pjKMVi5TJ-BsZwlyZkxx42Zwll3dFpZuVrWqzKAJV0ldZkWzZi4qUXZ1V6VQ5up452yh5KtYbTMRHDwNw57M0EEV28Gw6wVc5umtKTMGQ5a8u4FlVMFlVyg7m3xhN5qPYaF84-Zl1BewoNhLV3V-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-h8oi-LqRgSzhTR8OHtA8gCjWjrktouRo6MRYOiF2LolFE6KhEsEQWIUG9DaAkjeB2kT4FYQClCAARMh9YUHumKixyANxA7FEc23JC4BrkmYVAegPu4zodxcjAgJwNtD1N2gBAY3N+RtEFpeAn2f4a9hYARgWAPAgKK+LVQfjrReyOdsrybBuRKywI1IX8IZBUEHyHgRsc21bGgSwAgwJbkgDACYdRk1Y+kbCPcIIio4SAUKDiN1ItQmAmnfbG5C7CU9US66GQTJTICohqIBg0SjTzEDRtyslVT8KvndhXcyALAGwAAAklgbgAUCSiBxa5rA9+TiCJPEmSTpJAKbCV2lYnsTSwckW6uRU5DCTRJBvGYZkk0kcS9gdFKkpKAskMVGSfcZklxLnjkh0hvgX1DUkEmsRqUSkiSVJJklhhbAbyKOH4HgBeSVJJKdSYOBYqAQ2JZk3SYkC-D6TPJoksQIMBmERTTJ2k8yeSUpJjIrJWU+knFKYp2SGIs6GSklBYAyBfAnWegJFJXAuSuwlAe0Dchqm9Bgw34U4TJR4kuBEgFFKbg5KJBaSOoJU7ieSC6kQAepA4PqdFIylDS54+iJ+AFFlIUSUgXYBHj12BENRGJmpMbjVM-BQBQ4P6DqU1I6mUC1AK00nldyzApD9pm0tdEgRSATBUiNUqaR1DY6tSjOpUj8BVLkBks+pZUr6WIGfrpSXpf0o8KOAEjkBsQsmSxFCD0TpkLQNQChDDjgh2BPpR4NkEjmsnkVmKh00aSSFCCs4bAlyQSDYHRyYyCp2M4abjMw4wJAQXWGnrtL6DBxQ4L6F0ZmH45yNR8-xQdDtJUxBV6pqIoNAgHjCwzmIUQT4J0jvjdBbAu0-xKqF4A1JGKKMxwAQDtAJoFyPMuqQ1MLq55-c6kGSgzKZmLwy0rMh8CQX7SyMBw+s3mWhi1lHTuJc02CIDCWQsFcAEVPIJNIGlWB9s2IC8JsDNmGVHQkwmqRf3mm083c4XVaWT0ulBVGZLQUODdIay8DnINBJ6Z7MAjuImgTgAhAzTDD+yLkgMmns9KsAYVM52cqglVFuIKEiQ6YN5gkUsr6yUhLgGuczMwweyOJl0hjiQCbml5Q4F5VOe3Po6l5u5edI2XZjvA-gq0yKD0gHJjLF5m53zZ5gZGrk9yF5sxSwqdzrz50EiidHaSkMCqbzR566NmebMdDukl5rzJ5mvMtmFy05Leebl+AjCscvm6MbefXPpkpDC4Lc7zK4ha6nzk+z895gUCXkAK7cuI-2DqQjnnTiKu04eWXg-AJzkqlaVKh5BJH+RqqlcqlvYVPzucEidoPOS4nBnCgoZkMmGeQFFmas2JR2egrAFkyyRjCvAaWNkDIA2Bh+9kJKWzXiChFoIKQ8nG6U1jUBAQliXYFtELjXyopt81zKWDbnaT-M3GXjNuJEXpwxF-U9uYJgGaGl0KPFJRf3JkXu0jaGi4qYopAjKKi5KiHKkOHMgWd2ZOil6RnKXChxxZcgXMm4EWAiAjEq9QsOsRnDzQXRUrfAlBN8VyFbUAi2UsIq0XGKbFxcyRbIGkUvSuM8dBReEtfAmKJFF0R+horCBHIqgoiyJV-HaYGLXESSn5EDKiXZV0wFi4IlPAcIb5bUtYjwu50GAhKhFWSxTtopKVfwQssS0pTDU+h1sWlOS9pf5nMWx4ilKS1RWkvUXed-gRi5JbkutoAUihNSxgPsUEWQywl2StpTfPGUTV20XSwBPRhc5yB+lmy8RdsoJTDLjlESwZWotKZtialMy4pVst0WiYFlgRf4E2DLKiNaahvXXqgSproFaaRyYkDkD2AHFVUbQznD8vGy4F-l+BQFZaQ+RSh9izATZB2wEhlURIJAXMrAAqAtlJ51ASupeORHrI1k9xb4aCIVh3htyC41ZTYHWWtKrlTyuJalmoh7LZFgydWJctmXXKyl8gIcA8rGXPKgamgDkgKrmV4IrWjRZyq4wBD3Fd2fkIJlKpKRn0simXBhmGEg6FhQlXKx5acqFUpxOl4qujLDRBw6rBVzKiWBcrFU8rhVAgUVaMqNWxxJlxQ1xtaqZXdLb2ryl1fc24hllwhoDDFRUGxW4qSyVaPwYSs1W0r6VAy91R0t2WOqDVJ6dImaoTXyYrVDqm1cjToiFA3Veqi1SnCtYQrqcLlfCX4m8CnTI5F03afvJHmOAEF383gShCdEpNfGzYpFY8KOLNq1hlY5tqCuYCqoXFAkEuc1ADVorkJmyQdW4t4AeLp5dTMdTaFiHMAAokRYuHMozmsozwvMsQPNAgAn1Bl666SI4qOGVh4oTYx1g0Vo4EAuwS-Z8TM28BqDz1mTRrn5PLqDBDhjEPQZWF-7HEvFSYZFQHm7VKETi5df9SMCgr4LWxSkSwVBVnXoqoNhxA4pskLprIpKY3UoCSE1R2tkBWUHFQkU2RslbwyC0cHhXhwvJwu8peCgNSW4oU4KMqIJRhTZKkiRu+LbaecGchxCf29aQurfBdQcbU2XGwOadgJJsFL1xpNsSJztbXrQI9YKkJ5E07-FkVNBNxb-OyF0zAIAYVUOxOUyqYjBddRYExPlHuyKox8meUmiIC6DmIElOsg2U5bNl0mrZLmJ2VdlqpNySQn8JjEfkkgw+X2EiWcExgNKggZdDdlGpTWZrOo8asLc8ACwOxElGyxlXmo9Vpryl7XWQOJwUShbY1-SK1v5pqXyIv6ukBckFvhwhbc1Ki-VeFtZWpqotsGElBloS1mLktcwVLYsHZR1ayt+ayKLc2iwKxMYF+fyPlr2BtS7QHmuRnUoeokgGlRWuBiVozWZbol+QKrUYkSwxajxDEUraYqGWNaxOLW9LettSU8wrWE23LYRhpXaq9tZyirVIsW1LJat528rVFuGVNa-AO2wpXFu5VzaLoXWuQBorxkX4bQI2tqRJDXW8AmgG6o9Tur3WZaD1k4I9YMDWQ+NmtOQXeTHMNmOAggo5UnClue05B0tewK8BjotQAtYNQkMdcHx83Ds-Nk207c0ru0dbhoEWj7TBkGR9LadiWh7VtsR2tbWdBqADDlv+B7Apt64M7bNvq1IYrtkW4zEMlW1taNteCL7YOB62vaGV720Xdske3bacdfWoMsiyCChRFUD5fLf1vSbeQBtKUUBrmVJ2BbfcT28Tk0rWUy79tBqhnarpmq3aRd7Wtnf8lW0-aldMal3Zao53Y7WtRqbXQcj130A+2Ju+zYRmt0a6ggduulQ7ou307KtEu-EZxDd1vbdVHur+OksV1J77t38ADArF+3c7NtfKrHWltHA+r-IZLMBeLmBGbzV5vkCtVAuR6ahNNYgbTaiF02KZSw9a7tOpQ-WWaliOJPyByLHJZlDh5ae0k2sRaDAoKv6sdQGVA2dr59UFQDecWFIZ5-1qqTFTD2Y1o9gAZZU7EAwGa1N0Vv-VNtM0OKEsWRJ9Fkb+xai8BuhWlcstCTexG0khuZbgEkN-YlJYAr+xDuk11LAASQR4AgBkycjgHUQBAckOBXk3roUJqIdRhAZuRtkUDMBuA85snVuIakuugNf5rkKA8aquAdnj3zrJ9BcyJIG6D9L6C-tpovhBaJ8NCjUA+g59B0K9kxhsGeo00GBKwfYMOChBcIk4M4IChL7qAugWKDgoK7k74RrRGQjwZwWpEV4OwBwoofYNTxh9g1DwLoCXnNdzZUAZUp9hEP1LFDRhyIYjlEjiQjDxuzfSZE0P+EVuTo6gFAD2Q1LgA8UGqNJi9F2gKoSaIoNTvt1l75tbKkOjrSSzS6QjvK7NTbpa19BfdJynPX+nUWqGo4BeunUXuEz2GIkjh-nYDzqx1dAjwW4XVnvNWe7DVaejLJEeOAZHPdIqR8HHoSN1GedwmNI7sBtDw9d2hIoJhRVwOQAyw8PYUkQf7Q2g+g+WgyBYziDFHitpR5Xdntl0srxdjOnGl41i3zHyjDWvlWMCaOJH4tyRuXQCg0W46HybbEYj0ZtB9HXFeBwY4QdAZjGJjPg4uDAm4OCGxtYhtfZWJ4P9tuiMoGY9NrmN+6DjSxmJdduW3Ep1jQJxYwHu2NxGcgzR6IwdoAztGHwXRnXYSLxKOgcD1xgYwQeGP3HcAugU3RmSCOJ7ETTu1PSsc6irMoj7u6E+cvKU7HOdCJuk47s61HGw4fWtEwcgxMBlsTQ63E0MYFIjGB6hJgbZMcoYKwBDjALg98dSKBHf5MZIoDQTWTdlpTzAQVP0fwMmt9FS+qVmXSCWvYy6j9MSI1Lf1uQLeIkEqI2VAYpASov7RnIodgBI4SozACQ8afP2uncABxf0hnkHSqoM8dxYJTNrKPXbndwJmDHpobq90zVUQDRn-QEgMgDTox8k3Ty0wenSmLR-pPyG8hZm1djJ0IOZEKNTHJhRQVvVFyrUfz048c6fXaUrQ1VJhTYyHnBAcIg8wwA4gEzTtZPJ6jE4Z+k6fFthsZJaeZiZbcqbPsYRzQNfRWxGbMYRUz7OivQ+F-Dpx5os3WuBaXpgOF6Yn2FwETCWD4wKS3I6zhGA7NC6uzoZiXZUapNvRKMIGec9SzbH0wnOIAHPt2cL35K1zIEZ86+YvPXmooFyyCC9xbPYLVu7Z0k9GqSP9mU9yx-3bhnoxAW5zb5zI+kre6MZJznqwuEUOOroWkti50DOJUrBOAEoLU7wNP39Igz0QMm3ABnKznsSRA7fG5NDsvBHqkAAAVnoBzdHAjFc-qjpYBIBazHJeJlPFbReVKgSnaoCp0KiSl+LcVcIGoHk7WBxLvVWAP1RMQyX+Kcl0S2+FU7SXUN8lhTqpdKjqXE8mlweaKFgWhw-K1g84ZUBhwMWHyQ0eyxqidgmo+Jrk9GPdVPyJSE+KQ4UJanqhBVhQLoTDQ+ICsTAeEzlp4GoCWAIKWWammgscIGxVM1qM0nPWxopqTZpsTgJLnNnjxvsQOK2NbA2CbAU029nQEQBKBcAxoiY5AE8B8kMR9QBuzwUxUOG5k57dshQbTlVqQJ3kogSydWPPk-Qg558UyAa2vnACUY62I10BIpngDd7prax1bfPhu0AoFrirGowoLYQ8oNryY8a+nql2-ZxrZtECINfgvs0jroddjKddthO1NrfVmrHtZyrz5H68+dpvPnl3z4NG8+GhvPn5CvXNA8+f6uNY3zLWIcr17ovtydGQ3zrbCO6okKq1hc5lNlpMO+KPRbD1CB+S7BGdejCVYeo4Pyofqp7bTsb1gYStZH2w1TQ4AAMW+EBQuwWUJYJWuIoIULe76sbrWaZ7PBviDPeKu6QawEkX0uS4cLgEZtlWMALkqtGzc+KC32lwt0WxWeIplSB9TPWUpTY-A03KqzEMtELdO4NQpQBFsoC4FisgcdK3WXrOPDODwBBsKVvqRQiIhRBAAQKQ2BnbDIGqXbfsBfh0hrtjqUkGgh2GZKAgGHLwCX7OiYJX6+tXWY1wNomwx+FtKhpP2VhQ7t5dDZhrHXZROBokEpBABbQp3jgWdpsNEnwP5AuuCt3rs2P67HY5I3EZrHcBZu5A5IQc2qTkHyC7A5NB2T9RrjCJhAogq6BKSeCUmrZ1VQUQoDxCx6lZw0gAGFIbASwKRF2HeBQgBQLgDRDYHhDFdZaw4SYS4CZu9dPwytliTT3duMUBGbtkaH1II5RBAAOKSAAAUmJlPBRQis9nP8TUBb2xb2YEMHvZqnn2QADt3MlfavuAAMUhsBL868bwO+AEaVr-FbbSyRimpvpQwBGKgwgqUEGqkyVD7X4KVifak5yFn7298niQHcSdYpbfifK2WVAgJCQAGOJeZQVzJYBRIZDkALQHZyNn6sDEVnMTPRyYOPbJIDHDg7FuhoE53uUCCXcR4XTy7jV47LnajGzpjbbBbzTZODEeT+7hktEQblegKTgpok7yapNW0esa5Wj587mU70lRS+yAVR-JKClKS4K3mrbiAzVJB5DA5cMsPPnxlb4ogmTfkGRSQeE7-uIEX4YTqz5EcqsJjtkLmT9RTHjHUQLKIZAY32ODAjj8NLgBJlyiapgdggMHeXAbseZ+DlrSZO4m+2Wywtl+6Xeu6kVyKAj4-R3YlzpDAAKKR-2r7qQaZjfU4cIPKCaDVByNFtMksBGUQAAOvO2knADU2wfegdfgg57T+B57fIeMhYHTEAhxpLydoRUraDiimlJp6pP0ngEOJ-gYSERA6g1oVnFbz2c8O2xocVwJ4CWBtilgc0+AEKBJBL8AoLgNsWlCWBkAxsHgIoOJvIovO3nTQRkPVj7YpBdnuzoaHYDvgeBiFSs5wO4AwCnP3AUoFICTLqDcBzcsszW4C6ReHZxAkgIIFi5eQ2BIgbYfp6dk008YLc4LyK1qleDQgAUQQUXtv0ITyBo+6L-p8YQkA0LwXuLqIUEIRdYgbAjMqdLLO2y8BsgwcWhb0DYUJ8JwoYCRHEAlDZAOFtlgNLs5Zf0vSXje0UFo5sAcu2XzL-p5dhJdvAntZgQu9OjEAbr0XKgIF9wEOwKycgRQKbNiESfyS+V2QdDVUC1d2AFQboQ7lAAsH4vlXVC2wB1XteWJwXIbxPs67CC6vhRS-YaOgKCpBBg3Dr7iAG-GS9Ayg4Lw7FKH9eEvnbMAfHohSTcYxEn+bsqYm8nQOvEn4b2UFHFBiYcA3lr2Hla9WDycPk+L1l5IESe2vEnab0UDYBUBmhCAkPbSUoFoBIBaAlyckBk3JAABOVQOoBABIwlAkbwwMYAXymAngSgSfq29sDABUX6b-t7GViRJOMAGIHQPoCMAJCkXILsim8A9cEuWX-00UEgEri7PG3wLw6PQqCoIAM37bgN87djcDg3Xg4GwPhTqtEVQgObllyy8uzAeeytVupK6d1fO21A-7+IFUCA+kgqgiTsD4h6re1woP0HmwEYJYBgItomH2Nzh4Q-1X8PEEBFy7dzcwfTwjHUIGh71d+JAwr4ND42-fd+BP3kbj17KRqtHcyot7l1xVe-eigU3SLlt8CvbcCfG3g75BCO6ECUhx387jQAICUCrvB3lgY11u7AA7v23uLrt9wAaiHuaGJ7s93oFXdRBEX27uT3u4E8Wfj3qOGkLW86CXuXzbYXZza78DZuH38QDz01sql9uBGNgesG++Ve+elK4bmwDW7eCQfAvKLuL9q+xcAADND7mXsBFBS+jH529l4gC5ej1fbi3RQm4CCQAAJMABXdPvMouZGkOV+JkNecv7D-LzYFzIgx+QFXwmO8Aa9dfZAeXlly16K9Df0v0nwNywrEBtgw3DrjAAAEdXwqhIc-4DhkgABvez1j22F0DTeiQZ3X2x65qRmllXARh1xa6te2uMylboL4l-RdWu0P0XpFzYF08Rj2AooJQJ32H5SAh3YCFTyACwBIBKQGnxd5oG09EAYcL3uQJu6ECqBmAIPrT0IDKnl4wA8IavggFUBAA)

**lib.js**
```js

const diffDOM=function(e){...};

const dd = new diffDOM.DiffDOM(); 

let render;

function html(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

function init(view, state, target = document.body) {
  let preview = view(state);
  target.append(preview);
  render = function () {
    dd.apply(preview, dd.diff(preview, view(state)));
  }
}

export { html, init, render }

```
**state.js**
```js
import { render } from "./lib.js"

const State = {
    counter: 0
}

const handler = { 
    get(target, property) {
        return target[property];
    },
    set(target, property, value) {
       Reflect.set(target, property, value);   
       render()
       return true
    }
}

const state = new Proxy(State, handler);

export { state }

```
**main.js**
```js
import { html, init } from "./lib.js" 
import { state  } from "./state.js"
 
function inc() {
  state.counter = state.counter + 1;
}
 
function view (state) {
  let view = html(`
    <div>
      <div>Counter <span>${state.counter}</span> </div> 
      <button>INC</button>
    </div>
 `);
 let btn = view.querySelector("button")
 btn.onclick = inc;
 return view;
}

init(view, state);fully at the following sample :

```