discord.js - Imagine an app•5mo ago

Building components

How do people usually use the component builders? Right now I'm using the builders inside of the "add component methods" but this results in components 100s of lines long depending on the arrangement of different component types. I was wondering if there was a better or more standard way to build components.

14 Replies

d.js toolkit•5mo ago

d.js docs•5mo ago

:guide: Popular Topics: Display Components read more

steampunkWizardOP•5mo ago

Here's an example

Unknown User•5mo ago

Message Not Public

steampunkWizardOP•5mo ago

return new ContainerBuilder()
    .setAccentColor(accentColor)
    .addTextDisplayComponents(
      new TextDisplayBuilder().setContent(`# ${role ?? "Role"} Edit Menu`),
      new TextDisplayBuilder().setContent("## Name"),
      new TextDisplayBuilder().setContent(
        `${name ?? role?.name ?? "No role name"}`
      ),
      new TextDisplayBuilder().setContent(`</role name:${commandId}>`),
      new TextDisplayBuilder().setContent("## Color"),
      new TextDisplayBuilder().setContent(
        color
          ? color.type === "holographic"
            ? "Style: Holographic"
            : `Style: ${capitalize(color.type)} Color: ${
                color.type === "solid"
                  ? `\`${color.color}\``
                  : color.type === "gradient"
                  ? `\`${color.start} to ${color.end}\``
                  : "No color"
              }`
          : "No style"
      ),
      new TextDisplayBuilder().setContent(
        `</role color-solid:${commandId}> </role color-gradient:${commandId}> </role color-holographic:${commandId}>`
      ),
      new TextDisplayBuilder().setContent("## Icon"),
      new TextDisplayBuilder().setContent(
        `</role icon-upload:${commandId}> </role icon-previous:${commandId}>`
      ),
      new TextDisplayBuilder().setContent("## Manage"),
      new TextDisplayBuilder().setContent(
        `</role claim:${commandId}> </role delete:${commandId}>`
      )
    )
    .addActionRowComponents(
      new ActionRowBuilder<ButtonBuilder>().addComponents(
        new ButtonBuilder()
          .setCustomId("edit-request")
          .setStyle(ButtonStyle.Success)
          .setLabel("Submit")
      )
    );
}

return new ContainerBuilder()
    .setAccentColor(accentColor)
    .addTextDisplayComponents(
      new TextDisplayBuilder().setContent(`# ${role ?? "Role"} Edit Menu`),
      new TextDisplayBuilder().setContent("## Name"),
      new TextDisplayBuilder().setContent(
        `${name ?? role?.name ?? "No role name"}`
      ),
      new TextDisplayBuilder().setContent(`</role name:${commandId}>`),
      new TextDisplayBuilder().setContent("## Color"),
      new TextDisplayBuilder().setContent(
        color
          ? color.type === "holographic"
            ? "Style: Holographic"
            : `Style: ${capitalize(color.type)} Color: ${
                color.type === "solid"
                  ? `\`${color.color}\``
                  : color.type === "gradient"
                  ? `\`${color.start} to ${color.end}\``
                  : "No color"
              }`
          : "No style"
      ),
      new TextDisplayBuilder().setContent(
        `</role color-solid:${commandId}> </role color-gradient:${commandId}> </role color-holographic:${commandId}>`
      ),
      new TextDisplayBuilder().setContent("## Icon"),
      new TextDisplayBuilder().setContent(
        `</role icon-upload:${commandId}> </role icon-previous:${commandId}>`
      ),
      new TextDisplayBuilder().setContent("## Manage"),
      new TextDisplayBuilder().setContent(
        `</role claim:${commandId}> </role delete:${commandId}>`
      )
    )
    .addActionRowComponents(
      new ActionRowBuilder<ButtonBuilder>().addComponents(
        new ButtonBuilder()
          .setCustomId("edit-request")
          .setStyle(ButtonStyle.Success)
          .setLabel("Submit")
      )
    );
}

Unknown User•5mo ago

Message Not Public

steampunkWizardOP•5mo ago

I see In the guide it seems like there's an arrow function inside the add component methods, do I not have to say new for each one?

Unknown User•5mo ago

Message Not Public

TÆMBØ•5mo ago

If you want, you can also use the callback pattern for adding components, e.g.

addTextDisplayComponents(
  builder => builder.setContent(""),
  builder => builder.setContent("")
)

addTextDisplayComponents(
  builder => builder.setContent(""),
  builder => builder.setContent("")
)

Unknown User•5mo ago

Message Not Public

steampunkWizardOP•5mo ago

Ah that's what I was missing Oh this is like for commands too

TÆMBØ•5mo ago

Yea

steampunkWizardOP•5mo ago

Alright thanks that makes a lot more sense

d.js toolkit•5mo ago

The thread owner has marked this issue as solved.

Gaming

Programming

Building components

Did you find this page helpful?