fix: ponyfill SharedWorker

package.json

@@ -8,8 +8,8 @@
   "types": "dist/index.d.ts",
   "exports": {
     "./worker": {
-      "types": "./dist/common/webpack/worker/web-worker.d.ts",
-      "default": "./dist/common/webpack/worker/web-worker.js"
+      "types": "./dist/common/webpack/worker/web-worker.d.mts",
+      "default": "./dist/common/webpack/worker/web-worker.mjs"
     },
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
         "./dist/index.d.ts"
       ],
       "worker": [
-        "./dist/common/webpack/worker/web-worker.d.ts"
+        "./dist/common/webpack/worker/web-worker.d.mts"
       ]
     }
   },
@@ -68,6 +68,7 @@
     "@babel/preset-react": "^7.22.0",
     "@babel/preset-typescript": "^7.22.0",
     "@babel/runtime": "^7.22.0",
+    "@okikio/sharedworker": "^1.0.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@sentry/webpack-plugin": "^2.7.1",
     "@statoscope/webpack-plugin": "^5.27.0",

src/common/webpack/worker/web-worker.mts

@@ -0,0 +1,45 @@
+// eslint-disable-next-line camelcase
+declare let __webpack_public_path__: string;
+
+// @ts-expect-error ts does not find types in @okikio/sharedworker/@types/index.d.ts
+import {SharedWorkerPolyfill} from '@okikio/sharedworker';
+
+class WebWorker extends Worker {
+    constructor(url: string | URL, options?: WorkerOptions) {
+        const objectURL = generateWorkerLoader(url);
+        super(objectURL, options);
+        URL.revokeObjectURL(objectURL);
+    }
+}
+
+class SharedWebWorker extends SharedWorkerPolyfill {
+    constructor(url: string | URL, options?: string | WorkerOptions) {
+        const objectURL = generateWorkerLoader(url);
+        super(objectURL, options);
+        URL.revokeObjectURL(objectURL);
+    }
+}
+
+export {WebWorker as Worker, SharedWebWorker as SharedWorker};
+
+function generateWorkerLoader(url: string | URL) {
+    // eslint-disable-next-line camelcase
+    const publicPath = __webpack_public_path__;
+    const workerPublicPath = publicPath.match(/^https?:\/\//)
+        ? publicPath
+        : new URL(publicPath, window.location.href).toString();
+    const objectURL = URL.createObjectURL(
+        new Blob(
+            [
+                [
+                    `self.__PUBLIC_PATH__ = ${JSON.stringify(workerPublicPath)}`,
+                    `importScripts(${JSON.stringify(url.toString())});`,
+                ].join('\n'),
+            ],
+            {
+                type: 'application/javascript',
+            },
+        ),
+    );
+    return objectURL;
+}

src/common/webpack/worker/web-worker.ts

@@ -1,6 +1,9 @@
 // eslint-disable-next-line camelcase
 declare let __webpack_public_path__: string;
 
+// @ts-expect-error ts does not find types in @okikio/sharedworker/@types/index.d.ts
+import {SharedWorkerPolyfill} from '@okikio/sharedworker';
+
 class WebWorker extends Worker {
     constructor(url: string | URL, options?: WorkerOptions) {
         const objectURL = generateWorkerLoader(url);
@@ -9,7 +12,7 @@ class WebWorker extends Worker {
     }
 }
 
-class SharedWebWorker extends SharedWorker {
+class SharedWebWorker extends SharedWorkerPolyfill {
     constructor(url: string | URL, options?: string | WorkerOptions) {
         const objectURL = generateWorkerLoader(url);
         super(objectURL, options);