Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add JS and Style injection into AppShell

Browse Source
This commit is contained in:
Caleb Braaten 2025-10-17 17:54:38 -07:00
parent 16cf44b42d
commit 0890ae3ef9
6 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/frontend/AppShell.tsx
View File

@ -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<string> {
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<string> {
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 (

0
src/public/head.js
View File

12
src/public/head.ts Normal file
View File

@ -0,0 +1,12 @@
// Client-side script that runs in <head>
// Example: TypeScript with DOM types
(() => {
const logPageInfo = (): void => {
console.log('Page loaded in <head>');
};
if (document.readyState === 'loading') {
logPageInfo();
}
})();

0
src/public/onLoad.js
View File

16
src/public/onLoad.ts Normal file
View File

@ -0,0 +1,16 @@
// Client-side script that runs on page load
// Example: TypeScript with type annotations
(() => {
const setupPage = (): void => {
const links: NodeListOf<HTMLAnchorElement> = 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);
}
})();

2
tsconfig.json
View File

@ -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. */