feat(optimization): hydrate toaster component on demand

Closes #16

apps/web/astro.config.ts

@@ -21,6 +21,8 @@ import { browserslist } from "./package.json";
 import sectionize from "@frontendista/rehype-sectionize";
 import { rehypeHeadingIds } from "@astrojs/markdown-remark";
 
+import eventDirective from "./lib/register";
+
 import type { AstroIntegration } from "astro";
 
 config();
@@ -51,6 +53,7 @@ if (process.env.VERCEL_ENV !== "production" || process.env.ENABLE_MOCKS === "1")
 }
 
 const integrations: AstroIntegration[] = [
+	eventDirective(),
 	mdx(),
 	TailwindCSS({
 		applyBaseStyles: false

apps/web/lib/event-directive.ts

@@ -0,0 +1,12 @@
+import type { ClientDirective } from "astro";
+
+export default (function (load, options) {
+	window.addEventListener(
+		options.value,
+		async () => {
+			const hydrate = await load();
+			await hydrate();
+		},
+		{ once: true },
+	);
+} satisfies ClientDirective);

apps/web/lib/index.d.ts

@@ -0,0 +1,7 @@
+import "astro";
+
+declare module "astro" {
+	interface AstroClientDirectives {
+		"client:event"?: string;
+	}
+}

apps/web/lib/register.ts

@@ -0,0 +1,13 @@
+import type { AstroIntegration } from "astro";
+
+export default (): AstroIntegration => ({
+	name: "client:event",
+	hooks: {
+		"astro:config:setup": ({ addClientDirective }) => {
+			addClientDirective({
+				name: "event",
+				entrypoint: "./lib/event-directive.ts",
+			});
+		},
+	},
+});

apps/web/src/components/form/contact-form.tsx

@@ -9,6 +9,7 @@ import { TextTooltip } from "./radix/tooltip";
 import { withClass } from "./hoc";
 import { Textarea } from "./textarea";
 import { Icon } from "../common/icon";
+import { CLIENT_EVENT_TOASTER } from "../../config";
 
 import { delayPromise } from "~/utils/promise";
 import { toast } from "~/stores/toast";
@@ -95,6 +96,8 @@ export const ContactForm: FunctionComponent = () => {
 	};
 
 	const handleSubmit: JSX.SubmitEventHandler<HTMLFormElement> = async (event) => {
+		dispatchEvent(new Event(CLIENT_EVENT_TOASTER));
+
 		event.preventDefault();
 
 		setLoading(true);
@@ -301,7 +304,7 @@ export const ContactForm: FunctionComponent = () => {
 
 								{image ? (
 									<a href={image.src} download={image.name} className="center" rel="noopener" target="_blank" ref={download} onClick={() => setHasDownloaded(true)}>
-										<img src={image.src} alt="Generated image" className="w-full" />
+										<img src={image.src} alt="Generated card" className="w-full" />
 									</a>
 								) : null}
 

apps/web/src/config.ts

@@ -1,3 +1,5 @@
+export const CLIENT_EVENT_TOASTER = "toaster-hydrate";
+
 interface Config {
 	status: string | false;
 }

apps/web/src/pages/index.astro

@@ -10,6 +10,8 @@ import HeroSection from "./_index/hero-section.astro";
 import ProjectSection from "./_index/project-section.astro";
 import AboutSection from "./_index/about-section.astro";
 import ContactSection from "./_index/contact-section.astro";
+
+import { CLIENT_EVENT_TOASTER } from "../config";
 ---
 
 <HMFLayout>
@@ -21,5 +23,5 @@ import ContactSection from "./_index/contact-section.astro";
 		<ContactForm client:visible />
 	</ContactSection>
 
-	<Toaster />
+	<Toaster client:event={CLIENT_EVENT_TOASTER} />
 </HMFLayout>

apps/web/tsconfig.json

@@ -18,5 +18,5 @@
 		"jsx": "react-jsx",
 		"jsxImportSource": "preact",
 	},
-	"include": ["astro.config.ts", "tailwind.config.ts", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.astro"]
+	"include": ["astro.config.ts", "tailwind.config.ts", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.astro", "lib/**/*.d.ts"]
 }