refactor(webpack): drop custom flavor helper & explicitly set in each config

packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap

@@ -311,6 +311,8 @@ exports[`angular configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -696,6 +698,8 @@ exports[`angular configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/base.spec.ts.snap

@@ -247,6 +247,8 @@ exports[`base configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -555,6 +557,8 @@ exports[`base configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap

@@ -264,6 +264,8 @@ exports[`javascript configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -594,6 +596,8 @@ exports[`javascript configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap

@@ -262,6 +262,8 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -581,6 +583,8 @@ exports[`react configuration > android > base config 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -900,6 +904,8 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,
@@ -1220,6 +1226,8 @@ exports[`react configuration > ios > base config 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap

@@ -273,6 +273,8 @@ exports[`svelte configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -601,6 +603,8 @@ exports[`svelte configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/typescript.spec.ts.snap

@@ -264,6 +264,8 @@ exports[`typescript configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -594,6 +596,8 @@ exports[`typescript configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: false,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -287,6 +287,8 @@ exports[`vue configuration for android 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: true,
         __IOS__: false,
         'global.isAndroid': true,
@@ -629,6 +631,8 @@ exports[`vue configuration for ios 1`] = `
         __NS_ENV_VERBOSE__: false,
         __NS_DEV_HOST_IPS__: '[\\"127.0.0.1\\",\\"192.168.0.10\\"]',
         __CSS_PARSER__: '\\"css-tree\\"',
+        __UI_USE_XML_PARSER__: true,
+        __UI_USE_EXTERNAL_RENDERER__: true,
         __ANDROID__: false,
         __IOS__: true,
         'global.isAndroid': false,

packages/webpack5/package.json

@@ -46,7 +46,7 @@
 		"ts-dedent": "^2.0.0",
 		"ts-loader": "^9.0.0",
 		"vue-loader": "^15.0.0",
-		"webpack": "5.50.0",
+		"webpack": "^5.30.0 <= 5.50.0",
 		"webpack-bundle-analyzer": "^4.0.0",
 		"webpack-chain": "^6.0.0",
 		"webpack-cli": "^4.0.0",

packages/webpack5/src/configuration/angular.ts

@@ -1,4 +1,5 @@
 import { extname, resolve } from 'path';
+import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 import { existsSync } from 'fs';
 
@@ -222,6 +223,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		])
 	);
 
+	config.plugin('DefinePlugin').tap((args) => {
+		args[0] = merge(args[0], {
+			__UI_USE_EXTERNAL_RENDERER__: true,
+		});
+
+		return args;
+	});
+
 	return config;
 }
 

packages/webpack5/src/configuration/base.ts

@@ -15,7 +15,6 @@ import { applyFileReplacements } from '../helpers/fileReplacements';
 import { addCopyRule, applyCopyRules } from '../helpers/copyRules';
 import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
 import { getProjectFilePath } from '../helpers/project';
-import { projectUsesCustomFlavor } from '../helpers/flavor';
 import { hasDependency } from '../helpers/dependencies';
 import { applyDotEnvPlugin } from '../helpers/dotEnv';
 import { env as _env, IWebpackEnv } from '../index';
@@ -354,7 +353,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 				mode === 'development' ? JSON.stringify(getIPS()) : `[]`,
 			__CSS_PARSER__: JSON.stringify(getValue('cssParser', 'css-tree')),
 			__UI_USE_XML_PARSER__: true,
-			__UI_USE_EXTERNAL_RENDERER__: projectUsesCustomFlavor(),
+			__UI_USE_EXTERNAL_RENDERER__: false,
 			__ANDROID__: platform === 'android',
 			__IOS__: platform === 'ios',
 			/* for compat only */ 'global.isAndroid': platform === 'android',

packages/webpack5/src/configuration/react.ts

@@ -26,6 +26,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		args[0] = merge(args[0], {
 			/** For various libraries in the React ecosystem. */
 			__TEST__: false,
+			__UI_USE_EXTERNAL_RENDERER__: true,
 			/**
 			 * Primarily for React Fast Refresh plugin, but technically the allowHmrInProduction option could be used instead.
 			 * Worth including anyway, as there are plenty of Node libraries that use this flag.

packages/webpack5/src/configuration/svelte.ts

@@ -1,11 +1,12 @@
+import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 
 import { getProjectFilePath } from '../helpers/project';
+import { hasDependency } from '../helpers/dependencies';
 import { getPlatformName } from '../helpers/platform';
 import { env as _env, IWebpackEnv } from '../index';
 import { error } from '../helpers/log';
 import base from './base';
-import { hasDependency } from '../helpers/dependencies';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
@@ -84,6 +85,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			});
 	}
 
+	config.plugin('DefinePlugin').tap((args) => {
+		args[0] = merge(args[0], {
+			__UI_USE_EXTERNAL_RENDERER__: true,
+		});
+
+		return args;
+	});
+
 	return config;
 }
 

packages/webpack5/src/configuration/vue.ts

@@ -88,6 +88,14 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	// add an alias for vue, since some plugins may try to import it
 	config.resolve.alias.set('vue', 'nativescript-vue');
 
+	config.plugin('DefinePlugin').tap((args) => {
+		args[0] = merge(args[0], {
+			__UI_USE_EXTERNAL_RENDERER__: true,
+		});
+
+		return args;
+	});
+
 	return config;
 }
 

packages/webpack5/src/helpers/flavor.ts

@@ -2,17 +2,6 @@ import { defaultConfigs } from '@nativescript/webpack';
 import { getAllDependencies } from './dependencies';
 import { error } from './log';
 
-/**
- * Utility to determine if the project uses an external flavor/framework
- */
-export function projectUsesCustomFlavor(): boolean {
-	const projectFlavor = determineProjectFlavor();
-
-	return (
-		projectFlavor &&
-		['vue', 'angular', 'react', 'svelte'].includes(projectFlavor)
-	);
-}
 /**
  * Utility to determine the project flavor based on installed dependencies
  * (vue, angular, react, svelete, typescript, javascript...)

packages/webpack5/src/helpers/index.ts

@@ -9,7 +9,7 @@ import { addVirtualEntry, addVirtualModule } from './virtualModules';
 import { applyFileReplacements } from './fileReplacements';
 import { addCopyRule, removeCopyRule } from './copyRules';
 import { error, info, warn, warnOnce } from './log';
-import { determineProjectFlavor, projectUsesCustomFlavor } from './flavor';
+import { determineProjectFlavor } from './flavor';
 import { getValue } from './config';
 import { getIPS } from './host';
 import {
@@ -47,7 +47,6 @@ export default {
 	},
 	flavor: {
 		determineProjectFlavor,
-		projectUsesCustomFlavor,
 	},
 	host: {
 		getIPS,