wip: full ng refacto

.babelrc

@@ -1,15 +1,42 @@
 {
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "browsers": [
+                "last 2 versions"
+              ]
+            },
+            "useBuiltIns": true
+          }
+        ]
+      ]
+    }
+  },
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions"]
-      },
-      "modules": false,
-      "useBuiltIns": true
-    }]
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions"
+          ]
+        },
+        "modules": false,
+        "useBuiltIns": true
+      }
+    ]
   ],
   "plugins": [
     "lodash",
-    ["angularjs-annotate", { "explicitOnly" : true}]
+    [
+      "angularjs-annotate",
+      {
+        "explicitOnly": true
+      }
+    ]
   ]
 }

.gitignore

@@ -74,3 +74,4 @@ typings/
 # Output of 'npm run watch'
 dist/*
 .awcache
+out-tsc

.vscode/settings.json

@@ -5,6 +5,7 @@
         "**/.git": true,
         "dist/": true,
         "**/node_modules": true,
+        "**/out-tsc": true,
         "**/*.js": {"when": "$(basename).ts"},
         "**/*.css": {"when": "$(basename).scss"},
         "**/*.map": {"when": "$(basename).map"}
@@ -16,4 +17,4 @@
         "/node_modules"
     ],
     "typescript.tsdk": "./node_modules/typescript/lib"
-}
+}

README.md

@@ -30,4 +30,4 @@ $ npm run serve:prod
 last successful master branch build can be found here: [gregoryruiz.github.io/nso/](https://gregoryruiz.github.io/nso/#!/search/gregory)
 
 ## Credits
-[@douglasduteil](https://github.com/douglasduteil) for his ideas, disponibility, advices, wisdom & friendship.
+[@douglasduteil](https://github.com/douglasduteil) for his ideas, availability, advices, wisdom & friendship.

config/karma.conf.js

@@ -0,0 +1,21 @@
+//
+
+module.exports = function(config) {
+  config.set({
+    basePath: '..',
+
+    frameworks: ['mocha'],
+
+    files: [
+      {pattern: 'test/**/*.spec.ts', watched: false}
+    ],
+
+    preprocessors: {
+      'test/*.spec.ts': ['webpack'],
+    },
+
+    browsers: ['jsdom'],
+
+    webpack: require('./webpack.config.test').default
+  });
+};

config/webpack.config.common.js

@@ -19,8 +19,10 @@ exports.default = {
   context: resolve(__dirname, '..'),
 
   entry: {
-    webfont: './src/webfont.ts',
-    bootstrap: ['babel-polyfill', './src/bootstrap.ts']
+    inline: [
+      './src/www/inline.ts'
+    ],
+    bootstrap: ['babel-polyfill', './src/www/main.ts']
   },
 
   //

config/webpack.config.dev.js

@@ -15,6 +15,7 @@ exports.default = webpackMerge(
   {
     devServer: {
       compress: true,
+      stats: 'minimal',
       contentBase: resolve(__dirname, 'public'),
       historyApiFallback: true,
       watchContentBase: true
@@ -38,7 +39,7 @@ exports.default = webpackMerge(
       // html-webpack-plugin plugin
       new HtmlWebpackPlugin({
         inject: false,
-        template: './src/index.html'
+        template: './src/www/index.html'
       }),
 
     ]

config/webpack.config.prod.js

@@ -1,6 +1,7 @@
 //
 
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const Visualizer = require('webpack-visualizer-plugin');
 const webpackMerge = require('webpack-merge');
 const { LoaderOptionsPlugin, optimize: { UglifyJsPlugin } } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -19,7 +20,7 @@ exports.default = webpackMerge(
     plugins: [
       new HtmlWebpackPlugin({
         inject: false,
-        template: './src/index.html',
+        template: './src/www/index.html',
         minify: {
 			    collapseWhitespace: true,
 			    conservativeCollapse: true,
@@ -65,7 +66,8 @@ exports.default = webpackMerge(
         new BundleAnalyzerPlugin({
           analyzerMode: 'static',
           openAnalyzer: false
-        })
+        }),
+        new Visualizer()
       ]),
   }
 );

examples/01-SRP/srp-bad.ts

@@ -0,0 +1,19 @@
+/* tslint:disable:max-classes-per-file */
+
+// Bad SRP
+
+class UserSettings {
+  constructor(user) {
+    this.user = user;
+  }
+
+  public changeSettings(settings) {
+    if (this.verifyCredentials()) {
+      // ...
+    }
+  }
+
+  public verifyCredentials() {
+    // ...
+  }
+}

examples/01-SRP/srp-good.ts

@@ -0,0 +1,26 @@
+/* tslint:disable:max-classes-per-file */
+
+// Good SRP
+
+class UserAuth {
+  constructor(user) {
+    this.user = user;
+  }
+
+  public verifyCredentials() {
+    // ...
+  }
+}
+
+class UserSettings {
+  constructor(user) {
+    this.user = user;
+    this.auth = new UserAuth(user);
+  }
+
+  public changeSettings(settings) {
+    if (this.auth.verifyCredentials()) {
+      // ...
+    }
+  }
+}

examples/02-OCP/ocp-bad.ts

@@ -0,0 +1,43 @@
+/* tslint:disable:max-classes-per-file */
+
+// Bad OCP
+
+class AjaxAdapter extends Adapter {
+  constructor() {
+    super();
+    this.name = "ajaxAdapter";
+  }
+}
+
+class NodeAdapter extends Adapter {
+  constructor() {
+    super();
+    this.name = "nodeAdapter";
+  }
+}
+
+class HttpRequester {
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+
+  public fetch(url) {
+    if (this.adapter.name === "ajaxAdapter") {
+      return makeAjaxCall(url).then((response) => {
+        // transform response and return
+      });
+    } else if (this.adapter.name === "httpNodeAdapter") {
+      return makeHttpCall(url).then((response) => {
+        // transform response and return
+      });
+    }
+  }
+}
+
+function makeAjaxCall(url) {
+  // request and return promise
+}
+
+function makeHttpCall(url) {
+  // request and return promise
+}

examples/02-OCP/ocp-good.ts

@@ -0,0 +1,38 @@
+/* tslint:disable:max-classes-per-file */
+
+// Good OCP
+
+class AjaxAdapter extends Adapter {
+  constructor() {
+    super();
+    this.name = "ajaxAdapter";
+  }
+
+  public request(url) {
+    // request and return promise
+  }
+}
+
+class NodeAdapter extends Adapter {
+  constructor() {
+    super();
+    this.name = "nodeAdapter";
+  }
+
+  public request(url) {
+    // request and return promise
+  }
+}
+
+class HttpRequester {
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+
+  public fetch(url) {
+    return this.adapter.request(url)
+      .then((response) => {
+        // transform response and return
+      });
+  }
+}

examples/03-LSP/lsp-bad.ts

@@ -0,0 +1,54 @@
+/* tslint:disable:max-classes-per-file */
+
+// Bad LSP
+
+class Rectangle {
+  constructor() {
+    this.width = 0;
+    this.height = 0;
+  }
+
+  public setColor(color) {
+    // ...
+  }
+
+  public render(area) {
+    // ...
+  }
+
+  public setWidth(width) {
+    this.width = width;
+  }
+
+  public setHeight(height) {
+    this.height = height;
+  }
+
+  public getArea() {
+    return this.width * this.height;
+  }
+}
+
+class Square extends Rectangle {
+  public setWidth(width) {
+    this.width = width;
+    this.height = width;
+  }
+
+  public setHeight(height) {
+    this.width = height;
+    this.height = height;
+  }
+}
+
+function renderLargeRectangles(rectangles) {
+  rectangles.forEach((rectangle) => {
+    rectangle.setWidth(4);
+    rectangle.setHeight(5);
+    const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20.
+    rectangle.render(area);
+  });
+}
+
+const rectangles = [new Rectangle(), new Rectangle(), new Square()];
+renderLargeRectangles(rectangles);

examples/03-LSP/lsp-good.ts

@@ -0,0 +1,46 @@
+/* tslint:disable:max-classes-per-file */
+
+// Good LSP
+
+class Shape {
+  public setColor(color) {
+    // ...
+  }
+
+  public render(area) {
+    // ...
+  }
+}
+
+class Rectangle extends Shape {
+  constructor(width, height) {
+    super();
+    this.width = width;
+    this.height = height;
+  }
+
+  public getArea() {
+    return this.width * this.height;
+  }
+}
+
+class Square extends Shape {
+  constructor(length) {
+    super();
+    this.length = length;
+  }
+
+  public getArea() {
+    return this.length * this.length;
+  }
+}
+
+function renderLargeShapes(shapes) {
+  shapes.forEach((shape) => {
+    const area = shape.getArea();
+    shape.render(area);
+  });
+}
+
+const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];
+renderLargeShapes(shapes);