Open theme profile in Speedscope by default

packages/cli/README.md

@@ -2065,9 +2065,10 @@ Profile the Liquid rendering of a theme page.
 
 ```
 USAGE
-  $ shopify theme profile -u <value> [--no-color] [--verbose]
+  $ shopify theme profile -u <value> [-j] [--no-color] [--verbose]
 
 FLAGS
+  -j, --json         Return profiling data as JSON.
   -u, --url=<value>  (required) URL to the theme page to profile.
       --no-color     Disable color output.
       --verbose      Increase the verbosity of the output.

packages/cli/oclif.manifest.json

@@ -5755,6 +5755,14 @@
       "description": "TODO",
       "descriptionWithMarkdown": "TODO",
       "flags": {
+        "json": {
+          "allowNo": false,
+          "char": "j",
+          "description": "Return profiling data as JSON.",
+          "env": "SHOPIFY_FLAG_JSON",
+          "name": "json",
+          "type": "boolean"
+        },
         "no-color": {
           "allowNo": false,
           "description": "Disable color output.",

packages/theme/package.json

@@ -47,6 +47,7 @@
     "@shopify/theme-language-server-node": "2.3.2",
     "chokidar": "3.5.3",
     "h3": "1.12.0",
+    "speedscope": "^1.21.0",
     "yaml": "2.3.2"
   },
   "devDependencies": {

packages/theme/src/cli/commands/theme/profile.ts

@@ -4,7 +4,7 @@ import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 
 export default class Profile extends ThemeCommand {
-  static summary = 'Profile the Liquid rendering of a theme page, and return JSON profiling data.'
+  static summary = 'Profile the Liquid rendering of a theme page.'
 
   static descriptionWithMarkdown = `TODO`
 
@@ -18,11 +18,16 @@ export default class Profile extends ThemeCommand {
       env: 'SHOPIFY_FLAG_URL',
       required: true,
     }),
+    json: Flags.boolean({
+      char: 'j',
+      description: 'Return profiling data as JSON.',
+      env: 'SHOPIFY_FLAG_JSON',
+    }),
   }
 
   async run(): Promise<void> {
     const {flags} = await this.parse(Profile)
 
-    await profile(flags.url)
+    await profile(flags.url, flags.json)
   }
 }

packages/theme/src/cli/services/profile.ts

@@ -1,9 +1,45 @@
-export async function profile(storeUrl: string) {
+import * as fs from 'fs/promises'
+import * as path from 'path'
+import * as os from 'os'
+import {fileURLToPath} from 'url'
+import {openURL} from '@shopify/cli-kit/node/system'
+
+export async function profile(storeUrl: string, asJson: boolean) {
   // Fetch the profiling from the Store
   const url = new URL(storeUrl)
   url.searchParams.append('profile_liquid', '1')
   const response = await fetch(url)
   const profileJson = await response.text()
-  // use process.stdout.write to print the JSON
-  process.stdout.write(profileJson)
+
+  if (asJson) {
+    // Print the JSON
+    process.stdout.write(profileJson)
+  } else {
+    await openProfile(profileJson)
+  }
+}
+
+async function openProfile(profileJson: string) {
+  // Adapted from https://github.com/jlfwong/speedscope/blob/146477a8508a6d2da697cb0ea0a426ba81b3e8dc/bin/cli.js#L63
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = path.dirname(__filename)
+  let urlToOpen = 'file://' + path.resolve(__dirname, '../../../node_modules/speedscope/dist/release/index.html')
+  const filename = 'liquid-profile'
+
+  const sourceBase64 = Buffer.from(profileJson).toString('base64')
+  const jsSource = `speedscope.loadFileFromBase64(${JSON.stringify(filename)}, ${JSON.stringify(sourceBase64)})`
+
+  const filePrefix = `speedscope-${+new Date()}-${process.pid}`
+  const jsPath = path.join(os.tmpdir(), `${filePrefix}.js`)
+  await fs.writeFile(jsPath, jsSource)
+  urlToOpen += `#localProfilePath=${jsPath}`
+
+  // For some silly reason, the OS X open command ignores any query parameters or hash parameters
+  // passed as part of the URL. To get around this weird issue, we'll create a local HTML file
+  // that just redirects.
+  const htmlPath = path.join(os.tmpdir(), `${filePrefix}.html`)
+  await fs.writeFile(htmlPath, `<script>window.location=${JSON.stringify(urlToOpen)}</script>`)
+
+  urlToOpen = `file://${htmlPath}`
+  await openURL(urlToOpen)
 }