From 45d29fc5fe8b0e96e7f5cb644dd158f91aaec4a9 Mon Sep 17 00:00:00 2001 From: James Meng Date: Thu, 16 Jan 2025 12:19:18 -0800 Subject: [PATCH 1/7] Render error page on theme asset upload error --- .../hot-reload/error-page.ts | 83 +++++++++++++++++++ .../cli/utilities/theme-environment/html.ts | 38 ++++----- 2 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts new file mode 100644 index 00000000000..e9330efa11b --- /dev/null +++ b/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts @@ -0,0 +1,83 @@ +interface Error { + message: string + code: string +} + +const POLARIS_STYLESHEET_URL = 'https://unpkg.com/@shopify/polaris@13.9.2/build/esm/styles.css' + +export function getErrorPage(options: {title: string; header: string; errors: Error[]}) { + const html = String.raw + return html` + + + ${options.title ?? 'Upload Errors'} + + + +
+
+ +
+
+ + ` +} diff --git a/packages/theme/src/cli/utilities/theme-environment/html.ts b/packages/theme/src/cli/utilities/theme-environment/html.ts index 8e6097da653..858f1cb15c3 100644 --- a/packages/theme/src/cli/utilities/theme-environment/html.ts +++ b/packages/theme/src/cli/utilities/theme-environment/html.ts @@ -1,6 +1,7 @@ import {getProxyStorefrontHeaders, patchRenderingResponse} from './proxy.js' import {getInMemoryTemplates, injectHotReloadScript} from './hot-reload/server.js' import {render} from './storefront-renderer.js' +import {getErrorPage} from './hot-reload/error-page.js' import {getExtensionInMemoryTemplates} from '../theme-ext-environment/theme-ext-server.js' import {logRequestLine} from '../log-request-line.js' import {defineEventHandler, getCookie, setResponseHeader, setResponseStatus, type H3Error} from 'h3' @@ -31,6 +32,17 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) { assertThemeId(response, html, String(theme.id)) + if (ctx.localThemeFileSystem.uploadErrors.size > 0) { + html = getErrorPage({ + title: 'Failed to Upload Theme Files', + header: 'Upload Errors', + errors: Array.from(ctx.localThemeFileSystem.uploadErrors.entries()).map(([file, errors]) => ({ + message: file, + code: errors.join('\n'), + })), + }) + } + if (ctx.options.liveReload !== 'off') { html = injectHotReloadScript(html) } @@ -52,8 +64,12 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) { let errorPageHtml = getErrorPage({ title, header: title, - message: [...rest, cause?.message ?? error.message].join('
'), - code: error.stack?.replace(`${error.message}\n`, '') ?? '', + errors: [ + { + message: [...rest, cause?.message ?? error.message].join('
'), + code: error.stack?.replace(`${error.message}\n`, '') ?? '', + }, + ], }) if (ctx.options.liveReload !== 'off') { @@ -65,24 +81,6 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) { }) } -function getErrorPage(options: {title: string; header: string; message: string; code: string}) { - const html = String.raw - - return html` - - ${options.title ?? 'Unknown error'} - - -

${options.header}

-

${options.message}

- 
${options.code}
- - ` -} - function assertThemeId(response: Response, html: string, expectedThemeId: string) { /** * DOM example: From b2f0ae189fd1ae7546fe5e2ca048c91c945ca38d Mon Sep 17 00:00:00 2001 From: James Meng Date: Thu, 23 Jan 2025 16:27:59 -0800 Subject: [PATCH 2/7] Trigger full reload when error overlay needs to be updated --- packages/theme/src/cli/utilities/theme-fs.ts | 3 +++ packages/theme/src/cli/utilities/theme-uploader.ts | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/theme/src/cli/utilities/theme-fs.ts b/packages/theme/src/cli/utilities/theme-fs.ts index 1f8d997738c..a27a1b5e4b4 100644 --- a/packages/theme/src/cli/utilities/theme-fs.ts +++ b/packages/theme/src/cli/utilities/theme-fs.ts @@ -2,6 +2,7 @@ import {calculateChecksum} from './asset-checksum.js' import {applyIgnoreFilters, getPatternsFromShopifyIgnore} from './asset-ignore.js' import {Notifier} from './notifier.js' import {createSyncingCatchError} from './errors.js' +import {emitHotReloadEvent} from './theme-environment/hot-reload/server.js' import {DEFAULT_IGNORE_PATTERNS, timestampDateFormat} from '../constants.js' import {glob, readFile, ReadOptions, fileExists, mkdir, writeFile, removeFile} from '@shopify/cli-kit/node/fs' import {joinPath, basename, relativePath} from '@shopify/cli-kit/node/path' @@ -150,9 +151,11 @@ export function mountThemeFileSystem(root: string, options?: ThemeFileSystemOpti if (result?.success) { uploadErrors.delete(fileKey) + emitHotReloadEvent({type: 'full', key: fileKey}) } else { const errors = result?.errors?.asset ?? ['Response was not successful.'] uploadErrors.set(fileKey, errors) + emitHotReloadEvent({type: 'full', key: fileKey}) throw new Error(errors.join('\n')) } diff --git a/packages/theme/src/cli/utilities/theme-uploader.ts b/packages/theme/src/cli/utilities/theme-uploader.ts index f07405a9067..c79301a5eee 100644 --- a/packages/theme/src/cli/utilities/theme-uploader.ts +++ b/packages/theme/src/cli/utilities/theme-uploader.ts @@ -2,6 +2,7 @@ import {partitionThemeFiles} from './theme-fs.js' import {rejectGeneratedStaticAssets} from './asset-checksum.js' import {renderTasksToStdErr} from './theme-ui.js' import {createSyncingCatchError, renderThrownError} from './errors.js' +import {emitHotReloadEvent} from './theme-environment/hot-reload/server.js' import {AdminSession} from '@shopify/cli-kit/node/session' import {Result, Checksum, Theme, ThemeFileSystem} from '@shopify/cli-kit/node/themes/types' import {AssetParams, bulkUploadThemeAssets, deleteThemeAssets} from '@shopify/cli-kit/node/themes/api' @@ -392,6 +393,7 @@ export function updateUploadErrors(result: Result, localThemeFileSystem: ThemeFi } else { const errors = result.errors?.asset ?? ['Response was not successful.'] localThemeFileSystem.uploadErrors.set(result.key, errors) + emitHotReloadEvent({type: 'full', key: result.key}) } } From f26ff7f58176d241badc0fc983c5db088a788c54 Mon Sep 17 00:00:00 2001 From: James Meng Date: Mon, 27 Jan 2025 18:49:48 -0800 Subject: [PATCH 3/7] Add 'error-overlay' flag to `theme dev` command to toggle error overlay rendering --- packages/theme/src/cli/commands/theme/dev.ts | 12 +++++++++++- packages/theme/src/cli/services/dev.test.ts | 2 ++ packages/theme/src/cli/services/dev.ts | 4 +++- .../theme-environment/hot-reload/server.test.ts | 1 + .../src/cli/utilities/theme-environment/html.ts | 2 +- .../theme-environment/theme-environment.test.ts | 1 + .../src/cli/utilities/theme-environment/types.ts | 12 ++++++++++++ .../theme-ext-environment/theme-ext-server.ts | 1 + 8 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/theme/src/cli/commands/theme/dev.ts b/packages/theme/src/cli/commands/theme/dev.ts index c0fedeaf24d..5979cbd4621 100644 --- a/packages/theme/src/cli/commands/theme/dev.ts +++ b/packages/theme/src/cli/commands/theme/dev.ts @@ -9,7 +9,7 @@ import {Flags} from '@oclif/core' import {globalFlags} from '@shopify/cli-kit/node/cli' import {Theme} from '@shopify/cli-kit/node/themes/types' import {ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session' -import type {LiveReload} from '../../utilities/theme-environment/types.js' +import type {ErrorOverlayMode, LiveReload} from '../../utilities/theme-environment/types.js' export default class Dev extends ThemeCommand { static summary = @@ -54,6 +54,15 @@ You can run this command only in a directory that matches the [default Shopify t options: ['hot-reload', 'full-page', 'off'], env: 'SHOPIFY_FLAG_LIVE_RELOAD', }), + 'error-overlay': Flags.string({ + description: `Controls the visibility of the error overlay when an theme asset upload fails: +- silent Prevents the error overlay from appearing. +- default Displays the error overlay. + `, + options: ['silent', 'default'], + default: 'default', + env: 'SHOPIFY_FLAG_ERROR_OVERLAY', + }), poll: Flags.boolean({ hidden: true, description: 'Force polling to detect file changes.', @@ -147,6 +156,7 @@ You can run this command only in a directory that matches the [default Shopify t host: flags.host, port: flags.port, 'live-reload': flags['live-reload'] as LiveReload, + 'error-overlay': flags['error-overlay'] as ErrorOverlayMode, force: flags.force, open: flags.open, 'theme-editor-sync': flags['theme-editor-sync'], diff --git a/packages/theme/src/cli/services/dev.test.ts b/packages/theme/src/cli/services/dev.test.ts index 63d3ec8efee..b406997e8d1 100644 --- a/packages/theme/src/cli/services/dev.test.ts +++ b/packages/theme/src/cli/services/dev.test.ts @@ -50,6 +50,7 @@ describe('dev', () => { noDelete: false, ignore: [], only: [], + 'error-overlay': 'default', } const session: DevServerSession = { @@ -101,6 +102,7 @@ describe('dev', () => { ignore: [], noDelete: false, only: [], + errorOverlay: 'default', }, }) }) diff --git a/packages/theme/src/cli/services/dev.ts b/packages/theme/src/cli/services/dev.ts index 93579799975..67c1fbd87f0 100644 --- a/packages/theme/src/cli/services/dev.ts +++ b/packages/theme/src/cli/services/dev.ts @@ -1,7 +1,7 @@ import {hasRequiredThemeDirectories, mountThemeFileSystem} from '../utilities/theme-fs.js' import {ensureDirectoryConfirmed} from '../utilities/theme-ui.js' import {setupDevServer} from '../utilities/theme-environment/theme-environment.js' -import {DevServerContext, LiveReload} from '../utilities/theme-environment/types.js' +import {DevServerContext, ErrorOverlayMode, LiveReload} from '../utilities/theme-environment/types.js' import {isStorefrontPasswordProtected} from '../utilities/theme-environment/storefront-session.js' import {ensureValidPassword} from '../utilities/theme-environment/storefront-password-prompt.js' import {emptyThemeExtFileSystem} from '../utilities/theme-fs-empty.js' @@ -31,6 +31,7 @@ export interface DevOptions { force: boolean 'theme-editor-sync': boolean 'live-reload': LiveReload + 'error-overlay': ErrorOverlayMode noDelete: boolean ignore: string[] only: string[] @@ -90,6 +91,7 @@ export async function dev(options: DevOptions) { noDelete: options.noDelete, ignore: options.ignore, only: options.only, + errorOverlay: options['error-overlay'], }, } diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts index 6c66b4b745b..58ec32bafb6 100644 --- a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts +++ b/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, + errorOverlay: 'default', }, } diff --git a/packages/theme/src/cli/utilities/theme-environment/html.ts b/packages/theme/src/cli/utilities/theme-environment/html.ts index 858f1cb15c3..4c6ea28a0c8 100644 --- a/packages/theme/src/cli/utilities/theme-environment/html.ts +++ b/packages/theme/src/cli/utilities/theme-environment/html.ts @@ -32,7 +32,7 @@ export function getHtmlHandler(theme: Theme, ctx: DevServerContext) { assertThemeId(response, html, String(theme.id)) - if (ctx.localThemeFileSystem.uploadErrors.size > 0) { + if (ctx.options.errorOverlay !== 'silent' && ctx.localThemeFileSystem.uploadErrors.size > 0) { html = getErrorPage({ title: 'Failed to Upload Theme Files', header: 'Upload Errors', diff --git a/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts b/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts index 355665ccf1f..867ac2aab3f 100644 --- a/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts +++ b/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts @@ -96,6 +96,7 @@ describe('setupDevServer', () => { liveReload: 'hot-reload', open: false, themeEditorSync: false, + errorOverlay: 'default', }, } diff --git a/packages/theme/src/cli/utilities/theme-environment/types.ts b/packages/theme/src/cli/utilities/theme-environment/types.ts index cff737cd350..3dee51c7137 100644 --- a/packages/theme/src/cli/utilities/theme-environment/types.ts +++ b/packages/theme/src/cli/utilities/theme-environment/types.ts @@ -49,6 +49,13 @@ export interface DevServerSession extends AdminSession { */ export type LiveReload = 'hot-reload' | 'full-page' | 'off' +/** + * Controls the visibility of the error overlay when an asset upload fails. Options: ['silent', 'default'] + * - silent: Prevents the error overlay from appearing. + * - default: Displays the error overlay. + */ +export type ErrorOverlayMode = 'silent' | 'default' + /** * Maintains the state of local and remote assets in theme development server. */ @@ -117,6 +124,11 @@ export interface DevServerContext { * Automatically open the theme preview in the default browser. */ open: boolean + + /** + * Controls the visibility of the error overlay when an asset upload fails. + */ + errorOverlay: ErrorOverlayMode } } diff --git a/packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts b/packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts index 4dea217cf48..c8f76e6465d 100644 --- a/packages/theme/src/cli/utilities/theme-ext-environment/theme-ext-server.ts +++ b/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, + errorOverlay: 'default', }, } } From 1761d5e0dd545e3ddaf74fafe53a64ac417fdbe4 Mon Sep 17 00:00:00 2001 From: James Meng Date: Mon, 27 Jan 2025 19:11:03 -0800 Subject: [PATCH 4/7] Bugfix - Escape HTML in error messages --- .../theme-environment/hot-reload/error-page.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts index e9330efa11b..e81f09c5741 100644 --- a/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts +++ b/packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts @@ -5,6 +5,15 @@ interface Error { const POLARIS_STYLESHEET_URL = 'https://unpkg.com/@shopify/polaris@13.9.2/build/esm/styles.css' +function escapeHtml(unsafe: string) { + return unsafe + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') +} + export function getErrorPage(options: {title: string; header: string; errors: Error[]}) { const html = String.raw return html` @@ -64,9 +73,9 @@ export function getErrorPage(options: {title: string; header: string; errors: Er .map( (error) => `
- ${error.message} + ${escapeHtml(error.message)}
    -
  • ${error.code}
    • +
  • ${escapeHtml(error.code)}
`, ) From fca9c1965e8518587969e6de3cf5dbdcc05f1f26 Mon Sep 17 00:00:00 2001 From: James Meng Date: Thu, 23 Jan 2025 16:51:38 -0800 Subject: [PATCH 5/7] Changeset + docs --- .changeset/bright-impalas-float.md | 5 ++++ .../interfaces/theme-dev.interface.ts | 9 +++++++ .../generated/generated_docs_data.json | 11 +++++++- packages/cli/README.md | 14 +++++++--- packages/cli/oclif.manifest.json | 26 +++++++++++++++++++ 5 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 .changeset/bright-impalas-float.md diff --git a/.changeset/bright-impalas-float.md b/.changeset/bright-impalas-float.md new file mode 100644 index 00000000000..5fb19fac5c7 --- /dev/null +++ b/.changeset/bright-impalas-float.md @@ -0,0 +1,5 @@ +--- +'@shopify/theme': minor +--- + +Render error overlay when `theme dev` encounters asset upload errors diff --git a/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts b/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts index e8f131c9941..33bbbce0b4a 100644 --- a/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts +++ b/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts @@ -6,6 +6,15 @@ export interface themedev { */ '-e, --environment '?: string + /** + * Controls the visibility of the error overlay when an theme asset upload fails: +- silent Prevents the error overlay from appearing. +- default Displays the error overlay. + + * @environment SHOPIFY_FLAG_ERROR_OVERLAY + */ + '--error-overlay '?: string + /** * Set which network interface the web server listens on. The default value is 127.0.0.1. * @environment SHOPIFY_FLAG_HOST diff --git a/docs-shopify.dev/generated/generated_docs_data.json b/docs-shopify.dev/generated/generated_docs_data.json index ace13faa9bc..c5156010559 100644 --- a/docs-shopify.dev/generated/generated_docs_data.json +++ b/docs-shopify.dev/generated/generated_docs_data.json @@ -4960,6 +4960,15 @@ "name": "themedev", "description": "", "members": [ + { + "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts", + "syntaxKind": "PropertySignature", + "name": "--error-overlay ", + "value": "string", + "description": "Controls the visibility of the error overlay when an theme asset upload fails: - silent Prevents the error overlay from appearing. - default Displays the error overlay.", + "isOptional": true, + "environmentValue": "SHOPIFY_FLAG_ERROR_OVERLAY" + }, { "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts", "syntaxKind": "PropertySignature", @@ -5114,7 +5123,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 '?: 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 '?: string\n\n /**\n * Skip hot reloading any files that match the specified pattern.\n * @environment SHOPIFY_FLAG_IGNORE\n */\n '-x, --ignore '?: 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 '?: 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 '?: string\n\n /**\n * Hot reload only files that match the specified pattern.\n * @environment SHOPIFY_FLAG_ONLY\n */\n '-o, --only '?: 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 '?: string\n\n /**\n * The path to your theme directory.\n * @environment SHOPIFY_FLAG_PATH\n */\n '--path '?: string\n\n /**\n * Local port to serve theme preview from.\n * @environment SHOPIFY_FLAG_PORT\n */\n '--port '?: 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 '?: string\n\n /**\n * The password for storefronts with password protection.\n * @environment SHOPIFY_FLAG_STORE_PASSWORD\n */\n '--store-password '?: string\n\n /**\n * Theme ID or name of the remote theme.\n * @environment SHOPIFY_FLAG_THEME_ID\n */\n '-t, --theme '?: 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 '?: string\n\n /**\n * Controls the visibility of the error overlay when an theme asset upload fails:\n- silent Prevents the error overlay from appearing.\n- default Displays the error overlay.\n \n * @environment SHOPIFY_FLAG_ERROR_OVERLAY\n */\n '--error-overlay '?: 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 '?: string\n\n /**\n * Skip hot reloading any files that match the specified pattern.\n * @environment SHOPIFY_FLAG_IGNORE\n */\n '-x, --ignore '?: 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 '?: 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 '?: string\n\n /**\n * Hot reload only files that match the specified pattern.\n * @environment SHOPIFY_FLAG_ONLY\n */\n '-o, --only '?: 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 '?: string\n\n /**\n * The path to your theme directory.\n * @environment SHOPIFY_FLAG_PATH\n */\n '--path '?: string\n\n /**\n * Local port to serve theme preview from.\n * @environment SHOPIFY_FLAG_PORT\n */\n '--port '?: 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 '?: string\n\n /**\n * The password for storefronts with password protection.\n * @environment SHOPIFY_FLAG_STORE_PASSWORD\n */\n '--store-password '?: string\n\n /**\n * Theme ID or name of the remote theme.\n * @environment SHOPIFY_FLAG_THEME_ID\n */\n '-t, --theme '?: 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}" } } } diff --git a/packages/cli/README.md b/packages/cli/README.md index cf82abf4bd6..5d30082ac7b 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -1796,9 +1796,10 @@ Uploads the current theme as a development theme to the connected store, then pr ``` USAGE - $ shopify theme dev [-e ] [--host ] [-x ] [--live-reload hot-reload|full-page|off] - [--no-color] [-n] [--notify ] [-o ] [--open] [--password ] [--path ] [--port ] - [-s ] [--store-password ] [-t ] [--theme-editor-sync] [--verbose] + $ shopify theme dev [-e ] [--error-overlay silent|default] [--host ] [-x ] + [--live-reload hot-reload|full-page|off] [--no-color] [-n] [--notify ] [-o ] [--open] [--password + ] [--path ] [--port ] [-s ] [--store-password ] [-t ] + [--theme-editor-sync] [--verbose] FLAGS -e, --environment= @@ -1821,6 +1822,13 @@ FLAGS -x, --ignore=... Skip hot reloading any files that match the specified pattern. + --error-overlay=