From d428b471d7d60c21d9fb643acd467b97aad14c86 Mon Sep 17 00:00:00 2001 From: Chris Berthe Date: Mon, 23 Jun 2025 10:41:16 -0400 Subject: [PATCH 01/11] Add listing flag to dev, push, and share commands --- .changeset/polite-eyes-warn.md | 7 + .../interfaces/theme-dev.interface.ts | 8 +- .../interfaces/theme-push.interface.ts | 6 + .../interfaces/theme-share.interface.ts | 6 + .../generated/generated_docs_data.json | 29 +- .../cli-kit/src/public/node/themes/types.ts | 3 +- packages/cli/README.md | 194 +- packages/cli/oclif.manifest.json | 2014 +++++------------ packages/theme/package.json | 1 + packages/theme/src/cli/commands/theme/dev.ts | 6 + packages/theme/src/cli/commands/theme/push.ts | 5 + .../theme/src/cli/commands/theme/share.ts | 6 + packages/theme/src/cli/services/dev.ts | 4 +- packages/theme/src/cli/services/push.test.ts | 22 +- packages/theme/src/cli/services/push.ts | 10 +- .../theme/src/cli/utilities/theme-fs.test.ts | 69 + packages/theme/src/cli/utilities/theme-fs.ts | 43 +- .../src/cli/utilities/theme-listing.test.ts | 154 ++ .../theme/src/cli/utilities/theme-listing.ts | 42 + pnpm-lock.yaml | 3 + 20 files changed, 1082 insertions(+), 1550 deletions(-) create mode 100644 .changeset/polite-eyes-warn.md create mode 100644 packages/theme/src/cli/utilities/theme-listing.test.ts create mode 100644 packages/theme/src/cli/utilities/theme-listing.ts diff --git a/.changeset/polite-eyes-warn.md b/.changeset/polite-eyes-warn.md new file mode 100644 index 00000000000..b088f15d4bb --- /dev/null +++ b/.changeset/polite-eyes-warn.md @@ -0,0 +1,7 @@ +--- +'@shopify/cli-kit': patch +'@shopify/theme': patch +'@shopify/cli': patch +--- + +Add --listing flag to theme dev, push, and share commands diff --git a/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts b/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts index 573e9e1883f..2d3233a8c39 100644 --- a/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts +++ b/docs-shopify.dev/commands/interfaces/theme-dev.interface.ts @@ -16,7 +16,7 @@ export interface themedev { * 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 @@ -33,6 +33,12 @@ export interface themedev { */ '-x, --ignore '?: string + /** + * The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory. + * @environment SHOPIFY_FLAG_LISTING + */ + '--listing '?: string + /** * The live reload mode switches the server behavior when a file is modified: - hot-reload Hot reloads local changes to CSS and sections (default) diff --git a/docs-shopify.dev/commands/interfaces/theme-push.interface.ts b/docs-shopify.dev/commands/interfaces/theme-push.interface.ts index 53b4770400b..c6adff4c968 100644 --- a/docs-shopify.dev/commands/interfaces/theme-push.interface.ts +++ b/docs-shopify.dev/commands/interfaces/theme-push.interface.ts @@ -30,6 +30,12 @@ export interface themepush { */ '-j, --json'?: '' + /** + * The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory. + * @environment SHOPIFY_FLAG_LISTING + */ + '--listing '?: string + /** * Push theme files from your remote live theme. * @environment SHOPIFY_FLAG_LIVE diff --git a/docs-shopify.dev/commands/interfaces/theme-share.interface.ts b/docs-shopify.dev/commands/interfaces/theme-share.interface.ts index f08f085d46d..5e12cfbe30e 100644 --- a/docs-shopify.dev/commands/interfaces/theme-share.interface.ts +++ b/docs-shopify.dev/commands/interfaces/theme-share.interface.ts @@ -6,6 +6,12 @@ export interface themeshare { */ '-e, --environment '?: string + /** + * The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory. + * @environment SHOPIFY_FLAG_LISTING + */ + '--listing '?: string + /** * Disable color output. * @environment SHOPIFY_FLAG_NO_COLOR diff --git a/docs-shopify.dev/generated/generated_docs_data.json b/docs-shopify.dev/generated/generated_docs_data.json index eb04908faa7..eb2ecf40bae 100644 --- a/docs-shopify.dev/generated/generated_docs_data.json +++ b/docs-shopify.dev/generated/generated_docs_data.json @@ -5501,6 +5501,15 @@ "isOptional": true, "environmentValue": "SHOPIFY_FLAG_HOST" }, + { + "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts", + "syntaxKind": "PropertySignature", + "name": "--listing ", + "value": "string", + "description": "The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory.", + "isOptional": true, + "environmentValue": "SHOPIFY_FLAG_LISTING" + }, { "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts", "syntaxKind": "PropertySignature", @@ -6866,6 +6875,15 @@ "name": "themepush", "description": "", "members": [ + { + "filePath": "docs-shopify.dev/commands/interfaces/theme-push.interface.ts", + "syntaxKind": "PropertySignature", + "name": "--listing ", + "value": "string", + "description": "The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory.", + "isOptional": true, + "environmentValue": "SHOPIFY_FLAG_LISTING" + }, { "filePath": "docs-shopify.dev/commands/interfaces/theme-push.interface.ts", "syntaxKind": "PropertySignature", @@ -7185,6 +7203,15 @@ "name": "themeshare", "description": "", "members": [ + { + "filePath": "docs-shopify.dev/commands/interfaces/theme-share.interface.ts", + "syntaxKind": "PropertySignature", + "name": "--listing ", + "value": "string", + "description": "The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] directory.", + "isOptional": true, + "environmentValue": "SHOPIFY_FLAG_LISTING" + }, { "filePath": "docs-shopify.dev/commands/interfaces/theme-share.interface.ts", "syntaxKind": "PropertySignature", @@ -7292,4 +7319,4 @@ "category": "general commands", "related": [] } -] \ No newline at end of file +] diff --git a/packages/cli-kit/src/public/node/themes/types.ts b/packages/cli-kit/src/public/node/themes/types.ts index 39021516d8c..55f4a2ffefe 100644 --- a/packages/cli-kit/src/public/node/themes/types.ts +++ b/packages/cli-kit/src/public/node/themes/types.ts @@ -27,8 +27,9 @@ export type ThemeFSEventPayload = (ThemeFSEv export interface ThemeFileSystemOptions { filters?: {ignore?: string[]; only?: string[]} - notify?: string + listing?: string noDelete?: boolean + notify?: string } /** diff --git a/packages/cli/README.md b/packages/cli/README.md index 407a03ae468..a8ca545d409 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -2,7 +2,6 @@ * [`shopify app build`](#shopify-app-build) * [`shopify app config link`](#shopify-app-config-link) -* [`shopify app config pull`](#shopify-app-config-pull) * [`shopify app config use [config] [flags]`](#shopify-app-config-use-config-flags) * [`shopify app deploy`](#shopify-app-deploy) * [`shopify app dev`](#shopify-app-dev) @@ -10,13 +9,11 @@ * [`shopify app env pull`](#shopify-app-env-pull) * [`shopify app env show`](#shopify-app-env-show) * [`shopify app function build`](#shopify-app-function-build) -* [`shopify app function info`](#shopify-app-function-info) * [`shopify app function replay`](#shopify-app-function-replay) * [`shopify app function run`](#shopify-app-function-run) * [`shopify app function schema`](#shopify-app-function-schema) * [`shopify app function typegen`](#shopify-app-function-typegen) * [`shopify app generate extension`](#shopify-app-generate-extension) -* [`shopify app import-custom-data-definitions`](#shopify-app-import-custom-data-definitions) * [`shopify app import-extensions`](#shopify-app-import-extensions) * [`shopify app info`](#shopify-app-info) * [`shopify app init`](#shopify-app-init) @@ -120,7 +117,7 @@ DESCRIPTION ## `shopify app config link` -Fetch your app configuration from the Developer Dashboard. +Fetch your app configuration from the Partner Dashboard. ``` USAGE @@ -135,40 +132,15 @@ FLAGS --verbose Increase the verbosity of the output. DESCRIPTION - Fetch your app configuration from the Developer Dashboard. + Fetch your app configuration from the Partner Dashboard. - Pulls app configuration from the Developer Dashboard and creates or overwrites a configuration file. You can create a + Pulls app configuration from the Partner Dashboard and creates or overwrites a configuration file. You can create a new app with this command to start with a default configuration file. For more information on the format of the created TOML configuration file, refer to the "App configuration" (https://shopify.dev/docs/apps/tools/cli/configuration) page. ``` -## `shopify app config pull` - -Refresh an already-linked app configuration without prompts. - -``` -USAGE - $ shopify app config pull [--client-id | -c ] [--no-color] [--path ] [--reset | ] [--verbose] - -FLAGS - -c, --config= The name of the app configuration. - --client-id= The Client ID of your app. - --no-color Disable color output. - --path= The path to your app directory. - --reset Reset all your settings. - --verbose Increase the verbosity of the output. - -DESCRIPTION - Refresh an already-linked app configuration without prompts. - - Pulls the latest configuration from the already-linked Shopify app and updates the selected configuration file. - - This command reuses the existing linked app and organization and skips all interactive prompts. Use `--config` to - target a specific configuration file, or omit it to use the default one. -``` - ## `shopify app config use [config] [flags]` Activate an app configuration. @@ -200,18 +172,12 @@ Deploy your Shopify app. ``` USAGE - $ shopify app deploy [--allow-deletes] [--allow-updates] [--client-id | -c ] [-f] [--message - ] [--no-build] [--no-color] [--no-release] [--path ] [--reset | ] [--source-control-url ] - [--verbose] [--version ] + $ shopify app deploy [--client-id | -c ] [-f] [--message ] [--no-build] [--no-color] + [--no-release] [--path ] [--reset | ] [--source-control-url ] [--verbose] [--version ] FLAGS -c, --config= The name of the app configuration. - -f, --force Deploy without asking for confirmation. Equivalent to --allow-updates - --allow-deletes. For CI/CD environments, the recommended flag is --allow-updates. - --allow-deletes Allows removing extensions and configuration without requiring user confirmation. - For CI/CD environments, the recommended flag is --allow-updates. - --allow-updates Allows adding and updating extensions and configuration without requiring user - confirmation. Recommended option for CI/CD environments. + -f, --force Deploy without asking for confirmation. --client-id= The Client ID of your app. --message= Optional message that will be associated with this version. This is for internal use only and won't be available externally. @@ -220,7 +186,6 @@ FLAGS build` or by caching build artifacts. --no-color Disable color output. --no-release Creates a version but doesn't release it - it's not made available to merchants. - With this flag, a user confirmation is not required. --path= The path to your app directory. --reset Reset all your settings. --source-control-url= URL associated with the new app version. @@ -234,8 +199,8 @@ DESCRIPTION "Builds the app" (https://shopify.dev/docs/api/shopify-cli/app/app-build), then deploys your app configuration and extensions. - This command creates an app version, which is a snapshot of your app configuration and all extensions. This version is - then released to users. + This command creates an app version, which is a snapshot of your app configuration and all extensions, including the + app extensions that you manage in the Partner Dashboard. This version is then released to users. This command doesn't deploy your "web app" (https://shopify.dev/docs/apps/tools/cli/structure#web-components). You need to "deploy your web app" (https://shopify.dev/docs/apps/deployment/web) to your own hosting solution. @@ -261,7 +226,7 @@ FLAGS --client-id= The Client ID of your app. --localhost-port= Port to use for localhost. --no-color Disable color output. - --no-update Uses the app URL from the toml file instead an autogenerated URL for dev. + --no-update Skips the Partners Dashboard URL update step. --notify= 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. @@ -280,13 +245,13 @@ FLAGS DESCRIPTION Run the app. - Builds and previews your app on a dev store, and watches for changes. "Read more about testing apps locally" + Builds and previews your app on a development store, and watches for changes. "Read more about testing apps locally" (https://shopify.dev/docs/apps/build/cli-for-apps/test-apps-locally). ``` ## `shopify app dev clean` -Cleans up the dev preview from the selected store. +Cleans up the app preview from the selected store. ``` USAGE @@ -303,9 +268,9 @@ FLAGS --verbose Increase the verbosity of the output. DESCRIPTION - Cleans up the dev preview from the selected store. + Cleans up the app preview from the selected store. - Stop the dev preview that was started with `shopify app dev`. + Stop the app preview that was started with `shopify app dev`. It restores the app's active version to the selected development store. ``` @@ -381,38 +346,6 @@ DESCRIPTION Compiles the function in your current directory to WebAssembly (Wasm) for testing purposes. ``` -## `shopify app function info` - -Print basic information about your function. - -``` -USAGE - $ shopify app function info [--client-id | -c ] [-j] [--no-color] [--path ] [--reset | ] - [--verbose] - -FLAGS - -c, --config= The name of the app configuration. - -j, --json Output the result as JSON. - --client-id= The Client ID of your app. - --no-color Disable color output. - --path= The path to your function directory. - --reset Reset all your settings. - --verbose Increase the verbosity of the output. - -DESCRIPTION - Print basic information about your function. - - The information returned includes the following: - - - The function handle - - The function name - - The function API version - - The targeting configuration - - The schema path - - The WASM path - - The function runner path -``` - ## `shopify app function replay` Replays a function run from an app log. @@ -556,32 +489,6 @@ DESCRIPTION refer to "App structure" (https://shopify.dev/docs/apps/tools/cli/structure) and the documentation for your extension. ``` -## `shopify app import-custom-data-definitions` - -Import metafield and metaobject definitions. - -``` -USAGE - $ shopify app import-custom-data-definitions [--client-id | -c ] [--include-existing] [--no-color] [--path ] - [--reset | ] [-s ] [--verbose] - -FLAGS - -c, --config= The name of the app configuration. - -s, --store= Store URL. Must be an existing development or Shopify Plus sandbox store. - --client-id= The Client ID of your app. - --include-existing Include existing declared definitions in the output. - --no-color Disable color output. - --path= The path to your app directory. - --reset Reset all your settings. - --verbose Increase the verbosity of the output. - -DESCRIPTION - Import metafield and metaobject definitions. - - Import metafield and metaobject definitions from your development store. "Read more about declarative custom data - definitions" (https://shopify.dev/docs/apps/build/custom-data/declarative-custom-data-definitions). -``` - ## `shopify app import-extensions` Import dashboard-managed extensions into your app. @@ -627,9 +534,9 @@ DESCRIPTION The information returned includes the following: - - The app and dev store that's used when you run the "dev" (https://shopify.dev/docs/api/shopify-cli/app/app-dev) - command. You can reset these configurations using "`dev --reset`" - (https://shopify.dev/docs/api/shopify-cli/app/app-dev#flags-propertydetail-reset). + - The app and development store or Plus sandbox store that's used when you run the "dev" + (https://shopify.dev/docs/api/shopify-cli/app/app-dev) command. You can reset these configurations using "`dev + --reset`" (https://shopify.dev/docs/api/shopify-cli/app/app-dev#flags-propertydetail-reset). - The "structure" (https://shopify.dev/docs/apps/tools/cli/structure) of your app project. - The "access scopes" (https://shopify.dev/docs/api/usage) your app has requested. - System information, including the package manager and version of Shopify CLI used in the project. @@ -727,12 +634,7 @@ USAGE FLAGS -c, --config= The name of the app configuration. - -f, --force Release without asking for confirmation. Equivalent to --allow-updates --allow-deletes. For - CI/CD environments, the recommended flag is --allow-updates. - --allow-deletes Allows removing extensions and configuration without requiring user confirmation. For CI/CD - environments, the recommended flag is --allow-updates. - --allow-updates Allows adding and updating extensions and configuration without requiring user confirmation. - Recommended option for CI/CD environments. + -f, --force Release without asking for confirmation. --client-id= The Client ID of your app. --no-color Disable color output. --path= The path to your app directory. @@ -1097,9 +999,9 @@ Builds and deploys a Hydrogen storefront to Oxygen. ``` USAGE $ shopify hydrogen deploy [--auth-bypass-token-duration --auth-bypass-token] [--build-command ] - [--entry ] [--env | --env-branch ] [--env-file ] [-f] [--force-client-sourcemap] - [--json-output] [--lockfile-check] [--metadata-description ] [--metadata-user ] [--no-verify] [--path - ] [--preview] [-s ] [-t ] + [--entry ] [--env | --env-branch ] [--env-file ] [-f] [--json-output] + [--lockfile-check] [--metadata-description ] [--metadata-user ] [--no-verify] [--path ] + [--preview] [-s ] [-t ] FLAGS -f, --force Forces a deployment to proceed if there are uncommited changes in its Git @@ -1122,8 +1024,6 @@ FLAGS name. --env-file= Path to an environment file to override existing environment variables for the deployment. - --force-client-sourcemap Client sourcemapping is avoided by default because it makes backend code - visible in the browser. Use this flag to force enabling it. --[no-]json-output Create a JSON file containing the deployment details in CI environments. Defaults to true, use `--no-json-output` to disable. --[no-]lockfile-check Checks that there is exactly one valid lockfile in the project. Defaults to @@ -1147,17 +1047,14 @@ Runs Hydrogen storefront in an Oxygen worker for development. ``` USAGE - $ shopify hydrogen dev [--codegen-config-path --codegen] [--customer-account-push] [--debug] - [--disable-deps-optimizer] [--disable-version-check] [--disable-virtual-routes] [--entry ] [--env | - --env-branch ] [--env-file ] [--host] [--inspector-port ] [--path ] [--port ] - [--verbose] + $ shopify hydrogen dev [--codegen-config-path --codegen] [--debug] [--disable-deps-optimizer] + [--disable-version-check] [--disable-virtual-routes] [--entry ] [--env | --env-branch ] + [--env-file ] [--host] [--inspector-port ] [--path ] [--port ] [--verbose] FLAGS --codegen Automatically generates GraphQL types for your project’s Storefront API queries. --codegen-config-path= Specifies a path to a codegen configuration file. Defaults to `/codegen.ts` if this file exists. - --customer-account-push Use tunneling for local development and push the tunneling domain to admin. Required to - use Customer Account API's OAuth flow --debug Enables inspector connections to the server with a debugger such as Visual Studio Code or Chrome DevTools. --disable-deps-optimizer Disable adding dependencies to Vite's `ssr.optimizeDeps.include` automatically @@ -1852,7 +1749,7 @@ FLAGS -s, --store= Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com). --no-color Disable color output. - --password= Password generated from the Theme Access app or an Admin API token. + --password= Password generated from the Theme Access app. --path= The path where you want to run the command. Defaults to the current working directory. --store-password= The password for storefronts with password protection. --url= [default: /] The url to be used as context @@ -1885,7 +1782,7 @@ FLAGS (example.myshopify.com, https://example.myshopify.com). -t, --theme=... Theme ID or name of the remote theme. --no-color Disable color output. - --password= Password generated from the Theme Access app or an Admin API token. + --password= Password generated from the Theme Access app. --path= The path where you want to run the command. Defaults to the current working directory. --verbose Increase the verbosity of the output. @@ -1907,15 +1804,12 @@ Uploads the current theme as a development theme to the connected store, then pr ``` USAGE - $ shopify theme dev [-a] [-e ...] [--error-overlay silent|default] [--host ] [-x ...] - [--live-reload hot-reload|full-page|off] [--no-color] [-n] [--notify ] [-o ...] [--open] [--password + $ shopify theme dev [-e ...] [--error-overlay silent|default] [--host ] [-x ...] [--listing + ] [--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 - -a, --allow-live - Allow development on a live theme. - -e, --environment=... The environment to apply to the current command. @@ -1946,6 +1840,10 @@ FLAGS --host= Set which network interface the web server listens on. The default value is 127.0.0.1. + --listing= + The listing preset to use for multi-preset themes. Applies preset files from listings/[preset-name] + directory. + --live-reload=