types: fix regressions (#7649)

* types: fix regressions

* fix: make requested changes

* Apply suggestions from code review

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

* types: action row data should take builders

* types: remove redundant overload

* fix(MessagePayload): ensure components are serialized correctly

* fix(MessagePayload): don't always create new action row

* refactor(UnsafeModalBuilder): make data public

* types: use type union

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

* types: fix types and add tests

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

packages/builders/src/components/ActionRow.ts

@@ -34,7 +34,7 @@ export class ActionRowBuilder<
 	/**
 	 * The components within this action row
 	 */
-	private readonly components: T[];
+	public readonly components: T[];
 
 	public constructor({
 		components,

packages/builders/src/components/selectMenu/UnsafeSelectMenu.ts

@@ -11,7 +11,7 @@ export class UnsafeSelectMenuBuilder extends ComponentBuilder<
 	/**
 	 * The options within this select menu
 	 */
-	protected readonly options: UnsafeSelectMenuOptionBuilder[];
+	public readonly options: UnsafeSelectMenuOptionBuilder[];
 
 	public constructor(data?: Partial<APISelectMenuComponent>) {
 		const { options, ...initData } = data ?? {};

packages/builders/src/interactions/modals/UnsafeModal.ts

@@ -6,7 +6,7 @@ import type {
 import { ActionRowBuilder, createComponentBuilder, JSONEncodable, ModalActionRowComponentBuilder } from '../../index';
 
 export class UnsafeModalBuilder implements JSONEncodable<APIModalInteractionResponseCallbackData> {
-	protected readonly data: Partial<Omit<APIModalInteractionResponseCallbackData, 'components'>>;
+	public readonly data: Partial<Omit<APIModalInteractionResponseCallbackData, 'components'>>;
 	public readonly components: ActionRowBuilder<ModalActionRowComponentBuilder>[] = [];
 
 	public constructor({ components, ...data }: Partial<APIModalInteractionResponseCallbackData> = {}) {

packages/discord.js/src/structures/MessagePayload.js

@@ -3,6 +3,7 @@
 const { Buffer } = require('node:buffer');
 const { isJSONEncodable } = require('@discordjs/builders');
 const { MessageFlags } = require('discord-api-types/v10');
+const ActionRowBuilder = require('./ActionRowBuilder');
 const { RangeError } = require('../errors');
 const DataResolver = require('../util/DataResolver');
 const MessageFlagsBitField = require('../util/MessageFlagsBitField');
@@ -131,9 +132,7 @@ class MessagePayload {
       }
     }
 
-    const components = this.options.components?.map(c =>
-      isJSONEncodable(c) ? c.toJSON() : this.target.client.options.jsonTransformer(c),
-    );
+    const components = this.options.components?.map(c => (isJSONEncodable(c) ? c : new ActionRowBuilder(c)).toJSON());
 
     let username;
     let avatarURL;

packages/discord.js/src/structures/ModalSubmitInteraction.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const { createComponent } = require('@discordjs/builders');
 const Interaction = require('./Interaction');
 const InteractionWebhook = require('./InteractionWebhook');
 const ModalSubmitFieldsResolver = require('./ModalSubmitFieldsResolver');
 const InteractionResponses = require('./interfaces/InteractionResponses');
+const Components = require('../util/Components');
 
 /**
  * @typedef {Object} ModalFieldData
@@ -40,7 +40,7 @@ class ModalSubmitInteraction extends Interaction {
      * The components within the modal
      * @type {ActionRow[]}
      */
-    this.components = data.data.components?.map(c => createComponent(c)) ?? [];
+    this.components = data.data.components?.map(c => Components.createComponent(c)) ?? [];
 
     /**
      * The fields within the modal

packages/discord.js/src/util/Components.js

@@ -80,6 +80,8 @@ class Components extends null {
         return new ButtonComponent(data);
       case ComponentType.SelectMenu:
         return new SelectMenuComponent(data);
+      case ComponentType.TextInput:
+        return new TextInputComponent(data);
       default:
         throw new Error(`Found unknown component type: ${data.type}`);
     }
@@ -92,3 +94,4 @@ const ActionRow = require('../structures/ActionRow');
 const ButtonComponent = require('../structures/ButtonComponent');
 const Component = require('../structures/Component');
 const SelectMenuComponent = require('../structures/SelectMenuComponent');
+const TextInputComponent = require('../structures/TextInputComponent');

packages/discord.js/typings/index.d.ts

@@ -222,7 +222,9 @@ export type ActionRowComponentData = MessageActionRowComponentData | ModalAction
 
 export type ActionRowComponent = MessageActionRowComponent | ModalActionRowComponent;
 
-export interface ActionRowData<T extends ActionRowComponent | ActionRowComponentData> extends BaseComponentData {
+export type ActionRowComponentBuilder = MessageActionRowComponentBuilder | ModalActionRowComponentBuilder;
+
+export interface ActionRowData<T extends ActionRowComponentBuilder | ActionRowComponentData> extends BaseComponentData {
   components: T[];
 }
 
@@ -233,7 +235,7 @@ export class ActionRowBuilder<
 > extends BuilderActionRow<T> {
   constructor(
     data?:
-      | ActionRowData<MessageActionRowComponentData | ModalActionRowComponentData | ActionRowComponent>
+      | ActionRowData<ActionRowComponentData | ActionRowComponentBuilder>
       | (Omit<APIActionRowComponent<APIMessageActionRowComponent | APIModalActionRowComponent>, 'type'> & {
           type?: ComponentType.ActionRow;
         }),
@@ -4719,14 +4721,13 @@ export type MessageChannelComponentCollectorOptions<T extends MessageComponentIn
 export interface MessageEditOptions {
   attachments?: MessageAttachment[];
   content?: string | null;
-  embeds?: (Embed | APIEmbed)[] | null;
+  embeds?: (JSONEncodable<APIEmbed> | APIEmbed)[] | null;
   files?: (FileOptions | BufferResolvable | Stream | MessageAttachment)[];
   flags?: BitFieldResolvable<MessageFlagsString, number>;
   allowedMentions?: MessageMentionOptions;
   components?: (
     | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>>
-    | ActionRow<MessageActionRowComponent>
-    | (Required<BaseComponentData> & ActionRowData<MessageActionRowComponentData | MessageActionRowComponent>)
+    | (Required<BaseComponentData> & ActionRowData<MessageActionRowComponentData | MessageActionRowComponentBuilder>)
     | APIActionRowComponent<APIMessageActionRowComponent>
   )[];
 }
@@ -4767,8 +4768,7 @@ export interface MessageOptions {
   embeds?: (JSONEncodable<APIEmbed> | APIEmbed)[];
   components?: (
     | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>>
-    | ActionRow<MessageActionRowComponent>
-    | (Required<BaseComponentData> & ActionRowData<MessageActionRowComponentData | MessageActionRowComponent>)
+    | (Required<BaseComponentData> & ActionRowData<MessageActionRowComponentData | MessageActionRowComponentBuilder>)
     | APIActionRowComponent<APIMessageActionRowComponent>
   )[];
   allowedMentions?: MessageMentionOptions;

packages/discord.js/typings/index.test-d.ts

@@ -100,7 +100,6 @@ import {
   ActionRowBuilder,
   ButtonComponent,
   SelectMenuComponent,
-  MessageActionRowComponentBuilder,
   InteractionResponseFields,
   ThreadChannelType,
   Events,
@@ -118,8 +117,10 @@ import {
   TextInputBuilder,
   TextInputComponent,
   Embed,
+  MessageActionRowComponentBuilder,
 } from '.';
 import { expectAssignable, expectDeprecated, expectNotAssignable, expectNotType, expectType } from 'tsd';
+import { UnsafeButtonBuilder, UnsafeEmbedBuilder, UnsafeSelectMenuBuilder } from '@discordjs/builders';
 
 // Test type transformation:
 declare const serialize: <T>(value: T) => Serialized<T>;
@@ -727,6 +728,39 @@ client.on('messageCreate', async message => {
       return true;
     },
   });
+
+  // Check that both builders and builder data can be sent in messages
+  const row = new ActionRowBuilder<MessageActionRowComponentBuilder>();
+  const buttonsRow = {
+    type: ComponentType.ActionRow,
+    components: [
+      new ButtonBuilder(),
+      new UnsafeButtonBuilder(),
+      { type: ComponentType.Button, label: 'test', style: ButtonStyle.Primary, customId: 'test' },
+      {
+        type: ComponentType.Button,
+        label: 'another test',
+        style: ButtonStyle.Link as const,
+        url: 'https://discord.js.org',
+      },
+    ],
+  };
+  const selectsRow = {
+    type: ComponentType.ActionRow,
+    components: [
+      new SelectMenuBuilder(),
+      new UnsafeSelectMenuBuilder(),
+      {
+        type: ComponentType.SelectMenu,
+        label: 'select menu',
+        options: [{ label: 'test', value: 'test' }],
+        customId: 'test',
+      },
+    ],
+  };
+  const buildersEmbed = new UnsafeEmbedBuilder();
+  const embedData = { description: 'test', color: 0xff0000 };
+  channel.send({ components: [row, buttonsRow, selectsRow], embeds: [embed, buildersEmbed, embedData] });
 });
 
 client.on('threadMembersUpdate', (thread, addedMembers, removedMembers) => {