[Themes] - Switch the implementation of theme commands to run the TypeScript by default

.changeset/pretty-olives-promise.md

@@ -0,0 +1,7 @@
+---
+'@shopify/theme': minor
+'@shopify/app': minor
+'@shopify/cli': minor
+---
+
+Default to Typescript implementation for theme commands. Legacy implementation is stil available via the `--legacy` flag.

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

@@ -18,12 +18,6 @@ export interface themeconsole {
    */
   '--password <value>'?: string
 
-  /**
-   * Local port to serve authentication service.
-   * @environment SHOPIFY_FLAG_PORT
-   */
-  '--port <value>'?: string
-
   /**
    * 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/commands/interfaces/theme-dev.interface.ts

@@ -69,12 +69,6 @@ export interface themedev {
    */
   '--path <value>'?: string
 
-  /**
-   * Force polling to detect file changes.
-   * @environment SHOPIFY_FLAG_POLL
-   */
-  '--poll'?: ''
-
   /**
    * Local port to serve theme preview from.
    * @environment SHOPIFY_FLAG_PORT

docs-shopify.dev/generated/generated_docs_data.json

@@ -4582,15 +4582,6 @@
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_CLI_THEME_TOKEN"
               },
-              {
-                "filePath": "docs-shopify.dev/commands/interfaces/theme-console.interface.ts",
-                "syntaxKind": "PropertySignature",
-                "name": "--port <value>",
-                "value": "string",
-                "description": "Local port to serve authentication service.",
-                "isOptional": true,
-                "environmentValue": "SHOPIFY_FLAG_PORT"
-              },
               {
                 "filePath": "docs-shopify.dev/commands/interfaces/theme-console.interface.ts",
                 "syntaxKind": "PropertySignature",
@@ -4637,7 +4628,7 @@
                 "environmentValue": "SHOPIFY_FLAG_STORE"
               }
             ],
-            "value": "export interface themeconsole {\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Password generated from the Theme Access app.\n   * @environment SHOPIFY_CLI_THEME_TOKEN\n   */\n  '--password <value>'?: string\n\n  /**\n   * Local port to serve authentication service.\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   * The url to be used as context\n   * @environment SHOPIFY_FLAG_URL\n   */\n  '--url <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
+            "value": "export interface themeconsole {\n  /**\n   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Password generated from the Theme Access app.\n   * @environment SHOPIFY_CLI_THEME_TOKEN\n   */\n  '--password <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   * The url to be used as context\n   * @environment SHOPIFY_FLAG_URL\n   */\n  '--url <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
           }
         }
       }
@@ -4856,15 +4847,6 @@
                 "isOptional": true,
                 "environmentValue": "SHOPIFY_FLAG_PATH"
               },
-              {
-                "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts",
-                "syntaxKind": "PropertySignature",
-                "name": "--poll",
-                "value": "\"\"",
-                "description": "Force polling to detect file changes.",
-                "isOptional": true,
-                "environmentValue": "SHOPIFY_FLAG_POLL"
-              },
               {
                 "filePath": "docs-shopify.dev/commands/interfaces/theme-dev.interface.ts",
                 "syntaxKind": "PropertySignature",
@@ -4956,7 +4938,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   * Force polling to detect file changes.\n   * @environment SHOPIFY_FLAG_POLL\n   */\n  '--poll'?: ''\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   * 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}"
           }
         }
       }

docs-shopify.dev/generated/generated_static_pages.json

@@ -43,37 +43,6 @@
           ]
         }
       },
-      {
-        "type": "Generic",
-        "anchorLink": "requirements-themes",
-        "title": "Requirements for themes",
-        "sectionContent": "\nTo work with themes, your system must meet the following additional requirements:\n- [Ruby](https://www.ruby-lang.org/en/) version 2.7.5 or higher\n\n> Note: Theme requirements are automatically installed on macOS when you use Homebrew to install Shopify CLI.\n",
-        "codeblock": {
-          "title": "Installation requirements for themes",
-          "tabs": [
-            {
-              "title": "macOS: brew",
-              "code": "brew install ruby\n",
-              "language": "bash"
-            },
-            {
-              "title": "Windows",
-              "code": "Install Ruby+Devkit 3.0 using https://rubyinstaller.org/downloads/\n\nSelect the MSYS2 component and the MSYS2 base installation option\n",
-              "language": "bash"
-            },
-            {
-              "title": "Linux: apt",
-              "code": "\nsudo apt update && sudo apt upgrade\n\nsudo apt install curl gcc g++ make\n\nsudo apt install ruby-full\n\nsudo apt install ruby-dev\n# Ruby development environment\n\nsudo apt install git\n",
-              "language": "bash"
-            },
-            {
-              "title": "Linux: yum",
-              "code": "sudo yum install curl\n\nsudo yum group install \"Development Tools\"\n# Includes GCC, g++, and Make\n\nsudo yum install ruby\nsudo yum install ruby-devel\n# Ruby development environment\n\nsudo yum install git\n",
-              "language": "bash"
-            }
-          ]
-        }
-      },
       {
         "type": "Generic",
         "anchorLink": "commands",

docs-shopify.dev/static/cli.doc.ts

@@ -50,42 +50,6 @@ const data: LandingTemplateSchema = {
         ],
       },
     },
-    {
-      type: 'Generic',
-      anchorLink: 'requirements-themes',
-      title: 'Requirements for themes',
-      sectionContent: `
-To work with themes, your system must meet the following additional requirements:
-- [Ruby](https://www.ruby-lang.org/en/) version 2.7.5 or higher
-
-> Note: Theme requirements are automatically installed on macOS when you use Homebrew to install Shopify CLI.
-`,
-      codeblock: {
-        title: 'Installation requirements for themes',
-        tabs: [
-          {
-            title: 'macOS: brew',
-            code: 'examples/requirements.brew.example.sh',
-            language: 'bash',
-          },
-          {
-            title: 'Windows',
-            code: 'examples/requirements.win.example.sh',
-            language: 'bash',
-          },
-          {
-            title: 'Linux: apt',
-            code: 'examples/requirements.apt.example.sh',
-            language: 'bash',
-          },
-          {
-            title: 'Linux: yum',
-            code: 'examples/requirements.yum.example.sh',
-            language: 'bash',
-          },
-        ],
-      },
-    },
     {
       type: 'Generic',
       anchorLink: 'commands',

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

@@ -131,11 +131,10 @@ If you're using the PHP or Ruby app template, then you need to complete the foll
         'Key used to authenticate GraphiQL requests. Should be specified if exposing GraphiQL on a publicly accessible URL. By default, no key is required.',
       env: 'SHOPIFY_FLAG_GRAPHIQL_KEY',
     }),
-    'dev-preview': Flags.boolean({
+    legacy: Flags.boolean({
       hidden: true,
-      description:
-        'Enables the developer preview for the upcoming `app dev` implementation for building theme app extensions.',
-      env: 'SHOPIFY_FLAG_BETA',
+      description: 'Use the legacy Ruby implementation for managing theme app extensions.',
+      env: 'SHOPIFY_FLAG_LEGACY',
     }),
   }
 
@@ -184,7 +183,7 @@ If you're using the PHP or Ruby app template, then you need to complete the foll
       notify: flags.notify,
       graphiqlPort: flags['graphiql-port'],
       graphiqlKey: flags['graphiql-key'],
-      devPreview: flags['dev-preview'],
+      devPreview: !flags.legacy,
     }
 
     await dev(devOptions)

packages/app/src/cli/commands/app/logs.ts

@@ -37,7 +37,7 @@ export default class Logs extends Command {
     'no-tunnel': Dev.flags['no-tunnel'],
     'graphiql-port': Dev.flags['graphiql-port'],
     'graphiql-key': Dev.flags['graphiql-key'],
-    'dev-preview': Dev.flags['dev-preview'],
+    stable: Dev.flags.legacy,
     source: Flags.string({
       description: 'Filters output to the specified log source.',
       env: 'SHOPIFY_FLAG_SOURCE',

packages/cli/README.md

@@ -1710,7 +1710,6 @@ FLAGS
                                 (example.myshopify.com, https://example.myshopify.com).
       --no-color                Disable color output.
       --password=<value>        Password generated from the Theme Access app.
-      --port=<value>            Local port to serve authentication service.
       --store-password=<value>  The password for storefronts with password protection.
       --url=<value>             [default: /] The url to be used as context
       --verbose                 Increase the verbosity of the output.
@@ -1764,8 +1763,8 @@ 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>] [--poll] [--port
-    <value>] [-s <value>] [--store-password <value>] [-t <value>] [--theme-editor-sync] [--verbose]
+    [--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]
 
 FLAGS
   -e, --environment=<value>
@@ -1814,9 +1813,6 @@ FLAGS
   --path=<value>
       The path to your theme directory.
 
-  --poll
-      Force polling to detect file changes.
-
   --port=<value>
       Local port to serve theme preview from.