Alpine init issue

CherryPoppins

Let’s say I have the following in my liveview template:

my_template.html.leex
<div phx-hook="myHook">
  <div
    x-data="{inputvalue=''}"
    x-init="
      console.log('I AM INITING')
    "
  >
  <input x-model="inputValue">
  </div>
</div>
<script>
  document.addEventListener('alpine:init', () => console.log('INIT FROM SCRIPT TAG!'))
</script>

myHook.js
hooks.myHook = {
  mounted () {
    console.log('HOOK MOUNTED')
    document.addEventListener('alpine:init', () => console.log('INIT FROM HOOK'))
  }
}

My output is:

INIT FROM SCRIPT TAG
I AM INITING
I AM INITING
HOOK MOUNTED
I AM INITING
I AM INITING

Why is the x-init running 4 times and how can I make it only run once?
How can I get my hook to execute before x-init or the alpine:init event runs?

6 comments

/phoenix #alpinejs

1 3685 6

2021-09-22 16:05:44 UTC

Showing Posts 1 to 6

Show Best Posts
Show All (oldest first)
Show All (newest first)

ruslandoga

I think x-init runs first when you get plain html response, then it runs again when liveview inits. Does it run 4 times without hook as well? If not, then I guess it might be forced to run after every hook event (mounted and updated in your case).

Also, how do you have alpine+liveivew set up?

Post #1

CherryPoppins

My alpine setup (using “alpinejs”: “^3.2.3”):

import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

...

const liveSocket = new LiveSocket('/live', Socket, {
      params: {_csrf_token: csrfToken},
      dom: {
        onBeforeElUpdated(from, to) {
          if (from._x_dataStack) {
            window.Alpine.clone(from, to)
            window.Alpine.initTree(to)
          }
        },
      },
      hooks: Hooks,
    })

Post #2

ruslandoga

Try also removing Alpine.initTree. Having it called all the time might lead to problems, and it’s not always necessary. You can call it conditionally, like if from element has a data-init-tree attribute.

Post #3

CherryPoppins

So, I removed the window.Alpine.initTree(to) line and now my output is:

INIT FROM SCRIPT TAG
I AM INITING
HOOK MOUNTED
I AM INITING
I AM INITING

That x-init is now running 3 times instead of 4. Also, with or without the hook, those last 2 init console.logs are still running.

Post #4

ruslandoga

Btw, I think x-data needs to be an object, not a code block, so try replacing x-data="{inputvalue=''}" with x-data="{inputvalue: ''}" and checking the results, maybe it affects something (maybe alpine thinks it’s Alpine.data component and executes it). Either way, I think you won’t be able to make x-init run once due to how liveview work, it would run at least twice. And regarding 2, try running Alpine.start() after liveview calls.

Also, try running without liveview connect, how many logs to do see in that case?

Post #5

CherryPoppins

Sorry the x-data="{inputvalue=''}" was a typo, in my actual code I have it as you said, x-data="{inputvalue: ''}".

On the Alpine.start(), I thought about that but it seems kinda hacky, and I’m also not always sending a message back to the hook on liveview calls so wouldn’t necessarily be able to always call Alpine.start() after liveview calls without going out of my way to do so. It seems I’m not the only on experiencing this and Alpine apparently doesn’t think it is a bug since they moved this ticket to discussion. Would have been nice to have gotten an explanation when moved. I appreciate you trying to help me out @ruslandoga!

Post #6

— All posts loaded —