feat: load bundle config and app css at build time

sis0k0 · sis0k0 · commit f9bbea94929d · 2018-05-03T18:36:40.000+03:00
This will remove the need of a default bundle-config.js file in the app
templates.
diff --git a/bundle-config-loader.js b/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);
+};
+
diff --git a/demo/JavaScriptApp/app/app.js b/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" });
diff --git a/demo/JavaScriptApp/app/bundle-config.js b/demo/JavaScriptApp/app/bundle-config.js
diff --git a/demo/TypeScriptApp/app/app.ts b/demo/TypeScriptApp/app/app.ts
@@ -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' });
diff --git a/demo/TypeScriptApp/app/bundle-config.ts b/demo/TypeScriptApp/app/bundle-config.ts
diff --git a/demo/TypeScriptApp/tsconfig.json b/demo/TypeScriptApp/tsconfig.json
@@ -15,6 +15,9 @@
             "*": [
                 "./node_modules/tns-core-modules/*",
                 "./node_modules/*"
+            ],
+            "~/*": [
+                "app/*"
             ]
         }
     },
diff --git a/load-application-css.js b/load-application-css.js
@@ -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();
+
diff --git a/plugins/NativeScriptSnapshotPlugin/index.js b/plugins/NativeScriptSnapshotPlugin/index.js
@@ -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
diff --git a/plugins/NativeScriptSnapshotPlugin/options.json b/plugins/NativeScriptSnapshotPlugin/options.json
@@ -42,6 +42,10 @@
     "requireModules": {
       "type": "array",
       "default": []
+    },
+    "includeApplicationCss": {
+      "type": "boolean",
+      "default": true
     }
   },
   "required": [
diff --git a/register-modules.js b/register-modules.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);
+
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -127,6 +127,24 @@ module.exports = env => {
         },
         module: {
             rules: [
+                {
+                    test: new RegExp(entryPath),
+                    use: [
+                        // Require all Android app components
+                        platform === "android" && {
+                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            options: { modules: appComponents }
+                        },
+
+                        {
+                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            options: {
+                                loadCss: !snapshot, // load the application css if in debug mode
+                            }
+                        },
+                    ].filter(loader => !!loader)
+                },
+
                 { test: /\.html$|\.xml$/, use: "raw-loader" },
 
                 // tns-core-modules reads the app.css and its imports using css-loader
@@ -203,18 +221,6 @@ module.exports = env => {
         ],
     };
 
-    if (platform === "android") {
-        // Require all Android app components
-        // in the entry module
-        config.module.rules.unshift({
-            test: new RegExp(entryPath),
-            use: {
-                loader: "nativescript-dev-webpack/android-app-components-loader",
-                options: { modules: appComponents }
-            }
-        });
-    }
-
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({
@@ -240,8 +246,6 @@ module.exports = env => {
             ],
             projectRoot,
             webpackConfig: config,
-            targetArchs: ["arm", "arm64", "ia32"],
-            useLibs: false
         }));
     }
 
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -124,6 +124,25 @@ module.exports = env => {
         },
         module: {
             rules: [
+                {
+                    test: new RegExp(entryPath),
+                    use: [
+                        // Require all Android app components
+                        platform === "android" && {
+                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            options: { modules: appComponents }
+                        },
+
+                        {
+                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            options: {
+                                registerPages: true, // applicable only for non-angular apps
+                                loadCss: !snapshot, // load the application css if in debug mode
+                            }
+                        },
+                    ].filter(loader => !!loader)
+                },
+
                 { test: /\.(html|xml)$/, use: "raw-loader" },
 
                 {
@@ -178,18 +197,6 @@ module.exports = env => {
         ],
     };
 
-    if (platform === "android") {
-        // Require all Android app components
-        // in the entry module
-        config.module.rules.unshift({
-            test: new RegExp(entryPath),
-            use: {
-                loader: "nativescript-dev-webpack/android-app-components-loader",
-                options: { modules: appComponents }
-            }
-        });
-    }
-
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({
@@ -209,8 +216,6 @@ module.exports = env => {
             ],
             projectRoot,
             webpackConfig: config,
-            targetArchs: ["arm", "arm64", "ia32"],
-            useLibs: false
         }));
     }
 
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -124,6 +124,25 @@ module.exports = env => {
         },
         module: {
             rules: [
+                {
+                    test: new RegExp(entryPath),
+                    use: [
+                        // Require all Android app components
+                        platform === "android" && {
+                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            options: { modules: appComponents }
+                        },
+
+                        {
+                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            options: {
+                                registerPages: true, // applicable only for non-angular apps
+                                loadCss: !snapshot, // load the application css if in debug mode
+                            }
+                        },
+                    ].filter(loader => !!loader)
+                },
+
                 { test: /\.(html|xml)$/, use: "raw-loader" },
 
                 {
@@ -180,18 +199,6 @@ module.exports = env => {
         ],
     };
 
-    if (platform === "android") {
-        // Require all Android app components
-        // in the entry module
-        config.module.rules.unshift({
-            test: new RegExp(entryPath),
-            use: {
-                loader: "nativescript-dev-webpack/android-app-components-loader",
-                options: { modules: appComponents }
-            }
-        });
-    }
-
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({
@@ -211,8 +218,6 @@ module.exports = env => {
             ],
             projectRoot,
             webpackConfig: config,
-            targetArchs: ["arm", "arm64", "ia32"],
-            useLibs: false
         }));
     }
 

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,9 @@`
`15`	`15`	`"*": [`
`16`	`16`	`"./node_modules/tns-core-modules/*",`
`17`	`17`	`"./node_modules/*"`
	`18`	`+ ],`
	`19`	`+ "~/*": [`
	`20`	`+ "app/*"`
`18`	`21`	`]`
`19`	`22`	`}`
`20`	`23`	`},`