tsdx support

[lucasmerlin]

Hi, I'm trying to use this together with tsdx and I unfortunately can't get it to work.

I created a small example repo: https://github.com/lucasmerlin/tsdx-webworker-test

I looked at your typescript example repo and did the following:

1. create new tsdx project
2. add tsdx.config.js and configure the webworker loader plugin
3. add the webworker typescript definition

It's compiling but unfortunately the worker.ts file is not bundled as it should be. Am I missing something or is this plugin incompatible with tsdx?

[darionco]

I didn't test this plugin with tsdx, I will look into this in the next couple days, sorry for the inconvenience.

[darionco]

Hi unfortunately this seems to be a bug in tsdx, after looking at this bug I was able to get the plugin to run by changing the tsdx.config.js to:

const webWorkerLoader = require('rollup-plugin-web-worker-loader');

// Not transpiled with TypeScript or Babel, so use plain Es6/Node.js!
module.exports = {
    // This function will run for each entry/format/env combination
    rollup(config, options) {
        config.plugins.unshift(webWorkerLoader({
            extensions: [".ts", ".js"],
        }))
        return config; // always return a config.
    },
};

note how instead of pushing the plugin I am using unshift to put it at the beginning of the plugin list.

Unfortunately the plugin still doesn't work. In that same bug it is reported (and ignored) the fact that @rollup/plugin-url, an official plugin, doesn't work either.

I was able to debug the plugin though, I found out that the plugin does not get called when trying to load all imported files, which is extremely weird and not usual rollup behaviour, if you stub the plugin like this in your tsdx.config.js:

const printResolveID = function() {
    return {
        name: 'printResolveID',
        resolveId(fileToLoad) {
            console.log(fileToLoad);
        },
    };
}

module.exports = {
    rollup(config, options) {
        config.plugins.unshift(printResolveID());
        return config; // always return a config.
    },
};

you can see that it only prints the path to the index file when it should print the index file and all imported files within it.

After some more debugging it became obvious that somehow tsdx is screening files and filtering out files that are not modules. A workaround for now is to change the name of your worker to test.worker.ts and add the following at the top of the file:

const foo: any = {};
export default foo;

that will make the file a valid module in the eyes of tsdx, then change your index.ts so it imports the worker file directly:

import Worker from './test.worker';

new Worker().postMessage("");

finally configure the web-worker-plugin to process any files that end in .worker.ts:

const webWorkerLoader = require('rollup-plugin-web-worker-loader');

module.exports = {
    rollup(config, options) {
        config.plugins.unshift(webWorkerLoader({
            extensions: ['.ts', '.js'],
            pattern: /.+?\.worker(?:\.ts)?$/g
        }));
        return config; // always return a config.
    },
};

with these changes the worker files should be processed properly.

I would strongly recommend to open a bug in tsdx letting them know that their file screening is breaking all plugins that depend on being able to load files that are not necessarily TS modules.

[razorbohan]

@darionco Have tried what you suggested but still receiving The "path" argument must be of type string. Received undefined error. Could you please share a working example?

[darionco]

Hi @razorbohan, unfortunately I am on vacation right now and won't be back until Monday, I'll try to dig out the example above and post it somewhere when I get back.

[razorbohan]

Ok, thanks. It's worth mentioning that I receiving this error only when I use web-worker-loader along with @rollup/plugin-url

My tsdx.config.js:

const url = require('@rollup/plugin-url');
const webWorkerLoader = require('rollup-plugin-web-worker-loader');

module.exports = {
  rollup(config) {
    config.plugins = [
      webWorkerLoader({
        extensions: ['.ts', '.js'],
        pattern: /.+?\.worker(?:\.ts)?$/g
      }),
      url({ include: ['**/*.ttf', '**/*.gif', '**/*.mp3', '**/*.data', '**/*.wasm'] }),
      ...config.plugins,
    ];

    return config;
  },
};