feat: global listener for buttonkit

Author: twlite

apps/test-bot/commandkit.mjs

@@ -3,6 +3,6 @@
 import { defineConfig } from 'commandkit';
 
 export default defineConfig({
-  main: 'index.mjs',
+  main: 'index.js',
   src: 'src',
 });

apps/test-bot/package.json

@@ -1,14 +1,15 @@
 {
   "name": "test-bot",
   "version": "1.0.0",
+  "type": "module",
   "scripts": {
     "dev": "commandkit dev",
     "build": "commandkit build",
     "start": "commandkit start"
   },
   "dependencies": {
     "commandkit": "workspace:*",
-    "discord.js": "^14.16.3",
+    "discord.js": "^14.17.3",
     "dotenv": "^16.4.7"
   },
   "devDependencies": {

apps/test-bot/src/commands/misc/commandkit.tsx

@@ -0,0 +1,54 @@
+import CommandKit, {
+  Button,
+  ActionRow,
+  SlashCommandProps,
+  CommandData,
+  OnButtonKitClick,
+} from 'commandkit';
+import { MessageFlags } from 'discord.js';
+
+export const data: CommandData = {
+  name: 'commandkit',
+  description: 'This is a commandkit command.',
+};
+
+const handleButtonClick: OnButtonKitClick = async (interaction) => {
+  const { customId } = interaction;
+
+  await interaction.reply({
+    content: `You clicked the "${customId}" button!`,
+    flags: MessageFlags.Ephemeral,
+  });
+};
+
+function ButtonGrid({ message }) {
+  return (
+    <>
+      {Array.from({ length: 5 }, (_, i) => (
+        <ActionRow>
+          {Array.from({ length: 5 }, (_, j) => (
+            <Button
+              onClick={handleButtonClick}
+              customId={`button ${i * 5 + j + 1}`}
+            >
+              {i * 5 + j + 1}
+            </Button>
+          ))}
+        </ActionRow>
+      ))}
+    </>
+  );
+}
+
+export async function run({ interaction }: SlashCommandProps) {
+  const { resource } = await interaction.deferReply({
+    withResponse: true,
+  });
+
+  const buttons = <ButtonGrid message={resource.message} />;
+
+  await interaction.editReply({
+    content: 'Click the button below to test CommandKit buttons.',
+    components: buttons,
+  });
+}

apps/test-bot/src/commands/misc/confirmation.tsx

@@ -0,0 +1,45 @@
+import CommandKit, {
+  Button,
+  ActionRow,
+  SlashCommandProps,
+  CommandData,
+  OnButtonKitClick,
+} from 'commandkit';
+import { ButtonStyle, MessageFlags } from 'discord.js';
+
+export const data: CommandData = {
+  name: 'confirm',
+  description: 'This is a confirm command.',
+};
+
+const handleConfirm: OnButtonKitClick = async (interaction) => {
+  await interaction.reply({
+    content: 'The item was deleted successfully.',
+    flags: MessageFlags.Ephemeral,
+  });
+};
+
+const handleCancel: OnButtonKitClick = async (interaction) => {
+  await interaction.reply({
+    content: 'The item was not deleted.',
+    flags: MessageFlags.Ephemeral,
+  });
+};
+
+export async function run({ interaction }: SlashCommandProps) {
+  const buttons = (
+    <ActionRow>
+      <Button onClick={handleCancel} style={ButtonStyle.Primary}>
+        Cancel
+      </Button>
+      <Button onClick={handleConfirm} style={ButtonStyle.Danger}>
+        Confirm
+      </Button>
+    </ActionRow>
+  );
+
+  await interaction.reply({
+    content: 'Are you sure you want to delete this item?',
+    components: [buttons],
+  });
+}

apps/test-bot/src/index.ts

@@ -7,6 +7,7 @@ const client = new Client({
 });
 
 new CommandKit({
+  // @ts-ignore
   client,
   commandsPath: `${__dirname}/commands`,
   eventsPath: `${__dirname}/events`,

apps/test-bot/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "lib": ["ESNext", "DOM"],
+    "jsx": "react",
+    "jsxFactory": "CommandKit.createElement",
+    "jsxFragmentFactory": "CommandKit.Fragment",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "allowJs": true,
+    "alwaysStrict": false,
+    "checkJs": false
+  },
+  "include": ["src"]
+}

packages/commandkit/src/CommandKit.ts

@@ -9,9 +9,15 @@ import type {
 import colors from './utils/colors';
 import { CacheProvider } from './cache/CacheProvider';
 import { MemoryCache } from './cache/MemoryCache';
+import { createElement, Fragment } from './components';
+import { EventInterceptor } from './components/common/EventInterceptor';
 
 export class CommandKit extends EventEmitter {
   #data: CommandKitData;
+  public readonly eventInterceptor: EventInterceptor;
+
+  public static readonly createElement = createElement;
+  public static readonly Fragment = Fragment;
 
   static instance: CommandKit | undefined = undefined;
 
@@ -55,6 +61,8 @@ export class CommandKit extends EventEmitter {
       options.cacheProvider = new MemoryCache();
     }
 
+    this.eventInterceptor = new EventInterceptor(options.client);
+
     this.#data = options;
 
     this.#init().then(() => {

packages/commandkit/src/cli/build.ts

@@ -42,6 +42,8 @@ export async function bootstrapProductionBuild(config: any) {
       cjsInterop: true,
       entry: [src, '!dist', '!.commandkit', `!${outDir}`],
       esbuildPlugins: [commandkitPlugin()],
+      jsxFactory: 'CommandKit.createElement',
+      jsxFragment: 'CommandKit.Fragment',
     });
 
     await injectShims(outDir, main, antiCrash, polyfillRequire);

packages/commandkit/src/cli/development.ts

@@ -65,6 +65,8 @@ export async function bootstrapDevelopmentServer(opts: any) {
       entry: [src, '!dist', '!.commandkit', `!${outDir}`].filter(Boolean),
       watch: watchMode,
       cjsInterop: true,
+      jsxFactory: 'CommandKit.createElement',
+      jsxFragment: 'CommandKit.Fragment',
       async onSuccess() {
         return await injectShims('.commandkit', main, false, requirePolyfill);
       },

packages/commandkit/src/cli/esbuild-plugins/plugin.ts

@@ -5,10 +5,12 @@ import { readFile } from 'node:fs/promises';
 const defaultConfig = {
   'use-macro': true,
   'use-cache': true,
+  'jsx-importsource': true,
 };
 
 interface CommandKitEsbuildPluginConfig {
   'use-macro'?: boolean;
+  'jsx-importsource'?: boolean;
   'use-cache'?: boolean;
 }