diff --git a/README.md b/README.md index 32fbd16..c786f33 100644 --- a/README.md +++ b/README.md @@ -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). diff --git a/demo-angular/app/app.component.ts b/demo-angular/app/app.component.ts index 9e52c88..a89b9fb 100644 --- a/demo-angular/app/app.component.ts +++ b/demo-angular/app/app.component.ts @@ -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 { @@ -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(); diff --git a/demo-angular/app/shared.ts b/demo-angular/app/shared.ts new file mode 100644 index 0000000..d354d19 --- /dev/null +++ b/demo-angular/app/shared.ts @@ -0,0 +1,4 @@ + +export function sharedFunction(location: string) { + console.log("This code is shared between worker/app and ran from: " + location); +} diff --git a/demo-angular/app/workers/typescript.worker.ts b/demo-angular/app/workers/typescript.worker.ts index 8ce6668..806b907 100644 --- a/demo-angular/app/workers/typescript.worker.ts +++ b/demo-angular/app/workers/typescript.worker.ts @@ -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); diff --git a/demo-angular/webpack.config.js b/demo-angular/webpack.config.js index 309ff73..86ac98b 100644 --- a/demo-angular/webpack.config.js +++ b/demo-angular/webpack.config.js @@ -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(), diff --git a/src/NativeScriptWorkerPlugin.js b/src/NativeScriptWorkerPlugin.js index dc8cc0a..8b2c63a 100644 --- a/src/NativeScriptWorkerPlugin.js +++ b/src/NativeScriptWorkerPlugin.js @@ -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) { diff --git a/src/index.js b/src/index.js index 475e435..23bc6ad 100644 --- a/src/index.js +++ b/src/index.js @@ -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) { @@ -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) { @@ -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); diff --git a/src/symbol.js b/src/symbol.js new file mode 100644 index 0000000..d7ac6fd --- /dev/null +++ b/src/symbol.js @@ -0,0 +1,3 @@ + +const NATIVESCRIPT_WORKER_PLUGIN_SYMBOL = Symbol('NATIVESCRIPT_WORKER_PLUGIN_SYMBOL'); +module.exports = NATIVESCRIPT_WORKER_PLUGIN_SYMBOL;