Revert "Add named x-modelables"

This reverts commit 91ebbc3963c311f88b988d1faa056f5eb7b34cf0.

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

@@ -4,7 +4,7 @@ import { mutateDom } from '../mutation'
 import bind from '../utils/bind'
 import on from '../utils/on'
 
-directive('model', (el, { value, modifiers, expression }, { effect, cleanup }) => {
+directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     let evaluate = evaluateLater(el, expression)
     let assignmentExpression = `${expression} = rightSideOfExpression($event, ${expression})`
     let evaluateAssignment = evaluateLater(el, assignmentExpression)
@@ -25,14 +25,11 @@ directive('model', (el, { value, modifiers, expression }, { effect, cleanup }) =
         }})
     })
 
-    if (! el._x_removeModelListeners) el._x_removeModelListeners = {}
-    el._x_removeModelListeners[value || 'default'] = removeListener
-    
-    cleanup(() => el._x_removeModelListeners[value || 'default']())
+    cleanup(() => removeListener())
 
     // Allow programmatic overiding of x-model.
     let evaluateSetModel = evaluateLater(el, `${expression} = __placeholder`)
-    let obj = {
+    el._x_model = {
         get() { 
             let result
             evaluate(value => result = value)
@@ -43,14 +40,6 @@ directive('model', (el, { value, modifiers, expression }, { effect, cleanup }) =
         },
     }
 
-    // This is a "named" binding (x-model:name).
-    if (value) {
-        if (! el._x_models) el._x_models = {}
-        el._x_models[value] = obj
-    } else {
-        el._x_model = obj
-    }
-
     el._x_forceModelUpdate = () => {
         evaluate(value => {
             // If nested model key is undefined, set the default value to empty string.

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

@@ -1,7 +1,7 @@
 import { evaluateLater } from '../evaluator'
 import { directive } from '../directives'
 
-directive('modelable', (el, { value, expression }, { effect, evaluate, evaluateLater }) => {
+directive('modelable', (el, { expression }, { effect, evaluate, evaluateLater }) => {
     let func = evaluateLater(expression)
     let innerGet = () => { let result; func(i => result = i); return result; }
     let evaluateInnerSet = evaluateLater(`${expression} = __placeholder`)
@@ -15,14 +15,10 @@ directive('modelable', (el, { value, expression }, { effect, evaluate, evaluateL
     innerSet(initialValue)
 
     queueMicrotask(() => {
-        if (! el._x_model && ! el._x_models) return
-
-        // Remove native event listeners as these are now bound with x-modelable.
-        el._x_removeModelListeners[value || 'default']()
+        if (! el._x_model) return
     
-        console.log(value)
-        let outerGet = value ? el._x_models[value].get : el._x_model.get
-        let outerSet = value ? el._x_models[value].set : el._x_model.set
+        let outerGet = el._x_model.get
+        let outerSet = el._x_model.set
     
         effect(() => innerSet(outerGet()))
         effect(() => outerSet(innerGet()))

tests/cypress/integration/directives/x-modelable.spec.js

@@ -64,47 +64,3 @@ test('x-modelable works when inside x-bind and x-model is outside',
         get('h2').should(haveText('lob'))
     }
 )
-
-test('x-modelable removes the event listener used by corresponding x-model',
-    html`
-        <div x-data="{ outer: 'foo' }">
-            <div x-data="{ inner: 'bar' }" x-modelable="inner" x-model="outer">
-                <h1 x-text="outer"></h1>
-                <h2 x-text="inner"></h2>
-
-                <button id="1" @click="$dispatch('input', 'baz')"></button>
-            </div>
-        </div>
-    `,
-    ({ get }) => {
-        get('h1').should(haveText('foo'))
-        get('h2').should(haveText('foo'))
-        get('#1').click()
-        get('h1').should(haveText('foo'))
-        get('h2').should(haveText('foo'))
-    }
-)
-
-test('can have a named x-modelable',
-    html`
-        <div x-data="{ outer: 'foo' }">
-            <div x-data="{ inner: 'bar' }" x-modelable:custom="inner" x-model:custom="outer">
-                <h1 x-text="outer"></h1>
-                <h2 x-text="inner"></h2>
-
-                <button @click="inner = 'bob'" id="1">change inner</button>
-                <button @click="outer = 'lob'" id="2">change outer</button>
-            </div>
-        </div>
-    `,
-    ({ get }) => {
-        get('h1').should(haveText('foo'))
-        get('h2').should(haveText('foo'))
-        get('#1').click()
-        get('h1').should(haveText('bob'))
-        get('h2').should(haveText('bob'))
-        get('#2').click()
-        get('h1').should(haveText('lob'))
-        get('h2').should(haveText('lob'))
-    }
-)