feat: ips helper, ts config, cleanups

packages/webpack5/src/configuration/base.ts

@@ -16,12 +16,14 @@ import { getProjectRootPath } from '../helpers/project';
 import { hasDependency } from '../helpers/dependencies';
 import { applyDotEnvPlugin } from '../helpers/dotEnv';
 import { env as _env, IWebpackEnv } from '../index';
+import { getIPS } from '../helpers/host';
 import {
 	getPlatformName,
 	getAbsoluteDistPath,
 	getEntryDirPath,
 	getEntryPath,
 } from '../helpers/platform';
+import os from 'os';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	const entryPath = getEntryPath();
@@ -267,6 +269,8 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		{
 			__DEV__: mode === 'development',
 			__NS_WEBPACK__: true,
+			__NS_DEV_HOST_IPS__:
+				mode === 'development' ? JSON.stringify(getIPS()) : `[]`,
 			__CSS_PARSER__: JSON.stringify('css-tree'), // todo: replace from config value
 			__ANDROID__: platform === 'android',
 			__IOS__: platform === 'ios',

packages/webpack5/src/configuration/javascript.ts

@@ -1,38 +1,28 @@
-import VirtualModulesPlugin from 'webpack-virtual-modules';
-import { ContextExclusionPlugin } from 'webpack';
 import Config from 'webpack-chain';
-import dedent from 'ts-dedent';
-import { join } from 'path';
 
-import { getEntryDirPath } from '../helpers/platform';
+import { addVirtualEntry } from '../helpers/virtualModules';
 import { env as _env, IWebpackEnv } from '../index';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
-	const virtualEntryPath = join(getEntryDirPath(), '__virtual_entry__.js');
 	const filterRE = '/.(xml|js|s?css)$/';
+	const virtualEntryPath = addVirtualEntry(
+		config,
+		'javascript',
+		`
+		// VIRTUAL ENTRY START
+		require('@nativescript/core/bundle-entry-points')
+		const context = require.context("~/", /* deep: */ true, /* filter: */ ${filterRE});
+		global.registerWebpackModules(context);
+		// VIRTUAL ENTRY END
+	`
+	);
 
 	config.entry('bundle').add(virtualEntryPath);
 
-	config
-		.plugin('ContextExclusionPluginPlugin')
-		.use(ContextExclusionPlugin, [/__virtual_entry__\.js$/]);
-
-	// Add a virtual entry module that will register all modules into
-	// the nativescript module loader/handler
-	config.plugin('VirtualModulesPlugin').use(VirtualModulesPlugin, [
-		{
-			[virtualEntryPath]: dedent`
-				require('@nativescript/core/bundle-entry-points')
-				const context = require.context("~/", /* deep: */ true, /* filter: */ ${filterRE});
-				global.registerWebpackModules(context);
-			`,
-		},
-	]);
-
-	config.resolve.extensions.add('.xml');
+	// config.resolve.extensions.add('.xml');
 
 	// set up xml
 	config.module

packages/webpack5/src/configuration/react.ts

@@ -1,8 +1,8 @@
 import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 
-import { env as _env, IWebpackEnv } from '../index';
 import { getPlatformName } from '../helpers/platform';
+import { env as _env, IWebpackEnv } from '../index';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {

packages/webpack5/src/configuration/typescript.ts

@@ -1,11 +1,35 @@
 import Config from 'webpack-chain';
 
-import { IWebpackEnv } from '../index';
+import { addVirtualEntry } from '../helpers/virtualModules';
+import { env as _env, IWebpackEnv } from '../index';
 import base from './base';
 
-// todo: add base configuration for core
-export default function (config: Config, env: IWebpackEnv): Config {
+export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
+	const filterRE = '/.(xml|js|ts|s?css)$/';
+	const virtualEntryPath = addVirtualEntry(
+		config,
+		'typescript',
+		`
+		// VIRTUAL ENTRY START
+		require('@nativescript/core/bundle-entry-points')
+		const context = require.context("~/", /* deep: */ true, /* filter: */ ${filterRE});
+		global.registerWebpackModules(context);
+		// VIRTUAL ENTRY END
+	`
+	);
+
+	config.entry('bundle').add(virtualEntryPath);
+
+	// config.resolve.extensions.add('.xml');
+
+	// set up xml
+	config.module
+		.rule('xml')
+		.test(/\.xml$/)
+		.use('xml-namespace-loader')
+		.loader('xml-namespace-loader');
+
 	return config;
 }

packages/webpack5/src/configuration/vue.ts

@@ -2,8 +2,8 @@ import { VueLoaderPlugin } from 'vue-loader';
 import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 
-import { env as _env, IWebpackEnv } from '../index';
 import { getPlatformName } from '../helpers/platform';
+import { env as _env, IWebpackEnv } from '../index';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {

packages/webpack5/src/helpers/externalConfigs.ts

@@ -2,9 +2,9 @@ import path from 'path';
 import fs from 'fs';
 
 import { getAllDependencies, getDependencyPath } from './dependencies';
+import { clearCurrentPlugin, setCurrentPlugin } from '../index';
 import { info, warn } from './log';
 import * as lib from '../index';
-import { clearCurrentPlugin, setCurrentPlugin } from '../index';
 
 /**
  * @internal

packages/webpack5/src/helpers/host.ts

@@ -0,0 +1,19 @@
+import os from 'os';
+
+export function getIPS() {
+	// todo: perhaps mock networkInterfaces instead?
+	if (__TEST__) {
+		// in tests we don't need the real ips
+		return ['127.0.0.1', '192.168.0.10'];
+	}
+
+	const interfaces = os.networkInterfaces();
+	return Object.keys(interfaces)
+		.map((name) => {
+			return interfaces[name].filter(
+				(binding: any) => binding.family === 'IPv4'
+			)[0];
+		})
+		.filter(Boolean)
+		.map((binding) => binding.address);
+}

packages/webpack5/src/helpers/virtualModules.ts

@@ -0,0 +1,46 @@
+import { ContextExclusionPlugin } from 'webpack';
+import Config from 'webpack-chain';
+import { join } from 'path';
+
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+import { getEntryDirPath } from './platform';
+import dedent from 'ts-dedent';
+
+export function addVirtualEntry(
+	config: Config,
+	name: string,
+	contents: string
+): string {
+	return addVirtualModule(
+		config,
+		`__@nativescript_webpack_virtual_entry_${name}__`,
+		contents
+	);
+}
+
+export function addVirtualModule(
+	config: Config,
+	name: string,
+	contents: string
+): string {
+	const virtualEntryPath = join(getEntryDirPath(), `${name}`);
+
+	config
+		.plugin('ContextExclusionPluginPlugin')
+		.use(ContextExclusionPlugin, [new RegExp(`${name}\.js$`)]);
+
+	const options = {
+		[virtualEntryPath]: dedent(contents),
+	};
+
+	if (config.plugins.has('VirtualModulesPlugin')) {
+		config.plugin('VirtualModulesPlugin').tap((args) => {
+			Object.assign(args[0], options);
+			return args;
+		});
+	} else {
+		config.plugin('VirtualModulesPlugin').use(VirtualModulesPlugin, [options]);
+	}
+
+	return virtualEntryPath;
+}

packages/webpack5/src/plugins/PlatformSuffixPlugin.ts

@@ -42,6 +42,7 @@ export class PlatformSuffixPlugin {
 
 		// require.context
 		compiler.hooks.contextModuleFactory.tap(id, (cmf) => {
+			// @ts-ignore
 			cmf.hooks.alternativeRequests.tap(id, (modules, options) => {
 				const additionalModules = [];
 				// we are looking for modules that are platform specific (something.<platform>.ext)