feat: introduce webpack only workflow (#882)

* fix: don't provide fake paths to the {N} CLI - relative to the `app` folder

* feat: remove not needed hooks

* feat: remove webpack compiler logic

* fix: don't copy app_resources to the platforms folder

* fix: respect --env.verbose

* feat: respect production mode based on release option

Implements: #911

* fix: watch platform specific files from node_modules

Rel to: NativeScript/nativescript-cli#4480

* fix: don't emit absolute webpack's runtime files

Previously we needed to emit files with full paths as {N} CLI relies on this and expected them in a such format. With the changes for "webpack-only" mode, {N} CLI expects only relative paths. So we need to fix this in order to ensure that runtime.js file will not be transferred on device on change in hmr mode.

* fix: don't process runtime.js files

We needed a special processing for `runtime.js` files as we excluded them when transferring the files on device. As the CLI is filtering and emit only hot-update files we don't need this logic anymore.

* fix: emit runtime files and entry point files

* fix: update webpack config files of demo apps

* fix: don't use short imports in demo apps

* fix: update dependencies of demo apps so they are compatible with 6.0 release

Author: Fatme

demo/AngularApp/package.json

@@ -42,9 +42,8 @@
     "mocha": "~5.2.0",
     "mochawesome": "~3.1.2",
     "nativescript-dev-appium": "next",
-    "nativescript-dev-sass": "next",
-    "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "next",
+    "node-sass": "^4.12.0",
     "typescript": "~3.4.5"
   },
   "scripts": {

demo/AngularApp/webpack.config.js

@@ -44,13 +44,15 @@ module.exports = env => {
 
         // You can provide the following flags when running 'tns run android|ios'
         aot, // --env.aot
-        snapshot, // --env.snapshot
+        snapshot, // --env.snapshot,
+        production, // --env.production
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
         hiddenSourceMap, // --env.hiddenSourceMap
         hmr, // --env.hmr,
         unitTesting, // --env.unitTesting
+        verbose, // --env.verbose
     } = env;
 
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
@@ -60,8 +62,9 @@ module.exports = env => {
     const tsConfigName = "tsconfig.tns.json";
     const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
-    const entries = { bundle: entryPath, application: "./application.android" };
-    if (platform === "ios") {
+    const entries = { bundle: entryPath };
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
+    if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
     };
 
@@ -101,8 +104,14 @@ module.exports = env => {
 
     let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
 
+    const itemsToClean = [`${dist}/**/*`];
+    if (platform === "android") {
+        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
+        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
+    }
+
     const config = {
-        mode: uglify ? "production" : "development",
+        mode: production ? "production" : "development",
         context: appFullPath,
         externals,
         watchOptions: {
@@ -257,7 +266,7 @@ module.exports = env => {
                 "process": undefined,
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin([`${dist}/**/*`]),
+            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: { glob: "fonts/**" } },
@@ -274,19 +283,6 @@ module.exports = env => {
         ],
     };
 
-    // Copy the native app resources to the out dir
-    // only if doing a full build (tns run/build) and not previewing (tns preview)
-    if (!externals || externals.length === 0) {
-        config.plugins.push(new CopyWebpackPlugin([
-            {
-                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
-                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
-                context: projectRoot
-            },
-        ]));
-    }
-
-
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({

demo/JavaScriptApp/app/activity.android.js

@@ -1,4 +1,4 @@
-const frame = require("ui/frame");
+const frame = require("tns-core-modules/ui/frame");
 
 const superProto = androidx.appcompat.app.AppCompatActivity.prototype;
 androidx.appcompat.app.AppCompatActivity.extend("org.myApp.MainActivity", {

demo/JavaScriptApp/app/app.js

@@ -4,7 +4,7 @@ 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.
 */
 
-var application = require("application");
+var application = require("tns-core-modules/application");
 
 application.start({ moduleName: "main-page" });
 

demo/JavaScriptApp/app/main-page.android.js

@@ -1,4 +1,4 @@
-var frameModule = require("ui/frame");
+var frameModule = require("tns-core-modules/ui/frame");
 var createViewModel = require("./main-view-model").createViewModel;
 
 function onNavigatingTo(args) {

demo/JavaScriptApp/app/main-page.ios.js

@@ -1,4 +1,4 @@
-var frameModule = require("ui/frame");
+var frameModule = require("tns-core-modules/ui/frame");
 var createViewModel = require("./main-view-model").createViewModel;
 
 function onNavigatingTo(args) {

demo/JavaScriptApp/app/main-view-model.js

@@ -1,4 +1,4 @@
-var Observable = require("data/observable").Observable;
+var Observable = require("tns-core-modules/data/observable").Observable;
 
 function getMessage(counter) {
     if (counter <= 0) {

demo/JavaScriptApp/package.json

@@ -27,9 +27,8 @@
     "mocha": "~5.2.0",
     "mochawesome": "~3.1.2",
     "nativescript-dev-appium": "next",
-    "nativescript-dev-sass": "next",
     "nativescript-dev-webpack": "next",
-    "node-sass": "^4.7.1"
+    "node-sass": "4.12.0"
   },
   "scripts": {
     "setup": "npm pack ../../ && npm i -D nativescript-dev-webpack*.tgz",

demo/JavaScriptApp/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 ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -39,12 +40,14 @@ module.exports = env => {
 
         // You can provide the following flags when running 'tns run android|ios'
         snapshot, // --env.snapshot
+        production, // --env.production
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
         hiddenSourceMap, // --env.hiddenSourceMap
         hmr, // --env.hmr,
-        unitTesting, // --env.unitTesting
+        unitTesting, // --env.unitTesting,
+        verbose, // --env.verbose
     } = env;
 
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
@@ -55,14 +58,21 @@ module.exports = env => {
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.js`;
     const entries = { bundle: entryPath, application: "./application.android" };
-    if (platform === "ios") {
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
+    if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
     };
 
     let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
 
+    const itemsToClean = [`${dist}/**/*`];
+    if (platform === "android") {
+        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
+        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
+    }
+
     const config = {
-        mode: uglify ? "production" : "development",
+        mode: production ? "production" : "development",
         context: appFullPath,
         externals,
         watchOptions: {
@@ -208,7 +218,7 @@ module.exports = env => {
                 "process": undefined,
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin([`${dist}/**/*`]),
+            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: { glob: "fonts/**" } },
@@ -226,21 +236,12 @@ module.exports = env => {
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
             new nsWebpack.WatchStateLoggerPlugin(),
+            new ExtraWatchWebpackPlugin({
+                files: [`node_modules/**/*.${platform}.js`]
+            })
         ],
     };
 
-    // Copy the native app resources to the out dir
-    // only if doing a full build (tns run/build) and not previewing (tns preview)
-    if (!externals || externals.length === 0) {
-        config.plugins.push(new CopyWebpackPlugin([
-            {
-                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
-                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
-                context: projectRoot
-            },
-        ]));
-    }
-
     if (report) {
         // Generate report files for bundles content
         config.plugins.push(new BundleAnalyzerPlugin({

demo/TypeScriptApp/app/activity.android.ts

@@ -1,4 +1,4 @@
-import {setActivityCallbacks, AndroidActivityCallbacks} from "ui/frame";
+import {setActivityCallbacks, AndroidActivityCallbacks} from "tns-core-modules/ui/frame";
 
 @JavaProxy("org.myApp.MainActivity")
 class Activity extends androidx.appcompat.app.AppCompatActivity {