From 0890ae3ef9b9b722e65a9004ae0d683129e873b2 Mon Sep 17 00:00:00 2001 From: Caleb Braaten Date: Fri, 17 Oct 2025 17:54:38 -0700 Subject: [PATCH] Add JS and Style injection into AppShell --- src/frontend/AppShell.tsx | 38 +++++++++++++++++++++++++++++++++++--- src/public/head.js | 0 src/public/head.ts | 12 ++++++++++++ src/public/onLoad.js | 0 src/public/onLoad.ts | 16 ++++++++++++++++ tsconfig.json | 2 +- 6 files changed, 64 insertions(+), 4 deletions(-) delete mode 100644 src/public/head.js create mode 100644 src/public/head.ts delete mode 100644 src/public/onLoad.js create mode 100644 src/public/onLoad.ts diff --git a/src/frontend/AppShell.tsx b/src/frontend/AppShell.tsx index a16a6ef..fdc6065 100644 --- a/src/frontend/AppShell.tsx +++ b/src/frontend/AppShell.tsx @@ -1,8 +1,40 @@ import { Html } from "@elysiajs/html"; -const styles = Bun.file("./src/public/styles.css").text(); -const headScript = Bun.file("./src/public/head.js").text(); -const onLoadScript = Bun.file("./src/public/onLoad.js").text(); +// Helper: Minify CSS using simple but effective regex +async function minifyCSS(css: string): Promise { + return css + .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments + .replace(/\s+/g, ' ') // Collapse whitespace + .replace(/\s*([{}:;,])\s*/g, '$1') // Remove space around delimiters + .trim(); +} + +// Helper: Minify JS/TS using Bun.Transpiler +async function minifyJS(code: string): Promise { + const transpiler = new Bun.Transpiler({ + loader: 'ts', + minifyWhitespace: true, + }); + + return transpiler.transformSync(code); +} + +// Read and minify files at module load time (runs once) +console.log('[AppShell] Loading and minifying assets...'); + +const rawStyles = await Bun.file("./src/public/styles.css").text(); +const rawHeadScript = await Bun.file("./src/public/head.ts").text(); +const rawOnLoadScript = await Bun.file("./src/public/onLoad.ts").text(); + +// Minify all assets +const styles = await minifyCSS(rawStyles); +const headScript = await minifyJS(rawHeadScript); +const onLoadScript = await minifyJS(rawOnLoadScript); + +console.log('[AppShell] Assets minified and cached in memory'); +console.log(` CSS: ${rawStyles.length} → ${styles.length} bytes (-${Math.round((1 - styles.length / rawStyles.length) * 100)}%)`); +console.log(` head.ts: ${rawHeadScript.length} → ${headScript.length} bytes (-${Math.round((1 - headScript.length / rawHeadScript.length) * 100)}%)`); +console.log(` onLoad.ts: ${rawOnLoadScript.length} → ${onLoadScript.length} bytes (-${Math.round((1 - onLoadScript.length / rawOnLoadScript.length) * 100)}%)`); export function AppShell(responseValue: any) { return ( diff --git a/src/public/head.js b/src/public/head.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/public/head.ts b/src/public/head.ts new file mode 100644 index 0000000..a5843d1 --- /dev/null +++ b/src/public/head.ts @@ -0,0 +1,12 @@ +// Client-side script that runs in +// Example: TypeScript with DOM types +(() => { + const logPageInfo = (): void => { + console.log('Page loaded in '); + }; + + if (document.readyState === 'loading') { + logPageInfo(); + } +})(); + diff --git a/src/public/onLoad.js b/src/public/onLoad.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/public/onLoad.ts b/src/public/onLoad.ts new file mode 100644 index 0000000..3a049d8 --- /dev/null +++ b/src/public/onLoad.ts @@ -0,0 +1,16 @@ +// Client-side script that runs on page load +// Example: TypeScript with type annotations +(() => { + const setupPage = (): void => { + const links: NodeListOf = document.querySelectorAll('a'); + console.log(`Found ${links.length} links on the page`); + }; + + // Run setup when DOM is ready + if (document.readyState !== 'loading') { + setupPage(); + } else { + document.addEventListener('DOMContentLoaded', setupPage); + } +})(); + diff --git a/tsconfig.json b/tsconfig.json index 6497e01..e514805 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ /* Language and Environment */ "target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + "lib": ["ES2021", "DOM", "DOM.Iterable"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ "jsx": "react", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */