From bf91fce8c7dddfaf00cde0371bc8a124e5084e56 Mon Sep 17 00:00:00 2001 From: Doug Parker Date: Fri, 23 Feb 2024 20:46:28 -0800 Subject: [PATCH] Adds `deferred-comp` to demo deferred hydration. --- src/demo/hydration/deferred-comp.test.html | 8 +++++ src/demo/hydration/deferred-comp.test.ts | 41 ++++++++++++++++++++++ src/demo/hydration/deferred-comp.ts | 13 +++++++ src/demo/hydration/index.html | 32 +++++++++++++++++ src/demo/index.html | 1 + 5 files changed, 95 insertions(+) create mode 100644 src/demo/hydration/deferred-comp.test.html create mode 100644 src/demo/hydration/deferred-comp.test.ts create mode 100644 src/demo/hydration/deferred-comp.ts create mode 100644 src/demo/hydration/index.html diff --git a/src/demo/hydration/deferred-comp.test.html b/src/demo/hydration/deferred-comp.test.html new file mode 100644 index 0000000..bc766e2 --- /dev/null +++ b/src/demo/hydration/deferred-comp.test.html @@ -0,0 +1,8 @@ + + + + `deferred-comp` tests + + + + diff --git a/src/demo/hydration/deferred-comp.test.ts b/src/demo/hydration/deferred-comp.test.ts new file mode 100644 index 0000000..7341afd --- /dev/null +++ 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 { + return parseHtml(DeferredComp, ` + +
Hello, World!
+ + `); + } + + 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 new file mode 100644 index 0000000..f1678cf --- /dev/null +++ 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; + } +} diff --git a/src/demo/hydration/index.html b/src/demo/hydration/index.html new file mode 100644 index 0000000..4b9de0b --- /dev/null +++ b/src/demo/hydration/index.html @@ -0,0 +1,32 @@ + + + + Hydration Demo + + + + + +

Hydration Demo

+ + + + +

Deferred Component

+ +
Hello, World!
+ + + + + + diff --git a/src/demo/index.html b/src/demo/index.html index 61fa98c..2bf7dd0 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -12,6 +12,7 @@

HydroActive Demo

  • Hello World
  • Counter
  • Attributes
    • +
  • Hydration
  • Reactivity
  • Hooks