internal: Example of using incremental rehydration

chadhietala · chadhietala · commit 4b00cf627f4d · 2020-11-16T13:38:31.000-05:00
This PR adds an example showing how to use intersection observer in
conjunction with partial rehydration.
diff --git a/packages/example-apps/basic/src/MyComponent.ts b/packages/example-apps/basic/src/MyComponent.ts
@@ -57,10 +57,10 @@ setComponentTemplate(
       {{else}}
         <p>Component is not in a CJK locale</p>
       {{/if}}
-
       <OtherComponent @count={{this.count}} /> <br/>
       <button {{on "click" this.increment}}>Increment</button>
       <TemplateOnlyComponent @name="For Glimmer"/>
+
     `
   ),
   MyComponent
diff --git a/packages/example-apps/partial-rehydration/index.ts b/packages/example-apps/partial-rehydration/index.ts
@@ -1,14 +1,36 @@
 import { renderComponent } from '@glimmer/core';
-import RehydratingComponent from './src/RehydratingComponent';
-
-document.addEventListener(
-  'DOMContentLoaded',
-  () => {
-    const element = document.querySelector('.static-component');
-    renderComponent(RehydratingComponent, {
-      element: element!,
-      rehydrate: true,
-    });
+import RehydratableCounter from './src/RehydratableCounter';
+
+rehydrate({
+  get RehydratableCounter() {
+    // Can load components async
+    return Promise.resolve(RehydratableCounter);
   },
-  { once: true }
-);
+});
+
+function rehydrate(componentMapping) {
+  const hasHydrated = new WeakSet();
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach(async (entry) => {
+        if (entry.isIntersecting && !hasHydrated.has(entry.target)) {
+          await renderComponent(await componentMapping[entry.target.dataset.hydrate], {
+            element: entry.target.parentElement,
+            args: JSON.parse(entry.target.querySelector('script').textContent),
+            rehydrate: true,
+          });
+          hasHydrated.add(entry.target);
+        }
+      });
+    },
+    {
+      root: null,
+    }
+  );
+
+  const rehydratables = Array.from(document.querySelectorAll('[data-hydrate]'));
+
+  for (const el of rehydratables) {
+    observer.observe(el);
+  }
+}
diff --git a/packages/example-apps/partial-rehydration/server.ts b/packages/example-apps/partial-rehydration/server.ts
@@ -11,6 +11,7 @@ export default async function handler(
   clientsideBundleLocation: string
 ): Promise<void> {
   const ssrOutput = await renderToString(StaticComponent, {
+    args: { foo: { bar: 'bar' } },
     rehydrate: true,
   });
 
@@ -22,7 +23,7 @@ export default async function handler(
         </head>
         <body>
           <div id="app">${ssrOutput}</div>
-          <script src="${clientsideBundleLocation}"></script>
+          <script async src="${clientsideBundleLocation}"></script>
         </body>
       </html>
     `);
diff --git a/packages/example-apps/partial-rehydration/src/RehydratableCounter.ts b/packages/example-apps/partial-rehydration/src/RehydratableCounter.ts
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { createTemplate, setComponentTemplate } from '@glimmer/core';
+import { on, action } from '@glimmer/modifier';
+import RehydratableRegion from './RehydratableRegion';
+
+class RehydratableCounter extends Component {
+  @tracked count = 1;
+
+  @action increment(): void {
+    this.count++;
+  }
+}
+
+setComponentTemplate(
+  createTemplate(
+    { on, RehydratableRegion },
+    `<RehydratableRegion @name="RehydratableCounter" @data={{this.args}}>
+      <h1>{{@message}}</h1>
+      <p>{{@foo.bar}}</p>
+      <p>You have clicked the button {{this.count}} times.</p>
+      <button {{on "click" this.increment}}>Click</button>
+     </RehydratableRegion>
+    `
+  ),
+  RehydratableCounter
+);
+
+export default RehydratableCounter;
diff --git a/packages/example-apps/partial-rehydration/src/RehydratableRegion.ts b/packages/example-apps/partial-rehydration/src/RehydratableRegion.ts
@@ -0,0 +1,17 @@
+import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';
+
+function toJSON(args) {
+  return JSON.stringify(args);
+}
+
+export default setComponentTemplate(
+  createTemplate(
+    { toJSON },
+    `<div data-hydrate="{{@name}}" ...attributes>
+      <script type="application/hydrate">{{toJSON @data}}</script>
+      {{yield}}
+     </div>
+    `
+  ),
+  templateOnlyComponent()
+);
diff --git a/packages/example-apps/partial-rehydration/src/RehydratingComponent.ts b/packages/example-apps/partial-rehydration/src/RehydratingComponent.ts
diff --git a/packages/example-apps/partial-rehydration/src/StaticComponent.ts b/packages/example-apps/partial-rehydration/src/StaticComponent.ts
@@ -1,12 +1,21 @@
 import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';
-import RehydratingComponent from './RehydratingComponent';
+import RehydratableCounter from './RehydratableCounter';
 
 const StaticComponent = setComponentTemplate(
   createTemplate(
-    { RehydratingComponent },
+    { RehydratableCounter },
     `<div class="static-component">
       <h1>Hello I am a static component. I don't change after page load.</h1>
-      <RehydratingComponent/>
+      <div><RehydratableCounter @message="Hello World" @foo={{@foo}} /></div>
+      <div><RehydratableCounter @message="Bye" /></div>
+      <div><RehydratableCounter @message="Ciao" /></div>
+      <div><RehydratableCounter @message="Adios" /></div>
+      <div><RehydratableCounter @message="Hey1" /></div>
+      <div><RehydratableCounter @message="Hey2" /></div>
+      <div><RehydratableCounter @message="Hey3" /></div>
+      <div><RehydratableCounter @message="Hey4" /></div>
+      <div><RehydratableCounter @message="Hey5" /></div>
+      <div><RehydratableCounter @message="Hey6" /></div>
      </div>
     `
   ),
