Merge pull request #3903 from NativeScript/fatme/externals

chore: provide external plugins to webpack in order to fix `tns preview --bundle` command on android devices

Author: Fatme

lib/definitions/preview-app-livesync.d.ts

@@ -20,6 +20,7 @@ declare global {
 
 	interface IPreviewAppPluginsService {
 		comparePluginsOnDevice(device: Device): Promise<void>;
+		getExternalPlugins(device: Device): string[];
 	}
 
 	interface IPreviewCommandHelper {

lib/services/livesync/playground/preview-app-livesync-service.ts

@@ -44,6 +44,7 @@ export class PreviewAppLiveSyncService implements IPreviewAppLiveSyncService {
 						platform: device.platform,
 						appFilesUpdaterOptions: data.appFilesUpdaterOptions,
 					},
+					externals: this.$previewAppPluginsService.getExternalPlugins(device),
 					filesToSyncMap,
 				 	startSyncFilesTimeout: startSyncFilesTimeout.bind(this)
 				}

lib/services/livesync/playground/preview-app-plugins-service.ts

@@ -28,6 +28,21 @@ export class PreviewAppPluginsService implements IPreviewAppPluginsService {
 		this.previewAppVersionWarnings[device.previewAppVersion].map(warning => this.$logger.warn(warning));
 	}
 
+	public getExternalPlugins(device: Device): string[] {
+		const devicePlugins = this.getDevicePlugins(device);
+		const result = _.keys(devicePlugins)
+			.filter(plugin => plugin.indexOf("nativescript") !== -1)
+			// exclude angular and vue related dependencies as they do not contain
+			// any native code. In this way, we will read them from the bundle
+			// and improve the app startup time by not reading a lot of
+			// files from the file system instead. Also, the core theme links
+			// are custom and should be handled by us build time.
+			.filter(plugin => !_.includes(["nativescript-angular", "nativescript-vue", "nativescript-intl", "nativescript-theme-core"], plugin));
+
+		result.push(...["tns-core-modules", "tns-core-modules-widgets"]);
+		return result;
+	}
+
 	private getDevicePlugins(device: Device): IStringDictionary {
 		try {
 			return JSON.parse(device.plugins);

test/services/playground/preview-app-livesync-service.ts

@@ -107,7 +107,8 @@ function createTestInjector(options?: {
 	injector.register("previewAppPluginsService", {
 		comparePluginsOnDevice: async () => {
 			isComparePluginsOnDeviceCalled = true;
-		}
+		},
+		getExternalPlugins: () => <string[]>[]
 	});
 	injector.register("projectFilesManager", ProjectFilesManager);
 	injector.register("previewAppLiveSyncService", PreviewAppLiveSyncService);

test/services/playground/preview-app-plugins-service.ts

@@ -232,4 +232,56 @@ describe("previewAppPluginsService", () => {
 			});
 		}
 	});
+	describe("getExternalPlugins", () => {
+		const testCases = [
+			{
+				name: "should return default plugins(`tns-core-modules` and `tns-core-modules-widgets`) when no plugins are provided",
+				plugins: {},
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should exclude `nativescript-vue`",
+				plugins: { "nativescript-vue": "1.2.3" },
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should exclude `nativescript-intl`",
+				plugins: { "nativescript-intl": "4.5.6" },
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should exclude `nativescript-angular`",
+				plugins: { "nativescript-angular": "7.8.9" },
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should exclude `nativescript-theme-core`",
+				plugins: { "nativescript-theme-core": "1.3.5" },
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should return plugins that contain `nativescript` in their names",
+				plugins: {
+					"nativescript-facebook": "4.5.6"
+				},
+				expectedPlugins: ["nativescript-facebook", "tns-core-modules", "tns-core-modules-widgets"]
+			},
+			{
+				name: "should not return plugins that do not contain `nativescript` in their names",
+				plugins: {
+					lodash: "4.5.6",
+					xmlhttprequest: "1.2.3"
+				},
+				expectedPlugins: ["tns-core-modules", "tns-core-modules-widgets"]
+			}
+		];
+
+		_.each(testCases, testCase => {
+			it(`${testCase.name}`, () => {
+				const { previewAppPluginsService, device } = setup(testCase.plugins, testCase.plugins);
+				const actualPlugins = previewAppPluginsService.getExternalPlugins(device);
+				assert.deepEqual(actualPlugins, testCase.expectedPlugins);
+			});
+		});
+	});
 });