chore: Release 1.3.0

.gitignore

@@ -34,6 +34,9 @@ bundle-config-loader.js
 xml-namespace-loader.d.ts
 xml-namespace-loader.js
 
+css2json-loader.d.ts
+css2json-loader.js
+
 **/*.spec.js*
 **/*.spec.d.ts*
 

CHANGELOG.md

@@ -1,3 +1,29 @@
+<a name="1.3.0"></a>
+# [1.3.0](https://github.com/NativeScript/nativescript-dev-webpack/compare/1.2.1...1.3.0) (2019-10-31)
+
+
+### Bug Fixes
+
+* exclude files from tests folder from built application ([c61f10e](https://github.com/NativeScript/nativescript-dev-webpack/commit/c61f10e))
+* fix dependencies in package.json ([eefd042](https://github.com/NativeScript/nativescript-dev-webpack/commit/eefd042)), closes [/github.com/NativeScript/nativescript-dev-webpack/blob/master/bundle-config-loader.ts#L4](https://github.com//github.com/NativeScript/nativescript-dev-webpack/blob/master/bundle-config-loader.ts/issues/L4) [/github.com/NativeScript/nativescript-dev-webpack/blob/2978b81b5a8100774b2bb4a331ac8637205927b8/package.json#L54](https://github.com//github.com/NativeScript/nativescript-dev-webpack/blob/2978b81b5a8100774b2bb4a331ac8637205927b8/package.json/issues/L54)
+* fix xxd path for local snapshots generation ([f63d493](https://github.com/NativeScript/nativescript-dev-webpack/commit/f63d493))
+* handle correctly webpack compilation errors ([363c4da](https://github.com/NativeScript/nativescript-dev-webpack/commit/363c4da))
+* handle imports like [@import](https://github.com/import) url("./xxx.css") ([8921120](https://github.com/NativeScript/nativescript-dev-webpack/commit/8921120))
+* search for the proper NDK executable on Windows ([f93bb6c](https://github.com/NativeScript/nativescript-dev-webpack/commit/f93bb6c))
+* Unbound namespace error with ios and android ([#1053](https://github.com/NativeScript/nativescript-dev-webpack/issues/1053)) ([6cd6efe](https://github.com/NativeScript/nativescript-dev-webpack/commit/6cd6efe))
+
+
+### Features
+
+* add useForImports option ([632af4f](https://github.com/NativeScript/nativescript-dev-webpack/commit/632af4f))
+* ensure valid CLI version when Windows snapshot is requested ([3a687c0](https://github.com/NativeScript/nativescript-dev-webpack/commit/3a687c0))
+* support [@nativescript](https://github.com/nativescript) scope in host  resolver ([efda509](https://github.com/NativeScript/nativescript-dev-webpack/commit/efda509))
+* support useLibs though env.compileSnapshot and calculate the NDK path internally ([5431bd7](https://github.com/NativeScript/nativescript-dev-webpack/commit/5431bd7))
+* support V8 snapshots on Windows ([2e9b753](https://github.com/NativeScript/nativescript-dev-webpack/commit/2e9b753))
+* use css2json loader by default ([6b0c9ae](https://github.com/NativeScript/nativescript-dev-webpack/commit/6b0c9ae))
+
+
+
 <a name="1.2.1"></a>
 ## [1.2.1](https://github.com/NativeScript/nativescript-dev-webpack/compare/1.2.0...1.2.1) (2019-10-03)
 

apply-css-loader.js

@@ -1,18 +1,43 @@
+const cssLoaderWarning = "The apply-css-loader expects the file to be pre-processed by css-loader. It might not work properly. Please check your webpack configuration";
+
+function checkForCssLoader(loaders, loaderIndex) {
+    if (!loaders) {
+        return false;
+    }
+
+    for (var i = loaderIndex + 1; i < loaders.length; i++) {
+        const loader = loaders[i];
+        if (loader.path && loader.path.indexOf("css-loader") > 0) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 module.exports = function (content, map) {
     if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
         return content;
     }
+
+    // Emit a warning if the file was not processed by the css-loader.
+    if (!checkForCssLoader(this.loaders, this.loaderIndex)) {
+        this.emitWarning(new Error(cssLoaderWarning));
+    }
+
     content += `
     const application = require("tns-core-modules/application");
     require("tns-core-modules/ui/styling/style-scope");
 
-    exports.forEach(cssExport => {
-        if (cssExport.length > 1 && cssExport[1]) {
-            // applying the second item of the export as it contains the css contents
-            application.addCss(cssExport[1]);
-        }
-    });
-    `;
+    if (typeof exports.forEach === "function") {
+        exports.forEach(cssExport => {
+            if (cssExport.length > 1 && cssExport[1]) {
+                // applying the second item of the export as it contains the css contents
+                application.addCss(cssExport[1]);
+            }
+        });
+    }
+`;
 
     this.callback(null, content, map);
-}
+}

css2json-loader.spec.ts

@@ -0,0 +1,79 @@
+import css2jsonLoader from "./css2json-loader";
+
+const importTestCases = [
+    `@import url("custom.css");`,
+    `@import url('custom.css');`,
+    `@import url('custom.css') print;`,
+    `@import url("custom.css") print;`,
+    `@import url('custom.css') screen and (orientation:landscape);`,
+    `@import url("custom.css") screen and (orientation:landscape);`,
+    `@import 'custom.css';`,
+    `@import "custom.css";`,
+    `@import 'custom.css' screen;`,
+    `@import "custom.css" screen;`,
+    `@import url(custom.css);`,
+]
+
+const someCSS = `
+.btn {
+    background-color: #7f9
+}
+`
+
+describe("css2jsonLoader", () => {
+    it("converts CSS to JSON", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
+
+        css2jsonLoader.call(loaderContext, someCSS);
+    })
+
+    importTestCases.forEach((importTestCase) => {
+        it(`handles: ${importTestCase}`, (done) => {
+
+            const loaderContext = {
+                callback: (error, source: string, map) => {
+                    expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
+                    expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                    done();
+                },
+            }
+
+            css2jsonLoader.call(loaderContext, importTestCase + someCSS);
+        })
+    });
+
+    it("inlines css2json loader in imports if option is provided", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("custom.css", () => require("!nativescript-dev-webpack/css2json-loader?useForImports!custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            },
+            query: { useForImports: true }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("custom.css");` + someCSS);
+    })
+
+    it("registers modules for paths starting with ~", (done) => {
+        const loaderContext = {
+            callback: (error, source: string, map) => {
+                expect(source).toContain(`global.registerModule("~custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`global.registerModule("custom.css", () => require("custom.css"))`);
+                expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);
+
+                done();
+            }
+        }
+
+        css2jsonLoader.call(loaderContext, `@import url("~custom.css");` + someCSS);
+    })
+});

css2json-loader.ts

@@ -0,0 +1,66 @@
+import { parse, Rule, SyntaxTree } from "tns-core-modules/css";
+import { loader } from "webpack";
+import { getOptions } from "loader-utils";
+
+interface ImportRule extends Rule {
+    import: string;
+}
+
+const betweenQuotesPattern = /('|")(.*?)\1/;
+const unpackUrlPattern = /url\(([^\)]+)\)/;
+const inlineLoader = "!nativescript-dev-webpack/css2json-loader?useForImports!"
+
+const loader: loader.Loader = function (content: string, map) {
+    const options = getOptions(this) || {};
+    const inline = !!options.useForImports;
+    const requirePrefix = inline ? inlineLoader : "";
+
+    const ast = parse(content, undefined);
+
+    let dependencies = [];
+    getImportRules(ast)
+        .map(extractUrlFromRule)
+        .map(createRequireUri)
+        .forEach(({ uri, requireURI }) => {
+            dependencies.push(`global.registerModule("${uri}", () => require("${requirePrefix}${requireURI}"));`);
+
+            // Call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
+            if (uri !== requireURI) {
+                dependencies.push(`global.registerModule("${requireURI}", () => require("${requirePrefix}${requireURI}"));`);
+            }
+        });
+    const str = JSON.stringify(ast, (k, v) => k === "position" ? undefined : v);
+    this.callback(null, `${dependencies.join("\n")}module.exports = ${str};`, map);
+}
+
+function getImportRules(ast: SyntaxTree): ImportRule[] {
+    if (!ast || (<any>ast).type !== "stylesheet" || !ast.stylesheet) {
+        return [];
+    }
+    return <ImportRule[]>ast.stylesheet.rules
+        .filter(rule => rule.type === "import" && (<any>rule).import)
+}
+
+/**
+ * Extracts the url from import rule (ex. `url("./platform.css")`)
+ */
+function extractUrlFromRule(importRule: ImportRule): string {
+    const urlValue = importRule.import;
+
+    const unpackedUrlMatch = urlValue.match(unpackUrlPattern);
+    const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : urlValue
+
+    const quotesMatch = unpackedValue.match(betweenQuotesPattern);
+    return quotesMatch ? quotesMatch[2] : unpackedValue;
+};
+
+function createRequireUri(uri): { uri: string, requireURI: string } {
+    return {
+        uri: uri,
+        requireURI: uri[0] === "~" && uri[1] !== "/" ? uri.substr(1) : uri
+    };
+}
+
+
+
+export default loader;

demo/AngularApp/webpack.config.js

@@ -226,14 +226,20 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },

demo/JavaScriptApp/webpack.config.js

@@ -188,13 +188,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

demo/TypeScriptApp/webpack.config.js

@@ -194,13 +194,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },

snapshot/android/snapshot-generator.js

@@ -2,6 +2,7 @@ const fs = require("fs");
 const { dirname, relative, join, EOL } = require("path");
 const child_process = require("child_process");
 const { convertToUnixPath, warn } = require("../../lib/utils");
+const { isWindows } = require("./utils");
 const PropertiesReader = require('properties-reader');
 const shelljs = require("shelljs");
 
@@ -209,7 +210,7 @@ SnapshotGenerator.prototype.buildSnapshotLibs = function (androidNdkPath, recomm
 }
 
 SnapshotGenerator.prototype.getAndroidNdkBuildPath = function (androidNdkPath, recommendedAndroidNdkRevision) {
-    const ndkBuildExecutableName = "ndk-build";
+    const ndkBuildExecutableName = isWindows() ? "ndk-build.cmd" : "ndk-build";
     let hasNdk = false;
     // fallback for Android Runtime < 6.2.0 with the 6.1.0 value
     recommendedAndroidNdkRevision = recommendedAndroidNdkRevision || "20.0.5594570";

snapshot/android/utils.js

@@ -60,6 +60,10 @@ function isMacOSCatalinaOrHigher() {
     return isCatalinaOrHigher;
 }
 
+function isWindows() {
+    return getHostOS() === CONSTANTS.WIN_OS_NAME;
+}
+
 const downloadFile = (url, destinationFilePath, timeout) =>
     new Promise((resolve, reject) => {
         getRequestOptions(url, timeout)
@@ -119,5 +123,6 @@ module.exports = {
     isMacOSCatalinaOrHigher,
     downloadFile,
     getJsonFile,
-    isSubPath
+    isSubPath,
+    isWindows
 };

templates/webpack.angular.js

@@ -228,19 +228,24 @@ module.exports = env => {
 
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
-                // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } }
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { url: false } },
+                        {
+                            loader: "nativescript-dev-webpack/css2json-loader",
+                            options: { useForImports: true }
+                        },
                         "sass-loader"
                     ]
                 },