build: make all packages as external (#2634)

.github/workflows/test.yml

@@ -90,11 +90,5 @@ jobs:
             - name: Install (Yarn)
               run: yarn install --ignore-engines --frozen-lockfile
 
-            - name: Start
-              run: REACT_APP_BUILD_MODE=demo BROWSER=none yarn start &
-
-            - name: Wait for App
-              run: yarn wait-on http://localhost:3000
-
             - name: Test
-              run: xvfb-run --server-args="-screen 0 1920x1080x16" yarn test:e2e
+              run: xvfb-run --server-args="-screen 0 1920x1080x16" yarn test:e2e:ci

.storybook/main.js

@@ -1,5 +1,11 @@
 const path = require("path");
-const { override, addPostcssPlugins } = require("customize-cra");
+const { override, addWebpackAlias, addWebpackModuleRule } = require("customize-cra");
+const { injectTailwindCSS } = require("../config-overrides");
+
+const injectNode = () =>
+	addWebpackAlias({
+		fs: path.resolve(__dirname, "mocks/fsMock.js"),
+	});
 
 module.exports = {
 	stories: ["../src/**/**/*.stories.tsx"],
@@ -11,44 +17,19 @@ module.exports = {
 		"storybook-addon-themes",
 	],
 	webpackFinal: override(
-		addPostcssPlugins([
-			require("postcss-import"),
-			require("tailwindcss")("./src/tailwind.config.js"),
-			require("autoprefixer"),
-		]),
-		async (storybookConfig) => {
-			storybookConfig.module.rules = [
-				...storybookConfig.module.rules,
+		injectTailwindCSS(),
+		injectNode(),
+		addWebpackModuleRule({
+			test: /\.(ts|tsx)$/,
+			use: [
 				{
-					test: /\.(ts|tsx)$/,
-					use: [
-						{
-							loader: require.resolve("babel-loader"),
-							options: {
-								presets: [require.resolve("babel-preset-react-app")],
-							},
-						},
-						require.resolve("react-docgen-typescript-loader"),
-					],
-				},
-			];
-
-			storybookConfig.resolve = {
-				extensions: [".ts", ".js", ".jsx", ".tsx", ".scss", ".json", ".node"],
-				alias: {
-					app: path.resolve(__dirname, "../src/app/"),
-					data: path.resolve(__dirname, "../src/data/"),
-					domains: path.resolve(__dirname, "../src/domains"),
-					resources: path.resolve(__dirname, "../src/resources"),
-					styles: path.resolve(__dirname, "../src/styles"),
-					utils: path.resolve(__dirname, "../src/utils"),
-					tests: path.resolve(__dirname, "../src/tests"),
-					// Mocks
-					fs: path.resolve(__dirname, "mocks/fsMock.js"),
+					loader: "babel-loader",
+					options: {
+						presets: ["babel-preset-react-app"],
+					},
 				},
-			};
-
-			return storybookConfig;
-		},
+				"react-docgen-typescript-loader",
+			],
+		}),
 	),
 };

.testcafe-electron-rc.js

@@ -0,0 +1,4 @@
+module.exports = {
+	mainWindowUrl: "./build/index.html",
+	appPath: "./src/electron/index.js",
+};

.testcaferc.json

@@ -0,0 +1,6 @@
+{
+	"browsers": "electron:",
+	"src": "./src/domains/**/e2e/*.e2e.ts",
+	"disableScreenshots": true,
+	"selectorTimeout": 15000
+}

config-overrides.js

@@ -1,72 +1,26 @@
-const path = require("path");
-const { override, addPostcssPlugins, addWebpackPlugin } = require("customize-cra");
-const webpack = require("webpack");
+const { override, addPostcssPlugins, setWebpackTarget, addWebpackExternals } = require("customize-cra");
+const nodeExternals = require("webpack-node-externals");
 
-module.exports = override(
+const addNodeExternals = ({ allowlist = [] }) =>
+	addWebpackExternals([
+		nodeExternals({
+			allowlist,
+		}),
+	]);
+
+const injectTailwindCSS = () =>
 	addPostcssPlugins([
 		require("postcss-import"),
 		require("tailwindcss")("./src/tailwind.config.js"),
 		require("autoprefixer"),
-	]),
-	addWebpackPlugin(
-		new webpack.NormalModuleReplacementPlugin(
-			/node_modules\/@arkecosystem\/crypto\/dist\/index\.bundled\.js/,
-			"index.js",
-		),
-	),
-	(config) => {
-		config.node = {
-			fs: "empty",
-		};
-
-		config.externals = {
-			"usb-detection": "commonjs usb-detection",
-		};
-
-		config.target = "electron-renderer";
-
-		config.resolve = {
-			extensions: [".ts", ".js", ".jsx", ".tsx", ".scss", ".json", ".node"],
-			alias: {
-				app: path.resolve(__dirname, "src/app/"),
-				data: path.resolve(__dirname, "src/data/"),
-				domains: path.resolve(__dirname, "src/domains"),
-				resources: path.resolve(__dirname, "src/resources"),
-				styles: path.resolve(__dirname, "src/styles"),
-				tests: path.resolve(__dirname, "src/tests"),
-				utils: path.resolve(__dirname, "src/utils"),
-			},
-		};
+	]);
 
-		config.module.rules.push({
-			test: /\.(ts|js|jsx|tsx)$/,
-			exclude: /node_modules/,
-			use: {
-				loader: require.resolve("babel-loader"),
-				options: {
-					presets: [require.resolve("@babel/preset-react"), require.resolve("@babel/preset-typescript")],
-					babelrc: false,
-				},
-			},
-		});
-
-		config.module.rules.push({
-			test: /\.node$/,
-			use: "node-loader",
-		});
-
-		config.optimization = {
-			usedExports: true,
-			providedExports: true,
-			sideEffects: true,
-			namedChunks: true,
-			namedModules: true,
-			removeAvailableModules: true,
-			mergeDuplicateChunks: true,
-			flagIncludedChunks: true,
-			removeEmptyChunks: true,
-		};
-
-		return config;
-	},
+module.exports = override(
+	setWebpackTarget("electron-renderer"),
+	injectTailwindCSS(),
+	addNodeExternals({
+		allowlist: [/tippy/, /swipe/],
+	}),
 );
+
+module.exports.injectTailwindCSS = injectTailwindCSS;

package.json

@@ -26,17 +26,18 @@
 		"build:linux": "yarn build:ci && electron-builder --linux --publish never",
 		"build:mac": "yarn build:ci && electron-builder --mac --publish never",
 		"build:win": "yarn build:ci && electron-builder --win --x64 --ia32 --publish never",
-		"dev": "cross-env REACT_APP_BUILD_MODE=demo concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
+		"dev": "cross-env REACT_APP_BUILD_MODE=demo concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"",
 		"eject": "react-app-rewired eject",
 		"format": "yarn lint && yarn prettier",
 		"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
 		"prettier": "prettier --write \"./*.{ts,tsx,js,json,md}\" \"./**/*.{ts,tsx,js,json,md}\"",
-		"start": "react-app-rewired start",
+		"start": "cross-env BROWSER=none react-app-rewired start",
 		"storybook": "start-storybook -p 5000",
 		"test": "react-app-rewired --expose-gc test --logHeapUsage",
 		"test:coverage": "react-app-rewired --expose-gc test --logHeapUsage --coverage --watchAll=false",
-		"test:e2e": "NODE_ENV=e2e testcafe \"electron:.\" \"./src/domains/**/e2e/*.e2e.ts\"",
-		"test:e2e:ci": "NODE_ENV=e2e  REACT_APP_BUILD_MODE=demo concurrently -k -s first \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && yarn test:e2e\"",
+		"test:e2e": "testcafe",
+		"test:e2e:ci-build": "yarn build:ci; testcafe",
+		"test:e2e:ci": "cross-env ELECTRON_IS_DEV=0 NODE_ENV=production REACT_APP_BUILD_MODE=demo yarn test:e2e:ci-build",
 		"preversion": "cross-env ./scripts/version-artifacts.sh"
 	},
 	"husky": {
@@ -245,7 +246,8 @@
 		"testcafe": "^1.8.8",
 		"testcafe-browser-provider-electron": "^0.0.15",
 		"typescript": "^3.9.5",
-		"wait-on": "^5.1.0"
+		"wait-on": "^5.1.0",
+		"webpack-node-externals": "^2.5.0"
 	},
 	"babelMacros": {
 		"twin": {