wip

packages/webapp/package.json

@@ -60,6 +60,7 @@
     "deepdash": "^5.3.9",
     "dependency-graph": "^0.11.0",
     "dotenv-webpack": "^8.0.1",
+    "esbuild-plugin-react-virtualized": "^1.0.5",
     "eslint": "^8.33.0",
     "fast-deep-equal": "^3.1.3",
     "flat": "^5.0.2",
@@ -107,6 +108,7 @@
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
     "react-virtualized": "^9.22.3",
+    "regenerator-runtime": "^0.14.1",
     "redux": "^4.2.1",
     "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
@@ -125,6 +127,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-legacy": "^5.4.2",
     "eslint-config-react-app": "^7.0.1",
     "vite": "^5.1.6"
   },

packages/webapp/src/index.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import 'regenerator-runtime/runtime';
 import './wdyr';
 import React from 'react';
 import ReactDOM from 'react-dom';

packages/webapp/src/wdyr.ts

@@ -1,3 +1,4 @@
+
 if (process.env.NODE_ENV === 'development') {
   import('@welldone-software/why-did-you-render').then(({ default: whyDidYouRender }) => {
     if (whyDidYouRender) {

packages/webapp/vite.config.ts

@@ -1,57 +1,20 @@
+// @ts-nocheck
 import react from '@vitejs/plugin-react';
-import { readFile } from 'node:fs/promises';
+import legacy from '@vitejs/plugin-legacy';
 import path from 'node:path';
-import { defineConfig, loadEnv, Plugin } from 'vite';
+import { defineConfig, loadEnv, type PluginOption } from 'vite';
+import fixReactVirtualized from 'esbuild-plugin-react-virtualized';
 
 const allowedEnvPrefixes = ['VITE_', 'REACT_APP_', 'PUBLIC_URL'];
 
-const reactVirtualizedCompat = (): Plugin => ({
-  name: 'react-virtualized-compat',
-  enforce: 'pre',
-  transform(code, id) {
-    const needsShim =
-      id.includes(
-        'node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js',
-      ) ||
-      id.includes(
-        'node_modules/react-virtualized/dist/es/WindowScroller/utils/dimensions.js',
-      );
-    if (needsShim) {
-      console.info('Applying react-virtualized shim:', id);
-      return code.replace(
-        /import \{ bpfrpt_proptype_WindowScroller \} from "\.\.\/WindowScroller\.js";/g,
-        'const bpfrpt_proptype_WindowScroller = null;',
-      );
+const pickClientEnv = (env: Record<string, string>) =>
+  Object.keys(env).reduce<Record<string, string>>((acc, key) => {
+    if (allowedEnvPrefixes.some((prefix) => key.startsWith(prefix))) {
+      acc[key] = env[key];
     }
 
-    return null;
-  },
-});
-
-const reactVirtualizedOptimizePatch = () => ({
-  name: 'react-virtualized-optimize-patch',
-  setup(build) {
-    const filter =
-      /react-virtualized\/dist\/es\/WindowScroller\/utils\/(onScroll|dimensions)\.js$/;
-    build.onLoad({ filter }, async args => {
-      const contents = await readFile(args.path, 'utf-8');
-      return {
-        contents: contents.replace(
-          /import \{ bpfrpt_proptype_WindowScroller \} from "\.\.\/WindowScroller\.js";/g,
-          'const bpfrpt_proptype_WindowScroller = null;',
-        ),
-        loader: 'js',
-      };
-    });
-  },
-});
-
-const pickClientEnv = (env: Record<string, string>) =>
-  Object.fromEntries(
-    Object.entries(env).filter(([key]) =>
-      allowedEnvPrefixes.some(prefix => key.startsWith(prefix)),
-    ),
-  );
+    return acc;
+  }, {});
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -59,9 +22,16 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, rootDir, '');
   const clientEnv = pickClientEnv(env);
   const port = Number(env.PORT) || 4000;
+  const plugins: PluginOption[] = [
+    react(),
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+    }),
+  ];
 
   return {
-    plugins: [react(), reactVirtualizedCompat()],
+    plugins,
     root: rootDir,
     resolve: {
       alias: {
@@ -92,9 +62,8 @@ export default defineConfig(({ mode }) => {
     },
     optimizeDeps: {
       esbuildOptions: {
-        plugins: [reactVirtualizedOptimizePatch()],
+        plugins: [fixReactVirtualized],
       },
     },
   };
 });
-