fix(types): permissions to string/bigint to prevent int scalability concerns

src/backend-worker/tsconfig.json

@@ -1,8 +1,9 @@
 {
     "compilerOptions": {
         "outDir": "./dist",
-        "lib": ["esnext", "webworker"],
-        "types": ["@cloudflare/workers-types"]
+        "lib": ["esnext", "webworker", "ES2020.BigInt", "ES2020.Promise"],
+        "types": ["@cloudflare/workers-types"],
+        "target": "ES2019"
     },
     "include": [
         "./*.ts",

src/common/types/demoData.ts

@@ -5,7 +5,7 @@ export const demoData: Role[] = [
         id: '557812805546541066',
         name: 'a cute role ♡',
         color: 0xd19494,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,
@@ -14,7 +14,7 @@ export const demoData: Role[] = [
         id: '557812901717737472',
         name: 'a vanity role ♡',
         color: 0xd1d194,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,
@@ -23,7 +23,7 @@ export const demoData: Role[] = [
         id: '557812915386843170',
         name: 'a brave role ♡',
         color: 0x94d194,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,
@@ -32,7 +32,7 @@ export const demoData: Role[] = [
         id: '557824893241131029',
         name: 'a proud role ♡',
         color: 0x94d1d1,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,
@@ -41,7 +41,7 @@ export const demoData: Role[] = [
         id: '557824994269200384',
         name: 'a wonderful role ♡',
         color: 0x9494d1,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,
@@ -50,7 +50,7 @@ export const demoData: Role[] = [
         id: '557825026406088717',
         name: 'a 日本語 role ♡',
         color: 0xd194d1,
-        permissions: 0,
+        permissions: '0',
         safety: 0,
         managed: false,
         position: 0,

src/common/types/storyData.ts

@@ -16,7 +16,7 @@ import {
 export const roleCategory: Role[] = [
     {
         id: 'aaa',
-        permissions: 0,
+        permissions: '0',
         name: 'She/Her',
         color: 0xffc0cb,
         position: 1,
@@ -25,7 +25,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'bbb',
-        permissions: 0,
+        permissions: '0',
         name: 'He/Him',
         color: 0xc0ebff,
         position: 2,
@@ -34,7 +34,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'ccc',
-        permissions: 0,
+        permissions: '0',
         name: 'They/Them',
         color: 0xc0ffd5,
         position: 3,
@@ -43,7 +43,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'ddd',
-        permissions: 0,
+        permissions: '0',
         name: 'Reee',
         color: 0xff0000,
         position: 4,
@@ -52,7 +52,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'eee',
-        permissions: 0,
+        permissions: '0',
         name: 'black but actually bravely default',
         color: 0x000000,
         position: 5,
@@ -61,7 +61,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'fff',
-        permissions: 0,
+        permissions: '0',
         name: 'b̻͌̆̽ͣ̃ͭ̊l͚̥͙̔ͨ̊aͥć͕k͎̟͍͕ͥ̋ͯ̓̈̉̋i͛̄̔͂̚̚҉̳͈͔̖̼̮ṣ̤̗̝͊̌͆h͈̭̰͔̥̯ͅ',
         color: 0x1,
         position: 6,
@@ -70,7 +70,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'unsafe1',
-        permissions: 0,
+        permissions: '0',
         name: 'too high',
         color: 0xff0088,
         position: 7,
@@ -79,7 +79,7 @@ export const roleCategory: Role[] = [
     },
     {
         id: 'unsafe2',
-        permissions: 0x00000008 | 0x10000000,
+        permissions: String(0x00000008 | 0x10000000),
         name: 'too strong',
         color: 0x00ff88,
         position: 8,
@@ -100,7 +100,7 @@ export const mockCategory: Category = {
 export const roleCategory2: Role[] = [
     {
         id: 'ddd2',
-        permissions: 0,
+        permissions: '0',
         name: 'red',
         color: 0xff0000,
         position: 9,
@@ -109,7 +109,7 @@ export const roleCategory2: Role[] = [
     },
     {
         id: 'eee2',
-        permissions: 0,
+        permissions: '0',
         name: 'green',
         color: 0x00ff00,
         position: 10,
@@ -142,9 +142,7 @@ export const guild: Guild = {
     name: 'emoji megaporium',
     id: '421896162539470888',
     icon: '3372fd895ed913b55616c5e49cd50e60',
-    ownerid: 'bbb',
-    membercount: 23453,
-    splash: '',
+    roles: [],
 };
 
 export const guildMap: { [x: string]: Guild } = {
@@ -153,25 +151,19 @@ export const guildMap: { [x: string]: Guild } = {
         name: 'Roleypoly',
         id: '203493697696956418',
         icon: 'ff08d36f5aee1ff48f8377b65d031ab0',
-        ownerid: 'bbb',
-        membercount: 23453,
-        splash: '',
+        roles: [],
     },
     'chamber of secrets': {
         name: 'chamber of secrets',
         id: 'aaa',
         icon: '',
-        ownerid: 'bbb',
-        membercount: 23453,
-        splash: '',
+        roles: [],
     },
     Eclipse: {
         name: 'Eclipse',
         id: '408821059161423873',
         icon: '49dfdd8b2456e2977e80a8b577b19c0d',
-        ownerid: 'bbb',
-        membercount: 23453,
-        splash: '',
+        roles: [],
     },
 };
 

src/common/utils/hasPermission.spec.ts

@@ -5,16 +5,17 @@ import { hasPermission, hasPermissionOrAdmin, permissions } from './hasPermissio
 const roles: Role[] = [
     {
         ...guildRoles.rolesList[0],
-        permissions: permissions.ADMINISTRATOR,
+        permissions: String(permissions.ADMINISTRATOR),
     },
     {
         ...guildRoles.rolesList[0],
-        permissions:
-            permissions.SPEAK | permissions.BAN_MEMBERS | permissions.CHANGE_NICKNAME,
+        permissions: String(
+            permissions.SPEAK | permissions.BAN_MEMBERS | permissions.CHANGE_NICKNAME
+        ),
     },
     {
         ...guildRoles.rolesList[0],
-        permissions: permissions.BAN_MEMBERS,
+        permissions: String(permissions.BAN_MEMBERS),
     },
 ];
 

src/common/utils/hasPermission.ts

@@ -1,47 +1,53 @@
 import { Role } from '../types';
 
-export const evaluatePermission = (haystack: number, needle: number): boolean => {
+export const evaluatePermission = <T extends number | bigint>(
+    haystack: T,
+    needle: T
+): boolean => {
     return (haystack & needle) === needle;
 };
 
-export const hasPermission = (roles: Role[], permission: number): boolean => {
-    const aggregateRoles = roles.reduce((acc, role) => acc | role.permissions, 0);
+export const hasPermission = (roles: Role[], permission: bigint): boolean => {
+    const aggregateRoles = roles.reduce(
+        (acc, role) => acc | BigInt(role.permissions),
+        BigInt(0)
+    );
     return evaluatePermission(aggregateRoles, permission);
 };
 
-export const hasPermissionOrAdmin = (roles: Role[], permission: number): boolean =>
+export const hasPermissionOrAdmin = (roles: Role[], permission: bigint): boolean =>
     hasPermission(roles, permission | permissions.ADMINISTRATOR);
 
 export const permissions = {
-    CREATE_INSTANT_INVITE: 0x1,
-    KICK_MEMBERS: 0x2,
-    BAN_MEMBERS: 0x4,
-    ADMINISTRATOR: 0x8,
-    MANAGE_CHANNELS: 0x10,
-    MANAGE_GUILD: 0x20,
-    ADD_REACTIONS: 0x40,
-    VIEW_AUDIT_LOG: 0x80,
-    VIEW_CHANNEL: 0x400,
-    SEND_MESSAGES: 0x800,
-    SEND_TTS_MESSAGES: 0x1000,
-    MANAGE_MESSAGES: 0x2000,
-    EMBED_LINKS: 0x4000,
-    ATTACH_FILES: 0x8000,
-    READ_MESSAGE_HISTORY: 0x10000,
-    MENTION_EVERYONE: 0x20000,
-    USE_EXTERNAL_EMOJIS: 0x40000,
-    VIEW_GUILD_INSIGHTS: 0x80000,
-    CONNECT: 0x100000,
-    SPEAK: 0x200000,
-    MUTE_MEMBERS: 0x400000,
-    DEAFEN_MEMBERS: 0x800000,
-    MOVE_MEMBERS: 0x1000000,
-    USE_VAD: 0x2000000,
-    PRIORITY_SPEAKER: 0x100,
-    STREAM: 0x200,
-    CHANGE_NICKNAME: 0x4000000,
-    MANAGE_NICKNAMES: 0x8000000,
-    MANAGE_ROLES: 0x10000000,
-    MANAGE_WEBHOOKS: 0x20000000,
-    MANAGE_EMOJIS: 0x40000000,
+    CREATE_INSTANT_INVITE: BigInt(0x1),
+    KICK_MEMBERS: BigInt(0x2),
+    BAN_MEMBERS: BigInt(0x4),
+    ADMINISTRATOR: BigInt(0x8),
+    MANAGE_CHANNELS: BigInt(0x10),
+    MANAGE_GUILD: BigInt(0x20),
+    ADD_REACTIONS: BigInt(0x40),
+    VIEW_AUDIT_LOG: BigInt(0x80),
+    VIEW_CHANNEL: BigInt(0x400),
+    SEND_MESSAGES: BigInt(0x800),
+    SEND_TTS_MESSAGES: BigInt(0x1000),
+    MANAGE_MESSAGES: BigInt(0x2000),
+    EMBED_LINKS: BigInt(0x4000),
+    ATTACH_FILES: BigInt(0x8000),
+    READ_MESSAGE_HISTORY: BigInt(0x10000),
+    MENTION_EVERYONE: BigInt(0x20000),
+    USE_EXTERNAL_EMOJIS: BigInt(0x40000),
+    VIEW_GUILD_INSIGHTS: BigInt(0x80000),
+    CONNECT: BigInt(0x100000),
+    SPEAK: BigInt(0x200000),
+    MUTE_MEMBERS: BigInt(0x400000),
+    DEAFEN_MEMBERS: BigInt(0x800000),
+    MOVE_MEMBERS: BigInt(0x1000000),
+    USE_VAD: BigInt(0x2000000),
+    PRIORITY_SPEAKER: BigInt(0x100),
+    STREAM: BigInt(0x200),
+    CHANGE_NICKNAME: BigInt(0x4000000),
+    MANAGE_NICKNAMES: BigInt(0x8000000),
+    MANAGE_ROLES: BigInt(0x10000000),
+    MANAGE_WEBHOOKS: BigInt(0x20000000),
+    MANAGE_EMOJIS: BigInt(0x40000000),
 };

src/design-system/atoms/role/Role.tsx

@@ -2,6 +2,7 @@ import chroma from 'chroma-js';
 import * as React from 'react';
 import { FaCheck, FaTimes } from 'react-icons/fa';
 import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
+import { evaluatePermission, permissions } from 'roleypoly/common/utils/hasPermission';
 import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
 import * as styled from './Role.styled';
 
@@ -67,12 +68,12 @@ const disabledReason = (role: RPCRole) => {
         case RoleSafety.HIGHERTHANBOT:
             return `This role is above Roleypoly's own role.`;
         case RoleSafety.DANGEROUSPERMISSIONS:
-            const { permissions } = role;
+            const rolePermissions = BigInt(role.permissions);
             let permissionHits: string[] = [];
 
-            (permissions & 0x00000008) === 0x00000008 &&
+            evaluatePermission(rolePermissions, permissions.ADMINISTRATOR) &&
                 permissionHits.push('Administrator');
-            (permissions & 0x10000000) === 0x10000000 &&
+            evaluatePermission(rolePermissions, permissions.MANAGE_ROLES) &&
                 permissionHits.push('Manage Roles');
 
             return `This role has unsafe permissions: ${permissionHits.join(', ')}`;

src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx

@@ -12,7 +12,7 @@ const adminRoles: Role[] = [
     {
         id: 'roley2',
         name: 'Admin',
-        permissions: 0,
+        permissions: '0',
         color: chroma('hotpink').num(),
         position: -1,
         managed: true,
@@ -21,7 +21,7 @@ const adminRoles: Role[] = [
     {
         id: 'roley3',
         name: 'Moderator',
-        permissions: 0,
+        permissions: '0',
         color: chroma('lime').num(),
         position: -1,
         managed: true,
@@ -32,7 +32,7 @@ const adminRoles: Role[] = [
 const roleypolyRole: Role = {
     id: 'roley',
     name: 'Roleypoly',
-    permissions: 0,
+    permissions: '0',
     color: chroma(palette.taupe500).num(),
     position: -1,
     managed: true,

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es2019",
+        "target": "es2020",
         "module": "commonjs",
         "lib": [
             "dom",