Merge pull request #313 from chiragpat/rehydrate_builder

chadhietala · web-flow · commit 7a5c0575d8ce · 2020-10-08T13:42:21.000-04:00
Add new rehydrate option to renderComponent clientside api
diff --git a/packages/@glimmer/core/src/render-component/index.ts b/packages/@glimmer/core/src/render-component/index.ts
@@ -5,6 +5,7 @@ import {
   EnvironmentDelegate,
   DynamicScopeImpl,
   renderSync,
+  rehydrationBuilder,
 } from '@glimmer/runtime';
 import {
   Cursor as GlimmerCursor,
@@ -32,6 +33,7 @@ export interface RenderComponentOptions {
   element: Element;
   args?: Dict<unknown>;
   owner?: object;
+  rehydrate?: boolean;
 }
 
 type ResolveFn = () => void;
@@ -72,7 +74,8 @@ async function renderComponent(
     { document },
     new ClientEnvDelegate(),
     args,
-    owner
+    owner,
+    options.rehydrate ? rehydrationBuilder : clientBuilder
   );
   const result = renderSync(env, iterator);
   results.push(result);
diff --git a/packages/@glimmer/core/test/interactive/render-test.ts b/packages/@glimmer/core/test/interactive/render-test.ts
@@ -34,4 +34,17 @@ module(`[@glimmer/core] interactive rendering tests`, () => {
 
     assert.equal(containerElement.innerHTML, '<p>foo</p>bar<h1>Hello Glimmer!</h1>');
   });
+
+  test('rehydrates a component from existing markup when rehydrate option is set', async (assert) => {
+    const containerElement = document.createElement('div');
+    containerElement.innerHTML =
+      '<!--%+b:0%--><!--%+b:1%--><h1>Hello World</h1><!--%-b:1%--><!--%-b:0%-->';
+
+    await render(createTemplate(`<h1>Hello World</h1>`), {
+      element: containerElement,
+      rehydrate: true,
+    });
+
+    assert.equal(containerElement.innerHTML, '<h1>Hello World</h1>');
+  });
 });
