Alpinejs-force-next-tick NPM

Alpine JS Force `$nextTick`

Alpine JS implementation of the double requestAnimationFrame method to force $nextTick

You can find out more about the issue in Vue here - https://github.com/vuejs/vue/issues/9200

Vue JS version - https://github.com/twickstrom/vue-force-next-tick

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-force-next-tick@latest/dist/force-next-tick.min.js"
></script>

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

With a Package Manager

yarn add -D alpinejs-force-next-tick

npm install -D alpinejs-force-next-tick

import Alpine from 'alpinejs'
import force-next-tick from 'alpinejs-force-next-tick'

Alpine.plugin(force-next-tick)

Alpine.start()

Example

It works the same way as Alpine JS $nextTick but uses the double requestAnimationFrame method - https://alpinejs.dev/magics/nextTick

<body x-data="{ firstName: 'John' }">
  <button
    @click="
      firstName = 'Jane'
      $forceNextTick(() => console.log($el.innerText))
    "
    x-text="firstName"
  >
  </button>
</body>

Here we are pausing an async function until after pending DOM updates. With this approach an argument is not required.

<body x-data="{ firstName: 'John' }">
  <button
    @click="
      firstName = 'Jane'
      await $forceNextTick()
      console.log($el.innerText)
    "
    x-text="firstName"
  >
  </button>
</body>