Add theme profile command

.changeset/curvy-moons-judge.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': minor
+---
+
+Add `theme profile` command which allows users to get a performance profile for Liquid rendering on a given page

docs-shopify.dev/commands/examples/theme-profile.example.sh

@@ -0,0 +1 @@
+theme profile --url /products/classic-leather-jacket

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

@@ -0,0 +1,50 @@
+// This is an autogenerated file. Don't edit this file manually.
+export interface themeprofile {
+  /**
+   * Output the result as JSON.
+   * @environment SHOPIFY_FLAG_JSON
+   */
+  '-j, --json'?: ''
+
+  /**
+   * Disable color output.
+   * @environment SHOPIFY_FLAG_NO_COLOR
+   */
+  '--no-color'?: ''
+
+  /**
+   * Password generated from the Theme Access app.
+   * @environment SHOPIFY_CLI_THEME_TOKEN
+   */
+  '--password <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
+   */
+  '-s, --store <value>'?: string
+
+  /**
+   * The password for storefronts with password protection.
+   * @environment SHOPIFY_FLAG_STORE_PASSWORD
+   */
+  '--store-password <value>'?: string
+
+  /**
+   * Theme ID or name of the remote theme.
+   * @environment SHOPIFY_FLAG_THEME_ID
+   */
+  '-t, --theme <value>'?: string
+
+  /**
+   * The url to be used as context
+   * @environment SHOPIFY_FLAG_URL
+   */
+  '--url <value>'?: string
+
+  /**
+   * Increase the verbosity of the output.
+   * @environment SHOPIFY_FLAG_VERBOSE
+   */
+  '--verbose'?: ''
+}

docs-shopify.dev/commands/theme-profile.doc.ts

@@ -0,0 +1,36 @@
+// This is an autogenerated file. Don't edit this file manually.
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'theme profile',
+  description: `Profile the Shopify Liquid on a given page.
+
+  This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given page.`,
+  overviewPreviewDescription: `Profile the Liquid rendering of a theme page.`,
+  type: 'command',
+  isVisualComponent: false,
+  defaultExample: {
+    codeblock: {
+      tabs: [
+        {
+          title: 'theme profile',
+          code: './examples/theme-profile.example.sh',
+          language: 'bash',
+        },
+      ],
+      title: 'theme profile',
+    },
+  },
+  definitions: [
+  {
+    title: 'Flags',
+    description: 'The following flags are available for the `theme profile` command:',
+    type: 'themeprofile',
+  },
+  ],
+  category: 'theme',
+  related: [
+  ],
+}
+
+export default data

docs-shopify.dev/generated/generated_docs_data.json

@@ -5806,6 +5806,116 @@
     "category": "theme",
     "related": []
   },
+  {
+    "name": "theme profile",
+    "description": "Profile the Shopify Liquid on a given page.\n\n  This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given page.",
+    "overviewPreviewDescription": "Profile the Liquid rendering of a theme page.",
+    "type": "command",
+    "isVisualComponent": false,
+    "defaultExample": {
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "theme profile",
+            "code": "theme profile --url /products/classic-leather-jacket",
+            "language": "bash"
+          }
+        ],
+        "title": "theme profile"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Flags",
+        "description": "The following flags are available for the `theme profile` command:",
+        "type": "themeprofile",
+        "typeDefinitions": {
+          "themeprofile": {
+            "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+            "name": "themeprofile",
+            "description": "",
+            "members": [
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--no-color",
+                "value": "\"\"",
+                "description": "Disable color output.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_NO_COLOR"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--password <value>",
+                "value": "string",
+                "description": "Password generated from the Theme Access app.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_CLI_THEME_TOKEN"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--store-password <value>",
+                "value": "string",
+                "description": "The password for storefronts with password protection.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_STORE_PASSWORD"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--url <value>",
+                "value": "string",
+                "description": "The url to be used as context",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_URL"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "--verbose",
+                "value": "\"\"",
+                "description": "Increase the verbosity of the output.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_VERBOSE"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "-j, --json",
+                "value": "\"\"",
+                "description": "Output the result as JSON.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_JSON"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "-s, --store <value>",
+                "value": "string",
+                "description": "Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_STORE"
+              },
+              {
+                "filePath": "docs-shopify.dev/commands/interfaces/theme-profile.interface.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "-t, --theme <value>",
+                "value": "string",
+                "description": "Theme ID or name of the remote theme.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_THEME_ID"
+              }
+            ],
+            "value": "export interface themeprofile {\n  /**\n   * Output the result as JSON.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\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   * Theme ID or name of the remote theme.\n   * @environment SHOPIFY_FLAG_THEME_ID\n   */\n  '-t, --theme <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}"
+          }
+        }
+      }
+    ],
+    "category": "theme",
+    "related": []
+  },
   {
     "name": "theme publish",
     "description": "Publishes an unpublished theme from your theme library.\n\nIf no theme ID is specified, then you're prompted to select the theme that you want to publish from the list of themes in your store.\n\nYou can run this command only in a directory that matches the [default Shopify theme folder structure](/docs/themes/tools/cli#directory-structure).\n\nIf you want to publish your local theme, then you need to run `shopify theme push` first. You're asked to confirm that you want to publish the specified theme. You can skip this confirmation using the `--force` flag.",

package.json

@@ -193,7 +193,8 @@
         ],
         "project": "**/*.ts!",
         "ignoreDependencies": [
-          "@ast-grep/napi"
+          "@ast-grep/napi",
+          "speedscope"
         ],
         "vite": {
           "config": [

packages/cli/README.md

@@ -73,6 +73,7 @@
 * [`shopify theme metafields pull`](#shopify-theme-metafields-pull)
 * [`shopify theme open`](#shopify-theme-open)
 * [`shopify theme package`](#shopify-theme-package)
+* [`shopify theme profile --url /products/classic-leather-jacket`](#shopify-theme-profile---url-productsclassic-leather-jacket)
 * [`shopify theme publish`](#shopify-theme-publish)
 * [`shopify theme pull`](#shopify-theme-pull)
 * [`shopify theme push`](#shopify-theme-push)
@@ -2085,6 +2086,34 @@ DESCRIPTION
   (https://shopify.dev/docs/themes/architecture/config/settings-schema-json) file.
 ```
 
+## `shopify theme profile --url /products/classic-leather-jacket`
+
+Profile the Liquid rendering of a theme page.
+
+```
+USAGE
+  $ shopify theme profile --url /products/classic-leather-jacket
+
+FLAGS
+  -j, --json                    Output the result as JSON.
+  -s, --store=<value>           Store URL. It can be the store prefix (example) or the full myshopify.com URL
+                                (example.myshopify.com, https://example.myshopify.com).
+  -t, --theme=<value>           Theme ID or name of the remote theme.
+      --no-color                Disable color output.
+      --password=<value>        Password generated from the Theme Access app.
+      --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.
+
+DESCRIPTION
+  Profile the Liquid rendering of a theme page.
+
+  Profile the Shopify Liquid on a given page.
+
+  This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given
+  page.
+```
+
 ## `shopify theme publish`
 
 Set a remote theme as the live theme.

packages/cli/oclif.manifest.json

@@ -5826,6 +5826,97 @@
       "strict": true,
       "summary": "Package your theme into a .zip file, ready to upload to the Online Store."
     },
+    "theme:profile": {
+      "aliases": [
+      ],
+      "args": {
+      },
+      "customPluginName": "@shopify/theme",
+      "description": "Profile the Shopify Liquid on a given page.\n\n  This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given page.",
+      "descriptionWithMarkdown": "Profile the Shopify Liquid on a given page.\n\n  This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given page.",
+      "flags": {
+        "json": {
+          "allowNo": false,
+          "char": "j",
+          "description": "Output the result as JSON.",
+          "env": "SHOPIFY_FLAG_JSON",
+          "hidden": false,
+          "name": "json",
+          "type": "boolean"
+        },
+        "no-color": {
+          "allowNo": false,
+          "description": "Disable color output.",
+          "env": "SHOPIFY_FLAG_NO_COLOR",
+          "hidden": false,
+          "name": "no-color",
+          "type": "boolean"
+        },
+        "password": {
+          "description": "Password generated from the Theme Access app.",
+          "env": "SHOPIFY_CLI_THEME_TOKEN",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "password",
+          "type": "option"
+        },
+        "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).",
+          "env": "SHOPIFY_FLAG_STORE",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "store",
+          "type": "option"
+        },
+        "store-password": {
+          "description": "The password for storefronts with password protection.",
+          "env": "SHOPIFY_FLAG_STORE_PASSWORD",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "store-password",
+          "type": "option"
+        },
+        "theme": {
+          "char": "t",
+          "description": "Theme ID or name of the remote theme.",
+          "env": "SHOPIFY_FLAG_THEME_ID",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "theme",
+          "type": "option"
+        },
+        "url": {
+          "default": "/",
+          "description": "The url to be used as context",
+          "env": "SHOPIFY_FLAG_URL",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "name": "url",
+          "type": "option"
+        },
+        "verbose": {
+          "allowNo": false,
+          "description": "Increase the verbosity of the output.",
+          "env": "SHOPIFY_FLAG_VERBOSE",
+          "hidden": false,
+          "name": "verbose",
+          "type": "boolean"
+        }
+      },
+      "hasDynamicHelp": false,
+      "hiddenAliases": [
+      ],
+      "id": "theme:profile",
+      "pluginAlias": "@shopify/cli",
+      "pluginName": "@shopify/cli",
+      "pluginType": "core",
+      "strict": true,
+      "summary": "Profile the Liquid rendering of a theme page.",
+      "usage": [
+        "theme profile --url /products/classic-leather-jacket"
+      ]
+    },
     "theme:publish": {
       "aliases": [
       ],

packages/cli/package.json

@@ -102,6 +102,7 @@
   },
   "dependencies": {
     "@ast-grep/napi": "0.33.0",
+    "speedscope": "1.21.0",
     "esbuild": "0.24.0"
   },
   "devDependencies": {

packages/theme/package.json

@@ -47,6 +47,7 @@
     "@shopify/theme-language-server-node": "2.3.3",
     "chokidar": "3.6.0",
     "h3": "1.13.0",
+    "speedscope": "1.21.0",
     "yaml": "2.7.0"
   },
   "devDependencies": {