build: switches to webpack to support newer syntaxes (#1819)

* build: switches to webpack to support newer syntaxes

newer packages make use of optional chaining. Thus the switch to webpack

* build: increase bundlewatch max size

.babelrc

@@ -5,13 +5,25 @@
       {
         "modules": false,
         "useBuiltIns": "entry",
-        "corejs": 3
+        "corejs": 3,
+        "shippedProposals": true
       }
     ],
     "@babel/preset-react"
   ],
   "plugins": [
-    ["styled-components", { "displayName": true }]
+    ["styled-components", { "displayName": true }],
+    "@babel/plugin-proposal-class-properties",
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "^@/(.+)": "./src/\\1"
+        }
+      }
+    ],
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
   ],
   "env": {
     "test": {

.github/workflows/deploy_develop.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build Aragon
@@ -32,7 +32,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - name: Activate fleek
         run: cp .github/fleek/develop.fleek.json ./.fleek.json
       - name: Install build dependencies

.github/workflows/deploy_prod.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build Aragon
@@ -32,7 +32,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - name: Activate fleek
         run: cp .github/fleek/prod.fleek.json ./.fleek.json
       - name: Install build dependencies

.github/workflows/tests.yml

@@ -12,7 +12,7 @@ jobs:
     - name: Install node
       uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 16
     - name: Install dependencies
       run: yarn install --frozen-lockfile
     - name: Build Aragon

package.json

@@ -27,7 +27,7 @@
     "files": [
       {
         "path": "public/*.js",
-        "maxSize": "1600kb",
+        "maxSize": "2048kb",
         "compression": "gzip"
       }
     ]
@@ -75,15 +75,21 @@
   },
   "devDependencies": {
     "@aragon/os": "^4.0.0",
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-styled-components": "^1.10.6",
     "bundlewatch": "^0.2.6",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^5.2.0",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^12.0.0",
@@ -96,48 +102,30 @@
     "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-standard": "^4.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
     "husky": "^1.0.1",
     "jest": "^25.1.0",
     "lint-staged": "^8.1.1",
     "parcel-bundler": "^1.10.1",
     "parcel-plugin-bundle-visualiser": "^1.2.0",
     "prettier": "^1.19.1",
     "ps-node": "^0.1.6",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "resolutions": {
     "@aragon/wrapper/web3": "1.7.5",
     "@aragon/wrapper/web3-eth-abi": "1.2.6"
   },
   "scripts": {
-    "bundlewatch": "bundlewatch",
-    "start": "node scripts/start",
-    "start:local": "node scripts/launch-local",
-    "start:mainnet": "cross-env ARAGON_ETH_NETWORK_TYPE=main npm start",
-    "start:goerli": "npm start",
-    "start:staging": "cross-env ARAGON_ENS_REGISTRY_ADDRESS=0xfe03625ea880a8cba336f9b5ad6e15b0a3b5a939 npm start",
-    "start:xdai": "cross-env ARAGON_ETH_NETWORK_TYPE=xdai npm start",
-    "build": "node scripts/build",
-    "build:local": "node scripts/build-local",
-    "build:mainnet": "cross-env ARAGON_ETH_NETWORK_TYPE=main npm run build",
-    "build:goerli": "npm run build",
-    "build:staging": "cross-env ARAGON_ENS_REGISTRY_ADDRESS=0xfe03625ea880a8cba336f9b5ad6e15b0a3b5a939 npm run build",
-    "build:xdai": "cross-env ARAGON_ETH_NETWORK_TYPE=xdai npm run build",
     "lint": "eslint ./src",
-    "test": "npm run lint && npm run jest",
-    "jest": "jest",
-    "publish:major": "node scripts/publish major --only-content --files public/",
-    "publish:minor": "node scripts/publish minor --only-content --files public/",
-    "publish:patch": "node scripts/publish patch --only-content --files public/",
-    "publish:mainnet:major": "npm run publish:major -- --environment mainnet --build-script build:mainnet",
-    "publish:mainnet:minor": "npm run publish:minor -- --environment mainnet --build-script build:mainnet",
-    "publish:mainnet:patch": "npm run publish:patch -- --environment mainnet --build-script build:mainnet",
-    "publish:goerli:major": "npm run publish:major -- --environment goerli --build-script build:goerli",
-    "publish:goerli:minor": "npm run publish:minor -- --environment goerli --build-script build:goerli",
-    "publish:goerli:patch": "npm run publish:patch -- --environment goerli --build-script build:goerli",
-    "publish:staging:major": "npm run publish:major -- --environment staging --build-script build:staging",
-    "publish:staging:minor": "npm run publish:minor -- --environment staging --build-script build:staging",
-    "publish:staging:patch": "npm run publish:patch -- --environment staging --build-script build:staging"
+    "test": "jest",
+    "start": "npm run sync-assets & webpack-dev-server --mode development --open --hot",
+    "build": "rm -rf ./public/ && npm run sync-assets && webpack build --progress --mode production -o ./public",
+    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./public"
   },
   "browserslist": {
     "development": ">2%, last 1 edge versions, not ie > 0, not op_mini all",