chore: migrate to discord.js@14.11.0

package.json

@@ -17,7 +17,8 @@
 		"@testing-library/jest-dom": "^5.16.2",
 		"@testing-library/react": "^12.1.4",
 		"@testing-library/user-event": "^13.5.0",
-		"discord.js": "^13.14.0",
+		"discord-api-types": "^0.37.43",
+		"discord.js": "^14.11.0",
 		"electron-is-dev": "^2.0.0",
 		"electron-log": "^4.4.6",
 		"electron-store": "^8.0.1",

public/electron.js

@@ -11,7 +11,12 @@ const { app, BrowserWindow, shell, ipcMain } = require('electron')
 const log = require('electron-log')
 const { autoUpdater } = require('electron-updater')
 const isDev = require('electron-is-dev')
-const { Guild, BaseGuildTextChannel, DMChannel } = require('discord.js')
+const {
+	Guild,
+	BaseGuildTextChannel,
+	DMChannel,
+	ChannelType,
+} = require('discord.js')
 const Store = require('electron-store')
 const appData = new Store()
 
@@ -66,7 +71,11 @@ function createMainWindow() {
 		mainWindow = null
 	})
 
-	if (isDev) mainWindow.webContents.openDevTools({ mode: 'detach' })
+	if (isDev) {
+		const devTools = new BrowserWindow()
+		mainWindow.webContents.setDevToolsWebContents(devTools.webContents)
+		mainWindow.webContents.openDevTools({ mode: 'detach' })
+	}
 }
 
 app.on('ready', () => {
@@ -106,20 +115,7 @@ ipcMain.on('login', async (event, token) => {
 		client.destroy()
 		client = null
 	}
-	client = new Client(
-		{
-			intents: [
-				'GUILDS',
-				'DIRECT_MESSAGES',
-				'GUILD_MESSAGES',
-				'GUILD_MEMBERS',
-				'GUILD_PRESENCES',
-				'GUILD_EMOJIS_AND_STICKERS',
-				'GUILD_VOICE_STATES',
-			],
-		},
-		mainWindow
-	)
+	client = new Client({ mainWindow: mainWindow })
 	try {
 		await client.login(token)
 		if (appData.get('Storage.saveToken', true)) appData.set('token', token)
@@ -159,7 +155,7 @@ ipcMain.handle('dms', () => {
 	try {
 		const dms = [
 			...client.channels.cache
-				.filter(channel => channel.type === 'DM')
+				.filter(channel => channel.type === ChannelType.DM)
 				.map(each => {
 					return {
 						...each,
@@ -208,7 +204,8 @@ ipcMain.handle('selectGuild', async (event, id) => {
 	try {
 		currentGuild = await client.guilds.fetch(id)
 		currentChannel = currentGuild.channels.cache.find(
-			channel => channel.type === 'GUILD_TEXT' && channel.viewable
+			channel =>
+				channel.type === ChannelType.GuildText && channel.viewable
 		)
 		currentDM = null
 		return {
@@ -228,7 +225,11 @@ ipcMain.handle('selectChannel', async (event, id) => {
 	try {
 		const newChannel = await client.channels.fetch(id)
 
-		const allowedChannelTypes = ['GUILD_TEXT', 'GUILD_NEWS', 'DM']
+		const allowedChannelTypes = [
+			ChannelType.GuildText,
+			ChannelType.GuildAnnouncement,
+			ChannelType.DM,
+		]
 		if (!allowedChannelTypes.includes(newChannel.type))
 			throw new Error(
 				`Channel ${newChannel.name} [ID:${newChannel.id}] has an unsupported type: '${newChannel.type}'`

public/serializers/serializeGuildChannel.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-const { GuildChannel } = require('discord.js')
+const { GuildChannel, ChannelType, PermissionFlagsBits } = require('discord.js')
 const serializeGuildMember = require('./serializeGuildMember')
 
 /**
@@ -15,10 +15,10 @@ const serializeGuildChannel = channel => {
 		position: position,
 		isPrivate: !channel
 			.permissionsFor(guild.roles.everyone)
-			.has('VIEW_CHANNEL'),
+			.has(PermissionFlagsBits.ViewChannel),
 		isRules: id === guild.rulesChannelId,
 		members:
-			type === 'GUILD_VOICE' && members.values
+			type === ChannelType.GuildVoice && members.values
 				? [...members.values()].map(member =>
 						serializeGuildMember(member)
 				  )

public/serializers/serializeGuildMember.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-const { GuildMember } = require('discord.js')
+const { GuildMember, UserFlags } = require('discord.js')
 
 /**
  *
@@ -23,7 +23,7 @@ const serializeGuildMember = member => {
 		color: displayColor,
 		hexColor: displayHexColor,
 		isHoisted: roles.hoist ? true : false,
-		isVerifiedBot: user.flags?.has('VERIFIED_BOT'),
+		isVerifiedBot: user.flags?.has(UserFlags.VerifiedBot),
 		roles: {
 			...roles,
 			hoist: {

public/serializers/serializeMessage.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-const { Message } = require('discord.js')
+const { Message, MessageType, ChannelType, UserFlags } = require('discord.js')
 const serializeGuildMember = require('./serializeGuildMember')
 
 /**
@@ -12,7 +12,8 @@ const serializeMessage = async message => {
 
 	let repliesTo = null
 	try {
-		if (type === 'REPLY') repliesTo = await message.fetchReference()
+		if (type === MessageType.Reply)
+			repliesTo = await message.fetchReference()
 	} catch (error) {
 		// Fix for #31
 		// Man... I want to put an easter bug here, but idk
@@ -23,14 +24,14 @@ const serializeMessage = async message => {
 		author: {
 			...author,
 			avatarURL: author.displayAvatarURL(),
-			isVerifiedBot: author.flags?.has('VERIFIED_BOT'),
+			isVerifiedBot: author.flags?.has(UserFlags.VerifiedBot),
 		},
 		member: member ? serializeGuildMember(member) : null,
-		isDM: message.channel.type === 'DM',
+		isDM: message.channel.type === ChannelType.DM,
 		deletable: message.deletable,
 		embeds: embeds.map(embed => {
 			return {
-				...embed,
+				...embed.toJSON(),
 				hexColor: embed.hexColor,
 			}
 		}),
@@ -71,8 +72,9 @@ const serializeMessage = async message => {
 					author: {
 						...repliesTo.author,
 						avatarURL: repliesTo.author.displayAvatarURL(),
-						isVerifiedBot:
-							repliesTo.author.flags?.has('VERIFIED_BOT'),
+						isVerifiedBot: repliesTo.author.flags?.has(
+							UserFlags.VerifiedBot
+						),
 					},
 					member: repliesTo.member
 						? serializeGuildMember(repliesTo.member)

public/structures/Client/Client.js

@@ -1,17 +1,26 @@
 /* eslint-disable no-unused-vars */
-const { Client: oldClient, ClientOptions } = require('discord.js')
+const { Client: oldClient, GatewayIntentBits } = require('discord.js')
 const { BrowserWindow } = require('electron')
 const loadEvents = require('./EventLoader')
 
 class Client extends oldClient {
 	/**
-	 *
-	 * @param {ClientOptions} clientOptions
 	 * @param {BrowserWindow} mainWindow
 	 */
-	constructor(clientOptions, mainWindow) {
-		super(clientOptions)
-		this.mainWindow = mainWindow
+	constructor(clientOptions) {
+		super({
+			intents: [
+				GatewayIntentBits.Guilds,
+				GatewayIntentBits.DirectMessages,
+				GatewayIntentBits.GuildMessages,
+				GatewayIntentBits.MessageContent,
+				GatewayIntentBits.GuildMembers,
+				GatewayIntentBits.GuildPresences,
+				GatewayIntentBits.GuildEmojisAndStickers,
+				GatewayIntentBits.GuildVoiceStates,
+			],
+		})
+		this.mainWindow = clientOptions.mainWindow
 
 		loadEvents(this)
 	}

src/components/ChannelListItem/ChannelListItem.js

@@ -1,4 +1,5 @@
 import { parseTwemojis } from '../../utils'
+import { ChannelType } from 'discord-api-types/v10'
 import { SVGChannels, SVGVoiceStates } from '../SVGHandler'
 import styles from './ChannelListItem.module.css'
 
@@ -13,7 +14,7 @@ const ChannelListItem = props => {
 	const { isPrivate, isRules, parentId, id, viewable, type, name, members } =
 		channel
 
-	const isCategory = channel.type === 'GUILD_CATEGORY'
+	const isCategory = channel.type === ChannelType.GuildCategory
 	const isParentCollapsed = collpasedCategoriesId.includes(parentId)
 	const isCollapsed = collpasedCategoriesId.includes(id)
 	const isViewable = viewable
@@ -38,7 +39,7 @@ const ChannelListItem = props => {
 				{SVGChannels[svgType]}
 				<div>{parseTwemojis(name)}</div>
 			</div>
-			{type === 'GUILD_VOICE' && members.length ? (
+			{type === ChannelType.GuildVoice && members.length ? (
 				<div className={styles.voiceMembersList}>
 					{members.map((member, key) => (
 						<div className={styles.memberContainer} key={key}>

src/components/ChannelNav/ChannelNav.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import styles from './ChannelNav.module.css'
 import { ChannelListItem } from '..'
 import { parseTwemojis } from '../../utils'
+import { ChannelType } from 'discord-api-types/v10'
 const { ipcRenderer } = window.require('electron')
 
 class ChannelNav extends Component {
@@ -53,7 +54,8 @@ class ChannelNav extends Component {
 				<div className={styles.channels}>
 					{channels && (
 						<>
-							{channels.at(0)?.type !== 'GUILD_CATEGORY' ? (
+							{channels.at(0)?.type !==
+							ChannelType.GuildCategory ? (
 								<div style={{ height: 16 }}></div>
 							) : null}
 							{channels.map((channel, index) => (
@@ -81,13 +83,17 @@ class ChannelNav extends Component {
 
 function orderChannels(channels) {
 	const categories = channels
-		.filter(channel => channel.type === 'GUILD_CATEGORY')
+		.filter(channel => channel.type === ChannelType.GuildCategory)
 		.sort((a, b) => a.position - b.position)
 	const texts = channels
-		.filter(channel => ['GUILD_TEXT', 'GUILD_NEWS'].includes(channel.type))
+		.filter(channel =>
+			[ChannelType.GuildText, ChannelType.GuildAnnouncement].includes(
+				channel.type
+			)
+		)
 		.sort((a, b) => a.position - b.position)
 	const voices = channels
-		.filter(channel => channel.type === 'GUILD_VOICE')
+		.filter(channel => channel.type === ChannelType.GuildVoice)
 		.sort((a, b) => a.position - b.position)
 	const result = [
 		...texts.filter(channel => !channel.parentId),

src/components/Chat/Chat.js

@@ -10,6 +10,7 @@ import {
 } from '../SVGHandler'
 import { parseTwemojis } from '../../utils'
 import MemberNav from '../MemberNav/MemberNav'
+import { ChannelType } from 'discord-api-types/v10'
 const { ipcRenderer } = window.require('electron')
 
 const ChannelIcon = props => {
@@ -25,7 +26,7 @@ const ChannelStart = props => {
 	const { name, isPrivate, type, recipient } = props.channel
 	return (
 		<div className={styles.channelStartContainer}>
-			{type === 'DM' ? (
+			{type === ChannelType.DM ? (
 				<img
 					src={recipient.avatarURL}
 					className={styles.channelStartIcon}
@@ -37,14 +38,14 @@ const ChannelStart = props => {
 				</div>
 			)}
 			<h1 className={styles.channelStartHeader}>
-				{type === 'DM' ? (
+				{type === ChannelType.DM ? (
 					recipient.username
 				) : (
 					<>Welcome to #{parseTwemojis(name)}!</>
 				)}
 			</h1>
 			<div className={styles.channelStartDescription}>
-				{type === 'DM' ? (
+				{type === ChannelType.DM ? (
 					<>
 						This is the beginning of your direct message history
 						with <strong>@{recipient.username}</strong>.
@@ -313,7 +314,7 @@ class Chat extends Component {
 							replyingTo={replyingTo}
 						/>
 					</main>
-					{channel.type !== 'DM' && (
+					{channel.type !== ChannelType.DM && (
 						<MemberNav currentChannel={channel} />
 					)}
 				</div>

src/components/MessageElement/MessageElement.js

@@ -1,4 +1,5 @@
 import { Component } from 'react'
+import { ChannelType, MessageType } from 'discord-api-types/v10'
 import styles from './MessageElement.module.css'
 import {
 	DiscordAttachment,
@@ -100,7 +101,7 @@ class MessageElement extends Component {
 								this.fetchMention(node.id, 'channel')
 							return channel
 								? `<discord-mention type='${
-										channel.type === 'GUILD_VOICE'
+										channel.type === ChannelType.GuildVoice
 											? 'voice'
 											: 'channel'
 								  }'>${escape(channel.name)}</discord-mention>`
@@ -163,7 +164,7 @@ class MessageElement extends Component {
 
 		return (
 			<>
-				{type === 'GUILD_MEMBER_JOIN' ? (
+				{type === MessageType.UserJoin ? (
 					<DiscordSystemMessage
 						type="join"
 						className="base-discord-message"
@@ -179,7 +180,7 @@ class MessageElement extends Component {
 						</i>{' '}
 						has appeared!
 					</DiscordSystemMessage>
-				) : type.startsWith('USER_PREMIUM_GUILD_SUBSCRIPTION') ? (
+				) : type === MessageType.GuildBoost ? (
 					<DiscordSystemMessage
 						type="boost"
 						className="base-discord-message"
@@ -210,7 +211,7 @@ class MessageElement extends Component {
 							hover ? styles.messageHover : ''
 						} ${replying ? styles.replying : ''}`}
 					>
-						{type === 'REPLY' && repliesTo ? (
+						{type === MessageType.Reply && repliesTo ? (
 							<DiscordReply
 								slot="reply"
 								author={
@@ -265,7 +266,6 @@ class MessageElement extends Component {
 								/>
 							)
 						})}
-
 						{embeds.map((embed, key) => {
 							const {
 								provider,
@@ -351,7 +351,7 @@ class MessageElement extends Component {
 											)}
 										</DiscordEmbedDescription>
 									) : null}
-									{fields.length ? (
+									{fields?.length ? (
 										<DiscordEmbedFields slot="fields">
 											{fields.map((field, key) => {
 												let fieldOptions = {}