Components

The component IDs are determined by their file name, here's a typical component structure:

src
└ components
  ├ buttons
  │ ├ increase.ts # Will handle for buttons with ID `increase`
  │ └ trivia_guess_:answer.ts # Will handle for buttons with ID `trivia_guess_(.+?)`
  ├ modals
  │ └ suggestion.ts # Will handle for modals with ID `suggestion`
  └ selects
    └ rating.ts # Will handle for selectmenu submissions with ID `rating`

This means that component file names must be unique within their category.

The component categories available are buttons, selects, and modals.

Component execution

All components are required to have a default export, this function is how your component will be handled.

// src/components/buttons/guess_:answer.ts
import type { ComponentInteraction } from "dressed";
 
export default async function guess(
  interaction: ComponentInteraction,
  args: { answer: string },
) {
  if (args.answer === correctAnswer) {
    await interaction.reply("Good job!");
  } else {
    await interaction.reply("Nice try!");
  }
}

Dynamic Component IDs

As you may have noticed in the previous example, a component can be passed certain arguments.

Components can be parameterized using special patterns in their filenames. This enables you to match component IDs dynamically and extract arguments from them. Dynamic IDs can be applied to any component type.

Pattern Syntax

If a filename contains :<argname>, it becomes dynamic, so it will match any component ID that fits the pattern, and extract the matching segment into a string argument passed to the component.

You can also make parts of the pattern optional using {...}. This allows components to handle multiple ID variations with a single file.

If you'd like to add some regex syntax, you can simply do (...). This can be paired with an argument to ensure the argument value is correct.

Pattern Export

If you have a complex dynamic ID or you're on Windows you may opt to use the pattern export over file name. Using pattern export will override file name completely.

Before

trivia_guess_:answer.ts

After

// trivia_guess_answer.ts
export const pattern = "trivia_guess_:answer"; // Matches `trivia_guess_(.+?)` no matter the filename

Examples

// src/components/buttons/print-:value.ts
export default async function print(_, args: { value: string }) {
  console.log(args.value);
}

Will be invoked for IDs like print-Hello world or print-wowie.

// src/components/buttons/ticket{-:action(open|close)}.ts
export default async function ticket(_, args: { action?: "open" | "close" }) {
  console.log("Action:", args.action ?? "none");
}

Will handle either ticket (no action argument) or ticket-open/ticket-close.

Learn More

This behavior is powered by @dressed/matcher.