Skip to content

feat: Allow worker to use plugins #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 10, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,26 @@ module.exports = env => {
}
```

8. **[Angular projects only]** Update your webpack.config.js to inherit the current `ngCompilerPlugin` to allow the use of shared code.

``` javascript
// webpack.config.js

module.exports = env => {
// ...

const config = {
//...
plugins: [
new NativeScriptWorkerPlugin({
plugins: [ngCompilerPlugin]
}),
// ...
]
}
}
```

## Web workers with/without webpack

Please note that the way to spawn a Worker with webpack differs from the way described in the WWW Web Workers' specification (also followed by NativeScript).
Expand Down
2 changes: 2 additions & 0 deletions demo-angular/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, OnInit } from "@angular/core";

import { WorkerService } from "./worker.service";
import { sharedFunction } from "./shared";

@Component({ template: `` })
export class AppComponent implements OnInit {
Expand All @@ -10,6 +11,7 @@ export class AppComponent implements OnInit {
constructor(private workerService: WorkerService) { }

ngOnInit() {
sharedFunction("app");
this.tsWorker = this.workerService.initTsWorker();
this.jsWorker = this.workerService.initJsWorker();

Expand Down
4 changes: 4 additions & 0 deletions demo-angular/app/shared.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

export function sharedFunction(location: string) {
console.log("This code is shared between worker/app and ran from: " + location);
}
2 changes: 2 additions & 0 deletions demo-angular/app/workers/typescript.worker.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import "globals";
import { sharedFunction } from "../shared";

const context: Worker = self as any;

context.onmessage = msg => {
sharedFunction("worker");
setTimeout(() => {
console.log("Inside TS worker...");
console.log(msg);
Expand Down
4 changes: 3 additions & 1 deletion demo-angular/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,9 @@ module.exports = env => {
new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
new NativeScriptWorkerPlugin({
plugins: [ngCompilerPlugin]
}),
ngCompilerPlugin,
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
Expand Down
5 changes: 4 additions & 1 deletion src/NativeScriptWorkerPlugin.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
const { resolve } = require("path");
const { RawSource } = require("webpack-sources");
const NATIVESCRIPT_WORKER_PLUGIN_SYMBOL = require("./symbol");

exports.NativeScriptWorkerPlugin = (function () {
function NativeScriptWorkerPlugin() {
function NativeScriptWorkerPlugin(options) {
this.options = options || {};
this[NATIVESCRIPT_WORKER_PLUGIN_SYMBOL] = true;
}

NativeScriptWorkerPlugin.prototype.apply = function (compiler) {
Expand Down
16 changes: 15 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const WebWorkerTemplatePlugin = require("webpack/lib/webworker/WebWorkerTemplate
const NodeTargetPlugin = require("webpack/lib/node/NodeTargetPlugin");
const SingleEntryPlugin = require("webpack/lib/SingleEntryPlugin");
const optionsSchema = require("./options.json");
const NATIVESCRIPT_WORKER_PLUGIN_SYMBOL = require("./symbol");

const validateSchema = (schema, options, pluginName) => {
if (options.inline) {
Expand Down Expand Up @@ -44,6 +45,8 @@ module.exports.pitch = function pitch(request) {
this.cacheable(false);
const callback = this.async();
const options = loaderUtils.getOptions(this) || {};
const compilerOptions = this._compiler.options || {};
const pluginOptions = compilerOptions.plugins.find(p => p[NATIVESCRIPT_WORKER_PLUGIN_SYMBOL]).options;

// handle calls to itself to avoid an infinite loop
if (requests.indexOf(request) === -1) {
Expand All @@ -68,7 +71,18 @@ module.exports.pitch = function pitch(request) {
namedChunkFilename: null,
};

const workerCompiler = this._compilation.createChildCompiler("worker", outputOptions);
const plugins = (pluginOptions.plugins || []).map(plugin => {
if (typeof plugin !== 'string') {
return plugin;
}
const found = compilerOptions.plugins.find(p => p.constructor.name === plugin);
if (!found) {
console.warn(`Warning (worker-plugin): Plugin "${plugin}" is not found.`);
}
return found;
});

const workerCompiler = this._compilation.createChildCompiler("worker", outputOptions, plugins);
new WebWorkerTemplatePlugin(outputOptions).apply(workerCompiler);
if (this.target !== "webworker" && this.target !== "web") {
new NodeTargetPlugin().apply(workerCompiler);
Expand Down
3 changes: 3 additions & 0 deletions src/symbol.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

const NATIVESCRIPT_WORKER_PLUGIN_SYMBOL = Symbol('NATIVESCRIPT_WORKER_PLUGIN_SYMBOL');
module.exports = NATIVESCRIPT_WORKER_PLUGIN_SYMBOL;