feat: add platform matching host for AngularCompilerPlugin (#539)

fixes #547

Author: sis0k0

.gitignore

@@ -15,5 +15,9 @@ plugins/WatchStateLoggerPlugin.d.ts
 plugins/WatchStateLoggerPlugin.js
 plugins/WatchStateLoggerPlugin.js.map
 
+host/platform.d.ts
+host/platform.js
+host/platform.js.map
+
 hooks
 .DS_Store

bundle-config-loader.js

@@ -1,8 +1,8 @@
 module.exports = function(source) {
     this.cacheable();
-    const { registerPages = true, loadCss = true } = this.query;
+    const { angular = false, loadCss = true } = this.query;
 
-    if (registerPages) {
+    if (!angular) {
         source = `
             require("nativescript-dev-webpack/register-modules");
             ${source}
@@ -11,7 +11,7 @@ module.exports = function(source) {
 
     if (loadCss) {
         source = `
-            require("nativescript-dev-webpack/load-application-css");
+            require("nativescript-dev-webpack/load-application-css")(${angular});
             ${source}
         `;
     }

demo/AngularApp/package.json

@@ -13,25 +13,25 @@
     }
   },
   "dependencies": {
-    "@angular/common": "~6.0.0-rc.0",
-    "@angular/compiler": "~6.0.0-rc.0",
-    "@angular/core": "~6.0.0-rc.0",
-    "@angular/forms": "~6.0.0-rc.0",
-    "@angular/http": "~6.0.0-rc.0",
-    "@angular/platform-browser": "~6.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "~6.0.0-rc.0",
-    "@angular/router": "~6.0.0-rc.0",
-    "nativescript-angular": "rc",
+    "@angular/common": "~6.0.0",
+    "@angular/compiler": "~6.0.0",
+    "@angular/core": "~6.0.0",
+    "@angular/forms": "~6.0.0",
+    "@angular/http": "~6.0.0",
+    "@angular/platform-browser": "~6.0.0",
+    "@angular/platform-browser-dynamic": "~6.0.0",
+    "@angular/router": "~6.0.0",
+    "nativescript-angular": "~6.0.0",
     "nativescript-theme-core": "~1.0.2",
     "reflect-metadata": "~0.1.8",
     "rxjs": "~6.0.0-beta.1",
     "tns-core-modules": "next",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular-devkit/core": "~0.5.5",
-    "@angular/compiler-cli": "~6.0.0-rc.0",
-    "@ngtools/webpack": "~6.0.0-rc.3",
+    "@angular-devkit/core": "~0.7.0-beta.1",
+    "@angular/compiler-cli": "~6.0.0",
+    "@ngtools/webpack": "~6.1.0-beta.1",
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
@@ -42,7 +42,7 @@
     "chai-as-promised": "~7.1.1",
     "clean-webpack-plugin": "~0.1.19",
     "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.7",
+    "css-loader": "~0.28.11",
     "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "mocha": "~3.5.0",
@@ -52,15 +52,15 @@
     "nativescript-dev-sass": "^1.3.5",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "file:../..",
-    "nativescript-worker-loader": "~0.8.1",
+    "nativescript-worker-loader": "~0.9.0",
     "raw-loader": "~0.5.1",
     "resolve-url-loader": "~2.3.0",
-    "sass-loader": "~6.0.6",
+    "sass-loader": "~7.0.1",
     "typescript": "~2.7.2",
-    "uglifyjs-webpack-plugin": "~1.2.4",
-    "webpack": "~4.5.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-cli": "~2.0.14",
+    "uglifyjs-webpack-plugin": "~1.2.5",
+    "webpack": "~4.6.0",
+    "webpack-bundle-analyzer": "~2.13.0",
+    "webpack-cli": "~2.1.3",
     "webpack-sources": "~1.1.0"
   },
   "scripts": {

dependencyManager.js

@@ -74,8 +74,8 @@ function getRequiredDeps(packageJson) {
     if (isAngular({packageJson})) {
         Object.assign(deps, {
             "@angular/compiler-cli": packageJson.dependencies["@angular/core"],
-            "@ngtools/webpack": "~6.0.3",
-            "@angular-devkit/core": "~0.6.3",
+            "@ngtools/webpack": "~6.1.0-beta.1",
+            "@angular-devkit/core": "~0.7.0-beta.1",
             "resolve-url-loader": "~2.3.0",
         });
     } else if (isTypeScript({packageJson})) {

host/platform.ts

@@ -0,0 +1,97 @@
+import {
+    parse,
+    join,
+} from "path";
+import { statSync } from "fs";
+
+import { Observable } from "rxjs";
+import {
+    Path,
+    PathFragment,
+} from "@angular-devkit/core";
+import {
+    FileBuffer,
+    Host,
+    HostCapabilities,
+    HostWatchOptions,
+    HostWatchEvent,
+    Stats,
+} from "@angular-devkit/core/src/virtual-fs/host";
+const { NodeJsSyncHost } = require("@angular-devkit/core/node");
+
+
+export class PlatformReplacementHost<StatsT extends object = {}> implements Host<StatsT> {
+    constructor(protected _platforms: string[], protected _delegate = new NodeJsSyncHost()) {
+    }
+
+    protected _resolve(path) {
+        const { dir, name, ext } = parse(path);
+
+        for (const platform of this._platforms) {
+            const platformFileName = `${name}.${platform}${ext}`;
+            const platformPath = this.toSystemPath(join(dir, platformFileName));
+
+            try {
+                const stat = statSync(platformPath);
+                if (stat && stat.isFile()) {
+                    return platformPath;
+                }
+            } catch(_e) {
+                // continue checking the other platforms
+            }
+        }
+
+        return path;
+    }
+
+    // Convert paths from \c\some\path to c:\some\path
+    private toSystemPath(path: string) {
+        if (!process.platform.startsWith("win32")) {
+            return path;
+        }
+
+        const drive = path.match(/^\\(\w)\\(.*)$/);
+        return drive ?
+            `${drive[1]}:\\${drive[2]}`:
+            path;
+    }
+
+    get capabilities(): HostCapabilities {
+        return this._delegate.capabilities;
+    }
+
+    write(path: Path, content: FileBuffer): Observable<void> {
+        return this._delegate.write(this._resolve(path), content);
+    }
+    read(path: Path): Observable<FileBuffer> {
+        return this._delegate.read(this._resolve(path));
+    }
+    delete(path: Path): Observable<void> {
+        return this._delegate.delete(this._resolve(path));
+    }
+    rename(from: Path, to: Path): Observable<void> {
+        return this._delegate.rename(this._resolve(from), this._resolve(to));
+    }
+
+    list(path: Path): Observable<PathFragment[]> {
+        return this._delegate.list(this._resolve(path));
+    }
+
+    exists(path: Path): Observable<boolean> {
+        return this._delegate.exists(this._resolve(path));
+    }
+    isDirectory(path: Path): Observable<boolean> {
+        return this._delegate.isDirectory(this._resolve(path));
+    }
+    isFile(path: Path): Observable<boolean> {
+        return this._delegate.isFile(this._resolve(path));
+    }
+
+    stat(path: Path): Observable<Stats<StatsT>> | null {
+        return this._delegate.stat(this._resolve(path));
+    }
+
+    watch(path: Path, options?: HostWatchOptions): Observable<HostWatchEvent> | null {
+        return this._delegate.watch(this._resolve(path), options);
+    }
+}

index.js

@@ -4,19 +4,12 @@ const { existsSync } = require("fs");
 const { ANDROID_APP_PATH } = require("./androidProjectHelpers");
 const {
     getPackageJson,
-    isAngular,
     isAndroid,
     isIos,
 } = require("./projectHelpers");
 
 Object.assign(exports, require('./plugins'));
 
-exports.loadAdditionalPlugins = function (projectSettings) {
-    if (isAngular(projectSettings)) {
-        Object.assign(exports, require('./plugins/angular')(projectSettings.projectDir));
-    }
-}
-
 exports.getAotEntryModule = function (appDirectory) {
 	verifyEntryModuleDirectory(appDirectory);
 

load-application-css.js

@@ -1,6 +1,14 @@
-const application = require("application");
-require("ui/styling/style-scope");
-const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
-global.registerWebpackModules(appCssContext);
-application.loadAppCss();
+module.exports = function(isAngular) {
+    const application = require("tns-core-modules/application");
+    require("tns-core-modules/ui/styling/style-scope");
+
+    if (isAngular) {
+        global.registerModule("./app.css", () => require("~/app"));
+    } else {
+        const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+        global.registerWebpackModules(appCssContext);
+    }
+
+    application.loadAppCss();
+}
 

package.json

@@ -77,9 +77,10 @@
     "tapable": "1.0.0"
   },
   "devDependencies": {
-    "@ngtools/webpack": "~6.0.3",
+    "@angular-devkit/core": "^0.7.0-beta.1",
     "@types/node": "^8.0.0",
     "conventional-changelog-cli": "^1.3.22",
+    "rxjs": "^6.2.0",
     "source-map-support": "^0.5.0",
     "typescript": "~2.7.2"
   }

plugins/NativeScriptAngularCompilerPlugin.ts

@@ -45,7 +45,7 @@ exports.NativeScriptSnapshotPlugin = (function() {
 
         let snapshotEntryContent = "";
         if (includeApplicationCss) {
-            snapshotEntryContent += `require("nativescript-dev-webpack/load-application-css");`;
+            snapshotEntryContent += `require("nativescript-dev-webpack/load-application-css")(${options.angular});`;
         }
         snapshotEntryContent += [ ...requireModules, ...internalRequireModules]
             .map(mod => `require('${mod}')`).join(";");
@@ -155,3 +155,4 @@ exports.NativeScriptSnapshotPlugin = (function() {
 
     return NativeScriptSnapshotPlugin;
 })();
+