Merge pull request #6298 from Shopify/theme-app-extension-request-logs

Remove request logs from theme app extensions development server

Author: isaacroldan

.changeset/bright-lobsters-grow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Remove request logs from the theme app extensions development server for a cleaner developer experience

packages/theme/src/cli/utilities/log-request-line.ts

@@ -4,6 +4,7 @@ import {timestampDateFormat} from '../constants.js'
 import {outputContent, outputInfo, outputToken} from '@shopify/cli-kit/node/output'
 import {H3Event} from 'h3'
 import {extname} from '@shopify/cli-kit/node/path'
+import type {DevServerContext} from './theme-environment/types.js'
 
 const CHARACTER_TRUNCATION_LIMIT = 80
 
@@ -12,8 +13,9 @@ interface MinimalResponse {
   headers: {get: (key: string) => string | null}
 }
 
-export function logRequestLine(event: H3Event, response: MinimalResponse) {
+export function logRequestLine(event: H3Event, response: MinimalResponse, ctx: DevServerContext) {
   if (!shouldLog(event)) return
+  if (ctx.type === 'theme-extension') return
 
   const truncatedPath =
     event.path.length > CHARACTER_TRUNCATION_LIMIT

packages/theme/src/cli/utilities/theme-environment/html.ts

@@ -58,12 +58,12 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext): EventHandle
           // Fallback to proxying to see if that works:
           const proxyResponse = await tryProxyRequest(event, ctx, response)
           if (proxyResponse) {
-            logRequestLine(event, proxyResponse)
+            logRequestLine(event, proxyResponse, ctx)
             return proxyResponse
           }
         }
 
-        logRequestLine(event, response)
+        logRequestLine(event, response, ctx)
 
         return patchRenderingResponse(ctx, response, (body) => {
           assertThemeId(response, body, String(theme.id))

packages/theme/src/cli/utilities/theme-environment/proxy.ts

@@ -47,7 +47,7 @@ export function getProxyHandler(_theme: Theme, ctx: DevServerContext) {
 
       return proxyStorefrontRequest(event, ctx)
         .then(async (response) => {
-          logRequestLine(event, response)
+          logRequestLine(event, response, ctx)
 
           if (response.ok) {
             const fileName = pathname.split('/').at(-1) ?? ''