Merge pull request #312 from chiragpat/ssr_builder

chadhietala · web-flow · commit 716d8c016a43 · 2020-10-08T13:05:24.000-04:00
Add new option to output rehydratable markup from @glimmer/ssr
diff --git a/packages/@glimmer/core/src/render-component/index.ts b/packages/@glimmer/core/src/render-component/index.ts
@@ -14,6 +14,7 @@ import {
   EnvironmentOptions,
   WithStaticLayout,
   Environment,
+  ElementBuilder,
 } from '@glimmer/interfaces';
 import { artifacts } from '@glimmer/program';
 import { syntaxCompilationContext } from '@glimmer/opcode-compiler';
@@ -129,10 +130,11 @@ export function getTemplateIterator(
   envOptions: EnvironmentOptions,
   envDelegate: EnvironmentDelegate,
   componentArgs: Dict<unknown> = {},
-  owner = DEFAULT_OWNER
+  owner = DEFAULT_OWNER,
+  builderFactory: (env: Environment, cursor: GlimmerCursor) => ElementBuilder = clientBuilder
 ): { iterator: TemplateIterator; env: Environment } {
   const runtime = runtimeContext(envOptions, envDelegate, sharedArtifacts, resolver);
-  const builder = clientBuilder(runtime.env, {
+  const builder = builderFactory(runtime.env, {
     element,
     nextSibling: null,
   } as GlimmerCursor);
diff --git a/packages/@glimmer/ssr/src/render.ts b/packages/@glimmer/ssr/src/render.ts
@@ -6,8 +6,8 @@ import voidMap from '@simple-dom/void-map';
 import { PassThrough } from 'stream';
 import { parse } from 'url';
 import { BaseEnvDelegate } from '@glimmer/core';
-import { NodeDOMTreeConstruction } from '@glimmer/node';
-import { DOMChanges, renderSync } from '@glimmer/runtime';
+import { NodeDOMTreeConstruction, serializeBuilder } from '@glimmer/node';
+import { clientBuilder, DOMChanges, renderSync } from '@glimmer/runtime';
 
 /**
  * Server-side environment that can be used to configure the glimmer-vm to work
@@ -28,6 +28,7 @@ export interface RenderOptions {
   args?: Dict<unknown>;
   serializer?: HTMLSerializer;
   owner?: object;
+  rehydrate?: boolean;
 }
 
 const defaultSerializer = new HTMLSerializer(voidMap);
@@ -66,7 +67,8 @@ export function renderToStream(
     { appendOperations, updateOperations },
     new ServerEnvDelegate(),
     options.args,
-    options.owner
+    options.owner,
+    options.rehydrate ? serializeBuilder : clientBuilder
   );
   renderSync(env, iterator);
 
diff --git a/packages/@glimmer/ssr/test/render-options-tests.ts b/packages/@glimmer/ssr/test/render-options-tests.ts
@@ -23,4 +23,15 @@ QUnit.module('@glimmer/ssr rendering', () => {
 
     assert.equal(output, '<h1>Goodbye World</h1>');
   });
+
+  QUnit.test('setting rehydrate option outputs the block stacks', async (assert) => {
+    class MyComponent extends Component {}
+    setComponentTemplate(createTemplate(`<h1>Hello World</h1>`), MyComponent);
+    const output = await renderToString(MyComponent, { rehydrate: true });
+
+    assert.equal(
+      output,
+      '<!--%+b:0%--><!--%+b:1%--><h1>Hello World</h1><!--%-b:1%--><!--%-b:0%-->'
+    );
+  });
 });
