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.

Alternatively, if your pattern is too long/complex for a filename, you can export it instead.

export const pattern = "...";

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.