feat(monorepo): build with esm modules (#8729)

fixes https://github.com/NativeScript/NativeScript/issues/8739
2025-11-05 13:26:48 +08:00 · 2020-07-23 22:58:08 +02:00
parent 5658e638d5
commit fc64fc3ed9
373 changed files with 2295 additions and 1453 deletions
--- a/packages/webpack/bundle-config-loader.ts
+++ b/packages/webpack/bundle-config-loader.ts
@@ -77,7 +77,7 @@ const loader: loader.Loader = function (source, map) {

 	if (loadCss) {
 		source = `
-            require("${angular ? '@nativescript/webpack/load-application-css-angular' : '@nativescript/webpack/load-application-css-regular'}")();
+            require("${angular ? '@nativescript/webpack/helpers/load-application-css-angular' : '@nativescript/webpack/helpers/load-application-css-regular'}")();
            ${source}
        `;
 	}
--- a/packages/webpack/helpers/android-app-components-loader.js
+++ b/packages/webpack/helpers/android-app-components-loader.js
@@ -6,8 +6,8 @@ module.exports = function (source, map) {
    const imports = modules.map(convertSlashesInPath)
        .map(m => `require("${m}");`).join("\n");
    const augmentedSource = `
-        let applicationCheckPlatform = require("@nativescript/core/application");
-        if (applicationCheckPlatform.android && !global["__snapshot"]) {
+        const isAndroid = require("@nativescript/core").isAndroid;
+        if (isAndroid && !global["__snapshot"]) {
            ${imports}
        }

--- a/packages/webpack/helpers/androidProjectHelpers.js
+++ b/packages/webpack/helpers/androidProjectHelpers.js
--- a/packages/webpack/helpers/apply-css-loader.js
+++ b/packages/webpack/helpers/apply-css-loader.js
--- a/packages/webpack/helpers/css2json-loader.spec.ts
+++ b/packages/webpack/helpers/css2json-loader.spec.ts
@@ -39,7 +39,7 @@ describe('css2jsonLoader', () => {
 	it('inlines css2json loader in imports if option is provided', (done) => {
 		const loaderContext = {
 			callback: (error, source: string, map) => {
-				expect(source).toContain(`global.registerModule("./custom.css", () => require("!@nativescript/webpack/css2json-loader?useForImports!./custom.css"))`);
+				expect(source).toContain(`global.registerModule("./custom.css", () => require("!@nativescript/webpack/helpers/css2json-loader?useForImports!./custom.css"))`);
 				expect(source).toContain(`{"type":"declaration","property":"background-color","value":"#7f9"}`);

 				done();
--- a/packages/webpack/helpers/css2json-loader.ts
+++ b/packages/webpack/helpers/css2json-loader.ts
@@ -4,7 +4,7 @@ import { getOptions, urlToRequest } from 'loader-utils';

 const betweenQuotesPattern = /('|")(.*?)\1/;
 const unpackUrlPattern = /url\(([^\)]+)\)/;
-const inlineLoader = '!@nativescript/webpack/css2json-loader?useForImports!';
+const inlineLoader = '!@nativescript/webpack/helpers/css2json-loader?useForImports!';

 const loader: loader.Loader = function (content: string, map) {
 	const options = getOptions(this) || {};
--- a/packages/webpack/helpers/dependencyManager.js
+++ b/packages/webpack/helpers/dependencyManager.js
@@ -73,11 +73,11 @@ function getRequiredDeps(packageJson) {
    }

    const deps = {
-        "@angular/compiler-cli": "~8.2.0",
+        "@angular/compiler-cli": "~10.0.0",
    };

    if (!dependsOn(packageJson, "@angular-devkit/build-angular")) {
-        deps["@ngtools/webpack"] = "8.2.0";
+        deps["@ngtools/webpack"] = "~10.0.0";
    }

    return deps;
--- a/packages/webpack/helpers/hot-loader-helper.js
+++ b/packages/webpack/helpers/hot-loader-helper.js
--- a/packages/webpack/helpers/hot.js
+++ b/packages/webpack/helpers/hot.js
--- a/packages/webpack/helpers/lazy-ngmodule-hot-loader.js
+++ b/packages/webpack/helpers/lazy-ngmodule-hot-loader.js
--- a/packages/webpack/helpers/load-application-css-angular.js
+++ b/packages/webpack/helpers/load-application-css-angular.js
--- a/packages/webpack/helpers/load-application-css-regular.js
+++ b/packages/webpack/helpers/load-application-css-regular.js
--- a/packages/webpack/helpers/load-application-css.js
+++ b/packages/webpack/helpers/load-application-css.js
--- a/packages/webpack/helpers/markup-hot-loader.js
+++ b/packages/webpack/helpers/markup-hot-loader.js
@@ -1,5 +1,5 @@
 const { reload } = require("./hot-loader-helper");
-const { convertToUnixPath } = require("./lib/utils");
+const { convertToUnixPath } = require("../lib/utils");

 module.exports = function (source, map) {
    const typeMarkup = "markup";
--- a/packages/webpack/helpers/moduleid-compat-loader.js
+++ b/packages/webpack/helpers/moduleid-compat-loader.js
--- a/packages/webpack/helpers/projectFilesManager.js
+++ b/packages/webpack/helpers/projectFilesManager.js
@@ -1,7 +1,7 @@
 const path = require("path");
 const fs = require("fs");

-const { isTypeScript, isAngular, isVue, isShared } = require("./projectHelpers");
+const { isTypeScript, isAngular, isVue, isShared, isPlugin } = require("./projectHelpers");

 function addProjectFiles(projectDir) {
    const projectTemplates = getProjectTemplates(projectDir);
@@ -58,19 +58,21 @@ function copyTemplate(templateName, destinationPath) {

 function getProjectTemplates(projectDir) {
    const WEBPACK_CONFIG_NAME = "webpack.config.js";
-    const TSCONFIG_TNS_NAME = "tsconfig.tns.json";

    let templates;
-    if (isAngular({ projectDir })) {
+    if (isPlugin({ projectDir })) {
+      // TODO: create config for plugin builds
+      templates = [];
+    } else if (isAngular({ projectDir })) {
        if (isShared({ projectDir })) {
            templates = getSharedAngularTemplates(WEBPACK_CONFIG_NAME);
        } else {
-            templates = getAngularTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME);
+            templates = getAngularTemplates(WEBPACK_CONFIG_NAME);
        }
    } else if (isVue({ projectDir })) {
        templates = getVueTemplates(WEBPACK_CONFIG_NAME);
    } else if (isTypeScript({ projectDir })) {
-        templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME);
+        templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME);
    } else {
        templates = getJavaScriptTemplates(WEBPACK_CONFIG_NAME);
    }
@@ -84,17 +86,15 @@ function getSharedAngularTemplates(webpackConfigName) {
    };
 }

-function getAngularTemplates(webpackConfigName, tsconfigName) {
+function getAngularTemplates(webpackConfigName) {
    return {
-        "webpack.angular.js": webpackConfigName,
-        [tsconfigName]: tsconfigName,
+        "webpack.angular.js": webpackConfigName
    };
 }

-function getTypeScriptTemplates(webpackConfigName, tsconfigName) {
+function getTypeScriptTemplates(webpackConfigName) {
    return {
-        "webpack.typescript.js": webpackConfigName,
-        [tsconfigName]: tsconfigName,
+        "webpack.typescript.js": webpackConfigName
    };
 }

@@ -114,7 +114,7 @@ function getFullTemplatesPath(projectDir, templates) {
    let updatedTemplates = {};

    Object.keys(templates).forEach(key => {
-        const updatedKey = getFullPath(path.join(__dirname, "templates"), key);
+        const updatedKey = getFullPath(path.join(__dirname, "..", "templates"), key);
        const updatedValue = getFullPath(projectDir, templates[key])

        updatedTemplates[updatedKey] = updatedValue;
--- a/packages/webpack/helpers/projectHelpers.js
+++ b/packages/webpack/helpers/projectHelpers.js
@@ -8,13 +8,10 @@ const isTypeScript = ({ projectDir, packageJson } = {}) => {

    return (
        packageJson.dependencies &&
-        (packageJson.dependencies.hasOwnProperty("nativescript-dev-typescript") ||
            packageJson.dependencies.hasOwnProperty("typescript"))
-    ) || (
-            packageJson.devDependencies &&
-            (packageJson.devDependencies.hasOwnProperty("nativescript-dev-typescript") ||
-                packageJson.devDependencies.hasOwnProperty("typescript"))
-        ) || isAngular({ packageJson });
+           || (packageJson.devDependencies &&
+            packageJson.devDependencies.hasOwnProperty("typescript"))
+         || isAngular({ packageJson });
 };

 const isShared = ({ projectDir }) => {
@@ -22,6 +19,11 @@ const isShared = ({ projectDir }) => {
    return nsConfig && !!nsConfig.shared;
 }

+const isPlugin = ({ projectDir, packageJson } = {}) => {
+  packageJson = packageJson || getPackageJson(projectDir);
+  return packageJson && packageJson.bootstrapper && (['nativescript-plugin-seed', '@nativescript/plugin-seed'].includes(packageJson.bootstrapper));
+}
+
 const isAngular = ({ projectDir, packageJson } = {}) => {
    packageJson = packageJson || getPackageJson(projectDir);

@@ -124,6 +126,7 @@ module.exports = {
    isIos,
    isAngular,
    isShared,
+    isPlugin,
    getAngularVersion,
    isVue,
    isTypeScript,
--- a/packages/webpack/helpers/projectHelpers.spec.js
+++ b/packages/webpack/helpers/projectHelpers.spec.js
--- a/packages/webpack/helpers/script-hot-loader.js
+++ b/packages/webpack/helpers/script-hot-loader.js
@@ -1,5 +1,5 @@
 const { reload } = require("./hot-loader-helper");
-const { convertToUnixPath } = require("./lib/utils");
+const { convertToUnixPath } = require("../lib/utils");

 module.exports = function (source, map) {
    const typeScript = "script";
--- a/packages/webpack/helpers/style-hot-loader.js
+++ b/packages/webpack/helpers/style-hot-loader.js
@@ -1,5 +1,5 @@
 const { reload } = require("./hot-loader-helper");
-const { convertToUnixPath } = require("./lib/utils");
+const { convertToUnixPath } = require("../lib/utils");

 module.exports = function (source, map) {
    const typeStyle = "style";
--- a/packages/webpack/helpers/xml-namespace-loader.spec.ts
+++ b/packages/webpack/helpers/xml-namespace-loader.spec.ts
--- a/packages/webpack/helpers/xml-namespace-loader.ts
+++ b/packages/webpack/helpers/xml-namespace-loader.ts
--- a/packages/webpack/hmr/hmr-update.ts
+++ b/packages/webpack/hmr/hmr-update.ts
@@ -1,4 +1,4 @@
-import * as hot from '../hot';
+import * as hot from '../helpers/hot';

 declare const __webpack_require__: any;

--- a/packages/webpack/index.js
+++ b/packages/webpack/index.js
@@ -1,11 +1,11 @@
 const path = require("path");
 const { existsSync } = require("fs");
-const { ANDROID_APP_PATH } = require("./androidProjectHelpers");
+const { ANDROID_APP_PATH } = require("./helpers/androidProjectHelpers");
 const {
    getPackageJson,
    isAndroid,
    isIos,
-} = require("./projectHelpers");
+} = require("./helpers/projectHelpers");

 Object.assign(exports, require("./plugins"));
 Object.assign(exports, require("./host/resolver"));
--- a/packages/webpack/installer.js
+++ b/packages/webpack/installer.js
@@ -1,6 +1,6 @@
-const helpers = require("./projectHelpers");
-const projectFilesManager = require("./projectFilesManager");
-const dependencyManager = require("./dependencyManager");
+const helpers = require("./helpers/projectHelpers");
+const projectFilesManager = require("./helpers/projectFilesManager");
+const dependencyManager = require("./helpers/dependencyManager");

 function install() {
    const projectDir = helpers.getProjectDir();
--- a/packages/webpack/lib/utils.js
+++ b/packages/webpack/lib/utils.js
@@ -1,7 +1,7 @@
 const os = require("os");
 const { dirname } = require("path");
 const { existsSync, mkdirSync } = require("fs");
-const { isAndroid } = require("../projectHelpers");
+const { isAndroid } = require("../helpers/projectHelpers");

 function shouldSnapshot(config) {
    const platformSupportsSnapshot = isAndroid(config.platform);
--- a/packages/webpack/merge-guidance-schema.png
+++ b/packages/webpack/merge-guidance-schema.png
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@nativescript/webpack",
-  "version": "2.0.0-rc.1",
+  "version": "2.1.3",
  "main": "index",
  "description": "Webpack plugin for NativeScript",
  "homepage": "https://nativescript.org",
@@ -53,8 +53,8 @@
    "@angular-devkit/core": "~10.0.0",
    "clean-webpack-plugin": "~3.0.0",
    "copy-webpack-plugin": "~6.0.2",
-    "css": "~2.2.1",
-    "css-loader": "~3.6.0",
+    "css": "~3.0.0",
+    "css-loader": "~4.2.0",
    "escape-string-regexp": "~4.0.0",
    "fork-ts-checker-webpack-plugin": "~5.0.0",
    "global-modules-path": "~2.3.0",
@@ -72,10 +72,10 @@
    "semver": "^7.3.0",
    "shelljs": "~0.8.4",
    "tapable": "~1.1.3",
-    "terser": "~4.8.0",
+    "terser": "~5.0.0",
    "terser-webpack-plugin": "~3.0.6",
-    "ts-loader": "^7.0.0",
-    "webpack": "~4.43.0",
+    "ts-loader": "^8.0.2",
+    "webpack": "~4.44.1",
    "webpack-bundle-analyzer": "~3.8.0",
    "webpack-cli": "~3.3.12",
    "webpack-sources": "~1.4.3"
@@ -92,9 +92,9 @@
    "@types/proxyquire": "~1.3.28",
    "@types/sax": "^1.2.0",
    "@types/semver": "^7.3.0",
-    "@types/webpack": "^4.41.18",
+    "@types/webpack": "^4.41.21",
    "conventional-changelog-cli": "~2.0.34",
-    "jasmine": "^3.5.0",
+    "jasmine": "^3.6.1",
    "jasmine-spec-reporter": "^5.0.2",
    "nyc": "^15.1.0",
    "proxyquire": "~2.1.0",
--- a/packages/webpack/plugins/GenerateNativeScriptEntryPointsPlugin.js
+++ b/packages/webpack/plugins/GenerateNativeScriptEntryPointsPlugin.js
@@ -1,6 +1,6 @@
 const { convertToUnixPath } = require("../lib/utils");
 const { RawSource, ConcatSource } = require("webpack-sources");
-const { getPackageJson } = require("../projectHelpers");
+const { getPackageJson } = require("../helpers/projectHelpers");
 const { SNAPSHOT_ENTRY_NAME } = require("./NativeScriptSnapshotPlugin");
 const path = require("path");

--- a/packages/webpack/plugins/NativeScriptSnapshotPlugin/index.js
+++ b/packages/webpack/plugins/NativeScriptSnapshotPlugin/index.js
@@ -3,11 +3,11 @@ const { closeSync, openSync, writeFileSync } = require("fs");
 const validateOptions = require("schema-utils");

 const ProjectSnapshotGenerator = require("../../snapshot/android/project-snapshot-generator");
-const { getPackageJson } = require("../../projectHelpers");
+const { getPackageJson } = require("../../helpers/projectHelpers");
 const {
    ANDROID_PROJECT_DIR,
    ANDROID_APP_PATH,
-} = require("../../androidProjectHelpers");
+} = require("../../helpers/androidProjectHelpers");
 const { ensureDirectoryExistence } = require("../../lib/utils");
 const schema = require("./options.json");

@@ -50,8 +50,8 @@ exports.NativeScriptSnapshotPlugin = (function () {
            snapshotEntryContent += `
            require("${
                options.angular ?
-                    '@nativescript/webpack/load-application-css-angular' :
-                    '@nativescript/webpack/load-application-css-regular'
+                    '@nativescript/webpack/helpers/load-application-css-angular' :
+                    '@nativescript/webpack/helpers/load-application-css-regular'
                }")();
            `;
        }
--- a/packages/webpack/postinstall.js
+++ b/packages/webpack/postinstall.js
@@ -2,8 +2,8 @@

 const hook = require("@nativescript/hook")(__dirname);

-const { compareProjectFiles } = require("./projectFilesManager");
-const { getProjectDir } = require("./projectHelpers");
+const { compareProjectFiles } = require("./helpers/projectFilesManager");
+const { getProjectDir } = require("./helpers/projectHelpers");
 const path = require("path");
 const fs = require("fs");

--- a/packages/webpack/preuninstall.js
+++ b/packages/webpack/preuninstall.js
@@ -2,7 +2,7 @@

 const hook = require("@nativescript/hook")(__dirname);

-const { getProjectDir } = require("./projectHelpers");
+const { getProjectDir } = require("./helpers/projectHelpers");

 const projectDir = getProjectDir();

--- a/packages/webpack/release-contribution-guide-schema-webpack.png
+++ b/packages/webpack/release-contribution-guide-schema-webpack.png
--- a/packages/webpack/snapshot/android/project-snapshot-generator.js
+++ b/packages/webpack/snapshot/android/project-snapshot-generator.js
@@ -16,7 +16,7 @@ const {
    getAndroidV8Version,
    getRuntimeNdkRevision,
    getMksnapshotParams
-} = require("../../androidProjectHelpers");
+} = require("../../helpers/androidProjectHelpers");

 // min version with settings.json file specifying the V8 version
 const MIN_ANDROID_RUNTIME_VERSION = "5.2.1";
--- a/packages/webpack/templates/tsconfig.tns.json
+++ b/packages/webpack/templates/tsconfig.tns.json
@@ -1,7 +0,0 @@
-{
-    "extends": "./tsconfig",
-    "compilerOptions": {
-        "module": "ESNext",
-        "moduleResolution": "node"
-    }
-}
--- a/packages/webpack/templates/webpack.angular.js
+++ b/packages/webpack/templates/webpack.angular.js
@@ -1,4 +1,5 @@
 const { join, relative, resolve, sep, dirname } = require('path');
+const fs = require('fs');

 const webpack = require('webpack');
 const nsWebpack = require('@nativescript/webpack');
@@ -6,9 +7,11 @@ const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
 const {
  nsSupportHmrNg
 } = require('@nativescript/webpack/transformers/ns-support-hmr-ng');
+const { nsTransformNativeClassesNg } = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng");
 const {
  getMainModulePath
 } = require('@nativescript/webpack/utils/ast-utils');
+const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils");
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
@@ -57,6 +60,7 @@ module.exports = env => {
    hiddenSourceMap, // --env.hiddenSourceMap
    hmr, // --env.hmr,
    unitTesting, // --env.unitTesting
+    testing, // --env.testing
    verbose, // --env.verbose
    ci, // --env.ci
    snapshotInDocker, // --env.snapshotInDocker
@@ -69,19 +73,31 @@ module.exports = env => {
  const externals = nsWebpack.getConvertedExternals(env.externals);
  const appFullPath = resolve(projectRoot, appPath);
  const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
-  const tsConfigName = 'tsconfig.tns.json';
+  let tsConfigName = 'tsconfig.json';
+  let tsConfigTnsName = 'tsconfig.tns.json';
+  let tsConfigPath = resolve(projectRoot, tsConfigName);
+  const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName);
+  if (fs.existsSync(tsConfigTnsPath)) {
+    // still support shared angular app configurations 
+    tsConfigName = tsConfigTnsName;
+    tsConfigPath = tsConfigTnsPath;
+  }
  const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
  const entryPath = `.${sep}${entryModule}`;
  const entries = { bundle: entryPath };
  const areCoreModulesExternal =
    Array.isArray(env.externals) &&
    env.externals.some(e => e.indexOf('@nativescript') > -1);
-  if (platform === 'ios' && !areCoreModulesExternal) {
+  if (platform === 'ios' && !areCoreModulesExternal && !testing) {
    entries['tns_modules/@nativescript/core/inspector_modules'] =
      'inspector_modules';
  }

-  const ngCompilerTransformers = [];
+  const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
+  nsWebpack.processTsPathsForScopedModules({ compilerOptions });
+  nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
+
+  const ngCompilerTransformers = [nsTransformNativeClassesNg];
  const additionalLazyModuleResources = [];

  const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
@@ -123,10 +139,11 @@ module.exports = env => {
      t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)
    ),
    mainPath: join(appFullPath, entryModule),
-    tsConfigPath: join(__dirname, tsConfigName),
+    tsConfigPath,
    skipCodeGeneration: false,
    sourceMap: !!isAnySourceMapEnabled,
-    additionalLazyModuleResources: additionalLazyModuleResources
+    additionalLazyModuleResources: additionalLazyModuleResources,
+    compilerOptions: { paths: compilerOptions.paths }
  });

  let sourceMapFilename = nsWebpack.getSourceMapFilename(
@@ -162,6 +179,8 @@ module.exports = env => {
    );
  }

+  const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName);
+
  nsWebpack.processAppComponents(appComponents, platform);
  const config = {
    mode: production ? 'production' : 'development',
@@ -219,6 +238,7 @@ module.exports = env => {
      : 'none',
    optimization: {
      runtimeChunk: 'single',
+      noEmitOnErrors: noEmitOnErrorFromTSConfig,
      splitChunks: {
        cacheGroups: {
          vendor: {
@@ -277,7 +297,7 @@ module.exports = env => {
          use: [
            // Require all Android app components
            platform === 'android' && {
-              loader: '@nativescript/webpack/android-app-components-loader',
+              loader: '@nativescript/webpack/helpers/android-app-components-loader',
              options: { modules: appComponents }
            },

@@ -300,9 +320,9 @@ module.exports = env => {
        {
          test: /[\/|\\]app\.css$/,
          use: [
-              '@nativescript/webpack/style-hot-loader',
+              '@nativescript/webpack/helpers/style-hot-loader',
              {
-                  loader: "@nativescript/webpack/css2json-loader",
+                  loader: "@nativescript/webpack/helpers/css2json-loader",
                  options: { useForImports: true }
              },
          ],
@@ -310,9 +330,9 @@ module.exports = env => {
        {
          test: /[\/|\\]app\.scss$/,
          use: [
-              '@nativescript/webpack/style-hot-loader',
+              '@nativescript/webpack/helpers/style-hot-loader',
              {
-                  loader: "@nativescript/webpack/css2json-loader",
+                  loader: "@nativescript/webpack/helpers/css2json-loader",
                  options: { useForImports: true }
              },
              'sass-loader',
@@ -330,8 +350,8 @@ module.exports = env => {
        {
          test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
          use: [
-            '@nativescript/webpack/moduleid-compat-loader',
-            '@nativescript/webpack/lazy-ngmodule-hot-loader',
+            '@nativescript/webpack/helpers/moduleid-compat-loader',
+            '@nativescript/webpack/helpers/lazy-ngmodule-hot-loader',
            '@ngtools/webpack'
          ]
        },
@@ -348,6 +368,8 @@ module.exports = env => {
      // Define useful constants like TNS_WEBPACK
      new webpack.DefinePlugin({
        'global.TNS_WEBPACK': 'true',
+        'global.isAndroid': platform === 'android',
+        'global.isIOS': platform === 'ios',
        process: 'global.process'
      }),
      // Remove all files from the out dir.
--- a/packages/webpack/templates/webpack.config.spec.ts
+++ b/packages/webpack/templates/webpack.config.spec.ts
@@ -42,6 +42,7 @@ const nativeScriptDevWebpack = {

 const emptyObject = {};
 const FakeHmrTransformerFlag = 'hmr';
+const FakeNativeClassTransformerFlag = 'NativeClass';
 const FakeLazyTransformerFlag = 'lazy';
 const webpackConfigAngular = proxyquire('./webpack.angular', {
 	'@nativescript/webpack': nativeScriptDevWebpack,
@@ -51,6 +52,11 @@ const webpackConfigAngular = proxyquire('./webpack.angular', {
 			return FakeHmrTransformerFlag;
 		},
 	},
+	'@nativescript/webpack/transformers/ns-transform-native-classes-ng': {
+		nsTransformNativeClassesNg: () => {
+			return FakeNativeClassTransformerFlag;
+		},
+	},
 	'@nativescript/webpack/utils/ast-utils': {
 		getMainModulePath: () => {
 			return 'fakePath';
@@ -78,6 +84,7 @@ const webpackConfigAngular = proxyquire('./webpack.angular', {
 const webpackConfigTypeScript = proxyquire('./webpack.typescript', {
 	'@nativescript/webpack': nativeScriptDevWebpack,
 	'@nativescript/webpack/nativescript-target': emptyObject,
+	'@nativescript/webpack/transformers/ns-transform-native-classes': emptyObject,
 	'@nativescript/webpack/utils/tsconfig-utils': {
 		getNoEmitOnErrorFromTSConfig: () => {
 			return false;
@@ -98,6 +105,7 @@ const webpackConfigJavaScript = proxyquire('./webpack.javascript', {
 const webpackConfigVue = proxyquire('./webpack.vue', {
 	'@nativescript/webpack': nativeScriptDevWebpack,
 	'@nativescript/webpack/nativescript-target': emptyObject,
+	'@nativescript/webpack/transformers/ns-transform-native-classes': emptyObject,
 	'vue-loader/lib/plugin': EmptyClass,
 	'nativescript-vue-template-compiler': emptyObject,
 	'terser-webpack-plugin': TerserJsStub,
@@ -180,14 +188,15 @@ describe('webpack.config.js', () => {
 						angularCompilerOptions = null;
 					});

-					it('should be empty by default', () => {
+					it('should contain only NativeClass transformer by default', () => {
 						const input = getInput({ platform });

 						webpackConfig(input);

 						expect(angularCompilerOptions).toBeDefined();
 						expect(angularCompilerOptions.platformTransformers).toBeDefined();
-						expect(angularCompilerOptions.platformTransformers.length).toEqual(0);
+						expect(angularCompilerOptions.platformTransformers.length).toEqual(1);
+						expect(angularCompilerOptions.platformTransformers[0]).toEqual(FakeNativeClassTransformerFlag);
 					});

 					it('should contain the HMR transformer when the HMR flag is passed', () => {
@@ -197,8 +206,8 @@ describe('webpack.config.js', () => {

 						expect(angularCompilerOptions).toBeDefined();
 						expect(angularCompilerOptions.platformTransformers).toBeDefined();
-						expect(angularCompilerOptions.platformTransformers.length).toEqual(1);
-						expect(angularCompilerOptions.platformTransformers[0]).toEqual(FakeHmrTransformerFlag);
+						expect(angularCompilerOptions.platformTransformers.length).toEqual(2);
+						expect(angularCompilerOptions.platformTransformers[1]).toEqual(FakeHmrTransformerFlag);
 					});
 				});
 			}
--- a/packages/webpack/templates/webpack.javascript.js
+++ b/packages/webpack/templates/webpack.javascript.js
@@ -49,6 +49,7 @@ module.exports = env => {
        hiddenSourceMap, // --env.hiddenSourceMap
        hmr, // --env.hmr,
        unitTesting, // --env.unitTesting,
+        testing, // --env.testing
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
@@ -82,7 +83,7 @@ module.exports = env => {
    entries.bundle = entryPath;

    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-    if (platform === "ios" && !areCoreModulesExternal) {
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
    };

@@ -190,7 +191,7 @@ module.exports = env => {
                    use: [
                        // Require all Android app components
                        platform === "android" && {
-                            loader: "@nativescript/webpack/android-app-components-loader",
+                            loader: "@nativescript/webpack/helpers/android-app-components-loader",
                            options: { modules: appComponents }
                        },

@@ -212,17 +213,17 @@ module.exports = env => {
                    use: "@nativescript/webpack/hmr/hot-loader"
                },

-                { test: /\.(html|xml)$/, use: "@nativescript/webpack/xml-namespace-loader" },
+                { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" },

                {
                    test: /\.css$/,
-                    use: "@nativescript/webpack/css2json-loader"
+                    use: "@nativescript/webpack/helpers/css2json-loader"
                },

                {
                    test: /\.scss$/,
                    use: [
-                        "@nativescript/webpack/css2json-loader",
+                        "@nativescript/webpack/helpers/css2json-loader",
                        "sass-loader"
                    ]
                },
@@ -232,6 +233,8 @@ module.exports = env => {
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
+                "global.isAndroid": platform === 'android',
+                "global.isIOS": platform === 'ios',
                "process": "global.process",
            }),
            // Remove all files from the out dir.
@@ -291,9 +294,5 @@ module.exports = env => {
        config.plugins.push(new webpack.HotModuleReplacementPlugin());
    }

-    config.stats = {
-      warnings: false
-    };
-
    return config;
 };
--- a/packages/webpack/templates/webpack.typescript.js
+++ b/packages/webpack/templates/webpack.typescript.js
@@ -5,6 +5,7 @@ const webpack = require("webpack");
 const nsWebpack = require("@nativescript/webpack");
 const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
 const { getNoEmitOnErrorFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils");
+const nsTransformNativeClasses = require("@nativescript/webpack/transformers/ns-transform-native-classes").default;
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -51,6 +52,7 @@ module.exports = env => {
        hiddenSourceMap, // --env.hiddenSourceMap
        hmr, // --env.hmr,
        unitTesting, // --env.unitTesting,
+        testing, // --env.testing
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
@@ -84,10 +86,10 @@ module.exports = env => {
    const entries = env.entries || {};
    entries.bundle = entryPath;

-    const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
+    const tsConfigPath = resolve(projectRoot, "tsconfig.json");

    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-    if (platform === "ios" && !areCoreModulesExternal) {
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
    };

@@ -196,7 +198,7 @@ module.exports = env => {
                    use: [
                        // Require all Android app components
                        platform === "android" && {
-                            loader: "@nativescript/webpack/android-app-components-loader",
+                            loader: "@nativescript/webpack/helpers/android-app-components-loader",
                            options: { modules: appComponents }
                        },

@@ -218,17 +220,17 @@ module.exports = env => {
                    use: "@nativescript/webpack/hmr/hot-loader"
                },

-                { test: /\.(html|xml)$/, use: "@nativescript/webpack/xml-namespace-loader" },
+                { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" },

                {
                    test: /\.css$/,
-                    use: "@nativescript/webpack/css2json-loader"
+                    use: "@nativescript/webpack/helpers/css2json-loader"
                },

                {
                    test: /\.scss$/,
                    use: [
-                        "@nativescript/webpack/css2json-loader",
+                        "@nativescript/webpack/helpers/css2json-loader",
                        "sass-loader"
                    ]
                },
@@ -246,7 +248,10 @@ module.exports = env => {
                            compilerOptions: {
                                sourceMap: isAnySourceMapEnabled,
                                declaration: false
-                            }
+                            },
+                            getCustomTransformers: (program) => ({
+                              before: [nsTransformNativeClasses]
+                            })
                        },
                    }
                },
@@ -256,6 +261,8 @@ module.exports = env => {
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
+                "global.isAndroid": platform === 'android',
+                "global.isIOS": platform === 'ios',
                "process": "global.process",
            }),
            // Remove all files from the out dir.
@@ -327,9 +334,5 @@ module.exports = env => {
        config.plugins.push(new webpack.HotModuleReplacementPlugin());
    }

-    config.stats = {
-      warnings: false
-    };
-
    return config;
 };
--- a/packages/webpack/templates/webpack.vue.js
+++ b/packages/webpack/templates/webpack.vue.js
@@ -11,6 +11,7 @@ const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");

 const nsWebpack = require("@nativescript/webpack");
 const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
+const nsTransformNativeClasses = require("@nativescript/webpack/transformers/ns-transform-native-classes").default;
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const hashSalt = Date.now().toString();

@@ -51,6 +52,7 @@ module.exports = env => {
        sourceMap, // --env.sourceMap
        hiddenSourceMap, // --env.hiddenSourceMap
        unitTesting, // --env.unitTesting
+        testing, // --env.testing
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
@@ -86,7 +88,7 @@ module.exports = env => {
    entries.bundle = entryPath;

    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-    if (platform === "ios" && !areCoreModulesExternal) {
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
    };
    console.log(`Bundling application for entryPath ${entryPath}...`);
@@ -195,7 +197,7 @@ module.exports = env => {
                use: [
                    // Require all Android app components
                    platform === "android" && {
-                        loader: "@nativescript/webpack/android-app-components-loader",
+                        loader: "@nativescript/webpack/helpers/android-app-components-loader",
                        options: { modules: appComponents },
                    },

@@ -215,9 +217,9 @@ module.exports = env => {
            {
                test: /[\/|\\]app\.css$/,
                use: [
-                    '@nativescript/webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
                    {
-                        loader: "@nativescript/webpack/css2json-loader",
+                        loader: "@nativescript/webpack/helpers/css2json-loader",
                        options: { useForImports: true }
                    },
                ],
@@ -225,9 +227,9 @@ module.exports = env => {
            {
                test: /[\/|\\]app\.scss$/,
                use: [
-                    '@nativescript/webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
                    {
-                        loader: "@nativescript/webpack/css2json-loader",
+                        loader: "@nativescript/webpack/helpers/css2json-loader",
                        options: { useForImports: true }
                    },
                    'sass-loader',
@@ -237,8 +239,8 @@ module.exports = env => {
                test: /\.css$/,
                exclude: /[\/|\\]app\.css$/,
                use: [
-                    '@nativescript/webpack/style-hot-loader',
-                    '@nativescript/webpack/apply-css-loader.js',
+                    '@nativescript/webpack/helpers/style-hot-loader',
+                    '@nativescript/webpack/helpers/apply-css-loader.js',
                    { loader: "css-loader", options: { url: false } },
                ],
            },
@@ -246,8 +248,8 @@ module.exports = env => {
                test: /\.scss$/,
                exclude: /[\/|\\]app\.scss$/,
                use: [
-                    '@nativescript/webpack/style-hot-loader',
-                    '@nativescript/webpack/apply-css-loader.js',
+                    '@nativescript/webpack/helpers/style-hot-loader',
+                    '@nativescript/webpack/helpers/apply-css-loader.js',
                    { loader: "css-loader", options: { url: false } },
                    'sass-loader',
                ],
@@ -264,7 +266,10 @@ module.exports = env => {
                    allowTsInNodeModules: true,
                    compilerOptions: {
                        declaration: false
-                    }
+                    },
+                    getCustomTransformers: (program) => ({
+                      before: [nsTransformNativeClasses]
+                    })
                },
            },
            {
@@ -283,6 +288,8 @@ module.exports = env => {
            // Define useful constants like TNS_WEBPACK
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
+                "global.isAndroid": platform === 'android',
+                "global.isIOS": platform === 'ios',
                "TNS_ENV": JSON.stringify(mode),
                "process": "global.process"
            }),
@@ -316,14 +323,14 @@ module.exports = env => {
        config.module.rules.push(
            {
                test: /-page\.js$/,
-                use: "@nativescript/webpack/script-hot-loader"
+                use: "@nativescript/webpack/helpers/script-hot-loader"
            },
            {
                test: /\.(html|xml)$/,
-                use: "@nativescript/webpack/markup-hot-loader"
+                use: "@nativescript/webpack/helpers/markup-hot-loader"
            },

-            { test: /\.(html|xml)$/, use: "@nativescript/webpack/xml-namespace-loader" }
+            { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" }
        );
    }

--- a/packages/webpack/transformers/ns-transform-native-classes-ng.ts
+++ b/packages/webpack/transformers/ns-transform-native-classes-ng.ts
@@ -0,0 +1,7 @@
+import * as ts from 'typescript';
+import { AngularCompilerPlugin } from '@ngtools/webpack';
+const nsTransformNativeClasses = require('./ns-transform-native-classes');
+
+export function nsTransformNativeClassesNg(acp: AngularCompilerPlugin) {
+	return nsTransformNativeClasses.default;
+}
--- a/packages/webpack/transformers/ns-transform-native-classes.ts
+++ b/packages/webpack/transformers/ns-transform-native-classes.ts
@@ -0,0 +1,34 @@
+import * as ts from "typescript";
+
+export default function (ctx: ts.TransformationContext) {
+	function isNativeClassExtension(node: ts.ClassDeclaration) {
+		return (
+			node.decorators &&
+			node.decorators.filter((d) => {
+				const fullText = d.getFullText().trim();
+				return fullText.indexOf('@NativeClass') > -1;
+			}).length > 0
+		);
+	}
+	function visitNode(node: ts.Node): ts.Node {
+		if (ts.isClassDeclaration(node) && isNativeClassExtension(node)) {
+			return createHelper(node);
+		}
+		return ts.visitEachChild(node, visitNode, ctx);
+	}
+
+    function createHelper(node: ts.Node) {
+        // we remove the decorator for now!
+        return ts.createIdentifier(
+            ts.transpileModule(node.getText().replace(/@NativeClass(\((.|\n)*?\))?/gm, ''), {
+                compilerOptions: { noEmitHelpers:true, module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES5 },
+            }).outputText
+        );
+    }
+
+    return (source: ts.SourceFile) =>
+        ts.updateSourceFileNode(
+            source,
+            ts.visitNodes(source.statements, visitNode)
+        );
+}
--- a/packages/webpack/unit-testing-config-loader.js
+++ b/packages/webpack/unit-testing-config-loader.js
@@ -1,9 +1,9 @@
 const { join, relative } = require("path");
 const { existsSync } = require("fs");
-const { convertSlashesInPath } = require("./projectHelpers");
+const { convertSlashesInPath } = require("./helpers/projectHelpers");

 function getRunnerFullPath(projectRoot) {
-    const runnerRootPath = join(projectRoot, "node_modules", "nativescript-unit-test-runner");
+    const runnerRootPath = join(projectRoot, "node_modules", "@nativescript/unit-test-runner");
    const runnerAppPath = join(runnerRootPath, "app");
    const result = existsSync(runnerAppPath) ? runnerAppPath : runnerRootPath;

--- a/packages/webpack/utils/transformers-utils.ts
+++ b/packages/webpack/utils/transformers-utils.ts
@@ -1,6 +1,6 @@
 import { AngularCompilerPlugin } from '@ngtools/webpack';
 import * as semver from 'semver';
-import { getAngularVersion } from '../projectHelpers';
+import { getAngularVersion } from '../helpers/projectHelpers';

 export function getResolvedEntryModule(ngCompiler: AngularCompilerPlugin, projectDir: string) {
 	const ngCoreVersion = projectDir && semver.coerce(getAngularVersion({ projectDir }));
--- a/packages/webpack/verify/update.js
+++ b/packages/webpack/verify/update.js
@@ -6,8 +6,8 @@ const {
    getProjectDir,
    writePackageJson,
 } = require("../projectHelpers");
-const { forceUpdateProjectFiles } = require("../projectFilesManager");
-const { forceUpdateProjectDeps } = require("../dependencyManager");
+const { forceUpdateProjectFiles } = require("../helpers/projectFilesManager");
+const { forceUpdateProjectDeps } = require("../helpers/dependencyManager");

 const PLUGIN_NAME = "@nativescript/webpack";
 const PROJECT_DIR = getProjectDir();