feat(pipe-demo): leek and injection pipe demo

angular.json

@@ -4246,6 +4246,105 @@
           }
         }
       }
+    },
+    "pipe-demo": {
+      "root": "steps/pipe-demo/",
+      "sourceRoot": "steps/pipe-demo/src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/pipe-demo",
+            "index": "steps/pipe-demo/src/index.html",
+            "main": "steps/pipe-demo/src/main.ts",
+            "polyfills": "steps/pipe-demo/src/polyfills.ts",
+            "tsConfig": "steps/pipe-demo/tsconfig.app.json",
+            "assets": [
+              "steps/pipe-demo/src/favicon.ico",
+              "steps/pipe-demo/src/assets"
+            ],
+            "styles": [
+              "steps/pipe-demo/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "steps/pipe-demo/src/environments/environment.ts",
+                  "with": "steps/pipe-demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "pipe-demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "pipe-demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "pipe-demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "steps/pipe-demo/src/test.ts",
+            "polyfills": "steps/pipe-demo/src/polyfills.ts",
+            "tsConfig": "steps/pipe-demo/tsconfig.spec.json",
+            "karmaConfig": "steps/pipe-demo/karma.conf.js",
+            "styles": [
+              "steps/pipe-demo/src/styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "steps/pipe-demo/src/favicon.ico",
+              "steps/pipe-demo/src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "steps/pipe-demo/tsconfig.app.json",
+              "steps/pipe-demo/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "angular-200",

steps/pipe-demo/browserslist

@@ -0,0 +1,11 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11

steps/pipe-demo/src/app/app.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { MyPipePipe } from './my-pipe.pipe';
+
+@Component({
+  selector: 'sfeir-root',
+  template: `
+    <div>Hello World!</div>
+    <div>{{ 4 | myPipe }} + {{ num }} + {{ num2 }}</div>
+  `,
+  styles: []
+})
+export class AppComponent implements OnInit {
+  title = 'pipe-demo';
+  num: number;
+  num2: number;
+
+  constructor(private pipe: MyPipePipe) {}
+
+  ngOnInit() {
+    this.num = this.pipe.transform(10);
+    this.pipe.leeeeeek = 30000;
+    this.num2 = this.pipe.transform(10, 20);
+  }
+}

steps/pipe-demo/src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { MyPipePipe } from './my-pipe.pipe';
+
+@NgModule({
+  declarations: [AppComponent, MyPipePipe],
+  imports: [BrowserModule],
+  providers: [MyPipePipe],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

steps/pipe-demo/src/app/my-pipe.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { MyPipePipe } from './my-pipe.pipe';
+
+describe('MyPipePipe', () => {
+  it('create an instance', () => {
+    const pipe = new MyPipePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

steps/pipe-demo/src/app/my-pipe.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'myPipe'
+})
+export class MyPipePipe implements PipeTransform {
+  public leeeeeek = 10;
+
+  transform(value: number, mult = 10) {
+    // DON'T DO THIS !!!!!
+    // return value * leek;
+    return value * mult;
+  }
+}

steps/pipe-demo/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

steps/pipe-demo/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

steps/pipe-demo/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>PipeDemo</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <sfeir-root></sfeir-root>
+  </body>
+</html>

steps/pipe-demo/src/main.ts

@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err));

steps/pipe-demo/src/polyfills.ts

@@ -0,0 +1,79 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/**
+ * If the application will be indexed by Google Search, the following is required.
+ * Googlebot uses a renderer based on Chrome 41.
+ * https://developers.google.com/search/docs/guides/rendering
+ **/
+// import 'core-js/es6/array';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+/*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

steps/pipe-demo/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

steps/pipe-demo/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "exclude": ["test.ts", "**/*.spec.ts"]
+}