perf: ⚡ use fast-blurhash for blurhash decoding, up deps

package.json

@@ -36,17 +36,17 @@
 		"chokidar": "^3.3.1"
 	},
 	"dependencies": {
-		"@bull-board/api": "5.2.0",
-		"@bull-board/ui": "5.2.0",
+		"@bull-board/api": "5.6.0",
+		"@bull-board/ui": "5.6.0",
 		"@napi-rs/cli": "^2.16.1",
 		"@tensorflow/tfjs": "^3.21.0",
 		"js-yaml": "4.1.0",
 		"seedrandom": "^3.0.5"
 	},
 	"devDependencies": {
-		"@types/node": "18.11.18",
-		"@types/gulp": "4.0.10",
-		"@types/gulp-rename": "2.0.1",
+		"@types/gulp": "4.0.13",
+		"@types/gulp-rename": "2.0.2",
+		"@types/node": "20.4.1",
 		"chalk": "4.1.2",
 		"cross-env": "7.0.3",
 		"cypress": "10.11.0",
@@ -59,6 +59,6 @@
 		"install-peers": "^1.0.4",
 		"rome": "^12.1.3",
 		"start-server-and-test": "1.15.2",
-		"typescript": "4.9.4"
+		"typescript": "5.1.6"
 	}
 }

packages/client/package.json

@@ -16,7 +16,7 @@
 		"@syuilo/aiscript": "0.11.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/glob": "8.1.0",
-		"@types/gulp": "4.0.11",
+		"@types/gulp": "4.0.13",
 		"@types/gulp-rename": "2.0.2",
 		"@types/katex": "0.16.0",
 		"@types/matter-js": "0.18.2",
@@ -29,8 +29,8 @@
 		"@vue/compiler-sfc": "3.3.4",
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
-		"blurhash": "1.1.5",
-		"broadcast-channel": "4.19.1",
+		"blurhash": "2.0.5",
+		"broadcast-channel": "5.1.0",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer",
 		"calckey-js": "workspace:*",
 		"chart.js": "4.3.0",
@@ -39,51 +39,52 @@
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.0.1",
 		"city-timezones": "^1.2.1",
-		"compare-versions": "5.0.3",
+		"compare-versions": "6.0.0",
 		"cropperjs": "2.0.0-beta.2",
 		"cross-env": "7.0.3",
 		"cypress": "10.11.0",
 		"date-fns": "2.30.0",
 		"emojilib": "github:thatonecalculator/emojilib",
 		"escape-regexp": "0.0.1",
-		"eventemitter3": "4.0.7",
-		"focus-trap": "^7.4.3",
+		"eventemitter3": "5.0.1",
+		"fast-blurhash": "^1.1.2",
+		"focus-trap": "^7.5.2",
 		"focus-trap-vue": "^4.0.2",
-		"gsap": "^3.11.5",
+		"gsap": "^3.12.2",
 		"idb-keyval": "6.2.1",
 		"insert-text-at-cursor": "0.3.0",
 		"json5": "2.2.3",
-		"katex": "0.16.7",
+		"katex": "0.16.8",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.3",
-		"photoswipe": "5.3.7",
+		"photoswipe": "5.3.8",
 		"prettier": "3.0.0",
 		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
-		"punycode": "2.1.1",
+		"punycode": "2.3.0",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
-		"rollup": "3.23.1",
+		"rollup": "3.26.2",
 		"s-age": "1.1.2",
-		"sass": "1.62.1",
+		"sass": "1.63.6",
 		"seedrandom": "3.0.5",
 		"start-server-and-test": "1.15.2",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"swiper": "9.3.2",
+		"swiper": "10.0.4",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.146.0",
 		"throttle-debounce": "5.0.0",
-		"tinycolor2": "1.5.2",
-		"tsc-alias": "1.8.6",
+		"tinycolor2": "1.6.0",
+		"tsc-alias": "1.8.7",
 		"tsconfig-paths": "4.2.0",
 		"twemoji-parser": "14.0.0",
-		"typescript": "5.1.3",
+		"typescript": "5.1.6",
 		"unicode-emoji-json": "^0.4.0",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.8.0",
-		"vite": "4.3.9",
+		"vite": "4.4.2",
 		"vite-plugin-compression": "^0.5.1",
 		"vue": "3.3.4",
 		"vue-isyourpasswordsafe": "^2.0.0",

packages/client/src/components/MkImgWithBlurhash.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import { decode } from "blurhash";
+import { decodeBlurHash } from "fast-blurhash";
 
 const props = withDefaults(
 	defineProps<{
@@ -47,8 +47,8 @@ const canvas = $ref<HTMLCanvasElement>();
 let loaded = $ref(false);
 
 function draw() {
-	if (props.hash == null) return;
-	const pixels = decode(props.hash, props.size, props.size);
+	if (props.hash == null || canvas == null) return;
+	const pixels = decodeBlurHash(props.hash, props.size, props.size);
 	const ctx = canvas.getContext("2d");
 	const imageData = ctx!.createImageData(props.size, props.size);
 	imageData.data.set(pixels);

packages/client/src/scripts/extract-avg-color-from-blurhash.ts

@@ -1,13 +1,16 @@
+import { getBlurHashAverageColor } from "fast-blurhash";
+
+function rgbToHex(rgb: number[]): string {
+	return `#${rgb
+		.map((x) => {
+			const hex = x.toString(16);
+			return hex.length === 1 ? `0${hex}` : hex;
+		})
+		.join("")}`;
+}
+
 export function extractAvgColorFromBlurhash(hash: string) {
 	return typeof hash === "string"
-		? `#${[...hash.slice(2, 6)]
-				.map((x) =>
-					"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".indexOf(
-						x,
-					),
-				)
-				.reduce((a, c) => a * 83 + c, 0)
-				.toString(16)
-				.padStart(6, "0")}`
+		? rgbToHex(getBlurHashAverageColor(hash))
 		: undefined;
 }

packages/client/src/ui/_common_/navbar.vue

@@ -217,7 +217,7 @@ function openAccountMenu(ev: MouseEvent) {
 		{
 			withExtraOperation: true,
 		},
-		ev
+		ev,
 	);
 }
 
@@ -232,7 +232,7 @@ function more(ev: MouseEvent) {
 			src: ev.currentTarget ?? ev.target,
 		},
 		{},
-		"closed"
+		"closed",
 	);
 }
 </script>