Accudio / async-alpine

Async Alpine brings advanced code splitting and lazy-loading to Alpine.js components!
https://async-alpine.dev
Apache License 2.0
152 stars 12 forks source link

var idle is minified to var $ witch breaks a legacy Zepto(jQuery alternative) implementation #33

Closed vascoeduardo closed 9 months ago

vascoeduardo commented 11 months ago

Hi Accudio,

I use async-alpine on my web project that uses ZeptoJS(jQuery alternative) for a legacy feature. As Zepto and jQuery use $ as the main identifier my old code stops working, because your idle function is called $ in the minified version since async-alpine v1.1.0.

Is it possible to minify to another name. Thanks for the great package and your help Vasco

Accudio commented 11 months ago

Hey! Could you confirm how you're loading Async Alpine?

I'd much prefer to instead work out if we can scope and isolate Async Alpine to not leak and interact with any external scripts, instead of manipulating the minified output.

vascoeduardo commented 11 months ago

Hey, at the moment I am loading it with a

I have a local copy of async-alpine.script.js not using the cdn

Accudio commented 11 months ago

Okay great, thanks for that. Due to workload I won't be able to take a look into this right now, but should be in the next couple of weeks.

In the meantime you could consider manually changing the variable name or adding type="module" to the script element may be enough to make it work.

vascoeduardo commented 11 months ago

Hey Accudio, we just changed the implementation. I have installed the npm module and using "import AsyncAlpine from 'async-alpine'" now everything works fine. Thanks for you support

iniznet commented 10 months ago

I've run into the same problem while managing an older site. I gotta say, it's a bit of a tricky issue because esbuild uses $ as one of its minification identifiers. The simplest solution would be to avoid exposing strategies globally. This way, we can minimize the likelihood of esbuild renaming them to $.

What do you think, Accudio? You can check out my commit attempt here: https://github.com/iniznet/async-alpine/commit/467c51ded5c0a8c0d3da7bd09b96595ab9ee7fff

I think we can use IIFE to isolate, but I decided to switch to npm+esm for better future.

Accudio commented 10 months ago

@iniznet That looks good and I'm happy to switch to using default exports. Although that fixes this particular problem of $, the script output does still pollute the global with single-letter variable names. That could be a problem in future so I think it makes sense to switch that to using an IIFE as you suggest.

That should be a simple change to line 12 of scripts/build.js, changing the fallback format to iife. Would you be up for making that change and filing a PR?

Thank you!