Merge branch 'main' into auto-update-graphql-deps

Author: gonzaloriestra

.changeset/curvy-kangaroos-flow.md

@@ -0,0 +1,6 @@
+---
+'@shopify/cli-kit': patch
+'@shopify/theme': patch
+---
+
+Improve mechanism that adds `.shopify` to `.gitignore` to avoid duplicate entries

.changeset/giant-crews-act.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix the local dev proxy for `/checkouts` and `/accounts/logout` to avoid 401 and 403 errors.

.changeset/purple-cougars-double.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Update `shopify theme push -x` documentation (it uploads, doesn't download)

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

@@ -19,7 +19,7 @@ export interface themepush {
   '-e, --environment <value>'?: string
 
   /**
-   * Skip downloading the specified files (Multiple flags allowed).
+   * Skip uploading the specified files (Multiple flags allowed).
    * @environment SHOPIFY_FLAG_IGNORE
    */
   '-x, --ignore <value>'?: string

docs-shopify.dev/generated/generated_docs_data.json

@@ -6350,12 +6350,12 @@
                 "syntaxKind": "PropertySignature",
                 "name": "-x, --ignore <value>",
                 "value": "string",
-                "description": "Skip downloading the specified files (Multiple flags allowed).",
+                "description": "Skip uploading the specified files (Multiple flags allowed).",
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_FLAG_IGNORE"
               }
             ],
-            "value": "export interface themepush {\n  /**\n   * Allow push to a live theme.\n   * @environment SHOPIFY_FLAG_ALLOW_LIVE\n   */\n  '-a, --allow-live'?: ''\n\n  /**\n   * Push theme files from your remote development theme.\n   * @environment SHOPIFY_FLAG_DEVELOPMENT\n   */\n  '-d, --development'?: ''\n\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Skip downloading the specified files (Multiple flags allowed).\n   * @environment SHOPIFY_FLAG_IGNORE\n   */\n  '-x, --ignore <value>'?: string\n\n  /**\n   * Output the result as JSON.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\n\n  /**\n   * Push theme files from your remote live theme.\n   * @environment SHOPIFY_FLAG_LIVE\n   */\n  '-l, --live'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Prevent deleting remote files that don't exist locally.\n   * @environment SHOPIFY_FLAG_NODELETE\n   */\n  '-n, --nodelete'?: ''\n\n  /**\n   * Push only the specified files (Multiple flags allowed).\n   * @environment SHOPIFY_FLAG_ONLY\n   */\n  '-o, --only <value>'?: string\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   * Publish as the live theme after uploading.\n   * @environment SHOPIFY_FLAG_PUBLISH\n   */\n  '-p, --publish'?: ''\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   * Require theme check to pass without errors before pushing. Warnings are allowed.\n   * @environment SHOPIFY_FLAG_STRICT_PUSH\n   */\n  '--strict'?: ''\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   * Create a new unpublished theme and push to it.\n   * @environment SHOPIFY_FLAG_UNPUBLISHED\n   */\n  '-u, --unpublished'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
+            "value": "export interface themepush {\n  /**\n   * Allow push to a live theme.\n   * @environment SHOPIFY_FLAG_ALLOW_LIVE\n   */\n  '-a, --allow-live'?: ''\n\n  /**\n   * Push theme files from your remote development theme.\n   * @environment SHOPIFY_FLAG_DEVELOPMENT\n   */\n  '-d, --development'?: ''\n\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Skip uploading the specified files (Multiple flags allowed).\n   * @environment SHOPIFY_FLAG_IGNORE\n   */\n  '-x, --ignore <value>'?: string\n\n  /**\n   * Output the result as JSON.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\n\n  /**\n   * Push theme files from your remote live theme.\n   * @environment SHOPIFY_FLAG_LIVE\n   */\n  '-l, --live'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Prevent deleting remote files that don't exist locally.\n   * @environment SHOPIFY_FLAG_NODELETE\n   */\n  '-n, --nodelete'?: ''\n\n  /**\n   * Push only the specified files (Multiple flags allowed).\n   * @environment SHOPIFY_FLAG_ONLY\n   */\n  '-o, --only <value>'?: string\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   * Publish as the live theme after uploading.\n   * @environment SHOPIFY_FLAG_PUBLISH\n   */\n  '-p, --publish'?: ''\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   * Require theme check to pass without errors before pushing. Warnings are allowed.\n   * @environment SHOPIFY_FLAG_STRICT_PUSH\n   */\n  '--strict'?: ''\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   * Create a new unpublished theme and push to it.\n   * @environment SHOPIFY_FLAG_UNPUBLISHED\n   */\n  '-u, --unpublished'?: ''\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
           }
         }
       }

package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@bugsnag/source-maps": "^2.3.1",
-    "@changesets/cli": "2.26.2",
+    "@changesets/cli": "2.27.12",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/near-operation-file-preset": "3.0.0",
     "@nx/eslint-plugin": "19.8.14",
@@ -55,7 +55,7 @@
     "bugsnag-build-reporter": "^2.0.0",
     "commander": "^9.4.0",
     "cross-env": "^7.0.3",
-    "esbuild": "0.24.0",
+    "esbuild": "0.24.2",
     "eslint": "^8.48.0",
     "execa": "^7.2.0",
     "fast-glob": "3.3.3",
@@ -102,7 +102,8 @@
     "whatwg-url": "14.0.0",
     "supports-hyperlinks": "3.1.0",
     "@shopify/cli-hydrogen>@shopify/cli-kit": "link:./packages/cli-kit",
-    "@shopify/cli-hydrogen>@shopify/plugin-cloudflare": "link:./packages/plugin-cloudflare"
+    "@shopify/cli-hydrogen>@shopify/plugin-cloudflare": "link:./packages/plugin-cloudflare",
+    "nanoid": "3.3.8"
   },
   "knip": {
     "$schema": "https://unpkg.com/knip@5/schema.json",

packages/app/package.json

@@ -63,7 +63,7 @@
     "camelcase-keys": "9.1.3",
     "chokidar": "3.6.0",
     "diff": "5.2.0",
-    "esbuild": "0.24.0",
+    "esbuild": "0.24.2",
     "express": "4.21.2",
     "graphql-request": "5.2.0",
     "h3": "0.7.21",

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

@@ -25,6 +25,7 @@ import {getCachedAppInfo, setCachedAppInfo} from './local-storage.js'
 import {canEnablePreviewMode} from './extensions/common.js'
 import {fetchAppRemoteConfiguration} from './app/select-app.js'
 import {patchAppConfigurationFile} from './app/patch-app-configuration-file.js'
+import {DevSessionStatusManager} from './dev/processes/dev-session-status-manager.js'
 import {DeveloperPlatformClient} from '../utilities/developer-platform-client.js'
 import {Web, isCurrentAppSchema, getAppScopesArray, AppLinkedInterface} from '../models/app/app.js'
 import {Organization, OrganizationApp, OrganizationStore} from '../models/organization.js'
@@ -71,9 +72,9 @@ export interface DevOptions {
 export async function dev(commandOptions: DevOptions) {
   const config = await prepareForDev(commandOptions)
   await actionsBeforeSettingUpDevProcesses(config)
-  const {processes, graphiqlUrl, previewUrl} = await setupDevProcesses(config)
+  const {processes, graphiqlUrl, previewUrl, devSessionStatusManager} = await setupDevProcesses(config)
   await actionsBeforeLaunchingDevProcesses(config)
-  await launchDevProcesses({processes, previewUrl, graphiqlUrl, config})
+  await launchDevProcesses({processes, previewUrl, graphiqlUrl, config, devSessionStatusManager})
 }
 
 async function prepareForDev(commandOptions: DevOptions): Promise<DevConfig> {
@@ -117,10 +118,10 @@ async function prepareForDev(commandOptions: DevOptions): Promise<DevConfig> {
     await installAppDependencies(app)
   }
 
-  const graphiqlPort = commandOptions.graphiqlPort || (await getAvailableTCPPort(ports.graphiql))
+  const graphiqlPort = commandOptions.graphiqlPort ?? (await getAvailableTCPPort(ports.graphiql))
   const {graphiqlKey} = commandOptions
 
-  if (graphiqlPort !== (commandOptions.graphiqlPort || ports.graphiql)) {
+  if (graphiqlPort !== (commandOptions.graphiqlPort ?? ports.graphiql)) {
     renderWarning({
       headline: [
         'A random port will be used for GraphiQL because',
@@ -224,7 +225,7 @@ export async function warnIfScopesDifferBeforeDev({
           scopesMessage(getAppScopesArray(localApp.configuration)),
           '\n',
           'Scopes in Partner Dashboard:',
-          scopesMessage(remoteAccess?.scopes?.split(',') || []),
+          scopesMessage(remoteAccess?.scopes?.split(',') ?? []),
         ],
         nextSteps,
       })
@@ -301,7 +302,7 @@ async function setupNetworkingOptions(
       ...frontEndOptions,
       tunnelClient,
     }),
-    getBackendPort() || backendConfig?.configuration.port || getAvailableTCPPort(),
+    getBackendPort() ?? backendConfig?.configuration.port ?? getAvailableTCPPort(),
     getURLs(remoteAppConfig),
   ])
   const proxyUrl = usingLocalhost ? `${frontendUrl}:${proxyPort}` : frontendUrl
@@ -330,11 +331,13 @@ async function launchDevProcesses({
   previewUrl,
   graphiqlUrl,
   config,
+  devSessionStatusManager,
 }: {
   processes: DevProcesses
   previewUrl: string
   graphiqlUrl: string | undefined
   config: DevConfig
+  devSessionStatusManager: DevSessionStatusManager
 }) {
   const abortController = new AbortController()
   const processesForTaskRunner: OutputProcess[] = processes.map((process) => {
@@ -375,6 +378,7 @@ async function launchDevProcesses({
     abortController,
     developerPreview: developerPreviewController(apiKey, developerPlatformClient),
     shopFqdn: config.storeFqdn,
+    devSessionStatusManager,
   })
 }
 

packages/app/src/cli/services/dev/processes/dev-session-status-manager.test.ts

@@ -1,7 +1,9 @@
-import {devSessionStatusManager, DevSessionStatus} from './dev-session-status-manager.js'
+import {DevSessionStatus, DevSessionStatusManager} from './dev-session-status-manager.js'
 import {describe, test, expect, beforeEach, vi} from 'vitest'
 
 describe('DevSessionStatusManager', () => {
+  const devSessionStatusManager = new DevSessionStatusManager()
+
   beforeEach(() => {
     devSessionStatusManager.removeAllListeners()
     devSessionStatusManager.reset()

packages/app/src/cli/services/dev/processes/dev-session-status-manager.ts

@@ -4,12 +4,19 @@ import {EventEmitter} from 'events'
 export interface DevSessionStatus {
   isReady: boolean
   previewURL?: string
+  graphiqlURL?: string
 }
 
-class DevSessionStatusManager extends EventEmitter {
+export class DevSessionStatusManager extends EventEmitter {
   private currentStatus: DevSessionStatus = {
     isReady: false,
     previewURL: undefined,
+    graphiqlURL: undefined,
+  }
+
+  constructor(defaultStatus?: DevSessionStatus) {
+    super()
+    if (defaultStatus) this.currentStatus = defaultStatus
   }
 
   updateStatus(status: Partial<DevSessionStatus>) {
@@ -29,8 +36,7 @@ class DevSessionStatusManager extends EventEmitter {
     this.currentStatus = {
       isReady: false,
       previewURL: undefined,
+      graphiqlURL: undefined,
     }
   }
 }
-
-export const devSessionStatusManager = new DevSessionStatusManager()