Discopic

Discopic is a series of utilities to make working with discord.js

npm install discopic discord.js

Commands

Discopic includes the ability to create slash commands like this

import { attachSlashCommands, createCommand } from "discopic";

const client = new Client(...)

const ping = createCommand({
    name: "ping",
    description: "Pongs you back",
    async execute({ ctx }) {
        ctx.reply("pong");
    },
});

attachSlashCommands(client, { commands: [ping]})

This handles registering the commands (as well as caching), intercepting the interaction, and parsing the parameters.

Command Parameters

const echoCommand = createCommand({
    name: "echo",
    description: "Echos a message back at you",
    parameters: {
        message: {
            description: "The message to echo back",
            type: "string",
        },
    },
    async execute(interaction, { message }) {
        await interaction.reply(message)
    },
});

Command Groups

You can create subcommands by combine commands into a group.

const commandA = createCommand(...)
const commandB = createCommand(...)
const commandGroup = createCommandGroup({
    name: "group",
    description: "My custom group",
    commands: [commandA, commandB]
})


attachSlashCommands(client, { commands: [commandGroup]})

Command Autocomplete

You can create subcommands by combine commands into a group.

createCommand(
    name: "weather",
    description: "Gets the weather for a day of the week",
    parameters: {
        day: {
            description: "The day of the week",
            type: "string",
            autocomplete: true,
        },
    },
    async autocomplete(interaction) {
        const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        const choices = days.map((day, index) => {
            name: day,
            value: index,
        })
        await interaction.respond(choices);
    },
    async execute(interaction) {
        ...
    }
)

Components

This handles the submission of components by storing an internal list of callbacks and IDs.

createComponents

A shorthand for creating MessageActionRow

const components = createComponents([button])
// or for multiple rows
const components = createComponents([[dropdown, toggleButton], [submitButton]])

Button

const button = createButton({
    title: "click me",
    type: "primary";
    async onClick(interaction) {
        await interaction.reply("You clicked me!!!!!")
    }
}),

Embed

const embed = createEmbed({
    title: "My Embed",
    description: "This is my own custom embed"
}),

String Select

const dropdown = createStringSelection({
    options: [
        { label: "Sad", value: "sad" },
        { label: "Alright", value: "alright" },
        { label: "Good", value: "good" },
    ],
    async onSelect({ interaction, selected }) {
        const mood = selected[0];
        await interaction.reply(`You are feeling ${mood}`)
    },
});

Invite URL

You can generate an invite url using createInviteUrl, this adds the intents the bot was created with.

const url = createInviteUrl(client)