diff --git a/packages/theme/src/cli/services/dev.ts b/packages/theme/src/cli/services/dev.ts index acfd9333bef..83f7514848d 100644 --- a/packages/theme/src/cli/services/dev.ts +++ b/packages/theme/src/cli/services/dev.ts @@ -12,6 +12,8 @@ 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 chalk from '@shopify/cli-kit/node/colors' +import readline from 'readline' const DEFAULT_HOST = '127.0.0.1' const DEFAULT_PORT = '9292' @@ -104,6 +106,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 +142,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST, body: [ { list: { - title: {bold: 'Preview your theme'}, + title: chalk.bold('Preview your theme ') + chalk.cyan('(t)'), items: [ { link: { @@ -128,7 +157,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST, [ { link: { - label: 'Preview your gift cards', + label: `Preview your gift cards ${chalk.cyan('(g)')}`, url: `${localUrl}/gift_cards/[store_id]/preview`, }, }, @@ -136,7 +165,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 ${chalk.cyan('(e)')}`, url: `${remoteUrl}/admin/themes/${themeId}/editor`, }, }, @@ -144,7 +173,7 @@ export function renderLinks(store: string, themeId: string, host = DEFAULT_HOST, [ { link: { - label: 'Share your theme preview', + label: `Share your theme preview ${chalk.cyan('(p)')}`, url: `${remoteUrl}/?preview_theme_id=${themeId}`, }, },