From 4b8aac8a323184f4b94d9e005613af3c739004eb Mon Sep 17 00:00:00 2001 From: penge Date: Sat, 2 Dec 2023 23:55:52 +0100 Subject: [PATCH 1/4] Lint files outside src - update tsconfig.json --- .eslintignore | 5 - build.ts | 2 +- jest.config.ts | 4 +- package-lock.json | 263 +++++++++++++++++++++------------------------- package.json | 2 +- tsconfig.json | 12 ++- 6 files changed, 134 insertions(+), 154 deletions(-) diff --git a/.eslintignore b/.eslintignore index 5714da99..3659f1ad 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,7 +1,2 @@ node_modules/* dist/* -register.js -jest.config.ts -jest.setup.ts -build.ts -set-client-id.ts diff --git a/build.ts b/build.ts index 645b39ad..64b88b3e 100644 --- a/build.ts +++ b/build.ts @@ -22,5 +22,5 @@ esbuild.build({ }, minify: process.env.NODE_ENV === "production", sourcemap: process.env.NODE_ENV === "development" ? "inline" : false, - logLevel: "info" + logLevel: "info", }); diff --git a/jest.config.ts b/jest.config.ts index 9ca407e9..439474f4 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -4,10 +4,10 @@ const config: Config.InitialOptions = { preset: "ts-jest", testEnvironment: "jsdom", testMatch: [ - "**/__tests__/**/*.test.ts?(x)" + "**/__tests__/**/*.test.ts?(x)", ], moduleDirectories: ["node_modules", "src"], - setupFiles: ["/jest.setup.ts"] + setupFiles: ["/jest.setup.ts"], }; export default config; diff --git a/package-lock.json b/package-lock.json index 2bd1cad7..031f899d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "clsx": "^2.0.0", + "esbuild": "^0.19.8", "fflate": "^0.8.1", "preact": "10.18.1" }, @@ -22,7 +23,6 @@ "@typescript-eslint/parser": "^6.7.5", "chokidar-cli": "^3.0.0", "copyfiles": "^2.4.1", - "esbuild": "^0.19.4", "eslint": "^8.51.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", @@ -66,12 +66,12 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", - "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", "dev": true, "dependencies": { - "@babel/highlight": "^7.22.13", + "@babel/highlight": "^7.23.4", "chalk": "^2.4.2" }, "engines": { @@ -198,12 +198,12 @@ } }, "node_modules/@babel/generator": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", - "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz", + "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==", "dev": true, "dependencies": { - "@babel/types": "^7.23.0", + "@babel/types": "^7.23.5", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -352,9 +352,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", "dev": true, "engines": { "node": ">=6.9.0" @@ -393,9 +393,9 @@ } }, "node_modules/@babel/highlight": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", - "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", @@ -478,9 +478,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", + "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -693,19 +693,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", - "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz", + "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.0", + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.5", "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.0", - "@babel/types": "^7.23.0", + "@babel/parser": "^7.23.5", + "@babel/types": "^7.23.5", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -723,12 +723,12 @@ } }, "node_modules/@babel/types": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", - "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", + "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", "dev": true, "dependencies": { - "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, @@ -765,13 +765,12 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.4.tgz", - "integrity": "sha512-uBIbiYMeSsy2U0XQoOGVVcpIktjLMEKa7ryz2RLr7L/vTnANNEsPVAh4xOv7ondGz6ac1zVb0F8Jx20rQikffQ==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz", + "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==", "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -781,13 +780,12 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.4.tgz", - "integrity": "sha512-mRsi2vJsk4Bx/AFsNBqOH2fqedxn5L/moT58xgg51DjX1la64Z3Npicut2VbhvDFO26qjWtPMsVxCd80YTFVeg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz", + "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==", "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -797,13 +795,12 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.4.tgz", - "integrity": "sha512-4iPufZ1TMOD3oBlGFqHXBpa3KFT46aLl6Vy7gwed0ZSYgHaZ/mihbYb4t7Z9etjkC9Al3ZYIoOaHrU60gcMy7g==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz", + "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "android" @@ -813,13 +810,12 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.4.tgz", - "integrity": "sha512-Lviw8EzxsVQKpbS+rSt6/6zjn9ashUZ7Tbuvc2YENgRl0yZTktGlachZ9KMJUsVjZEGFVu336kl5lBgDN6PmpA==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz", + "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==", "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -829,13 +825,12 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.4.tgz", - "integrity": "sha512-YHbSFlLgDwglFn0lAO3Zsdrife9jcQXQhgRp77YiTDja23FrC2uwnhXMNkAucthsf+Psr7sTwYEryxz6FPAVqw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz", + "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -845,13 +840,12 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.4.tgz", - "integrity": "sha512-vz59ijyrTG22Hshaj620e5yhs2dU1WJy723ofc+KUgxVCM6zxQESmWdMuVmUzxtGqtj5heHyB44PjV/HKsEmuQ==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz", + "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==", "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -861,13 +855,12 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.4.tgz", - "integrity": "sha512-3sRbQ6W5kAiVQRBWREGJNd1YE7OgzS0AmOGjDmX/qZZecq8NFlQsQH0IfXjjmD0XtUYqr64e0EKNFjMUlPL3Cw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz", + "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -877,13 +870,12 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.4.tgz", - "integrity": "sha512-z/4ArqOo9EImzTi4b6Vq+pthLnepFzJ92BnofU1jgNlcVb+UqynVFdoXMCFreTK7FdhqAzH0vmdwW5373Hm9pg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz", + "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==", "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -893,13 +885,12 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.4.tgz", - "integrity": "sha512-ZWmWORaPbsPwmyu7eIEATFlaqm0QGt+joRE9sKcnVUG3oBbr/KYdNE2TnkzdQwX6EDRdg/x8Q4EZQTXoClUqqA==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz", + "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==", "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -909,13 +900,12 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.4.tgz", - "integrity": "sha512-EGc4vYM7i1GRUIMqRZNCTzJh25MHePYsnQfKDexD8uPTCm9mK56NIL04LUfX2aaJ+C9vyEp2fJ7jbqFEYgO9lQ==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz", + "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==", "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "linux" @@ -925,13 +915,12 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.4.tgz", - "integrity": "sha512-WVhIKO26kmm8lPmNrUikxSpXcgd6HDog0cx12BUfA2PkmURHSgx9G6vA19lrlQOMw+UjMZ+l3PpbtzffCxFDRg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz", + "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==", "cpu": [ "loong64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -941,13 +930,12 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.4.tgz", - "integrity": "sha512-keYY+Hlj5w86hNp5JJPuZNbvW4jql7c1eXdBUHIJGTeN/+0QFutU3GrS+c27L+NTmzi73yhtojHk+lr2+502Mw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz", + "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==", "cpu": [ "mips64el" ], - "dev": true, "optional": true, "os": [ "linux" @@ -957,13 +945,12 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.4.tgz", - "integrity": "sha512-tQ92n0WMXyEsCH4m32S21fND8VxNiVazUbU4IUGVXQpWiaAxOBvtOtbEt3cXIV3GEBydYsY8pyeRMJx9kn3rvw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz", + "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==", "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -973,13 +960,12 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.4.tgz", - "integrity": "sha512-tRRBey6fG9tqGH6V75xH3lFPpj9E8BH+N+zjSUCnFOX93kEzqS0WdyJHkta/mmJHn7MBaa++9P4ARiU4ykjhig==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz", + "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==", "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -989,13 +975,12 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.4.tgz", - "integrity": "sha512-152aLpQqKZYhThiJ+uAM4PcuLCAOxDsCekIbnGzPKVBRUDlgaaAfaUl5NYkB1hgY6WN4sPkejxKlANgVcGl9Qg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz", + "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==", "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1005,13 +990,12 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.4.tgz", - "integrity": "sha512-Mi4aNA3rz1BNFtB7aGadMD0MavmzuuXNTaYL6/uiYIs08U7YMPETpgNn5oue3ICr+inKwItOwSsJDYkrE9ekVg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz", + "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1021,13 +1005,12 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.4.tgz", - "integrity": "sha512-9+Wxx1i5N/CYo505CTT7T+ix4lVzEdz0uCoYGxM5JDVlP2YdDC1Bdz+Khv6IbqmisT0Si928eAxbmGkcbiuM/A==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz", + "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "netbsd" @@ -1037,13 +1020,12 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.4.tgz", - "integrity": "sha512-MFsHleM5/rWRW9EivFssop+OulYVUoVcqkyOkjiynKBCGBj9Lihl7kh9IzrreDyXa4sNkquei5/DTP4uCk25xw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz", + "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -1053,13 +1035,12 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.4.tgz", - "integrity": "sha512-6Xq8SpK46yLvrGxjp6HftkDwPP49puU4OF0hEL4dTxqCbfx09LyrbUj/D7tmIRMj5D5FCUPksBbxyQhp8tmHzw==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz", + "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "sunos" @@ -1069,13 +1050,12 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.4.tgz", - "integrity": "sha512-PkIl7Jq4mP6ke7QKwyg4fD4Xvn8PXisagV/+HntWoDEdmerB2LTukRZg728Yd1Fj+LuEX75t/hKXE2Ppk8Hh1w==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz", + "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==", "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1085,13 +1065,12 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.4.tgz", - "integrity": "sha512-ga676Hnvw7/ycdKB53qPusvsKdwrWzEyJ+AtItHGoARszIqvjffTwaaW3b2L6l90i7MO9i+dlAW415INuRhSGg==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz", + "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==", "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1101,13 +1080,12 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.4.tgz", - "integrity": "sha512-HP0GDNla1T3ZL8Ko/SHAS2GgtjOg+VmWnnYLhuTksr++EnduYB0f3Y2LzHsUwb2iQ13JGoY6G3R8h6Du/WG6uA==", + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz", + "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==", "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -3437,10 +3415,9 @@ } }, "node_modules/esbuild": { - "version": "0.19.4", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.4.tgz", - "integrity": "sha512-x7jL0tbRRpv4QUyuDMjONtWFciygUxWaUM1kMX2zWxI0X2YWOt7MSA0g4UdeSiHM8fcYVzpQhKYOycZwxTdZkA==", - "dev": true, + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz", + "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==", "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -3449,28 +3426,28 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/android-arm": "0.19.4", - "@esbuild/android-arm64": "0.19.4", - "@esbuild/android-x64": "0.19.4", - "@esbuild/darwin-arm64": "0.19.4", - "@esbuild/darwin-x64": "0.19.4", - "@esbuild/freebsd-arm64": "0.19.4", - "@esbuild/freebsd-x64": "0.19.4", - "@esbuild/linux-arm": "0.19.4", - "@esbuild/linux-arm64": "0.19.4", - "@esbuild/linux-ia32": "0.19.4", - "@esbuild/linux-loong64": "0.19.4", - "@esbuild/linux-mips64el": "0.19.4", - "@esbuild/linux-ppc64": "0.19.4", - "@esbuild/linux-riscv64": "0.19.4", - "@esbuild/linux-s390x": "0.19.4", - "@esbuild/linux-x64": "0.19.4", - "@esbuild/netbsd-x64": "0.19.4", - "@esbuild/openbsd-x64": "0.19.4", - "@esbuild/sunos-x64": "0.19.4", - "@esbuild/win32-arm64": "0.19.4", - "@esbuild/win32-ia32": "0.19.4", - "@esbuild/win32-x64": "0.19.4" + "@esbuild/android-arm": "0.19.8", + "@esbuild/android-arm64": "0.19.8", + "@esbuild/android-x64": "0.19.8", + "@esbuild/darwin-arm64": "0.19.8", + "@esbuild/darwin-x64": "0.19.8", + "@esbuild/freebsd-arm64": "0.19.8", + "@esbuild/freebsd-x64": "0.19.8", + "@esbuild/linux-arm": "0.19.8", + "@esbuild/linux-arm64": "0.19.8", + "@esbuild/linux-ia32": "0.19.8", + "@esbuild/linux-loong64": "0.19.8", + "@esbuild/linux-mips64el": "0.19.8", + "@esbuild/linux-ppc64": "0.19.8", + "@esbuild/linux-riscv64": "0.19.8", + "@esbuild/linux-s390x": "0.19.8", + "@esbuild/linux-x64": "0.19.8", + "@esbuild/netbsd-x64": "0.19.8", + "@esbuild/openbsd-x64": "0.19.8", + "@esbuild/sunos-x64": "0.19.8", + "@esbuild/win32-arm64": "0.19.8", + "@esbuild/win32-ia32": "0.19.8", + "@esbuild/win32-x64": "0.19.8" } }, "node_modules/escalade": { diff --git a/package.json b/package.json index 41c22975..e1022a2f 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@typescript-eslint/parser": "^6.7.5", "chokidar-cli": "^3.0.0", "copyfiles": "^2.4.1", - "esbuild": "^0.19.4", "eslint": "^8.51.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", @@ -48,6 +47,7 @@ }, "dependencies": { "clsx": "^2.0.0", + "esbuild": "^0.19.8", "fflate": "^0.8.1", "preact": "10.18.1" } diff --git a/tsconfig.json b/tsconfig.json index 7d1e4ebc..d8ac2008 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,20 @@ { - "include": ["./src/**/*"], + "include": [ + "./src/**/*", + "./env/set-client-id.ts", + "./jest.config.ts", + "./jest.setup.ts", + "./register.js", + "./build.ts" + ], "compilerOptions": { + "lib": ["ES2022"], "module": "ES2022", "target": "ES2022", "moduleResolution": "node", "outDir": "./dist", - "rootDir": "./src", + "rootDir": "./", "baseUrl": "./src", "sourceMap": true, From 41e3d3bf405c7271e208094d98582033fdb4f2e5 Mon Sep 17 00:00:00 2001 From: penge Date: Sat, 16 Sep 2023 17:11:12 +0200 Subject: [PATCH 2/4] Update .bar styles - use same :hover for buttons in sidebar and toolbar - merge #toolbar and .bar styles into .bar (related to previous point) - make sure .button content (icon, text) is aligned vertically - fix width of "Auto" button by making sure it has .auto - move #RAW and #RAW-ACTIVE button to the right before #INFO button, making #B button the first one from left - update #RAW and #RAW-ACTIVE - use default pointer for #INFO (it doesn't have action) --- public/notes.css | 93 ++++++++++++++++---------------- public/themes/dark.css | 11 ++-- public/themes/light.css | 11 ++-- src/notes/components/Toolbar.tsx | 30 +++++++---- 4 files changed, 74 insertions(+), 71 deletions(-) diff --git a/public/notes.css b/public/notes.css index c26fceaf..41d485e9 100644 --- a/public/notes.css +++ b/public/notes.css @@ -136,34 +136,63 @@ hr { .bar { display: flex; + align-items: center; flex-wrap: wrap; user-select: none; box-sizing: border-box; border-top: 1px solid var(--bar-border-color); + background: var(--background-color); padding: 0 .25em; - align-items: center; +} + +.bar.submenu { + background: var(--bar-submenu-background-color); } .bar > .button { + display: flex; + flex-shrink: 0; font-weight: bold; padding: .5em; margin: .5em .25em; border-radius: 3px; height: 1.2em; width: 1em; - flex-shrink: 0; } -.bar > .button.last { - margin-left: auto; +.bar > .button > * { + pointer-events: none; } .bar > .button.auto { width: auto; } -.bar > .button > * { - pointer-events: none; +.bar > .button.last { + margin-left: auto; +} + +.bar > .button:not(.letter) { + color: var(--svg-fill-color); +} + +.bar > .button.active, +.bar > .button:hover:not(.plain) { + background: var(--bar-button-hover-background-color); + color: var(--bar-button-hover-color); +} + +.bar > .button.active > svg, +.bar > .button:hover:not(.plain) > svg { + fill: var(--bar-button-hover-color); +} + +.bar > .button { cursor: pointer; } +.bar > .button.wide { margin-right: 1.5em; } +.bar > .button.rotate90 > svg { transform: rotate(90deg); } +.bar > .button.letter { + display: inline-block; + text-align: center; } /* Sidebar */ @@ -563,55 +592,25 @@ body.with-command-palette #toolbar { #toolbar { transform: translateY(100%); - background: var(--background-color); - color: var(--toolbar-button-color); -} - -#toolbar .button:not(.letter) { - color: var(--svg-fill-color); -} - -#toolbar .button.active, -#toolbar .button:hover:not(.plain) { - background: var(--toolbar-button-hover-background-color); - color: var(--toolbar-button-hover-color); -} - -#toolbar .button.active > svg, -#toolbar .button:hover:not(.plain) > svg { - fill: var(--toolbar-button-hover-color); } body:not(.with-toolbar) #toolbar { display: none; } body.with-toolbar #toolbar { transform: translateY(0); } -#toolbar .button { cursor: pointer; } -#toolbar .button.wide { margin-right: 1.5em; } -#toolbar .button.rotate90 > svg { transform: rotate(90deg); } - -#H1 > span { font-size: 1em; } -#H2 > span { font-size: .85em; } -#H3 > span { font-size: .65em; } - -#toolbar > .submenu { - background: var(--toolbar-submenu-background-color); -} - -#toolbar .button.letter { - display: inline-block; - text-align: center; +#toolbar .button#H1, +#toolbar .button#H2, +#toolbar .button#H3 { + display: flex; + align-items: baseline; } +#toolbar .button#H1 > span { font-size: 1em; } +#toolbar .button#H2 > span { font-size: .85em; } +#toolbar .button#H3 > span { font-size: .65em; } #toolbar .button#RAW, #toolbar .button#RAW-ACTIVE { width: auto; - font-size: .7em; - margin: 0 1em; -} - -#toolbar .button#RAW { - background: #9e9e9e; - color: white; + font-size: .8em; } #toolbar .button#RAW-ACTIVE { @@ -619,6 +618,10 @@ body.with-toolbar #toolbar { transform: translateY(0); } color: white; } +#toolbar .button#INFO { + cursor: default; +} + /* Tooltip */ #tooltip-container { diff --git a/public/themes/dark.css b/public/themes/dark.css index 58590634..adcb7ca7 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -69,14 +69,9 @@ /* Bar */ --bar-border-color: #454545; - - - /* Toolbar */ - - --toolbar-button-color: #626262; - --toolbar-button-hover-background-color: #222; - --toolbar-button-hover-color: white; - --toolbar-submenu-background-color: #121212; + --bar-button-hover-background-color: #222; + --bar-button-hover-color: white; + --bar-submenu-background-color: #121212; /* Tooltip */ diff --git a/public/themes/light.css b/public/themes/light.css index 829f714b..78c659f0 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -69,14 +69,9 @@ /* Bar */ --bar-border-color: silver; - - - /* Toolbar */ - - --toolbar-button-color: black; - --toolbar-button-hover-background-color: #111; - --toolbar-button-hover-color: white; - --toolbar-submenu-background-color: #f5f5f5; + --bar-button-hover-background-color: #111; + --bar-button-hover-color: white; + --bar-submenu-background-color: #f5f5f5; /* Tooltip */ diff --git a/src/notes/components/Toolbar.tsx b/src/notes/components/Toolbar.tsx index 9e8762f7..03203c29 100644 --- a/src/notes/components/Toolbar.tsx +++ b/src/notes/components/Toolbar.tsx @@ -97,11 +97,11 @@ const Toolbar = ({
-
RAW
+
RAW
 : ""}> -
+
@@ -205,7 +205,7 @@ const Toolbar = ({ {HIGHLIGHT_COLORS.map((color) => (
highlight(`my-notes-text-color-${color}`, callback)} > A @@ -213,19 +213,25 @@ const Toolbar = ({ ))} -
highlight("my-notes-text-color-auto", callback)}>Auto
+
highlight("my-notes-text-color-auto", callback)} + > + Auto +
-
highlight("my-notes-highlight", callback)}>Hi
+
highlight("my-notes-highlight", callback)} + > + Hi +
)}
- -
RAW
- -
@@ -406,8 +412,12 @@ const Toolbar = ({
+ +
RAW
+ + : ""}> -
+
From 9e9638526b947279a0d261c7d321257af5b9cefe Mon Sep 17 00:00:00 2001 From: penge Date: Sun, 22 Oct 2023 17:07:26 +0200 Subject: [PATCH 3/4] Update Options styles - fix .font-area rendering (missing "key") - update dark.css - add fallbacks for --slider-* --- public/options.css | 46 +++++++++++------- public/themes/dark.css | 10 ++-- src/i18n/en.json | 4 +- src/options.tsx | 12 ++++- src/options/ExportImport.tsx | 65 ++++++++++++------------- src/options/Font.tsx | 92 ++++++++++++++++++------------------ src/options/helpers/fonts.ts | 15 +++++- 7 files changed, 136 insertions(+), 108 deletions(-) diff --git a/public/options.css b/public/options.css index 958673ea..8b5a2ca6 100644 --- a/public/options.css +++ b/public/options.css @@ -17,19 +17,23 @@ input, select { font-size: inherit; } -input[type="radio"], input[type='checkbox'] { +input[type="radio"], +input[type='checkbox'] { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin: 0 10px 0 2px; } +#dark input[type="radio"], +#dark input[type='checkbox'] { + filter: invert(1) hue-rotate(180deg); +} + .separator { padding: 0 12px; } .bold { font-weight: bold; } .space-top { margin-top: 1em; } .space-left { margin-left: 1em; } -.space-right-small { margin-right: .5em; } -.space-bottom-small { margin-bottom: .5em; } .disabled { opacity: .3; @@ -39,12 +43,27 @@ input[type="radio"], input[type='checkbox'] { /* Inputs */ +.inputs { + display: flex; + flex-direction: column; + max-width: 500px; +} + +.inputs > [type=submit] { + margin-top: .25em; + align-self: flex-end; +} + +.buttons > .button { + margin-right: .5em; + margin-bottom: .5em; +} + .button { cursor: pointer; } .button, .input, .select { - max-width: 500px; box-sizing: content-box; outline: none; border: 1px solid silver; @@ -106,34 +125,25 @@ body#dark .comment { #google-fonts-area ol { margin-top: 0; } #google-fonts-area ol li { line-height: 2em; } -#google-fonts-area .input { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -#google-fonts-area .button { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - /* Font size */ .slider { + appearance: none; -webkit-appearance: none; width: 100%; height: 3px; border-radius: 3px; outline: none; - background: var(--slider-background-color); + background: var(--slider-background-color, #d3d3d3); } .slider::-webkit-slider-thumb { -webkit-appearance: none; border-radius: 50%; cursor: pointer; - background: var(--slider-thumb-background-color); - width: var(--slider-thumb-size); - height: var(--slider-thumb-size); + background: var(--slider-thumb-background-color, black); + width: var(--slider-thumb-size, 15px); + height: var(--slider-thumb-size, 15px); } /* With comment */ diff --git a/public/themes/dark.css b/public/themes/dark.css index adcb7ca7..7a6f8340 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -17,14 +17,14 @@ --background-color: #121212; --text-color: #bcbcbc; - --link-color: white; + --link-color: #bcbcbc; --svg-fill-color: #626262; --horizontal-rule: 1px solid #3d3d3d; /* Notifications */ - --notification-border-color: transparent; + --notification-border-color: #454545; /* Overlay */ @@ -115,9 +115,9 @@ --keyboard-shortcut-text-color: white; --comment-background-color: #222; - --comment-text-color: white; + --comment-text-color: #d6d6d6; - --slider-background-color: white; - --slider-thumb-background-color: white; + --slider-background-color: #d6d6d6; + --slider-thumb-background-color: #d6d6d6; --slider-thumb-size: 16px; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 4f61fc2d..808ce92b 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -104,9 +104,9 @@ "Font example": "The quick brown fox jumps over the lazy dog ({{font}})", "Google Fonts": { "step1": "Open {{website}} to see the available fonts", - "step2": "Type in the Font Name, e.g.: Roboto Mono", + "step2": "Type in the Font Name (e.g.: Roboto Mono)", "step3": "Click Apply to use the font", - "placeholder": "Font Name (e.g. Roboto Mono)" + "placeholder": "Font Name (e.g.: Roboto Mono)" }, "Apply": "Apply", "Applied": "Applied", diff --git a/src/options.tsx b/src/options.tsx index 86e9eaaa..5121b9b9 100644 --- a/src/options.tsx +++ b/src/options.tsx @@ -22,7 +22,8 @@ import { } from "shared/storage/schema"; import { setTheme as setThemeCore } from "themes/set-theme"; -const Options = (): h.JSX.Element => { +const Options = (): h.JSX.Element | null => { + const [initialized, setInitialized] = useState(false); const [os, setOs] = useState(undefined); const [version] = useState(chrome.runtime.getManifest().version); const [notesCount, setNotesCount] = useState(0); @@ -80,6 +81,9 @@ const Options = (): h.JSX.Element => { // Sync setSync(local.sync); setAutoSync(local.autoSync); + + // Initialized + setInitialized(true); }); chrome.storage.onChanged.addListener((changes, areaName) => { @@ -145,11 +149,15 @@ const Options = (): h.JSX.Element => { } }, [theme, customTheme]); + if (!initialized) { + return null; + } + return (

My Notes

- <__Font font={font} /> + {font && <__Font font={font} />} <__Size size={size} /> <__NotesOrder notesOrder={notesOrder} /> <__Theme theme={theme} /> diff --git a/src/options/ExportImport.tsx b/src/options/ExportImport.tsx index e9d8843f..1fa1ea59 100644 --- a/src/options/ExportImport.tsx +++ b/src/options/ExportImport.tsx @@ -30,7 +30,6 @@ interface ExportImportProps { const ExportImport = ({ canExport }: ExportImportProps): h.JSX.Element => { const [lockedExport, setLockedExport] = useState(false); - const [commonButtonClasses] = useState(["bold", "button", "space-bottom-small space-right-small"]); const textRef = useRef(null); const zipRef = useRef(null); @@ -46,37 +45,39 @@ const ExportImport = ({ canExport }: ExportImportProps): h.JSX.Element => { {/* Buttons */} - { - if (!canExport || lockedExport) { - return; - } - - setLockedExport(true); - exportNotes(); - window.setTimeout(() => setLockedExport(false), 1000); - }} - /> - - textRef.current?.click()} - /> - - zipRef.current?.click()} - /> +
+ { + if (!canExport || lockedExport) { + return; + } + + setLockedExport(true); + exportNotes(); + window.setTimeout(() => setLockedExport(false), 1000); + }} + /> + + textRef.current?.click()} + /> + + zipRef.current?.click()} + /> +
{/* File Inputs */} diff --git a/src/options/Font.tsx b/src/options/Font.tsx index b5ea2aa4..4ade37ee 100644 --- a/src/options/Font.tsx +++ b/src/options/Font.tsx @@ -3,18 +3,18 @@ import { useState, useEffect } from "preact/hooks"; import clsx from "clsx"; import { RegularFont, GoogleFont } from "shared/storage/schema"; import { - FontFamily, fontFamilies, ideizeFont, getGoogleFontHref, + FontFamily, fontFamilies, findFontFamily, getGoogleFontName, getGoogleFontHref, ideizeFont, } from "options/helpers/fonts"; import { t, tString } from "i18n"; interface FontProps { - font?: RegularFont | GoogleFont + font: RegularFont | GoogleFont } const Font = ({ font }: FontProps): h.JSX.Element => { - const [fontFamily, setFontFamily] = useState(undefined); + const [fontFamily, setFontFamily] = useState(findFontFamily(font)); - const [googleFontName, setGoogleFontName] = useState(""); + const [googleFontName, setGoogleFontName] = useState(getGoogleFontName(font)); const [googleSubmitButtonText, setGoogleSubmitButtonText] = useState(tString("Apply")); useEffect(() => { @@ -22,12 +22,8 @@ const Font = ({ font }: FontProps): h.JSX.Element => { return; } - setFontFamily( - fontFamilies.find((family) => family.id === (font as RegularFont).genericFamily) - || fontFamilies.find((family) => family.id === "google-fonts"), - ); - - setGoogleFontName((font && (font as GoogleFont).href) ? (font as GoogleFont).name : ""); + setFontFamily(findFontFamily(font)); + setGoogleFontName(getGoogleFontName(font)); }, [font]); return ( @@ -47,7 +43,7 @@ const Font = ({ font }: FontProps): h.JSX.Element => { setFontFamily(fontFamilies.find((item) => item.id === family.id))} + onClick={() => setFontFamily(fontFamilies.find((item) => family.id === item.id) as FontFamily)} > {family.name} @@ -58,7 +54,7 @@ const Font = ({ font }: FontProps): h.JSX.Element => { {/* Radio buttons for the current font family (except Google Fonts) */} {fontFamily && fontFamily.fonts && ( -
+
{fontFamily.fonts?.map((commonFontName) => (
{ {/* Google Fonts */} {fontFamily && !fontFamily.fonts && ( -
+
  1. {t("Google Fonts.step1", { website: "https://fonts.google.com" })}
  2. {t("Google Fonts.step2")}
  3. {t("Google Fonts.step3")}
- { - setGoogleFontName((event.target as HTMLInputElement).value); - setGoogleSubmitButtonText(tString("Apply")); - }} - /> - { - const trimmedGoogleFontName = googleFontName.trim(); - if (!trimmedGoogleFontName || (trimmedGoogleFontName === font?.name)) { - return; - } +
+ { + setGoogleFontName((event.target as HTMLInputElement).value); + setGoogleSubmitButtonText(tString("Apply")); + }} + /> + { + const trimmedGoogleFontName = googleFontName.trim(); + if (!trimmedGoogleFontName || (trimmedGoogleFontName === font?.name)) { + return; + } - const googleFont: GoogleFont = { - id: ideizeFont(trimmedGoogleFontName), - name: trimmedGoogleFontName, - fontFamily: trimmedGoogleFontName, - href: getGoogleFontHref(trimmedGoogleFontName), - }; + const googleFont: GoogleFont = { + id: ideizeFont(trimmedGoogleFontName), + name: trimmedGoogleFontName, + fontFamily: trimmedGoogleFontName, + href: getGoogleFontHref(trimmedGoogleFontName), + }; - fetch(googleFont.href, { method: "HEAD" }).then(() => { - chrome.storage.local.set({ font: googleFont }); - setGoogleFontName(trimmedGoogleFontName); - setGoogleSubmitButtonText(tString("Applied")); - }).catch(() => { - setGoogleSubmitButtonText(tString("Font Name Doesn't Exist")); - }); - }} - /> + fetch(googleFont.href, { method: "HEAD" }).then(() => { + chrome.storage.local.set({ font: googleFont }); + setGoogleFontName(trimmedGoogleFontName); + setGoogleSubmitButtonText(tString("Applied")); + }).catch(() => { + setGoogleSubmitButtonText(tString("Font Name Doesn't Exist")); + }); + }} + /> +
)} diff --git a/src/options/helpers/fonts.ts b/src/options/helpers/fonts.ts index 8ba9fa02..94734857 100644 --- a/src/options/helpers/fonts.ts +++ b/src/options/helpers/fonts.ts @@ -1,3 +1,5 @@ +import { RegularFont, GoogleFont } from "shared/storage/schema"; + export interface FontFamily { id: string name: string @@ -47,8 +49,14 @@ export const fontFamilies: FontFamily[] = [ }, ]; -// "Roboto Mono" -> "roboto-mono" -export const ideizeFont = (fontName: string): string => fontName.toLowerCase().replace(/\s/g, "-"); +export const findFontFamily = (font: RegularFont | GoogleFont): FontFamily => ( + fontFamilies.find((family) => family.id === (font as RegularFont).genericFamily) + || fontFamilies.find((family) => family.id === "google-fonts") +) as FontFamily; + +export const getGoogleFontName = (font: RegularFont | GoogleFont): string => ( + (font as GoogleFont).href ? (font as GoogleFont).name : "" +); export const getGoogleFontHref = (fontName: string): string => { // "Roboto Mono" -> "Roboto+Mono" @@ -60,3 +68,6 @@ export const getGoogleFontHref = (fontName: string): string => { const href = `https://fonts.googleapis.com/css?family=${family}:400,700&display=swap`; return href; }; + +// "Roboto Mono" -> "roboto-mono" +export const ideizeFont = (fontName: string): string => fontName.toLowerCase().replace(/\s/g, "-"); From f332b6abbdc7cb42b2fb2b28f82246635bdc2443 Mon Sep 17 00:00:00 2001 From: penge Date: Sun, 3 Dec 2023 16:24:47 +0100 Subject: [PATCH 4/4] Fix theme flickering on page load - improve how theme is loaded, use localStorage if possible - apply Custom theme to Options page as well - set html[data-page] to allow page-specific customization - use template.html to create notes.html and options.html - update README --- README.md | 22 ++++--- build.ts | 7 +++ public/options.html | 16 ----- public/themes/shared.css | 1 - src/notes.tsx | 31 ++-------- src/options.tsx | 17 ------ public/notes.html => src/template.html | 8 ++- src/themes/__tests__/set-theme.test.ts | 85 -------------------------- src/themes/__tests__/themes.test.ts | 26 ++++---- src/themes/custom/custom.tsx | 4 +- src/themes/init.ts | 52 ++++++++++++++++ src/themes/set-theme.ts | 55 ----------------- 12 files changed, 101 insertions(+), 223 deletions(-) delete mode 100644 public/options.html rename public/notes.html => src/template.html (62%) delete mode 100644 src/themes/__tests__/set-theme.test.ts create mode 100644 src/themes/init.ts delete mode 100644 src/themes/set-theme.ts diff --git a/README.md b/README.md index 358515e0..a724d988 100644 --- a/README.md +++ b/README.md @@ -88,10 +88,12 @@ Custom theme allows you to customize My Notes styles in many ways. To use a Custom theme, open Options, select **"Custom"** theme, and click on the **"Customize"** button to start creating your own theme. -To start, paste into the editor content of [light.css](public/themes/light.css) or [dark.css](public/themes/dark.css). +To start, either copy and paste into the editor the content of [light.css](public/themes/light.css) or [dark.css](public/themes/dark.css), or use CSS `@import` to import the theme you would like your Custom theme to be based on. + Then, modify CSS variables as you like to change background colors, text colors, etc. You can add any valid CSS as well to make further changes. -Click on the **"Save"** button to save the custom theme. + +Click on the **"Save"** button to save the Custom theme.

@@ -227,12 +229,10 @@ src/ # - Registers the ways to open My Notes (icon click, keyboard shortcut) # - Registers events to trigger Google Drive Sync from My Notes - dom/ # Helpers to get DOM elements + i18n/ # Internationalization (English) integration/ # Integration tests for Google Drive Sync - messages/ # Communication between My Notes and background script - notes/ # Everything related to Notes # - Create/Rename/Delete notes; Note editing, Note saving # - Toolbar @@ -249,11 +249,14 @@ src/ # - Helpers for Chrome Storage # - Default values (Notes, Options) + svg/ # SVG images for Toolbar + themes/ # Light, Dark, Custom - background.ts # Main script for background page + background.ts # Main script for service worker notes.ts # Main script for notes options.ts # Main script for options + template.html # Template for notes.html and options.html public/ # All public files (images, icons, HTML, CSS) copied to dist/ @@ -264,7 +267,8 @@ public/ # All public files (images, icons, HTML, CSS) copied to dist .gitignore # Files excluded from Git jest.config.ts # Jest configuration -tsconfig.json # Typescript configuration +jest.setup.ts # Jest setup +tsconfig.json # TypeScript configuration package-lock.json package.json @@ -272,7 +276,8 @@ package.json LICENSE # MIT manifest.json # Main extension file -build.ts # Produces /dist folder +register.js # Uses ts-node/esm to resolve build.ts +build.ts # Produces dist/ folder README.md ``` @@ -307,6 +312,7 @@ My Notes has the permissions listed in `manifest.json`. - `"storage"` — used to save your notes and options to Chrome Storage (locally in your Chrome) - `"unlimitedStorage"` — used to increase the default storage limit (which is 5MB) - `"contextMenus"` — used to create My Notes Context menu +- `"notifications"` — used to show a Chrome notification (when Context menu was used) Required permissions are shown to the user before installing the extension, and are needed at all times to provide the basic functionality. diff --git a/build.ts b/build.ts index 64b88b3e..d704919b 100644 --- a/build.ts +++ b/build.ts @@ -1,3 +1,4 @@ +import fs from "fs"; import esbuild from "esbuild"; esbuild.build({ @@ -6,6 +7,7 @@ esbuild.build({ "./src/notes.tsx", "./src/options.tsx", "./src/themes/custom/custom.tsx", + "./src/themes/init.ts", ...(process.env.NODE_ENV === "development" ? ["./src/integration/index.ts"] : []), ], chunkNames: "chunks/[name]-[hash]", @@ -23,4 +25,9 @@ esbuild.build({ minify: process.env.NODE_ENV === "production", sourcemap: process.env.NODE_ENV === "development" ? "inline" : false, logLevel: "info", +}).then(() => { + const templateString = fs.readFileSync("./src/template.html", "utf8"); + ["notes", "options"].forEach((page) => { + fs.writeFileSync(`./dist/${page}.html`, templateString.replaceAll("{{page}}", page)); + }); }); diff --git a/public/options.html b/public/options.html deleted file mode 100644 index 59a4cc57..00000000 --- a/public/options.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - My Notes - - - - - - - - - diff --git a/public/themes/shared.css b/public/themes/shared.css index c646a6f4..2cf992b3 100644 --- a/public/themes/shared.css +++ b/public/themes/shared.css @@ -10,7 +10,6 @@ body { margin: 0; padding: 0; - opacity: 0; background: var(--background-color); color: var(--text-color); } diff --git a/src/notes.tsx b/src/notes.tsx index 771df7be..7c2ceb7c 100644 --- a/src/notes.tsx +++ b/src/notes.tsx @@ -10,14 +10,12 @@ import { Notification, RegularFont, GoogleFont, - Theme, NotesObject, NotesOrder, Sync, Message, MessageType, } from "shared/storage/schema"; -import { setTheme as setThemeCore } from "themes/set-theme"; import Overview from "notes/components/Overview"; import __Notification from "notes/components/Notification"; @@ -62,7 +60,7 @@ interface NotesProps { active: string } -const Notes = (): h.JSX.Element => { +const Notes = (): h.JSX.Element | null => { const [os, setOs] = useState(undefined); const [tabId, setTabId] = useState(undefined); const [initialized, setInitialized] = useState(false); @@ -78,8 +76,6 @@ const Notes = (): h.JSX.Element => { const [sidebar, setSidebar] = useState(false); const [sidebarWidth, setSidebarWidth] = useState(undefined); const [toolbar, setToolbar] = useState(false); - const [theme, setTheme] = useState(undefined); - const [customTheme, setCustomTheme] = useState(""); // Notes const [notesProps, setNotesProps] = useState({ @@ -164,8 +160,6 @@ const Notes = (): h.JSX.Element => { setSidebar(local.sidebar); setSidebarWidth(local.sidebarWidth); setToolbar(local.toolbar); - setTheme(local.theme); - setCustomTheme(local.customTheme); // Notes const activeFromUrl = getActiveFromUrl(); @@ -209,14 +203,6 @@ const Notes = (): h.JSX.Element => { setSize(changes.size.newValue); } - if (changes.theme) { - setTheme(changes.theme.newValue); - } - - if (changes.customTheme) { - setCustomTheme(changes.customTheme.newValue); - } - if (changes.notes) { const oldNotes: NotesObject = changes.notes.oldValue; const newNotes: NotesObject = changes.notes.newValue; @@ -391,17 +377,6 @@ const Notes = (): h.JSX.Element => { document.body.style.left = sidebarWidth ?? ""; }, [sidebarWidth]); - // Theme - useEffect(() => { - // setThemeCore injects one of: - // - light.css - // - dark.css - // - customTheme string - if (theme) { - setThemeCore(document, { theme, customTheme }); - } - }, [theme, customTheme]); - // Focus useEffect(() => { document.body.classList.toggle("focus", focus); @@ -575,6 +550,10 @@ const Notes = (): h.JSX.Element => { ); } + if (!initialized) { + return null; + } + return ( {notification && ( diff --git a/src/options.tsx b/src/options.tsx index 5121b9b9..1e848d4e 100644 --- a/src/options.tsx +++ b/src/options.tsx @@ -20,7 +20,6 @@ import { Theme, Sync, } from "shared/storage/schema"; -import { setTheme as setThemeCore } from "themes/set-theme"; const Options = (): h.JSX.Element | null => { const [initialized, setInitialized] = useState(false); @@ -31,7 +30,6 @@ const Options = (): h.JSX.Element | null => { const [font, setFont] = useState(undefined); const [size, setSize] = useState(0); const [theme, setTheme] = useState(undefined); - const [customTheme, setCustomTheme] = useState(""); const [tab, setTab] = useState(false); const [tabSize, setTabSize] = useState(-1); const [openNoteOnMouseHover, setOpenNoteOnMouseHover] = useState(false); @@ -67,7 +65,6 @@ const Options = (): h.JSX.Element | null => { setFont(local.font); setSize(local.size); setTheme(local.theme); - setCustomTheme(local.customTheme); // Notes setNotesCount(Object.keys(local.notes).length); @@ -103,10 +100,6 @@ const Options = (): h.JSX.Element | null => { setTheme(changes.theme.newValue); } - if (changes.customTheme) { - setCustomTheme(changes.customTheme.newValue); - } - if (changes.notes) { const { newValue } = changes.notes; const newNotesCount = Object.keys(newValue).length; @@ -139,16 +132,6 @@ const Options = (): h.JSX.Element | null => { }); }, []); - useEffect(() => { - // setThemeCore injects one of: - // - light.css - // - dark.css - // - customTheme string - if (theme) { - setThemeCore(document, { theme, customTheme }); - } - }, [theme, customTheme]); - if (!initialized) { return null; } diff --git a/public/notes.html b/src/template.html similarity index 62% rename from public/notes.html rename to src/template.html index ad746884..40d3909c 100644 --- a/public/notes.html +++ b/src/template.html @@ -5,10 +5,14 @@ My Notes + - - + + + + + diff --git a/src/themes/__tests__/set-theme.test.ts b/src/themes/__tests__/set-theme.test.ts deleted file mode 100644 index 8c105967..00000000 --- a/src/themes/__tests__/set-theme.test.ts +++ /dev/null @@ -1,85 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -/* eslint-disable @typescript-eslint/naming-convention */ -import { JSDOM } from "jsdom"; -import { Theme } from "shared/storage/schema"; -import { setTheme } from "../set-theme"; - -const __expectOnlyOneChildInHead = (dom: JSDOM) => { - // only 1 theme should be inserted, changing theme should remove the previous theme - expect(dom.window.document.head.children.length).toBe(1); -}; - -const __expectInsertedLinkElement = (dom: JSDOM, expectedTheme: Theme) => { - __expectOnlyOneChildInHead(dom); - - const linkElement = dom.window.document.head.firstChild as HTMLLinkElement; - expect(linkElement.id).toBe("theme"); - expect(linkElement.rel).toBe("stylesheet"); - expect(linkElement.href).toBe(`themes/${expectedTheme}.css`); -}; - -const __expectInsertedStyleElement = (dom: JSDOM, expectedCustomTheme: string) => { - __expectOnlyOneChildInHead(dom); - - const styleElement = dom.window.document.head.firstChild as HTMLStyleElement; - expect(styleElement.id).toBe("theme"); - expect(styleElement.innerHTML).toBe(expectedCustomTheme); -}; - -const __expectUpdatedBody = (dom: JSDOM, expectedId: Theme) => { - expect(dom.window.document.body.id).toBe(expectedId); - expect(dom.window.document.body.style.opacity).toBe("1"); -}; - -test("light theme is inserted", () => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "light" }); - - __expectInsertedLinkElement(dom, "light"); - __expectUpdatedBody(dom, "light"); -}); - -test("dark theme is inserted", () => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "dark" }); - - __expectInsertedLinkElement(dom, "dark"); - __expectUpdatedBody(dom, "dark"); -}); - -test("custom theme is inserted", () => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "custom", customTheme: "body{color:#333;}" }); - - __expectInsertedStyleElement(dom, "body{color:#333;}"); - __expectUpdatedBody(dom, "custom"); -}); - -test("custom theme fallbacks to light theme if customTheme string is not provided", () => { - const customThemes = [undefined, "", " "]; // all should result in using light theme instead - customThemes.forEach((customTheme) => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "custom", customTheme }); - - __expectInsertedLinkElement(dom, "light"); - __expectUpdatedBody(dom, "light"); - }); -}); - -test("changing theme should remove the previous theme", () => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "light" }); // inserting light theme first - setTheme(dom.window.document, { theme: "dark" }); // then inserting dark theme - - __expectInsertedLinkElement(dom, "dark"); // already tests only 1 theme should be inserted - __expectUpdatedBody(dom, "dark"); -}); - -test("using the same theme again should insert the theme only once", () => { - const dom = new JSDOM(); - setTheme(dom.window.document, { theme: "light" }); - setTheme(dom.window.document, { theme: "light" }); - - __expectInsertedLinkElement(dom, "light"); // already tests only 1 theme should be inserted - __expectUpdatedBody(dom, "light"); -}); diff --git a/src/themes/__tests__/themes.test.ts b/src/themes/__tests__/themes.test.ts index 48f7136e..7238b9ec 100644 --- a/src/themes/__tests__/themes.test.ts +++ b/src/themes/__tests__/themes.test.ts @@ -5,21 +5,23 @@ const getLines = (filename: string): string[] => fs .readFileSync(path.join(__dirname, `../../../public/themes/${filename}`), "utf8") .split("\n"); -it("has the same CSS variables", () => { +describe("themes in public folder", () => { const lightLines = getLines("light.css"); const darkLines = getLines("dark.css"); - // Themes have the same length - expect(lightLines.length).toEqual(darkLines.length); + test("they have same number of lines", () => { + expect(lightLines.length).toEqual(darkLines.length); + }); - // Themes have the same lines, variable names - for (let i = 0; i < lightLines.length; i += 1) { - const isVariable = lightLines[i].startsWith(" --"); - if (!isVariable) { - expect(lightLines[i]).toEqual(darkLines[i]); - } else { - const variableName = lightLines[i].split(":")[0]; - expect(darkLines[i].startsWith(variableName)).toBe(true); + test("they have same CSS variables", () => { + for (let i = 0; i < lightLines.length; i += 1) { + const isVariable = lightLines[i].startsWith(" --"); + if (!isVariable) { + expect(lightLines[i]).toEqual(darkLines[i]); + } else { + const variableName = lightLines[i].split(":")[0]; + expect(darkLines[i].startsWith(variableName)).toBe(true); + } } - } + }); }); diff --git a/src/themes/custom/custom.tsx b/src/themes/custom/custom.tsx index 5f5a1bb7..f301c9be 100644 --- a/src/themes/custom/custom.tsx +++ b/src/themes/custom/custom.tsx @@ -2,7 +2,9 @@ import { Fragment, h, render } from "preact"; import { useEffect, useState } from "preact/hooks"; import { t, tString } from "i18n"; -const placeholder = `:root { +const placeholder = `@import "themes/light.css"; + +:root { }`; diff --git a/src/themes/init.ts b/src/themes/init.ts new file mode 100644 index 00000000..481ae7a5 --- /dev/null +++ b/src/themes/init.ts @@ -0,0 +1,52 @@ +(() => { + let theme = localStorage.getItem("theme") as string | null; + let customTheme = localStorage.getItem("customTheme") as string | null; + + const init = () => { + if (theme === null || customTheme === null || !["light", "dark", "custom"].includes(theme)) { + return false; + } + + document.getElementById("theme")!.innerHTML = theme === "custom" + ? customTheme.trim() + : `@import "themes/${theme}.css";`; + + document.documentElement.id = theme; + document.documentElement.dataset.page = window.location.pathname.substring(1).split(".").shift(); + return true; + }; + + const updateTheme = (aTheme: string) => { + theme = aTheme; + localStorage.setItem("theme", aTheme); + }; + + const updateCustomTheme = (aCustomTheme: string) => { + customTheme = aCustomTheme; + localStorage.setItem("customTheme", aCustomTheme); + }; + + if (!init()) { + chrome.storage.local.get(["theme", "customTheme"], (items) => { + updateTheme(items.theme); + updateCustomTheme(items.customTheme); + init(); + }); + } + + chrome.storage.onChanged.addListener((changes, areaName) => { + if (areaName !== "local") { + return; + } + + if (changes.theme) { + updateTheme(changes.theme.newValue); + init(); + } + + if (changes.customTheme) { + updateCustomTheme(changes.customTheme.newValue); + init(); + } + }); +})(); diff --git a/src/themes/set-theme.ts b/src/themes/set-theme.ts deleted file mode 100644 index 1166c94f..00000000 --- a/src/themes/set-theme.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { Theme } from "shared/storage/schema"; - -const reset = (document: Document) => { - const elem = document.getElementById("theme"); - if (elem) { - elem.remove(); - } -}; - -const appendTheme = ( - document: Document, - element: HTMLLinkElement | HTMLStyleElement, - theme: Theme, -) => { - document.head.appendChild(element); - document.body.id = theme; // eslint-disable-line no-param-reassign - document.body.style.opacity = "1"; // eslint-disable-line no-param-reassign -}; - -const insertTheme = (document: Document, theme: Theme) => { - const link = document.createElement("link"); - link.id = "theme"; - link.rel = "stylesheet"; - link.href = `themes/${theme}.css`; - appendTheme(document, link, theme); -}; - -const insertCustomTheme = (document: Document, customTheme: string) => { - const style = document.createElement("style"); - style.id = "theme"; - style.innerHTML = customTheme; - document.getElementsByTagName("head")[0].appendChild(style); - appendTheme(document, style, "custom"); -}; - -export interface SetThemeOptions { - theme: Theme - customTheme?: string -} - -export function setTheme(document: Document, { theme, customTheme }: SetThemeOptions): void { - reset(document); - - if (theme === "light" || theme === "dark") { - insertTheme(document, theme); - } - - if (theme === "custom") { - if (customTheme && customTheme.trim().length > 0) { - insertCustomTheme(document, customTheme); - } else { - insertTheme(document, "light"); - } - } -}