$screen seems to be broken in combination with Livewire about alpine-magic-helpers HOT 8 CLOSED

Yeah, it works okay if you follow the defer rule we discussed above but if you put the library before livewire without defer, livewire will just override the code. :(

from alpine-magic-helpers.

Thanks for reporting the issue. We need to look into it (It must be something Livewire does) but it works correctly if you either

• include the magic helper after Livewire: https://laravelplayground.com/#/snippets/2d7d1e35-c8fb-4e7e-a9a2-e59e9ff6c7e2
• defer the helper library as you do for alpine (js modules are deferred by default): https://laravelplayground.com/#/snippets/0834288e-a00c-4665-884d-1bd06e255781

I don't think it's a problem with $screen, it's just that screen is the only helper that gets evaluated on startup.

I know that the readme doesn't suggest deferring the script but IMO magic helpers should always be deferred or added at the bottom of your body so it doesn't block the rendering of the page. I'm personally a big fan but we didn't agree internally.

Also, if you just need to hide a div based on screen size, a standard CSS rule is probably a better option.

from alpine-magic-helpers.

SimonTod thanks for the heads up! Indeed, the issue is gone then.

I think it is a good idea to mention this behavior at least at the $screen documentation, I added a PR for it.

from alpine-magic-helpers.

I know that the readme doesn't suggest deferring the script but IMO magic helpers should always be deferred or added at the bottom of your body so it doesn't block the rendering of the page. I'm personally a big fan but we didn't agree internally.

I'm okay with changing the docs. I think we will end up with people who put the Helpers script after Alpine with defer and it will break, but without defer, it still would probably work since Alpine is deferred. But let's update it and see what happens.

Alternatively I think Ryan did something with Spruce to ensure it's loaded in properly. We could try something like that. I haven't checked what he added yet though.

from alpine-magic-helpers.

Yep, putting it at the end of the page, after livewire, would work too. Tbh, it should work with and without defer in the original example so there could be something we can improve but i haven't looked into it yet.

from alpine-magic-helpers.

Okay, I had a look and unfortunately, it cannot be fixed in our repo.
All our helpers preserve any previous callback that is supposed to run before alpine doing

const alpine = window.deferLoadingAlpine || ((alpine) => alpine())

window.deferLoadingAlpine = function (callback) {
    AlpineWhateverMagicMethod.start()
    alpine(callback)
}

but livewire just overrides deferLoadingAlpine discarding any previously registered callback.

/* From livewire codebase */
window.deferLoadingAlpine = function (callback) {
    window.addEventListener('livewire:load', function () {
        callback();
    });
};

I'm going to close this issue since it's not strictly a helper issue.
We'll integrate something based on your PR in the readme soon, thanks.

from alpine-magic-helpers.

@SimoTod that's unfortunate. If I read this correctly there is a change required in the Livewire codebase for the Magic Helpers to register correctly.

from alpine-magic-helpers.

Could PR livewire too I suppose!

from alpine-magic-helpers.