Create a slight delay in on shortcut keys so you can't spam them and open multiple tabs.

Author: EvilGenius13

.changeset/ninety-shirts-guess.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Create a slight delay when keypressing theme dev shortcut keys to stop accidental copy pasting and opening up a ton of tabs

packages/theme/src/cli/services/dev.test.ts

@@ -1,5 +1,5 @@
-import {openURLSafely, renderLinks} from './dev.js'
-import {describe, expect, test, vi} from 'vitest'
+import {openURLSafely, renderLinks, createKeypressHandler} from './dev.js'
+import {describe, expect, test, vi, beforeEach, afterEach} from 'vitest'
 import {buildTheme} from '@shopify/cli-kit/node/themes/factories'
 import {DEVELOPMENT_THEME_ROLE} from '@shopify/cli-kit/node/themes/utils'
 import {renderSuccess, renderWarning} from '@shopify/cli-kit/node/ui'
@@ -102,3 +102,134 @@ describe('openURLSafely', () => {
     })
   })
 })
+
+describe('createKeypressHandler', () => {
+  const urls = {
+    local: 'http://127.0.0.1:9292',
+    giftCard: 'http://127.0.0.1:9292/gift_cards/[store_id]/preview',
+    themeEditor: 'https://my-store.myshopify.com/admin/themes/123/editor?hr=9292',
+    preview: 'https://my-store.myshopify.com/?preview_theme_id=123',
+  }
+
+  const ctx = {lastRequestedPath: '/'}
+
+  beforeEach(() => {
+    vi.mocked(openURL).mockResolvedValue(true)
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('opens localhost when "t" is pressed', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('t', {name: 't'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledWith(urls.local)
+  })
+
+  test('opens theme preview when "p" is pressed', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('p', {name: 'p'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledWith(urls.preview)
+  })
+
+  test('opens theme editor when "e" is pressed', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('e', {name: 'e'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledWith(urls.themeEditor)
+  })
+
+  test('opens gift card preview when "g" is pressed', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('g', {name: 'g'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledWith(urls.giftCard)
+  })
+
+  test('appends preview path to theme editor URL when lastRequestedPath is not "/"', () => {
+    // Given
+    const ctxWithPath = {lastRequestedPath: '/products/test-product'}
+    const handler = createKeypressHandler(urls, ctxWithPath)
+
+    // When
+    handler('e', {name: 'e'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledWith(
+      `${urls.themeEditor}&previewPath=${encodeURIComponent('/products/test-product')}`,
+    )
+  })
+
+  test('debounces rapid keypresses - only opens URL once during debounce window', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('t', {name: 't'})
+    handler('t', {name: 't'})
+    handler('t', {name: 't'})
+    handler('t', {name: 't'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledTimes(1)
+    expect(openURL).toHaveBeenCalledWith(urls.local)
+  })
+
+  test('allows keypresses after debounce period expires', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('t', {name: 't'})
+    expect(openURL).toHaveBeenCalledTimes(1)
+
+    handler('t', {name: 't'})
+    handler('t', {name: 't'})
+    expect(openURL).toHaveBeenCalledTimes(1)
+
+    // Advance time to exceed debounce period
+    vi.advanceTimersByTime(100)
+
+    handler('p', {name: 'p'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledTimes(2)
+    expect(openURL).toHaveBeenNthCalledWith(1, urls.local)
+    expect(openURL).toHaveBeenNthCalledWith(2, urls.preview)
+  })
+
+  test('debounces different keys during the same debounce window', () => {
+    // Given
+    const handler = createKeypressHandler(urls, ctx)
+
+    // When
+    handler('t', {name: 't'})
+    handler('p', {name: 'p'})
+    handler('e', {name: 'e'})
+    handler('g', {name: 'g'})
+
+    // Then
+    expect(openURL).toHaveBeenCalledTimes(1)
+    expect(openURL).toHaveBeenCalledWith(urls.local)
+  })
+})

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

@@ -126,7 +126,11 @@ export async function dev(options: DevOptions) {
     process.stdin.setRawMode(true)
   }
 
+  let keyBlock = false
+
   process.stdin.on('keypress', (_str, key) => {
+    if (keyBlock) return
+
     if (key.ctrl && key.name === 'c') {
       process.exit()
     }
@@ -150,6 +154,12 @@ export async function dev(options: DevOptions) {
         openURLSafely(urls.giftCard, 'gift card preview')
         break
     }
+
+    // This prevents the keypress handler from being called multiple times in a short span
+    keyBlock = true
+    setTimeout(() => {
+      keyBlock = false
+    }, 100)
   })
 
   await Promise.all([
@@ -165,6 +175,48 @@ export async function dev(options: DevOptions) {
   ])
 }
 
+export function createKeypressHandler(
+  urls: {local: string; giftCard: string; themeEditor: string; preview: string},
+  ctx: {lastRequestedPath: string},
+) {
+  let keyBlock = false
+
+  return (_str: string, key: {ctrl?: boolean; name?: string}) => {
+    if (keyBlock) return
+
+    if (key.ctrl && key.name === 'c') {
+      process.exit()
+    }
+
+    switch (key.name) {
+      case 't':
+        openURLSafely(urls.local, 'localhost')
+        break
+      case 'p':
+        openURLSafely(urls.preview, 'theme preview')
+        break
+      case 'e':
+        openURLSafely(
+          ctx.lastRequestedPath === '/'
+            ? urls.themeEditor
+            : `${urls.themeEditor}&previewPath=${encodeURIComponent(ctx.lastRequestedPath)}`,
+          'theme editor',
+        )
+        break
+      case 'g':
+        openURLSafely(urls.giftCard, 'gift card preview')
+        break
+      default:
+        return
+    }
+
+    keyBlock = true
+    setTimeout(() => {
+      keyBlock = false
+    }, 100)
+  }
+}
+
 export function openURLSafely(url: string, label: string) {
   openURL(url).catch(handleOpenURLError(label))
 }