dont rerender on hydrate

jahilldev · Oct 23, 2024 · a069c90 · a069c90
1 parent 96d2659
commit a069c90
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/preactement/src/define.ts b/packages/preactement/src/define.ts
@@ -139,7 +139,7 @@ function onConnected(this: CustomElement) {
   this.__children = children || [];
 
   this.removeAttribute('server');
-  this.innerHTML = '';
+  //this.innerHTML = '';
 
   const response = this.__component();
   const renderer = (result: ComponentFactory) => finaliseComponent.call(this, result);

diff --git a/packages/preactement/tests/define.spec.tsx b/packages/preactement/tests/define.spec.tsx
@@ -308,6 +308,27 @@ describe('define()', () => {
 
       expect(root.innerHTML).toContain(`<h2>${customTitle}</h2><em></em><p>${customText}</p>`);
     });
+
+    it('hydrates server rendered markup corretly without re-rendering child elements', () => {
+      const customTitle = 'customTitle';
+      const props = { value: 'attrProps' };
+      const json = `<script type="application/json">${JSON.stringify(props)}</script>`;
+      const html = `<h2>${customTitle}</h2><em>${props.value}</em>`;
+
+      define('message-fourteen', () => Message, { attributes: ['custom-title'] });
+
+      const element = document.createElement('message-fourteen');
+
+      element.setAttribute('custom-title', customTitle);
+      element.setAttribute('server', '');
+      element.innerHTML = json + html;
+      const originalH2 = element.querySelector('h2');
+
+      root.appendChild(element);
+
+      expect(element.innerHTML).toEqual(html);
+      expect(element.querySelector('h2')).toBe(originalH2);
+    });
   });
 
   describe('when run in the browser (no "Reflect.construct")', () => {