Merge pull request #5109 from Shopify/theme-profile

Add `theme profile` command
Shopify · Jan 17, 2025 · a7e2043 · a7e2043
2 parents a1015e7 + 88d83f7
commit a7e2043
Show file tree

Hide file tree

Showing 33 changed files with 1,655 additions and 24 deletions.
diff --git a/.changeset/curvy-moons-judge.md b/.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
diff --git a/docs-shopify.dev/commands/examples/theme-profile.example.sh b/docs-shopify.dev/commands/examples/theme-profile.example.sh
@@ -0,0 +1,3 @@
+theme profile
+
+theme profile --url /products/classic-leather-jacket
diff --git a/docs-shopify.dev/commands/interfaces/theme-profile.interface.ts b/docs-shopify.dev/commands/interfaces/theme-profile.interface.ts
@@ -0,0 +1,56 @@
+// This is an autogenerated file. Don't edit this file manually.
+export interface themeprofile {
+  /**
+   * The environment to apply to the current command.
+   * @environment SHOPIFY_FLAG_ENVIRONMENT
+   */
+  '-e, --environment <value>'?: string
+
+  /**
+   * 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'?: ''
+}
diff --git a/docs-shopify.dev/commands/theme-profile.doc.ts b/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
diff --git a/docs-shopify.dev/generated/generated_docs_data.json b/docs-shopify.dev/generated/generated_docs_data.json
@@ -5806,6 +5806,125 @@
     "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\n\ntheme 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": "-e, --environment <value>",
+                "value": "string",
+                "description": "The environment to apply to the current command.",
+                "isOptional": true,
+                "environmentValue": "SHOPIFY_FLAG_ENVIRONMENT"
+              },
+              {
+                "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   * The environment to apply to the current command.\n   * @environment SHOPIFY_FLAG_ENVIRONMENT\n   */\n  '-e, --environment <value>'?: string\n\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.",

diff --git a/package.json b/package.json
@@ -124,6 +124,7 @@
     "ignoreDependencies": [
       "eslint-plugin-react",
       "eslint-plugin-react-hooks",
+      "@shopify/cli",
       "@shopify/cli-hydrogen",
       "@shopify/theme-check-node",
       "@shopify/theme-check-docs-updater"

diff --git a/packages/cli/README.md b/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`](#shopify-theme-profile)
 * [`shopify theme publish`](#shopify-theme-publish)
 * [`shopify theme pull`](#shopify-theme-pull)
 * [`shopify theme push`](#shopify-theme-push)
@@ -2085,6 +2086,36 @@ DESCRIPTION
   (https://shopify.dev/docs/themes/architecture/config/settings-schema-json) file.
 ```
 
+## `shopify theme profile`
+
+Profile the Liquid rendering of a theme page.
+
+```
+USAGE
+  $ shopify theme profile
+  $ shopify theme profile --url /products/classic-leather-jacket
+
+FLAGS
+  -e, --environment=<value>     The environment to apply to the current command.
+  -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.

diff --git a/packages/cli/bin/bundle.js b/packages/cli/bin/bundle.js
@@ -71,6 +71,10 @@ esBuild({
           from: ['../app/assets/**/*'],
           to: ['./dist/assets'],
         },
+        {
+          from: ['../theme/assets/**/*'],
+          to: ['./dist/assets'],
+        },
         {
           from: ['../app/templates/**/*'],
           to: ['./dist/templates'],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		theme profile

		theme profile --url /products/classic-leather-jacket