Discord-tsx-commands NPM

About

Write Discord.js commands in tsx.

discord-tsx-commands requires discord-tsx-factory and discord.js.

discord-tsx-commands is compatible with discord-tsx-factory version 0.2.19-a and discord.js version 14.10.0 - 14.11.0. (See peerDependencies)

import { createElement, Fragment, Client } from "discord-tsx-factory";
import * as Discord from "discord.js";
import "discord-tsx-commands"; // this line expands discord-tsx-factory.

const client = new Client(...);

Installation

Using npm

$ npm install --save discord.js@14.11.0 discord-tsx-factory discord-tsx-commands

Using yarn

$ yarn add discord.js@14.11.0 discord-tsx-factory discord-tsx-commands

You need to modify your tsconfig.json to use discord-tsx-factory:

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "createElement",
    "jsxFragmentFactory": "Fragment",
    ...
  },
  ...
}

Example usage

Slash Commands

Without group and subcommand

import * as Discord from "discord.js";
import {
  createElement,
  Fragment,
  Client,
  InteractionType,
} from "discord-tsx-factory";
import "discord-tsx-commands";

const client = new Client({
  intents: [Discord.IntentsBitField.Flags.Guilds],
});

client.on("ready", () => {
  const commands = [
    <slash
    name="command"
    description="your command"
    onExecute={() => console.log("command executed!")}
    >
      <user name="user" description="your user" required />
      <role name="role" description="your role" required />
    </slash>
  ] as Discord.SlashCommandBuilder[];
  client.rest.put(Discord.Routes.applicationCommands(client.application!.id!), {
    body: commands.map((command) => command.toJSON()),
  });
});
client.login(...);

With subcommand

There's no special element for subcommand.

Just use slash.

client.on("ready", () => {
  const commands = [
    <slash name="command" description="your command">
      <slash
        name="subcommand1"
        description="your sub command1"
        onExecute={(command) => console.log("sub command1 executed!")}
      >
        <string name="string" description="your string" required />
        <string name="select" description="your string select">
          <choice name="choice1">choice1</choice>
          <choice name="choice2" value="choice2" />
        </string>
      </slash>

      <slash
        name="subcommand2"
        description="your sub command2"
        onExecute={() => console.log("sub command2 executed!")}
      >
        <user name="user" description="your user" required />
        <role name="role" description="your role" required />
      </slash>
    </slash>,
  ] as Discord.SlashCommandBuilder[];
  client.rest.put(Discord.Routes.applicationCommands(client.application!.id!), {
    body: commands.map((command) => command.toJSON()),
  });
});

With group and subcommand

client.on("ready", () => {
  const commands = [
    <slash name="command" description="your command">
      <group name="sub1" description="sub1">
        <slash
          name="sub2_1"
          description="sub2_1"
          onExecute={() => console.log("sub2_1 executed")}
        />
        <slash
          name="sub2_2"
          description="sub2_2"
          onExecute={() => console.log("sub2_2 executed")}
        />
      </group>
    </slash>,
  ] as Discord.SlashCommandBuilder[];
  client.rest.put(Discord.Routes.applicationCommands(client.application!.id!), {
    body: commands.map((command) => command.toJSON()),
  });
});