packages/alpinejs/builds/module.js

@@ -1,3 +1,5 @@
 import Alpine from './../src/index'
 
 export default Alpine
+
+export { Alpine }

packages/alpinejs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs",
-    "version": "3.13.3",
+    "version": "3.13.4",
     "description": "The rugged, minimal JavaScript framework",
     "homepage": "https://alpinejs.dev",
     "repository": {

packages/alpinejs/src/alpine.js

@@ -1,4 +1,4 @@
-import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
+import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw, watch } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
 import { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
@@ -73,6 +73,7 @@ let Alpine = {
     cloneNode, // INTERNAL
     bound,
     $data,
+    watch,
     walk,
     data,
     bind,

packages/alpinejs/src/directives.js

@@ -21,10 +21,7 @@ export function directive(name, callback) {
     return {
         before(directive) {
             if (!directiveHandlers[directive]) {
-                console.warn(
-                    "Cannot find directive `${directive}`. "
-                    + "`${name}` will use the default order of execution"
-                );
+                console.warn(String.raw`Cannot find directive \`${directive}\`. \`${name}\` will use the default order of execution`);
                 return;
             }
             const pos = directiveOrder.indexOf(directive);

packages/alpinejs/src/directives/x-id.js

@@ -1,8 +1,19 @@
+import { interceptClone } from "../clone"
 import { directive } from "../directives"
 import { setIdRoot } from '../ids'
 
 directive('id', (el, { expression }, { evaluate }) => {
     let names = evaluate(expression)
-    
+
     names.forEach(name => setIdRoot(el, name))
 })
+
+interceptClone((from, to) => {
+    // Transfer over existing ID registrations from
+    // the existing dom tree over to the new one
+    // so that there aren't ID mismatches...
+    if (from._x_ids) {
+        to._x_ids = from._x_ids
+    }
+})
+

packages/alpinejs/src/directives/x-model.js

@@ -71,7 +71,7 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     })
 
     if (modifiers.includes('fill'))
-        if ([null, ''].includes(getValue())
+        if ([undefined, null, ''].includes(getValue())
             || (el.type === 'checkbox' && Array.isArray(getValue()))) {
             el.dispatchEvent(new Event(event, {}));
     }

packages/alpinejs/src/magics/$id.js

@@ -1,14 +1,46 @@
 import { magic } from '../magics'
 import { closestIdRoot, findAndIncrementId } from '../ids'
+import { interceptClone } from '../clone'
 
-magic('id', el => (name, key = null) => {
-    let root = closestIdRoot(el, name)
+magic('id', (el, { cleanup }) => (name, key = null) => {
+    let cacheKey = `${name}${key ? `-${key}` : ''}`
 
-    let id = root
-        ? root._x_ids[name]
-        : findAndIncrementId(name)
+    return cacheIdByNameOnElement(el, cacheKey, cleanup, () => {
+        let root = closestIdRoot(el, name)
 
-    return key
-        ? `${name}-${id}-${key}`
-        : `${name}-${id}`
+        let id = root
+            ? root._x_ids[name]
+            : findAndIncrementId(name)
+
+        return key
+            ? `${name}-${id}-${key}`
+            : `${name}-${id}`
+    })
+})
+
+interceptClone((from, to) => {
+    // Transfer over existing ID registrations from
+    // the existing dom tree over to the new one
+    // so that there aren't ID mismatches...
+    if (from._x_id) {
+        to._x_id = from._x_id
+    }
 })
+
+function cacheIdByNameOnElement(el, cacheKey, cleanup, callback)
+{
+    if (! el._x_id) el._x_id = {}
+
+    // We only want $id to run once per an element's lifecycle...
+    if (el._x_id[cacheKey]) return el._x_id[cacheKey]
+
+    let output = callback()
+
+    el._x_id[cacheKey] = output
+
+    cleanup(() => {
+        delete el._x_id[cacheKey]
+    })
+
+    return output
+}

packages/alpinejs/src/magics/$watch.js

@@ -1,34 +1,19 @@
 import { magic } from '../magics'
+import { effect, release, watch } from '../reactivity'
 
-magic('watch', (el, { evaluateLater, effect }) => (key, callback) => {
+magic('watch', (el, { evaluateLater, cleanup }) => (key, callback) => {
     let evaluate = evaluateLater(key)
 
-    let firstTime = true
+    let getter = () => {
+        let value
 
-    let oldValue
+        evaluate(i => value = i)
 
-    let effectReference = effect(() => evaluate(value => {
-        // JSON.stringify touches every single property at any level enabling deep watching
-        JSON.stringify(value)
+        return value
+    }
 
-        if (! firstTime) {
-            // We have to queue this watcher as a microtask so that
-            // the watcher doesn't pick up its own dependencies.
-            queueMicrotask(() => {
-                callback(value, oldValue)
+    let unwatch = watch(getter, callback)
 
-                oldValue = value
-            })
-        } else {
-            oldValue = value
-        }
-
-        firstTime = false
-    }))
-
-    // We want to remove this effect from the list of effects
-    // stored on an element. Livewire uses that list to
-    // "re-run" Alpine effects after a page load. A "watcher"
-    // shuldn't be re-run like that. It will cause infinite loops.
-    el._x_effects.delete(effectReference)
+    cleanup(unwatch)
 })
+

packages/alpinejs/src/mutation.js

@@ -65,27 +65,24 @@ export function stopObservingMutations() {
     currentlyObserving = false
 }
 
-let recordQueue = []
-let willProcessRecordQueue = false
+let queuedMutations = []
 
 export function flushObserver() {
-    recordQueue = recordQueue.concat(observer.takeRecords())
+    let records = observer.takeRecords()
 
-    if (recordQueue.length && ! willProcessRecordQueue) {
-        willProcessRecordQueue = true
+    queuedMutations.push(() => records.length > 0 && onMutate(records))
 
-        queueMicrotask(() => {
-            processRecordQueue()
+    let queueLengthWhenTriggered = queuedMutations.length
 
-            willProcessRecordQueue = false
-        })
-    }
-}
-
-function processRecordQueue() {
-     onMutate(recordQueue)
-
-     recordQueue.length = 0
+    queueMicrotask(() => {
+        // If these two lengths match, then we KNOW that this is the LAST
+        // flush in the current event loop. This way, we can process
+        // all mutations in one batch at the end of everything...
+        if (queuedMutations.length === queueLengthWhenTriggered) {
+            // Now Alpine can process all the mutations...
+            while (queuedMutations.length > 0) queuedMutations.shift()()
+        }
+    })
 }
 
 export function mutateDom(callback) {
@@ -122,17 +119,17 @@ function onMutate(mutations) {
         return
     }
 
-    let addedNodes = []
-    let removedNodes = []
+    let addedNodes = new Set
+    let removedNodes = new Set
     let addedAttributes = new Map
     let removedAttributes = new Map
 
     for (let i = 0; i < mutations.length; i++) {
         if (mutations[i].target._x_ignoreMutationObserver) continue
 
         if (mutations[i].type === 'childList') {
-            mutations[i].addedNodes.forEach(node => node.nodeType === 1 && addedNodes.push(node))
-            mutations[i].removedNodes.forEach(node => node.nodeType === 1 && removedNodes.push(node))
+            mutations[i].addedNodes.forEach(node => node.nodeType === 1 && addedNodes.add(node))
+            mutations[i].removedNodes.forEach(node => node.nodeType === 1 && removedNodes.add(node))
         }
 
         if (mutations[i].type === 'attributes') {
@@ -177,7 +174,7 @@ function onMutate(mutations) {
     for (let node of removedNodes) {
         // If an element gets moved on a page, it's registered
         // as both an "add" and "remove", so we want to skip those.
-        if (addedNodes.includes(node)) continue
+        if (addedNodes.has(node)) continue
 
         onElRemoveds.forEach(i => i(node))
 
@@ -197,10 +194,6 @@ function onMutate(mutations) {
         node._x_ignore = true
     })
     for (let node of addedNodes) {
-        // If an element gets moved on a page, it's registered
-        // as both an "add" and "remove", so we want to skip those.
-        if (removedNodes.includes(node)) continue
-
         // If the node was eventually removed as part of one of his
         // parent mutations, skip it
         if (! node.isConnected) continue

packages/alpinejs/src/reactivity.js

@@ -56,6 +56,35 @@ export function elementBoundEffect(el) {
     return [wrappedEffect, () => { cleanup() }]
 }
 
+export function watch(getter, callback) {
+    let firstTime = true
+
+    let oldValue
+
+    let effectReference = effect(() => {
+        let value = getter()
+
+        // JSON.stringify touches every single property at any level enabling deep watching
+        JSON.stringify(value)
+
+        if (! firstTime) {
+            // We have to queue this watcher as a microtask so that
+            // the watcher doesn't pick up its own dependencies.
+            queueMicrotask(() => {
+                callback(value, oldValue)
+
+                oldValue = value
+            })
+        } else {
+            oldValue = value
+        }
+
+        firstTime = false
+    })
+
+    return () => release(effectReference)
+}
+
 export {
     release,
     reactive,

packages/alpinejs/src/utils/error.js

@@ -6,8 +6,10 @@ export function tryCatch(el, expression, callback, ...args) {
     }
 }
 
-export function handleError(error, el, expression = undefined) {
-    Object.assign( error, { el, expression } )
+export function handleError(error , el, expression = undefined) {
+    error = Object.assign( 
+        error ?? { message: 'No error message given.' }, 
+        { el, expression } )
 
     console.warn(`Alpine Expression Error: ${error.message}\n\n${ expression ? 'Expression: \"' + expression + '\"\n\n' : '' }`, el)
 

packages/anchor/builds/module.js

@@ -1,3 +1,5 @@
 import anchor from '../src/index.js'
 
 export default anchor
+
+export { anchor }

packages/anchor/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/anchor",
-    "version": "3.13.3",
+    "version": "3.13.4",
     "description": "Anchor an element's position relative to another",
     "homepage": "https://alpinejs.dev/plugins/anchor",
     "repository": {

packages/collapse/builds/module.js

@@ -1,3 +1,5 @@
 import collapse from '../src/index.js'
 
 export default collapse
+
+export { collapse }

packages/collapse/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/collapse",
-    "version": "3.13.3",
+    "version": "3.13.4",
     "description": "Collapse and expand elements with robust animations",
     "homepage": "https://alpinejs.dev/plugins/collapse",
     "repository": {

packages/csp/builds/module.js

@@ -1,3 +1,5 @@
 import Alpine from './../src/index'
 
 export default Alpine
+
+export { Alpine }

packages/csp/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@alpinejs/csp",
-    "version": "3.0.0-alpha.0",
-    "description": "A CSP compatible build of Alpine",
+    "version": "3.13.4",
+    "description": "A CSP-friendly build of AlpineJS",
     "author": "Caleb Porzio",
     "license": "MIT",
     "main": "dist/module.cjs.js",
     "module": "dist/module.esm.js",
     "dependencies": {
-        "@vue/reactivity": "^3.0.2"
+        "@vue/reactivity": "~3.1.1"
     }
 }