From d2abd5817476fa6ec33163a20ecf786377a9dfb8 Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Sun, 7 Mar 2021 19:33:52 +0100 Subject: [PATCH] feat: add worker support --- .../__snapshots__/angular.spec.ts.snap | 26 +++++++++ .../__snapshots__/base.spec.ts.snap | 26 +++++++++ .../__snapshots__/javascript.spec.ts.snap | 26 +++++++++ .../__snapshots__/react.spec.ts.snap | 52 +++++++++++++++++ .../__snapshots__/svelte.spec.ts.snap | 26 +++++++++ .../__snapshots__/typescript.spec.ts.snap | 26 +++++++++ .../__snapshots__/vue.spec.ts.snap | 26 +++++++++ packages/webpack5/src/configuration/base.ts | 8 +++ .../nativescript-worker-loader/index.ts | 57 +++++++++++++++++++ 9 files changed, 273 insertions(+) create mode 100644 packages/webpack5/src/loaders/nativescript-worker-loader/index.ts diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap index f2bceba52..b20a4c51f 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap @@ -65,6 +65,19 @@ exports[`angular configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -333,6 +346,19 @@ exports[`angular configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap index cfa2a799c..f060751ef 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap @@ -82,6 +82,19 @@ exports[`base configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -338,6 +351,19 @@ exports[`base configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap index 06922eb76..3a467c52f 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap @@ -82,6 +82,19 @@ exports[`javascript configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -359,6 +372,19 @@ exports[`javascript configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index 397073200..851b6c4ac 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -97,6 +97,19 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -370,6 +383,19 @@ exports[`react configuration > android > base config 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -643,6 +669,19 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -917,6 +956,19 @@ exports[`react configuration > ios > base config 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap index 7c6b05ef0..504d587e8 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap @@ -84,6 +84,19 @@ exports[`svelte configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -365,6 +378,19 @@ exports[`svelte configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap index 92be731de..0958bd031 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap @@ -82,6 +82,19 @@ exports[`typescript configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -359,6 +372,19 @@ exports[`typescript configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 8664501e6..54c36f04f 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -88,6 +88,19 @@ exports[`vue configuration for android 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, @@ -376,6 +389,19 @@ exports[`vue configuration for ios 1`] = ` } ] }, + /* config.module.rule('workers') */ + { + test: /\\\\.(js|ts)$/, + exclude: [ + /node_modules/ + ], + use: [ + /* config.module.rule('workers').use('nativescript-worker-loader') */ + { + loader: 'nativescript-worker-loader' + } + ] + }, /* config.module.rule('css') */ { test: /\\\\.css$/, diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 702af021b..02f67de29 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -182,6 +182,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { }, }); + config.module + .rule('workers') + .test(/\.(js|ts)$/) + .exclude.add(/node_modules/) + .end() + .use('nativescript-worker-loader') + .loader('nativescript-worker-loader') + // default PostCSS options to use // projects can change settings // via postcss.config.js diff --git a/packages/webpack5/src/loaders/nativescript-worker-loader/index.ts b/packages/webpack5/src/loaders/nativescript-worker-loader/index.ts new file mode 100644 index 000000000..ceddbc404 --- /dev/null +++ b/packages/webpack5/src/loaders/nativescript-worker-loader/index.ts @@ -0,0 +1,57 @@ +const WorkerDependency = require('webpack/lib/dependencies/WorkerDependency'); +const RuntimeGlobals = require("webpack/lib/RuntimeGlobals"); + +/** + * Patch WorkerDependency to change: + * + * new Worker(new URL(workerPath, baseUrl)) + * ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + * to. + * + * new Worker('~/' + workerPath) + * + * Note: we are changing source **outside** of the dependency range, and this may + * break when the dependency range changes, for example if this PR is merged: + * - https://github.com/webpack/webpack/pull/12750 + */ +WorkerDependency.Template.prototype.apply = function apply(dependency, source, templateContext) { + const { chunkGraph, moduleGraph, runtimeRequirements } = templateContext; + const dep = /** @type {WorkerDependency} */ (dependency); + const block = /** @type {AsyncDependenciesBlock} */ (moduleGraph.getParentBlock( + dependency + )); + const entrypoint = /** @type {Entrypoint} */ (chunkGraph.getBlockChunkGroup( + block + )); + const chunk = entrypoint.getEntrypointChunk(); + + // runtimeRequirements.add(RuntimeGlobals.publicPath); + // runtimeRequirements.add(RuntimeGlobals.baseURI); + runtimeRequirements.add(RuntimeGlobals.getChunkScriptFilename); + + /** + * new URL( + * ^^^^^^^^ = 8 characters, we subtract it from the dep.range[0] + */ + source.replace( + dep.range[0] - 8, + dep.range[1], + `/* worker import */ /* patched by nativescript-worker-loader */ '~/' + ${ + RuntimeGlobals.getChunkScriptFilename + }(${JSON.stringify(chunk.id)})` + ); +} + +const NEW_WORKER_WITH_STRING_RE = /new\s+Worker\((['"`].+['"`])\)/ + +/** + * Replaces + * new Worker('./somePath') + * with + * new Worker(new URL('./somePath', import.meta.url)) + */ +export default function loader(content: string, map: any) { + const source = content.replace(NEW_WORKER_WITH_STRING_RE, 'new Worker(new URL($1, import.meta.url))') + this.callback(null, source, map) +} +