chore: streamline build pipeline (#2325)

Our build pipeline contained some quirks and the remains of previous
setups. It was time to clean it up :)

The main changes are:

**No rollup.** Previously our build pipeline was implemented in rollup.
To simplify things up, we now just run a couple of processes in
parallel: tsc to build our normal distribution and type declarations,
esbuild to build bundles, and a shell script to include assets in the
distribution.

For development, just `tsc --watch` is enough.

**No babel.** Previously our rollup config included babel transpilation
with babel-preset-env. That means we included babel-runtime in our
distribution, and transpiled async functions into generators with the
notorious `regenerator-runtime`.

Babel is now excluded from the build process (but still used as a parser
for JS files in eslint). Targeting ES2020 in tsc and esbuild should be
enough. And we finally have regular async functions in our distribution
:)

**Esbuild for bundles.** We now use esbuild instead of rollup for
creating a CJS bundles. And we no longer create UDM browser bundles.

**TS5.** I used this opportunity to bump TypeScript version as well :)

Also, removed webpack and postcss dependencies - they were not used at
all.

1. Bump prettier, eslint and eslint plugin versions. Will result in *a
lot* of warnings, but good for future-proofing.
2. Review our eslintrc, it's currently a bit of a mess.
3. Remove babel completely, use typescript-eslint instead.
4. Switch to `"module": "NodeNext"` in tsconfig. This is the new
recommended option for libraries, but will require us to add extensions
to all of our import statements, to make them fully qualified.
5. (breaking change) With `"module": "NodeNext"` we will be ready to add
`"type": "module"` in our package.json. We can't do that now, because
fully specified import statements are expected from module packages.
6. (breaking change) Drop all bundles. CJS bundle is kinda weird anyway.
Browser bundle can be replaced by `<script type="module">`.

---------

Co-authored-by: Anton Arnautov <[email protected]>

Author: 2 people

.eslintrc.json

@@ -4,7 +4,6 @@
     "babel",
     "jest-dom",
     "jest",
-    "markdown",
     "prettier",
     "react-hooks",
     "import",
@@ -17,6 +16,8 @@
     "plugin:jest/all",
     "plugin:jest-dom/recommended"
   ],
+  // Next.js example comes with its own ESLint setup
+  "ignorePatterns": "examples/nextjs",
   "rules": {
     "array-callback-return": 2,
     "arrow-body-style": 2,
@@ -154,7 +155,6 @@
       "plugins": [
         "@typescript-eslint",
         "babel",
-        "markdown",
         "prettier",
         "react",
         "typescript-sort-keys",
@@ -171,7 +171,8 @@
         "array-callback-return": 2,
         "arrow-body-style": 2,
         "comma-dangle": 0,
-        "babel/no-invalid-this": 2,
+        "babel/no-invalid-this": 0,
+        "@typescript-eslint/no-invalid-this": 2,
         "default-case": 2,
         "eqeqeq": [2, "smart"],
         "linebreak-style": [2, "unix"],

.github/workflows/ci.yml

@@ -42,7 +42,9 @@ jobs:
           key: ${{ runner.os }}-${{ matrix.node }}-modules-${{ hashFiles('**/yarn.lock') }}
 
       - name: 🔨 Install Dependencies & Build
-        run: yarn install --frozen-lockfile --ignore-engines
+        run: |
+          yarn install --frozen-lockfile --ignore-engines
+          yarn build
 
       - name: 🧪 Lint and Test with ${{ matrix.node }}
         env:

.github/workflows/e2e.yml

@@ -1,6 +1,6 @@
 name: E2E
 
-on: [push]
+on: [workflow_dispatch]
 
 jobs:
   e2e:

.github/workflows/release.yml

@@ -36,8 +36,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 'lts/*'
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - name: Install dependencies & Build
+        run: |
+          yarn install --frozen-lockfile
+          yarn run build
       - name: Validate CommonJS bundle
         run: yarn validate-cjs
       - name: Release

.postcssrc

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   env: {
     production: {

babel.config.js

@@ -1,6 +1,7 @@
 /* eslint-disable jest/expect-expect */
 /* eslint-disable jest/no-done-callback */
 /* eslint-disable jest/require-top-level-describe */
+/* eslint-disable jest/no-commented-out-tests */
 import selectors from './user/selectors';
 import { test } from './user/test';
 

e2e/add-message.test.ts

@@ -1,5 +1,5 @@
 /* eslint-disable jest/expect-expect */
-import { expect, Page } from '@playwright/test';
+import { Page } from '@playwright/test';
 import * as dotenv from 'dotenv';
 
 import selectors from './user/selectors';
@@ -12,7 +12,6 @@ import MessageList from './user/components/MessageList/MessageList';
 import MessageNotification, {
   getMessageNotificationSelector,
 } from './user/components/MessageList/MessageNotification';
-import QuotedMessage from './user/components/Message/QuotedMessage';
 import Thread, { composeThreadSelector } from './user/components/Thread/Thread';
 
 import type { TestingUser } from './user/User';
@@ -29,8 +28,6 @@ const USER1_CHAT_VIEW_CLASSNAME = `.${user1Id}`;
 const NEW_MESSAGE_NOTIFICATION_TEXT = 'New Messages!' as const;
 const LAST_REPLY_TEXT = 'Message 299';
 const MESSAGES_WITH_REPLIES = ['Message 149', 'Message 137', 'Message 124', 'Message 99'];
-const FIRST_MESSAGE_FIRST_PAGE = 'Message 125';
-const QUOTED_MESSAGES = ['Message 99', 'Message 137'];
 
 const scrollInSteps = async (user: TestingUser, msgNumbers = ['142', '135', '128'], cycles = 3) => {
   for (let i = 0; i < cycles; i++) {

e2e/navigate-long-message-lists.test.ts

@@ -9,19 +9,19 @@
     "@capacitor/ios": "^3.2.2",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
-    "react-scripts": "3.4.1",
+    "react-scripts": "5.0.1",
     "stream-chat": "link:../../node_modules/stream-chat",
     "stream-chat-react": "link:../../",
-    "typescript": "4.3.5"
+    "typescript": "5.4.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0"
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22"
   },
   "scripts": {
     "start": "react-scripts start",