WIP(command-bar): basic api

Author: Gianthard-cyh

app/components/CommandBar.vue

@@ -44,34 +44,9 @@
 </template>
 
 <script setup lang="ts">
-const cmdList = [
-  {
-    id: 'package:search',
-    name: 'Search packages',
-    description: 'Search for packages',
-    handler: () => {},
-  },
-  {
-    id: 'org:search',
-    name: 'Search organizations',
-    description: 'Search for organizations',
-    handler: () => {},
-  },
-  {
-    id: 'package:like',
-    name: 'Like this',
-    description: 'Like this package',
-    handler: () => {},
-  },
-  {
-    id: 'package:install',
-    name: 'Copy install command',
-    description: 'Copy install command to clipboard',
-    handler: () => {},
-  },
-]
+const { commands } = useCommandRegistry()
 
-const selected = shallowRef(cmdList[0]?.id || '')
+const selected = shallowRef(commands.value[0]?.id || '')
 const inputVal = shallowRef('')
 const show = shallowRef(false)
 const triggeringId = shallowRef('')
@@ -81,13 +56,13 @@ const { focused: inputFocused } = useFocus(inputRef)
 
 const filteredCmdList = computed(() => {
   if (!inputVal.value) {
-    return cmdList
+    return commands.value
   }
   const filter = inputVal.value.trim().toLowerCase()
-  return cmdList.filter(
+  return commands.value.filter(
     item =>
       item.name.toLowerCase().includes(filter) ||
-      item.description.toLowerCase().includes(filter) ||
+      item.description?.toLowerCase().includes(filter) ||
       item.id.includes(filter),
   )
 })
@@ -107,14 +82,14 @@ function focusInput() {
 
 function open() {
   inputVal.value = ''
-  selected.value = cmdList[0]?.id || ''
+  selected.value = commands.value[0]?.id || ''
   show.value = true
   nextTick(focusInput)
 }
 
 function close() {
   inputVal.value = ''
-  selected.value = cmdList[0]?.id || ''
+  selected.value = commands.value[0]?.id || ''
   show.value = false
 }
 
@@ -128,7 +103,7 @@ function toggle() {
 
 function triggerCommand(id: string) {
   const selectedItem = filteredCmdList.value.find(item => item.id === id)
-  selectedItem?.handler?.()
+  selectedItem?.handler?.({} as CommandContext)
   triggeringId.value = id
   setTimeout(() => {
     close()

app/composables/useCommandRegistry.ts

@@ -0,0 +1,81 @@
+import { computed } from 'vue'
+
+export interface Command {
+  id: string
+  name: string
+  description: string | undefined
+  handler?: (ctx: CommandContext) => Promise<void>
+}
+
+export interface CommandContext {
+  input: (options: CommandInputOptions) => Promise<string | undefined>
+  select: <T>(options: CommandSelectOptions<T>) => Promise<T | undefined>
+}
+
+export interface CommandInputOptions {
+  prompt: string
+}
+
+export interface CommandSelectOptions<T> {
+  prompt: string
+  items: T[]
+}
+
+/**
+ * Composable for global command registry.
+ * @public
+ */
+export const useCommandRegistry = () => {
+  const commands = useState<Map<string, Command>>('commands', () => new Map())
+
+  const register = (command: Command) => {
+    const serverCommand = {
+      ...command,
+      handler: undefined,
+    }
+    if (import.meta.server) {
+      commands.value.set(command.id, serverCommand)
+    } else {
+      commands.value.set(command.id, command)
+    }
+    return () => {
+      commands.value.delete(command.id)
+    }
+  }
+
+  return {
+    register,
+    commands: computed(() => Array.from(commands.value.values())),
+  }
+}
+
+/**
+ * Registers a global command.
+ * @public
+ */
+export const registerGlobalCommand = (command: Command) => {
+  const { register } = useCommandRegistry()
+  return register(command)
+}
+
+/**
+ * Registers a command bound to the current component's lifecycle.
+ *
+ * The command is automatically unregistered when the component unmounts.
+ * Use this to register commands that rely on local component state (context)
+ * via closure capture.
+ *
+ * @public
+ */
+export const registerScopedCommand = (command: Command) => {
+  const { register } = useCommandRegistry()
+  let unregister: () => void
+
+  onMounted(() => {
+    unregister = register(command)
+  })
+
+  onUnmounted(() => {
+    unregister()
+  })
+}

app/plugins/commands.ts

@@ -0,0 +1,11 @@
+export default defineNuxtPlugin(() => {
+  const { register } = useCommandRegistry()
+  register({
+    id: 'npmx:hello',
+    name: 'Hello',
+    description: 'Say hello to npmx',
+    handler: async () => {
+      console.log('Hello npmx!')
+    },
+  })
+})