feat: print Shortcuts

packages/cli/src/commands/client.ts

@@ -4,6 +4,7 @@ export function open(port: string) {
   const app = new Application()
   const window = app.createBrowserWindow({
     title: 'Uni Devtools',
+    alwaysOnTop: true,
   })
   window.createWebview({
     url: `http://localhost:${port}`,

packages/cli/src/index.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 import process from 'node:process'
+import readline from 'node:readline'
 import cac from 'cac'
 import c from 'picocolors'
 import { version } from '../package.json'
@@ -32,3 +33,8 @@ cli.on('command:*', () => {
 })
 
 cli.parse()
+
+const rl = readline.createInterface({ input: process.stdin })
+rl.on('line', (input) => {
+  console.log(`Received: ${input}`)
+})

packages/plugin/src/devtoolServer/index.ts

@@ -1,6 +1,6 @@
 import http from 'node:http'
 import { EventEmitter } from 'node:stream'
-import { exec, spawn } from 'node:child_process'
+import { exec } from 'node:child_process'
 import polka from 'polka'
 import sirv from 'sirv'
 import ws from 'ws'
@@ -13,6 +13,7 @@ import type { ResolvedConfig } from 'vite'
 import { DIR_CLIENT, DIR_TMP_INSPECT } from '../dir'
 import { uniDevToolsPrint } from '../utils/print'
 import type { Options } from '../types'
+import { openInDevtools } from '../openCommands'
 import createAppRouter from './rpc/index'
 
 const eventEmitter = new EventEmitter()
@@ -50,14 +51,7 @@ export function createDevtoolServe(
     app.listen(rightPort, () => {
       uniDevToolsPrint(rightPort)
       if (options?.client) {
-        exec(`ud client ${rightPort}`, (error, stdout, stderr) => {
-          if (error) {
-            console.error(`exec error: ${error}`)
-            return
-          }
-          console.log(`stdout: ${stdout}`)
-          console.error(`stderr: ${stderr}`)
-        })
+        openInDevtools(rightPort)
       }
     })
   })

packages/plugin/src/devtoolServer/rpc/index.ts

@@ -5,13 +5,12 @@ import { z } from 'zod'
 import { observable } from '@trpc/server/observable'
 import { parseStack } from 'error-stack-parser-es/lite'
 import { extractPathByStack, sourceFile } from '../../utils/sourceFile'
+import { openInBrowser, openInEditor } from '../../openCommands'
 import type { ConsoleInfo, ModuleInfo, Options } from './../../types'
 import { getPagesInfo } from './../../logic'
 import { mergeRouters, publicProcedure, router } from './../trpc'
 import { DIR_INSPECT_LIST } from './../../dir'
 import { getImageMeta, getStaticAssets, getTextAssetContent } from './assets'
-import { openInEditor } from './openInEditor'
-import openInBrowser from './openInBrowser'
 import { versionRouter } from './version'
 
 export default function (

packages/plugin/src/devtoolServer/rpc/openInEditor.ts → packages/plugin/src/openCommands/index.ts

@@ -1,5 +1,11 @@
+import { exec } from 'node:child_process'
+import open from 'open'
 import launch from 'launch-editor'
-import type { Options } from '../../types'
+import type { Options } from '../types'
+
+export async function openInBrowser(url: string) {
+  await open(url)
+}
 
 export function openInEditor(
   filePath: string,
@@ -18,3 +24,14 @@ export function openInEditor(
     },
   )
 }
+
+export function openInDevtools(port: number) {
+  exec(`ud client ${port}`, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`exec error: ${error}`)
+      return
+    }
+    console.log(`stdout: ${stdout}`)
+    console.error(`stderr: ${stderr}`)
+  })
+}

packages/plugin/src/utils/print.ts

@@ -1,9 +1,65 @@
 /* eslint-disable no-console */
+import readline from 'node:readline'
+import process from 'node:process'
 import c from 'picocolors'
+import { openInBrowser, openInDevtools } from '../openCommands'
+
+const SHORTCUTS = [
+  {
+    key: 'd',
+    description: 'open Uni Devtools client',
+    action: (port: number) => {
+      openInDevtools(port)
+    },
+  },
+  {
+    key: 'o',
+    description: 'open Uni Devtools client in browser',
+    action: (port: number) => {
+      openInBrowser(`http://localhost:${port}`)
+    },
+  },
+  {
+    key: 'c',
+    description: 'clear console',
+    action: () => {
+      process.stdout.write('\x1Bc')
+    },
+  },
+  {
+    key: 'q',
+    description: 'quit',
+    action: () => {
+      process.exit(0)
+    },
+  },
+]
 
 export function uniDevToolsPrint(port: number) {
   console.clear()
   console.log()
   console.log(`  ${c.green('➜')}  ${c.bold('Uni Devtools')}: ${c.magenta(`http://localhost:${port}`)}`)
+  console.log(`  ${c.dim('press ')}${c.bold('h')}${c.dim(` to show help`)}`)
   console.log()
+
+  const onInput = (input: string) => {
+    if (input === 'h') {
+      const loggedKeys = new Set<string>()
+      console.log('\n Shortcuts:')
+
+      for (const shortcut of SHORTCUTS) {
+        if (!loggedKeys.has(shortcut.key)) {
+          console.log(`${c.dim(' press ')}${c.bold(`${shortcut.key}`)}${c.dim(` to ${shortcut.description}`)}`)
+          loggedKeys.add(shortcut.key)
+        }
+      }
+    }
+    const shortcut = SHORTCUTS.find(i => i.key === input)
+    if (!shortcut)
+      return
+    shortcut.action(port)
+  }
+
+  const rl = readline.createInterface({ input: process.stdin })
+  rl.on('line', onInput)
 }