Merge pull request #896 from NativeScript/tachev/fix-custom-entry-points

fix: unify the entry points handling and enable custom applications support in android

Author: Dimitar Tachev

demo/AngularApp/package.json

@@ -13,14 +13,14 @@
     }
   },
   "dependencies": {
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
-    "@angular/http": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
+    "@angular/common": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/core": "8.0.0",
+    "@angular/forms": "8.0.0",
+    "@angular/http": "8.0.0-beta.10",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@angular/router": "8.0.0",
     "nativescript-angular": "next",
     "nativescript-theme-core": "~1.0.2",
     "reflect-metadata": "~0.1.8",
@@ -29,8 +29,8 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~7.2.0",
-    "@ngtools/webpack": "~7.2.0",
+    "@angular/compiler-cli": "8.0.0",
+    "@ngtools/webpack": "8.0.0",
     "@types/chai": "~4.1.7",
     "@types/mocha": "~5.2.5",
     "@types/node": "~10.12.18",
@@ -45,7 +45,7 @@
     "nativescript-dev-sass": "next",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next",
-    "typescript": "~3.1.1"
+    "typescript": "~3.4.5"
   },
   "scripts": {
     "setup": "npm pack ../../ && npm i -D nativescript-dev-webpack*.tgz",

demo/AngularApp/webpack.config.js

@@ -91,7 +91,7 @@ module.exports = env => {
 
     const ngCompilerPlugin = new AngularCompilerPlugin({
         hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
-        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))),
+        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)),
         mainPath: join(appFullPath, entryModule),
         tsConfigPath: join(__dirname, tsConfigName),
         skipCodeGeneration: !aot,
@@ -264,17 +264,7 @@ module.exports = env => {
                 { from: { glob: "**/*.jpg" } },
                 { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
-            // Generate a bundle starter script and activate it in package.json
-            new nsWebpack.GenerateBundleStarterPlugin(
-                // Don't include `runtime.js` when creating a snapshot. The plugin
-                // configures the WebPack runtime to be generated inside the snapshot
-                // module and no `runtime.js` module exist.
-                (snapshot ? [] : ["./runtime"])
-                    .concat([
-                        "./vendor",
-                        "./bundle",
-                    ])
-            ),
+            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),

demo/JavaScriptApp/webpack.config.js

@@ -215,17 +215,8 @@ module.exports = env => {
                 { from: { glob: "**/*.jpg" } },
                 { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
-            // Generate a bundle starter script and activate it in package.json
-            new nsWebpack.GenerateBundleStarterPlugin(
-                // Don't include `runtime.js` when creating a snapshot. The plugin
-                // configures the WebPack runtime to be generated inside the snapshot
-                // module and no `runtime.js` module exist.
-                (snapshot ? [] : ["./runtime"])
-                    .concat([
-                        "./vendor",
-                        "./bundle",
-                    ])
-            ),
+            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
+
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),

demo/TypeScriptApp/webpack.config.js

@@ -5,6 +5,7 @@ const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -55,6 +56,9 @@ module.exports = env => {
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.ts`;
     const entries = { bundle: entryPath, application: "./application.android" };
+
+    const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
+
     if (platform === "ios") {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js";
     };
@@ -207,7 +211,8 @@ module.exports = env => {
                     use: {
                         loader: "ts-loader",
                         options: {
-                            configFile: "tsconfig.tns.json",
+                            configFile: tsConfigPath,
+                            transpileOnly: !!hmr,
                             allowTsInNodeModules: true,
                             compilerOptions: {
                                 sourceMap: isAnySourceMapEnabled
@@ -231,17 +236,7 @@ module.exports = env => {
                 { from: { glob: "**/*.jpg" } },
                 { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
-            // Generate a bundle starter script and activate it in package.json
-            new nsWebpack.GenerateBundleStarterPlugin(
-                // Don't include `runtime.js` when creating a snapshot. The plugin
-                // configures the WebPack runtime to be generated inside the snapshot
-                // module and no `runtime.js` module exist.
-                (snapshot ? [] : ["./runtime"])
-                    .concat([
-                        "./vendor",
-                        "./bundle",
-                    ])
-            ),
+            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),
@@ -290,6 +285,12 @@ module.exports = env => {
 
     if (hmr) {
         config.plugins.push(new webpack.HotModuleReplacementPlugin());
+
+        // With HMR ts-loader should run in `transpileOnly` mode,
+        // so assure type-checking with fork-ts-checker-webpack-plugin
+        config.plugins.push(new ForkTsCheckerWebpackPlugin({
+            tsconfig: tsConfigPath
+        }));
     }
 
 

dependencyManager.js

@@ -17,7 +17,7 @@ You can now bundle your project by passing --bundle flag to NativeScript CLI com
     - tns build ios --bundle
     - tns run android --bundle
     - tns run ios --bundle
-You can also pass the "--env.uglify" flag to use UglifyJS for minification.
+You can also pass the "--env.uglify" flag to use Terser for minification.
 For more information check out https://docs.nativescript.org/tooling/bundling-with-webpack#bundling.
 `;
 

plugins/GenerateBundleStarterPlugin.js

@@ -1,53 +1,13 @@
-const { RawSource } = require("webpack-sources");
-const { getPackageJson } = require("../projectHelpers");
+const { GenerateNativeScriptEntryPointsPlugin } = require("./GenerateNativeScriptEntryPointsPlugin");
 
-exports.GenerateBundleStarterPlugin = (function() {
-    function GenerateBundleStarterPlugin(bundles) {
-        this.bundles = bundles;
-        this.files = {};
+// backwards compatibility for <= 0.22 configs
+exports.GenerateBundleStarterPlugin = (function () {
+    function GenerateBundleStarterPlugin() {
+        this.entryPointsPlugin = new GenerateNativeScriptEntryPointsPlugin("bundle");
     };
 
-    GenerateBundleStarterPlugin.prototype.apply = function(compiler) {
-        this.webpackContext = compiler.options.context;
-
-        compiler.hooks.emit.tapAsync("GenerateBundleStarterPlugin", (compilation, cb) => {
-            this.addAsset(compilation, "package.json", this.generatePackageJson());
-            this.addAsset(compilation, "starter.js", this.generateStarterModule());
-            this.generateTnsJavaClasses(compilation);
-
-            cb();
-        });
-    }
-
-    GenerateBundleStarterPlugin.prototype.generateTnsJavaClasses = function (compilation) {
-        const path = compilation.compiler.outputPath;
-        const isAndroid = path.indexOf("android") > -1;
-
-        if (isAndroid && !compilation.assets["tns-java-classes.js"]) {
-            this.addAsset(compilation, "tns-java-classes.js", "");
-        }
-    }
-
-    GenerateBundleStarterPlugin.prototype.generatePackageJson = function () {
-        const packageJson = getPackageJson(this.webpackContext);
-        packageJson.main = "starter";
-
-        return JSON.stringify(packageJson, null, 4);
-    }
-
-    GenerateBundleStarterPlugin.prototype.generateStarterModule = function () {
-        const moduleSource = this.bundles
-            .map(bundle => `require("${bundle}")`)
-            .join("\n");
-
-        return moduleSource;
-    }
-
-    GenerateBundleStarterPlugin.prototype.addAsset = function(compilation, name, content) {
-        if (this.files[name] !== content) {
-            this.files[name] = content;
-            compilation.assets[name] = new RawSource(content);
-        }
+    GenerateBundleStarterPlugin.prototype.apply = function (compiler) {
+        this.entryPointsPlugin.apply(compiler);
     }
 
     return GenerateBundleStarterPlugin;

plugins/GenerateNativeScriptEntryPointsPlugin.js

@@ -0,0 +1,72 @@
+const { RawSource } = require("webpack-sources");
+const { getPackageJson } = require("../projectHelpers");
+const { SNAPSHOT_ENTRY_MODULE } = require("./NativeScriptSnapshotPlugin");
+
+exports.GenerateNativeScriptEntryPointsPlugin = (function () {
+    function GenerateNativeScriptEntryPointsPlugin(appEntryName) {
+        this.appEntryName = appEntryName;
+        this.files = {};
+    };
+
+    GenerateNativeScriptEntryPointsPlugin.prototype.apply = function (compiler) {
+        this.webpackContext = compiler.options.context;
+
+        compiler.hooks.emit.tapAsync("GenerateNativeScriptEntryPointsPlugin", (compilation, cb) => {
+            compilation.entrypoints.forEach(entryPoint => {
+                this.generateEntryFile(compilation, entryPoint);
+            });
+            this.addAsset(compilation, "package.json", this.generatePackageJson());
+            this.generateTnsJavaClasses(compilation);
+
+            cb();
+        });
+    }
+
+    GenerateNativeScriptEntryPointsPlugin.prototype.generateTnsJavaClasses = function (compilation) {
+        const path = compilation.compiler.outputPath;
+        const isAndroid = path.indexOf("android") > -1;
+
+        if (isAndroid && !compilation.assets["tns-java-classes.js"]) {
+            this.addAsset(compilation, "tns-java-classes.js", ""); 0
+        }
+    }
+
+    GenerateNativeScriptEntryPointsPlugin.prototype.generatePackageJson = function () {
+        const packageJson = getPackageJson(this.webpackContext);
+        packageJson.main = this.appEntryName;
+
+        return JSON.stringify(packageJson, null, 4);
+    }
+
+    GenerateNativeScriptEntryPointsPlugin.prototype.generateEntryFile = function (compilation, entryPoint) {
+        const entryPointFileName = `${entryPoint.options.name}.js`;
+        if (entryPointFileName === SNAPSHOT_ENTRY_MODULE) {
+            // Do not require the snapshot entry dependencies as the snapshot will fail.
+            return;
+        }
+
+        const requireDeps =
+            entryPoint.chunks.map(chunk => {
+                let requireChunkFiles = "";
+                chunk.files.forEach(fileName => {
+                    if (fileName !== entryPointFileName) {
+                        requireChunkFiles += `require("./${fileName}");`;
+                    }
+                });
+
+                return requireChunkFiles;
+            }).join("\n");
+
+        const currentEntryPointContent = compilation.assets[entryPointFileName].source();
+        compilation.assets[entryPointFileName] = new RawSource(`${requireDeps}${currentEntryPointContent}`);
+    }
+
+    GenerateNativeScriptEntryPointsPlugin.prototype.addAsset = function (compilation, name, content) {
+        if (this.files[name] !== content) {
+            this.files[name] = content;
+            compilation.assets[name] = new RawSource(content);
+        }
+    }
+
+    return GenerateNativeScriptEntryPointsPlugin;
+})();

plugins/NativeScriptSnapshotPlugin/index.js

@@ -12,8 +12,9 @@ const schema = require("./options.json");
 
 const SNAPSHOT_ENTRY_NAME = "snapshot-entry";
 const SNAPSHOT_ENTRY_MODULE = `${SNAPSHOT_ENTRY_NAME}.js`;
+exports.SNAPSHOT_ENTRY_MODULE = SNAPSHOT_ENTRY_MODULE;
 
-exports.NativeScriptSnapshotPlugin = (function() {
+exports.NativeScriptSnapshotPlugin = (function () {
     function NativeScriptSnapshotPlugin(options) {
         NativeScriptSnapshotPlugin.validateSchema(options);
 
@@ -30,14 +31,14 @@ exports.NativeScriptSnapshotPlugin = (function() {
         NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry(this.options);
     }
 
-    NativeScriptSnapshotPlugin.removeLibraryTarget = function(webpackConfig) {
+    NativeScriptSnapshotPlugin.removeLibraryTarget = function (webpackConfig) {
         const { output } = webpackConfig;
         if (output) {
             output.libraryTarget = undefined;
         }
     }
 
-    NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry = function(options) {
+    NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry = function (options) {
         const { webpackConfig, requireModules, chunks, includeApplicationCss } = options;
         const internalRequireModules = this.getInternalRequireModules(webpackConfig.context);
 
@@ -50,10 +51,10 @@ exports.NativeScriptSnapshotPlugin = (function() {
                 options.angular ?
                     'nativescript-dev-webpack/load-application-css-angular' :
                     'nativescript-dev-webpack/load-application-css-regular'
-            }")();
+                }")();
             `;
         }
-        snapshotEntryContent += [ ...requireModules, ...internalRequireModules]
+        snapshotEntryContent += [...requireModules, ...internalRequireModules]
             .map(mod => `require('${mod}')`).join(";");
 
         writeFileSync(snapshotEntryPath, snapshotEntryContent, { encoding: "utf8" });
@@ -68,12 +69,12 @@ exports.NativeScriptSnapshotPlugin = (function() {
         webpackConfig.optimization.runtimeChunk = { name: SNAPSHOT_ENTRY_NAME };
     }
 
-    NativeScriptSnapshotPlugin.getInternalRequireModules = function(webpackContext) {
+    NativeScriptSnapshotPlugin.getInternalRequireModules = function (webpackContext) {
         const packageJson = getPackageJson(webpackContext);
         return (packageJson && packageJson["android"] && packageJson["android"]["requireModules"]) || [];
     }
 
-    NativeScriptSnapshotPlugin.validateSchema = function(options) {
+    NativeScriptSnapshotPlugin.validateSchema = function (options) {
         if (!options.chunk && !options.chunks) {
             const error = NativeScriptSnapshotPlugin.extendError({ message: `No chunks specified!` });
             throw error;
@@ -87,7 +88,7 @@ exports.NativeScriptSnapshotPlugin = (function() {
                 options.chunks.push(options.chunk);
             }
         } catch (error) {
-           throw new Error(error.message);
+            throw new Error(error.message);
         }
     }
 

plugins/index.js

@@ -1,5 +1,6 @@
 module.exports = Object.assign({},
     require("./GenerateBundleStarterPlugin"),
+    require("./GenerateNativeScriptEntryPointsPlugin"),
     require("./NativeScriptSnapshotPlugin"),
     require("./PlatformSuffixPlugin"),
     require("./PlatformFSPlugin"),

templates/webpack.angular.js

@@ -263,17 +263,7 @@ module.exports = env => {
                 { from: { glob: "**/*.jpg" } },
                 { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
-            // Generate a bundle starter script and activate it in package.json
-            new nsWebpack.GenerateBundleStarterPlugin(
-                // Don't include `runtime.js` when creating a snapshot. The plugin
-                // configures the WebPack runtime to be generated inside the snapshot
-                // module and no `runtime.js` module exist.
-                (snapshot ? [] : ["./runtime"])
-                    .concat([
-                        "./vendor",
-                        "./bundle",
-                    ])
-            ),
+            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),