https://github.com/markmead/alpinejs-force-next-tick
Alpine JS implementation of the double `requestAnimationFrame` method to force `$nextTick`
https://github.com/markmead/alpinejs-force-next-tick
alpine-js alpinejs alpinejs-plugin nexttick
Last synced: 11 months ago
JSON representation
Alpine JS implementation of the double `requestAnimationFrame` method to force `$nextTick`
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-force-next-tick
- Owner: markmead
- License: mit
- Created: 2023-07-13T09:44:31.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T11:04:09.000Z (about 2 years ago)
- Last Synced: 2024-10-14T08:24:38.372Z (over 1 year ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, nexttick
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-force-next-tick
npm install -D alpinejs-force-next-tick
```
```js
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
```html
console.log($el.innerText))
"
x-text="firstName"
>
```
Here we are pausing an `async` function until after pending DOM updates. With
this approach an argument is not required.
```html
```
## Stats
