Proper way to run an importScripts plugin

[CraigglesO]

const fs = require('fs').promises

// https://stackoverflow.com/questions/21913673/execute-web-worker-from-different-origin

module.exports = function (config, options) {
  return {
    name: 'worker-plugin',
    resolve: {
      input: ['.js'],
      output: ['.js', '.wjs'],
    },
    async transform ({id, contents, isDev, fileExt}) {
      if (id.includes('.worker.js')) {
        contents.replace('FILE_URL', 'https://greggman.github.io/doodles/test/ping-worker.js')
        return contents
      }
    },
    async load ({ filePath }) {
      if (filePath.includes('.worker.js')) {
        const wjs = await fs.readFile(filePath, 'utf-8')
        const js = 'export default (function(){ return URL.createObjectURL(new Blob(["importScripts(\'FILE_URL\')"], {type: "text/javascript"})) })()'

        return {
          '.js': js,
          '.wjs': wjs
        }
      }
    }
  }
}

// the js with the workers look like this:

import aWorker from './worker/a.worker.js'

....


const worker = new Worker(aWorker, { name: 'a-worker' })

I'm building an app where you add the app using a <script> tag in your html, therefore the workers won't build because they will be requested at a different origin than the source. So I am trying to build an importScripts method.

My questions are as follows:

• Why does this not work? when it asks for the file on the dev server, the blob url is "undefined" currently.
• How do I build the write path in transform for the dev server and build have the proper beginning path prior to writing the fileName. AKA, if the location is /dist/worker/a.worker.js, how do I make sure it looks at localhost:8080/dist/worker/a.worker.js in the transform, whereas if it is not dev, obviously I would just change localhost:8080 to the location on the CDN.

[CraigglesO]

Just to add to this discussion,

It seems like I can simplify the plugin a little by doing THIS for my workers:

import aWorker from './workers/a.worker.js'
....

const aWorker = new Worker(URL.createObjectURL(new Blob([`importScripts('${aWorker}')`], { type: 'text/javascript' })), { name: 'a-worker' })

and my worker plugin currently looks like this:

module.exports = function (config, options) {
  return {
    name: 'worker-plugin',
    resolve: {
      input: ['.js'],
      output: ['.js'],
    },
    async load ({ filePath }) {
      if (filePath.includes('.worker.js')) {
        const wjs = await fs.readFile(filePath, 'utf-8')
        const js = 'export default \'https://greggman.github.io/doodles/test/ping-worker.js\''

        return {
          '.js': js
        }
      }
    }
  }
}

Then the only thing I have to worry about is pre building the worker with Webpack and sending out a string that is the location of the pre-made worker.

basically, if you can offer advice on how to pre-build the worker I think I'll be set. I don't think it will be to hard to figure out during the build phase, but sending out the appropriate location for the actual worker file during dev is a bit tricky.

[CraigglesO]

I must be so close, because inlining the createObjectURL blob I re-wrote the plugin like this:

const fs = require('fs').promises

// https://stackoverflow.com/questions/21913673/execute-web-worker-from-different-origin

module.exports = function (config, options) {
  return {
    name: 'worker-plugin',
    resolve: {
      input: ['.js'],
      output: ['.js', '.wjs']
    },
    async transform ({ id, contents, isDev, fileExt }) {
      if (id.includes('.worker.js')) {
        if (isDev) {
          // given the config, find what the filePath and head look like,
          // use the options.url to find the correct mount point
          const { devOptions, mount } = config
          let head = ''
          let pathReplace = ''
          for (const [path, details] of Object.entries(mount)) {
            if (details.url === options.url) {
              head = details.url
              pathReplace = path
              break
            }
          }
          // build the url path
          const { secure, hostname, port } = config.devOptions
          const url = `${secure ? 'https' : 'http'}://${hostname}:${port}`
          const path = id.replace(pathReplace, '').replace('.js', '.wjs')
          // replace the JS contents with the actual location
          contents = contents.replace('URL_HERE', `${url}${head}${path}`)
        }
        console.log('CONTENTS', contents)
        return contents
      }
    },
    async load ({ filePath }) {
      if (filePath.includes('.worker.js')) {
        const wjs = await fs.readFile(filePath, 'utf-8')
        const js = 'export default \'URL_HERE\''

        return {
          '.js': js,
          '.wjs': wjs
        }
      }
    }
  }
}

It does not find the wjs file, but it's working otherwise!