discord-jsx

Installation

yarn add discord-jsx

Usage

View the example in examples

API

Components

<Client />

| prop | prefix | onError? | | ----------- | --------------------- | --------------------------- | | type | string | (error: Error) => unknown | | Description | The prefix of the bot | An error handler |

This is the most fundamental part of any discord-jsx application. It is the internal Provider for the discord.js Client under the hood, as well as prefix among other things.

<Token token={string} />

| prop | token | onReady | onLogin? | | ----------- | ------------- | ----------------------------- | ----------------------------- | | type | string | (client: Client) => unknown | (client: Client) => unknown | | Description | The bot token | Ready event shorthand | Login event shorthand |

This component will run client.login() under the hood, and is the starting point for any discord-jsx client.

<Command />

| prop | name | description | inhibitors? | handler? | children? | | ----------- | ----------------------- | ----------------------------------------- | -------------------------------- | -------------------------------------------------- | ------------------------------ | | type | string | string | Inhibitor[] | (message: Message, ...args: string[]) => unknown | Read below | | Description | The name of the command | The description of what this command does | Optional inhibitors (Read below) | Optional handler function (Read below) | Optional children (Read below) |

The Command component is very versatile when not using a handler function prop. It supports three main types of children. Text (string or number), a Shortcut (we'll come on to that later), or a custom function that takes 0-2 arguments.

For instance, we can pass regular text as a simple reply. E.g.

<Command name={"example"} description={"This is an example command"}>
  This would be the example reply.
</Command>

However, we can do much more with Shortcuts. As the name implies, these are shorter ways to template a message. discord-jsx has a few built in. Currently, they are author and channelName. You can use shortcuts in a handlebars-style syntax. E.g.

<Command
  name={"example"}
  description={"This is an example command using shortcuts"}
>
  Hello, {{ author }}. You sent a message in {{ channelName }}.
</Command>

Under the hood, these are actually valid JavaScript objects, and we just call the first property. A shortcut is simply a function that takes a Message as the first argument and always returns a string. Because of this, it's easy to build your own and reuse them as you please.

Secondly, Command also accepts a function that takes 0-2 argument. Similar to a Shortcut however this time, they can be async. This allows for database calls etc to be executed. E.g.

// An example function
async function getFavouriteFood(discordId: string): Promise<string> {
  const user = await database.getUserByDiscord(discordId);
  return user.favouriteFood;
}

<Command
  name={"food"}
  description={"This is an example command using inline functions"}
>
  Hello {{ author }}. Your favourite food is{" "}
  {(msg) => getFavouriteFood(msg.author.id)}.
</Command>;

And an example using the second argument (message args)

<Command name={"say"} description={"Repeats what you say"}>
  {(msg, ...args) => arg.join(" ")}
</Command>

<Event />

| prop | event | handler | | ----------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | | type | keyof ClientEvents | Function that accepts the params referenced in the list of client events | | Description | The event name | The handler for this event |

This is a component for listening to custom Discord.js Client events. It's fairly self-explanatory. Here's a couple examples:

<Event event={"message"} handler={message => console.log(message.content)} />
<Event event={"guildCreate"} handler={guild => console.log(`Client joined ${guild.name}`)} />

Hooks

If you want to use the client in your own hook, you can use useClientContext which returns ClientContext – an object containing the Client and prefix.

For example:

// Custom hook to check if a string starts with the current prefix
function useIsCommand(content: string): boolean {
  const context = useClientContext();
  return content.startsWith(context.prefix);
}

Inhibitors

Stolen from cookiecord, inhibitors are a way of preventing a command from executing when a specific condition isn't met.

They are very easy to make, and we provide a couple from the constant CommonInhibitors. You use them in a <Command /> component, documented above.

For example:

// A command that will only run in a guild
<Command inhibitors={[CommonInhibitors.guildsOnly]} name={"guildsonly"} description={"A command that will run in a guild only"} handler={/*...*/} />
<Command inhibitors={[CommonInhibitors.noBots]} name={"nobots"} description={"A command that cannot be triggered by bots"} handler={/*...*/} />

To build an inhibitor, you can import the Inhibitor type. Inhibitors stop execution just by throwing a regular error. The error gets caught, and the message is echoed to the channel where the inhibition rose.

This project is very experimental, don't use it in production... please.....