Use svelte preprocess, generate random colors, check GZipped filesize

package.json

@@ -28,6 +28,7 @@
 		"sass": "^1.69.5",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.6.0",
+		"svelte-preprocess": "^5.1.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"

src/routes/Control.svelte

@@ -68,6 +68,15 @@
 	firstLedDataSubscription = status.subscribe(async (val) => {
 		if (val && val.leds) {
 			ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));
+
+			for (let led of ledStatus) {
+				if (led['hex'] == '#000000') {
+					led['hex'] = `#${Math.floor(Math.random() * 16777215)
+						.toString(16)
+						.padStart(6, '0')}`;
+				}
+			}
+
 			firstLedDataSubscription();
 		}
 	});

svelte.config.js

@@ -1,11 +1,11 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess({}),
+	preprocess: preprocess({}),
 	build: {
 		rollupOptions: {
 			output: {