From 8456f2b0ed7bc6aabdb3fa4b69d490f00b80be4e Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 4 Oct 2024 20:48:49 +0900
Subject: [PATCH 1/3] Remove error prettifier to avoid breaking the DOM

---
 .../cli/utilities/theme-environment/hot-reload/server.ts    | 4 +---
 packages/theme/src/cli/utilities/theme-environment/html.ts  | 6 ------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
index f97757ae2a..9f9b647f34 100644
--- a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
+++ b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
@@ -1,7 +1,6 @@
 import {getClientScripts, HotReloadEvent} from './client.js'
 import {render} from '../storefront-renderer.js'
 import {patchRenderingResponse} from '../proxy.js'
-import {prettifySyntaxErrors} from '../html.js'
 import {getExtensionInMemoryTemplates} from '../../theme-ext-environment/theme-ext-server.js'
 import {
   createError,
@@ -238,8 +237,7 @@ export function getHotReloadHandler(theme: Theme, ctx: DevServerContext) {
             })
           }
 
-          const html = await patchRenderingResponse(ctx, event, response)
-          return prettifySyntaxErrors(html)
+          return patchRenderingResponse(ctx, event, response)
         })
         .catch(async (error: H3Error<{requestId?: string; url?: string}>) => {
           let headline = `Failed to render section on Hot Reload with status ${error.statusCode} (${error.statusMessage}).`
diff --git a/packages/theme/src/cli/utilities/theme-environment/html.ts b/packages/theme/src/cli/utilities/theme-environment/html.ts
index 164eb22078..47d1ec852c 100644
--- a/packages/theme/src/cli/utilities/theme-environment/html.ts
+++ b/packages/theme/src/cli/utilities/theme-environment/html.ts
@@ -29,8 +29,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
       .then(async (response) => {
         let html = await patchRenderingResponse(ctx, event, response)
 
-        html = prettifySyntaxErrors(html)
-
         assertThemeId(response, html, String(theme.id))
 
         if (ctx.options.liveReload !== 'off') {
@@ -67,10 +65,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
   })
 }
 
-export function prettifySyntaxErrors(html: string) {
-  return html.replace(/Liquid(?: syntax)? error \([^\n]+(?:\n|<)/g, getErrorSection)
-}
-
 function getErrorSection(error: string) {
   const html = String.raw
   const color = 'orangered'

From 87b52747d29293353481cb9ea4c28260f949497d Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 4 Oct 2024 20:50:10 +0900
Subject: [PATCH 2/3] Changesets

---
 .changeset/late-steaks-look.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-steaks-look.md

diff --git a/.changeset/late-steaks-look.md b/.changeset/late-steaks-look.md
new file mode 100644
index 0000000000..942acc50aa
--- /dev/null
+++ b/.changeset/late-steaks-look.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Remove Liquid syntax error prettifier to avoid breaking the rest of the document.

From e55e7906c01e78e9dff7390377362fddbbf913b8 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Fri, 4 Oct 2024 23:18:43 +0900
Subject: [PATCH 3/3] Remove unused function

---
 .../src/cli/utilities/theme-environment/html.ts    | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/theme/src/cli/utilities/theme-environment/html.ts b/packages/theme/src/cli/utilities/theme-environment/html.ts
index 47d1ec852c..63746fd788 100644
--- a/packages/theme/src/cli/utilities/theme-environment/html.ts
+++ b/packages/theme/src/cli/utilities/theme-environment/html.ts
@@ -65,20 +65,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
   })
 }
 
-function getErrorSection(error: string) {
-  const html = String.raw
-  const color = 'orangered'
-
-  return html`
-    <div
-      id="section-error"
-      style="border: solid thick ${color}; background: color(from ${color} srgb r g b / 0.2); padding: 20px;"
-    >
-      <pre>${error}</pre>
-    </div>
-  `
-}
-
 function getErrorPage(options: {title: string; header: string; message: string; code: string}) {
   const html = String.raw