Clojurians Log v2

Hmm, it seems for this game I don't even need idiomorph, just this works equally well:

(defn morph []
  (set! (js/document.querySelector "#app") -innerHTML (str (game))))

now 5.13 kB

even with a grid size of 200x200 I don't see any difference

I think Mithril might work like this - just blatting the new dom without any diffing.

it seems mithril does have a vdom

maybe we've been misled and we don't need vdoms ;)

ha ha yes maybe

ah yes, here is where idiomorph comes in. this won't work for example: https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9lc20uc2gvaWRpb21vcnBoIiA6cmVmZXIgW0lkaW9tb3JwaF0gOnJlbmFtZSB7SWRpb21vcnBoIEl9XSkKCihkZWYgcm9vdCAob3IKICAgICAgICAgICAgKGpzL2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgIiNjb250YWluZXIiKQogICAgICAgICAgICAoZG90byAoanMvZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAiZGl2IikKICAgICAgICAgICAgICAoc2V0ISAtaWQgImNvbnRhaW5lciIpCiAgICAgICAgICAgICAgKGpzL2RvY3VtZW50LmJvZHkucHJlcGVuZCkpKSkKCihkZWYgc3RhdGUgKGF0b20gezpjb3VudGVyIDAKICAgICAgICAgICAgICAgICAgOmlucHV0ICJIZWxsbyJ9KSkKCihkZWZuIG15LWNvbXBvbmVudCBbXQogICNodG1sIFs6PD4KICAgICAgICAgWzpkaXYgIkNvdW50OiAiICg6Y291bnRlciBAc3RhdGUpXQogICAgICAgICBbOmRpdiBbOmJ1dHRvbiB7OmlkIDpidG59CiAgICAgICAgICAgICAgICAiUGxlYXNlIGNsaWNrIG1lIl1dCiAgICAgICAgIFs6aW5wdXQgezppZCA6aW4gOnR5cGUgOnRleHQgOnZhbHVlICg6aW5wdXQgQHN0YXRlKX1dCiAgICAgICAgIFs6cHJlICg6aW5wdXQgQHN0YXRlKV1dKQoKKGRlZm4gbW9ycGggW10KICAoc2V0ISByb290IC1pbm5lckhUTUwgKG15LWNvbXBvbmVudCkpCiAgI18oSS9tb3JwaCByb290IChzdHIgKG15LWNvbXBvbmVudCkpCiAgICB7Om1vcnBoU3R5bGUgOmlubmVySFRNTH0pKQoKKGFkZC13YXRjaCBzdGF0ZSA6c3RhdGUgKGZuIFtfIF8gXyBfXQogICAgICAgICAgICAgICAgICAgICAgICAgIChtb3JwaCkpKQoKKG1vcnBoKQoKKC5hZGRFdmVudExpc3RlbmVyIChqcy9kb2N1bWVudC5xdWVyeVNlbGVjdG9yICIjYnRuIikgOmNsaWNrCiAgKGZuIFtdCiAgICAoc3dhcCEgc3RhdGUgdXBkYXRlIDpjb3VudGVyIGluYykpKQoKKC5hZGRFdmVudExpc3RlbmVyIChqcy9kb2N1bWVudC5xdWVyeVNlbGVjdG9yICIjaW4iKSA6aW5wdXQKICAoZm4gW2V2XQogICAgKHN3YXAhIHN0YXRlIGFzc29jIDppbnB1dCAoLT4gZXYgOnRhcmdldCA6dmFsdWUpKSkp

so input state etc won't work well with innerHTML

for something where you repaint the whole scene every 200ms it's fine to use innerHTML (like the snake game)

but for crud apps idiomorph is better

This example illustrates why you need idiomorph or react or eucalypt: https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9lc20uc2gvaWRpb21vcnBoIiA6cmVmZXIgW0lkaW9tb3JwaF1dKQoKKGRlZiByb290IChvcgogICAgICAgICAgICAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2NvbnRhaW5lciIpCiAgICAgICAgICAgIChkb3RvIChqcy9kb2N1bWVudC5jcmVhdGVFbGVtZW50ICJkaXYiKQogICAgICAgICAgICAgIChzZXQhIC1pZCAiY29udGFpbmVyIikKICAgICAgICAgICAgICAoanMvZG9jdW1lbnQuYm9keS5wcmVwZW5kKSkpKQoKKGRlZiBzdGF0ZSAoYXRvbSB7OmNvdW50ZXIgMAogICAgICAgICAgICAgICAgICA6aW5wdXQgIkhlbGxvIn0pKQoKKGRlZm4gbXktY29tcG9uZW50IFtdCiAgI2h0bWwgWzo8PgogICAgICAgICBbOnByZSAocHItc3RyIEBzdGF0ZSldCiAgICAgICAgIFs6ZGl2ICJDb3VudDogIiAoOmNvdW50ZXIgQHN0YXRlKV0KICAgICAgICAgWzpkaXYgWzpidXR0b24gezppZCA6YnRufQogICAgICAgICAgICAgICAgIlBsZWFzZSBjbGljayBtZSJdXQogICAgICAgICBbOmlucHV0IHs6aWQgOmluIDp0eXBlIDp0ZXh0IDp2YWx1ZSAoOmlucHV0IEBzdGF0ZSl9XQogICAgICAgICBbOnByZSAoOmlucHV0IEBzdGF0ZSldXSkKCihkZWZuIHJlc3RvcmUtZm9jdXMgW2h0bWxdCiAgKGxldCBbYWN0aXZlLWVsICguLWFjdGl2ZUVsZW1lbnQganMvZG9jdW1lbnQpCiAgICAgICAgYWN0aXZlLWlkICguLWlkIGFjdGl2ZS1lbCkKICAgICAgICBjYXJldCAod2hlbiBhY3RpdmUtZWwgKC4tc2VsZWN0aW9uU3RhcnQgYWN0aXZlLWVsKSldCiAgICA7OyB1cGRhdGUgRE9NCiAgICAoc2V0ISAoLi1pbm5lckhUTUwgcm9vdCkgaHRtbCkKICAgIDs7IHJlc3RvcmUgZm9jdXMgYW5kIGNhcmV0CiAgICAod2hlbiBhY3RpdmUtaWQKICAgICAgKHdoZW4tbGV0IFtlbCAoLmdldEVsZW1lbnRCeUlkIGpzL2RvY3VtZW50IGFjdGl2ZS1pZCldCiAgICAgICAgKC5mb2N1cyBlbCkKICAgICAgICAod2hlbiBjYXJldAogICAgICAgICAgKHRyeQogICAgICAgICAgICAoLnNldFNlbGVjdGlvblJhbmdlIGVsIGNhcmV0IGNhcmV0KQogICAgICAgICAgICAoY2F0Y2ggOmRlZmF1bHQgXyBuaWwpKSkpKSkpCgooZGVmbiBtb3JwaCBbXQogIChyZXN0b3JlLWZvY3VzIChteS1jb21wb25lbnQpKQogIAogICNfKElkaW9tb3JwaC5tb3JwaCByb290IChzdHIgKG15LWNvbXBvbmVudCkpCiAgICAgIHs6bW9ycGhTdHlsZSA6aW5uZXJIVE1MfSkpCgooYWRkLXdhdGNoIHN0YXRlIDpzdGF0ZSAoZm4gW18gXyBfIF9dCiAgICAgICAgICAgICAgICAgICAgICAgICAgKG1vcnBoKSkpCgoobW9ycGgpCgooLmFkZEV2ZW50TGlzdGVuZXIgcm9vdCAiY2xpY2siCiAgKGZuIFtlXQogICAgKHdoZW4gKD0gImJ0biIgKC4taWQgKC4tdGFyZ2V0IGUpKSkKICAgICAgKHN3YXAhIHN0YXRlIHVwZGF0ZSA6Y291bnRlciBpbmMpKSkpCgooLmFkZEV2ZW50TGlzdGVuZXIgcm9vdCAiaW5wdXQiCiAgKGZuIFtlXQogICAgKHdoZW4gKD0gImluIiAoLi1pZCAoLi10YXJnZXQgZSkpKQogICAgICAoc3dhcCEgc3RhdGUgYXNzb2MgOmlucHV0ICgtPiBlIDp0YXJnZXQgOnZhbHVlKSkpKSk%3D

when you type in the input field, then you see it's constantly refocussing

Yep - focus tracking

what is still annoying with the idiomorph + squint aproach is that on-click etc don't work so you have to define those out of band

When the dom diffing is done correctly then the input doesn't get unmounted at all so the focus remains.

This does work with idiomorph:

:onClick "globalThis.user.fuck()"

writing :onClick (fuck) won't work since that will just evaluate fuck and then insert the result of that

:onClick #(fuck) doesn't work?

no, that's now how browser :onClick attributes work I think?

it expects a string of JS I think

Depends what idiomorph is doing - you can set .onclick to a function on an element, not a string.

oh really!

ah but here I'm fucked by the html tag creating a string

so maybe I need to introduce #dom ;)

Ah yep I see so it's stringifying the cljs

If you introduce dom (which would be like a recursive createElement?)I could re-use it in Eucalpyt.

If it could be used runtime that is.

Oh it would have to have a runtime counterpart wouldn't it because you can't have dom elements at compile time.

I think for dom it doesn't make sense to have a compile time thing, since you can't have compile time dom nodes

how do I create a dom node with onclick where it's a function. setAttribute assumes text

(aset el "onclick" (fn [ev] ...)) should work?

The dom nodes are rendering now in this example, but the event handler is not firing: https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9lc20uc2gvaWRpb21vcnBoIiA6cmVmZXIgW0lkaW9tb3JwaF0gOnJlbmFtZSB7SWRpb21vcnBoIEl9XSkKCihkZWZuIGNyZWF0ZS1ub2RlIFtoaWNjdXBdCiAgKGpzL2NvbnNvbGUubG9nIGhpY2N1cCkKICAoY29uZAogICAgOzsgVGV4dCBub2RlCiAgICAob3IKICAgICAgKG51bWJlcj8gaGljY3VwKQogICAgICAoc3RyaW5nPyBoaWNjdXApKSAoanMvZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUgaGljY3VwKQogICAgCiAgICA7OyBWZWN0b3IgPSBbdGFnIGF0dHJzICYgY2hpbGRyZW5dCiAgICAodmVjdG9yPyBoaWNjdXApCiAgICAobGV0IFtbdGFnIGF0dHJzICYgY2hpbGRyZW5dIGhpY2N1cAogICAgICAgICAgXyAoanMvY29uc29sZS5sb2cgOnRhZyB0YWcgOmNoaWxkcmVuIGNoaWxkcmVuKQogICAgICAgICAgW2F0dHJzIGNoaWxkcmVuXSAoaWYgKG1hcD8gYXR0cnMpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2F0dHJzIGNoaWxkcmVuXQogICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuaWwgKGNvbnMgYXR0cnMgY2hpbGRyZW4pXSkKICAgICAgICAgIF8gKGpzL2NvbnNvbGUubG9nIDpjaGlsZHJlbm5uIGNoaWxkcmVuKQogICAgICAgICAgZWwgKGpzL2RvY3VtZW50LmNyZWF0ZUVsZW1lbnQgdGFnKV0KICAgICAgKGpzL2NvbnNvbGUubG9nIDpkdWR1dXVkZSkKICAgICAgOzsgU2V0IGF0dHJpYnV0ZXMKICAgICAgKGRvc2VxIFtbayB2XSAob3IgYXR0cnMge30pXQogICAgICAgIChjb25kCiAgICAgICAgICA7OyBzcGVjaWFsIGNhc2U6IGZ1bmN0aW9ucyBsaWtlIDpvbmNsaWNrCiAgICAgICAgICAoZm4%2FIHYpIChhc2V0IGVsIGsgdikKICAgICAgICAgIDs7IHJlZ3VsYXIgYXR0cmlidXRlOiBjb252ZXJ0IHRvIHN0cmluZwogICAgICAgICAgOmVsc2UgKC5zZXRBdHRyaWJ1dGUgZWwgayB2KSkpCiAgICAgIAogICAgICA7OyBBcHBlbmQgY2hpbGRyZW4gcmVjdXJzaXZlbHkKICAgICAgKGpzL2NvbnNvbGUubG9nIDpjaGlsZHJlbnMgY2hpbGRyZW4pCiAgICAgIChkb3NlcSBbY2hpbGQgY2hpbGRyZW5dCiAgICAgICAgKGpzL2NvbnNvbGUubG9nIDpjaGlsZCBjaGlsZCA6Y2hpbGRyZW4gY2hpbGRyZW4pCiAgICAgICAgKC5hcHBlbmRDaGlsZCBlbCAoZG90byAoY3JlYXRlLW5vZGUgY2hpbGQpCiAgICAgICAgICAgICAgICAgICAgICAgICAgIChqcy9jb25zb2xlLmxvZyA6Y2hpbGQtbm9kZSkpKSkKICAgICAgCiAgICAgIGVsKQoKICAgIDplbHNlCiAgICAodGhyb3cgKGpzL0Vycm9yLiAoc3RyICJJbnZhbGlkIGhpY2N1cDogIiBoaWNjdXApKSkpKQoKKGRlZiByb290IChvcgogICAgICAgICAgICAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2NvbnRhaW5lciIpCiAgICAgICAgICAgIChkb3RvIChqcy9kb2N1bWVudC5jcmVhdGVFbGVtZW50ICJkaXYiKQogICAgICAgICAgICAgIChzZXQhIC1pZCAiY29udGFpbmVyIikKICAgICAgICAgICAgICAoanMvZG9jdW1lbnQuYm9keS5wcmVwZW5kKSkpKQoKKGRlZiBzdGF0ZSAoYXRvbSB7OmNvdW50ZXIgMAogICAgICAgICAgICAgICAgICA6aW5wdXQgIkhlbGxvIn0pKQoKKGRlZm4gZnVjayBbXQogIChqcy9jb25zb2xlLmxvZyA6ZnVjaykpCgooZGVmbiBteS1jb21wb25lbnQgW10KICBbOmRpdgogICBbOmRpdiAiQ291bnQ6ICIgKDpjb3VudGVyIEBzdGF0ZSldCiAgIFs6ZGl2IFs6YnV0dG9uIHs7OyA6aWQgOmJ0bgogICAgICAgICAgICAgICAgICAgOm9uY2xpY2sgIyhkbwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKHBybiA6ZHVkZSkKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChzd2FwISBzdGF0ZSBhc3NvYyA6aW5wdXQgKC0%2BICUgOnRhcmdldCA6dmFsdWUpKSl9CiAgICAgICAgICAiUGxlYXNlIGNsaWNrIG1lIl1dCiAgIFs6aW5wdXQgezppZCA6aW4gOnR5cGUgOnRleHQgOnZhbHVlICg6aW5wdXQgQHN0YXRlKX1dCiAgIFs6cHJlICg6aW5wdXQgQHN0YXRlKV1dKQoKKGRlZm4gbW9ycGggW10KICAoSS9tb3JwaCByb290IChkb3RvIChjcmVhdGUtbm9kZSAobXktY29tcG9uZW50KSkKICAgICAgICAgICAgICAgICAgKGpzL2NvbnNvbGUubG9nKSkKICAgIHs6bW9ycGhTdHlsZSA6aW5uZXJIVE1MfSkpCgooYWRkLXdhdGNoIHN0YXRlIDpzdGF0ZSAoZm4gW18gXyBfIF9dCiAgICAgICAgICAgICAgICAgICAgICAgICAgKG1vcnBoKSkpCgoobW9ycGgpCgojXyguYWRkRXZlbnRMaXN0ZW5lciAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2J0biIpIDpjbGljawogICAgKGZuIFtdCiAgICAgIChzd2FwISBzdGF0ZSB1cGRhdGUgOmNvdW50ZXIgaW5jKSkpCgojXyguYWRkRXZlbnRMaXN0ZW5lciAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2luIikgOmlucHV0CiAgICAoZm4gW2V2XQogICAgICAoc3dhcCEgc3RhdGUgYXNzb2MgOmlucHV0ICgtPiBldiA6dGFyZ2V0IDp2YWx1ZSkpKSk%3D

Looks like idiomorph doesn't attach it correctly. If I right click the button, inspect, do "Use in Console" and then this: temp0.onclick = () => alert("hi"); it then alerts if i click the button.

oooh ok

So that method definitely does attach the handler

document.querySelector("#btn").onclick

is null

You mean the idiomorph rendered version?

yeah

i don't know anything about it but maybe they have some other way of mounting functions

but when Iog it in my building of the dom it's there:

(js/console.log :set??? (.-onclick el))

are you sure idiomorph supports onclick, where did you read this

huh? did I say that?

i mean the aset method of attaching onclick

I don't know anything about idiomorph

lol

maybe I'm confusing you with chatGPT :P

sorry

yeah I'll try attaching an onclick, to see if that works

i am basically a human chatgpt, always having hallucinations

lol

I'm trying (.addEventListener el "click" v)

but no lock

luck

unlike chatgpt i have to sleep unfortunately. good luck with it! 👋

fair enough! sleep well

anyway, this wasn't in vain. I've discovered that idiomorph doesn't preserve event handlers, so eucalypt has a +1 on this one now too

snabbdom might be nice to try next

it does allow you to preserve event listeners and seems to be just as small as idiomorph

probably eucalypt already does something like snabbdom

Got a snabbdom example working: https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9lc20uc2gvc25hYmJkb20iIDpyZWZlciBbaAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbml0CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByb3BzTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGV2ZW50TGlzdGVuZXJzTW9kdWxlXV0pCgooZGVmIHBhdGNoIChpbml0IFtjbGFzc01vZHVsZSBwcm9wc01vZHVsZSBzdHlsZU1vZHVsZSBldmVudExpc3RlbmVyc01vZHVsZV0pKQoKKGRlZm4gY3JlYXRlLW5vZGUgW2hpY2N1cF0KICAoY29uZAogICAgKG9yCiAgICAgIChudW1iZXI%2FIGhpY2N1cCkKICAgICAgKHN0cmluZz8gaGljY3VwKSkgaGljY3VwCiAgICAodmVjdG9yPyBoaWNjdXApCiAgICAobGV0IFtbdGFnIGF0dHJzICYgY2hpbGRyZW5dIGhpY2N1cAogICAgICAgICAgW2F0dHJzIGNoaWxkcmVuXSAoaWYgKG1hcD8gYXR0cnMpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2F0dHJzIGNoaWxkcmVuXQogICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuaWwgKGNvbnMgYXR0cnMgY2hpbGRyZW4pXSkKICAgICAgICAgIGVsIChoIHRhZyBhdHRycwogICAgICAgICAgICAgICAobWFwdiBjcmVhdGUtbm9kZSBjaGlsZHJlbikpXQogICAgICBlbCkKICAgIDplbHNlCiAgICAodGhyb3cgKGpzL0Vycm9yLiAoc3RyICJJbnZhbGlkIGhpY2N1cDogIiBoaWNjdXApKSkpKQoKKGRlZiBzdGF0ZSAoYXRvbSB7OmNvdW50ZXIgMAogICAgICAgICAgICAgICAgICA6aW5wdXQgIkhlbGxvIn0pKQoKKGRlZm4gbXktY29tcG9uZW50IFtdCiAgWzpkaXYKICAgWzpkaXYgIkNvdW50OiAiICg6Y291bnRlciBAc3RhdGUpXQogICBbOmRpdiBbOmJ1dHRvbiB7Om9uIHs6Y2xpY2sgIyhkbwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKHN3YXAhIHN0YXRlIHVwZGF0ZSA6Y291bnRlciBpbmMpKX19CiAgICAgICAgICAiUGxlYXNlIGNsaWNrIG1lIl1dCiAgIFs6aW5wdXQgezpvbiB7OmlucHV0ICMoc3dhcCEgc3RhdGUgYXNzb2MgOmlucHV0ICgtPiAlIDp0YXJnZXQgOnZhbHVlKSl9CiAgICAgICAgICAgIDpwcm9wcyB7OnR5cGUgOnRleHQgOnZhbHVlICg6aW5wdXQgQHN0YXRlKX19XQogICBbOnByZSAoOmlucHV0IEBzdGF0ZSldXSkKCihkZWYgcm9vdCAob3IKICAgICAgICAgICAgKGpzL2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgIiNjb250YWluZXIiKQogICAgICAgICAgICAoZG90byAoanMvZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAiZGl2IikKICAgICAgICAgICAgICAoc2V0ISAtaWQgImNvbnRhaW5lciIpCiAgICAgICAgICAgICAgKGpzL2RvY3VtZW50LmJvZHkucHJlcGVuZCkpKSkKCihkZWYgdmRvbSAoYXRvbSAocGF0Y2ggcm9vdCAoY3JlYXRlLW5vZGUgKG15LWNvbXBvbmVudCkpKSkpCgooZGVmbiBtb3JwaCBbXQogIChsZXQgW25ldyAoY3JlYXRlLW5vZGUgKG15LWNvbXBvbmVudCkpXQogICAgKHBhdGNoIEB2ZG9tIG5ldykKICAgIChyZXNldCEgdmRvbSBuZXcpKSkKCihhZGQtd2F0Y2ggc3RhdGUgOnN0YXRlIChmbiBbXyBfIF8gX10KICAgICAgICAgICAgICAgICAgICAgICAgICAobW9ycGgpKSk%3D

(6kb zipped single page with vite)

Very nice!

That's so clean.

Yeah I knew

Probably we can also build replicant without snabbdom now that we have eucalypts example

cc @christian767

I'm 74% of the way through porting the Preact test suite to Eucalypt. Have fixed a ton of bugs due to this (`preact-tests` branch).

nice!

Dumdom was a stop-gap solution to get us off React. It was built to be 1:1 API compliant with Quiescent, the react wrapper we used. I chose snabbdom for the vdom implementation, because I thought doing that part would be too difficult. The dumdom code was not very good, and certainly not very performant. Still it served us well for a few years. The main priority was to get us off React, but ultimately the goal was to get out of the JS ecosystem entirely. After a few years I worked up the courage to try my hand at the DOM diffing, and built Replicant as a pure Clojure alternative that supported the ideas we developed with Dumdom as first class concepts: event handlers as data, no component local state, hiccup/data all the way. There wasn't anything particularly wrong with snabbdom. We just wanted a pure CLJ solution.

Just for reference, might be interesting for @chris358 too Here's kinda lifecycle management using snabbdom https://squint-cljs.github.io/squint/?src=KHJlcXVpcmUgJ1siaHR0cHM6Ly9lc20uc2gvc25hYmJkb20iIDpyZWZlciBbaAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbml0CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByb3BzTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlTW9kdWxlCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGV2ZW50TGlzdGVuZXJzTW9kdWxlXV0pCgooZGVmIHBhdGNoIChpbml0IFtjbGFzc01vZHVsZSBwcm9wc01vZHVsZSBzdHlsZU1vZHVsZSBldmVudExpc3RlbmVyc01vZHVsZV0pKQoKKGRlZm4gY3JlYXRlLW5vZGUgW2hpY2N1cF0KICAoY29uZAogICAgKG9yCiAgICAgIChudW1iZXI%2FIGhpY2N1cCkKICAgICAgKHN0cmluZz8gaGljY3VwKQogICAgICAoYm9vbGVhbj8gaGljY3VwKQogICAgICAobmlsPyBoaWNjdXApKSAoc3RyIGhpY2N1cCkKICAgICh2ZWN0b3I%2FIGhpY2N1cCkKICAgIChsZXQgW1t0YWcgJiBbYXR0cnMgJiBjaGlsZHJlbiA6YXMgYWxsLWNoaWxkcmVuXV0gaGljY3VwCiAgICAgICAgICBbYXR0cnMgY2hpbGRyZW5dIChpZiAobWFwPyBhdHRycykKICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbYXR0cnMgY2hpbGRyZW5dCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW25pbCBhbGwtY2hpbGRyZW5dKQogICAgICAgICAgZWwgKGlmIChmbj8gdGFnKQogICAgICAgICAgICAgICAoY3JlYXRlLW5vZGUgKGFwcGx5IHRhZyBhbGwtY2hpbGRyZW4pKQogICAgICAgICAgICAgICAoZG8KICAgICAgICAgICAgICAgICAoaCB0YWcgYXR0cnMKICAgICAgICAgICAgICAgICAgIChtYXB2IGNyZWF0ZS1ub2RlIGNoaWxkcmVuKSkpKV0KICAgICAgZWwpCiAgICA6ZWxzZQogICAgKGRvCiAgICAgICh0aHJvdyAoanMvRXJyb3IuIChzdHIgIkludmFsaWQgaGljY3VwOiAiIGhpY2N1cCkpKSkpKQoKKGRlZm4gc2xpZGVyIFt0aGUtYXRvbSBjYWxjLWZuIHBhcmFtIHZhbHVlIG1pbiBtYXggc3RlcCBpbnZhbGlkYXRlc10KICBbOmlucHV0IHs6cHJvcHMgezp0eXBlICJyYW5nZSIgOnZhbHVlIHZhbHVlIDptaW4gbWluIDptYXggbWF4IDpzdGVwIHN0ZXB9CiAgICAgICAgICAgOnN0eWxlIHs6d2lkdGggIjUwJSJ9CiAgICAgICAgICAgOm9uIHs6aW5wdXQgKGZuIFtlXQogICAgICAgICAgICAgICAgICAgICAgICAgKGxldCBbbmV3LXZhbHVlIChqcy9wYXJzZUZsb2F0CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoYWdldCAoYWdldCBlICJ0YXJnZXQiKSAidmFsdWUiKSldCiAgICAgICAgICAgICAgICAgICAgICAgICAgIChzd2FwISB0aGUtYXRvbQogICAgICAgICAgICAgICAgICAgICAgICAgICAgIChmbiBbZGF0YV0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICgtPiBkYXRhCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChhc3NvYyBwYXJhbSBuZXctdmFsdWUpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChkaXNzb2MgaW52YWxpZGF0ZXMpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGMtZm4pKSkpKX19XSkKCihkZWZuIGNhbGMtb2htcyBbezprZXlzIFt2b2x0YWdlIGN1cnJlbnQgcmVzaXN0YW5jZV0gOmFzIGRhdGF9XQogIChpZiAobmlsPyB2b2x0YWdlKQogICAgKGFzc29jIGRhdGEgOnZvbHRhZ2UgKCogY3VycmVudCByZXNpc3RhbmNlKSkKICAgIChhc3NvYyBkYXRhIDpjdXJyZW50ICgvIHZvbHRhZ2UgcmVzaXN0YW5jZSkpKSkKCihkZWYgb2htcy1kYXRhIChhdG9tIHs6dm9sdGFnZSAxMiA6Y3VycmVudCAwLjUgOnJlc2lzdGFuY2UgMjQKICAgICAgICAgICAgICAgICAgICAgIDpzaG93PyB0cnVlfSkpCgooZGVmbiBvaG1zLWxhdy1wYWdlIFtdCiAgKGxldCBbezprZXlzIFt2b2x0YWdlIGN1cnJlbnQgcmVzaXN0YW5jZV19IEBvaG1zLWRhdGFdCiAgICBbOmRpdgogICAgIFs6YnV0dG9uIHs6b24gezpjbGljayAjKHN3YXAhIG9obXMtZGF0YSB1cGRhdGUgOnNob3c%2FIG5vdCl9fQogICAgICAiU2hvdz8gIiAoOnNob3c%2FIEBvaG1zLWRhdGEpXQogICAgICh3aGVuICg6c2hvdz8gQG9obXMtZGF0YSkKICAgICBbOmRpdgogICAgICB7Omhvb2sgezpjcmVhdGUgKGZuIFt2bm9kZV0gKGpzL2NvbnNvbGUubG9nICJtb3VudGVkIikpCiAgICAgICAgICAgICA6dXBkYXRlIChmbiBbb2xkIG5ld10gKGpzL2NvbnNvbGUubG9nICJ1cGRhdGVkIikpCiAgICAgICAgICAgICA6ZGVzdHJveSAoZm4gW3Zub2RlXSAoanMvY29uc29sZS5sb2cgInVubW91bnRlZCIpKX19CiAgICAgIFs6aDMgIk9obSdzIExhdyBDYWxjdWxhdG9yIl0KICAgICAgWzpkaXYKICAgICAgIlZvbHRhZ2U6ICIgKC50b0ZpeGVkIHZvbHRhZ2UgMikgIlYiCiAgICAgIFtzbGlkZXIgb2htcy1kYXRhIGNhbGMtb2htcyA6dm9sdGFnZSB2b2x0YWdlIDAgMzAgMC4xIDpjdXJyZW50XV0KICAgICAgWzpkaXYKICAgICAgIkN1cnJlbnQ6ICIgKC50b0ZpeGVkIGN1cnJlbnQgMikgIkEiCiAgICAgIFtzbGlkZXIgb2htcy1kYXRhIGNhbGMtb2htcyA6Y3VycmVudCBjdXJyZW50IDAgMyAwLjAxIDp2b2x0YWdlXV0KICAgICAgWzpkaXYKICAgICAgIlJlc2lzdGFuY2U6ICIgKC50b0ZpeGVkIHJlc2lzdGFuY2UgMikgIiIKICAgICAgIFtzbGlkZXIgb2htcy1kYXRhIGNhbGMtb2htcyA6cmVzaXN0YW5jZSByZXNpc3RhbmNlIDAgMTAwIDEgOnZvbHRhZ2VdXV0pXSkpCgooZGVmIHJvb3QgKG9yCiAgICAgICAgICAgIChqcy9kb2N1bWVudC5xdWVyeVNlbGVjdG9yICIjY29udGFpbmVyIikKICAgICAgICAgICAgKGRvdG8gKGpzL2RvY3VtZW50LmNyZWF0ZUVsZW1lbnQgImRpdiIpCiAgICAgICAgICAgICAgKHNldCEgLWlkICJjb250YWluZXIiKQogICAgICAgICAgICAgIChqcy9kb2N1bWVudC5ib2R5LnByZXBlbmQpKSkpCgooZGVmIHZkb20gKGF0b20gKHBhdGNoIHJvb3QgKGNyZWF0ZS1ub2RlIFtvaG1zLWxhdy1wYWdlXSkpKSkKCihkZWZuIG1vcnBoIFtdCiAgKGxldCBbbmV3IChjcmVhdGUtbm9kZSBbb2htcy1sYXctcGFnZV0pXQogICAgKHBhdGNoIEB2ZG9tIG5ldykKICAgIChyZXNldCEgdmRvbSBuZXcpKSkKCihhZGQtd2F0Y2ggb2htcy1kYXRhIDpzdGF0ZSAoZm4gW18gXyBfIF9dCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChtb3JwaCkpKQ%3D%3D (click on Show to unmount and re-mount component)

btw @pez I think implementing something that looks a lot like replicant on top of snabbdom will work in squint (see demo above)

Ooh very nice. > Snabbdom consists of an extremely simple, performant, and extensible core that is only ≈ 200 SLOC. 🤯

If Eucalypt could be a Reagent-API wrapper around something like this it would mean less code to test/maintain which would be good.

worth a branch :)

wonder what it will do to the size

my hacking sessions survived your bed time... now I need to catch some zzz myself I think, before you confuse me with an LLM

ha ha sleep well

I'll finish porting Preact tests over as I think having a good test suite will make it easier to try these things out.

thanks. looking forward to the new version with the bugfix!

oh i should npm publish taht, thanks for the reminder

Replicant’s predecessor, Dumdom, used snabbdom, as it happens.