wip(remote-worker): use remote worker

Try to use remote worker to load changes

Signed-off-by: Santiago Jimenez Giraldo <[email protected]>

frontend/rsbuild.config.ts

@@ -71,6 +71,7 @@ export default defineConfig({
             config.output.publicPath = 'auto';
             config.output.globalObject = 'self';
             config.output.filename = '[name].bundle.js';
+            config.output.crossOriginLoading = 'anonymous';
 
             const plugins = [
                 new NodePolyfillPlugin({

frontend/src/config.ts

@@ -27,6 +27,7 @@ import { monacoYamlOptions } from './components/misc/PipelinesYamlEditor';
 import * as monaco from 'monaco-editor';
 import { loader, Monaco } from '@monaco-editor/react';
 import { LicenseService } from './protogen/redpanda/api/console/v1alpha1/license_connect';
+// import './remoteWebWorker';
 
 declare const __webpack_public_path__: string;
 
@@ -212,6 +213,13 @@ export const setup = memoizeOne((setupArgs: SetConfigArguments) => {
 
     // Ensure yaml workers are being loaded locally as well
     loader.init().then(async (monaco) => {
+        // const jsonWorker = await new CorsWorker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)).createWorker();
+        // const yamlWorker = await new CorsWorker(new URL('monaco-yaml/yaml.worker', import.meta.url)).createWorker();
+        // const tsWorker = await new CorsWorker(
+        //     new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url)
+        // ).createWorker();
+        //
+        // const genericWorker = await new CorsWorker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)).createWorker();
         // eslint-disable-next-line no-restricted-globals
         window.MonacoEnvironment = {
             getWorker(moduleId, label) {

frontend/src/remoteWebWorker.ts

@@ -0,0 +1,56 @@
+// Patch Worker to allow loading scripts from remote URLs
+//
+// It's a workaround for the fact that the Worker constructor
+// accepts only local URLs, not remote URLs:
+// https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker
+//
+// As a workaround this patched Worker constructor will
+// use `importScripts` to load the remote script.
+// https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts
+//
+// Compatibility: Chrome 4+, Firefox 4+, Safari 4+
+//
+// Usage:
+// ```ts
+// import "remote-web-worker";
+// ```
+typeof window !== 'undefined' &&
+    (Worker = ((BaseWorker: typeof Worker) =>
+        // eslint-disable-next-line no-global-assign
+        class Worker extends BaseWorker {
+            constructor(scriptURL: string | URL, options?: WorkerOptions) {
+                const url = String(scriptURL);
+
+                super(
+                    // Check if the URL is remote
+                    url.includes('://')
+                        ? // Launch the worker with an inline script that will use `importScripts`
+                          // to bootstrap the actual script to work around the same origin policy.
+                          URL.createObjectURL(
+                              new Blob(
+                                  [
+                                      // Replace the `importScripts` function with
+                                      // a patched version that will resolve relative URLs
+                                      // to the remote script URL.
+                                      //
+                                      // Without a patched `importScripts` Webpack 5 generated worker chunks will fail with the following error:
+                                      //
+                                      // Uncaught (in promise) DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope':
+                                      // The script at 'http://some.domain/worker.1e0e1e0e.js' failed to load.
+                                      //
+                                      // For minification, the inlined variable names are single letters:
+                                      // i = original importScripts
+                                      // a = arguments
+                                      // u = URL
+                                      `importScripts("${url}")`,
+                                  ],
+                                  { type: 'text/javascript' }
+                              )
+                          )
+                        : scriptURL,
+                    options
+                );
+            }
+        })(Worker));
+
+export {};