Adds deferred-comp to demo deferred hydration.

dgp1130 · Feb 24, 2024 · bf91fce · bf91fce
1 parent 6984ff5
commit bf91fce
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 0 deletions.
diff --git a/src/demo/hydration/deferred-comp.test.html b/src/demo/hydration/deferred-comp.test.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>`deferred-comp` tests</title>
+        <meta charset="utf8">
+    </head>
+    <body></body>
+</html>
diff --git a/src/demo/hydration/deferred-comp.test.ts b/src/demo/hydration/deferred-comp.test.ts
@@ -0,0 +1,41 @@
+import { parseHtml } from 'hydroactive/testing.js';
+import { DeferredComp } from './deferred-comp.js';
+
+describe('deferred-comp', () => {
+  afterEach(() => {
+    for (const node of document.body.childNodes) node.remove();
+  });
+
+  function render(): InstanceType<typeof DeferredComp> {
+    return parseHtml(DeferredComp, `
+      <deferred-comp defer-hydration>
+        <div>Hello, <span>World</span>!</div>
+      </deferred-comp>
+    `);
+  }
+
+  describe('DeferredComp', () => {
+    it('does not hydrate on connection', () => {
+      const el = render();
+      document.body.appendChild(el);
+
+      // Component upgrades immediately.
+      expect(el).toBeInstanceOf(DeferredComp);
+
+      // Hydration should be delayed.
+      expect(el.querySelector('span')!.textContent).toBe('World');
+    });
+
+    it('hydrates when `defer-hydration` is removed', async () => {
+      const el = render();
+      document.body.appendChild(el);
+
+      el.removeAttribute('defer-hydration');
+
+      // Hydration is synchronous, but rendering is not.
+      await el.stable();
+
+      expect(el.querySelector('span')!.textContent).toBe('HydroActive');
+    });
+  });
+});
diff --git a/src/demo/hydration/deferred-comp.ts b/src/demo/hydration/deferred-comp.ts
@@ -0,0 +1,13 @@
+import { defineComponent } from 'hydroactive';
+
+/** Says hello to HydroActive on hydration. */
+export const DeferredComp = defineComponent('deferred-comp', (comp) => {
+  const name = comp.live('span', String);
+  name.set('HydroActive');
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'deferred-comp': InstanceType<typeof DeferredComp>;
+  }
+}
diff --git a/src/demo/hydration/index.html b/src/demo/hydration/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Hydration Demo</title>
+        <meta charset="utf8">
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "hydroactive": "/hydroactive/index.js",
+                    "hydroactive/": "/hydroactive/"
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <h1>Hydration Demo</h1>
+
+        <nav><a href="/">Home</a></nav>
+
+        <deferred-comp defer-hydration>
+            <h2>Deferred Component</h2>
+
+            <div>Hello, <span>World</span>!</div>
+
+            <script src="./deferred-comp.js" type="module"></script>
+        </deferred-comp>
+        <button onclick="javascript:this.previousElementSibling.removeAttribute('defer-hydration'); this.disabled = true;">
+            Hydrate
+        </button>
+    </body>
+</html>
diff --git a/src/demo/index.html b/src/demo/index.html
@@ -12,6 +12,7 @@ <h1>HydroActive Demo</h1>
                 <li><a href="/hello-world/">Hello World</a></li>
                 <li><a href="/counter/">Counter</a></li>
                 <li><a href="/attrs/">Attributes</a></li>
+                <li><a href="/hydration/">Hydration</a></li>
                 <li><a href="/reactivity/">Reactivity</a></li>
                 <li><a href="/hooks/">Hooks</a></li>
             </ul>