Merge pull request #571 from Shopify/rd/fix-innerHTML

fix innerHTML not allowing newlines before attributes

Author: robin-drexler

.changeset/chilled-items-eat.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/polyfill': patch
+---
+
+fix Element.innerHTML not allowing newlines before attributes

packages/polyfill/source/serialization.ts

@@ -22,10 +22,10 @@ import type {Element} from './Element.ts';
 // const attributeTokenizer = / ([^<>'"\n=\s]+)=(['"])([^>'"\n]*)\2/g;
 
 const elementTokenizer =
-  /(?:<([a-z][a-z0-9-:]*)((?:\s[^<>'"=\n\s]+(?:=(['"])[^\n]*?\3|=[^>'"\n\s]*|))*)\s*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
+  /(?:<([a-z][a-z0-9-:]*)((?:[\s]+[^<>'"=\s]+(?:=(['"])[^]*?\3|=[^>'"\s]*|))*)[\s]*(\/?)\s*>|<\/([a-z][a-z0-9-:]*)>|<!--(.*?)-->|([^&<>]+))/gi;
 
 const attributeTokenizer =
-  /\s([^<>'"=\n\s]+)(?:=(['"])([^\n]*?)\2|=([^>'"\n\s]*)|)/g;
+  /\s([^<>'"=\n\s]+)(?:=(["'])([\s\S]*?)\2|=([^>'"\n\s]*)|)/g;
 
 export function parseHtml(html: string, contextNode: Node) {
   const document = contextNode.ownerDocument;

packages/polyfill/source/tests/serialization.test.ts

@@ -0,0 +1,51 @@
+import {Window} from '../index.ts';
+
+import {describe, it, expect, beforeEach} from 'vitest';
+
+describe('innerHtml', () => {
+  beforeEach(() => {
+    const window = new Window();
+    Window.setGlobalThis(window);
+  });
+
+  it('parses a simple element', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<ui-button>Press me!</ui-button>';
+
+    const button = element.querySelector('ui-button');
+    expect(button?.textContent).toBe('Press me!');
+  });
+
+  it('parses an element with attributes', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<ui-button data-id="123">Press me!</ui-button>';
+
+    const button = element.querySelector('ui-button');
+    expect(button?.textContent).toBe('Press me!');
+    expect(button?.getAttribute('data-id')).toBe('123');
+  });
+
+  it('parses an element with attributes on newlines', () => {
+    const element = document.createElement('div');
+    element.innerHTML = `<ui-button 
+      data-id="123"
+      data-id2="456"
+      data-id3="789"
+      data-id4="multiline
+content
+works too"
+variant="primary" tone="neutral"
+    >Press me!</ui-button>`;
+
+    const button = element.querySelector('ui-button');
+
+    expect(button?.getAttribute('data-id')).toBe('123');
+    expect(button?.getAttribute('data-id2')).toBe('456');
+    expect(button?.getAttribute('data-id3')).toBe('789');
+    expect(button?.getAttribute('data-id4')).toBe(
+      'multiline\ncontent\nworks too',
+    );
+    expect(button?.getAttribute('variant')).toBe('primary');
+    expect(button?.getAttribute('tone')).toBe('neutral');
+  });
+});