From e2326b9756f83a2b6522cfb6f974ed034484141b Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 10 Nov 2021 17:08:03 +0900
Subject: [PATCH 1/4] fix: new lines in wire response

---
 packages/hydrogen/src/framework/Hydration/Cache.client.ts | 5 ++++-
 packages/hydrogen/src/framework/Hydration/wire.server.ts  | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/hydrogen/src/framework/Hydration/Cache.client.ts b/packages/hydrogen/src/framework/Hydration/Cache.client.ts
index 31100efd39..9fc0ab46a0 100644
--- 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/wire.server.ts b/packages/hydrogen/src/framework/Hydration/wire.server.ts
index 182b53d42d..14674759d9 100644
--- 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) {

From 1f45f15a24a96dea6efb598e10cf3c4b6c4ba624 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 10 Nov 2021 17:08:56 +0900
Subject: [PATCH 2/4] chore: update changelog

---
 packages/hydrogen/CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md
index d8c268222e..85ddc64c5c 100644
--- a/packages/hydrogen/CHANGELOG.md
+++ b/packages/hydrogen/CHANGELOG.md
@@ -5,7 +5,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+- fix: new lines in hydration request break JSON.parse
 
 ## 0.6.3 - 2021-11-10
 

From 4302cf2ff9cfa2eb08d86baaf9b9c6061cc21977 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Wed, 10 Nov 2021 17:15:55 +0900
Subject: [PATCH 3/4] test: remove new lines in wire response

---
 .../hydrogen/src/framework/Hydration/__tests__/wire.spec.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/hydrogen/src/framework/Hydration/__tests__/wire.spec.ts b/packages/hydrogen/src/framework/Hydration/__tests__/wire.spec.ts
index d99a336c83..5eb5370682 100644
--- 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);
 });

From 164d3174388db07272ea524a539ef1ade00bdb7a Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Thu, 11 Nov 2021 12:52:06 +0900
Subject: [PATCH 4/4] test: client handles new lines in hydration response

---
 .../src/framework/Hydration/__tests__/Cache.spec.tsx     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/hydrogen/src/framework/Hydration/__tests__/Cache.spec.tsx b/packages/hydrogen/src/framework/Hydration/__tests__/Cache.spec.tsx
index e61df0da27..2055f04f06 100644
--- 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 = [
     [