Ignore nested object bindings

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

@@ -31,6 +31,12 @@ function applyBindingsObject(el, expression, original, effect) {
         getBindings(bindings => {
             let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }))
 
+            // Ignore nested objects in bindings, as they are generally used for
+            // namespaced sub-bindings like: "Dropdown.Button".
+            attributes = attributes.filter((attr) => {
+                return ! (typeof attr.value === 'object' && ! Array.isArray(attr.value) && attr.value !== null)
+            })
+
             let staticAttributes = attributesOnly(attributes)
             
             // Handle binding normal HTML attributes (non-Alpine directives).

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

@@ -317,6 +317,16 @@ test('x-bind object syntax supports normal HTML attributes',
     }
 )
 
+test('x-bind object syntax ignores nested objects',
+    html`
+        <span x-data x-bind="{ foo: 'bar', bar: { baz: undefined, bob: undefined } }"></span>
+    `,
+    ({ get }) => {
+        get('span').should(haveAttribute('foo', 'bar'))
+        get('span').should(notHaveAttribute('bar', '[object Object]'))
+    }
+)
+
 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>