feat($compile): better bundle logic

Bundling loging upgraded to use Webpack; bugfix: CommonModule replaced with BrowserModule

closes #1

.gitignore

@@ -1,8 +1,25 @@
+# OS generated files
+Thumbs.db
 .DS_Store
 
-# npm and yarn
+# Node generated files
 node_modules
 *.log
 
-# build
+# Code coverage
+coverage
+
+# Ignored files
+bundles
 lib
+src/*.d.ts
+src/*.js
+index.d.ts
+index.js
+*.map
+
+# @angular/compiler-cli
+*.metadata.*
+*.ngsummary.*
+*.ngfactory.*
+*.ngstyle.*

.npmignore

@@ -1,14 +1,20 @@
-# common
-node_modules
-demo
-*.log
+# OS generated files
+Thumbs.db
 .DS_Store
-.tmp
 
-# Webpack
-webpack.config.js
+# Node generated files
+node_modules
+*.log
+*.yml
 
-# source/config
+# Ignored files
 src
-*.yml
+config
+coverage
+demo
+.nyc_output
+.test
+.tmp
 .gitignore
+*.ts
+!*.d.ts

.travis.yml

@@ -11,10 +11,8 @@ node_js:
 before_script:
   - npm prune
 
-script:
-  - npm run build_prod
-
 after_success:
+  - npm run build_prod
   - npm run semantic-release
 
 branches:

README.md

@@ -8,6 +8,8 @@
 
 angular2-expandable-list is an HTML `<angular2-expandable-list>` tag enhanced with styling and animation
 
+Plunker DEMO available [here](https://embed.plnkr.co/uAPJq0/)
+
 ![screenshot](http://i.imgur.com/Qa402ev.gif)
 
 ## Table of contents
@@ -43,13 +45,7 @@ If you are using System.js you may want to add this into `map` and `package` con
 ```json
 {
   "map": {
-      "angular2-expandable-list": "node_modules/angular2-expandable-list"
-  },
-  "packages": {
-      "angular2-expandable-list": {
-        "main": "index.js",
-        "defaultExtension": "js"
-      }
+    "angular2-expandable-list": "node_modules/angular2-expandable-list/bundles/angular2-expandable-list.umd.js"
   }
 }
 ```
@@ -208,23 +204,15 @@ your `<expandable-list>`.
 ## Demo App
 
 Have a look at the [demo](https://github.com/andreasonny83/angular2-expandable-list/tree/master/demo)
-available in this repository for a real Angular2 application using the `Angular2-expandable-list` library.
+available in this repository for a real Angular2 application using the Angular2-Cookie-Law library.
 
 From your terminal all the Node dependencies using npm:
 
-```bash
-$ npm install
-# Or Yarn
-$ yarn install
-```
-
-Then initialize the application with:
-
 ```bash
 $ npm run demo
 ```
 
-Open your browser to [http://localhost:8080/](http://localhost:8080/)
+Open your browser to [http://localhost:9007/](http://localhost:9007/)
 to see the application running.
 
 ## Contributing

config/helpers.js

@@ -0,0 +1,29 @@
+/**
+* angular2-expandable-list
+ *
+ * Copyright 2017, @andreasonny83, All rights reserved.
+ *
+ * @author: @andreasonny83 <[email protected]>
+ */
+
+var path = require('path');
+
+// Helper functions
+var ROOT = path.resolve(__dirname, '..');
+
+function hasProcessFlag(flag) {
+  return process.argv.join('').indexOf(flag) > -1;
+}
+
+function isWebpackDevServer() {
+  return process.argv[1] && !! (/webpack-dev-server/.exec(process.argv[1]));
+}
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [ROOT].concat(args));
+}
+
+exports.hasProcessFlag = hasProcessFlag;
+exports.isWebpackDevServer = isWebpackDevServer;
+exports.root = root;

webpack.config.js → config/webpack.demo.js

@@ -1,33 +1,34 @@
+/**
+ * angular2-expandable-list
+ *
+ * Copyright 2017, @andreasonny83, All rights reserved.
+ *
+ * @author: @andreasonny83 <[email protected]>
+ */
+
 const path = require('path');
+const helpers = require('./helpers');
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
-const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
 
 const ROOT = path.resolve(__dirname);
 
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [ROOT].concat(args));
-}
-
 module.exports = {
   devtool: 'cheap-module-source-map',
 
   entry: {
-    'main': './demo/app.ts'
+    'main': helpers.root('demo/app.ts')
   },
 
   output: {
-    path: root('demo'),
+    path: helpers.root('demo'),
     filename: 'bundle.js',
     sourceMapFilename: '[name].map'
   },
 
   resolve: {
     extensions: ['.ts', '.js'],
     modules: [
-      root('demo'),
-      root('src'),
-      root('node_modules'),
+      helpers.root('node_modules'),
     ],
   },
 
@@ -40,7 +41,7 @@ module.exports = {
             loader: 'awesome-typescript-loader',
             options: {
               configFileName: 'demo/tsconfig.json'
-            },
+            }
           },
           {
             loader: 'angular2-template-loader'
@@ -50,7 +51,7 @@ module.exports = {
       },
 
       {
-        test: /\.css|html?$/,
+        test: /\.(css|html)?$/,
         use: [
           {
             loader: 'raw-loader'
@@ -61,11 +62,9 @@ module.exports = {
   },
 
   plugins: [
-    new TsConfigPathsPlugin(),
-
     new ContextReplacementPlugin(
       /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
-      root('demo')
+      helpers.root('demo')
     ),
   ]
 }

config/webpack.lib.js

@@ -0,0 +1,96 @@
+/**
+ * angular2-expandable-list
+ *
+ * Copyright 2017, @andreasonny83, All rights reserved.
+ *
+ * @author: @andreasonny83 <[email protected]>
+ */
+
+const helpers = require('./helpers');
+const webpack = require('webpack');
+
+/**
+ * Webpack Plugins
+ */
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+
+function ngExternal(ns) {
+    const ng2Ns = `@angular/${ns}`;
+    return { root: ['ng', ns], commonjs: ng2Ns, commonjs2: ng2Ns, amd: ng2Ns };
+}
+
+module.exports = {
+    devtool: 'source-map',
+
+    resolve: {
+      extensions: ['.ts', '.js']
+    },
+
+    entry: helpers.root('./index.ts'),
+
+    output: {
+      path: helpers.root('bundles'),
+      publicPath: '/',
+      filename: 'angular2-expandable-list.umd.js',
+      libraryTarget: 'umd',
+      library: 'angular2-expandable-list'
+    },
+
+    // require those dependencies but don't bundle them
+    externals: {
+      '@angular/core': ngExternal('core'),
+      '@angular/common': ngExternal('common'),
+      '@angular/platform-browser': ngExternal('platform-browser'),
+    },
+
+    module: {
+      rules: [
+
+        {
+          test: /\.ts$/,
+          use: [
+            {
+              loader: 'awesome-typescript-loader',
+              options: {
+                declaration: false
+              }
+            },
+            {
+              loader: 'angular2-template-loader'
+            }
+          ],
+          exclude: [/\.e2e\.ts$/]
+        },
+
+        {
+          test: /\.(css|html)?$/,
+          use: [
+            {
+              loader: 'raw-loader'
+            },
+          ]
+        },
+
+      ]
+    },
+
+    plugins: [
+      // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
+      new ContextReplacementPlugin(
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        helpers.root('src')
+      ),
+
+      new LoaderOptionsPlugin({
+        options: {
+          tslintLoader: {
+            emitErrors: false,
+            failOnHint: false
+          }
+        }
+      })
+    ]
+};

demo/app.component.ts

@@ -61,7 +61,6 @@ import { Component } from '@angular/core';
 export class AppComponent {
   items: any;
 
-
   constructor() {
     this.items = [
       {

demo/tsconfig.json

@@ -1,12 +1,23 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "types": [
+      "jasmine",
+      "node",
+      "selenium-webdriver",
+      "source-map",
+      "webpack"
+    ],
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
   },

index.ts

@@ -0,0 +1 @@
+export * from './lib/expandable-list.module';

lib/expandable-list.component.d.ts

@@ -1,15 +1,18 @@
-import { AfterContentInit } from '@angular/core';
+import { AfterViewInit } from '@angular/core';
 export declare class ExpandableListComponent {
 }
 export declare class ExpandableListStyler {
 }
 export declare class ExpandableListDividerStyler {
 }
-export declare class ExpandableListItemComponent implements AfterContentInit {
+export declare class ExpandableListItemComponent implements AfterViewInit {
     isExpanded: boolean;
+    marginTop: string;
     disabled: boolean;
-    isDisabled: boolean;
+    private elHeight;
+    private elementView;
+    private isDisabled;
     constructor();
-    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     onClick(): void;
 }