fix(robot): fallback in case shared worker not supported (#963)

* fix(backend): fallback in case shared worker not supproted
* refact(workers); tiny refactoring for callback
* refact(workers); reuse expose method for fallback BL
* refact(workers): simplify fallback

package.json

@@ -234,7 +234,8 @@
     "ts-jest-resolver": "^2.0.1",
     "videostream": "^3.2.2",
     "web3": "1.2.4",
-    "web3-utils": "^1.2.4"
+    "web3-utils": "^1.2.4",
+    "worker-url": "^1.1.0"
   },
   "prec-commit": [
     "lint"

src/services/backend/workers/background/service.ts

@@ -1,8 +1,12 @@
-import { wrap } from 'comlink';
+import { WorkerUrl } from 'worker-url';
 import { BackendWorkerApi } from './worker';
+import { createWorker } from '../workerUtils';
 
-const worker = new SharedWorker(new URL('./worker.ts', import.meta.url), {
-  name: 'cyb~backend',
-});
+const workerUrl = new WorkerUrl(new URL('./worker.ts', import.meta.url));
 
-export const backendApi = wrap<BackendWorkerApi>(worker.port);
+export const { apiProxy: backendApi } = createWorker<BackendWorkerApi>(
+  workerUrl,
+  'cyb~backend'
+);
+
+// export const backendApi;

src/services/backend/workers/background/worker.ts

@@ -1,4 +1,3 @@
-import { expose } from 'comlink';
 import { AppIPFS, IPFSContent } from 'src/utils/ipfs/ipfs';
 import { IpfsOptsType } from 'src/contexts/ipfs';
 
@@ -27,6 +26,7 @@ import {
   PlainCyberLink,
   importCyberlinks as importCyberlinks_,
 } from './importers/links';
+import { exposeWorker, onConnect } from '../workerUtils';
 
 const backendApiFactory = () => {
   let ipfsNode: AppIPFS | undefined;
@@ -153,6 +153,5 @@ const backendApi = backendApiFactory();
 
 export type BackendWorkerApi = typeof backendApi;
 
-// Expose the API to the main thread
-// expose(backendApi);
-onconnect = (e) => expose(backendApi, e.ports[0]);
+// Expose the API to the main thread as shared/regular worker
+exposeWorker(self, backendApi);

src/services/backend/workers/db/service.ts

@@ -1,12 +1,16 @@
-import { wrap, proxy } from 'comlink';
+import { proxy } from 'comlink';
 import { waitUntil } from 'src/utils/async/utils';
+import { WorkerUrl } from 'worker-url';
 
 import { DbWorkerApi } from './worker';
+import { createWorker } from '../workerUtils';
 
-const worker = new SharedWorker(new URL('./worker.ts', import.meta.url), {
-  name: 'cyb~cozodb',
-});
-const dbApiProxy = wrap<DbWorkerApi>(worker.port);
+const workerUrl = new WorkerUrl(new URL('./worker.ts', import.meta.url));
+
+const { apiProxy: dbApiProxy } = createWorker<DbWorkerApi>(
+  workerUrl,
+  'cyb~cozodb'
+);
 
 function dbServiceApi() {
   let isInitialized = false;

src/services/backend/workers/db/worker.ts

@@ -1,6 +1,6 @@
-import { expose } from 'comlink';
 import BcChannel from 'src/services/backend/channels/BroadcastChannel';
 import cozoDb from 'src/services/CozoDb/cozoDb';
+import { exposeWorker } from '../workerUtils';
 
 const dbApiFactory = () => {
   console.log('----dbApi worker constructor!');
@@ -69,6 +69,5 @@ const dbApi = dbApiFactory();
 
 export type DbWorkerApi = typeof dbApi;
 
-// Expose the \API to the main thread
-// expose(api);
-onconnect = (e) => expose(dbApi, e.ports[0]);
+// Expose the API to the main thread as shared/regular worker
+exposeWorker(self, dbApi);

src/services/backend/workers/workerUtils.ts

@@ -0,0 +1,28 @@
+import { wrap, Remote, expose } from 'comlink';
+
+type WorkerType = SharedWorker | Worker;
+
+// Create Shared Worker with fallback to usual Worker(in case of DEV too)
+// eslint-disable-next-line import/prefer-default-export
+export function createWorker<T>(
+  workerUrl: URL,
+  workerName: string
+): { worker: WorkerType; apiProxy: Remote<T> } {
+  const isSharedWorkersSupported = typeof SharedWorker !== 'undefined';
+
+  if (isSharedWorkersSupported && !process.env.IS_DEV) {
+    const worker = new SharedWorker(workerUrl, { name: workerName });
+    return { worker, apiProxy: wrap<T>(worker.port) };
+  }
+
+  const worker = new Worker(workerUrl);
+  return { worker, apiProxy: wrap<T>(worker) };
+}
+
+export function exposeWorker<T>(worker: WorkerType, api: T) {
+  if (typeof worker.onconnect !== 'undefined') {
+    worker.onconnect = (e) => expose(api, e.ports[0]);
+  } else {
+    expose(api);
+  }
+}

webpack.config.common.js

@@ -4,8 +4,8 @@ const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const BootloaderPlugin = require('./src/components/loader/webpack-loader');
+const WorkerUrlPlugin = require('worker-url/plugin');
 
 require('dotenv').config();
 
@@ -60,6 +60,7 @@ const config = {
     },
   },
   plugins: [
+    new WorkerUrlPlugin(),
     new NodePolyfillPlugin(),
     new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
       const mod = resource.request.replace(/^node:/, '');
@@ -78,7 +79,7 @@ const config = {
     new BootloaderPlugin(HTMLWebpackPlugin, {
       script: './src/components/loader/loader.js',
     }),
-    new ReactRefreshWebpackPlugin(),
+
     new HTMLWebpackPlugin({
       template: path.join(__dirname, 'src', 'index.html'),
       favicon: 'src/image/favicon.ico',

webpack.config.dev.js

@@ -1,5 +1,7 @@
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 const commonConfig = require('./webpack.config.common');
 
 module.exports = merge(commonConfig, {
@@ -25,5 +27,6 @@ module.exports = merge(commonConfig, {
       ).definitions,
       'process.env.IS_DEV': JSON.stringify(true),
     }),
+    new ReactRefreshWebpackPlugin(),
   ],
 });

webpack.config.prod.js

@@ -3,6 +3,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const commonConfig = require('./webpack.config.common');
+const BundleInfoPlugin = require('./webpack/BundleInfoPlugin.js');
 
 module.exports = merge(commonConfig, {
   mode: 'production',
@@ -36,7 +37,7 @@ module.exports = merge(commonConfig, {
             new CompressionWebpackPlugin({
               filename: '[path][base].gz',
               algorithm: 'gzip',
-              test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
+              test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg+$|\.wasm?.+$/,
               threshold: 10240,
               minRatio: 0.8,
             }),

webpack/BundleInfoPlugin.js

@@ -0,0 +1,38 @@
+class BundleInfoPlugin {
+  constructor(options) {
+    // you can define options if needed
+    this.options = options || {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync(
+      'BundleInfoPlugin',
+      (compilation, callback) => {
+        let result = {};
+
+        for (let filename in compilation.assets) {
+          let size = compilation.assets[filename].size();
+          result[filename] = size;
+        }
+
+        // Convert the result object to JSON format
+        let jsonResult = JSON.stringify(result, null, 2);
+
+        // Add the JSON to the compilation's assets for output
+        compilation.assets['bundle_info.json'] = {
+          source: function () {
+            return jsonResult;
+          },
+          size: function () {
+            return jsonResult.length;
+          },
+        };
+
+        // Continue with the build process
+        callback();
+      }
+    );
+  }
+}
+
+module.exports = BundleInfoPlugin;

yarn.lock

@@ -28359,6 +28359,11 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
+worker-url@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/worker-url/-/worker-url-1.1.0.tgz#607b92f36822061dca8363d9208fea3dec6a0bcb"
+  integrity sha512-HDLF1ZcIsb9gGGUgYkvOmr4AJVkLLuWCdpJ4/xyETDYCQMuqmp3DvKkj7EGepQXvowaETg32lENI6Dmqq59ywA==
+
 world-calendars@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/world-calendars/-/world-calendars-1.0.3.tgz#b25c5032ba24128ffc41d09faf4a5ec1b9c14335"