feat(generators): ng add support and cleanup (#13)

src/app.ionic/index.ts

@@ -22,7 +22,6 @@ export default function (options: ApplicationOptions) {
     throw new SchematicsException(`Missing name argument. Provide a name for your Ionic app. Example: ng g app.ionic sample`);
   }
   const appPath = `ionic-${options.name}`;
-  const xplat = options.xplat;
 
   return chain([
     prerun(options.prefix),
@@ -69,14 +68,6 @@ export default function (options: ApplicationOptions) {
       };
       return updateNxProjects(tree, projects);
     },
-    // add xplat if specified
-    xplat ?
-      schematic('xplat', {
-        ...options as any,
-        platforms: 'web,ionic',
-        prefix: getPrefix(),
-        onlyIfNone: true,
-      }) : noop(),
     options.skipFormat 
       ? noop()
       : formatFiles(options)

src/app.ionic/schema.d.ts

@@ -7,10 +7,6 @@ export interface Schema {
      * npm scope - auto detected from nx.json but can specify your own name
      */
     npmScope?: string;
-    /**
-     * Whether to create xplat structure
-     */
-    xplat?: boolean;
     /**
      * The prefix to apply to generated selectors.
      */

src/app.ionic/schema.json

@@ -23,11 +23,6 @@
       "description": "The npm scope to use.",
       "alias": "wn"
     },
-    "xplat": {
-      "type": "boolean",
-      "description": "Whether to create xplat structure along with app creation.",
-      "default": false
-    },
     "skipInstall": {
       "type": "boolean",
       "description": "Skip installing dependencies.",

src/app.nativescript/_files/package.json

@@ -6,19 +6,9 @@
     "id": "org.nativescript.<%= utils.sanitize(name) %>"
   },
   "scripts": {
-    "reset": "npx rimraf -- hooks node_modules platforms && npm run css.clean && npm run js.clean",
-    "clean": "npm run js.clean && npm run css",
-    "css.clean": "find app -type f -iname '*.css' -and ! -iname 'fontawesome.min.css' -delete",
-    "css.generate": "node -e 'require(\"./node_modules/nativescript-dev-sass/lib/converter.js\").convert(console, \".\");'",
-    "css": "npm run css.clean && npm run css.generate",
+    "reset": "npx rimraf -- hooks node_modules platforms && npm run js.clean",
+    "clean": "npm run js.clean",
     "js.clean": "npx rimraf -- app/**/*.js",
-    "ns-bundle": "ns-bundle",
-    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
-    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
-    "start-android-bundle": "npm run ns-bundle --android --run-app",
-    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
-    "build-android-bundle": "npm run ns-bundle --android --build-app",
-    "build-ios-bundle": "npm run ns-bundle --ios --build-app",
     "prepare.ios.release": "tns prepare ios --release",
     "prepare.android.release": "tns prepare android --release",
     "build.ios": "tns build ios --bundle --env.aot --env.uglify --release",
@@ -53,31 +43,12 @@
     "zone.js": "file:../../node_modules/zone.js"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~6.1.1",
+    "@angular/compiler-cli": "~6.1.0",
     "@angular/language-service": "file:../../node_modules/@angular/language-service",
-    "@ngtools/webpack": "~6.1.1",
-    "babel-traverse": "6.26.0",
-    "babel-types": "6.26.0",
-    "babylon": "6.18.0",
-    "clean-webpack-plugin": "~0.1.19",
+    "@ngtools/webpack": "~6.1.0",
     "codelyzer": "file:../../node_modules/codelyzer",
-    "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.11",
-    "extract-text-webpack-plugin": "~3.0.2",
-    "lazy": "1.0.11",
-    "nativescript-css-loader": "~0.26.0",
-    "nativescript-dev-typescript": "~0.7.1",
-    "nativescript-dev-webpack": "~0.15.0",
-    "nativescript-worker-loader": "~0.9.0",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.3.0",
-    "sass-loader": "^7.0.2",
+    "nativescript-dev-webpack": "~0.15.1",
     "tns-platform-declarations": "file:../../node_modules/tns-platform-declarations",
-    "typescript": "file:../../node_modules/typescript",
-    "uglifyjs-webpack-plugin": "~1.2.5",
-    "webpack": "~4.12.0",
-    "webpack-bundle-analyzer": "~2.13.0",
-    "webpack-sources": "~1.1.0",
-    "webpack-cli": "~3.0.7"
+    "typescript": "file:../../node_modules/typescript"
   }
 }

src/app.nativescript/_routing_files/app/features/home/home.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { Routes } from '@angular/router';
 import { NativeScriptRouterModule } from 'nativescript-angular/router';
 
@@ -15,6 +15,10 @@ export const routes: Routes = [
 @NgModule({
   imports: [SharedModule, NativeScriptRouterModule.forChild(routes)],
   declarations: [...HOME_COMPONENTS],
-  exports: [...HOME_COMPONENTS]
+  exports: [...HOME_COMPONENTS],
+  schemas: [
+    NO_ERRORS_SCHEMA,
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
 })
 export class HomeModule {}

src/app.nativescript/_sample_files/app/features/items/items.loader.module.ts

@@ -1,7 +1,7 @@
 // from workaround:
 // https://github.com/angular/angular-cli/issues/6373#issuecomment-319116889
 
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 // libs
 import { NativeScriptRouterModule } from 'nativescript-angular/router';
@@ -14,6 +14,10 @@ import { ItemsModule, ItemsComponent, ItemDetailComponent } from '@<%= npmScope
     NativeScriptRouterModule.forChild(
       routeItems(ItemsComponent, ItemDetailComponent)
     )
+  ],
+  schemas : [
+    NO_ERRORS_SCHEMA,
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class ItemsModuleLoader {}

src/app.nativescript/index.ts

@@ -65,14 +65,7 @@ export default function (options: ApplicationOptions) {
         tags: []
       };
       return updateNxProjects(tree, projects);
-    },
-    // add xplat if specified
-    options.xplat ?
-      schematic('xplat', {
-        platforms: 'web,nativescript',
-        prefix: getPrefix(),
-        onlyIfNone: true
-      }) : noop(),
+    }
   ]);
 }
 

src/app.nativescript/schema.d.ts

@@ -7,10 +7,6 @@ export interface Schema {
      * npm scope - auto detected from nx.json but can specify your own name
      */
     npmScope?: string;
-    /**
-     * Whether to create xplat structure
-     */
-    xplat?: boolean;
     /**
      * The prefix to apply to generated selectors.
      */

src/app.nativescript/schema.json

@@ -23,11 +23,6 @@
       "description": "The npm scope to use.",
       "alias": "wn"
     },
-    "xplat": {
-      "type": "boolean",
-      "description": "Whether to create xplat structure along with app creation.",
-      "default": false
-    },
     "routing": {
       "type": "boolean",
       "description": "Use root routing module.",

src/collection.json

@@ -1,6 +1,12 @@
 {
   "$schema": "../node_modules/@nrwl/schematics/src/collection.json",
   "schematics": {
+    "ng-add": {
+      "factory": "./ng-add",
+      "schema": "./ng-add/schema.json",
+      "description": "Add xplat to an existing Nx Workspace",
+      "hidden": true
+    },
     "app.nativescript": {
       "factory": "./app.nativescript",
       "schema": "./app.nativescript/schema.json",
@@ -24,7 +30,8 @@
     "ts-config": {
       "factory": "./ts-config",
       "schema": "./ts-config/schema.json",
-      "description": "Configure tsconfig for xplat."
+      "description": "Configure tsconfig for xplat.",
+      "hidden": true
     },
     "xplat": {
       "factory": "./xplat",
@@ -78,11 +85,6 @@
       "schema": "./ngrx/schema.json",
       "description": "Create a ngrx store."
     },
-    "admin": {
-      "factory": "./admin",
-      "schema": "./admin/schema.json",
-      "description": "xplat admin tool."
-    },
     "library": {
       "extends": "@nrwl/schematics:library"
     },

src/migrations/update-6-1-0/update-6-1-0.ts

@@ -6,8 +6,7 @@ import {
   noop
 } from "@angular-devkit/schematics";
 
-import { getJsonFromFile, updateJsonFile, createOrUpdate, updateJsonInTree, readJsonInTree } from '../../utils';
-import { addTestingFiles } from '../../xplat';
+import { getJsonFromFile, updateJsonFile, createOrUpdate, updateJsonInTree, readJsonInTree, addTestingFiles } from '../../utils';
 
 function updateNativeScriptApps(tree: Tree, context: SchematicContext) {
   const angularConfigPath = `angular.json`;

src/ng-add/index.ts

@@ -0,0 +1,18 @@
+import {
+  chain,
+  SchematicsException,
+  externalSchematic,
+} from "@angular-devkit/schematics";
+import { prerun, errorMissingPrefix } from '../utils';
+import { Schema as ApplicationOptions } from "./schema";
+
+export default function(options: ApplicationOptions) {
+  if (!options.prefix) {
+    throw new SchematicsException(errorMissingPrefix);
+  }
+
+  return chain([
+    prerun(options.prefix, true),
+    externalSchematic("@nstudio/schematics", "xplat", options),
+  ]);
+}

src/ng-add/schema.d.ts

@@ -0,0 +1,10 @@
+export interface Schema {
+  /**
+   * Target platforms
+   */
+  platforms?: string;
+  /**
+   * The prefix to apply to generated selectors.
+   */
+  prefix?: string;
+}

src/ng-add/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "ng-add",
+  "title": "Add xplat to Workspace",
+  "description": "NOTE: Does not work in the --dry-run mode",
+  "type": "object",
+  "properties": {
+    "platforms": {
+      "type": "string",
+      "description": "Target platforms to support."
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to xplat generated selectors.",
+      "alias": "p"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files",
+      "type": "boolean",
+      "default": false
+    }
+  }
+}

src/utils/general.ts

@@ -521,6 +521,31 @@ export function getPrefixWarning(prefix: string) {
   return `A default prefix had already been set for your workspace: ${prefix}. Since xplat had already been configured we will be using '${prefix}' as the prefix.`;
 }
 
+export const addTestingFiles = (
+  tree: Tree,
+  options: any,
+  relativePath: string = "./"
+) => {
+  if (tree.exists(`testing/karma.conf.js`)) {
+    return noop();
+  }
+
+  return branchAndMerge(
+    mergeWith(
+      apply(url(`${relativePath}_testing_files`), [
+        template(<TemplateOptions>{
+          ...(options as any),
+          npmScope: getNpmScope(),
+          prefix: getPrefix(),
+          dot: ".",
+          utils: stringUtils
+        }),
+        move("testing")
+      ])
+    )
+  );
+};
+
 export function updateIDESettings(
   tree: Tree,
   platformArg: string,

src/xplat/_lib_files/scss/_index.scss

@@ -5,10 +5,4 @@
 // shared variables 
 @import 'variables';
 
-// shared mixins
-@import '~nativescript-theme-core/scss/mixins/index';
-
-// shared utilities
-@import '~nativescript-theme-core/scss/utilities/index';
-
 // create/import other scss files or define as needed...

src/xplat/_lib_files/scss/_variables.scss

@@ -1,18 +1,7 @@
 /**
- * The following are variables shared across all platforms and apps
+ * Shared across all platforms and apps
+ * You may define a set of global variables accessible across entire workspace here
  */
 
 // could use a base theme here, for example:
-// @import '~@angular/material/theming';
-
-/**
- *  Why NativeScript scss variables here? 
- *  Because they cover some nice ground level variables.
- *  You can use them for multi-platform development (web included).
- *  See here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss
- *  Although feel free to use your own base variables.
- */
-
-@import '~nativescript-theme-core/scss/variables'; 
-
-// override any imported variables here...
+// @import '~@angular/material/theming';

src/xplat/_nativescript_files/scss/_common.scss

@@ -9,6 +9,10 @@
 // {N} variables
 @import 'variables';
 
+// {N} mixins that are used in below imports
+// you could create other helpers (ie: animations, functions, etc.)
+@import 'mixins';
+
 // {N} core theme rulesets (mix/match these or only use what you need)
 @import '~nativescript-theme-core/scss/action-bar';
 @import '~nativescript-theme-core/scss/activity-indicator';
@@ -27,4 +31,8 @@
 
 // {N} styles (create/import other scss files or define as needed)
 @import 'fonts';
-@import 'tags';
+@import 'tags';
+
+// since {N} core theme utilities are additive to any above class, these should always be last
+// includes (color, spacing, and text helpers): https://github.com/NativeScript/theme/tree/master/app/scss/utilities
+@import '~nativescript-theme-core/scss/utilities/index';

src/xplat/_nativescript_files/scss/_mixins.scss

@@ -0,0 +1,3 @@
+@import '~nativescript-theme-core/scss/mixins/index';
+
+// create your own mixins here...

src/xplat/_nativescript_files/scss/_variables.scss

@@ -1 +1,4 @@
-// ios/android variables here...
+// for all {N} apps
+@import '~nativescript-theme-core/scss/variables'; 
+
+// Override any imported variables here...

src/xplat/_web_files/scss/_spacing.scss

@@ -2,10 +2,10 @@
  * Convenient spacing classes
  * These match what is found from nativescript-theme-core but adapt them for web usage
  */
-$spacer:   5px !default;
+$spacer: 5 !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
-$spacer-alt:   4px !default;
+$spacer-alt: 4 !default;
 $spacer-x-alt: $spacer-alt !default;
 $spacer-y-alt: $spacer-alt !default;
 $spacers: (