feat: additional base setup

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

@@ -1,47 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`vue configuration works 1`] = `
+exports[`vue configuration [android] works 1`] = `
-Object {
+"{
-  "entry": Object {
+  resolve: {
-    "": Array [],
+    symlinks: true,
+    alias: {
+      '~/package.json': 'package.json',
+      '~': '<TODO>appFullPath',
+      '@': '<TODO>appFullPath',
+      vue: 'nativescript-vue'
     },
-  "module": Object {
+    extensions: [
-    "rules": Array [
+      '.vue'
-      Object {
+    ]
-        "test": /\\\\\\.vue\\$/,
-        "use": Array [
-          Object {
-            "loader": "vue-loader",
-            "options": Object {
-              "compiler": "nativescript-vue-template-compiler",
-            },
-          },
-        ],
-      },
-      Object {
-        "use": Array [
-          Object {
-            "loader": "ts-loader",
-            "options": Object {
-              "appendTsSuffixTo": Array [
-                /\\\\\\.vue\\$/,
-              ],
-            },
-          },
-        ],
-      },
-    ],
-  },
-  "plugins": Array [
-    VueLoaderPlugin {},
-  ],
-  "resolve": Object {
-    "alias": Object {
-      "vue": "nativescript-vue",
-    },
-    "extensions": Array [
-      ".vue",
-    ],
   },
+  module: {
+    rules: [
+      /* config.module.rule('vue') */
+      {
+        test: /\\\\.vue$/,
+        use: [
+          /* config.module.rule('vue').use('vue-loader') */
+          {
+            loader: 'vue-loader',
+            options: {
+              compiler: 'nativescript-vue-template-compiler'
             }
+          }
+        ]
+      },
+      /* config.module.rule('ts') */
+      {
+        use: [
+          /* config.module.rule('ts').use('ts-loader') */
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsSuffixTo: [
+                /\\\\.vue$/
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    /* config.plugin('clean') */
+    new CleanWebpackPlugin(
+      {
+        cleanOnceBeforeBuildPatterns: [
+          'platforms/android/app/src/main/assets/app/**/*'
+        ],
+        verbose: true
+      }
+    ),
+    /* config.plugin('vue-plugin') */
+    new VueLoaderPlugin()
+  ],
+  entry: {
+    bundle: [
+      'todo/main'
+    ]
+  }
+}"
+`;
+
+exports[`vue configuration [ios] works 1`] = `
+"{
+  resolve: {
+    symlinks: true,
+    alias: {
+      '~/package.json': 'package.json',
+      '~': '<TODO>appFullPath',
+      '@': '<TODO>appFullPath',
+      vue: 'nativescript-vue'
+    },
+    extensions: [
+      '.vue'
+    ]
+  },
+  module: {
+    rules: [
+      /* config.module.rule('vue') */
+      {
+        test: /\\\\.vue$/,
+        use: [
+          /* config.module.rule('vue').use('vue-loader') */
+          {
+            loader: 'vue-loader',
+            options: {
+              compiler: 'nativescript-vue-template-compiler'
+            }
+          }
+        ]
+      },
+      /* config.module.rule('ts') */
+      {
+        use: [
+          /* config.module.rule('ts').use('ts-loader') */
+          {
+            loader: 'ts-loader',
+            options: {
+              appendTsSuffixTo: [
+                /\\\\.vue$/
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    /* config.plugin('clean') */
+    new CleanWebpackPlugin(
+      {
+        cleanOnceBeforeBuildPatterns: [
+          'platforms/ios/[todo]/app/**/*'
+        ],
+        verbose: true
+      }
+    ),
+    /* config.plugin('vue-plugin') */
+    new VueLoaderPlugin()
+  ],
+  entry: {
+    inspector_modules: [
+      'tns_modules/@nativescript/core/inspector_modules'
+    ],
+    bundle: [
+      'todo/main'
+    ]
+  }
+}"
 `;

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

@@ -1,7 +1,15 @@
-import { vueConfig } from '@nativescript/webpack';
+import { __vue } from '@nativescript/webpack';
 
 describe('vue configuration', () => {
-	it('works', () => {
+	const platforms = ['ios', 'android'];
-		expect(vueConfig('')).toMatchSnapshot();
+
+	for (let platform of platforms) {
+		it(`[${platform}] works`, () => {
+			expect(
+				__vue({
+					[platform]: true,
+				}).toString()
+			).toMatchSnapshot();
 		});
+	}
 });

packages/webpack5/package.json

@@ -16,6 +16,7 @@
     "webpack": "^5.4.0"
   },
   "dependencies": {
+    "clean-webpack-plugin": "^3.0.0",
     "vue-loader": "^15.9.5",
     "webpack-chain": "^6.5.1"
   }

packages/webpack5/src/configuration/base.ts

@@ -1,9 +1,52 @@
 import Config from 'webpack-chain';
-import { IWebpackEnv } from './index';
+import { IWebpackEnv, WebpackPlatform } from './index';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import { getDistPath } from '../helpers/projectHelpers';
 
 // todo: add base configuration that's shared across all flavors
 export default function (env: IWebpackEnv): Config {
 	const config = new Config();
-	config.entry('');
+	const distPath = getDistPath(env);
+
+	// inspector_modules
+	config.when(shouldIncludeInspectorModules(env), (config) => {
+		config.entry('inspector_modules').add('tns_modules/@nativescript/core/inspector_modules').end();
+	});
+
+	config.entry('bundle').add('todo/main').end();
+
+	// base aliases
+	config.resolve.alias.set('~/package.json', 'package.json').set('~', '<TODO>appFullPath').set('@', '<TODO>appFullPath');
+
+	// resolve symlinks
+	config.resolve.symlinks(true);
+
+	// items to clean
+	config.plugin('clean').use(CleanWebpackPlugin, [
+		{
+			cleanOnceBeforeBuildPatterns: [`${distPath}/**/*`],
+			verbose: true,
+		},
+	]);
+
 	return config;
 }
+
+function shouldIncludeInspectorModules(env: IWebpackEnv): boolean {
+	const platform = determinePlatformFromEnv(env);
+	// todo: check if core modules are external
+	// todo: check if we are testing
+	return platform === WebpackPlatform.ios;
+}
+
+function determinePlatformFromEnv(env: IWebpackEnv): WebpackPlatform {
+	if (env?.android) {
+		return WebpackPlatform.android;
+	}
+
+	if (env?.ios) {
+		return WebpackPlatform.ios;
+	}
+
+	throw new Error('You need to provide a target platform!');
+}

packages/webpack5/src/configuration/index.ts

@@ -7,19 +7,36 @@ import svelte from './svelte';
 import typescript from './typescript';
 import vue from './vue';
 
+// export chain configs
+// todo: rename if needed
+export { base as __base, angular as __angular, javascript as __javascript, react as __react, svelte as __svelte, typescript as __typescript, vue as __vue };
+
 // export final configs
-// todo: perhaps we can export chain configs as well
+export const baseConfig = (env: IWebpackEnv) => base(env).toConfig();
 
-export const baseConfig = (env) => base(env).toConfig();
+export const angularConfig = (env: IWebpackEnv) => angular(env).toConfig();
-
+export const javascriptConfig = (env: IWebpackEnv) => javascript(env).toConfig();
-export const angularConfig = (env) => angular(env).toConfig();
+export const reactConfig = (env: IWebpackEnv) => react(env).toConfig();
-export const javascriptConfig = (env) => javascript(env).toConfig();
+export const svelteConfig = (env: IWebpackEnv) => svelte(env).toConfig();
-export const reactConfig = (env) => react(env).toConfig();
+export const typescriptConfig = (env: IWebpackEnv) => typescript(env).toConfig();
-export const svelteConfig = (env) => svelte(env).toConfig();
+export const vueConfig = (env: IWebpackEnv) => vue(env).toConfig();
-export const typescriptConfig = (env) => typescript(env).toConfig();
-export const vueConfig = (env) => vue(env).toConfig();
 
 export interface IWebpackEnv {
-	hmr: boolean;
+	[name: string]: any;
+
+	appPath?: string;
+	appResourcesPath?: string;
+
+	android?: boolean;
+	ios?: boolean;
+
+	production?: boolean;
+	report?: boolean;
+	hmr?: boolean;
 	// todo: add others
 }
+
+export enum WebpackPlatform {
+	'ios',
+	'android',
+}

packages/webpack5/src/helpers/projectHelpers.ts

@@ -1,6 +1,20 @@
+import { existsSync } from 'fs';
+import { resolve } from 'path';
+import { IWebpackEnv } from '@nativescript/webpack';
 
-import { existsSync } from "fs";
+export function getDistPath(env: IWebpackEnv) {
-import { resolve } from "path";
+	if (env.ios) {
+		return `platforms/ios/[todo]/app`;
+	}
+
+	if (env.android) {
+		return `platforms/android/app/src/main/assets/app`;
+	}
+
+	// todo: additional platforms
+	// perhaps we could combine platform specifics into "plugins"
+	// 3rd party platforms would be treated the same
+}
 
 export function getPackageJson(projectDir: string) {
 	const packageJsonPath = getPackageJsonPath(projectDir);
@@ -11,17 +25,16 @@ export function getPackageJson(projectDir: string) {
 
 export function readJsonFile(filePath: string) {
 	return require(filePath) as {
-      main:string
+		main: string;
 		// to be extended?
 	};
 }
 
 export function getPackageJsonPath(projectDir: string) {
-    const packagePath = resolve(projectDir, "package.json");
+	const packagePath = resolve(projectDir, 'package.json');
 	if (existsSync(packagePath)) {
 		return packagePath;
 	} else {
 		return getPackageJsonPath(resolve(projectDir, '..'));
 	}
-  
 }