"Recursive" x-html doesn't work with "native" x-html

[Luddinus]

Hi.

I was using this code to reproduce "x-html" version previous 3.1.0 (copied from alpine docs at that moment

Alpine.directive('html', (el, { expression }, { evaluateLater, effect }) => {
   let getHtml = evaluateLater(expression);

   effect(() => {
      getHtml(html => {
         el.innerHTML = html;
      });
   });
});

I was returning this template from the server (after and axios request)

<div x-data x-init=console.log('ok')></div>

And console.log command worked.

But using the new version, it doesnt' work now. What am I missing?

Anyway, thanks for the new Alpine version (and the return of the x-html directive)

[Luddinus]

I guess I "need" same as here: #1584

[Luddinus]

Okey, instead of using x-html directive, I use x-effect with $nextTick

<div x-effect="$nextTick(() => { $el.innerHTML = html; })"></div>

Working (I don't understand why exactly, bit lucky)

[peterhijma]

@calebporzio would you consider x-html bugged at the moment?

[gitvinodh]

@Luddinus thank you. Very much appreciate that you took the time and trouble to write that snippet down. I thought I was going a bit crazy when my old code was not working. I used your fix until the bug is repaired. Not complaining or anything like that! Very much impressed by alpinejs 3 overall.

[peterhijma]

x-effect="$nextTick(() => { $el.innerHTML = html; })"

Although fixed in next release probabaly, I wanted to mention you can leave out $nextTick

[calebporzio]

Good call @Luddinus - I would consider it bugged. It has been fixed in the following PR: #1646

I will tag a release soon.