nullstack · Mortaro · Mar 1, 2023 · Mar 1, 2023
diff --git a/loaders/add-source-to-node.js b/loaders/add-source-to-node.js
@@ -13,7 +13,9 @@ module.exports = function (source) {
       if (path.parent.type === 'JSXAttribute') {
         if (path.node.name.startsWith('on')) {
           const element = path.findParent((p) => p.type === 'JSXOpeningElement' && p.node.attributes)
-          const hasSource = element.node.attributes.find((a) => a.name.name === 'source')
+          const hasSource = element.node.attributes.find((a) => {
+            return a.type === 'JSXAttribute' && a.name.name === 'source'
+          })
           if (!hasSource) {
             const start = element.node.attributes[0].start
             uniquePositions.add(start)

diff --git a/tests/src/RenderableComponent.njs b/tests/src/RenderableComponent.njs
@@ -28,6 +28,7 @@ class RenderableComponent extends Nullstack {
   render({ params }) {
     const list = params.shortList ? [1, 2, 3] : [1, 2, 3, 4, 5, 6]
     const html = '<a href="/"> Nullstack </a>'
+    const props = { disabled: true, 'aria-label': 'props' }
     return (
       <div class="RenderableComponent">
         <Falsy />
@@ -56,16 +57,17 @@ class RenderableComponent extends Nullstack {
         </head>
         {!!params.condition && <div class="condition"> conditionally rendered div </div>}
         <a params={{ shortList: true }} class="short-list">
-          {' '}
-          long list{' '}
+          long list
         </a>
         <a params={{ condition: true }} class="true-condition">
-          {' '}
-          long list{' '}
+          long list
         </a>
         <div data-condition={!!params.condition} />
         <div data-short-list={!!params.shortList} />
         <div data-name={this.name} />
+        <button {...props} onclick={() => {}}>
+          props
+        </button>
       </div>
     )
   }

diff --git a/tests/src/RenderableComponent.test.js b/tests/src/RenderableComponent.test.js
@@ -115,6 +115,11 @@ describe('RenderableComponent ?condition=true', () => {
     const element = await page.$('div.element')
     expect(element).toBeTruthy()
   })
+
+  test('elements can spread props and have named attributes', async () => {
+    const element = await page.$('[disabled][aria-label="props"]')
+    expect(element).toBeTruthy()
+  })
 })
 
 describe('RenderableComponent ?shortList=true', () => {