feat: load bundle config and app css at build time

This will remove the need of a default bundle-config.js file in the app
templates.

Author: sis0k0

bundle-config-loader.js

@@ -0,0 +1,21 @@
+module.exports = function(source) {
+    this.cacheable();
+    const { registerPages, loadCss } = this.query;
+
+    if (registerPages) {
+        source = `
+            require("nativescript-dev-webpack/register-modules");
+            ${source}
+        `;
+    }
+
+    if (loadCss) {
+        source = `
+            require("nativescript-dev-webpack/load-application-css");
+            ${source}
+        `;
+    }
+
+    this.callback(null, source);
+};
+

demo/JavaScriptApp/app/app.js

@@ -4,7 +4,6 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 
-require("./bundle-config");
 var application = require("application");
 
 application.start({ moduleName: "main-page" });

demo/JavaScriptApp/app/bundle-config.js

@@ -4,7 +4,6 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 
-import "./bundle-config";
 import * as app from 'application';
 
 app.start({ moduleName: 'main-page' });

demo/TypeScriptApp/app/app.ts

@@ -15,6 +15,9 @@
             "*": [
                 "./node_modules/tns-core-modules/*",
                 "./node_modules/*"
+            ],
+            "~/*": [
+                "app/*"
             ]
         }
     },

demo/TypeScriptApp/app/bundle-config.ts

@@ -0,0 +1,6 @@
+const application = require("application");
+require("ui/styling/style-scope");
+const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+global.registerWebpackModules(appCssContext);
+application.loadAppCss();
+

demo/TypeScriptApp/tsconfig.json

@@ -34,11 +34,17 @@ exports.NativeScriptSnapshotPlugin = (function() {
     }
 
     NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry = function(options) {
-        const { webpackConfig, requireModules, chunks, projectRoot } = options;
+        const { webpackConfig, requireModules, chunks, projectRoot, includeApplicationCss } = options;
 
         const androidProjectPath = getAndroidProjectPath({ projectRoot: projectRoot });
         const snapshotEntryPath = join(androidProjectPath, SNAPSHOT_ENTRY_MODULE);
-        const snapshotEntryContent = requireModules.map(mod => `require('${mod}')`).join(";");
+
+        let snapshotEntryContent = "";
+        if (includeApplicationCss) {
+            snapshotEntryContent += `require("nativescript-dev-webpack/load-application-css");`;
+        }
+        snapshotEntryContent += requireModules.map(mod => `require('${mod}')`).join(";");
+
         writeFileSync(snapshotEntryPath, snapshotEntryContent, { encoding: "utf8" });
 
         // add the module to the entry points to make sure it's content is evaluated

load-application-css.js

@@ -42,6 +42,10 @@
     "requireModules": {
       "type": "array",
       "default": []
+    },
+    "includeApplicationCss": {
+      "type": "boolean",
+      "default": true
     }
   },
   "required": [

plugins/NativeScriptSnapshotPlugin/index.js

@@ -0,0 +1,4 @@
+require("tns-core-modules/bundle-entry-points");
+const context = require.context("~/", true, /(root|page|fragment)\.(xml|css|js|ts|scss)$/);
+global.registerWebpackModules(context);
+