Add silence flag to the theme dev commands

.changeset/modern-fans-buy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': minor
+---
+
+Add silence flag to theme dev command to disable request logs

docs-shopify.dev/commands/interfaces/theme-dev.interface.ts

@@ -75,6 +75,12 @@ export interface themedev {
    */
   '--port <value>'?: string
 
+  /**
+   * Disable request logs.
+   * @environment SHOPIFY_FLAG_SILENCE
+   */
+  '--silence'?: ''
+
   /**
    * Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).
    * @environment SHOPIFY_FLAG_STORE

docs-shopify.dev/generated/generated_docs_data.json

@@ -5072,6 +5072,15 @@
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_FLAG_PORT"
               },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--silence",
+                "value": "\"\"",
+                "description": "Disable request logs.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_SILENCE"
+              },
               {
                 "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts",
                 "syntaxKind": "PropertySignature",
@@ -5154,7 +5163,7 @@
                 "environmentValue": "SHOPIFY_FLAG_IGNORE"
               }
             ],
-            "value": "export interface themedev {\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Set which network interface the web server listens on. The default value is 127.0.0.1.\n   * @environment SHOPIFY_FLAG_HOST\n   */\n  '--host <value>'?: string\n\n  /**\n   * Skip hot reloading any files that match the specified pattern.\n   * @environment SHOPIFY_FLAG_IGNORE\n   */\n  '-x, --ignore <value>'?: string\n\n  /**\n   * The live reload mode switches the server behavior when a file is modified:\n- hot-reload Hot reloads local changes to CSS and sections (default)\n- full-page  Always refreshes the entire page\n- off        Deactivate live reload\n   * @environment SHOPIFY_FLAG_LIVE_RELOAD\n   */\n  '--live-reload <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Prevents files from being deleted in the remote theme when a file has been deleted locally. This applies to files that are deleted while the command is running, and files that have been deleted locally before the command is run.\n   * @environment SHOPIFY_FLAG_NODELETE\n   */\n  '-n, --nodelete'?: ''\n\n  /**\n   * The file path or URL. The file path is to a file that you want updated on idle. The URL path is where you want a webhook posted to report on file changes.\n   * @environment SHOPIFY_FLAG_NOTIFY\n   */\n  '--notify <value>'?: string\n\n  /**\n   * Hot reload only files that match the specified pattern.\n   * @environment SHOPIFY_FLAG_ONLY\n   */\n  '-o, --only <value>'?: string\n\n  /**\n   * Automatically launch the theme preview in your default web browser.\n   * @environment SHOPIFY_FLAG_OPEN\n   */\n  '--open'?: ''\n\n  /**\n   * Password generated from the Theme Access app.\n   * @environment SHOPIFY_CLI_THEME_TOKEN\n   */\n  '--password <value>'?: string\n\n  /**\n   * The path to your theme directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Local port to serve theme preview from.\n   * @environment SHOPIFY_FLAG_PORT\n   */\n  '--port <value>'?: string\n\n  /**\n   * Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>'?: string\n\n  /**\n   * The password for storefronts with password protection.\n   * @environment SHOPIFY_FLAG_STORE_PASSWORD\n   */\n  '--store-password <value>'?: string\n\n  /**\n   * Theme ID or name of the remote theme.\n   * @environment SHOPIFY_FLAG_THEME_ID\n   */\n  '-t, --theme <value>'?: string\n\n  /**\n   * Synchronize Theme Editor updates in the local theme files.\n   * @environment SHOPIFY_FLAG_THEME_EDITOR_SYNC\n   */\n  '--theme-editor-sync'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
+            "value": "export interface themedev {\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Set which network interface the web server listens on. The default value is 127.0.0.1.\n   * @environment SHOPIFY_FLAG_HOST\n   */\n  '--host <value>'?: string\n\n  /**\n   * Skip hot reloading any files that match the specified pattern.\n   * @environment SHOPIFY_FLAG_IGNORE\n   */\n  '-x, --ignore <value>'?: string\n\n  /**\n   * The live reload mode switches the server behavior when a file is modified:\n- hot-reload Hot reloads local changes to CSS and sections (default)\n- full-page  Always refreshes the entire page\n- off        Deactivate live reload\n   * @environment SHOPIFY_FLAG_LIVE_RELOAD\n   */\n  '--live-reload <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Prevents files from being deleted in the remote theme when a file has been deleted locally. This applies to files that are deleted while the command is running, and files that have been deleted locally before the command is run.\n   * @environment SHOPIFY_FLAG_NODELETE\n   */\n  '-n, --nodelete'?: ''\n\n  /**\n   * The file path or URL. The file path is to a file that you want updated on idle. The URL path is where you want a webhook posted to report on file changes.\n   * @environment SHOPIFY_FLAG_NOTIFY\n   */\n  '--notify <value>'?: string\n\n  /**\n   * Hot reload only files that match the specified pattern.\n   * @environment SHOPIFY_FLAG_ONLY\n   */\n  '-o, --only <value>'?: string\n\n  /**\n   * Automatically launch the theme preview in your default web browser.\n   * @environment SHOPIFY_FLAG_OPEN\n   */\n  '--open'?: ''\n\n  /**\n   * Password generated from the Theme Access app.\n   * @environment SHOPIFY_CLI_THEME_TOKEN\n   */\n  '--password <value>'?: string\n\n  /**\n   * The path to your theme directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Local port to serve theme preview from.\n   * @environment SHOPIFY_FLAG_PORT\n   */\n  '--port <value>'?: string\n\n  /**\n   * Disable request logs.\n   * @environment SHOPIFY_FLAG_SILENCE\n   */\n  '--silence'?: ''\n\n  /**\n   * Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>'?: string\n\n  /**\n   * The password for storefronts with password protection.\n   * @environment SHOPIFY_FLAG_STORE_PASSWORD\n   */\n  '--store-password <value>'?: string\n\n  /**\n   * Theme ID or name of the remote theme.\n   * @environment SHOPIFY_FLAG_THEME_ID\n   */\n  '-t, --theme <value>'?: string\n\n  /**\n   * Synchronize Theme Editor updates in the local theme files.\n   * @environment SHOPIFY_FLAG_THEME_EDITOR_SYNC\n   */\n  '--theme-editor-sync'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
           }
         }
       }

packages/cli/README.md

@@ -1799,7 +1799,7 @@ Uploads the current theme as a development theme to the connected store, then pr
 USAGE
   $ shopify theme dev [-e <value>] [--host <value>] [-x <value>] [--live-reload hot-reload|full-page|off]
     [--no-color] [-n] [--notify <value>] [-o <value>] [--open] [--password <value>] [--path <value>] [--port <value>]
-    [-s <value>] [--store-password <value>] [-t <value>] [--theme-editor-sync] [--verbose]
+    [--silence] [-s <value>] [--store-password <value>] [-t <value>] [--theme-editor-sync] [--verbose]
 
 FLAGS
   -e, --environment=<value>
@@ -1851,6 +1851,9 @@ FLAGS
   --port=<value>
       Local port to serve theme preview from.
 
+  --silence
+      Disable request logs.
+
   --store-password=<value>
       The password for storefronts with password protection.
 

packages/cli/oclif.manifest.json

@@ -5265,6 +5265,13 @@
           "name": "port",
           "type": "option"
         },
+        "silence": {
+          "allowNo": false,
+          "description": "Disable request logs.",
+          "env": "SHOPIFY_FLAG_SILENCE",
+          "name": "silence",
+          "type": "boolean"
+        },
         "store": {
           "char": "s",
           "description": "Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).",
@@ -6359,6 +6366,13 @@
           "name": "port",
           "type": "option"
         },
+        "silence": {
+          "allowNo": false,
+          "description": "Disable request logs.",
+          "env": "SHOPIFY_FLAG_SILENCE",
+          "name": "silence",
+          "type": "boolean"
+        },
         "store": {
           "char": "s",
           "description": "Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).",

packages/theme/src/cli/commands/theme/dev.ts

@@ -112,6 +112,10 @@ You can run this command only in a directory that matches the [default Shopify t
       description: 'The password for storefronts with password protection.',
       env: 'SHOPIFY_FLAG_STORE_PASSWORD',
     }),
+    silence: Flags.boolean({
+      description: 'Disable request logs.',
+      env: 'SHOPIFY_FLAG_SILENCE',
+    }),
   }
 
   async run(): Promise<void> {
@@ -153,6 +157,7 @@ You can run this command only in a directory that matches the [default Shopify t
       ignore,
       only,
       notify: flags.notify,
+      silence: flags.silence,
     })
   }
 }

packages/theme/src/cli/services/dev.test.ts

@@ -7,6 +7,7 @@ import {ensureValidPassword} from '../utilities/theme-environment/storefront-pas
 import {emptyThemeExtFileSystem} from '../utilities/theme-fs-empty.js'
 import {initializeDevServerSession} from '../utilities/theme-environment/dev-server-session.js'
 import {DevServerSession} from '../utilities/theme-environment/types.js'
+import {logRequestLine} from '../utilities/log-request-line.js'
 import {describe, expect, test, vi} from 'vitest'
 import {buildTheme} from '@shopify/cli-kit/node/themes/factories'
 import {DEVELOPMENT_THEME_ROLE} from '@shopify/cli-kit/node/themes/utils'
@@ -22,6 +23,7 @@ vi.mock('../utilities/theme-environment/storefront-session.js')
 vi.mock('../utilities/theme-environment/theme-environment.js')
 vi.mock('../utilities/theme-fs-empty.js')
 vi.mock('../utilities/theme-fs.js')
+vi.mock('../utilities/log-request-line.js')
 vi.mock('@shopify/cli-kit/node/colors', () => ({
   default: {
     bold: (str: string) => str,
@@ -101,11 +103,35 @@ describe('dev', () => {
           ignore: [],
           noDelete: false,
           only: [],
+          silence: false,
         },
       })
     })
   })
 
+  test('does not log requests and responses when the `-silence` option is true', async () => {
+    // Given
+    vi.mocked(initializeDevServerSession).mockResolvedValue(session)
+    vi.mocked(isStorefrontPasswordProtected).mockResolvedValue(false)
+    vi.mocked(mountThemeFileSystem).mockReturnValue(localThemeFileSystem)
+    vi.mocked(emptyThemeExtFileSystem).mockReturnValue(localThemeExtensionFileSystem)
+    vi.mocked(logRequestLine).mockReturnValue(undefined)
+    vi.mocked(setupDevServer).mockReturnValue({
+      workPromise: Promise.resolve(),
+      renderDevSetupProgress: () => Promise.resolve(),
+      dispatchEvent: () => {},
+      serverStart: async () => ({close: async () => {}}),
+    })
+
+    const devOptions = {...options, silence: true}
+
+    // When
+    await dev(devOptions)
+
+    // Then
+    expect(logRequestLine).not.toHaveBeenCalled()
+  })
+
   test('renders "dev" command links', async () => {
     // Given
     const themeId = theme.id.toString()

packages/theme/src/cli/services/dev.ts

@@ -35,6 +35,7 @@ export interface DevOptions {
   ignore: string[]
   only: string[]
   notify?: string
+  silence?: boolean
 }
 
 export async function dev(options: DevOptions) {
@@ -91,6 +92,7 @@ export async function dev(options: DevOptions) {
       noDelete: options.noDelete,
       ignore: options.ignore,
       only: options.only,
+      silence: options.silence ?? false,
     },
   }
 

packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts

@@ -330,6 +330,7 @@ function createTestContext(options?: {files?: [string, string][]}) {
       liveReload: 'hot-reload',
       open: false,
       themeEditorSync: false,
+      silence: false,
     },
   }
 

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

@@ -25,7 +25,9 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) {
       replaceTemplates: getInMemoryTemplates(ctx, browserPathname, getCookie(event, 'localization')?.toLowerCase()),
     })
       .then(async (response) => {
-        logRequestLine(event, response)
+        if (!ctx.options.silence) {
+          logRequestLine(event, response)
+        }
 
         let html = await patchRenderingResponse(ctx, event, response)
 

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

@@ -272,7 +272,9 @@ function proxyStorefrontRequest(event: H3Event, ctx: DevServerContext) {
       redirect: 'manual',
     },
     async onResponse(event, response) {
-      logRequestLine(event, response)
+      if (!ctx.options.silence) {
+        logRequestLine(event, response)
+      }
 
       patchProxiedResponseHeaders(ctx, event, response)
 

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

@@ -96,6 +96,7 @@ describe('setupDevServer', () => {
       liveReload: 'hot-reload',
       open: false,
       themeEditorSync: false,
+      silence: false,
     },
   }
 

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

@@ -117,6 +117,11 @@ export interface DevServerContext {
      * Automatically open the theme preview in the default browser.
      */
     open: boolean
+
+    /**
+     * Disable request logs.
+     */
+    silence: boolean
   }
 }
 

packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts

@@ -90,6 +90,7 @@ async function contextDevServerContext(
       port: port.toString(),
       liveReload: 'hot-reload',
       open: false,
+      silence: false,
     },
   }
 }