refactor(bundle): update scripts and split css

Author: binhtddev

bun.lock

@@ -0,0 +1,24 @@
+{
+  "lockfileVersion": 0,
+  "workspaces": {
+    "": {
+      "devDependencies": {
+        "@types/bun": "^1.1.13",
+        "mini-van-plate": "^0.6.1",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/[email protected]", "", { "dependencies": { "bun-types": "1.1.43" } }, "sha512-E+ue6NMcn4FXC5bDRE1W/BXUVs01h5Mt02qH8/8HGCox9akuh8KNOFdwvaQS9TDgT2RmUyJYFRRqA60WtTnm2g=="],
+
+    "@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg=="],
+
+    "@types/ws": ["@types/[email protected]", "", { "dependencies": { "@types/node": "*" } }, "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA=="],
+
+    "bun-types": ["[email protected]", "", { "dependencies": { "@types/node": "~20.12.8", "@types/ws": "~8.5.10" } }, "sha512-W0wCtVH+bwFp7p3Zgs03CqxEDmXxEvmmUM/FBKgWIv9T8gyeotvIjIbHzuDScc2DphhRNtr7hJLCR5PspYL5qw=="],
+
+    "mini-van-plate": ["[email protected]", "", {}, "sha512-i4kCD5xzkdtQiVnBSN4xFHru6QGPPWJALAm4IB0IRPawIHUK5J/Zv2bx94Nev1YABKN1zJgwxqvuSygoltrQIg=="],
+
+    "undici-types": ["[email protected]", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+  }
+}

bun.lockb

@@ -4,9 +4,10 @@
 	"type": "module",
 	"scripts": {
 		"fix": "biome check --fix --unsafe",
-		"build": "bun scripts/ssg.ts",
-		"build:watch": "bun --watch scripts/ssg.ts",
-		"preview": "bun build:watch | bun scripts/preview.ts"
+		"dev": "bun scripts/dev.ts",
+		"preview": "bun scripts/dev.ts --preview",
+		"background": "bun scripts/background.ts",
+		"build": "bun scripts/ssg.ts"
 	},
 	"devDependencies": {
 		"@types/bun": "^1.1.13",

package.json

@@ -1,67 +1,15 @@
-import van from "mini-van-plate/van-plate";
+import { registerMiniVan } from "~/utils/van";
 
-const colors = {
-	bg: "transparent",
-	primary: "#BD93F9",
-	secondary: "#FF79C6",
-} as const;
+async function main() {
+	await generateBackground();
+}
 
-const size = {
-	width: 256,
-	height: 144,
-};
+export async function generateBackground() {
+	await registerMiniVan();
+	const { Background } = await import("~/components/background.js");
+	await Bun.write("src/generated/background.svg", Background().render());
+}
 
-const circles = {
-	sizeA: 60,
-	sizeB: 46,
-	sizeC: 38,
-	sizeD: 30,
-} as const;
-
-export const Background = (props?: Record<string, unknown>) => {
-	const { svg, circle, path, defs, linearGradient, stop, g } = van.tags(
-		"http://www.w3.org/2000/svg",
-	);
-
-	return svg(
-		{
-			xmlns: "http://www.w3.org/2000/svg",
-			width: size.width,
-			height: size.height,
-			viewBox: `0 0 ${size.width} ${size.height}`,
-			...props,
-		},
-		defs(
-			linearGradient(
-				{ id: "bg-grad1", x1: "0%", y1: "100%", x2: "100%", y2: "0%" },
-				stop({ offset: "0%", "stop-color": colors.primary }),
-				stop({ offset: "100%", "stop-color": colors.secondary }),
-			),
-		),
-		g(
-			{
-				transform: `translate(${size.width / 2},${size.height / 2})`,
-				opacity: 0.4,
-			},
-			circle({ r: circles.sizeA, fill: `${colors.primary}2F` }),
-			path({
-				d: `M0,-${circles.sizeA} a1,1 0 0,1 0,${circles.sizeA * 2}Z`,
-				transform: "rotate(30 0,0)",
-				fill: `${colors.primary}2F`,
-			}),
-			circle({
-				r: (circles.sizeB + circles.sizeC) / 2,
-				fill: "none",
-				stroke: `${colors.primary}7F`,
-				"stroke-width": circles.sizeB - circles.sizeC,
-			}),
-			circle({
-				r: circles.sizeC,
-				fill: "url(#bg-grad1)",
-				transform: "rotate(180 0,0)",
-				opacity: 0.8,
-			}),
-			circle({ r: circles.sizeD, fill: "url(#bg-grad1)" }),
-		),
-	);
-};
+if (import.meta.main) {
+	main();
+}

scripts/background.ts

@@ -0,0 +1,81 @@
+import { watch } from "node:fs";
+import { parseArgs } from "node:util";
+import type { BunFile } from "bun";
+
+import { SRC_MAP } from "./ssg.js";
+
+function watchCache(): void {
+	function watchSrcAndBuild(src: string, buildFn: () => Promise<unknown>) {
+		let time: Timer | undefined;
+		return watch(src, { recursive: true }, () => {
+			if (!time) clearTimeout(time);
+			time = setTimeout(async () => {
+				await buildFn();
+				console.log(`Rebuilt ${src}`);
+			}, 500);
+		});
+	}
+	watchSrcAndBuild(
+		SRC_MAP.script,
+		async () => await Bun.$`bun scripts/ssg.ts --target script`,
+	);
+	watchSrcAndBuild(
+		SRC_MAP.style,
+		async () => await Bun.$`bun scripts/ssg.ts --target style`,
+	);
+	watchSrcAndBuild(
+		SRC_MAP.main,
+		async () => await Bun.$`bun scripts/ssg.ts --target sites`,
+	);
+	watchSrcAndBuild(
+		SRC_MAP.public,
+		async () => await Bun.$`bun scripts/ssg.ts --target public`,
+	);
+}
+
+async function main() {
+	const { values } = parseArgs({
+		args: Bun.argv,
+		options: {
+			preview: { type: "boolean" },
+			port: { type: "string" },
+		},
+		strict: true,
+		allowPositionals: true,
+	});
+
+	await Bun.$`bun scripts/ssg.ts`;
+	if (!values.preview) {
+		watchCache();
+	}
+
+	const server = Bun.serve({
+		port: values.port ?? 5000,
+		async fetch(req) {
+			const url = new URL(req.url);
+
+			const file = await getPreviewFile(url.pathname);
+			if (file) return new Response(file);
+
+			return new Response(await getPreviewFile("/404.html"), { status: 404 });
+		},
+	});
+
+	console.log(`Try visiting the server via http://localhost:${server.port}`);
+}
+
+async function getPreviewFile(pathname: string): Promise<BunFile | null> {
+	const trimedPath = pathname.replace(/^\/|\/$/g, "");
+
+	const file = Bun.file(`dist/${trimedPath}`);
+	if (await file.exists()) return file;
+
+	const indexFile = Bun.file(`dist/${trimedPath}/index.html`);
+	if (await indexFile.exists()) return indexFile;
+
+	return null;
+}
+
+if (import.meta.main) {
+	main();
+}

scripts/dev.ts

@@ -1,51 +1,86 @@
+import { parseArgs } from "node:util";
 import { readFileSync } from "node:fs";
 import { readdir } from "node:fs/promises";
-import { Background } from "./background.js";
 
 import { minifyGlsl } from "~/utils/minify.js";
+import { registerMiniVan } from "~/utils/van.js";
+import "~/index.js";
 
-// Imports for watch only
-import "~/scripts/cool-cursor.js";
-import "~/styles/core.css";
-import "~/styles/resume.css";
-import "~/styles/footer.css";
-import "~/styles/header.css";
-import "~/styles/icon.css";
-import "~/styles/landing.css";
-import "~/styles/lazy-landing.css";
+export const SRC_MAP = {
+	script: "src/scripts",
+	style: "src/styles",
+	main: "src",
+	public: "public",
+} as const;
 
-import "~/scripts/landing.js" with { type: "text" };
+const CACHE_MAP = {
+	script: ".cache/scripts",
+	style: ".cache/styles",
+} as const;
 
-// Init dist folder
-await Bun.$`rm -rf dist`;
+export async function main() {
+	const { values } = parseArgs({
+		args: Bun.argv,
+		options: {
+			target: { type: "string" },
+		},
+		strict: true,
+		allowPositionals: true,
+	});
+	if (values.target === "script") {
+		await initOutput();
+		await cacheScripts();
+	} else if (values.target === "style") {
+		await initOutput();
+		await cacheStyles();
+	} else if (values.target === "public") {
+		await initOutput();
+		await copyPublic();
+	} else if (values.target === "sites") {
+		await initOutput();
+		await generateSites();
+	} else {
+		await cleanOutput();
+
+		await initOutput();
+
+		await cacheStyles();
+		await cacheScripts();
 
-// Build Clients
-await Bun.write("dist/assets/background.svg", Background().render());
-await Promise.all([buildScripts(), buildStyles()]);
-await Bun.$`mkdir -p dist`;
-await Bun.$`cp -rf .cache/scripts dist`;
-// HACK: Add postfix "src/styles" to solve Bun bundler path when the number of files is >= 9
-await Bun.$`cp -rf .cache/styles/src/styles dist`;
+		await copyPublic();
+		await generateSites();
+	}
+}
 
-const { fetchSite, pageMap } = await import("~/index.js");
+async function cleanOutput() {
+	await Bun.$`rm -rf dist .cache`;
+}
 
-await Promise.all([
-	// Copy public
-	Bun.$`cp -r public/* dist`,
-	// Write Sites
-	...Object.keys(pageMap).map((page) => writeSite(page)),
-]);
+async function initOutput() {
+	await Bun.$`mkdir -p dist`;
+}
 
-async function writeSite(pathname: string): Promise<number> {
-	return await Bun.write(`dist${pathname}`, fetchSite(pathname).content);
+async function copyPublic() {
+	await Bun.$`cp -r public/* dist`;
 }
 
-export async function buildScripts() {
-	const files = await readdir("src/scripts");
+async function generateSites() {
+	await registerMiniVan();
+	const { fetchSite, pageMap } = await import("~/index.js");
+
+	async function writeSite(pathname: string): Promise<number> {
+		return await Bun.write(`dist${pathname}`, fetchSite(pathname).content);
+	}
+	await Promise.all([...Object.keys(pageMap).map((page) => writeSite(page))]);
+}
+
+async function cacheScripts() {
+	const files = await readdir(SRC_MAP.script);
 	await Bun.build({
-		entrypoints: files.map((f) => `src/scripts/${f}`),
-		outdir: "./.cache/scripts",
+		entrypoints: files.map((f) => `${SRC_MAP.script}/${f}`),
+		outdir: CACHE_MAP.script,
 		minify: true,
+		splitting: true,
 		plugins: [
 			{
 				name: "glsl",
@@ -58,14 +93,23 @@ export async function buildScripts() {
 			},
 		],
 	});
+	await Bun.$`cp -rf ${CACHE_MAP.script} dist`;
 }
 
-export async function buildStyles() {
-	const files = await readdir("src/styles");
+async function cacheStyles() {
+	const files = await readdir(SRC_MAP.style);
 	await Bun.build({
-		entrypoints: files.map((f) => `./src/styles/${f}`),
-		outdir: "./.cache/styles",
+		entrypoints: files.map((f) => `${SRC_MAP.style}/${f}`),
+		outdir: CACHE_MAP.style,
 		experimentalCss: true,
+		splitting: true,
 		minify: true,
 	});
+	// await Bun.$`cp -rf .cache/styles dist`;
+	// HACK: Add postfix "src/styles" to solve Bun bundler path when the number of files is >= 9
+	await Bun.$`cp -rf ${CACHE_MAP.style}/src/styles dist`;
+}
+
+if (import.meta.main) {
+	await main();
 }