Making it work for ESP32

.gitignore

@@ -3,6 +3,7 @@ node_modules
 /build
 build
 build_gz
+dist
 /.svelte-kit
 /package
 .env
@@ -10,3 +11,4 @@ build_gz
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+yarn-error.log

.prettierignore

@@ -6,6 +6,9 @@ node_modules
 .env
 .env.*
 !.env.example
+dist/
+build_gz
+
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

gzip_build.py

@@ -22,8 +22,7 @@ def process_directory(input_dir, output_dir):
                 gzip_file(input_file_path, output_file_path)
                 print(f'Compressed: {input_file_path} -> {output_file_path}')
 
-# Replace 'input_directory' and 'output_directory' with your actual input and output directories
+input_directory = 'dist'
-input_directory = 'build'
 output_directory = 'build_gz'
 
 process_directory(input_directory, output_directory)

src/lib/style/app.scss

@@ -1,15 +1,8 @@
-// @use "../node_modules/@fontsource/antonio/scss/mixins" as Antonio;
-// $directory: "../node_modules/@fontsource/ubuntu";
-// @use "../node_modules/@fontsource/ubuntu/scss/mixins" as Ubuntu;
-
-
-// @import "../node_modules/bootstrap/scss/bootstrap";
-
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/variables-dark";
 
-@import "@fontsource/antonio/latin-400.css";
+//@import "@fontsource/antonio/latin-400.css";
 @import "@fontsource/ubuntu/latin-400.css";
 @import "@fontsource/oswald/latin-400.css";
 
@@ -100,6 +93,7 @@ nav {
         }
 
         text-align: center;
+        color: #fff;
     }
 }
 

src/routes/+layout.ts

@@ -13,4 +13,6 @@ export const load: LayoutLoad = async () => {
 	await waitLocale()
 }
 
-export const prerender = true;
+export const prerender = true;
+export const ssr = false;
+export const csr = true;

src/routes/Status.svelte

@@ -93,7 +93,7 @@
               <hr>
               {#if $status.data}
               <Rendered status="{$status}"></Rendered>
-              Screen cycle: <span on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; running{:else}&#9208; stopped{/if}</span>
+              Screen cycle: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; running{:else}&#9208; stopped{/if}</a>
               {/if}
             {/if}
         <hr>

svelte.config.js

@@ -8,7 +8,13 @@ const config = {
 	preprocess: vitePreprocess({
 	
 	}),
-
+build: {
+	rollupOptions: {
+		output: {
+			assetFilenames: '[hash]'
+		}
+	}
+},
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@@ -16,12 +22,14 @@ const config = {
 		adapter: adapter({
 			// default options are shown. On some platforms
 			// these options are set automatically — see below
-			pages: 'build',
+			pages: 'dist',
-			assets: 'build',
+			assets: 'dist',
-			fallback: undefined,
+			fallback: "bundle.html",
 			precompress: false,
 			strict: true
-		})
+		}),
+		appDir: "build",
+		// inlineStyleThreshold: 9999999999
 	}
 };
 

vite.config.ts

@@ -1,9 +1,62 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
+import * as fs from 'fs'
+import * as path from 'path'
+
+const doRewrap = ({ cssClass }) => {
+	try {
+		if (fs.existsSync(path.resolve(__dirname, 'dist/bundle.js'))) {
+			return
+		}
+	} catch(e) {}
+	console.log("\nStart re-wrapping...")
+	fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function(err, data){
+		if (!data) {
+			console.log(`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`)
+			return
+		}
+		let matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm)
+		if (matchData) {
+			let cleanData = matchData[0].trim()
+				.replace(`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`, `document.querySelector(".${cssClass}")`)
+			fs.writeFile(path.resolve(__dirname, 'dist/bundle.js'), cleanData, (err) => {
+				if (err)
+					console.log(err)
+				else {
+					try {
+						fs.rename(path.resolve(__dirname,'dist/index.page'), path.resolve(__dirname, 'dist/index.html'), (err) => { })
+					} catch (e) { }
+					try {
+						fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'))
+					} catch (e) { }
+					console.log("Finished: bundle.js + index.html have been regenerated.\n")
+				}
+			})
+		} else 
+			console.log(`[Error]: No proper <script> tag found in bundle.html`)
+	})
+}
+
+
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), {
+		name: 'postbuild-command', 
+			closeBundle: {
+				order: 'post',
+				handler() {
+					setTimeout(() => doRewrap({ cssClass: "overlay" }), Math.random()*500+500)
+				}
+			}
+	}],
 	build: {
-		minify: true
+		minify: true,
+		cssCodeSplit: false,
+		rollupOptions: {
+			output: {
+				manualChunks: () => 'app',
+				assetFileNames: "[name][extname]"
+			}
+		}
 	}
 });