Merge pull request #4583 from Shopify/fd-remove-liquid-error-prettifier

[Theme] Avoid breaking the document on Liquid syntax error
Shopify · Oct 7, 2024 · e4139d0 · e4139d0
2 parents 75cb5e8 + f953824
commit e4139d0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 23 deletions.
diff --git a/.changeset/late-steaks-look.md 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.
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
@@ -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
@@ -32,8 +32,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
 
  let html = await patchRenderingResponse(ctx, event, response)
 
- html = prettifySyntaxErrors(html)
-
  assertThemeId(response, html, String(theme.id))
 
  if (ctx.options.liveReload !== 'off') {
@@ -86,24 +84,6 @@ function logRequestLine(event: H3Event, response: Response) {
  )
 }
 
-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'
-
- 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