From cd007b40e1f2cf2f23a429c51a4971d6770b3312 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Sat, 26 Feb 2022 01:12:00 -0600 Subject: [PATCH 001/164] Make the SDK friendly to locally link and develop on MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix https://github.com/vector-im/hydrogen-web/issues/686 Fix https://github.com/vector-im/hydrogen-web/issues/682 Instead of deleting the whole `target/` directory, leave it alone so the symlink driving the `npm link`/`yarn link` stays in tact. Leave Vite builds in their build directories (`/lib-build`/`/asset-build`) so you can `vite build --watch` to build on local changes and still have a consisent place to reference in the `package.json` `exports`. Previously, everything relied on `build.sh` which does a bunch of moving and renaming and made it hard to rebuild on changes. Add back support for CommonJS (adding the `package.json` `exports`). The last piece is making sure the `?url` imports (`import workerPath from 'hydrogen-view-sdk/main.js?url';`) work still. It looks like this may have just been solved via https://github.com/vitejs/vite/issues/6725 -> https://github.com/vitejs/vite/pull/7073 (literally 2 days ago) and we just need to wait for the next Vite release 🎉 --- scripts/sdk/base-manifest.json | 13 ++++++++++++- scripts/sdk/build.sh | 12 +++--------- scripts/sdk/create-manifest.js | 16 +--------------- vite.sdk-assets-config.js | 19 +++++++++++++++++++ 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json index 3ee2ca3b..a7e287e4 100644 --- a/scripts/sdk/base-manifest.json +++ b/scripts/sdk/base-manifest.json @@ -2,6 +2,17 @@ "name": "hydrogen-view-sdk", "description": "Embeddable matrix client library, including view components", "version": "0.0.5", - "main": "./hydrogen.es.js", + "main": "./hydrogen.cjs.js", + "exports": { + ".": { + "import": "./lib-build/hydrogen.es.js", + "require": "./lib-build/hydrogen.cjs.js" + }, + "./paths/vite": "./paths/vite.js", + "./style.css": "./asset-build/assets/index.css", + "./main.js": "./asset-build/assets/download-sandbox.html", + "./download-sandbox.html": "./asset-build/assets/download-sandbox.html", + "./assets/*": "./asset-build/assets/*" + }, "type": "module" } diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index 5534601e..9063d7fb 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -1,5 +1,5 @@ #!/bin/bash -rm -rf target +rm -rf target/* yarn run vite build -c vite.sdk-assets-config.js yarn run vite build -c vite.sdk-lib-config.js yarn tsc -p tsconfig-declaration.json @@ -10,13 +10,7 @@ mkdir target/paths cp doc/SDK.md target/README.md pushd target pushd asset-build/assets -mv main.*.js ../../main.js -mv index.*.css ../../style.css -mv download-sandbox.*.html ../../download-sandbox.html -rm *.js *.wasm -mv ./* ../../ +rm !(main).js *.wasm popd -rm -rf asset-build -mv lib-build/* . -rm -rf lib-build +rm index.html popd diff --git a/scripts/sdk/create-manifest.js b/scripts/sdk/create-manifest.js index b420e679..9d5cebb2 100755 --- a/scripts/sdk/create-manifest.js +++ b/scripts/sdk/create-manifest.js @@ -3,21 +3,7 @@ const fs = require("fs"); const appManifest = require("../../package.json"); const baseSDKManifest = require("./base-manifest.json"); /* - need to leave exports out of base-manifest.json because of #vite-bug, - with the downside that we can't support environments that support - both esm and commonjs modules, so we pick just esm. - ``` - "exports": { - ".": { - "import": "./hydrogen.es.js", - "require": "./hydrogen.cjs.js" - }, - "./paths/vite": "./paths/vite.js", - "./style.css": "./style.css" - }, - ``` - - Also need to leave typescript type definitions out until the + Need to leave typescript type definitions out until the typescript conversion is complete and all imports in the d.ts files exists. ``` diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index 90720966..ebb95e4e 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -2,10 +2,29 @@ const path = require("path"); const mergeOptions = require('merge-options'); const commonOptions = require("./vite.common-config.js"); +const pathsToExport = [ + "index.js", + "index.css", + "download-sandbox.html" +]; + export default mergeOptions(commonOptions, { root: "src/", base: "./", build: { outDir: "../target/asset-build/", + rollupOptions: { + output: { + assetFileNames: (chunkInfo) => { + // Get rid of the hash so we can consistently reference these + // files in our `package.json` `exports` + if(pathsToExport.includes(path.basename(chunkInfo.name))) { + return "assets/[name].[ext]"; + } + + return "assets/[name]-[hash][extname]"; + } + } + } }, }); From 8fb2b2755a489f70e5ef32c6ffdc4441010d47b2 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Sat, 26 Feb 2022 03:08:16 -0600 Subject: [PATCH 002/164] Fix typos pointing to wrong files --- scripts/sdk/base-manifest.json | 2 +- vite.sdk-assets-config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json index a7e287e4..71ef28e2 100644 --- a/scripts/sdk/base-manifest.json +++ b/scripts/sdk/base-manifest.json @@ -10,7 +10,7 @@ }, "./paths/vite": "./paths/vite.js", "./style.css": "./asset-build/assets/index.css", - "./main.js": "./asset-build/assets/download-sandbox.html", + "./main.js": "./asset-build/assets/main.js", "./download-sandbox.html": "./asset-build/assets/download-sandbox.html", "./assets/*": "./asset-build/assets/*" }, diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index ebb95e4e..0d769734 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -3,7 +3,7 @@ const mergeOptions = require('merge-options'); const commonOptions = require("./vite.common-config.js"); const pathsToExport = [ - "index.js", + "main.js", "index.css", "download-sandbox.html" ]; From 0023ab34baf0666b9fa573edcec8861db6d62056 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Sat, 26 Feb 2022 05:19:59 -0600 Subject: [PATCH 003/164] Add a placeholder for upgrading vite to comment on --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8fa27f47..cec780ae 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "regenerator-runtime": "^0.13.7", "text-encoding": "^0.7.0", "typescript": "^4.3.5", - "vite": "^2.6.14", + "vite": "todo: wait for next Vite release", "xxhashjs": "^0.2.2", "bs58": "^4.0.1" }, From 95d17303c34bde1ceb125055262e379febce3e4f Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 5 Apr 2022 17:16:55 -0500 Subject: [PATCH 004/164] Update Vite which includes fixes to importing `*.js?url` with `exports` Update to Vite which includes https://github.com/vitejs/vite/pull/7098 --- package.json | 2 +- yarn.lock | 224 ++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 179 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 17719801..9b785c35 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "regenerator-runtime": "^0.13.7", "text-encoding": "^0.7.0", "typescript": "^4.3.5", - "vite": "todo: wait for next Vite release", + "vite": "^2.9.1", "xxhashjs": "^0.2.2" }, "dependencies": { diff --git a/yarn.lock b/yarn.lock index 7bcefdd4..71fe419e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -498,66 +498,141 @@ entities@^2.0.0: version "4.2.8" resolved "https://github.com/bwindels/es6-promise.git#112f78f5829e627055b0ff56a52fecb63f6003b1" +esbuild-android-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.31.tgz#4b7dfbbeee62b3495ba78220b85fb590eb68d5bf" + integrity sha512-MYkuJ91w07nGmr4EouejOZK2j/f5TCnsKxY8vRr2+wpKKfHD1LTJK28VbZa+y1+AL7v1V9G98ezTUwsV3CmXNw== + esbuild-android-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44" integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg== +esbuild-android-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.31.tgz#24c3d693924e044fb0d23206c3e627502b10b930" + integrity sha512-0rkH/35s7ZVcsw6nS0IAkR0dekSbjZGWdlOAf3jV0lGoPqqw0x6/TmaV9w7DQgUERTH1ApmPlpAMU4kVkCq9Jg== + esbuild-darwin-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72" integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ== +esbuild-darwin-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.31.tgz#285fbdb6dc74d4410f43dee59e6a14ebff82a9d7" + integrity sha512-kP6xPZHxtJa36Hb0jC05L3VzQSZBW2f3bpnQS20czXTRGEmM2GDiYpGdI5g2QYaw6vC4PYXjnigq8usd9g9jnQ== + esbuild-darwin-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a" integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ== +esbuild-darwin-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.31.tgz#b39c471a8134ce2c7811eb96fab9c500b256261c" + integrity sha512-1ZMog4hkNsdBGtDDtsftUqX6S9N52gEx4vX5aVehsSptgoBFIar1XrPiBTQty7YNH+bJasTpSVaZQgElCVvPKQ== + esbuild-freebsd-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85" integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA== +esbuild-freebsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.31.tgz#7ca700ef60ae12154bae63094ad41b21c6ae1a23" + integrity sha512-Zo0BYj7QpVFWoUpkv6Ng0RO2eJ4zk/WDaHMO88+jr5HuYmxsOre0imgwaZVPquTuJnCvL1G48BFucJ3tFflSeQ== + esbuild-freebsd-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52" integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ== +esbuild-freebsd-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.31.tgz#f793085c7184fcd08649b8d185edc5c2ce112e82" + integrity sha512-t85bS6jbRpmdjr4pdr/FY/fpx8lo1vv9S7BAs2EsXKJQhRDMIiC3QW+k2acYJoRuqirlvJcJVFQGCq/PfyC1kA== + esbuild-linux-32@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69" integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g== +esbuild-linux-32@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.31.tgz#cac97ec7da6fbde0c21dbe08babd0d2a034f317d" + integrity sha512-XYtOk/GodSkv+UOYVwryGpGPuFnszsMvRMKq6cIUfFfdssHuKDsU9IZveyCG44J106J39ABenQ5EetbYtVJHUw== + esbuild-linux-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3" integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA== +esbuild-linux-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.31.tgz#ec94cd5228e6777d2feb3c24a1fe1cbf8817d6da" + integrity sha512-Zf9CZxAxaXWHLqCg/QZ/hs0RU0XV3IBxV+ENQzy00S4QOTnZAvSLgPciILHHrVJ0lPIlb4XzAqlLM5y6iI2LIw== + esbuild-linux-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1" integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA== +esbuild-linux-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.31.tgz#d119188fccd6384db5c703de24c46dacaee3e9e8" + integrity sha512-V/H0tv+xpQ9IOHM+o85oCKNNidIEc5CcnDWl0V+hPd2F03dqdbFkWPBGphx8rD4JSQn6UefUQ1iH7y1qIzO8Fw== + esbuild-linux-arm@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe" integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA== +esbuild-linux-arm@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.31.tgz#63e10846886901e5632a591d44160f95c5d12ba7" + integrity sha512-RpiaeHPRlgCCDskxoyIsI49BhcDtZ4cl8+SLffizDm0yMNWP538SUg0ezQ2TTOPj3/svaGIbkRDwYtAon0Sjkg== + esbuild-linux-mips64le@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7" integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg== +esbuild-linux-mips64le@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.31.tgz#1cd44f72cde6489a5d6deea7c54efa6f3d6590ee" + integrity sha512-9/oBfAckInRuUg6AEgdCLLn6KJ6UOJDOLmUinTsReVSg6AfV6wxYQJq9iQM2idRogP7GUpomJ+bvCdWXpotQRQ== + esbuild-linux-ppc64le@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2" integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ== +esbuild-linux-ppc64le@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.31.tgz#3b5ccc05e5b8ef5c494f30a61fdd27811d2bbeeb" + integrity sha512-NMcb14Pg+8q8raGkzor9/R3vQwKzgxE3694BtO2SDLBwJuL2C1dQ1ZtM1t7ZvArQBgT8RiZVxb0/3fD+qGNk7g== + +esbuild-linux-riscv64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.31.tgz#d74ca78c8ed1d9b40bc907a9e3ef6e83fc06189c" + integrity sha512-l13yvmsVfawAnoYfcpuvml+nTlrOmtdceXYufSkXl2DOb0JKcuR6ARlAzuQCDcpo49SOJy1cCxpwlOIsUQBfzA== + +esbuild-linux-s390x@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.31.tgz#1bd547b8b027e323b77a838d265cb56ece2543af" + integrity sha512-GIwV9mY3koYja9MCSkKLk1P7rj+MkPV0UsGsZ575hEcIBrXeKN9jBi6X/bxDDPEN/SUAH35cJhBNrZU4x9lEfg== + esbuild-netbsd-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038" integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w== +esbuild-netbsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.31.tgz#964a45dbad4fac92aa0a15056e38a182735bd6c6" + integrity sha512-bJ+pyLvKQm+Obp5k7/Wk8e9Gdkls56F1aiI3uptoIfOIUqsZImH7pDyTrSufwqsFp62kO9LRuwXnjDwQtPyhFQ== + esbuild-node-loader@^0.6.3: version "0.6.3" resolved "https://registry.yarnpkg.com/esbuild-node-loader/-/esbuild-node-loader-0.6.3.tgz#3b90012f8bc2fcbb2ef76a659482c2c99840c5e8" @@ -570,27 +645,52 @@ esbuild-openbsd-64@0.13.15: resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7" integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g== +esbuild-openbsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.31.tgz#7d2a1d46450321b0459263d3e7072e6d3924ce46" + integrity sha512-NRAAPPca05H9j9Xab0kVXK0V6/pyZGGy8d2Y8KS0BMwWEydlD4KCJDmH8/7bWCKYLRGOOCE9/GPBJyPWHFW3sg== + esbuild-sunos-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4" integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw== +esbuild-sunos-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.31.tgz#3b3e4363951cd1dda14a14fee6d94ca426108e0c" + integrity sha512-9uA+V8w9Eehu4ldb95lPWdgCMcMO5HH6pXmfkk5usn3JsSZxKdLKsXB4hYgP80wscZvVYXJl2G+KNxsUTfPhZw== + esbuild-windows-32@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7" integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw== +esbuild-windows-32@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.31.tgz#997026a41c04535bfb7c014a0458940b49145820" + integrity sha512-VGdncQTqoxD9q3v/dk0Yugbmx2FzOkcs0OemBYc1X9KXOLQYH0uQbLJIckZdZOC3J+JKSExbYFrzYCOwWPuNyA== + esbuild-windows-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294" integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ== +esbuild-windows-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.31.tgz#5d4b0ea686c9b60036303b3415c472f2761bdafc" + integrity sha512-v/2ye5zBqpmCzi3bLCagStbNQlnOsY7WtMrD2Q0xZxeSIXONxji15KYtVee5o7nw4lXWbQSS1BL8G6BBMvtq4A== + esbuild-windows-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3" integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA== -esbuild@^0.13.12, esbuild@^0.13.2: +esbuild-windows-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.31.tgz#4f3b9fc34c4a33abbd0171df6cbb657ccbdbfc67" + integrity sha512-RXeU42FJoG1sriNHg73h4S+5B7L/gw+8T7U9u8IWqSSEbY6fZvBh4uofugiU1szUDqqP00GHwZ09WgYe3lGZiw== + +esbuild@^0.13.12: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf" integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw== @@ -613,6 +713,32 @@ esbuild@^0.13.12, esbuild@^0.13.2: esbuild-windows-64 "0.13.15" esbuild-windows-arm64 "0.13.15" +esbuild@^0.14.27: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.31.tgz#f7d0db114edc615f66d84972ee9fbd2b267f4029" + integrity sha512-QA0fUM13+JZzcvg1bdrhi7wo8Lr5IRHA9ypNn2znqxGqb66dSK6pAh01TjyBOhzZGazPQJZ1K26VrCAQJ715qA== + optionalDependencies: + esbuild-android-64 "0.14.31" + esbuild-android-arm64 "0.14.31" + esbuild-darwin-64 "0.14.31" + esbuild-darwin-arm64 "0.14.31" + esbuild-freebsd-64 "0.14.31" + esbuild-freebsd-arm64 "0.14.31" + esbuild-linux-32 "0.14.31" + esbuild-linux-64 "0.14.31" + esbuild-linux-arm "0.14.31" + esbuild-linux-arm64 "0.14.31" + esbuild-linux-mips64le "0.14.31" + esbuild-linux-ppc64le "0.14.31" + esbuild-linux-riscv64 "0.14.31" + esbuild-linux-s390x "0.14.31" + esbuild-netbsd-64 "0.14.31" + esbuild-openbsd-64 "0.14.31" + esbuild-sunos-64 "0.14.31" + esbuild-windows-32 "0.14.31" + esbuild-windows-64 "0.14.31" + esbuild-windows-arm64 "0.14.31" + escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -961,10 +1087,10 @@ inherits@2: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== -is-core-module@^2.2.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491" - integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg== +is-core-module@^2.8.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" + integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== dependencies: has "^1.0.3" @@ -1108,10 +1234,10 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -nanoid@^3.1.28: - version "3.1.28" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.28.tgz#3c01bac14cb6c5680569014cc65a2f26424c6bd4" - integrity sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw== +nanoid@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557" + integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA== natural-compare@^1.4.0: version "1.4.0" @@ -1188,20 +1314,20 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== +path-parse@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-type@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -picocolors@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" - integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== +picocolors@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== picomatch@^2.2.3: version "2.3.0" @@ -1227,14 +1353,14 @@ postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.3.8: - version "8.3.9" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.9.tgz#98754caa06c4ee9eb59cc48bd073bb6bd3437c31" - integrity sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw== +postcss@^8.4.12: + version "8.4.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" + integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== dependencies: - nanoid "^3.1.28" - picocolors "^0.2.1" - source-map-js "^0.6.2" + nanoid "^3.3.1" + picocolors "^1.0.0" + source-map-js "^1.0.2" prelude-ls@^1.2.1: version "1.2.1" @@ -1291,13 +1417,14 @@ resolve-from@^4.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -resolve@^1.20.0: - version "1.20.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" - integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== +resolve@^1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" + integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== dependencies: - is-core-module "^2.2.0" - path-parse "^1.0.6" + is-core-module "^2.8.1" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" reusify@^1.0.4: version "1.0.4" @@ -1311,10 +1438,10 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -rollup@^2.57.0: - version "2.58.0" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.58.0.tgz#a643983365e7bf7f5b7c62a8331b983b7c4c67fb" - integrity sha512-NOXpusKnaRpbS7ZVSzcEXqxcLDOagN6iFS8p45RkoiMqPHDLwJm758UF05KlMoCRbLBTZsPOIa887gZJ1AiXvw== +rollup@^2.59.0: + version "2.70.1" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e" + integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA== optionalDependencies: fsevents "~2.3.2" @@ -1368,10 +1495,10 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" -source-map-js@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" - integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== source-map@~0.6.1: version "0.6.1" @@ -1418,6 +1545,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + table@^6.0.9: version "6.7.1" resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2" @@ -1521,15 +1653,15 @@ v8-compile-cache@^2.0.3: resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA== -vite@^2.6.14: - version "2.6.14" - resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271" - integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA== +vite@^2.9.1: + version "2.9.1" + resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f" + integrity sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ== dependencies: - esbuild "^0.13.2" - postcss "^8.3.8" - resolve "^1.20.0" - rollup "^2.57.0" + esbuild "^0.14.27" + postcss "^8.4.12" + resolve "^1.22.0" + rollup "^2.59.0" optionalDependencies: fsevents "~2.3.2" From dd06d78a7218a36086dccfa7ae8553aa10005c3a Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 5 Apr 2022 18:17:14 -0500 Subject: [PATCH 005/164] Avoid ERR_REQUIRE_ESM errors when requiring SDK --- package.json | 3 ++- scripts/sdk/base-manifest.json | 5 ++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 9b785c35..6de800e3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "test:postcss": "impunity --entry-point scripts/postcss/test.js ", "start": "vite --port 3000", "build": "vite build", - "build:sdk": "./scripts/sdk/build.sh" + "build:sdk": "./scripts/sdk/build.sh", + "watch:sdk": "./scripts/sdk/build.sh && yarn run vite build -c vite.sdk-lib-config.js --watch" }, "repository": { "type": "git", diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json index fbc2b39c..da814c8d 100644 --- a/scripts/sdk/base-manifest.json +++ b/scripts/sdk/base-manifest.json @@ -2,7 +2,7 @@ "name": "hydrogen-view-sdk", "description": "Embeddable matrix client library, including view components", "version": "0.0.9", - "main": "./hydrogen.cjs.js", + "main": "./lib-build/hydrogen.cjs.js", "exports": { ".": { "import": "./lib-build/hydrogen.es.js", @@ -13,6 +13,5 @@ "./main.js": "./asset-build/assets/main.js", "./download-sandbox.html": "./asset-build/assets/download-sandbox.html", "./assets/*": "./asset-build/assets/*" - }, - "type": "module" + } } From 2401b7f453a417dc87635e43aa2339ed2517600c Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 5 Apr 2022 19:24:27 -0500 Subject: [PATCH 006/164] Add way to test whether SDK works in ESM and CommonJS --- package.json | 1 + scripts/sdk/test/.gitignore | 3 +++ scripts/sdk/test/deps.d.ts | 2 ++ scripts/sdk/test/esm-entry.ts | 21 +++++++++++++++++++ scripts/sdk/test/index.html | 12 +++++++++++ scripts/sdk/test/package.json | 8 +++++++ scripts/sdk/test/test-sdk-in-commonjs-env.js | 13 ++++++++++++ .../test/test-sdk-in-esm-vite-build-env.js | 19 +++++++++++++++++ 8 files changed, 79 insertions(+) create mode 100644 scripts/sdk/test/.gitignore create mode 100644 scripts/sdk/test/deps.d.ts create mode 100644 scripts/sdk/test/esm-entry.ts create mode 100644 scripts/sdk/test/index.html create mode 100644 scripts/sdk/test/package.json create mode 100644 scripts/sdk/test/test-sdk-in-commonjs-env.js create mode 100644 scripts/sdk/test/test-sdk-in-esm-vite-build-env.js diff --git a/package.json b/package.json index 6de800e3..4e0b0643 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "lint-ci": "eslint src/", "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/", "test:postcss": "impunity --entry-point scripts/postcss/test.js ", + "test:sdk": "cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js", "start": "vite --port 3000", "build": "vite build", "build:sdk": "./scripts/sdk/build.sh", diff --git a/scripts/sdk/test/.gitignore b/scripts/sdk/test/.gitignore new file mode 100644 index 00000000..cf762fe6 --- /dev/null +++ b/scripts/sdk/test/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +yarn.lock diff --git a/scripts/sdk/test/deps.d.ts b/scripts/sdk/test/deps.d.ts new file mode 100644 index 00000000..4c7d0327 --- /dev/null +++ b/scripts/sdk/test/deps.d.ts @@ -0,0 +1,2 @@ +// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet +declare module "hydrogen-view-sdk"; diff --git a/scripts/sdk/test/esm-entry.ts b/scripts/sdk/test/esm-entry.ts new file mode 100644 index 00000000..162cb6ef --- /dev/null +++ b/scripts/sdk/test/esm-entry.ts @@ -0,0 +1,21 @@ +import * as hydrogenViewSdk from "hydrogen-view-sdk"; +import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url'; +import workerPath from 'hydrogen-view-sdk/main.js?url'; +import olmWasmPath from '@matrix-org/olm/olm.wasm?url'; +import olmJsPath from '@matrix-org/olm/olm.js?url'; +import olmLegacyJsPath from '@matrix-org/olm/olm_legacy.js?url'; +const assetPaths = { + downloadSandbox: downloadSandboxPath, + worker: workerPath, + olm: { + wasm: olmWasmPath, + legacyBundle: olmLegacyJsPath, + wasmBundle: olmJsPath + } +}; +import "hydrogen-view-sdk/style.css"; + +console.log('hydrogenViewSdk', hydrogenViewSdk); +console.log('assetPaths', assetPaths); + +console.log('Entry ESM works ✅'); diff --git a/scripts/sdk/test/index.html b/scripts/sdk/test/index.html new file mode 100644 index 00000000..2ee14116 --- /dev/null +++ b/scripts/sdk/test/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App + + +
+ + + diff --git a/scripts/sdk/test/package.json b/scripts/sdk/test/package.json new file mode 100644 index 00000000..a81da82c --- /dev/null +++ b/scripts/sdk/test/package.json @@ -0,0 +1,8 @@ +{ + "name": "test-sdk", + "version": "0.0.0", + "description": "", + "dependencies": { + "hydrogen-view-sdk": "link:../../../target" + } +} diff --git a/scripts/sdk/test/test-sdk-in-commonjs-env.js b/scripts/sdk/test/test-sdk-in-commonjs-env.js new file mode 100644 index 00000000..fc7245f8 --- /dev/null +++ b/scripts/sdk/test/test-sdk-in-commonjs-env.js @@ -0,0 +1,13 @@ +// Make sure the SDK can be used in a CommonJS environment. +// Usage: node scripts/sdk/test/test-sdk-in-commonjs-env.js +const hydrogenViewSdk = require('hydrogen-view-sdk'); + +// Test that the "exports" are available: +// Worker +require.resolve('hydrogen-view-sdk/main.js'); +// Styles +require.resolve('hydrogen-view-sdk/style.css'); +// Can access files in the assets/* directory +require.resolve('hydrogen-view-sdk/assets/main.js'); + +console.log('SDK works in CommonJS ✅'); diff --git a/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js b/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js new file mode 100644 index 00000000..6fc87da7 --- /dev/null +++ b/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js @@ -0,0 +1,19 @@ +const { resolve } = require('path'); +const { build } = require('vite'); + +async function main() { + await build({ + outDir: './dist', + build: { + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html') + } + } + } + }); + + console.log('SDK works in Vite build ✅'); +} + +main(); From f61bf6090eeaf6b0dea54b796bdb83b105eef250 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 19 Apr 2022 17:28:09 -0500 Subject: [PATCH 007/164] Enable extended globs for removing all but some filename !(filename) See https://github.com/vector-im/hydrogen-web/pull/693#discussion_r853534719 --- scripts/sdk/build.sh | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index 9063d7fb..0d7e1170 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -1,4 +1,7 @@ #!/bin/bash +# Enable extended globs so we can use the `!(filename)` glob syntax +shopt -s extglob + rm -rf target/* yarn run vite build -c vite.sdk-assets-config.js yarn run vite build -c vite.sdk-lib-config.js From f56dc582a50a617c411cdde0823f0bc25e3863a3 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 20 Apr 2022 00:39:32 -0500 Subject: [PATCH 008/164] Fix tests after theme updates --- package.json | 2 +- scripts/sdk/test/esm-entry.ts | 2 +- scripts/sdk/test/test-sdk-in-commonjs-env.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index dce5380e..7a5e79cc 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "lint-ci": "eslint src/", "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/", "test:postcss": "impunity --entry-point scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js", - "test:sdk": "cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js", + "test:sdk": "yarn build:sdk && cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js", "start": "vite --port 3000", "build": "vite build", "build:sdk": "./scripts/sdk/build.sh", diff --git a/scripts/sdk/test/esm-entry.ts b/scripts/sdk/test/esm-entry.ts index 162cb6ef..1f3b7114 100644 --- a/scripts/sdk/test/esm-entry.ts +++ b/scripts/sdk/test/esm-entry.ts @@ -13,7 +13,7 @@ const assetPaths = { wasmBundle: olmJsPath } }; -import "hydrogen-view-sdk/style.css"; +import "hydrogen-view-sdk/theme-element-light.css"; console.log('hydrogenViewSdk', hydrogenViewSdk); console.log('assetPaths', assetPaths); diff --git a/scripts/sdk/test/test-sdk-in-commonjs-env.js b/scripts/sdk/test/test-sdk-in-commonjs-env.js index fc7245f8..3fd19d46 100644 --- a/scripts/sdk/test/test-sdk-in-commonjs-env.js +++ b/scripts/sdk/test/test-sdk-in-commonjs-env.js @@ -6,7 +6,7 @@ const hydrogenViewSdk = require('hydrogen-view-sdk'); // Worker require.resolve('hydrogen-view-sdk/main.js'); // Styles -require.resolve('hydrogen-view-sdk/style.css'); +require.resolve('hydrogen-view-sdk/theme-element-light.css'); // Can access files in the assets/* directory require.resolve('hydrogen-view-sdk/assets/main.js'); From f1e07b684213edd8be1651898f526dc3d568d64d Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 20 Apr 2022 11:59:49 -0500 Subject: [PATCH 009/164] Explain what is being deleted by the strange syntax See https://github.com/vector-im/hydrogen-web/pull/693#discussion_r815284713 --- scripts/sdk/build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index b0040b61..5adc69c5 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -17,6 +17,7 @@ mkdir target/paths cp doc/SDK.md target/README.md pushd target pushd asset-build/assets +# Remove all `*.wasm` and `*.js` files except for `main.js` rm !(main).js *.wasm popd rm index.html From ce289baba61e40b711fecca10066c0be73542f44 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 20 Apr 2022 17:32:12 -0500 Subject: [PATCH 010/164] Remove extra space --- scripts/sdk/build.sh | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index 5adc69c5..6a7bc93f 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -5,7 +5,6 @@ set -o pipefail # Enable extended globs so we can use the `!(filename)` glob syntax shopt -s extglob - rm -rf target/* yarn run vite build -c vite.sdk-assets-config.js yarn run vite build -c vite.sdk-lib-config.js From d053d4388fb6d72612749cc6a864272242e1b6fa Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 5 May 2022 14:58:43 -0500 Subject: [PATCH 011/164] Update Vite to avoid flakey errors in our PostCSS plugins Fix https://github.com/vector-im/hydrogen-web/issues/722 Updating Vite to includes fixes from https://github.com/vitejs/vite/issues/7822 -> https://github.com/vitejs/vite/pull/7827 --- package.json | 2 +- yarn.lock | 28 ++++++++++++++-------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 7a5e79cc..49369865 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "regenerator-runtime": "^0.13.7", "text-encoding": "^0.7.0", "typescript": "^4.3.5", - "vite": "^2.9.1", + "vite": "^2.9.8", "xxhashjs": "^0.2.2" }, "dependencies": { diff --git a/yarn.lock b/yarn.lock index 71fe419e..9d882bd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1234,10 +1234,10 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -nanoid@^3.3.1: - version "3.3.2" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557" - integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA== +nanoid@^3.3.3: + version "3.3.4" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== natural-compare@^1.4.0: version "1.4.0" @@ -1353,12 +1353,12 @@ postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.4.12: - version "8.4.12" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" - integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== +postcss@^8.4.13: + version "8.4.13" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575" + integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA== dependencies: - nanoid "^3.3.1" + nanoid "^3.3.3" picocolors "^1.0.0" source-map-js "^1.0.2" @@ -1653,13 +1653,13 @@ v8-compile-cache@^2.0.3: resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA== -vite@^2.9.1: - version "2.9.1" - resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f" - integrity sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ== +vite@^2.9.8: + version "2.9.8" + resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.8.tgz#2c2cb0790beb0fbe4b8c0995b80fe691a91c2545" + integrity sha512-zsBGwn5UT3YS0NLSJ7hnR54+vUKfgzMUh/Z9CxF1YKEBVIe213+63jrFLmZphgGI5zXwQCSmqIdbPuE8NJywPw== dependencies: esbuild "^0.14.27" - postcss "^8.4.12" + postcss "^8.4.13" resolve "^1.22.0" rollup "^2.59.0" optionalDependencies: From e54482e4c00b285ab442b55ed67411e671bebe77 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 5 May 2022 17:57:25 -0500 Subject: [PATCH 012/164] Add some comments --- scripts/sdk/build.sh | 2 ++ vite.sdk-assets-config.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index 6a7bc93f..992d2efc 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -5,6 +5,8 @@ set -o pipefail # Enable extended globs so we can use the `!(filename)` glob syntax shopt -s extglob +# Only remove the directory contents instead of the whole directory to maintain +# the `npm link`/`yarn link` symlink rm -rf target/* yarn run vite build -c vite.sdk-assets-config.js yarn run vite build -c vite.sdk-lib-config.js diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index 7535a441..beb7bb37 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -3,6 +3,8 @@ const mergeOptions = require('merge-options'); const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes"); const {commonOptions, compiledVariables} = require("./vite.common-config.js"); +// These paths will be saved without their hash so they havea consisent path to +// reference const pathsToExport = [ "main.js", "download-sandbox.html", From b725269c7a6ea62cb0a1e2aaec90c9b8b54f7001 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 18 May 2022 00:21:56 -0500 Subject: [PATCH 013/164] Clean up index.html in the right spot --- scripts/sdk/build.sh | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index 992d2efc..5e1632d3 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -16,10 +16,10 @@ mkdir target/paths # this doesn't work, the ?url imports need to be in the consuming project, so disable for now # ./scripts/sdk/transform-paths.js ./src/platform/web/sdk/paths/vite.js ./target/paths/vite.js cp doc/SDK.md target/README.md -pushd target -pushd asset-build/assets +pushd target/asset-build +rm index.html +popd +pushd target/asset-build/assets # Remove all `*.wasm` and `*.js` files except for `main.js` rm !(main).js *.wasm popd -rm index.html -popd From 11d7535c238ea1bdaccfca67180455ab8802d05f Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Tue, 31 May 2022 13:38:34 +0200 Subject: [PATCH 014/164] add some basic tests (with mock utils) for DeviceTracker --- src/matrix/e2ee/DeviceTracker.js | 122 +++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) diff --git a/src/matrix/e2ee/DeviceTracker.js b/src/matrix/e2ee/DeviceTracker.js index 0068a1f9..c640b04a 100644 --- a/src/matrix/e2ee/DeviceTracker.js +++ b/src/matrix/e2ee/DeviceTracker.js @@ -363,3 +363,125 @@ export class DeviceTracker { return await txn.deviceIdentities.getByCurve25519Key(curve25519Key); } } + +import {createMockStorage} from "../../mocks/Storage"; +import {Instance as NullLoggerInstance} from "../../logging/NullLogger"; + +export function tests() { + + function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) { + return { + isTrackingMembers: false, + isEncrypted: true, + loadMemberList: () => { + const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};}); + const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};}); + const members = joinedMembers.concat(invitedMembers); + const memberMap = members.reduce((map, member) => { + map.set(member.userId, member); + return map; + }, new Map()); + return {members: memberMap, release() {}} + }, + writeIsTrackingMembers(isTrackingMembers) { + if (this.isTrackingMembers !== isTrackingMembers) { + return isTrackingMembers; + } + return undefined; + }, + applyIsTrackingMembersChanges(isTrackingMembers) { + if (isTrackingMembers !== undefined) { + this.isTrackingMembers = isTrackingMembers; + } + }, + } + } + + function createQueryKeysHSApiMock(createKey = (algorithm, userId, deviceId) => `${algorithm}:${userId}:${deviceId}:key`) { + return { + queryKeys(payload) { + const {device_keys: deviceKeys} = payload; + const userKeys = Object.entries(deviceKeys).reduce((userKeys, [userId, deviceIds]) => { + if (deviceIds.length === 0) { + deviceIds = ["device1"]; + } + userKeys[userId] = deviceIds.filter(d => d === "device1").reduce((deviceKeys, deviceId) => { + deviceKeys[deviceId] = { + "algorithms": [ + "m.olm.v1.curve25519-aes-sha2", + "m.megolm.v1.aes-sha2" + ], + "device_id": deviceId, + "keys": { + [`curve25519:${deviceId}`]: createKey("curve25519", userId, deviceId), + [`ed25519:${deviceId}`]: createKey("ed25519", userId, deviceId), + }, + "signatures": { + [userId]: { + [`ed25519:${deviceId}`]: `ed25519:${userId}:${deviceId}:signature` + } + }, + "unsigned": { + "device_display_name": `${userId} Phone` + }, + "user_id": userId + }; + return deviceKeys; + }, {}); + return userKeys; + }, {}); + const response = {device_keys: userKeys}; + return { + async response() { + return response; + } + }; + } + }; + } + const roomId = "!abc:hs.tld"; + + return { + "trackRoom only writes joined members": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const txn = await storage.readTxn([storage.storeNames.userIdentities]); + assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), { + userId: "@alice:hs.tld", + roomIds: [roomId], + deviceTrackingStatus: TRACKING_STATUS_OUTDATED + }); + assert.deepEqual(await txn.userIdentities.get("@bob:hs.tld"), { + userId: "@bob:hs.tld", + roomIds: [roomId], + deviceTrackingStatus: TRACKING_STATUS_OUTDATED + }); + assert.equal(await txn.userIdentities.get("@charly:hs.tld"), undefined); + }, + "getting devices for tracked room yields correct keys": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const hsApi = createQueryKeysHSApiMock(); + const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); + assert.equal(devices.length, 2); + assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key"); + }, + } +} From 3d3d590334aa5750b1acb36842a5ca240cce0fd5 Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Tue, 31 May 2022 13:39:05 +0200 Subject: [PATCH 015/164] add failing test for device with changed key being returned --- src/matrix/e2ee/DeviceTracker.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/matrix/e2ee/DeviceTracker.js b/src/matrix/e2ee/DeviceTracker.js index c640b04a..21ec89b8 100644 --- a/src/matrix/e2ee/DeviceTracker.js +++ b/src/matrix/e2ee/DeviceTracker.js @@ -483,5 +483,34 @@ export function tests() { assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key"); assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key"); }, + "device with changed key is ignored": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const hsApi = createQueryKeysHSApiMock(); + // query devices first time + await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); + const txn = await storage.readWriteTxn([storage.storeNames.userIdentities]); + // mark alice as outdated, so keys will be fetched again + tracker.writeDeviceChanges(["@alice:hs.tld"], txn, NullLoggerInstance.item); + await txn.complete(); + const hsApiWithChangedAliceKey = createQueryKeysHSApiMock((algo, userId, deviceId) => { + return `${algo}:${userId}:${deviceId}:${userId === "@alice:hs.tld" ? "newKey" : "key"}`; + }); + const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApiWithChangedAliceKey, NullLoggerInstance.item); + assert.equal(devices.length, 2); + assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key"); + const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]); + // also check the modified key was not stored + assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + } } } From bc5164486820761912600f72acbfc132676a2b00 Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Tue, 31 May 2022 13:39:23 +0200 Subject: [PATCH 016/164] reassignment is not used later on, remove --- src/matrix/e2ee/DeviceTracker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/matrix/e2ee/DeviceTracker.js b/src/matrix/e2ee/DeviceTracker.js index 21ec89b8..1bfe63ef 100644 --- a/src/matrix/e2ee/DeviceTracker.js +++ b/src/matrix/e2ee/DeviceTracker.js @@ -214,7 +214,7 @@ export class DeviceTracker { const allDeviceIdentities = []; const deviceIdentitiesToStore = []; // filter out devices that have changed their ed25519 key since last time we queried them - deviceIdentities = await Promise.all(deviceIdentities.map(async deviceIdentity => { + await Promise.all(deviceIdentities.map(async deviceIdentity => { if (knownDeviceIds.includes(deviceIdentity.deviceId)) { const existingDevice = await txn.deviceIdentities.get(deviceIdentity.userId, deviceIdentity.deviceId); if (existingDevice.ed25519Key !== deviceIdentity.ed25519Key) { From c62c8da10b9eb3fda00ea5be46677c0e5d109c4e Mon Sep 17 00:00:00 2001 From: Bruno Windels <274386+bwindels@users.noreply.github.com> Date: Tue, 31 May 2022 13:39:35 +0200 Subject: [PATCH 017/164] fix changed key not being ignored --- src/matrix/e2ee/DeviceTracker.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/matrix/e2ee/DeviceTracker.js b/src/matrix/e2ee/DeviceTracker.js index 1bfe63ef..f8c3bca8 100644 --- a/src/matrix/e2ee/DeviceTracker.js +++ b/src/matrix/e2ee/DeviceTracker.js @@ -219,6 +219,7 @@ export class DeviceTracker { const existingDevice = await txn.deviceIdentities.get(deviceIdentity.userId, deviceIdentity.deviceId); if (existingDevice.ed25519Key !== deviceIdentity.ed25519Key) { allDeviceIdentities.push(existingDevice); + return; } } allDeviceIdentities.push(deviceIdentity); From 38c377486916b94f1e134e919e4f9ac543dbbe06 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 31 May 2022 15:30:56 -0500 Subject: [PATCH 018/164] Import assets from the assets/ directory > Will be easier towards the future when adding more assets. Probably best to keep style.css for now for backwards compat though. > > *-- https://github.com/vector-im/hydrogen-web/pull/693#discussion_r853844282* --- doc/SDK.md | 4 ++-- scripts/sdk/base-manifest.json | 2 -- scripts/sdk/test/esm-entry.ts | 2 +- scripts/sdk/test/test-sdk-in-commonjs-env.js | 2 +- vite.sdk-assets-config.js | 4 ++-- 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/doc/SDK.md b/doc/SDK.md index 3f5bdb09..c8f5197f 100644 --- a/doc/SDK.md +++ b/doc/SDK.md @@ -48,8 +48,8 @@ const assetPaths = { wasmBundle: olmJsPath } }; -import "hydrogen-view-sdk/theme-element-light.css"; -// OR import "hydrogen-view-sdk/theme-element-dark.css"; +import "hydrogen-view-sdk/assets/theme-element-light.css"; +// OR import "hydrogen-view-sdk/assets/theme-element-dark.css"; async function main() { const app = document.querySelector('#app')! diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json index de940752..441d4189 100644 --- a/scripts/sdk/base-manifest.json +++ b/scripts/sdk/base-manifest.json @@ -10,8 +10,6 @@ }, "./paths/vite": "./paths/vite.js", "./style.css": "./asset-build/assets/theme-element-light.css", - "./theme-element-light.css": "./asset-build/assets/theme-element-light.css", - "./theme-element-dark.css": "./asset-build/assets/theme-element-dark.css", "./main.js": "./asset-build/assets/main.js", "./download-sandbox.html": "./asset-build/assets/download-sandbox.html", "./assets/*": "./asset-build/assets/*" diff --git a/scripts/sdk/test/esm-entry.ts b/scripts/sdk/test/esm-entry.ts index 1f3b7114..17bbd8bb 100644 --- a/scripts/sdk/test/esm-entry.ts +++ b/scripts/sdk/test/esm-entry.ts @@ -13,7 +13,7 @@ const assetPaths = { wasmBundle: olmJsPath } }; -import "hydrogen-view-sdk/theme-element-light.css"; +import "hydrogen-view-sdk/assets/theme-element-light.css"; console.log('hydrogenViewSdk', hydrogenViewSdk); console.log('assetPaths', assetPaths); diff --git a/scripts/sdk/test/test-sdk-in-commonjs-env.js b/scripts/sdk/test/test-sdk-in-commonjs-env.js index 3fd19d46..333f1573 100644 --- a/scripts/sdk/test/test-sdk-in-commonjs-env.js +++ b/scripts/sdk/test/test-sdk-in-commonjs-env.js @@ -6,7 +6,7 @@ const hydrogenViewSdk = require('hydrogen-view-sdk'); // Worker require.resolve('hydrogen-view-sdk/main.js'); // Styles -require.resolve('hydrogen-view-sdk/theme-element-light.css'); +require.resolve('hydrogen-view-sdk/assets/theme-element-light.css'); // Can access files in the assets/* directory require.resolve('hydrogen-view-sdk/assets/main.js'); diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index beb7bb37..7174b8db 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -3,8 +3,8 @@ const mergeOptions = require('merge-options'); const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes"); const {commonOptions, compiledVariables} = require("./vite.common-config.js"); -// These paths will be saved without their hash so they havea consisent path to -// reference +// These paths will be saved without their hash so they have a consisent path to +// reference in imports. const pathsToExport = [ "main.js", "download-sandbox.html", From 9d8a578dce4018afabecaaa79c38c415e62d0d46 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 31 May 2022 15:35:48 -0500 Subject: [PATCH 019/164] Better comment --- vite.sdk-assets-config.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index 7174b8db..d7d4d064 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -3,8 +3,9 @@ const mergeOptions = require('merge-options'); const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes"); const {commonOptions, compiledVariables} = require("./vite.common-config.js"); -// These paths will be saved without their hash so they have a consisent path to -// reference in imports. +// These paths will be saved without their hash so they have a consisent path +// that we can reference in our `package.json` `exports`. And so people can import +// them with a consistent path. const pathsToExport = [ "main.js", "download-sandbox.html", @@ -21,7 +22,8 @@ export default mergeOptions(commonOptions, { output: { assetFileNames: (chunkInfo) => { // Get rid of the hash so we can consistently reference these - // files in our `package.json` `exports` + // files in our `package.json` `exports`. And so people can + // import them with a consistent path. if(pathsToExport.includes(path.basename(chunkInfo.name))) { return "assets/[name].[ext]"; } From 4474458f4bf4d765f360390cf26a882662358fa5 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 23 May 2022 12:45:32 +0530 Subject: [PATCH 020/164] getActiveTheme should never return undefined Instead it should throw an error. This is useful for when we do setTheme(await getActiveTheme()) because setTheme expects a string. --- src/platform/web/ThemeLoader.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index d9aaabb6..2aa79bb5 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -58,7 +58,7 @@ export class ThemeLoader { return Object.keys(this._themeMapping); } - async getActiveTheme(): Promise { + async getActiveTheme(): Promise { // check if theme is set via settings let theme = await this._platform.settingsStorage.getString("theme"); if (theme) { @@ -70,6 +70,6 @@ export class ThemeLoader { } else if (window.matchMedia("(prefers-color-scheme: light)").matches) { return this._platform.config["defaultTheme"].light; } - return undefined; + throw new Error("Cannot find active theme!"); } } From 809c522571baf6a1d4b41221621893a1a89feef3 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 26 May 2022 23:13:31 +0530 Subject: [PATCH 021/164] Change the format of built-asset --- .../rollup-plugin-build-themes.js | 47 +++++++++++++++++-- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index da2db73b..4fddb8ed 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -254,13 +254,50 @@ module.exports = function buildThemes(options) { const derivedVariables = compiledVariables["derived-variables"]; const icon = compiledVariables["icon"]; const builtAssets = {}; - /** - * Generate a mapping from theme name to asset hashed location of said theme in build output. - * This can be used to enumerate themes during runtime. - */ + let defaultDarkVariant = {}, defaultLightVariant = {}; + const themeName = manifest.name; for (const chunk of chunkArray) { const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); - builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; + const {name: variantName, default: isDefault, dark} = manifest.values.variants[variant]; + const themeId = `${name}-${variant}`; + const themeDisplayName = `${themeName} ${variantName}`; + if (isDefault) { + /** + * This is a default variant! + * We'll add these to the builtAssets keyed with just the + * theme-name (i.e "Element" instead of "Element Dark") + * so that we can distinguish them from other variants! + * + * This allows us to render a radio-button with "dark" and + * "light" options. + */ + const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; + defaultVariant.themeDisplayName = variantName; + defaultVariant.id = themeId + defaultVariant.cssLocation = assetMap.get(chunk.fileName).fileName; + continue; + } + // Non-default variants are keyed in builtAssets with "theme_name variant_name" + // eg: "Element Dark" + builtAssets[themeDisplayName] = { + cssLocation: assetMap.get(chunk.fileName).fileName, + id: themeId + }; + } + if (defaultDarkVariant.id && defaultLightVariant.id) { + /** + * As mentioned above, if there's both a default dark and a default light variant, + * add them to builtAsset separately. + */ + builtAssets[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; + } + else { + /** + * If only one default variant is found (i.e only dark default or light default but not both), + * treat it like any other variant. + */ + const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; + builtAssets[`${themeName} ${variant.themeDisplayName}`] = { id: variant.id, cssLocation: variant.cssLocation }; } manifest.source = { "built-assets": builtAssets, From 3afbe1148e9fffa5837eb26c81a21b8c90047037 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 26 May 2022 23:35:09 +0530 Subject: [PATCH 022/164] Use the new built-asset format in ThemeLoader --- src/platform/web/ThemeLoader.ts | 46 ++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 2aa79bb5..1f010fb2 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -17,15 +17,35 @@ limitations under the License. import type {ILogItem} from "../../logging/types.js"; import type {Platform} from "./Platform.js"; +type NormalVariant = { + id: string; + cssLocation: string; +}; + +type DefaultVariant = { + dark: { + id: string; + cssLocation: string; + themeDisplayName: string; + }; + light: { + id: string; + cssLocation: string; + themeDisplayName: string; + }; +} +type ThemeInformation = NormalVariant | DefaultVariant; + export class ThemeLoader { private _platform: Platform; - private _themeMapping: Record = {}; + private _themeMapping: Record; constructor(platform: Platform) { this._platform = platform; } async init(manifestLocations: string[]): Promise { + this._themeMapping = {}; for (const manifestLocation of manifestLocations) { const { body } = await this._platform .request(manifestLocation, { @@ -36,8 +56,8 @@ export class ThemeLoader { .response(); /* After build has finished, the source section of each theme manifest - contains `built-assets` which is a mapping from the theme-name to the - location of the css file in build. + contains `built-assets` which is a mapping from the theme-name to theme + details which includes the location of the CSS file. */ Object.assign(this._themeMapping, body["source"]["built-assets"]); } @@ -45,7 +65,7 @@ export class ThemeLoader { setTheme(themeName: string, log?: ILogItem) { this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeName}, () => { - const themeLocation = this._themeMapping[themeName]; + const themeLocation = this._findThemeLocationFromId(themeName); if (!themeLocation) { throw new Error( `Cannot find theme location for theme "${themeName}"!`); } @@ -54,8 +74,8 @@ export class ThemeLoader { }); } - get themes(): string[] { - return Object.keys(this._themeMapping); + get themeMapping(): Record { + return this._themeMapping; } async getActiveTheme(): Promise { @@ -72,4 +92,18 @@ export class ThemeLoader { } throw new Error("Cannot find active theme!"); } + + private _findThemeLocationFromId(themeId: string) { + for (const themeData of Object.values(this._themeMapping)) { + if ("id" in themeData && themeData.id === themeId) { + return themeData.cssLocation; + } + else if ("light" in themeData && themeData.light?.id === themeId) { + return themeData.light.cssLocation; + } + else if ("dark" in themeData && themeData.dark?.id === themeId) { + return themeData.dark.cssLocation; + } + } + } } From 0b98473e85ce31bf7a4beb80077d29f2002ee1e6 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 26 May 2022 23:36:37 +0530 Subject: [PATCH 023/164] Render a radio button for default variants --- .../session/settings/SettingsViewModel.js | 14 ++++++-- .../web/ui/session/settings/SettingsView.js | 34 +++++++++++++++++-- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/domain/session/settings/SettingsViewModel.js b/src/domain/session/settings/SettingsViewModel.js index 5c89236f..bab72d3d 100644 --- a/src/domain/session/settings/SettingsViewModel.js +++ b/src/domain/session/settings/SettingsViewModel.js @@ -131,8 +131,8 @@ export class SettingsViewModel extends ViewModel { return this._formatBytes(this._estimate?.usage); } - get themes() { - return this.platform.themeLoader.themes; + get themeMapping() { + return this.platform.themeLoader.themeMapping; } get activeTheme() { @@ -185,5 +185,15 @@ export class SettingsViewModel extends ViewModel { this.emitChange("pushNotifications.serverError"); } } + + themeOptionChanged(themeId) { + if (themeId) { + this.setTheme(themeId); + } + // if there's no themeId, then the theme is going to be set via radio-buttons + // emit so that radio-buttons become displayed/hidden + this.emitChange("themeOption"); + } + } diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js index dd7bbc03..06f98577 100644 --- a/src/platform/web/ui/session/settings/SettingsView.js +++ b/src/platform/web/ui/session/settings/SettingsView.js @@ -142,9 +142,37 @@ export class SettingsView extends TemplateView { _themeOptions(t, vm) { const activeTheme = vm.activeTheme; const optionTags = []; - for (const name of vm.themes) { - optionTags.push(t.option({value: name, selected: name === activeTheme}, name)); + let isDarkSelected = null, isLightSelected = null; + for (const [name, details] of Object.entries(vm.themeMapping)) { + let isSelected = null; + if (details.id === activeTheme) { + isSelected = true; + } + else if (details.dark?.id === activeTheme) { + isSelected = true; + isDarkSelected = true; + } + else if (details.light?.id === activeTheme) { + isSelected = true; + isLightSelected = true; + } + optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name)); } - return t.select({onChange: (e) => vm.setTheme(e.target.value)}, optionTags); + const select = t.select({ onChange: (e) => vm.themeOptionChanged(e.target.value) }, optionTags); + const radioButtons = t.form({ + className: { hidden: () => select.options[select.selectedIndex].value !== "" }, + onChange: (e) => { + const selectedThemeName = select.options[select.selectedIndex].text; + const themeId = vm.themeMapping[selectedThemeName][e.target.value].id; + vm.themeOptionChanged(themeId); + } + }, + [ + t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected }), + t.label({for: "dark"}, "dark"), + t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected }), + t.label({for: "light"}, "light"), + ]); + return t.div({ className: "theme-chooser" }, [select, radioButtons]); } } From 1f00c8f6359d2570b0e5040c62d1b11891269619 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 26 May 2022 23:36:56 +0530 Subject: [PATCH 024/164] Add a temporary theme to test this PR --- .../web/ui/css/themes/element/manifest.json | 55 ++++++++++++------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json index ec1852cb..0858a05b 100644 --- a/src/platform/web/ui/css/themes/element/manifest.json +++ b/src/platform/web/ui/css/themes/element/manifest.json @@ -1,6 +1,7 @@ { "version": 1, - "name": "element", + "name": "Element", + "id": "element", "values": { "font-faces": [ { @@ -9,37 +10,51 @@ } ], "variants": { - "light": { - "base": true, - "default": true, - "name": "Light", - "variables": { - "background-color-primary": "#fff", + "light": { + "base": true, + "default": true, + "name": "Light", + "variables": { + "background-color-primary": "#fff", "background-color-secondary": "#f6f6f6", - "text-color": "#2E2F32", + "text-color": "#2E2F32", "accent-color": "#03b381", "error-color": "#FF4B55", "fixed-white": "#fff", "room-badge": "#61708b", "link-color": "#238cf5" - } - }, - "dark": { - "dark": true, - "default": true, - "name": "Dark", - "variables": { - "background-color-primary": "#21262b", + } + }, + "dark": { + "dark": true, + "default": true, + "name": "Dark", + "variables": { + "background-color-primary": "#21262b", "background-color-secondary": "#2D3239", - "text-color": "#fff", + "text-color": "#fff", "accent-color": "#03B381", "error-color": "#FF4B55", "fixed-white": "#fff", "room-badge": "#61708b", "link-color": "#238cf5" - } - } - } + } + }, + "violet": { + "dark": true, + "name": "Violet", + "variables": { + "background-color-primary": "#21262b", + "background-color-secondary": "#2D3239", + "text-color": "#fff", + "accent-color": "#03B381", + "error-color": "#FF4B55", + "fixed-white": "#fff", + "room-badge": "#61708b", + "link-color": "#238cf5" + } + } + } } } From d4084da2998e0f011317f34d58bf988fbe3882f0 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 27 May 2022 14:23:38 +0530 Subject: [PATCH 025/164] Extract code into function --- src/platform/web/ThemeLoader.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 1f010fb2..2cc0c38d 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -79,18 +79,19 @@ export class ThemeLoader { } async getActiveTheme(): Promise { - // check if theme is set via settings - let theme = await this._platform.settingsStorage.getString("theme"); + const theme = await this._platform.settingsStorage.getString("theme") ?? this.getDefaultTheme(); if (theme) { return theme; } - // return default theme + throw new Error("Cannot find active theme!"); + } + + getDefaultTheme(): string | undefined { if (window.matchMedia("(prefers-color-scheme: dark)").matches) { return this._platform.config["defaultTheme"].dark; } else if (window.matchMedia("(prefers-color-scheme: light)").matches) { return this._platform.config["defaultTheme"].light; } - throw new Error("Cannot find active theme!"); } private _findThemeLocationFromId(themeId: string) { From bbec2effe5128470fbea855c73ccff0e3093cdc8 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 27 May 2022 14:24:19 +0530 Subject: [PATCH 026/164] Add typing --- src/platform/web/ThemeLoader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 2cc0c38d..299c0e1d 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -94,7 +94,7 @@ export class ThemeLoader { } } - private _findThemeLocationFromId(themeId: string) { + private _findThemeLocationFromId(themeId: string): string | undefined { for (const themeData of Object.values(this._themeMapping)) { if ("id" in themeData && themeData.id === themeId) { return themeData.cssLocation; From f6cec938a7a4903d88f431544c8bab820d6b58f0 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 27 May 2022 14:24:44 +0530 Subject: [PATCH 027/164] Add default theme to mapping --- src/platform/web/ThemeLoader.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 299c0e1d..e9bdd479 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -60,6 +60,14 @@ export class ThemeLoader { details which includes the location of the CSS file. */ Object.assign(this._themeMapping, body["source"]["built-assets"]); + //Add the default-theme as an additional option to the mapping + const defaultThemeId = this.getDefaultTheme(); + if (defaultThemeId) { + const cssLocation = this._findThemeLocationFromId(defaultThemeId); + if (cssLocation) { + this._themeMapping["Default"] = { id: "default", cssLocation }; + } + } } } From cb03e97e78e308eeec82cfb6d5d1f43f73a51005 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 27 May 2022 16:31:23 +0530 Subject: [PATCH 028/164] Use default theme intially --- src/platform/web/ThemeLoader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index e9bdd479..2901cdf9 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -87,7 +87,7 @@ export class ThemeLoader { } async getActiveTheme(): Promise { - const theme = await this._platform.settingsStorage.getString("theme") ?? this.getDefaultTheme(); + const theme = await this._platform.settingsStorage.getString("theme") ?? "default"; if (theme) { return theme; } From e8e4c33bae7435c33bb0c158a348452616f57a40 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 11:39:05 +0530 Subject: [PATCH 029/164] Rephrase comment --- scripts/build-plugins/rollup-plugin-build-themes.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index 4fddb8ed..a3fd6c8f 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -264,11 +264,11 @@ module.exports = function buildThemes(options) { if (isDefault) { /** * This is a default variant! - * We'll add these to the builtAssets keyed with just the - * theme-name (i.e "Element" instead of "Element Dark") - * so that we can distinguish them from other variants! + * We'll add these to the builtAssets (separately) keyed with just the + * theme-name (i.e "Element" instead of "Element Dark"). + * We need to be able to distinguish them from other variants! * - * This allows us to render a radio-button with "dark" and + * This allows us to render radio-buttons with "dark" and * "light" options. */ const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; From 8ad0b8a7264f22de9c2ce382c60bbd077e689828 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 11:48:02 +0530 Subject: [PATCH 030/164] rename themeName --> variantName --- scripts/build-plugins/rollup-plugin-build-themes.js | 4 ++-- src/platform/web/ThemeLoader.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index a3fd6c8f..53258f16 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -272,7 +272,7 @@ module.exports = function buildThemes(options) { * "light" options. */ const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; - defaultVariant.themeDisplayName = variantName; + defaultVariant.variantName = variantName; defaultVariant.id = themeId defaultVariant.cssLocation = assetMap.get(chunk.fileName).fileName; continue; @@ -297,7 +297,7 @@ module.exports = function buildThemes(options) { * treat it like any other variant. */ const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; - builtAssets[`${themeName} ${variant.themeDisplayName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + builtAssets[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; } manifest.source = { "built-assets": builtAssets, diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 2901cdf9..955d3b48 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -26,12 +26,12 @@ type DefaultVariant = { dark: { id: string; cssLocation: string; - themeDisplayName: string; + variantName: string; }; light: { id: string; cssLocation: string; - themeDisplayName: string; + variantName: string; }; } type ThemeInformation = NormalVariant | DefaultVariant; From 46d2792dac6c76425f32fbde2f9ea21c4e238d30 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 11:49:45 +0530 Subject: [PATCH 031/164] Modify comment --- src/platform/web/ThemeLoader.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 955d3b48..5bc38afa 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -34,6 +34,7 @@ type DefaultVariant = { variantName: string; }; } + type ThemeInformation = NormalVariant | DefaultVariant; export class ThemeLoader { @@ -57,7 +58,8 @@ export class ThemeLoader { /* After build has finished, the source section of each theme manifest contains `built-assets` which is a mapping from the theme-name to theme - details which includes the location of the CSS file. + information which includes the location of the CSS file. + (see type ThemeInformation above) */ Object.assign(this._themeMapping, body["source"]["built-assets"]); //Add the default-theme as an additional option to the mapping From e3235ea3eb79da19b93a74a75511339c3d861b1b Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 11:58:17 +0530 Subject: [PATCH 032/164] Rename themeName --> themeId --- src/platform/web/ThemeLoader.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index 5bc38afa..bd2d51b4 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -73,14 +73,14 @@ export class ThemeLoader { } } - setTheme(themeName: string, log?: ILogItem) { - this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeName}, () => { - const themeLocation = this._findThemeLocationFromId(themeName); + setTheme(themeId: string, log?: ILogItem) { + this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeId}, () => { + const themeLocation = this._findThemeLocationFromId(themeId); if (!themeLocation) { - throw new Error( `Cannot find theme location for theme "${themeName}"!`); + throw new Error( `Cannot find theme location for theme "${themeId}"!`); } this._platform.replaceStylesheet(themeLocation); - this._platform.settingsStorage.setString("theme", themeName); + this._platform.settingsStorage.setString("theme", themeId); }); } From efb1a674706973b9bbd93f9263d83f14e52eaddb Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 12:02:35 +0530 Subject: [PATCH 033/164] Make method name a verb --- src/domain/session/settings/SettingsViewModel.js | 2 +- src/platform/web/ui/session/settings/SettingsView.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/domain/session/settings/SettingsViewModel.js b/src/domain/session/settings/SettingsViewModel.js index bab72d3d..caaa2579 100644 --- a/src/domain/session/settings/SettingsViewModel.js +++ b/src/domain/session/settings/SettingsViewModel.js @@ -186,7 +186,7 @@ export class SettingsViewModel extends ViewModel { } } - themeOptionChanged(themeId) { + changeThemeOption(themeId) { if (themeId) { this.setTheme(themeId); } diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js index 06f98577..e77da911 100644 --- a/src/platform/web/ui/session/settings/SettingsView.js +++ b/src/platform/web/ui/session/settings/SettingsView.js @@ -158,13 +158,13 @@ export class SettingsView extends TemplateView { } optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name)); } - const select = t.select({ onChange: (e) => vm.themeOptionChanged(e.target.value) }, optionTags); + const select = t.select({ onChange: (e) => vm.changeThemeOption(e.target.value) }, optionTags); const radioButtons = t.form({ className: { hidden: () => select.options[select.selectedIndex].value !== "" }, onChange: (e) => { const selectedThemeName = select.options[select.selectedIndex].text; const themeId = vm.themeMapping[selectedThemeName][e.target.value].id; - vm.themeOptionChanged(themeId); + vm.changeThemeOption(themeId); } }, [ From 9e79b632a8e405857f80d9e6a6a040659bae5288 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 30 May 2022 12:06:23 +0530 Subject: [PATCH 034/164] Extract variable --- src/platform/web/ui/session/settings/SettingsView.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js index e77da911..14893aba 100644 --- a/src/platform/web/ui/session/settings/SettingsView.js +++ b/src/platform/web/ui/session/settings/SettingsView.js @@ -158,12 +158,18 @@ export class SettingsView extends TemplateView { } optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name)); } - const select = t.select({ onChange: (e) => vm.changeThemeOption(e.target.value) }, optionTags); + const select = t.select({ + onChange: (e) => { + const themeId = e.target.value; + vm.changeThemeOption(themeId) + } + }, optionTags); const radioButtons = t.form({ className: { hidden: () => select.options[select.selectedIndex].value !== "" }, onChange: (e) => { const selectedThemeName = select.options[select.selectedIndex].text; - const themeId = vm.themeMapping[selectedThemeName][e.target.value].id; + const colorScheme = e.target.value; + const themeId = vm.themeMapping[selectedThemeName][colorScheme].id; vm.changeThemeOption(themeId); } }, From 12a8e9424325ced7568ad7be21b3e50d3be6e340 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 31 May 2022 20:21:18 +0530 Subject: [PATCH 035/164] Move code into ThemeLoader --- .../rollup-plugin-build-themes.js | 43 +--------------- src/platform/web/ThemeLoader.ts | 51 ++++++++++++++++++- 2 files changed, 51 insertions(+), 43 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index 53258f16..8d05f58a 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -254,50 +254,9 @@ module.exports = function buildThemes(options) { const derivedVariables = compiledVariables["derived-variables"]; const icon = compiledVariables["icon"]; const builtAssets = {}; - let defaultDarkVariant = {}, defaultLightVariant = {}; - const themeName = manifest.name; for (const chunk of chunkArray) { const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); - const {name: variantName, default: isDefault, dark} = manifest.values.variants[variant]; - const themeId = `${name}-${variant}`; - const themeDisplayName = `${themeName} ${variantName}`; - if (isDefault) { - /** - * This is a default variant! - * We'll add these to the builtAssets (separately) keyed with just the - * theme-name (i.e "Element" instead of "Element Dark"). - * We need to be able to distinguish them from other variants! - * - * This allows us to render radio-buttons with "dark" and - * "light" options. - */ - const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; - defaultVariant.variantName = variantName; - defaultVariant.id = themeId - defaultVariant.cssLocation = assetMap.get(chunk.fileName).fileName; - continue; - } - // Non-default variants are keyed in builtAssets with "theme_name variant_name" - // eg: "Element Dark" - builtAssets[themeDisplayName] = { - cssLocation: assetMap.get(chunk.fileName).fileName, - id: themeId - }; - } - if (defaultDarkVariant.id && defaultLightVariant.id) { - /** - * As mentioned above, if there's both a default dark and a default light variant, - * add them to builtAsset separately. - */ - builtAssets[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; - } - else { - /** - * If only one default variant is found (i.e only dark default or light default but not both), - * treat it like any other variant. - */ - const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; - builtAssets[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; } manifest.source = { "built-assets": builtAssets, diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index bd2d51b4..ca7ef641 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -55,13 +55,14 @@ export class ThemeLoader { cache: true, }) .response(); + this._populateThemeMap(body); /* After build has finished, the source section of each theme manifest contains `built-assets` which is a mapping from the theme-name to theme information which includes the location of the CSS file. (see type ThemeInformation above) */ - Object.assign(this._themeMapping, body["source"]["built-assets"]); + // Object.assign(this._themeMapping, body["source"]["built-assets"]); //Add the default-theme as an additional option to the mapping const defaultThemeId = this.getDefaultTheme(); if (defaultThemeId) { @@ -73,6 +74,54 @@ export class ThemeLoader { } } + private _populateThemeMap(manifest) { + const builtAssets: Record = manifest.source?.["built-assets"]; + const themeName = manifest.name; + let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; + for (const [themeId, cssLocation] of Object.entries(builtAssets)) { + const variant = themeId.match(/.+-(.+)/)?.[1]; + const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!]; + const themeDisplayName = `${themeName} ${variantName}`; + if (isDefault) { + /** + * This is a default variant! + * We'll add these to the themeMapping (separately) keyed with just the + * theme-name (i.e "Element" instead of "Element Dark"). + * We need to be able to distinguish them from other variants! + * + * This allows us to render radio-buttons with "dark" and + * "light" options. + */ + const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; + defaultVariant.variantName = variantName; + defaultVariant.id = themeId + defaultVariant.cssLocation = cssLocation; + continue; + } + // Non-default variants are keyed in themeMapping with "theme_name variant_name" + // eg: "Element Dark" + this._themeMapping[themeDisplayName] = { + cssLocation, + id: themeId + }; + } + if (defaultDarkVariant.id && defaultLightVariant.id) { + /** + * As mentioned above, if there's both a default dark and a default light variant, + * add them to themeMapping separately. + */ + this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; + } + else { + /** + * If only one default variant is found (i.e only dark default or light default but not both), + * treat it like any other variant. + */ + const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + } + } + setTheme(themeId: string, log?: ILogItem) { this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeId}, () => { const themeLocation = this._findThemeLocationFromId(themeId); From dc2d1ce700de79d1eb89fa7293d88b232bf95d45 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 31 May 2022 20:21:36 +0530 Subject: [PATCH 036/164] Remove id --- src/platform/web/ui/css/themes/element/manifest.json | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json index 0858a05b..6c99e404 100644 --- a/src/platform/web/ui/css/themes/element/manifest.json +++ b/src/platform/web/ui/css/themes/element/manifest.json @@ -1,7 +1,6 @@ { "version": 1, "name": "Element", - "id": "element", "values": { "font-faces": [ { From 8de91291ddbeb42098f56ccef38f3ddca66fe448 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 2 Jun 2022 15:05:43 +0530 Subject: [PATCH 037/164] Add more methods to ThemeLoader --- src/platform/web/ThemeLoader.ts | 44 +++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index ca7ef641..f302bc0e 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -37,6 +37,11 @@ type DefaultVariant = { type ThemeInformation = NormalVariant | DefaultVariant; +export enum ColorSchemePreference { + Dark, + Light +}; + export class ThemeLoader { private _platform: Platform; private _themeMapping: Record; @@ -104,7 +109,7 @@ export class ThemeLoader { cssLocation, id: themeId }; - } + } if (defaultDarkVariant.id && defaultLightVariant.id) { /** * As mentioned above, if there's both a default dark and a default light variant, @@ -123,14 +128,14 @@ export class ThemeLoader { } setTheme(themeId: string, log?: ILogItem) { - this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeId}, () => { + this._platform.logger.wrapOrRun(log, { l: "change theme", id: themeId }, () => { const themeLocation = this._findThemeLocationFromId(themeId); if (!themeLocation) { - throw new Error( `Cannot find theme location for theme "${themeId}"!`); + throw new Error(`Cannot find theme location for theme "${themeId}"!`); } this._platform.replaceStylesheet(themeLocation); this._platform.settingsStorage.setString("theme", themeId); - }); + }); } get themeMapping(): Record { @@ -146,10 +151,11 @@ export class ThemeLoader { } getDefaultTheme(): string | undefined { - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - return this._platform.config["defaultTheme"].dark; - } else if (window.matchMedia("(prefers-color-scheme: light)").matches) { - return this._platform.config["defaultTheme"].light; + switch (this.preferredColorScheme) { + case ColorSchemePreference.Dark: + return this._platform.config["defaultTheme"].dark; + case ColorSchemePreference.Light: + return this._platform.config["defaultTheme"].light; } } @@ -166,4 +172,26 @@ export class ThemeLoader { } } } + + get preferredColorScheme(): ColorSchemePreference { + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + return ColorSchemePreference.Dark; + } + else if (window.matchMedia("(prefers-color-scheme: light)").matches) { + return ColorSchemePreference.Light; + } + throw new Error("Cannot find preferred colorscheme!"); + } + + async persistVariantToStorage(variant: string) { + await this._platform.settingsStorage.setString("theme-variant", variant); + } + + async getCurrentVariant(): Promise { + return await this._platform.settingsStorage.getString("theme-variant"); + } + + async removeVariantFromStorage(): Promise { + await this._platform.settingsStorage.remove("theme-variant"); + } } From b74f4b612bc8197b377c107149052cbd8bdffaa9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 2 Jun 2022 15:06:20 +0530 Subject: [PATCH 038/164] Change UI --- .../session/settings/SettingsViewModel.js | 17 ++++++ .../web/ui/session/settings/SettingsView.js | 56 +++++++++++-------- 2 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/domain/session/settings/SettingsViewModel.js b/src/domain/session/settings/SettingsViewModel.js index caaa2579..aae83fb6 100644 --- a/src/domain/session/settings/SettingsViewModel.js +++ b/src/domain/session/settings/SettingsViewModel.js @@ -51,6 +51,7 @@ export class SettingsViewModel extends ViewModel { this.maxSentImageSizeLimit = 4000; this.pushNotifications = new PushNotificationStatus(); this._activeTheme = undefined; + this._activeVariant = undefined; } get _session() { @@ -79,6 +80,7 @@ export class SettingsViewModel extends ViewModel { this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled(); if (!import.meta.env.DEV) { this._activeTheme = await this.platform.themeLoader.getActiveTheme(); + this._activeVariant = await this.platform.themeLoader.getCurrentVariant(); } this.emitChange(""); } @@ -139,6 +141,10 @@ export class SettingsViewModel extends ViewModel { return this._activeTheme; } + get activeVariant() { + return this._activeVariant; + } + setTheme(name) { this.platform.themeLoader.setTheme(name); } @@ -195,5 +201,16 @@ export class SettingsViewModel extends ViewModel { this.emitChange("themeOption"); } + get preferredColorScheme() { + return this.platform.themeLoader.preferredColorScheme; + } + + persistVariantToStorage(variant) { + this.platform.themeLoader.persistVariantToStorage(variant); + } + + removeVariantFromStorage() { + this.platform.themeLoader.removeVariantFromStorage(); + } } diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js index 14893aba..45178990 100644 --- a/src/platform/web/ui/session/settings/SettingsView.js +++ b/src/platform/web/ui/session/settings/SettingsView.js @@ -16,6 +16,7 @@ limitations under the License. import {TemplateView} from "../../general/TemplateView"; import {KeyBackupSettingsView} from "./KeyBackupSettingsView.js" +import {ColorSchemePreference} from "../../../ThemeLoader"; export class SettingsView extends TemplateView { render(t, vm) { @@ -142,38 +143,49 @@ export class SettingsView extends TemplateView { _themeOptions(t, vm) { const activeTheme = vm.activeTheme; const optionTags = []; - let isDarkSelected = null, isLightSelected = null; + const isDarkSelected = vm.activeVariant === "dark"; + const isLightSelected = vm.activeVariant === "light"; + // 1. render the dropdown containing the themes for (const [name, details] of Object.entries(vm.themeMapping)) { - let isSelected = null; - if (details.id === activeTheme) { - isSelected = true; - } - else if (details.dark?.id === activeTheme) { - isSelected = true; - isDarkSelected = true; - } - else if (details.light?.id === activeTheme) { - isSelected = true; - isLightSelected = true; - } + const isSelected = (details.id ?? details.dark?.id ?? details.light?.id) === activeTheme; optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name)); } const select = t.select({ onChange: (e) => { const themeId = e.target.value; - vm.changeThemeOption(themeId) - } - }, optionTags); - const radioButtons = t.form({ - className: { hidden: () => select.options[select.selectedIndex].value !== "" }, - onChange: (e) => { - const selectedThemeName = select.options[select.selectedIndex].text; - const colorScheme = e.target.value; - const themeId = vm.themeMapping[selectedThemeName][colorScheme].id; + if (themeId) { + /* if the