ngc-webpack - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

package.json

 {
   "name": "ngc-webpack",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "A wrapper for the angular compiler-cli with webpack integration",
@@ -20,2 +20,11 @@ "author": "Shlomi Assaf <[e-mail]>",
   ],
+  "scripts": {
+    "clean:build": "npm run rimraf -- dist",
+    "clean:test": "npm run rimraf -- __codegen__",
+    "ci": "npm run test",
+    "test": "npm run build && ./node_modules/.bin/mocha dist/test spec --recursive",
+    "watch": "npm run build -- -w",
+    "build": "npm run clean:build && tsc --project tsconfig.json",
+    "rimraf": "rimraf"
+  },
   "bin": {
@@ -31,8 +40,33 @@ "ngc-w": "./src/main.js"
   "devDependencies": {
-    "@angular/compiler": "^2.0.0",
-    "@angular/compiler-cli": "^2.0.0",
-    "@types/node": "^6.0.54",
-    "@types/webpack": "^2.0.0",
-    "typescript": "^2.0.0",
-    "webpack": "2.2.0-rc.3"
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/compiler-cli": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
+    "@angular/router": "^3.4.1",
+    "@types/chai": "^3.4.34",
+    "@types/mocha": "^2.2.35",
+    "@types/node": "^6.0.55",
+    "@types/webpack": "^2.1.0",
+    "angular2-template-loader": "^0.6.0",
+    "awesome-typescript-loader": "~3.0.0-beta.17",
+    "chai": "^3.5.0",
+    "css-loader": "^0.26.0",
+    "mocha": "^3.2.0",
+    "ng-router-loader": "^1.0.2",
+    "node-map-directory": "0.1.0",
+    "node-sass": "^4.1.1",
+    "raw-loader": "0.5.1",
+    "rimraf": "~2.5.4",
+    "rxjs": "^5.0.2",
+    "sass-loader": "^4.1.1",
+    "string-replace-loader": "1.0.5",
+    "style-loader": "^0.13.1",
+    "to-string-loader": "^1.1.4",
+    "typescript": "2.0.10",
+    "webpack": "2.2.0-rc.3",
+    "zone.js": "~0.7.4"
   },
@@ -39,0 +73,0 @@ "bugs": {

README.md

@@ -5,2 +5,9 @@ # Angular Template Compiler Wrapper for Webpack
 
+> Note: Version 1.1.0 allows using the plugin to manage angular compilation without the
+need to run the compilation command from the command line before webpack is executed.
+It also allows removing `@Component` templates (template/styles) from the bundle since they 
+become not used duplicates after AOT compilation.  
+This will be documented soon, meanwhile see the `AngularClass/angular2-webpack-starter` repo for an example.
+
+
 A wrapper around the [compiler-cli](https://github.com/angular/angular/tree/master/modules/%40angular/compiler-cli)
@@ -7,0 +14,0 @@ that pass `@Component` resources (*templateUrl, styleUrls*) through webpack's build loader chain.

src/main.d.ts

 import 'reflect-metadata';
+import { NgcCliOptions } from '@angular/tsc-wrapped';
+import { WebpackWrapper } from './webpack-wrapper';
+export declare function runInternal(project: string, cliOptions: NgcCliOptions, webpack: WebpackWrapper): Promise<any>;
+export declare let run: typeof runInternal;
 export declare function main(args: any, consoleError?: (s: string) => void): Promise<number>;

src/main.js

 #!/usr/bin/env node
 "use strict";
 require('ts-node/register');
-var Path = require('path');
 require('reflect-metadata');
@@ -17,14 +16,23 @@ var tsc_wrapped_1 = require('@angular/tsc-wrapped');
 }
+function runInternal(project, cliOptions, webpack) {
+    return tsc_wrapped_1.main(project, cliOptions, codeGenFactory(webpack))
+        .then(function () { return webpack.emitOnCompilationSuccess(); })
+        .catch(function (e) {
+        webpack.emitOnCompilationError(e);
+        throw e;
+    });
+}
+exports.runInternal = runInternal;
+exports.run = runInternal;
 function main(args, consoleError) {
     if (consoleError === void 0) { consoleError = console.error; }
+    exports.run = (function () {
+        return consoleError('NgcWebpackPlugin is configured for integrated compilation while the compiler executed from the command line, this is not valid. Integrated compilation cancelled.');
+    });
     var project = args.p || args.project || '.';
     var cliOptions = new tsc_wrapped_1.NgcCliOptions(args);
-    var webpack = new webpack_wrapper_1.WebpackWrapper(Path.join(process.cwd(), args.webpack || './webpack.config.js'));
-    return Promise.resolve()
-        .then(function () { return webpack.init(); })
-        .then(function () { return tsc_wrapped_1.main(project, cliOptions, codeGenFactory(webpack)); })
-        .then(function () { return webpack.emitOnCompilationSuccess(); })
+    var webpack = webpack_wrapper_1.WebpackWrapper.fromConfig(args.webpack);
+    return runInternal(project, cliOptions, webpack)
         .then(function () { return 0; })
         .catch(function (e) {
-        webpack.emitOnCompilationError(e);
         if (e instanceof tsc_wrapped_1.UserError || e instanceof compiler_1.SyntaxError) {
@@ -31,0 +39,0 @@ consoleError(e.message);

src/plugin.d.ts

 /// <reference types="node" />
+import { WebpackWrapper } from "./webpack-wrapper";
 export declare type PathTransformer = (path: string) => string;
@@ -6,10 +7,47 @@ export declare type OnCompilationSuccess = () => void;
 export interface NgcWebpackPluginOptions {
+    /**
+     * If false the plugin is a ghost, it will not perform any action.
+     * This property can be used to trigger AOT on/off depending on your build target (prod, staging etc...)
+     *
+     * The state can not change after initializing the plugin.
+     * @default true
+     */
+    disabled?: boolean;
     pathTransformer?: PathTransformer;
     onCompilationSuccess?: OnCompilationSuccess;
     onCompilationError?: OnCompilationError;
+    /**
+     * A path to a tsconfig file, if set the AOT compilation is triggered from the plugin.
+     * When setting a tsconfig you do not need to run the compiler from the command line.
+     *
+     * @default undefined
+     */
+    tsConfig?: string;
+    /**
+     * A path to a file (resource) that will replace all resource referenced in @Components.
+     * For each `@Component` the AOT compiler compiles it creates new representation for the templates (html, styles)
+     * of that `@Components`. It means that there is no need for the source templates, they take a lot of
+     * space and they will be replaced by the content of this resource.
+     *
+     * To leave the template as is set to a falsy value (the default).
+     *
+     * TIP: Use an empty file as an overriding resource. It is recommended to use a ".js" file which
+     * usually has small amount of loaders hence less performance impact.
+     *
+     * > This feature is doing NormalModuleReplacementPlugin for AOT compiled resources.
+     * @default undefined
+     */
+    resourceOverride?: string;
 }
 export declare class NgcWebpackPlugin {
     options: NgcWebpackPluginOptions;
+    compiler: any;
+    webpackWrapper: WebpackWrapper;
+    private aotPass;
+    private debug;
     constructor(options?: NgcWebpackPluginOptions);
     apply(compiler: any): void;
+    run(next: (err?: Error) => any): void;
+    beforeResolve(result: any, callback: (err: Error | null, result) => void): void;
+    afterResolve(result: any, callback: (err: Error | null, result) => void): void;
 }

src/plugin.js

 "use strict";
+var Path = require('path');
+var tsc_wrapped_1 = require('@angular/tsc-wrapped');
+var main_1 = require('./main');
+var webpack_wrapper_1 = require("./webpack-wrapper");
 var NgcWebpackPlugin = (function () {
@@ -6,5 +10,51 @@ function NgcWebpackPlugin(options) {
         this.options = options;
+        this.debug = true;
     }
     NgcWebpackPlugin.prototype.apply = function (compiler) {
+        var _this = this;
+        if (this.options.disabled === true)
+            return;
+        this.compiler = compiler;
+        this.webpackWrapper = webpack_wrapper_1.WebpackWrapper.fromCompiler(this.compiler);
+        this.aotPass = true;
+        compiler.plugin('run', function (compiler, next) { return _this.run(next); });
+        compiler.plugin('watch-run', function (compiler, next) { return _this.run(next); });
+        compiler.plugin("normal-module-factory", function (nmf) {
+            nmf.plugin('before-resolve', function (result, callback) { return _this.beforeResolve(result, callback); });
+            nmf.plugin('after-resolve', function (result, callback) { return _this.afterResolve(result, callback); });
+        });
     };
+    NgcWebpackPlugin.prototype.run = function (next) {
+        var _this = this;
+        if (this.options.tsConfig) {
+            if (this.debug) {
+                console.log('Starting compilation using the angular compiler.');
+            }
+            main_1.run(this.options.tsConfig, new tsc_wrapped_1.NgcCliOptions({}), this.webpackWrapper)
+                .then(function () { return undefined; }) // ensure the last then get's undefined if no error.
+                .catch(function (err) { return err; })
+                .then(function (err) {
+                if (_this.debug) {
+                    console.log('Angular compilation done, starting webpack bundling.');
+                }
+                _this.aotPass = false;
+                next(err);
+            });
+        }
+        else {
+            next();
+        }
+    };
+    NgcWebpackPlugin.prototype.beforeResolve = function (result, callback) {
+        if (!this.aotPass && this.options.resourceOverride && this.webpackWrapper.aotResources[result.request] === true) {
+            result.request = this.options.resourceOverride;
+        }
+        callback(null, result);
+    };
+    NgcWebpackPlugin.prototype.afterResolve = function (result, callback) {
+        if (!this.aotPass && this.options.resourceOverride && this.webpackWrapper.aotResources[result.resource] === true) {
+            result.resource = Path.resolve(Path.dirname(result.resource), this.options.resourceOverride);
+        }
+        callback(null, result);
+    };
     return NgcWebpackPlugin;
@@ -11,0 +61,0 @@ }());

src/webpack-chain-module-resolution-host-adapter.js

@@ -15,18 +15,14 @@ "use strict";
         this._loader = new webpack_resource_loader_1.WebpackResourceLoader(this.webpackWrapper.compiler.createCompilation());
-        var plugin = this.webpackWrapper.plugin;
-        if (plugin && typeof plugin.options.pathTransformer === 'function') {
-            this._pathTransformer = plugin.options.pathTransformer;
-        }
     }
     WebpackChainModuleResolutionHostAdapter.prototype.readResource = function (path) {
-        if (this._pathTransformer) {
-            path = this._pathTransformer(path);
-            if (path === '') {
-                return Promise.resolve(path);
-            }
+        var newPath = this.webpackWrapper.pathTransformer(path);
+        if (newPath === '') {
+            return Promise.resolve(newPath);
         }
-        if (!this.fileExists(path)) {
-            throw new Error("Compilation failed. Resource file not found: " + path);
+        else if (!this.fileExists(newPath)) {
+            throw new Error("Compilation failed. Resource file not found: " + newPath);
         }
-        return this._loader.get(path);
+        else {
+            return this._loader.get(newPath);
+        }
     };
@@ -33,0 +29,0 @@ return WebpackChainModuleResolutionHostAdapter;

src/webpack-wrapper.d.ts

 /// <reference types="node" />
 import { NgcWebpackPlugin } from './plugin';
 export declare class WebpackWrapper {
-    private webpackConfigPath;
     compiler: any;
-    config: any;
     plugin: NgcWebpackPlugin;
+    aotResources: any;
     private hasPlugin;
-    constructor(webpackConfigPath: string);
-    init(): void;
+    private constructor(compiler);
     emitOnCompilationSuccess(): void;
     emitOnCompilationError(err: Error): void;
+    pathTransformer(path: string): string;
+    static fromConfig(webpackConfig: string | any): WebpackWrapper;
+    static fromCompiler(compiler: any): WebpackWrapper;
 }

src/webpack-wrapper.js

 "use strict";
 var webpack = require('webpack');
+var Path = require('path');
 var tsc_wrapped_1 = require('@angular/tsc-wrapped');
@@ -25,18 +26,10 @@ var plugin_1 = require('./plugin');
 var WebpackWrapper = (function () {
-    function WebpackWrapper(webpackConfigPath) {
-        this.webpackConfigPath = webpackConfigPath;
-    }
-    WebpackWrapper.prototype.init = function () {
-        try {
-            var config = require(this.webpackConfigPath);
-            this.config = resolveConfig(config);
-        }
-        catch (err) {
-            throw new tsc_wrapped_1.UserError("Invalid webpack configuration. Please set a valid --webpack argument.\n" + err.message);
-        }
-        this.compiler = webpack(this.config);
+    function WebpackWrapper(compiler) {
+        this.compiler = compiler;
+        this.aotResources = {}; //TODO: use Map if in node 5
         this.plugin = this.compiler.options.plugins
             .filter(function (p) { return p instanceof plugin_1.NgcWebpackPlugin; })[0];
         this.hasPlugin = !!this.plugin;
-    };
+    }
+    ;
     WebpackWrapper.prototype.emitOnCompilationSuccess = function () {
@@ -52,2 +45,36 @@ if (this.hasPlugin && typeof this.plugin.options.onCompilationSuccess === 'function') {
     };
+    WebpackWrapper.prototype.pathTransformer = function (path) {
+        this.aotResources[path] = true;
+        if (this.plugin && typeof this.plugin.options.pathTransformer === 'function') {
+            return this.plugin.options.pathTransformer(path);
+        }
+        else {
+            return path;
+        }
+    };
+    WebpackWrapper.fromConfig = function (webpackConfig) {
+        try {
+            var config = void 0;
+            if (!webpackConfig) {
+                webpackConfig = './webpack.config.js';
+            }
+            if (typeof webpackConfig === 'string') {
+                var configPath = Path.isAbsolute(webpackConfig)
+                    ? webpackConfig
+                    : Path.join(process.cwd(), webpackConfig);
+                config = require(configPath);
+            }
+            else {
+                config = webpackConfig;
+            }
+            var configModule = resolveConfig(config);
+            return WebpackWrapper.fromCompiler(webpack(configModule));
+        }
+        catch (err) {
+            throw new tsc_wrapped_1.UserError("Invalid webpack configuration. Please set a valid --webpack argument.\n" + err.message);
+        }
+    };
+    WebpackWrapper.fromCompiler = function (compiler) {
+        return new WebpackWrapper(compiler);
+    };
     return WebpackWrapper;
@@ -54,0 +81,0 @@ }());

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53967

increased by37.76%

Number of package files

21

increased by5%

Lines of code

422

increased by41.61%

Number of lines in readme file

132

increased by5.6%

Worsened metrics

Dev dependency count

31

increased by416.67%

No dependency changes