fix: handle the bundle-config-loader require.context change without breaking-changes for the end-users (#973)

Dimitar Tachev · dtopuzov · commit f48bd8c75fe3 · 2019-07-09T14:22:42.000-07:00
diff --git a/bundle-config-loader.ts b/bundle-config-loader.ts
@@ -1,20 +1,30 @@
 import * as unitTestingConfigLoader from "./unit-testing-config-loader";
 import { loader } from "webpack";
 import { getOptions } from "loader-utils";
+import * as escapeRegExp from "escape-string-regexp";
 
 // Matches all source, markup and style files that are not in App_Resources
-const defaultMatch = /(?<!App_Resources.*)\.(xml|css|js|(?<!d\.)ts|scss)$/;
+const defaultMatch = "(?<!App_Resources.*)\.(xml|css|js|(?<!d\.)ts|scss)$";
 
 const loader: loader.Loader = function (source, map) {
-    const {
+    let {
         angular = false,
         loadCss = true,
         unitTesting,
         projectRoot,
         appFullPath,
-        registerModules = defaultMatch,
+        registerModules,
+        ignoredFiles = []
     } = getOptions(this);
 
+    if (!registerModules) {
+        registerModules = defaultMatch;
+        for (const key in ignoredFiles) {
+            registerModules = `(?<!${escapeRegExp(ignoredFiles[key])})` + registerModules;
+        }
+        registerModules = new RegExp(registerModules);
+    }
+
     if (unitTesting) {
         source = unitTestingConfigLoader({ appFullPath, projectRoot, angular, rootPagesRegExp: registerModules });
         this.callback(null, source);
diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js
@@ -109,6 +109,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -213,6 +214,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js
@@ -69,6 +69,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -173,7 +174,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
-                                registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js
@@ -73,6 +73,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -179,7 +180,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
-                                registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/index.js b/index.js
@@ -98,6 +98,41 @@ exports.getConvertedExternals = (externals) => {
     return modifiedExternals;
 };
 
+
+/**
+ * The `require.context` call in `bundle-config-loader` will ask the FS for files and
+ * the PlatformFSPlugin will return files without `.${platform}`. The SplitChunksPlugin will
+ * compare the `appComponents` with the files returned from the `PlatformFSPlugin` and when they
+ * do not match because of the platform extension, it will duplicate the custom components
+ * in `bundle` (activity.js - included by the `require.context` call in `bundle-config-loader`)
+ * and `vendor` (activity.android.js - included by `android-app-components-loader` and `SplitChunksPlugin`).
+ * We are post-processing the `appComponents` in order to unify the file names and avoid getting
+ * a build-time SBG exception for duplicate native class definition.
+ */
+exports.processAppComponents = (appComponents, platform) => {
+    for (const key in appComponents) {
+        appComponents[key] = appComponents[key].replace(`.${platform}`, "");
+    }
+};
+
+/**
+ * The `bundle-config-loader` needs this in order to skip the custom entries in its `require.context` call.
+ * If we don't skip them, custom entries like custom Android application will be included in both `application.js`
+ * (because its defined as an entry) and `bundle.js` (included by the `require.context` call in `bundle-config-loader`)
+ * causing a build-time SBG exception for duplicate native class definition.
+ * We are removing the extension in order to unify the file names with the `PlatformFSPlugin`.
+ */
+exports.getUserDefinedEntries = (entries, platform) => {
+    const userDefinedEntries = [];
+    for (const entry in entries) {
+        if (entry !== "bundle" && entry !== "tns_modules/tns-core-modules/inspector_modules") {
+            userDefinedEntries.push(entries[entry].replace(`.${platform}`, ""));
+        }
+    }
+
+    return userDefinedEntries;
+};
+
 const sanitize = name => name
     .split("")
     .filter(char => /[a-zA-Z0-9]/.test(char))
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -108,6 +108,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -212,6 +213,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -68,6 +68,8 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -172,6 +174,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -72,6 +72,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
         context: appFullPath,
@@ -178,6 +179,7 @@ module.exports = env => {
                                 unitTesting,
                                 appFullPath,
                                 projectRoot,
+                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                             }
                         },
                     ].filter(loader => !!loader)
diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js
@@ -75,6 +75,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: mode,
         context: appFullPath,
@@ -185,6 +186,7 @@ module.exports = env => {
                             unitTesting,
                             appFullPath,
                             projectRoot,
+                            ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                         },
                     },
                 ].filter(loader => Boolean(loader)),

Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,7 @@ module.exports = env => {`
`109`	`109`	itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
`110`	`110`	`}`
`111`	`111`
	`112`	`+ nsWebpack.processAppComponents(appComponents, platform);`
`112`	`113`	`const config = {`
`113`	`114`	`mode: production ? "production" : "development",`
`114`	`115`	`context: appFullPath,`
`@@ -213,6 +214,7 @@ module.exports = env => {`
`213`	`214`	`unitTesting,`
`214`	`215`	`appFullPath,`
`215`	`216`	`projectRoot,`
	`217`	`+ ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)`
`216`	`218`	`}`
`217`	`219`	`},`
`218`	`220`	`].filter(loader => !!loader)`
Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,7 @@ module.exports = env => {`
`108`	`108`	itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
`109`	`109`	`}`
`110`	`110`
	`111`	`+ nsWebpack.processAppComponents(appComponents, platform);`
`111`	`112`	`const config = {`
`112`	`113`	`mode: production ? "production" : "development",`
`113`	`114`	`context: appFullPath,`
`@@ -212,6 +213,7 @@ module.exports = env => {`
`212`	`213`	`unitTesting,`
`213`	`214`	`appFullPath,`
`214`	`215`	`projectRoot,`
	`216`	`+ ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)`
`215`	`217`	`}`
`216`	`218`	`},`
`217`	`219`	`].filter(loader => !!loader)`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,7 @@ module.exports = env => {`
`72`	`72`	itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
`73`	`73`	`}`
`74`	`74`
	`75`	`+ nsWebpack.processAppComponents(appComponents, platform);`
`75`	`76`	`const config = {`
`76`	`77`	`mode: production ? "production" : "development",`
`77`	`78`	`context: appFullPath,`
`@@ -178,6 +179,7 @@ module.exports = env => {`
`178`	`179`	`unitTesting,`
`179`	`180`	`appFullPath,`
`180`	`181`	`projectRoot,`
	`182`	`+ ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)`
`181`	`183`	`}`
`182`	`184`	`},`
`183`	`185`	`].filter(loader => !!loader)`