Fix static attribute binding in x-bind object

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

@@ -31,12 +31,18 @@ function applyBindingsObject(el, expression, original, effect) {
         getBindings(bindings => {
             let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }))
 
+            let staticAttributes = attributesOnly(attributes)
+            
             // Handle binding normal HTML attributes (non-Alpine directives).
-            attributesOnly(attributes).forEach(({ name, value }, index) => {
-                attributes[index] = {
-                    name: `x-bind:${name}`,
-                    value: `"${value}"`,
+            attributes = attributes.map(attribute => {
+                if (staticAttributes.find(attr => attr.name === attribute.name)) {
+                    return {
+                        name: `x-bind:${attribute.name}`,
+                        value: `"${attribute.value}"`,
+                    }
                 }
+
+                return attribute
             })
 
             directives(el, attributes, original).map(handle => {

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

@@ -317,6 +317,17 @@ test('x-bind object syntax supports normal HTML attributes',
     }
 )
 
+test('x-bind object syntax supports normal HTML attributes mixed in with dynamic ones',
+    html`
+        <span x-data x-bind="{ 'x-bind:bob'() { return 'lob'; }, foo: 'bar', 'x-bind:bab'() { return 'lab' } }"></span>
+    `,
+    ({ get }) => {
+        get('span').should(haveAttribute('foo', 'bar'))
+        get('span').should(haveAttribute('bob', 'lob'))
+        get('span').should(haveAttribute('bab', 'lab'))
+    }
+)
+
 test('x-bind object syntax supports x-for',
     html`
         <script>
@@ -398,3 +409,27 @@ test('x-bind object syntax event handlers defined as functions receive the event
         get('span').should(haveText('bar'))
     }
 )
+
+test('x-bind object syntax ',
+    html`
+        <script>
+            window.data = () => { return {
+                button: {
+                    ['@click']() {
+                        this.$refs.span.innerText = this.$el.id
+                    }
+                }
+            }}
+        </script>
+        <div x-data="window.data()">
+            <button x-bind="button" id="bar">click me</button>
+
+            <span x-ref="span">foo</span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('foo'))
+        get('button').click()
+        get('span').should(haveText('bar'))
+    }
+)