import an embedded worker within another embedded worker

import-an-embedded-worker-within-another-embedded-worker.js

// 24 June 2022
// import an embedded worker within another embedded worker.

// 30 June 2022
// - cosmetic edits

// Next step in our quest to make embedded worker scripts testable in the console.

// The example creates two embedded workers, allowing one to import the other via
// importScripts(), and testing the same URL with fetch().

// ...continued from "protect against hostile worker and channel messages with addressing",
// at https://gist.github.com/dfkaye/d6b52877fc2316d705eec3965e27e7d9

// Same restrictions as before.

// Note: The following example won't run in browser pages with Content Security
// Policy that contains a `worker-src` directive that does not specify `blob:`
// as a value, such as the `console` in a GitHub gist (where I do lot of
// experimenting). If there is *no* `worker-src` directive, then this should
// *just work*...

// Inside an embedded worker, the `location` field points to the object URL used to map
// the worker script's blob. 

var importScript = `
  console.log(
    "importedScript:", self.location, self.origin
  );

  var keys = [];
  for (var k in self) { keys.push(k) }
  // console.log(keys);

  console.info("import done");
`;

var importBlob = new Blob( [ importScript ], { type: "text/javascript" } );
var importURL = URL.createObjectURL( importBlob );

var workerScript = `
  console.log(
    "workerScript:", self.location, self.origin
  );

  self.onmessage = function(request) {
    var { importURL } = Object(request.data);
    
    console.log({ importURL });

    self.ok = (async()=> {
      return fetch( importURL )
        .then(_ => true)
        .catch(_ => false);
    })();

    self.ok.then(ok => console.warn({ ok }));
    
    console.warn("keys before import:", self.keys);

    importScripts( importURL );
    
    console.log("keys after import:", self.keys);
  }
`;
var workerBlob = new Blob( [ workerScript ], { type: "text/javascript" } );
var workerURL = URL.createObjectURL( workerBlob );
var worker = new Worker( workerURL );

worker.postMessage({ importURL });

/** test it out **/

console.log( "**Tested in console on", document.location, "**" );

// **Tested in console on https://dfkaye.com**
// workerScript: blob:https://dfkaye.com/f680cef4-db61-4806-adb2-c35dfbb0841a https://dfkaye.com
// Object { importURL: "blob:https://dfkaye.com/71fb415b-a87a-4ac9-87cc-efca6b897006" }
// keys before import: undefined
// importedScript: blob:https://dfkaye.com/f680cef4-db61-4806-adb2-c35dfbb0841a https://dfkaye.com
// import done
// keys after import:
// Array(42) [ "postMessage", "close", "requestAnimationFrame", "cancelAnimationFrame", "name", "onmessage", "onmessageerror", "ok", "keys", "k", … ]
// { ok: true }