wip

packages/alpinejs/src/binds.js

@@ -26,6 +26,12 @@ export function injectBindingProviders(obj) {
     return obj
 }
 
+export function addVirtualBindings(el, bindings) {
+    let getBindings = typeof bindings !== 'function' ? () => bindings : bindings
+
+    el._x_virtualDirectives = getBindings()
+}
+
 export function applyBindingsObject(el, obj, original) {
     let cleanupRunners = []
 

packages/alpinejs/src/directives.js

@@ -22,6 +22,26 @@ export function directive(name, callback) {
 export function directives(el, attributes, originalAttributeOverride) {
     attributes = Array.from(attributes)
 
+    if (el._x_virtualDirectives) {
+        let vAttributes = Object.entries(el._x_virtualDirectives).map(([name, value]) => ({ name, value }))
+
+        let staticAttributes = attributesOnly(vAttributes)
+
+        // Handle binding normal HTML attributes (non-Alpine directives).
+        vAttributes = vAttributes.map(attribute => {
+            if (staticAttributes.find(attr => attr.name === attribute.name)) {
+                return {
+                    name: `x-bind:${attribute.name}`,
+                    value: `"${attribute.value}"`,
+                }
+            }
+
+            return attribute
+        })
+
+        attributes = attributes.concat(vAttributes)
+    }
+
     let transformedAttributeMap = {}
 
     let directives = attributes

tests/cypress/integration/custom-bind.spec.js

@@ -44,3 +44,18 @@ test('can consume custom bind as function',
     `,
     ({ get }) => get('div').should(haveText('bar'))
 )
+
+test('can bind directives individually to an element',
+    html`
+        <script>
+            document.addEventListener('alpine:init', () => {
+                Alpine.bind(document.querySelector('#one'), () => ({
+                    'x-text'() { return 'foo' },
+                }))
+            })
+        </script>
+
+        <div x-data id="one"></div>
+    `,
+    ({ get }) => get('div').should(haveText('foo'))
+)

tests/cypress/integration/plugins/ui/popover.spec._js → tests/cypress/integration/plugins/ui/popover.spec.js

@@ -1,6 +1,6 @@
 import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
 
-test('button toggles panel',
+test.skip('button toggles panel',
     [html`
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
@@ -19,7 +19,7 @@ test('button toggles panel',
     },
 )
 
-test('has accessibility attributes',
+test.skip('has accessibility attributes',
     [html`
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
@@ -38,7 +38,7 @@ test('has accessibility attributes',
     },
 )
 
-test('escape closes panel',
+test.skip('escape closes panel',
     [html`
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
@@ -57,7 +57,7 @@ test('escape closes panel',
     },
 )
 
-test('clicking outside closes panel',
+test.skip('clicking outside closes panel',
     [html`
         <div>
             <div x-data x-popover>
@@ -80,7 +80,7 @@ test('clicking outside closes panel',
     },
 )
 
-test('focusing away closes panel',
+test.skip('focusing away closes panel',
     [html`
         <div>
             <div x-data x-popover>
@@ -103,7 +103,7 @@ test('focusing away closes panel',
     },
 )
 
-test('focusing away doesnt close panel if focusing inside a group',
+test.skip('focusing away doesnt close panel if focusing inside a group',
     [html`
         <div x-data>
             <div x-popover:group>

tests/cypress/integration/plugins/ui/tabs._spec._js → tests/cypress/integration/plugins/ui/tabs.spec.js

@@ -1,6 +1,6 @@
 import { beVisible, haveFocus, html, notBeVisible, test } from '../../../utils'
 
-test('can use tabs to toggle panels',
+test.skip('can use tabs to toggle panels',
     [html`
         <div x-data x-tabs>
             <div x-tabs:list>
@@ -23,7 +23,7 @@ test('can use tabs to toggle panels',
     },
 )
 
-test('can use arrow keys to cycle through tabs',
+test.skip('can use arrow keys to cycle through tabs',
     [html`
         <div x-data x-tabs>
             <div x-tabs:list>
@@ -55,7 +55,7 @@ test('can use arrow keys to cycle through tabs',
     },
 )
 
-test('cant tab through tabs, can only use arrows',
+test.skip('cant tab through tabs, can only use arrows',
     [html`
         <div>
             <button button-1>first focusable</button>

tests/cypress/utils.js

@@ -17,6 +17,12 @@ test.only = (name, template, callback, handleExpectedErrors = false) => {
     })
 }
 
+test.skip = (name, template, callback, handleExpectedErrors = false) => {
+    it.skip(name, () => {
+        injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)
+    })
+}
+
 test.retry = (count) => (name, template, callback, handleExpectedErrors = false) => {
     it(name, {
         retries: {