Alpine.js loaded 2 times

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?

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 javascript lib in phoenix liveview; you only need to figure it out. I would assume importing the correct ES module build of Alpine from my app.js, adding the required initialization and hooks, shall do the job.

It’s possible that some resources are loaded twice in your development environment due to the way live reloads are implemented. Try running your application in prod and this behavior will probably go away.

Also, AlpineJS works very well with LiveView

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 resource.

This is what it would look like for the most recent version of Alpine.

<script src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js" integrity="sha384-RdtRRt1iDhfyBdfZIXH83/BU+0bhkpr746r/OHT0eRgZB0W7gD8bDfabHV42kyyA" crossorigin="anonymous"></script>

You can easily generate these hashes here: https://www.srihash.org/

The authors care about Phoenix.

I don’t use alpine myself, but there were people posting about their setup before, such as:

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._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    },
  },
})

change config.exs esbuild config to target es2017.

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
  .querySelector("meta[name='csrf-token']")
  .getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to);
      }
    },
  },
});

But it doesn’t work at all unless I add this line in between the head tags in root.html.heex file:

   <script defer src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
  </head>

And now it works great. However it’s probably loaded twice.

The insane thing is that if I remove either one of these scripts Alpine is not working on my site. I don’t get it at all.

By the way, in VS Code I am getting this error when I hover over Alpine in window.Alpine:

image773×246 29.2 KB

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.