Add React suspense, general cleanup

docker/docker-dev.dockerfile

@@ -54,6 +54,13 @@ RUN set -eux >dev/null \
 && npm install -g nodemon@${NODEMON_VERSION} yarn@${YARN_VERSION} >/dev/null \
 && npm config set scripts-prepend-node-path auto
 
+# Calm down the (in)famous chatter from yarn
+RUN set -euxo pipefail >/dev/null \
+&& sed -i'' "s/this.reporter.warn(this.reporter.lang('incompatibleResolutionVersion', pattern, reqPattern));//g" "${NODE_DIR}/lib/node_modules/yarn/lib/cli.js" \
+&& sed -i'' "s/_this2\.reporter.warn(_this2\.reporter.lang('ignoredScripts'));//g" "${NODE_DIR}/lib/node_modules/yarn/lib/cli.js" \
+&& sed -i'' 's/_this3\.reporter\.warn(_this3\.reporter\.lang(peerError.*;//g' "/opt/node/lib/node_modules/yarn/lib/cli.js"
+
+
 # Install Python dependencies
 COPY requirements.txt /
 RUN set -euxo pipefail >/dev/null \

web/.env.example

@@ -5,17 +5,15 @@ WEB_PORT_PROD=8080
 WEB_PORT_ANALYZE=8888
 
 NEXT_TELEMETRY_DISABLED=0
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
 
 DEV_ENABLE_TYPE_CHECKS=1
 DEV_ENABLE_ESLINT=1
-DEV_ENABLE_STYLELINT=0
 
 PROD_ENABLE_SOURCE_MAPS=1
 PROD_ENABLE_TYPE_CHECKS=1
 PROD_ENABLE_ESLINT=1
-PROD_ENABLE_STYLELINT=0
 
-ANALYZE=0
 PROFILE=0
 
 WATCH_POLL=0

web/.env.vercel

@@ -5,15 +5,15 @@ WEB_PORT_PROD=null
 WEB_PORT_ANALYZE=8888
 
 NEXT_TELEMETRY_DISABLED=0
+RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
 
 DEV_ENABLE_TYPE_CHECKS=1
 DEV_ENABLE_ESLINT=1
-DEV_ENABLE_STYLELINT=1
 
 PROD_ENABLE_SOURCE_MAPS=1
 PROD_ENABLE_TYPE_CHECKS=0
 PROD_ENABLE_ESLINT=0
-PROD_ENABLE_STYLELINT=0
 
-ANALYZE=0
 PROFILE=0
+
+WATCH_POLL=0

web/.eslintrc.js

@@ -80,6 +80,7 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-shadow': 'off',
     '@typescript-eslint/unbound-method': ['off'],
+    'array-func/no-unnecessary-this-arg': 'off',
     'array-func/prefer-array-from': 'off',
     'camelcase': 'warn',
     'cflint/no-substr': 'warn',
@@ -136,6 +137,7 @@ module.exports = {
     'unicorn/no-abusive-eslint-disable': 'warn',
     'unicorn/no-array-callback-reference': 'off',
     'unicorn/no-array-for-each': 'off',
+    'unicorn/no-array-method-this-argument': 'off',
     'unicorn/no-array-reduce': 'off',
     'unicorn/no-fn-reference-in-iterator': 'off',
     'unicorn/no-null': 'off',

web/config/next/lib/getEnvVars.ts

@@ -2,21 +2,17 @@ import { getbool, getenv } from '../../../lib/getenv'
 import { getDomain } from '../../../lib/getDomain'
 
 export function getEnvVars() {
-  const BABEL_ENV = getenv('BABEL_ENV')
   const NODE_ENV = getenv('NODE_ENV')
-  const ANALYZE = getbool('ANALYZE')
-  const PROFILE = getbool('PROFILE')
   const PRODUCTION = NODE_ENV === 'production'
+  const PROFILE = getbool('PROFILE')
   const DOMAIN = getDomain()
   const DOMAIN_STRIPPED = DOMAIN.replace('https://', '').replace('http://', '')
   const WATCH_POLL = getbool('WATCH_POLL', false)
 
   const common = {
-    BABEL_ENV,
     NODE_ENV,
-    ANALYZE,
-    PROFILE,
     PRODUCTION,
+    PROFILE,
     DOMAIN,
     DOMAIN_STRIPPED,
     WATCH_POLL,
@@ -28,7 +24,6 @@ export function getEnvVars() {
       ENABLE_SOURCE_MAPS: getbool('PROD_ENABLE_SOURCE_MAPS'),
       ENABLE_ESLINT: getbool('PROD_ENABLE_ESLINT'),
       ENABLE_TYPE_CHECKS: getbool('PROD_ENABLE_TYPE_CHECKS'),
-      ENABLE_STYLELINT: getbool('PROD_ENABLE_STYLELINT'),
     }
   }
 
@@ -37,6 +32,5 @@ export function getEnvVars() {
     ENABLE_SOURCE_MAPS: true,
     ENABLE_ESLINT: getbool('DEV_ENABLE_ESLINT'),
     ENABLE_TYPE_CHECKS: getbool('DEV_ENABLE_TYPE_CHECKS'),
-    ENABLE_STYLELINT: getbool('DEV_ENABLE_STYLELINT'),
   }
 }

web/config/next/loaders/removeDebugPackageLoader.js

@@ -0,0 +1,22 @@
+function stripDebugRequire(source) {
+  return source
+    .replace(
+      /__importDefault\s*\(\s*require\s*\(\s*["']\s*debug\s*["']\s*\)\s*\)/g,
+      '{ default() { return function () {} } }\n',
+    )
+    .replace(
+      /_interopRequireDefault\s*\(\s*require\s*\(\s*["']\s*debug\s*["']\s*\)\s*\)/g,
+      '{ default() { return function () {} } }\n',
+    )
+    .replace(/.*?require\(\s*["']debug["']\s*\).*/g, '(function(){return function () {}})\n')
+    .replace(/import\s+(.+)\s+from\s+["']debug["']/g, 'const $1 = (function(){ return function () {} })\n')
+}
+
+/**
+ * Webpack loader which removes imports and requires of the `debug` package from JavaScript.
+ * This is especially important in presence of WebWorkers: `debug` package uses `windows` global, which is not
+ * present in WebWorker environment.
+ */
+export default function removeDebugPackageLoader(source) {
+  this.callback(null, stripDebugRequire(source))
+}

web/config/next/next.config.ts

@@ -19,6 +19,7 @@ import getWithFriendlyConsole from './withFriendlyConsole'
 import getWithLodash from './withLodash'
 import { getWithRobotsTxt } from './withRobotsTxt'
 import getWithTypeChecking from './withTypeChecking'
+import withoutDebugPackage from './withoutDebugPackage'
 import withSvg from './withSvg'
 import withIgnore from './withIgnore'
 import withoutMinification from './withoutMinification'
@@ -28,15 +29,11 @@ import withWebpackWatchPoll from './withWebpackWatchPoll'
 import withUrlAsset from './withUrlAsset'
 
 const {
-  // BABEL_ENV,
-  // NODE_ENV,
-  // ANALYZE,
-  PROFILE,
   PRODUCTION,
+  PROFILE,
   ENABLE_SOURCE_MAPS,
   ENABLE_ESLINT,
   ENABLE_TYPE_CHECKS,
-  // ENABLE_STYLELINT,
   DOMAIN,
   DOMAIN_STRIPPED,
   WATCH_POLL,
@@ -56,8 +53,6 @@ const clientEnv = {
   DOMAIN_STRIPPED,
 }
 
-console.info(`Client-side Environment:\n${JSON.stringify(clientEnv, null, 2)}`)
-
 const nextConfig: NextConfig = {
   distDir: `.build/${process.env.NODE_ENV}/tmp`,
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx', 'all-contributorsrc'],
@@ -66,10 +61,9 @@ const nextConfig: NextConfig = {
     pagesBufferLength: 2,
   },
   modern: false,
-  // reactStrictMode: true,
+  reactStrictMode: false,
+  reactRoot: true,
   experimental: {
-    // reactMode: 'concurrent',
-    // reactRoot: true,
     scrollRestoration: true,
   },
   swcMinify: true,
@@ -100,7 +94,7 @@ const withMDX = getWithMDX({
   options: {
     remarkPlugins: [
       // prettier-ignore
-      require('remark-breaks'),
+      require("remark-breaks"),
       require('remark-images'),
       require('remark-math'),
       require('remark-slug'),
@@ -130,7 +124,7 @@ const withFriendlyConsole = getWithFriendlyConsole({
   clearConsole: false,
   projectRoot: path.resolve(moduleRoot),
   packageName: pkg.name || 'web',
-  progressBarColor: '#6529ff',
+  progressBarColor: '#3a5f0b',
 })
 
 const withExtraWatch = getWithExtraWatch({
@@ -181,6 +175,7 @@ const config = withPlugins(
     [withResolve],
     [withRobotsTxt],
     [withUrlAsset],
+    PRODUCTION && [withoutDebugPackage],
   ].filter(Boolean),
   nextConfig,
 )

web/config/next/withTypeChecking.ts

@@ -43,10 +43,12 @@ const getWithTypeChecking =
           configOverwrite: {
             compilerOptions: {
               ...tsConfig.compilerOptions,
+              allowJs: false,
               skipLibCheck: true,
               sourceMap: false,
               inlineSourceMap: false,
               declarationMap: false,
+              tsBuildInfoFile: '.cache/.tsbuildinfo.webpackplugin',
             },
             include: [
               'lib/**/*.js',

web/config/next/withoutDebugPackage.ts

@@ -0,0 +1,16 @@
+import path from 'path'
+
+import type { NextConfig } from 'next'
+
+import { addWebpackLoader } from './lib/addWebpackLoader'
+
+export default function withoutDebugPackage(nextConfig: NextConfig) {
+  return addWebpackLoader(nextConfig, (_webpackConfig, _context) => ({
+    test: /\.(ts|tsx|js|jsx)$/i,
+    use: [
+      {
+        loader: path.resolve(__dirname, 'loaders', 'removeDebugPackageLoader.js'),
+      },
+    ],
+  }))
+}