test: add merge tests

packages/webpack5/.gitignore

@@ -1,2 +1,3 @@
 #
 dist
+coverage

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

@@ -178,8 +178,7 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
         'global.isAndroid': true,
         'global.isIOS': false,
         process: 'global.process',
-        profile: '() => {}',
+        __TEST__: false,
-        __TEST__: 'false',
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),
@@ -373,8 +372,7 @@ exports[`react configuration > android > base config 1`] = `
         'global.isAndroid': true,
         'global.isIOS': false,
         process: 'global.process',
-        profile: '() => {}',
+        __TEST__: false,
-        __TEST__: 'false',
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),
@@ -568,8 +566,7 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
         'global.isAndroid': false,
         'global.isIOS': true,
         process: 'global.process',
-        profile: '() => {}',
+        __TEST__: false,
-        __TEST__: 'false',
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),
@@ -766,8 +763,7 @@ exports[`react configuration > ios > base config 1`] = `
         'global.isAndroid': false,
         'global.isIOS': true,
         process: 'global.process',
-        profile: '() => {}',
+        __TEST__: false,
-        __TEST__: 'false',
         'process.env.NODE_ENV': '\\"development\\"'
       }
     ),

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

@@ -188,8 +188,7 @@ exports[`vue configuration for android 1`] = `
         __IOS__: false,
         'global.isAndroid': true,
         'global.isIOS': false,
-        process: 'global.process',
+        process: 'global.process'
-        profile: '() => {}'
       }
     ),
     /* config.plugin('WatchStateLoggerPlugin') */
@@ -392,8 +391,7 @@ exports[`vue configuration for ios 1`] = `
         __IOS__: true,
         'global.isAndroid': false,
         'global.isIOS': true,
-        process: 'global.process',
+        process: 'global.process'
-        profile: '() => {}'
       }
     ),
     /* config.plugin('WatchStateLoggerPlugin') */

packages/webpack5/__tests__/index.spec.ts

@@ -14,7 +14,6 @@ describe('@nativescript/webpack', () => {
 
 	it('applies chain configs', () => {
 		webpack.useConfig(false);
-		expect(webpack.chainWebpack).toBeInstanceOf(Function);
 
 		const chainFn = jest.fn();
 		webpack.chainWebpack(chainFn);
@@ -30,4 +29,72 @@ describe('@nativescript/webpack', () => {
 		expect(chainFn).toHaveBeenCalledWith(config, {});
 		expect(config).toBeInstanceOf(Config);
 	});
+
+	it('applies merge configs', () => {
+		const dummyEnv = { env: true };
+		webpack.init(dummyEnv);
+		webpack.useConfig(false);
+
+		const mergeFn = jest.fn();
+		webpack.mergeWebpack(mergeFn);
+
+		// mergeFn should not be called yet
+		expect(mergeFn).not.toHaveBeenCalled();
+
+		const config = webpack.resolveChainableConfig();
+
+		// mergeFn should not be called yet
+		expect(mergeFn).not.toHaveBeenCalled();
+
+		// mergeFn should only be called when
+		// resolving the final config
+		webpack.resolveConfig();
+
+		expect(mergeFn).toHaveBeenCalledTimes(1);
+		expect(mergeFn).toHaveBeenCalledWith(config.toConfig(), dummyEnv);
+	});
+
+	it('merges mutate config', () => {
+		const dummyEnv = { env: true };
+		webpack.init(dummyEnv);
+		webpack.useConfig(false);
+
+		webpack.mergeWebpack((config) => {
+			(config as any).mutated = true;
+		});
+
+		expect(webpack.resolveConfig()).toMatchObject({
+			mutated: true,
+		});
+	});
+
+	it('merges returned config', () => {
+		const dummyEnv = { env: true };
+		webpack.init(dummyEnv);
+		webpack.useConfig(false);
+
+		webpack.mergeWebpack(() => {
+			return {
+				returned: true,
+			};
+		});
+
+		expect(webpack.resolveConfig()).toMatchObject({
+			returned: true,
+		});
+	});
+
+	it('merges objects', () => {
+		const dummyEnv = { env: true };
+		webpack.init(dummyEnv);
+		webpack.useConfig(false);
+
+		webpack.mergeWebpack({
+			object: true,
+		} as any);
+
+		expect(webpack.resolveConfig()).toMatchObject({
+			object: true,
+		});
+	});
 });

packages/webpack5/src/configuration/react.ts

@@ -24,7 +24,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	config.plugin('DefinePlugin').tap((args) => {
 		args[0] = merge(args[0], {
 			/** For various libraries in the React ecosystem. */
-			__TEST__: 'false',
+			__TEST__: false,
 			/**
 			 * 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/helpers/temp.ts

@@ -1,53 +0,0 @@
-import { existsSync } from 'fs';
-import { getPackageJson } from './project';
-import { resolve } from 'path';
-
-// todo: get rid of these or reduce them to their simplest form
-// no need to do magical string replacements, loops etc...
-
-/**
- * Function to ensure the app directory exists
- *
- * @param appDirectory
- */
-function verifyEntryModuleDirectory(appDirectory: string) {
-	if (!appDirectory) {
-		throw new Error('Path to app directory is not specified. Unable to find entry module.');
-	}
-
-	if (!existsSync(appDirectory)) {
-		throw new Error(`The specified path to app directory ${appDirectory} does not exist. Unable to find entry module.`);
-	}
-}
-
-function getPackageJsonEntry() {
-	const packageJsonSource = getPackageJson();
-	const entry = packageJsonSource.main;
-
-	if (!entry) {
-		throw new Error(`package.json must contain a 'main' attribute!`);
-	}
-
-	return entry.replace(/\.js$/i, '');
-}
-
-export function getEntryModule(appDirectory: string, platform: 'android' | 'ios') {
-	verifyEntryModuleDirectory(appDirectory);
-
-	const entry = getPackageJsonEntry();
-
-	const tsEntryPath = resolve(appDirectory, `${entry}.ts`);
-	const jsEntryPath = resolve(appDirectory, `${entry}.js`);
-	let entryExists = existsSync(tsEntryPath) || existsSync(jsEntryPath);
-	if (!entryExists && platform) {
-		const platformTsEntryPath = resolve(appDirectory, `${entry}.${platform}.ts`);
-		const platformJsEntryPath = resolve(appDirectory, `${entry}.${platform}.js`);
-		entryExists = existsSync(platformTsEntryPath) || existsSync(platformJsEntryPath);
-	}
-
-	if (!entryExists) {
-		throw new Error(`The entry module ${entry} specified in ` + `${appDirectory}/package.json doesn't exist!`);
-	}
-
-	return entry;
-}

packages/webpack5/src/loaders/apply-css-loader/index.ts

@@ -18,14 +18,14 @@ export default function loader(content, map) {
 
 	const hmrCode = this.hot
 		? dedent`
-	if(module.hot) {
+			if(module.hot) {
-		module.hot.accept()
+				module.hot.accept()
-		module.hot.dispose(() => {
+				module.hot.dispose(() => {
-			const { removeTaggedAdditionalCSS } = require("@nativescript/core/ui/styling/style-scope");
+					const { removeTaggedAdditionalCSS } = require("@nativescript/core/ui/styling/style-scope");
-			removeTaggedAdditionalCSS(${tag})
+					removeTaggedAdditionalCSS(${tag})
-		})
+				})
-	}
+			}
-	`
+		`
 		: ``;
 
 	if (hasLoader('apply-css-loader')) {