alpinejs · calebporzio · Jul 24, 2023 · Jan 17, 2023 · Jan 23, 2023 · Feb 8, 2023
diff --git a/index.html b/index.html
@@ -1,54 +1,123 @@
 <html>
-<script src="./packages/intersect/dist/cdn.js" defer></script>
-<script src="./packages/morph/dist/cdn.js" defer></script>
-<script src="./packages/history/dist/cdn.js"></script>
-<script src="./packages/persist/dist/cdn.js"></script>
-<script src="./packages/focus/dist/cdn.js"></script>
-<script src="./packages/mask/dist/cdn.js"></script>
-<script src="./packages/ui/dist/cdn.js" defer></script>
-<script src="./packages/alpinejs/dist/cdn.js" defer></script>
-<script src="//cdn.tailwindcss.com"></script>
+    <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
+    <script src="./packages/morph/dist/cdn.js" defer></script>
+    <script src="./packages/persist/dist/cdn.js"></script>
+    <script src="./packages/focus/dist/cdn.js"></script>
+    <script src="./packages/mask/dist/cdn.js"></script>
+    <script src="./packages/ui/dist/cdn.js" defer></script> -->
+    <script src="./packages/history/dist/cdn.js"></script>
+    <script src="./packages/alpinejs/dist/cdn.js" defer></script>
+    <!-- <script src="//cdn.tailwindcss.com"></script> -->
+    <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
-<div
-    x-data="{
-        query: '',
-        people: [
-            { id: 1, name: 'Wade Cooper' },
-            { id: 2, name: 'Arlene Mccoy' },
-            { id: 3, name: 'Devon Webb' },
-            { id: 4, name: 'Tom Cook' },
-            { id: 5, name: 'Tanya Fox' },
-            { id: 6, name: 'Hellen Schmidt' },
-            { id: 7, name: 'Caroline Schultz' },
-            { id: 8, name: 'Mason Heaney' },
-            { id: 9, name: 'Claudie Smitham' },
-            { id: 10, name: 'Emil Schaefer' },
-        ],
-        activePersons: [],
-        get queryPerson() {
-            if (! this.query) return null
-
-            return {
-                id: 11, name: this.query,
-            }
-        },
-        onSubmit(e) {
-            e.preventDefault()
-            console.log([...new FormData(e.currentTarget).entries()])
-        },
-        removePerson(person) {
-            this.activePersons = this.activePersons.filter((p) => p !== person)
+    <div x-data="{
+        my_array: [{x:'x'},{x:'y'}],
+        click() {
+            this.my_array = [{x:'a'},{x:'b'}];
         }
-    }"
-    class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12"
->
-    <div class="w-full max-w-4xl">
-        <div class="space-y-1">
-            <form @submit="onSubmit">
-                <div x-combobox x-model="activePersons" name="people" multiple>
-                    <label x-combobox:label class="block text-sm font-medium leading-5 text-gray-700">
-                        Assigned to
-                    </label>
+    }">
+
+        <!-- Loop with plain div -->
+        <template x-for="item in my_array">
+            <div x-text="item.x"></div>
+        </template>
+
+        <!-- Loop with div nested inside component -->
+        <template x-for="item in my_array">
+            <div x-data="some_component" >
+                <div x-text="item.x"></div>
+            </div>
+        </template>
+
+        <button @click="click">Click me</button>
+
+    </div>
+        <script>
+            document.addEventListener('alpine:init', () => {
+                Alpine.data('some_component', () => ({}));
+            });
+
+        </script>
+
+
+
+
+    <button wire:click.prefetch"...">
+        Do something
+    </button>
+
+
+
+
+
+
+
+
+
+
+<div x-data="{ count: $url(1) }">
+    <button @click="count++">+</button>
+    <button @click="count--">-</button>
+
+    <h1 x-text="count"></h1>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+
+
+    <div x-data="{ users: [{ name: 'lebowski' }] }">
+        <template x-for="(user, idx) in users">
+            <span x-text="users[idx].name" x-yo></span>
+        </template>
+
+        <button @click="users = []">Reset</button>
+    </div>
+
+    <div x-data="{ foo: undefined }">
+        Yo: <input type="text" x-model="foo">
+    </div>
+
+    <!-- Play around here... -->
 
                     <div class="relative">
                         <div>Query: <span x-text="query"></span></div>

diff --git a/packages/alpinejs/src/alpine.js b/packages/alpinejs/src/alpine.js
@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } 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 { mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
+import { onElRemoved, onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
@@ -11,6 +11,7 @@ import { getBinding as bound, extractProp } from './utils/bind'
 import { debounce } from './utils/debounce'
 import { throttle } from './utils/throttle'
 import { setStyles } from './utils/styles'
+import { entangle } from './entangle'
 import { nextTick } from './nextTick'
 import { walk } from './utils/walk'
 import { plugin } from './plugin'
@@ -31,6 +32,7 @@ let Alpine = {
     startObservingMutations,
     stopObservingMutations,
     setReactivityEngine,
+    onAttributeRemoved,
     closestDataStack,
     skipDuringClone,
     onlyDuringClone,
@@ -45,13 +47,15 @@ let Alpine = {
     mergeProxies,
     extractProp,
     findClosest,
+    onElRemoved,
     closestRoot,
     destroyTree,
     interceptor, // INTERNAL: not public API and is subject to change without major release.
     transition, // INTERNAL
     setStyles, // INTERNAL
     mutateDom,
     directive,
+    entangle,
     throttle,
     debounce,
     evaluate,

diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
@@ -106,8 +106,6 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     }
 
     el._x_forceModelUpdate = (value) => {
-        value = value === undefined ? getValue() : value
-
         // If nested model key is undefined, set the default value to empty string.
         if (value === undefined && typeof expression === 'string' && expression.match(/\./)) value = ''
 

diff --git a/packages/alpinejs/src/directives/x-on.js b/packages/alpinejs/src/directives/x-on.js
@@ -7,7 +7,7 @@ mapAttributes(startingWith('@', into(prefix('on:'))))
 
 directive('on', skipDuringClone((el, { value, modifiers, expression }, { cleanup }) => {
     let evaluate = expression ? evaluateLater(el, expression) : () => {}
-   
+
     // Forward event listeners on portals.
     if (el.tagName.toLowerCase() === 'template') {
         if (! el._x_forwardEvents) el._x_forwardEvents = []

diff --git a/packages/alpinejs/src/entangle.js b/packages/alpinejs/src/entangle.js
@@ -9,7 +9,7 @@ export function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set:
 
         if (firstRun) {
             outer = outerGet()
-            innerSet(outer)
+            innerSet(JSON.parse(JSON.stringify(outer))) // We need to break internal references using parse/stringify...
             inner = innerGet()
             firstRun = false
         } else {
@@ -24,7 +24,7 @@ export function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set:
                 innerSet(outer)
                 inner = outer // Assign inner to outer so that it can be serialized for diffing...
             } else { // If inner changed...
-                outerSet(inner)
+                outerSet(JSON.parse(JSON.stringify(inner))) // We need to break internal references using parse/stringify...
                 outer = inner // Assign outer to inner so that it can be serialized for diffing...
             }
         }

diff --git a/packages/alpinejs/src/evaluator.js b/packages/alpinejs/src/evaluator.js
@@ -70,9 +70,9 @@ function generateFunctionFromString(expression, el) {
     // calling function so that we don't throw an error AND a "return" statement can b e used.
     let rightSideSafeExpression = 0
         // Support expressions starting with "if" statements like: "if (...) doSomething()"
-        || /^[\n\s]*if.*\(.*\)/.test(expression)
+        || /^[\n\s]*if.*\(.*\)/.test(expression.trim())
         // Support expressions starting with "let/const" like: "let foo = 'bar'"
-        || /^(let|const)\s/.test(expression)
+        || /^(let|const)\s/.test(expression.trim())
             ? `(async()=>{ ${expression} })()`
             : expression
 

diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
@@ -3,6 +3,7 @@ import { deferHandlingDirectives, directives } from "./directives"
 import { dispatch } from './utils/dispatch'
 import { walk } from "./utils/walk"
 import { warn } from './utils/warn'
+import Alpine from "./alpine"
 
 let started = false
 

diff --git a/packages/alpinejs/src/utils/bind.js b/packages/alpinejs/src/utils/bind.js
@@ -57,7 +57,7 @@ function bindInputValue(el, value) {
         // automatically.
         if (Number.isInteger(value)) {
             el.value = value
-        } else if (! Number.isInteger(value) && ! Array.isArray(value) && typeof value !== 'boolean' && ! [null, undefined].includes(value)) {
+        } else if (! Array.isArray(value) && typeof value !== 'boolean' && ! [null, undefined].includes(value)) {
             el.value = String(value)
         } else {
             if (Array.isArray(value)) {
@@ -71,7 +71,7 @@ function bindInputValue(el, value) {
     } else {
         if (el.value === value) return
 
-        el.value = value
+        el.value = value === undefined ? '' : value
     }
 }
 

diff --git a/packages/history/builds/module.js b/packages/history/builds/module.js
@@ -1,3 +1,5 @@
 import history from '../src/index.js'
+import { track } from '../src/index.js'
 
 export default history
+export { track }