Add Promise to $nextTick

packages/alpinejs/src/nextTick.js

@@ -3,14 +3,19 @@ let tickStack = []
 
 let isHolding = false
 
-export function nextTick(callback) {
-    tickStack.push(callback)
-
-    queueMicrotask(() => {
-        isHolding || setTimeout(() => {
-            releaseNextTicks()
-        })
+export function nextTick(callback = () => {}) {
+  queueMicrotask(() => {
+    isHolding || setTimeout(() => {
+      releaseNextTicks()
     })
+  })
+
+  return new Promise((res) => {
+    tickStack.push(() => {
+        callback();
+        res();
+    });
+  })
 }
 
 export function releaseNextTicks() {

packages/docs/src/en/magics/nextTick.md

@@ -21,3 +21,22 @@ title: nextTick
 ```
 
 In the above example, rather than logging "Hello" to the console, "Hello World!" will be logged because `$nextTick` was used to wait until Alpine was finished updating the DOM.
+
+<a name="promises"></a>
+
+## Promises
+
+`$nextTick` returns a promise, allowing the use of `$nextTick` to pause an async function until after pending dom updates. When used like this, `$nextTick` also does not require an argument to be passed.
+
+```alpine
+<div x-data="{ title: 'Hello' }">
+    <button
+        @click="
+            title = 'Hello World!';
+            await $nextTick();
+            console.log($el.innerText);
+        "
+        x-text="title"
+    ></button>
+</div>
+```