Update LiveView for Alpine.js 101

Today I tried to upgrade Alpine.js V2 to the newly released version 3 in one of my phoenix applications. As with major versions, the new alpine version introduces some breaking changes.

First, you need now to explicitly start alpine with Alpine.start().

import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();

Second, and this took me some time to figure out, as it is not documented on the changes page, you need to adapt how alpine integrates with LiveView. Before alpine elements had a property __x, that now changed so that you filter now for elements with the _x_dataStack property.

let liveSocket = new LiveSocket("/live", Socket, {
  ...,
  dom: {
    onBeforeElUpdated(from, to){
      if(from._x_dataStack){ 
        window.Alpine.clone(from, to); 
      }
    }
  },
})

That's it! I hope this works for you as well and saves you some time.

Comments

[Azhar Ibn Mostafiz]

Change es2016 to es2017 in config.exs file

config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

[Alessandro Di Maria]

Yes! Thanks for pointing out. Alpine >= 3.5 needs target es2017