Support esnext in storybook

.storybook/main.js

@@ -2,6 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 module.exports = {
+  typescript: {
+    reactDocgen: false,
+  },
   stories: [
     '../ts/components/**/*.stories.tsx',
     '../sticker-creator/**/*.stories.tsx',
@@ -20,6 +23,9 @@ module.exports = {
     // Deprecated! Please remove when all uses have been migrated to controls.
     '@storybook/addon-knobs',
   ],
+  core: {
+    builder: 'webpack5',
+  },
   features: {
     storyStoreV7: true,
   },

.storybook/webpack.config.js

@@ -9,17 +9,46 @@ module.exports = ({ config }) => {
     '!!style-loader!css-loader!typeface-inter'
   );
 
+  config.cache = {
+    type: 'filesystem',
+  };
+
   config.module.rules.unshift({
     test: /\.scss$/,
-    loaders: [
+    use: [
-      'style-loader',
+      { loader: 'style-loader' },
-      'css-loader?modules=true&localsConvention=camelCaseOnly',
+      { loader: 'css-loader?modules=true&localsConvention=camelCaseOnly' },
-      'sass-loader',
+      { loader: 'sass-loader' },
     ],
   });
 
+  config.node = { global: true };
+
   config.externals = {
-    net: 'net',
+    net: 'commonjs net',
+    vm: 'commonjs vm',
+    fs: 'commonjs fs',
+    async_hooks: 'commonjs async_hooks',
+    module: 'commonjs module',
+    stream: 'commonjs stream',
+    tls: 'commonjs tls',
+    dns: 'commonjs dns',
+    http: 'commonjs http',
+    https: 'commonjs https',
+    os: 'commonjs os',
+    constants: 'commonjs constants',
+    zlib: 'commonjs zlib',
+    '@signalapp/libsignal-client': 'commonjs @signalapp/libsignal-client',
+    '@signalapp/libsignal-client/zkgroup': 'commonjs @signalapp/libsignal-client/zkgroup',
+    '@signalapp/ringrtc': 'commonjs @signalapp/ringrtc',
+    '@signalapp/better-sqlite3': 'commonjs @signalapp/better-sqlite3',
+    'electron': 'commonjs electron',
+    'fs-xattr': 'commonjs fs-xattr',
+    'fsevents': 'commonjs fsevents',
+    'mac-screen-capture-permissions': 'commonjs mac-screen-capture-permissions',
+    'sass': 'commonjs sass',
+    'bufferutil': 'commonjs bufferutil',
+    'utf-8-validate': 'commonjs utf-8-validate',
   };
 
   return config;

ACKNOWLEDGMENTS.md

@@ -107,18 +107,6 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-## @sindresorhus/is
-
-    MIT License
-
-    Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
 ## @types/fabric
 
     MIT License

package.json

@@ -10,6 +10,7 @@
     "name": "Signal Messenger, LLC",
     "email": "support@signal.org"
   },
+  "browserslist": "last 1 chrome versions",
   "main": "app/main.js",
   "scripts": {
     "postinstall": "yarn build:acknowledgments && patch-package && yarn electron:install-app-deps && rimraf node_modules/dtrace-provider",
@@ -91,7 +92,6 @@
     "@signalapp/better-sqlite3": "8.0.4",
     "@signalapp/libsignal-client": "0.21.1",
     "@signalapp/ringrtc": "2.23.0",
-    "@sindresorhus/is": "0.8.0",
     "@types/fabric": "4.5.3",
     "array-move": "2.1.0",
     "backbone": "1.4.0",
@@ -200,7 +200,9 @@
     "@storybook/addon-toolbars": "6.5.6",
     "@storybook/addon-viewport": "6.5.6",
     "@storybook/addons": "6.5.6",
+    "@storybook/builder-webpack5": "6.5.15",
     "@storybook/jest": "0.0.10",
+    "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.6",
     "@storybook/testing-library": "0.0.13",
     "@types/backbone": "1.4.5",
@@ -247,7 +249,7 @@
     "@types/split2": "3.2.1",
     "@types/terser-webpack-plugin": "5.0.3",
     "@types/uuid": "3.4.4",
-    "@types/webpack-dev-server": "3.11.3",
+    "@types/webpack": "5.28.0",
     "@types/websocket": "1.0.0",
     "@types/yargs": "17.0.7",
     "@typescript-eslint/eslint-plugin": "5.47.0",
@@ -272,7 +274,7 @@
     "electron-mocha": "11.0.2",
     "electron-notarize": "1.2.1",
     "endanger": "7.0.4",
-    "esbuild": "0.15.8",
+    "esbuild": "0.16.17",
     "eslint": "8.30.0",
     "eslint-config-airbnb-typescript-prettier": "5.0.0",
     "eslint-config-prettier": "8.5.0",
@@ -303,7 +305,7 @@
     "typescript": "4.9.3",
     "webpack": "5.30.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.7.4"
+    "webpack-dev-server": "4.11.1"
   },
   "resolutions": {
     "@storybook/react/@storybook/core/node-fetch": "2.6.1",

patches/@types+express+4.17.13.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@types/express/index.d.ts b/node_modules/@types/express/index.d.ts
+index 8427f02..2b4698f 100755
+--- a/node_modules/@types/express/index.d.ts
++++ b/node_modules/@types/express/index.d.ts
+@@ -55,7 +55,7 @@ declare namespace e {
+     /**
+      * This is a built-in middleware function in Express. It serves static files and is based on serve-static.
+      */
+-    var static: serveStatic.RequestHandlerConstructor<Response>;
++    var static: unknown;
+ 
+     /**
+      * This is a built-in middleware function in Express. It parses incoming requests with urlencoded payloads and is based on body-parser.

scripts/esbuild.js

@@ -12,7 +12,7 @@ const isProd = process.argv.some(argv => argv === '-prod' || argv === '--prod');
 
 const nodeDefaults = {
   platform: 'node',
-  target: 'es2020',
+  target: 'esnext',
   sourcemap: isProd ? false : 'inline',
   // Otherwise React components get renamed
   // See: https://github.com/evanw/esbuild/issues/1147

ts/OS.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import is from '@sindresorhus/is';
 import os from 'os';
 import semver from 'semver';
 
@@ -14,7 +13,7 @@ export const isWindows = (minVersion?: string): boolean => {
     return false;
   }
 
-  return is.undefined(minVersion) ? true : semver.gte(osRelease, minVersion);
+  return minVersion === undefined ? true : semver.gte(osRelease, minVersion);
 };
 
 // Windows 10 and above

ts/components/emoji/lib.ts

@@ -19,7 +19,6 @@ import {
 } from 'lodash';
 import Fuse from 'fuse.js';
 import PQueue from 'p-queue';
-import is from '@sindresorhus/is';
 import { getOwn } from '../../util/getOwn';
 import * as log from '../../logging/log';
 import { MINUTE } from '../../util/durations';
@@ -275,7 +274,7 @@ export function convertShortNameToData(
     return undefined;
   }
 
-  const toneKey = is.number(skinTone) ? skinTones[skinTone - 1] : skinTone;
+  const toneKey = isNumber(skinTone) ? skinTones[skinTone - 1] : skinTone;
 
   if (skinTone && base.skin_variations) {
     const variation = base.skin_variations[toneKey];

ts/models/conversations.ts

@@ -299,9 +299,11 @@ export class ConversationModel extends window.Backbone
     return collection;
   }
 
-  override initialize(
+  constructor(attributes: ConversationAttributesType) {
-    attributes: Partial<ConversationAttributesType> = {}
+    super(attributes);
-  ): void {
+
+    // Note that we intentionally don't use `initialize()` method because it
+    // isn't compatible with esnext output of esbuild.
     const uuid = this.get('uuid');
     const normalizedUuid =
       uuid && normalizeUuid(uuid, 'ConversationModel.initialize');

ts/models/messages.ts

@@ -298,7 +298,11 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
 
   cachedOutgoingStickerData?: StickerWithHydratedData;
 
-  override initialize(attributes: unknown): void {
+  constructor(attributes: MessageAttributesType) {
+    super(attributes);
+
+    // Note that we intentionally don't use `initialize()` method because it
+    // isn't compatible with esnext output of esbuild.
     if (isObject(attributes)) {
       this.set(
         TypedMessage.initializeSchemaVersion({

ts/textsecure/WebAPI.ts

@@ -10,8 +10,7 @@ import type { Response } from 'node-fetch';
 import fetch from 'node-fetch';
 import ProxyAgent from 'proxy-agent';
 import { Agent } from 'https';
-import { escapeRegExp, isNumber } from 'lodash';
+import { escapeRegExp, isNumber, isString, isObject } from 'lodash';
-import is from '@sindresorhus/is';
 import PQueue from 'p-queue';
 import { v4 as getGuid } from 'uuid';
 import { z } from 'zod';
@@ -1056,37 +1055,37 @@ export function initialize({
   proxyUrl,
   version,
 }: InitializeOptionsType): WebAPIConnectType {
-  if (!is.string(url)) {
+  if (!isString(url)) {
     throw new Error('WebAPI.initialize: Invalid server url');
   }
-  if (!is.string(storageUrl)) {
+  if (!isString(storageUrl)) {
     throw new Error('WebAPI.initialize: Invalid storageUrl');
   }
-  if (!is.string(updatesUrl)) {
+  if (!isString(updatesUrl)) {
     throw new Error('WebAPI.initialize: Invalid updatesUrl');
   }
-  if (!is.string(resourcesUrl)) {
+  if (!isString(resourcesUrl)) {
     throw new Error('WebAPI.initialize: Invalid updatesUrl (general)');
   }
-  if (!is.object(cdnUrlObject)) {
+  if (!isObject(cdnUrlObject)) {
     throw new Error('WebAPI.initialize: Invalid cdnUrlObject');
   }
-  if (!is.string(cdnUrlObject['0'])) {
+  if (!isString(cdnUrlObject['0'])) {
     throw new Error('WebAPI.initialize: Missing CDN 0 configuration');
   }
-  if (!is.string(cdnUrlObject['2'])) {
+  if (!isString(cdnUrlObject['2'])) {
     throw new Error('WebAPI.initialize: Missing CDN 2 configuration');
   }
-  if (!is.string(certificateAuthority)) {
+  if (!isString(certificateAuthority)) {
     throw new Error('WebAPI.initialize: Invalid certificateAuthority');
   }
-  if (!is.string(contentProxyUrl)) {
+  if (!isString(contentProxyUrl)) {
     throw new Error('WebAPI.initialize: Invalid contentProxyUrl');
   }
-  if (proxyUrl && !is.string(proxyUrl)) {
+  if (proxyUrl && !isString(proxyUrl)) {
     throw new Error('WebAPI.initialize: Invalid proxyUrl');
   }
-  if (!is.string(version)) {
+  if (!isString(version)) {
     throw new Error('WebAPI.initialize: Invalid version');
   }
 
@@ -2469,7 +2468,7 @@ export function initialize({
         'X-SignalPadding': getHeaderPadding(),
       };
 
-      if (is.number(start) && is.number(end)) {
+      if (isNumber(start) && isNumber(end)) {
         headers.Range = `bytes=${start}-${end}`;
       }
 
@@ -2852,9 +2851,9 @@ export function initialize({
 
         if (
           match &&
-          is.number(start) &&
+          isNumber(start) &&
-          is.number(end) &&
+          isNumber(end) &&
-          is.number(currentRevision)
+          isNumber(currentRevision)
         ) {
           return {
             changes,

ts/types/Attachment.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import is from '@sindresorhus/is';
 import moment from 'moment';
 import {
   isNumber,
@@ -9,6 +8,7 @@ import {
   isTypedArray,
   isFunction,
   isUndefined,
+  isString,
   omit,
 } from 'lodash';
 import { blobToArrayBuffer } from 'blob-util';
@@ -255,7 +255,7 @@ const INVALID_CHARACTERS_PATTERN = new RegExp(
 export function _replaceUnicodeOrderOverridesSync(
   attachment: AttachmentType
 ): AttachmentType {
-  if (!is.string(attachment.fileName)) {
+  if (!isString(attachment.fileName)) {
     return attachment;
   }
 
@@ -284,7 +284,7 @@ const V2_UNWANTED_UNICODE = /[\u202A-\u202E\u2066-\u2069\u200E\u200F\u061C]/g;
 export async function replaceUnicodeV2(
   attachment: AttachmentType
 ): Promise<AttachmentType> {
-  if (!is.string(attachment.fileName)) {
+  if (!isString(attachment.fileName)) {
     return attachment;
   }
 
@@ -326,7 +326,7 @@ export function loadData(
 ): (
   attachment: Pick<AttachmentType, 'data' | 'path'>
 ) => Promise<AttachmentWithHydratedData> {
-  if (!is.function_(readAttachmentData)) {
+  if (!isFunction(readAttachmentData)) {
     throw new TypeError("'readAttachmentData' must be a function");
   }
 
@@ -340,7 +340,7 @@ export function loadData(
       return attachment as AttachmentWithHydratedData;
     }
 
-    if (!is.string(attachment.path)) {
+    if (!isString(attachment.path)) {
       throw new TypeError("'attachment.path' is required");
     }
 
@@ -352,7 +352,7 @@ export function loadData(
 export function deleteData(
   deleteOnDisk: (path: string) => Promise<void>
 ): (attachment?: AttachmentType) => Promise<void> {
-  if (!is.function_(deleteOnDisk)) {
+  if (!isFunction(deleteOnDisk)) {
     throw new TypeError('deleteData: deleteOnDisk must be a function');
   }
 
@@ -362,15 +362,15 @@ export function deleteData(
     }
 
     const { path, thumbnail, screenshot } = attachment;
-    if (is.string(path)) {
+    if (isString(path)) {
       await deleteOnDisk(path);
     }
 
-    if (thumbnail && is.string(thumbnail.path)) {
+    if (thumbnail && isString(thumbnail.path)) {
       await deleteOnDisk(thumbnail.path);
     }
 
-    if (screenshot && is.string(screenshot.path)) {
+    if (screenshot && isString(screenshot.path)) {
       await deleteOnDisk(screenshot.path);
     }
   };
@@ -689,7 +689,7 @@ export function isGIF(attachments?: ReadonlyArray<AttachmentType>): boolean {
   const flag = SignalService.AttachmentPointer.Flags.GIF;
   const hasFlag =
     // eslint-disable-next-line no-bitwise
-    !is.undefined(attachment.flags) && (attachment.flags & flag) === flag;
+    !isUndefined(attachment.flags) && (attachment.flags & flag) === flag;
 
   return hasFlag && isVideoAttachment(attachment);
 }
@@ -856,7 +856,7 @@ export function getAlt(
 export const isVisualMedia = (attachment: AttachmentType): boolean => {
   const { contentType } = attachment;
 
-  if (is.undefined(contentType)) {
+  if (isUndefined(contentType)) {
     return false;
   }
 
@@ -870,7 +870,7 @@ export const isVisualMedia = (attachment: AttachmentType): boolean => {
 export const isFile = (attachment: AttachmentType): boolean => {
   const { contentType } = attachment;
 
-  if (is.undefined(contentType)) {
+  if (isUndefined(contentType)) {
     return false;
   }
 
@@ -889,13 +889,13 @@ export const isVoiceMessage = (attachment: AttachmentType): boolean => {
   const flag = SignalService.AttachmentPointer.Flags.VOICE_MESSAGE;
   const hasFlag =
     // eslint-disable-next-line no-bitwise
-    !is.undefined(attachment.flags) && (attachment.flags & flag) === flag;
+    !isUndefined(attachment.flags) && (attachment.flags & flag) === flag;
   if (hasFlag) {
     return true;
   }
 
   const isLegacyAndroidVoiceMessage =
-    !is.undefined(attachment.contentType) &&
+    !isUndefined(attachment.contentType) &&
     MIME.isAudio(attachment.contentType) &&
     !attachment.fileName;
   if (isLegacyAndroidVoiceMessage) {

ts/util/arrayBufferToObjectURL.ts

@@ -1,8 +1,6 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import is from '@sindresorhus/is';
-
 import type { MIMEType } from '../types/MIME';
 
 export const arrayBufferToObjectURL = ({
@@ -12,7 +10,7 @@ export const arrayBufferToObjectURL = ({
   data: ArrayBuffer;
   type: MIMEType;
 }): string => {
-  if (!is.arrayBuffer(data)) {
+  if (!(data instanceof ArrayBuffer)) {
     throw new TypeError('`data` must be an ArrayBuffer');
   }
 

ts/util/lint/exceptions.json

@@ -409,16 +409,9 @@
   {
     "rule": "DOM-innerHTML",
     "path": "node_modules/@sindresorhus/is/dist/index.js",
-    "line": "        'innerHTML',",
+    "line": "    'innerHTML',",
-    "reasonCategory": "falseMatch",
+    "reasonCategory": "usageTrusted",
-    "updated": "2018-09-15T00:38:04.183Z"
+    "updated": "2021-10-06T15:40:12.124Z"
-  },
-  {
-    "rule": "DOM-innerHTML",
-    "path": "node_modules/@sindresorhus/is/dist/source/index.js",
-    "line": "        'innerHTML',",
-    "reasonCategory": "falseMatch",
-    "updated": "2018-09-15T00:38:04.183Z"
   },
   {
     "rule": "eval",
@@ -696,6 +689,20 @@
     "reasonCategory": "falseMatch",
     "updated": "2018-09-15T00:38:04.183Z"
   },
+  {
+    "rule": "DOM-outerHTML",
+    "path": "node_modules/domutils/node_modules/dom-serializer/lib/esm/index.js",
+    "line": " * Can be thought of as the equivalent of the `outerHTML` of the passed node(s).",
+    "reasonCategory": "falseMatch",
+    "updated": "2023-01-11T23:51:00.603Z"
+  },
+  {
+    "rule": "DOM-outerHTML",
+    "path": "node_modules/domutils/node_modules/dom-serializer/lib/index.js",
+    "line": " * Can be thought of as the equivalent of the `outerHTML` of the passed node(s).",
+    "reasonCategory": "falseMatch",
+    "updated": "2023-01-11T23:51:00.603Z"
+  },
   {
     "rule": "DOM-innerHTML",
     "path": "node_modules/element-resize-detector/dist/element-resize-detector.js",
@@ -808,13 +815,6 @@
     "updated": "2021-02-16T19:08:17.452Z",
     "reasonDetail": "Hard-coded string used for testing capabilities."
   },
-  {
-    "rule": "DOM-innerHTML",
-    "path": "node_modules/got/node_modules/@sindresorhus/is/dist/index.js",
-    "line": "    'innerHTML',",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-10-06T15:40:12.124Z"
-  },
   {
     "rule": "DOM-innerHTML",
     "path": "node_modules/html-minifier-terser/node_modules/terser/dist/bundle.min.js",

ts/util/privacy.ts

@@ -3,11 +3,10 @@
 
 /* eslint-env node */
 
-import is from '@sindresorhus/is';
 import { join as pathJoin } from 'path';
 
 import { compose } from 'lodash/fp';
-import { escapeRegExp } from 'lodash';
+import { escapeRegExp, isString, isRegExp } from 'lodash';
 
 export const APP_ROOT_PATH = pathJoin(__dirname, '..', '..');
 
@@ -21,18 +20,18 @@ const REDACTION_PLACEHOLDER = '[REDACTED]';
 export type RedactFunction = (value: string) => string;
 
 export const _redactPath = (filePath: string): RedactFunction => {
-  if (!is.string(filePath)) {
+  if (!isString(filePath)) {
     throw new TypeError("'filePath' must be a string");
   }
 
   const filePathPattern = _pathToRegExp(filePath);
 
   return (text: string): string => {
-    if (!is.string(text)) {
+    if (!isString(text)) {
       throw new TypeError("'text' must be a string");
     }
 
-    if (!is.regExp(filePathPattern)) {
+    if (!isRegExp(filePathPattern)) {
       return text;
     }
 
@@ -63,7 +62,7 @@ export const _pathToRegExp = (filePath: string): RegExp | undefined => {
 
 // Public API
 export const redactPhoneNumbers = (text: string): string => {
-  if (!is.string(text)) {
+  if (!isString(text)) {
     throw new TypeError("'text' must be a string");
   }
 
@@ -71,7 +70,7 @@ export const redactPhoneNumbers = (text: string): string => {
 };
 
 export const redactUuids = (text: string): string => {
-  if (!is.string(text)) {
+  if (!isString(text)) {
     throw new TypeError("'text' must be a string");
   }
 
@@ -79,7 +78,7 @@ export const redactUuids = (text: string): string => {
 };
 
 export const redactGroupIds = (text: string): string => {
-  if (!is.string(text)) {
+  if (!isString(text)) {
     throw new TypeError("'text' must be a string");
   }