refactor(build): replace rollup with webpack to make build faster

We replace `rollup` with `webpack` to make our builds faster. While
webpack is not faster without a cache it supports persistent caches in
the file system which makes it significantly faster in development.
Webpack is also significantly faster in watch mode.

On my machine a rollup build and a webpack build without a cache take
about 60 seconds. If a cache is present webpack builds the project in
8-9 seconds. When updating a file in watch mode rollup takes 7-8 seconds
to rebuild. Webpack rebuilds the project in under a second.

Another thing to note is that in the past I spent multiple hours
investigating issues with rollup and tweaking the config. None of this
was necessary for webpack. We also gain more functionality, for example
we can now leverage templating in the HTML document.

Some implementation notes:
* We patch `package.json` of `svelte-persistent-store` because of [this
  issue][sps-issue]. This only worked before because rollup itself was
  buggy.
* We add some dependencies that are used in our source code but were not
  explicitly specified.
* We use `html-webpack-plugin` to dynamically build `public/index.html`
  and configure it for different environments.
* We remove `bundle.css`. CSS is now injected during runtime via JS.

Follup-up:
* We still need to leverage the webpack cache on CI

[sps-issue]: andsala/svelte-persistent-store#15

Signed-off-by: Thomas Scholtes <[email protected]>

.gitignore

@@ -5,6 +5,7 @@ dist
 native/main.comp.js
 native/main.comp.js.map
 public/bundle.*
+public/index.html
 public/twemoji
 cypress/videos
 cypress/screenshots

package.json

@@ -67,11 +67,6 @@
   "main": "./native/main.comp.js",
   "devDependencies": {
     "@ethersproject/cli": "^5.0.9",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-inject": "^4.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-typescript": "^8.2.0",
     "@tsconfig/svelte": "^1.0.10",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
@@ -98,6 +93,7 @@
     "eslint-svelte3-preprocess": "=0.0.4",
     "exit-hook": "^2.2.0",
     "ganache-cli": "^6.12.2",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
@@ -108,23 +104,22 @@
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^1.4.2",
     "prompts": "^2.4.0",
-    "rollup": "^2.39.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-node-externals": "^2.1.6",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
     "sinon": "^9.2.4",
     "standard-version": "^9.1.1",
     "svelte": "^3.32.3",
     "svelte-check": "^1.1.35",
+    "svelte-loader": "^3.0.0",
     "svelte-preprocess": "^4.6.9",
     "svelte-spa-router": "^3.1.0",
     "ts-jest": "^26.5.1",
+    "ts-loader": "^8.0.18",
     "ts-node": "^9.1.1",
     "tslib": "^2.1.0",
     "typescript": "^4.1.5",
     "util": "^0.12.3",
-    "wait-on": "^5.2.1"
+    "wait-on": "^5.2.1",
+    "webpack": "^5.26.0",
+    "webpack-cli": "^4.5.0"
   },
   "scripts": {
     "start": "RADICLE_UPSTREAM_PROXY_PATH=./target/release/radicle-proxy RADICLE_UPSTREAM_PROXY_ARGS='--default-seed hynewpywqj6x4mxgj7sojhue3erucyexiyhobxx4du9w66hxhbfqbw@seedling.radicle.xyz:12345' yarn _private:start",
@@ -133,48 +128,51 @@
     "ethereum:start": "./scripts/ethereum-dev-node.sh",
     "test": "TZ='UTC' yarn test:unit && TZ='UTC' yarn test:integration",
     "test:integration": "TZ='UTC' run-p --race _private:proxy:start:test _private:test:integration",
-    "test:integration:debug": "TZ='UTC' run-p --race _private:rollup:watch _private:proxy:start:test:watch _private:test:integration:debug",
+    "test:integration:debug": "TZ='UTC' run-p --race _private:webpack:watch _private:proxy:start:test:watch _private:test:integration:debug",
     "test:unit": "jest",
     "test:unit:watch": "jest --watchAll",
-    "dist": "yarn _private:dist:clean && yarn _private:rollup:build:release && yarn _private:proxy:build:release && electron-builder --publish never",
+    "dist": "yarn _private:dist:clean && webpack build --mode production && yarn _private:proxy:build:release && electron-builder --publish never",
     "release": "scripts/release.ts",
     "typescript:check": "tsc --noEmit && tsc --noEmit --project cypress && svelte-check",
     "prettier:check": "yarn _private:prettier --check",
     "prettier:write": "yarn _private:prettier --write",
     "lint": "eslint . --ignore-path .gitignore --ext .js,.svelte,.ts --max-warnings=0",
     "reset:state": "scripts/reset-state.sh",
-    "_private:start": "yarn _private:proxy:build:release && yarn run-p --race _private:rollup:watch _private:electron:start",
-    "_private:start:dev": "yarn _private:proxy:build && yarn run-p --race _private:rollup:watch _private:electron:start",
-    "_private:test:integration": "wait-on tcp:17246 && yarn _private:rollup:build && yarn run cypress run; status=$?; [ \"$CI\" = true ] && kill `pidof radicle-proxy`; exit $status",
+    "_private:start": "yarn _private:proxy:build:release && yarn run-p --race _private:webpack:watch _private:electron:start",
+    "_private:start:dev": "yarn _private:proxy:build && yarn run-p --race _private:webpack:watch _private:electron:start",
+    "_private:test:integration": "wait-on tcp:17246 && yarn _private:webpack:build && yarn run cypress run; status=$?; [ \"$CI\" = true ] && kill `pidof radicle-proxy`; exit $status",
     "_private:test:integration:debug": "wait-on ./public/bundle.js tcp:17246 && yarn run cypress open",
     "_private:electron:start": "wait-on ./public/bundle.js ./native/main.comp.js && NODE_ENV=development electron .",
-    "_private:dist:clean": "rm -rf ./dist && mkdir ./dist && yarn _private:proxy:clean && yarn _private:rollup:clean",
+    "_private:dist:clean": "rm -rf ./dist && mkdir ./dist && yarn _private:proxy:clean",
     "_private:prettier": "prettier \"**/*.@(js|ts|json|svelte|css|html)\" --ignore-path .gitignore",
     "_private:proxy:build": "cargo build --all-features --all-targets",
     "_private:proxy:build:release": "cargo build --release",
     "_private:proxy:clean": "cargo clean",
     "_private:proxy:start:test": "cargo build --release --bin git-remote-rad && cargo run --release -- --test",
     "_private:proxy:start:test:watch": "cargo build --release --bin git-remote-rad && cargo watch -x 'run --release -- --test'",
-    "_private:rollup:build": "yarn _private:rollup:clean && rollup -c --failAfterWarnings",
-    "_private:rollup:build:release": "yarn _private:rollup:clean && ROLLUP_RELEASE=true rollup -c --failAfterWarnings",
-    "_private:rollup:clean": "rm -rf public/bundle.* && rm -f native/main.comp.js",
-    "_private:rollup:watch": "yarn _private:rollup:clean && rollup -c -w",
+    "_private:webpack:build": "webpack build",
+    "_private:webpack:watch": "webpack build --watch",
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@ethersproject/bytes": "^5.0.9",
+    "@ethersproject/properties": "^5.0.7",
     "@types/big.js": "^6.0.2",
     "@types/qs": "^6.9.5",
     "@types/uuid": "^8.3.0",
     "@walletconnect/client": "^1.3.6",
     "big.js": "^6.0.3",
     "browserify": "^17.0.0",
+    "crypto-browserify": "^3.12.0",
     "ethers": "^5.0.31",
     "marked": "^2.0.0",
     "mnemonist": "^0.38.1",
     "pure-svg-code": "^1.0.6",
+    "qs": "^6.9.6",
     "radicle-contracts": "git+https://github.com/radicle-dev/radicle-contracts.git#5dd3138d8a731cff59835961deb7295b89520608",
-    "rollup-plugin-css-only": "^3.1.0",
+    "regexparam": "^1.3.0",
     "semver": "^7.3.4",
+    "stream-browserify": "^3.0.0",
     "svelte-persistent-store": "^0.1.6",
     "timeago.js": "^4.0.2",
     "twemoji": "13.0.1",

patches/svelte-persistent-store+0.1.6.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/svelte-persistent-store/package.json b/node_modules/svelte-persistent-store/package.json
+index 115449e..2d2999d 100644
+--- a/node_modules/svelte-persistent-store/package.json
++++ b/node_modules/svelte-persistent-store/package.json
+@@ -11,10 +11,6 @@
+   "homepage": "https://github.com/andsala/svelte-persistent-store",
+   "main": "dist/index.js",
+   "module": "dist/index.mjs",
+-  "exports": {
+-    ".": "./dist/index.js",
+-    "./": "./dist/"
+-  },
+   "types": "dist/**",
+   "scripts": {
+     "build": "tsup src/local.ts src/session.ts src/index.ts --external svelte --format esm,cjs --inlineDynamicImports --dts",

public/index.html → ui/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
 
     <title>Radicle Upstream</title>
 
@@ -87,9 +86,6 @@
     <link rel="stylesheet" href="elevation.css" />
     <link rel="stylesheet" href="global.css" />
     <link rel="stylesheet" href="typography.css" />
-    <link rel="stylesheet" href="bundle.css" />
-
-    <script defer src="bundle.js"></script>
   </head>
 
   <body></body>