Merge pull request #172928 from sumnerevans/element-web-compile-from-source

5 files changed, 287 insertions, 24 deletions

diff --git a/pkgs/applications/networking/instant-messengers/element/element-desktop.nix b/pkgs/applications/networking/instant-messengers/element/element-desktop.nix
index 2ad5d8c4654f9..c8c186045394c 100644
--- a/pkgs/applications/networking/instant-messengers/element/element-desktop.nix
+++ b/pkgs/applications/networking/instant-messengers/element/element-desktop.nix
@@ -48,9 +48,9 @@ mkYarnPackage rec {
     runHook preBuild
     export HOME=$(mktemp -d)
     pushd deps/element-desktop/
-    npx tsc
+    yarn run build:ts
     yarn run i18n
-    node ./scripts/copy-res.js
+    yarn run build:res
     popd
     rm -rf node_modules/matrix-seshat node_modules/keytar
     ${lib.optionalString useKeytar "ln -s ${keytar} node_modules/keytar"}
@@ -91,11 +91,8 @@ mkYarnPackage rec {
     runHook postInstall
   '';
 
-  # Do not attempt generating a tarball for element-web again.
-  # note: `doDist = false;` does not work.
-  distPhase = ''
-    true
-  '';
+  # Do not attempt generating a tarball for element-desktop again.
+  doDist = false;
 
   # The desktop item properties should be kept in sync with data from upstream:
   # https://github.com/vector-im/element-desktop/blob/develop/package.json
diff --git a/pkgs/applications/networking/instant-messengers/element/element-web-package.json b/pkgs/applications/networking/instant-messengers/element/element-web-package.json
new file mode 100644
index 0000000000000..68aead1c0eb7a
--- /dev/null
+++ b/pkgs/applications/networking/instant-messengers/element/element-web-package.json
@@ -0,0 +1,206 @@
+{
+  "name": "element-web",
+  "version": "1.10.13",
+  "description": "A feature-rich client for Matrix.org",
+  "author": "New Vector Ltd.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vector-im/element-web"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "lib",
+    "res",
+    "src",
+    "webpack.config.js",
+    "scripts",
+    "docs",
+    "release.sh",
+    "deploy",
+    "CHANGELOG.md",
+    "CONTRIBUTING.rst",
+    "LICENSE",
+    "README.md",
+    "AUTHORS.rst",
+    "package.json",
+    "contribute.json"
+  ],
+  "style": "bundle.css",
+  "scripts": {
+    "i18n": "matrix-gen-i18n",
+    "prunei18n": "matrix-prune-i18n",
+    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
+    "clean": "rimraf lib webapp",
+    "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
+    "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
+    "build:jitsi": "node scripts/build-jitsi.js",
+    "build:res": "node scripts/copy-res.js",
+    "build:genfiles": "yarn build:res && yarn build:jitsi",
+    "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
+    "build:bundle": "webpack --progress --bail --mode production",
+    "build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json",
+    "dist": "scripts/package.sh",
+    "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
+    "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
+    "start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
+    "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --mode development --disable-host-check --hot",
+    "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
+    "lint:js": "eslint --max-warnings 0 src",
+    "lint:js-fix": "eslint --fix src",
+    "lint:types": "tsc --noEmit --jsx react",
+    "lint:style": "stylelint \"res/css/**/*.scss\"",
+    "test": "jest",
+    "coverage": "yarn test --coverage"
+  },
+  "dependencies": {
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "browser-request": "^0.3.3",
+    "gfm.css": "^1.1.2",
+    "jsrsasign": "^10.2.0",
+    "katex": "^0.12.0",
+    "matrix-js-sdk": "18.0.0",
+    "matrix-react-sdk": "3.45.0",
+    "matrix-widget-api": "^0.1.0-beta.18",
+    "prop-types": "^15.7.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "sanitize-html": "^2.3.2",
+    "ua-parser-js": "^0.7.24"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+    "@babel/plugin-proposal-numeric-separator": "^7.12.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/register": "^7.12.10",
+    "@babel/runtime": "^7.12.5",
+    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
+    "@sentry/webpack-plugin": "^1.18.1",
+    "@svgr/webpack": "^5.5.0",
+    "@types/flux": "^3.1.9",
+    "@types/jest": "^27.0.2",
+    "@types/modernizr": "^3.5.3",
+    "@types/node": "^14.14.22",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
+    "@types/sanitize-html": "^2.3.1",
+    "@types/ua-parser-js": "^0.7.36",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
+    "allchange": "^1.0.6",
+    "autoprefixer": "^9.8.6",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "chokidar": "^3.5.1",
+    "concurrently": "^5.3.0",
+    "cpx": "^1.5.0",
+    "css-loader": "^3.6.0",
+    "dotenv": "^10.0.0",
+    "eslint": "8.9.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-matrix-org": "^0.4.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "fake-indexeddb": "^3.1.2",
+    "file-loader": "^5.1.0",
+    "fs-extra": "^0.30.0",
+    "html-webpack-plugin": "^4.5.2",
+    "jest": "^26.6.3",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-raw-loader": "^1.0.1",
+    "jest-sonar-reporter": "^2.0.0",
+    "json-loader": "^0.5.7",
+    "loader-utils": "^1.4.0",
+    "matrix-mock-request": "^1.2.3",
+    "matrix-react-test-utils": "^0.2.3",
+    "matrix-web-i18n": "^1.2.0",
+    "mini-css-extract-plugin": "^0.12.0",
+    "minimist": "^1.2.6",
+    "mkdirp": "^1.0.4",
+    "modernizr": "^3.12.0",
+    "node-fetch": "^2.6.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss-easings": "^2.0.0",
+    "postcss-hexrgba": "^2.0.1",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-mixins": "^6.2.3",
+    "postcss-nested": "^4.2.3",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-scss": "^2.1.1",
+    "postcss-simple-vars": "^5.0.2",
+    "postcss-strip-inline-comments": "^0.1.5",
+    "raw-loader": "^4.0.2",
+    "rimraf": "^3.0.2",
+    "shell-escape": "^0.2.0",
+    "simple-proxy-agent": "^1.1.0",
+    "string-replace-loader": "2",
+    "style-loader": "2",
+    "stylelint": "^13.9.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0",
+    "terser-webpack-plugin": "^2.3.8",
+    "typescript": "^4.5.3",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2",
+    "worker-loader": "^2.0.0",
+    "worklet-loader": "^2.0.0"
+  },
+  "resolutions": {
+    "@types/react": "17.0.14"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-jsdom-sixteen",
+    "testMatch": [
+      "<rootDir>/test/**/*-test.[tj]s?(x)"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "<rootDir>/__mocks__/cssMock.js",
+      "\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
+      "\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
+      "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
+      "^browser-request$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/browser-request.js",
+      "^react$": "<rootDir>/node_modules/react",
+      "^react-dom$": "<rootDir>/node_modules/react-dom",
+      "^matrix-js-sdk$": "<rootDir>/node_modules/matrix-js-sdk/src",
+      "^matrix-react-sdk$": "<rootDir>/node_modules/matrix-react-sdk/src",
+      "decoderWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
+      "decoderWorker\\.min\\.wasm": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
+      "waveWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
+      "context-filter-polyfill": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
+      "FontManager.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/FontManager.js",
+      "workers/(.+)\\.worker\\.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/workerMock.js",
+      "^!!raw-loader!.*": "jest-raw-loader",
+      "RecorderWorklet": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!matrix-js-sdk).+$",
+      "/node_modules/(?!matrix-react-sdk).+$"
+    ],
+    "coverageReporters": [
+      "text-summary",
+      "lcov"
+    ],
+    "testResultsProcessor": "jest-sonar-reporter"
+  },
+  "jestSonar": {
+    "reportPath": "coverage",
+    "sonar56x": true
+  }
+}
diff --git a/pkgs/applications/networking/instant-messengers/element/element-web.nix b/pkgs/applications/networking/instant-messengers/element/element-web.nix
index fae96e8e5e7ae..7cdfcabdce58b 100644
--- a/pkgs/applications/networking/instant-messengers/element/element-web.nix
+++ b/pkgs/applications/networking/instant-messengers/element/element-web.nix
@@ -1,4 +1,15 @@
-{ lib, stdenv, fetchurl, writeText, jq, conf ? {} }:
+{ lib
+, mkYarnPackage
+, runCommand
+, fetchFromGitHub
+, fetchYarnDeps
+, writeText
+, jq
+, yarn
+, fixup_yarn_lock
+, nodejs
+, conf ? { }
+}:
 
 let
   pinData = lib.importJSON ./pin.json;
@@ -8,25 +19,61 @@ let
   };
   configOverrides = writeText "element-config-overrides.json" (builtins.toJSON (noPhoningHome // conf));
 
-in stdenv.mkDerivation rec {
+in
+mkYarnPackage rec {
   pname = "element-web";
   inherit (pinData) version;
 
-  src = fetchurl {
-    url = "https://github.com/vector-im/element-web/releases/download/v${version}/element-v${version}.tar.gz";
-    sha256 = pinData.webHash;
+  src = fetchFromGitHub {
+    owner = "vector-im";
+    repo = pname;
+    rev = "v${version}";
+    sha256 = pinData.webSrcHash;
   };
 
+  packageJSON = ./element-web-package.json;
+  # Remove the matrix-analytics-events dependency from the matrix-react-sdk
+  # dependencies list. It doesn't seem to be necessary since we already are
+  # installing it individually, and it causes issues with the offline mode.
+  yarnLock = (runCommand "${pname}-modified-lock" {} ''
+    sed '/matrix-analytics-events "github/d' ${src}/yarn.lock > "$out"
+  '');
+  offlineCache = fetchYarnDeps {
+    inherit yarnLock;
+    sha256 = pinData.webYarnHash;
+  };
+
+  nativeBuildInputs = [ jq ];
+
+  configurePhase = ''
+    runHook preConfigure
+    ln -s $node_modules node_modules
+    runHook postConfigure
+  '';
+
+  buildPhase = ''
+    runHook preBuild
+
+    export VERSION=${version}
+    yarn build:res --offline
+    yarn build:bundle --offline
+
+    runHook postBuild
+  '';
+
   installPhase = ''
     runHook preInstall
 
-    mkdir -p $out/
-    cp -R . $out/
-    ${jq}/bin/jq -s '.[0] * .[1]' "config.sample.json" "${configOverrides}" > "$out/config.json"
+    cp -R webapp $out
+    echo "${version}" > "$out/version"
+    jq -s '.[0] * .[1]' "config.sample.json" "${configOverrides}" > "$out/config.json"
 
     runHook postInstall
   '';
 
+  # Do not attempt generating a tarball for element-web again.
+  doDist = false;
+
   meta = {
     description = "A glossy Matrix collaboration client for the web";
     homepage = "https://element.io/";
@@ -34,6 +81,5 @@ in stdenv.mkDerivation rec {
     maintainers = lib.teams.matrix.members;
     license = lib.licenses.asl20;
     platforms = lib.platforms.all;
-    hydraPlatforms = [];
   };
 }
diff --git a/pkgs/applications/networking/instant-messengers/element/pin.json b/pkgs/applications/networking/instant-messengers/element/pin.json
index c2bc3d8a89eea..ceb4673f9a585 100644
--- a/pkgs/applications/networking/instant-messengers/element/pin.json
+++ b/pkgs/applications/networking/instant-messengers/element/pin.json
@@ -2,5 +2,6 @@
   "version": "1.10.13",
   "desktopSrcHash": "tTvpjSIipvmJIfZF1RiRtlDjsKJYHoPQ6XSqI8TGH14=",
   "desktopYarnHash": "105bphn4ga4f0n60cvrlppf8wim2c1qy09g8arraadcxymds98n6",
-  "webHash": "1zxjlzlxh2gbswa1063zbw6ahwlcnvyqkvbwj92vk873c3g8ba72"
+  "webSrcHash": "+imju7ojpjttmOeDnA2L4QdBi1zzfRBoUdMMTA4Lba0=",
+  "webYarnHash": "19b1w2mrcn3mzw40d023wx1jxvr0jacn2ryzxlh7zsyj8w0v1dv7"
 }
diff --git a/pkgs/applications/networking/instant-messengers/element/update.sh b/pkgs/applications/networking/instant-messengers/element/update.sh
index 364f63a18bb61..a9c55a926ce7b 100755
--- a/pkgs/applications/networking/instant-messengers/element/update.sh
+++ b/pkgs/applications/networking/instant-messengers/element/update.sh
@@ -18,17 +18,29 @@ fi
 # strip leading "v"
 version="${version#v}"
 
-desktop_src="https://raw.githubusercontent.com/vector-im/element-desktop/v$version"
+# Element Web
+web_src="https://raw.githubusercontent.com/vector-im/element-web/v$version"
+web_src_hash=$(nix-prefetch-github vector-im element-web --rev v${version} | jq -r .sha256)
+wget "$web_src/package.json" -O element-web-package.json
+
+web_tmpdir=$(mktemp -d)
+trap 'rm -rf "$web_tmpdir"' EXIT
+
+pushd $web_tmpdir
+wget "$web_src/yarn.lock"
+sed -i '/matrix-analytics-events "github/d' yarn.lock
+web_yarn_hash=$(prefetch-yarn-deps yarn.lock)
+popd
 
+# Element Desktop
+desktop_src="https://raw.githubusercontent.com/vector-im/element-desktop/v$version"
 desktop_src_hash=$(nix-prefetch-github vector-im element-desktop --rev v${version} | jq -r .sha256)
-web_hash=$(nix-prefetch-url "https://github.com/vector-im/element-web/releases/download/v$version/element-v$version.tar.gz")
-
 wget "$desktop_src/package.json" -O element-desktop-package.json
 
-tmpdir=$(mktemp -d)
-trap 'rm -rf "$tmpdir"' EXIT
+desktop_tmpdir=$(mktemp -d)
+trap 'rm -rf "$desktop_tmpdir"' EXIT
 
-pushd $tmpdir
+pushd $desktop_tmpdir
 wget "$desktop_src/yarn.lock"
 desktop_yarn_hash=$(prefetch-yarn-deps yarn.lock)
 popd
@@ -38,6 +50,7 @@ cat > pin.json << EOF
   "version": "$version",
   "desktopSrcHash": "$desktop_src_hash",
   "desktopYarnHash": "$desktop_yarn_hash",
-  "webHash": "$web_hash"
+  "webSrcHash": "$web_src_hash",
+  "webYarnHash": "$web_yarn_hash"
 }
 EOF