feat: devtools apis

Author: twlite

apps/test-bot/commandkit.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'commandkit';
 import { legacy } from '@commandkit/legacy';
 import { i18n } from '@commandkit/i18n';
+import { devtools } from '@commandkit/devtools';
 
 export default defineConfig({
-  plugins: [i18n(), legacy({ skipBuiltInValidations: true })],
+  plugins: [i18n(), legacy({ skipBuiltInValidations: true }), devtools()],
 });

apps/test-bot/package.json

@@ -20,4 +20,4 @@
   "devDependencies": {
     "tsx": "^4.7.0"
   }
-}
+}

apps/test-bot/src/app/commands/random.ts

@@ -1,4 +1,9 @@
-import { ChatInputCommandContext, CommandData, cacheTag, cacheLife } from 'commandkit';
+import {
+  ChatInputCommandContext,
+  CommandData,
+  cacheTag,
+  cacheLife,
+} from 'commandkit';
 
 export const command: CommandData = {
   name: 'random',
@@ -7,12 +12,12 @@ export const command: CommandData = {
 
 const random = async () => {
   'use cache';
-  
+
   cacheTag('random');
   cacheLife('1m');
-  
+
   return Math.random();
-}
+};
 
 export async function chatInput({ interaction }: ChatInputCommandContext) {
   await interaction.deferReply();

apps/website/docs/guide/99-helper-functions/01-after.mdx

@@ -9,17 +9,17 @@ It is guaranteed to be called after the command has been executed, regardless of
 ## Usage
 
 ```ts
-import { after, ChatInputCommand } from "commandkit";
+import { after, ChatInputCommand } from 'commandkit';
 
 export const chatInput: ChatInputCommand = async (ctx) => {
-    after(() => {
-        // This code will be executed after the command has been executed
-        console.log("Command has been executed");
-    });
+  after(() => {
+    // This code will be executed after the command has been executed
+    console.log('Command has been executed');
+  });
 
-    await ctx.interaction.reply({
-        content: "Hello World",
-        ephemeral: true
-    });
-}
-```
+  await ctx.interaction.reply({
+    content: 'Hello World',
+    ephemeral: true,
+  });
+};
+```

apps/website/docs/guide/99-helper-functions/02-stopEvents.mdx

@@ -9,18 +9,18 @@ It is typically used in the context of event handlers to control the flow of exe
 ## Usage
 
 ```ts title="./src/app/events/messageCreate/event.ts"
-import { stopEvents } from "commandkit";
-import { Message } from "discord.js";
+import { stopEvents } from 'commandkit';
+import { Message } from 'discord.js';
 
 export default async function onMessageCreate(message: Message) {
-    console.log("Message received:", message.content);
+  console.log('Message received:', message.content);
 
-    // Stop further event handlers of messageCreate from being executed after this point
-    stopEvents();
-    // code below will not be executed
+  // Stop further event handlers of messageCreate from being executed after this point
+  stopEvents();
+  // code below will not be executed
 }
 ```
 
 :::info
 You must not call `stopEvents()` in try-catch block, otherwise it will not work as expected.
-:::
+:::

packages/commandkit/spec/cache.test.ts

@@ -1,19 +1,21 @@
 import { afterAll, beforeAll, describe, expect, test } from 'vitest';
-import CommandKit, {
+import {
   cache,
   cacheTag,
   cacheLife,
   isCachedFunction,
   invalidate,
   revalidate,
-} from '../src';
-import { Client } from 'discord.js';
+  CommandKit,
+  // @ts-ignore
+} from 'commandkit';
 import { setTimeout } from 'node:timers/promises';
+import { Client } from 'discord.js';
 
 describe('Cache', () => {
   let commandkit!: CommandKit, client!: Client;
 
-  beforeAll(() => {
+  beforeAll(async () => {
     client = new Client({
       intents: [],
     });

packages/commandkit/spec/commandkit.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest';
-import { CommandKit } from '../src/index';
+// @ts-ignore
+import CommandKit from 'commandkit';
 import { Client } from 'discord.js';
 
 describe('CommandKit', () => {

packages/commandkit/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitest/config';
-import { cacheDirectivePlugin } from './src/plugins/runtime/builtin/cache/UseCacheTransformer';
+import { vite as cacheDirectivePlugin } from 'directive-to-hof';
 import { join } from 'path';
 
 export default defineConfig({
@@ -17,20 +17,12 @@ export default defineConfig({
     },
   },
   plugins: [
-    {
-      name: 'use-cache',
-      async transform(code, id) {
-        const valid = /\.(c|m)?(t|j)sx?$/.test(id);
-        if (!valid) return null;
-
-        const { contents } = await cacheDirectivePlugin(code, { path: id });
-
-        return {
-          code: contents,
-          map: null,
-        };
-      },
-    },
+    cacheDirectivePlugin({
+      directive: 'use cache',
+      importPath: 'commandkit',
+      importName: '__SECRET_USE_CACHE_INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
+      asyncOnly: true,
+    }),
   ],
   optimizeDeps: {
     esbuildOptions: {

packages/devtools-ui/package.json

@@ -33,7 +33,9 @@
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-query": "^5.75.7",
     "@tanstack/react-table": "^8.21.2",
+    "axios": "^1.9.0",
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "0.468.0",

packages/devtools-ui/src/api/axios.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+export const axiosClient = axios.create({
+  baseURL: import.meta.env.VITE_COMMANDKIT_API || '/api',
+});
+
+axiosClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token');
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+
+  return config;
+});
+
+axiosClient.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response.status === 401) {
+      localStorage.removeItem('access_token');
+      window.location.href = '/';
+    }
+
+    return Promise.reject(error);
+  },
+);