I have been trying to solve this issue with Alpine in Phoenix 1.6 LiveView: [image] A simple example of Alpine.js code is not working properly in Phoenix 1.6 LiveView Questions YES!!! It finally works. Thanks a lot. For people who will encounter similar probl…

Don’t load any javascript off the internet. You will never know if any of the CDN site is compromised, or DNS hijacked. I’d suggest you to use npm. You don’t have to use webpack and can stick to esbuild.

So cdn can be hijacked but npm can’t? :smiley: No, thank you. Never will I use npm again. I hate it. If there is no way to use Alpine with Phoenix 1.6 in LiveView then I will abandon it and go for something else or even vanilla JS but I won’t ever use npm.

So cdn can be hijacked but npm can’t? With a CDN your users are downloading every time with no verification. With NPM, you download the package yourself once, and verify the checksum through the tool. Nothing is bullet proof, but which one do you think is safer? There is a way to use any javascr…

[image] kalkatfyodor: If there is no way to use Alpine with Phoenix 1.6 in LiveView then I will abandon it and go for something else or even vanilla JS but I won’t ever use npm. It’s possible that some resources are loaded twice in your development environment due to the way live reloads are …

[image] derek-zhou: With a CDN your users are downloading every time with no verification This isn’t quite true. You can use Subresource Integrity to make sure your users get a verified version of a given resource from a CDN. It works by adding an SHA384 hash to the tag that includes the res…

[image] kalkatfyodor: Like the authors don’t give a crap about it. The authors care about Phoenix. :+1:

[image] kalkatfyodor: Hmm, it’s weird that it’s so hard to set up Alpine to work with Phoenix 1.6. I don’t use alpine myself, but there were people posting about their setup before, such as: [image] Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief …

Its as easy as npm i alpinejs init window.Alpine = Alpine ... Alpine.start() // you may want to do this after other things have initialized and then hook it in the live socket like let liveSocket = new LiveSocket('/live', Socket, { ... dom: { onBeforeElUpdated(from, to) { if (from…

I DO NOT WANT TO USE NPM!!! Is it clear now? Thank you. I want to download a file from CDN and save it as alpine.js and use it like you suggest: import topbar from "../vendor/topbar"; import Alpine from "../vendor/alpine"; window.Alpine = Alpine; Alpine.start(); let csrfToken = document .quer…

the message was for Derek, and you are free to completely ignore it. And maybe take some time off coding. Maybe clean your car or do some knee bends. :wink:

Alpine.js loaded 2 times

Questions & Help Questions

derek-zhou December 8, 2021, 10:19pm 14

Interesting. The only thing new is this, so esbuild’s es2016 transpiling was the culprit?