Init function without x-init

[skeemer]

It would be nice to not have to call x-init directly. I've seen discussions about this and even some about .component(), but that depends on calling the function a specific name from what I've seen. I'm wondering if this would be a good strategy without having to extend the API much. What if when the return from a component function is an array, the first element is the scope and the second is the init function.

function MyComponent(extraStuff) {
  const newState = {
     //  scope stuff
  }
  function init() {
     // run stuff on init
  }
  return [newState, init];
}

[mblarsen]

It is on the V3 roadmap:

Add Alpine.component('foo', {...}) (With magic __init() method)

[skeemer]

That just seems like overkill and a lot larger change to the API to add one small feature.

[KevinBatdorf]

You could write your own js script to add an auto init:

Array.from(document.querySelectorAll('[x-data]')).forEach(alpine => {
  alpine.setAttribute('x-init',
    [
      alpine.getAttribute('x-init'),
      `typeof init == 'function' && init()`
    ].filter(Boolean).join(';')
  )
})

then

<data x-data="{ something: true, init() { this.something = false } }"></div>

[skeemer]

Thank you! That saved me from some headaches with updating a component that now needs init.