feat: introduce webpack only workflow

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 {

demo/TypeScriptApp/app/app.ts

@@ -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.
 */
 
-import * as app from 'application';
+import * as app from 'tns-core-modules/application';
 
 app.start({ moduleName: 'main-page' });
 

demo/TypeScriptApp/app/main-page.ios.ts

@@ -4,11 +4,11 @@ a code-behind file. The code-behind is a great place to place your view
 logic, and to set up your page’s data binding.
 */
 
-import { EventData } from 'data/observable';
-import { Page } from 'ui/page';
+import { EventData } from 'tns-core-modules/data/observable';
+import { Page } from 'tns-core-modules/ui/page';
 import { HelloWorldModel } from './main-view-model';
-import { Label } from 'ui/label';
-import * as frameModule from 'ui/frame';
+import { Label } from 'tns-core-modules/ui/label';
+import * as frameModule from 'tns-core-modules/ui/frame';
 
 // Event handler for Page "navigatingTo" event attached in main-page.xml
 export function onNavigatingTo(args: EventData) {

demo/TypeScriptApp/app/main-view-model.ts

@@ -1,4 +1,4 @@
-import {Observable} from 'data/observable';
+import {Observable} from 'tns-core-modules/data/observable';
 
 export class HelloWorldModel extends Observable {
 

demo/TypeScriptApp/package.json

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

demo/TypeScriptApp/webpack.config.js

@@ -6,6 +6,7 @@ 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 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");
@@ -40,12 +41,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;
     const externals = nsWebpack.getConvertedExternals(env.externals);
@@ -59,14 +62,21 @@ module.exports = env => {
 
     const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
 
-    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: {
@@ -212,10 +222,13 @@ module.exports = env => {
                         loader: "ts-loader",
                         options: {
                             configFile: tsConfigPath,
-                            transpileOnly: !!hmr,
+                            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
+                            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
+                            transpileOnly: true,
                             allowTsInNodeModules: true,
                             compilerOptions: {
-                                sourceMap: isAnySourceMapEnabled
+                                sourceMap: isAnySourceMapEnabled,
+                                declaration: false
                             }
                         },
                     }
@@ -229,7 +242,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/**" } },
@@ -246,21 +259,20 @@ module.exports = env => {
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
             new nsWebpack.WatchStateLoggerPlugin(),
+            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
+            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
+            new ForkTsCheckerWebpackPlugin({
+                tsconfig: tsConfigPath,
+                async: false,
+                useTypescriptIncrementalApi: true,
+                memoryLimit: 4096
+            }),
+            new ExtraWatchWebpackPlugin({
+                files: [`node_modules/**/*.${platform}.ts`]
+            })
         ],
     };
 
-    // 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({
@@ -285,12 +297,6 @@ 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
-        }));
     }
 
 

lib/after-prepare.js

@@ -2,15 +2,13 @@ const { installSnapshotArtefacts } = require("../snapshot/android/project-snapsh
 const { shouldSnapshot } = require("./utils");
 
 module.exports = function (hookArgs) {
-	const env = hookArgs.env || {};
-	env.hmr = hookArgs.appFilesUpdaterOptions.useHotModuleReload;
+	const env = hookArgs.prepareData.env || {};
 	const shouldSnapshotOptions = {
-		platform: hookArgs.platform,
-		bundle: hookArgs.appFilesUpdaterOptions.bundle,
-		release: hookArgs.appFilesUpdaterOptions.release
+		platform: hookArgs.prepareData.platform,
+		release: hookArgs.prepareData.release
 	};
 
 	if (env.snapshot && shouldSnapshot(shouldSnapshotOptions)) {
-		installSnapshotArtefacts(hookArgs.projectData.projectDir);
+		installSnapshotArtefacts(hookArgs.prepareData.projectDir);
 	}
 }