➕ firebug parameterization (#219)

application/angular.json

@@ -74,6 +74,9 @@
           "configurations": {
             "dev": {
               "browserTarget": "application:build:dev"
+            },
+            "firebug": {
+              "browserTarget": "application:build:firebug"
             }
           }
         },

application/package.json

@@ -83,8 +83,6 @@
     "codelyzer": "^4.0.1",
     "cp-cli": "^1.1.0",
     "cpy-cli": "^1.0.1",
-    "decompress": "^4.2.0",
-    "decompress-targz": "^4.1.1",
     "express": "^4.15.2",
     "http-server": "^0.10.0",
     "jasmine-core": "~2.8.0",
@@ -95,7 +93,6 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
-    "node-wget": "^0.4.2",
     "npm-run-all": "^4.1.2",
     "opencollective": "^1.0.3",
     "pre-commit": "^1.2.2",
@@ -108,7 +105,10 @@
     "typescript": "~2.7.2",
     "webpack-cli": "^2.0.14",
     "serverless-apigw-binary": "^0.4.4",
-    "serverless-google-cloudfunctions": "^1.1.1"
+    "serverless-google-cloudfunctions": "^1.1.1",
+    "node-wget": "^0.4.2",
+    "decompress": "^4.2.0",
+    "decompress-targz": "^4.1.1"
   },
   "collective": {
     "type": "opencollective",

application/postinstall.js

@@ -1,4 +1,3 @@
-"use strict";
 
 const fs = require('fs');
 const wget = require('node-wget');
@@ -15,9 +14,7 @@ if (!fs.existsSync('./firebug-lite.tar.tgz')) {
       ]
     }).then(() => console.log('Decompressed.'));
   });
-}
-
-/* eslint-disable no-console */
+}/* eslint-disable no-console */
 
 var green = "\u001b[32m";
 var white = "\u001b[22m\u001b[39m";

application/src/environments/environment.firebug.ts

@@ -1,6 +1,6 @@
 export const environment = {
   production: false,
-  firebug: true,
+	firebug: true,
 	gaTrackingCode: 'UA-109145893-2',
 	googleAnalytics: false
 };

application/src/environments/environment.prod.ts

@@ -1,6 +1,6 @@
 export const environment = {
   production: true,
-    firebug: false,
+	firebug: false,
 	gaTrackingCode: 'UA-109145893-2',
 	googleAnalytics: true
 };

application/src/environments/environment.ts

@@ -1,6 +1,6 @@
 export const environment = {
   production: false,
-  firebug: false,
+	firebug: false,
 	gaTrackingCode: 'UA-109145893-2',
 	googleAnalytics: false
 };

application/src/main.browser.ts

@@ -1,16 +1,14 @@
 import { googleAnalytics } from './bootstrapScripts';
+import { fireBug } from './bootstrapScripts';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { environment } from './environments/environment';
 import { AppBrowserModule } from './app/app.browser.module';
-import { fireBug } from './bootstrapScripts';
 
 if (environment.production) {
   enableProdMode();
 }
 
-fireBug().then(() => {
-    platformBrowserDynamic().bootstrapModule(AppBrowserModule);
-});
+fireBug().then(() => platformBrowserDynamic().bootstrapModule(AppBrowserModule));
 googleAnalytics();

build_and_generate_from_schematics.sh

@@ -11,4 +11,4 @@ ng new --collection angular-universal-pwa application;
 ## testing with CLI 6.x
 rm -rf application;
 npm install -g @angular/cli@next;
-ng new --collection angular-universal-pwa application --gaTrackingCode UA-109145893-2;
+ng new --collection angular-universal-pwa application --gaTrackingCode UA-109145893-2 --firebug true;

schematics/src/application/files/package.json

@@ -76,8 +76,6 @@
     "codelyzer": "^4.0.1",
     "cp-cli": "^1.1.0",
     "cpy-cli": "^1.0.1",
-    "decompress": "^4.2.0",
-    "decompress-targz": "^4.1.1",
     "express": "^4.15.2",
     "http-server": "^0.10.0",
     "jasmine-core": "~2.8.0",
@@ -88,7 +86,6 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
-    "node-wget": "^0.4.2",
     "npm-run-all": "^4.1.2",
     "opencollective": "^1.0.3",
     "pre-commit": "^1.2.2",

schematics/src/application/files/postinstall.js

@@ -1,22 +1,3 @@
-"use strict";
-
-const fs = require('fs');
-const wget = require('node-wget');
-const decompress = require('decompress');
-const decompressTargz = require('decompress-targz');
-
-if (!fs.existsSync('./firebug-lite.tar.tgz')) {
-  console.log('Downloading firebug.');
-  wget({url: 'https://getfirebug.com/releases/lite/latest/firebug-lite.tar.tgz', dest: './'}, () => {
-    console.log('Downloaded.');
-    decompress('firebug-lite.tar.tgz', '.', {
-      plugins: [
-        decompressTargz()
-      ]
-    }).then(() => console.log('Decompressed.'));
-  });
-}
-
 /* eslint-disable no-console */
 
 var green = "\u001b[32m";

schematics/src/application/files/src/environments/environment.prod.ts

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

schematics/src/application/files/src/environments/environment.ts

@@ -1,4 +1,3 @@
 export const environment = {
-  production: false,
-  firebug: false
+  production: false
 };

schematics/src/application/files/src/main.browser.ts

@@ -3,12 +3,9 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { environment } from './environments/environment';
 import { AppBrowserModule } from './app/app.browser.module';
-import { fireBug } from './bootstrapScripts';
 
 if (environment.production) {
   enableProdMode();
 }
 
-fireBug().then(() => {
-    platformBrowserDynamic().bootstrapModule(AppBrowserModule);
-});
+platformBrowserDynamic().bootstrapModule(AppBrowserModule);

schematics/src/ng-new/index.ts

@@ -4,15 +4,16 @@ import {
 } from '@angular-devkit/schematics';
 import { createGitIgnore, createOrOverwriteFile, addServerless, addGoogleAnalytics} from '../utils/index';
 import { getFileContent } from '@schematics/angular/utility/test';
+import { addFireBug } from '../utils/firebug/index';
+import { Schema } from './schema';
 
-export default function (options: any): Rule {
+export default function (options: Schema): Rule {
     if (!options.directory) {
         options.directory = options.name;
     }
     const templateSource = apply(url('../application/files'), [
         move(options.directory),
     ]);
-
     let rule: Rule = chain([
         externalSchematic('@schematics/angular', 'ng-new', options),
         (tree => {
@@ -26,7 +27,11 @@ export default function (options: any): Rule {
         addServerless(options)
     ]);
 
-    if(options.gaTrackingCode) {
+    if (options.firebug) {
+        rule = chain([rule, addFireBug(options)]);
+    }
+
+    if (options.gaTrackingCode) {
         rule = chain([rule, addGoogleAnalytics(options)]);
     }
 

schematics/src/ng-new/schema.d.ts

@@ -16,4 +16,5 @@ export interface Schema {
     skipTests?: boolean;
     provider: ('both' | 'aws' | 'gcloud');
     gaTrackingCode?: string;
+    firebug: boolean;
 }

schematics/src/ng-new/schema.json

@@ -121,6 +121,11 @@
     "gaTrackingCode": {
       "description": "Google Analytics tracking code.",
       "type": "string"
+    },
+    "firebug": {
+      "description": "Firebug lite.",
+      "default": false,
+      "alias": "fb"
     }
   },
   "required": [

schematics/src/utils/firebug/index.ts

@@ -0,0 +1,79 @@
+import { move, Rule, url, chain, mergeWith, apply } from '@angular-devkit/schematics';
+import { addDependencyToPackageJson, addEntryToEnvironment, addImportStatement, createOrOverwriteFile } from '../index';
+import { getFileContent } from '@schematics/angular/utility/test';
+import { Path } from '@angular-devkit/core';
+
+export function addFireBug(options: any): Rule {
+
+    const source = apply(url('../utils/firebug/files'), [
+        move(`${options.directory}/src/bootstrapScripts`)
+    ]);
+
+    return chain([
+        mergeWith(source),
+        addDependencyToPackageJson(options, 'node-wget', '^0.4.2', true),
+        addDependencyToPackageJson(options, 'decompress', '^4.2.0', true),
+        addDependencyToPackageJson(options, 'decompress-targz', '^4.1.1', true),
+        tree => {
+            let indexContent = '';
+            if (tree.exists(`${options.directory}/src/bootstrapScripts/index.ts`)) {
+                indexContent = getFileContent(tree, `${options.directory}/src/bootstrapScripts/index.ts`);
+            }
+            createOrOverwriteFile(tree,`${options.directory}/src/bootstrapScripts/index.ts`, indexContent + 'export * from \'./firebug\';\n');
+
+            //find and overwrite environment files
+
+            createOrOverwriteFile(tree, `${options.directory}/src/environments/environment.firebug.ts`, getFileContent(tree, `${options.directory}/src/environments/environment.ts`));
+
+            tree.getDir(`${options.directory}/src/environments`).visit( (path: Path) => {
+                if (path.endsWith('.ts')) {
+                    addEntryToEnvironment(tree, path, 'firebug', path.indexOf('firebug') > -1);
+                }
+            });
+
+            //add new configuration to serve
+
+            const cliConfig = JSON.parse(getFileContent(tree, `${options.directory}/angular.json`));
+            cliConfig.projects[options.name].architect.serve.configurations.firebug = {browserTarget: `${options.name}:build:firebug`};
+
+            createOrOverwriteFile(tree, `${options.directory}/angular.json`, JSON.stringify(cliConfig, null, '  '));
+
+
+            //find and add code to the main browser file
+
+            const mainFilePath = `${options.directory}/` + cliConfig.projects[options.name].architect.build.options.main;
+            addImportStatement(tree, mainFilePath, 'import { fireBug } from \'./bootstrapScripts\';')
+
+            const sourceText = getFileContent(tree, mainFilePath);
+
+            createOrOverwriteFile(tree, mainFilePath, sourceText.replace('platformBrowserDynamic().bootstrapModule(AppBrowserModule);', 'fireBug().then(() => platformBrowserDynamic().bootstrapModule(AppBrowserModule));'));
+
+            //adding postinstal script
+            let postInstall = '';
+            if (tree.exists(`${options.directory}/postinstall.js`)) {
+                postInstall = getFileContent(tree, `${options.directory}/postinstall.js`);
+            }
+            postInstall = `
+const fs = require('fs');
+const wget = require('node-wget');
+const decompress = require('decompress');
+const decompressTargz = require('decompress-targz');
+
+if (!fs.existsSync('./firebug-lite.tar.tgz')) {
+  console.log('Downloading firebug.');
+  wget({url: 'https://getfirebug.com/releases/lite/latest/firebug-lite.tar.tgz', dest: './'}, () => {
+    console.log('Downloaded.');
+    decompress('firebug-lite.tar.tgz', '.', {
+      plugins: [
+        decompressTargz()
+      ]
+    }).then(() => console.log('Decompressed.'));
+  });
+}` + postInstall;
+
+            createOrOverwriteFile(tree, `${options.directory}/postinstall.js`, postInstall);
+
+            return tree;
+        }
+    ]);
+}

schematics/src/utils/googleAnalytics/index.ts

@@ -12,7 +12,7 @@ export function addGoogleAnalytics(options: any): Rule {
     return chain([
         mergeWith(source),
         tree => {
-            let indexContent;
+            let indexContent = '';
             if (tree.exists(`${options.directory}/src/bootstrapScripts/index.ts`)) {
                 indexContent = getFileContent(tree, `${options.directory}/src/bootstrapScripts/index.ts`);
             }

schematics/src/utils/index.ts

@@ -4,6 +4,7 @@ import { isString } from 'util';
 
 export * from './serverless';
 export * from './googleAnalytics';
+export * from './firebug';
 
 export function createGitIgnore(dirName: string): Rule {
     return (tree => {