From 6a9b2445231b2bd61df66a3a201c8e3667941acc Mon Sep 17 00:00:00 2001
From: Josh Faigan <josh.faigan@shopify.com>
Date: Fri, 1 Nov 2024 10:48:06 -0400
Subject: [PATCH] Add shortcut keys to theme dev

This commit adds shortcut keys to the theme dev CLI service. The keys are as follows:
e - open theme editor
t - preview your theme locally
p - preview your theme (share)
---
 packages/theme/src/cli/services/dev.ts | 36 +++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/theme/src/cli/services/dev.ts b/packages/theme/src/cli/services/dev.ts
index acfd9333be..f4335778c6 100644
--- a/packages/theme/src/cli/services/dev.ts
+++ b/packages/theme/src/cli/services/dev.ts
@@ -12,6 +12,7 @@ import {Theme} from '@shopify/cli-kit/node/themes/types'
 import {checkPortAvailability, getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {openURL} from '@shopify/cli-kit/node/system'
+import readline from 'readline'
 
 const DEFAULT_HOST = '127.0.0.1'
 const DEFAULT_PORT = '9292'
@@ -104,6 +105,33 @@ export async function dev(options: DevOptions) {
       renderWarning({headline: 'Failed to open the development server.', body: error.stack ?? error.message})
     })
   }
+
+  readline.emitKeypressEvents(process.stdin)
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(true)
+  }
+
+  process.stdin.on('keypress', (_str, key) => {
+    if (key.ctrl && key.name === 'c') {
+      process.exit()
+    } else if (key.name === 't') {
+      openURL(`http://${host}:${port}`).catch((error) => {
+        renderWarning({headline: 'Failed to open localhost.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'e') {
+      openURL(`https://${options.store}/admin/themes/${options.theme.id}/editor`).catch((error) => {
+        renderWarning({headline: 'Failed to open theme editor.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'p') {
+      openURL(`https://${options.store}/?preview_theme_id=${options.theme.id}`).catch((error) => {
+        renderWarning({headline: 'Failed to open theme preview.', body: error.stack ?? error.message})
+      })
+    } else if (key.name === 'g') {
+      openURL(`http://${host}:${port}/gift_cards/${options.store}/preview`).catch((error) => {
+        renderWarning({headline: 'Failed to open gift card preview.', body: error.stack ?? error.message})
+      })
+    }
+  })
 }
 
 export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST, port = DEFAULT_PORT) {
@@ -113,7 +141,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
     body: [
       {
         list: {
-          title: {bold: 'Preview your theme'},
+          title: {bold: 'Preview your theme (t)'},
           items: [
             {
               link: {
@@ -128,7 +156,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
       [
         {
           link: {
-            label: 'Preview your gift cards',
+            label: 'Preview your gift cards (g)',
             url: `${localUrl}/gift_cards/[store_id]/preview`,
           },
         },
@@ -136,7 +164,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
       [
         {
           link: {
-            label: 'Customize your theme at the theme editor',
+            label: 'Customize your theme at the theme editor (e)',
             url: `${remoteUrl}/admin/themes/${themeId}/editor`,
           },
         },
@@ -144,7 +172,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST,
       [
         {
           link: {
-            label: 'Share your theme preview',
+            label: 'Share your theme preview (p)',
             url: `${remoteUrl}/?preview_theme_id=${themeId}`,
           },
         },