feat: implement file based subcommands and update examples in playground

Author: zojize

README.md

@@ -252,11 +252,11 @@ Here's what's planned for future releases:
   - [ ] Attachment type
 - [ ] Better JSDocs support JSDoc comments
 - [ ] Localization support
-- [ ] File-based subcommands
+- [x] File-based subcommands
 - [x] Auto-complete API
 - [ ] Guild-specific commands
 - [ ] Nuxt-devtools integration
-- [ ] Unit tests
+- [ ] Unit tests (WIP)
 
 ### Web Interface Enhancements
 

package.json

@@ -38,7 +38,7 @@
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "pnpm run dev:prepare && nuxi dev playground",
-    "dev:debug": "pnpm run dev:prepare && NODE_OPTIONS='--inspect' nuxi dev playground",
+    "dev:debug": "pnpm run dev:prepare && node --inspect ./node_modules/nuxt/bin/nuxt.mjs dev playground --no-fork",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release && pnpm publish && git push --follow-tags",

playground/discord/commands/channel.ts

@@ -0,0 +1,5 @@
+/**
+ * @name channel
+ * @description A set of commands related to channels
+ */
+export default () => {}

playground/discord/commands/channel/members.ts

@@ -0,0 +1,5 @@
+/**
+ * @name members
+ * @description A set of commands related to getting information from channels members
+ */
+export default () => {}

playground/discord/commands/channel/members/count.ts

@@ -0,0 +1,17 @@
+import { ChannelType } from 'discord.js'
+
+/**
+ * @name count
+ * @description Gets the number of members in the channel
+ */
+export default defineSlashCommand(async () => {
+  const interaction = useInteraction()
+
+  if (interaction?.channel?.type === ChannelType.GuildText) {
+    const members = interaction.channel.members
+    return reply.ephemeral(`There are ${members.size} members in ${interaction.channel.name}.`)
+  }
+  else {
+    return reply.ephemeral('Unsupported channel type')
+  }
+})

playground/discord/commands/channel/members/names.ts

@@ -0,0 +1,18 @@
+import { ChannelType } from 'discord.js'
+
+/**
+ * @name names
+ * @description Gets the names of all members in the channel
+ */
+export default defineSlashCommand(async () => {
+  const interaction = useInteraction()
+
+  if (interaction?.channel?.type === ChannelType.GuildText) {
+    const members = interaction.channel.members
+    const memberNames = members.map(member => member.displayName).join(', ')
+    return reply.ephemeral(`Members of ${interaction.channel.name}: ${memberNames}`)
+  }
+  else {
+    return reply.ephemeral('Unsupported channel type')
+  }
+})

playground/discord/commands/channel/send.ts

@@ -0,0 +1,18 @@
+import { ChannelType } from 'discord.js'
+
+/**
+ * @name send
+ * @description Sends a message to the channel
+ * @param text The text to send
+ */
+export default defineSlashCommand(async (text: string) => {
+  const interaction = useInteraction()
+
+  if (interaction?.channel?.type === ChannelType.GuildText) {
+    await interaction.channel.send(text)
+    return reply.ephemeral(`Message '${text}' sent to ${interaction.channel.name}!`)
+  }
+  else {
+    return reply.ephemeral('Unsupported channel type')
+  }
+})

src/runtime/client/pages/slash-commands.css

@@ -55,6 +55,7 @@
 .font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);}
 .font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);}
 .mx-auto{margin-inline:auto;}
+.my-0\.75{margin-block:calc(var(--spacing) * 0.75);}
 .my-6{margin-block:calc(var(--spacing) * 6);}
 .mb-1{margin-bottom:calc(var(--spacing) * 1);}
 .mb-16{margin-bottom:calc(var(--spacing) * 16);}
@@ -80,22 +81,23 @@
 .flex{display:flex;}
 .flex-col{flex-direction:column;}
 .flex-wrap{flex-wrap:wrap;}
+.gap-1{gap:calc(var(--spacing) * 1);}
 .gap-2{gap:calc(var(--spacing) * 2);}
 .gap-3{gap:calc(var(--spacing) * 3);}
 .gap-4{gap:calc(var(--spacing) * 4);}
 .grid{display:grid;}
+.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);}
 .h-12{height:calc(var(--spacing) * 12);}
 .h-4{height:calc(var(--spacing) * 4);}
-.h-5{height:calc(var(--spacing) * 5);}
 .w-12{width:calc(var(--spacing) * 12);}
 .w-4{width:calc(var(--spacing) * 4);}
-.w-5{width:calc(var(--spacing) * 5);}
 .w-full{width:100%;}
 .hover\:cursor-pointer:hover{cursor:pointer;}
 .disabled\:hover\:cursor-not-allowed:hover:disabled{cursor:not-allowed;}
 .ring-0{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .transition-shadow{transition-property:box-shadow;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}
 .duration-200{--un-duration:200ms;transition-duration:200ms;}
+.items-start{align-items:flex-start;}
 .items-center{align-items:center;}
 .justify-between{justify-content:space-between;}
 .overflow-hidden{overflow:hidden;}

src/runtime/client/pages/slash-commands.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { WatchEvent } from 'nuxt/schema'
 import type { SlashCommand, SlashCommandOption } from '../../../types'
+import slashCommands from '#build/discord/slashCommands'
 import { computed, ref, useFetch, useRuntimeConfig, watchEffect } from '#imports'
 import { useWebSocket } from '@vueuse/core'
 import TheHeader from '../components/TheHeader.vue'
@@ -81,7 +82,7 @@ function getRemoteId(command: any): string | undefined {
   return undefined
 }
 
-const commands = ref([] as typeof import('discord/slashCommands').default)
+const commands = ref(slashCommands)
 
 const {
   data: diff,
@@ -90,9 +91,6 @@ const {
   '/api/discord/slash-command/remote-diff',
   {
     method: 'post',
-    body: {
-      commands,
-    },
     immediate: import.meta.dev,
   },
 )
@@ -301,9 +299,9 @@ const statusClasses = {
         >
           <template #header>
             <div class="flex items-center justify-between">
-              <div class="flex gap-3 items-center">
-                <UIcon name="i-heroicons-command-line" class="text-primary-500 h-5 w-5" />
-                <div>
+              <div class="flex gap-3 items-start">
+                <UIcon name="i-heroicons-command-line" class="text-primary-500 my-0.75 size-6" />
+                <div class="flex flex-col gap-1 items-start">
                   <h3
                     class="text-lg text-gray-700 font-semibold dark:text-gray-200"
                     :class="command.status === 'conflict' && 'text-[var(--ui-error)]!'"
@@ -314,7 +312,14 @@ const statusClasses = {
                     {{ command.description }}
                   </p>
                   <UBadge
-                    v-if="command.options.length > 0"
+                    v-if="'subcommands' in command && (command.subcommands?.length ?? 0) > 0"
+                    :label="`${command.subcommands!.length} subcommand${command.subcommands!.length === 1 ? '' : 's'}`"
+                    variant="soft"
+                    color="info"
+                    size="sm"
+                  />
+                  <UBadge
+                    v-else-if="command.options.length > 0"
                     :label="`${command.options.length} option${command.options.length === 1 ? '' : 's'}`"
                     variant="soft"
                     color="neutral"

src/runtime/server/api/discord/slash-command/remote-diff.post.ts

@@ -1,27 +1,12 @@
-import type { APIApplicationCommand } from 'discord.js'
-import type { SlashCommand, SlashCommandRuntime } from '../../../../../types'
+import type { SlashCommand } from '../../../../../types'
 import { defineEventHandler, readBody } from 'h3'
 import { useDiscordClient } from '../../../utils/useDiscordClient'
 
-export default defineEventHandler<{
-  body?: {
-    commands?: SlashCommand[]
-  }
-}, Promise<{
-  added: SlashCommandRuntime[]
-  removed: APIApplicationCommand[]
-  changed: {
-    local: SlashCommandRuntime
-    remote: APIApplicationCommand
-  }[]
-  synced: {
-    local: SlashCommandRuntime
-    remote: APIApplicationCommand
-  }[]
-  conflict: SlashCommandRuntime[]
-}>>(async (event) => {
+export default defineEventHandler(async (event) => {
   const client = useDiscordClient()
-  const body = await readBody(event)
+  const body: {
+    commands?: SlashCommand[]
+  } = await readBody(event)
   const diff = await client.diffRemoteSlashCommands(body?.commands)
   return diff
 })