Merge pull request #199 from Shopify/fd-fix-wire-newline

fix: new lines in hydration response
Shopify · Nov 11, 2021 · ffb98a6 · ffb98a6
2 parents 4078e37 + 17801a9
commit ffb98a6
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md
@@ -7,6 +7,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+- fix: new lines in hydration request break JSON.parse
 - fix(#201): normalize POSIX separators to support windows
 - fix: scroll to top on app first load
 

diff --git a/packages/hydrogen/src/framework/Hydration/Cache.client.ts b/packages/hydrogen/src/framework/Hydration/Cache.client.ts
@@ -136,7 +136,10 @@ function createManifestFromWirePayload(payload: string): WireManifest {
   return payload.split('\n').reduce((memo, row) => {
     const [key, ...values] = row.split(':');
 
-    memo[key] = JSON.parse(values.join(':'));
+    if (key) {
+      memo[key] = JSON.parse(values.join(':'));
+    }
+
     return memo;
   }, {} as Record<string, any>) as WireManifest;
 }

diff --git a/packages/hydrogen/src/framework/Hydration/__tests__/Cache.spec.tsx b/packages/hydrogen/src/framework/Hydration/__tests__/Cache.spec.tsx
@@ -13,6 +13,15 @@ it('handles DOM elements', async () => {
   expect(screen.getByText('hello')).toBeInTheDocument();
 });
 
+it('ignores new lines', async () => {
+  const tuples = [['$', 'div', null, {children: 'hello'}]];
+  const payload = `\nJ0:${JSON.stringify(tuples)}\n`;
+
+  render(await convertHydrationResponseToReactComponents(payload));
+
+  expect(screen.getByText('hello')).toBeInTheDocument();
+});
+
 it('handles DOM elements with arrays of children', async () => {
   const tuples = [
     [

diff --git a/packages/hydrogen/src/framework/Hydration/__tests__/wire.spec.ts b/packages/hydrogen/src/framework/Hydration/__tests__/wire.spec.ts
@@ -2,7 +2,7 @@ import {generateWireSyntaxFromRenderedHtml} from '../wire.server';
 
 it('renders normal html elements', () => {
   const input = `<div class="foo"><p id="bar">Hello!</p></div>`;
-  const output = `\nJ0:["$","div",null,{"className":"foo","children":["$","p",null,{"id":"bar","children":"Hello!"}]}]`;
+  const output = `J0:["$","div",null,{"className":"foo","children":["$","p",null,{"id":"bar","children":"Hello!"}]}]`;
 
   expect(generateWireSyntaxFromRenderedHtml(input)).toBe(output);
 });
@@ -98,7 +98,7 @@ J0:["$","div",null,{"className":"foo","children":["\\n    ",["$","@1",null,{"sid
 it('renders Client Components with nested props that have multiple children', () => {
   const input = `<div class="foo"><p>Bar</p><div>Baz</div></div>`;
 
-  const output = `\nJ0:["$","div",null,{"className":"foo","children":[["$","p",null,{"key":0,"children":"Bar"}],["$","div",null,{"key":1,"children":"Baz"}]]}]`;
+  const output = `J0:["$","div",null,{"className":"foo","children":[["$","p",null,{"key":0,"children":"Bar"}],["$","div",null,{"key":1,"children":"Baz"}]]}]`;
 
   expect(generateWireSyntaxFromRenderedHtml(input)).toBe(output);
 });

diff --git a/packages/hydrogen/src/framework/Hydration/wire.server.ts b/packages/hydrogen/src/framework/Hydration/wire.server.ts
@@ -90,7 +90,7 @@ export function generateWireSyntaxFromRenderedHtml(html: string) {
         return `M${idx + 1}:${JSON.stringify(component)}`;
       })
       .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`
-  );
+  ).trim();
 }
 
 function isDomNode(item: any) {