alpinejs-force-next-tick
Advanced tools
Alpine JS implementation of the double `requestAnimationFrame` method to force`$nextTick`
$nextTickAlpine 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
<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>
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()
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>
FAQs
Alpine JS implementation of the double `requestAnimationFrame` method to force`$nextTick`
The npm package alpinejs-force-next-tick receives a total of 21 weekly downloads. As such, alpinejs-force-next-tick popularity was classified as not popular.
We found that alpinejs-force-next-tick demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers
