@pajecawav/yamf 0.0.1

package/src/page.tsx

@@ -0,0 +1,92 @@
+import type { Child, FC, PropsWithChildren } from "hono/jsx";
+import { Fragment } from "hono/jsx";
+import { renderToReadableStream } from "hono/jsx/streaming";
+import { Hono } from "hono/tiny";
+import type { EventHandlerRequest, EventHandlerResponse, H3Event } from "nitro/h3";
+import { HTTPResponse, withServerTiming } from "nitro/h3";
+import type { Unhead } from "unhead/server";
+import { transformHtmlTemplate } from "unhead/server";
+import { createStreamableHead, wrapStream } from "unhead/stream/server";
+import type { ResolvableHead, ResolvableLink } from "unhead/types";
+import { clientAssets } from "virtual:yamf:assets";
+import { template } from "virtual:yamf:template";
+import { SSRContext } from "./context/ssr";
+import type { ImportAssetsResult } from "./shared/assets";
+
+export type PageHandler = (
+	event: H3Event<EventHandlerRequest>,
+	params: {
+		serverAssets?: ImportAssetsResult;
+		head?: ResolvableHead;
+		Layout?: FC<PropsWithChildren>;
+	},
+) => EventHandlerResponse;
+
+export type PageRenderer = (
+	event: H3Event<EventHandlerRequest>,
+	params: { head: Unhead },
+) => HTTPResponse | Promise<HTTPResponse> | Child | Promise<Child>;
+
+interface DefinePageOptions {
+	render: PageRenderer;
+	stream?: boolean;
+	Layout?: FC<PropsWithChildren>;
+}
+
+export const definePage = (options: DefinePageOptions): PageHandler => {
+	return async (event, { serverAssets, head: headInit, Layout = options.Layout ?? Fragment }) => {
+		const assets = serverAssets ? clientAssets.merge(serverAssets) : clientAssets;
+
+		const { head } = createStreamableHead({ init: [headInit] });
+
+		head.push({
+			link: [
+				...assets.js.map((attrs): ResolvableLink => ({ rel: "modulepreload", ...attrs })),
+				...assets.css.map((attrs): ResolvableLink => ({ rel: "stylesheet", ...attrs })),
+			],
+			script: [{ type: "module", src: assets.entry }],
+		});
+
+		const content = await options.render(event, { head });
+
+		if (content instanceof HTTPResponse) {
+			return content;
+		}
+
+		const App = async () => (
+			<SSRContext value={{ head, event }}>
+				<Layout>{content}</Layout>
+			</SSRContext>
+		);
+
+		const responseInit = {
+			headers: {
+				"Content-Type": "text/html; charset=utf-8",
+			},
+		};
+
+		if (!options.stream) {
+			// TODO: figure out how expensive this is
+			return new Hono()
+				.get("/", async c =>
+					withServerTiming(event, "#render", async () => {
+						const response = await c.html(<App />);
+
+						let html = await response.text();
+
+						html = transformHtmlTemplate(
+							head,
+							template.replace("<!--ssr-outlet-->", html ?? ""),
+						);
+
+						return new Response(html, responseInit);
+					}),
+				)
+				.request("/");
+		}
+
+		const stream = wrapStream(head, renderToReadableStream(<App />), template);
+
+		return new Response(stream, responseInit);
+	};
+};

package/src/server/entry.tsx

@@ -0,0 +1,80 @@
+import type { PageHandler } from "#/page";
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { EventHandlerRequest, EventHandlerWithFetch, H3Event } from "nitro/h3";
+import { defineHandler, HTTPError, writeEarlyHints } from "nitro/h3";
+import path from "node:path";
+import { addRoute, createRouter, findRoute } from "rou3";
+import { withLeadingSlash, withoutTrailingSlash } from "ufo";
+import type { ResolvableHead } from "unhead/types";
+import { clientAssets } from "virtual:yamf:assets";
+import { pages, assets as serverAssets } from "virtual:yamf:pages";
+
+interface Route {
+	handler: () => Promise<PageHandler>;
+	serverAssets?: ImportAssetsResult;
+}
+
+const router = createRouter<Route>();
+
+for (const [relativePath, handler] of Object.entries(pages).toSorted((a, b) =>
+	a[0].localeCompare(b[0]),
+)) {
+	const ext = path.extname(relativePath);
+
+	let route = path.relative("/src/pages", relativePath);
+
+	if (ext.length) {
+		route = route.slice(0, -ext.length);
+	}
+
+	route =
+		route
+			.replace(/\.[A-Za-z]+$/, "")
+			.replace(/\(([^(/\\]+)\)[/\\]/g, "")
+			.replace(/\[\.{3}]/g, "**")
+			.replace(/\[\.{3}([^\]]+)]/g, (_, p: string) => "**:" + p.replace(/[^\w-]/g, "_"))
+			.replace(/\[([^/\]]+)]/g, (_, p: string) => ":" + p.replace(/[^\w-]/g, "_"))
+			.replace(/(\/|^)index$/, "") || "/";
+
+	route = withLeadingSlash(withoutTrailingSlash(route));
+
+	addRoute(router, "GET", route, {
+		handler,
+		serverAssets: serverAssets[relativePath],
+	});
+}
+
+export type ServerEntry = EventHandlerWithFetch<EventHandlerRequest, Promise<unknown>>;
+
+export interface DefineServerEntryOptions {
+	head?: ResolvableHead | ((event: H3Event<EventHandlerRequest>) => ResolvableHead);
+	Layout?: FC<PropsWithChildren>;
+}
+
+export const defineServerEntry = (options?: DefineServerEntryOptions): ServerEntry => {
+	return defineHandler(async event => {
+		const route = findRoute(router, "GET", event.url.pathname);
+
+		if (!route) {
+			throw new HTTPError("Not found", { status: 404 });
+		}
+
+		const { handler, serverAssets } = route.data;
+		event.context.params = route.params;
+
+		const assets = serverAssets ? serverAssets.merge(clientAssets) : clientAssets;
+
+		await writeEarlyHints(event, {
+			link: [
+				...assets.js.map(script => `<${script.href}>; rel=modulepreload`),
+				...assets.css.map(style => `<${style.href}>; rel=preload; as=style`),
+			],
+		});
+
+		return (await handler())(event, {
+			serverAssets,
+			head: typeof options?.head === "function" ? options.head(event) : options?.head,
+			Layout: options?.Layout,
+		});
+	});
+};

package/src/server/index.ts

@@ -0,0 +1,4 @@
+export { createIsland } from "#/island/server";
+
+export { defineServerEntry } from "./entry";
+export type { DefineServerEntryOptions, ServerEntry } from "./entry";

package/src/shared/assets.ts

@@ -0,0 +1,10 @@
+// https://github.com/nitrojs/nitro/blob/bfbb207c720ce10ec7ad7887c7a8269d493eec55/lib/vite.types.d.mts
+export type ImportAssetsResult = ImportAssetsResultRaw & {
+	merge(...args: ImportAssetsResultRaw[]): ImportAssetsResult;
+};
+
+export type ImportAssetsResultRaw = {
+	entry?: string;
+	js: { href: string }[];
+	css: { href: string; "data-vite-dev-id"?: string }[];
+};

package/src/shared/utils.ts

@@ -0,0 +1,5 @@
+export const js = (str: TemplateStringsArray, ...args: unknown[]): string => {
+	return str.reduce((acc, cur, i) => {
+		return acc + cur + String(args[i]);
+	}, "");
+};

package/src/virtual.d.ts

@@ -0,0 +1,14 @@
+declare module "virtual:yamf:assets" {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+	export const clientAssets: import("./shared/assets").ImportAssetsResult;
+}
+
+declare module "virtual:yamf:pages" {
+	export const pages: Record<string, () => Promise<PageHandler>>;
+
+	export const assets: Record<string, ImportAssetsResult>;
+}
+
+declare module "virtual:yamf:template" {
+	export const template: string;
+}

package/src/vite/index.ts

@@ -0,0 +1,83 @@
+import type { NitroPluginConfig } from "nitro/vite";
+import { nitro } from "nitro/vite";
+import { existsSync } from "node:fs";
+import type { EnvironmentOptions, PluginOption } from "vite";
+import { islands } from "./islands";
+import { virtualAssets } from "./virtual-assets";
+import { virtualPages } from "./virtual-pages";
+import { virtualTemplate } from "./virtual-template";
+
+export interface YamfOptions {
+	nitro?: NitroPluginConfig;
+}
+
+const yamf = (options?: YamfOptions): PluginOption[] => {
+	const plugins: PluginOption[] = [];
+
+	// TODO: extendable config
+	plugins.push({
+		name: "yamf:config",
+		config() {
+			const ssrEnv: EnvironmentOptions = {
+				build: {
+					// TODO: figure out if this should be true
+					cssCodeSplit: false,
+					rollupOptions: {
+						input: "./src/server.tsx",
+					},
+				},
+			};
+
+			return {
+				optimizeDeps: {
+					include: [
+						"hono",
+						"hono/jsx/dom/client",
+						"hono/jsx/jsx-runtime",
+						"devalue",
+						"ufo",
+					],
+				},
+				environments: {
+					...(existsSync("./src/server.tsx") ? { ssr: ssrEnv } : {}),
+					client: {
+						build: {
+							rolldownOptions: {
+								input: "./src/client/index.ts",
+							},
+						},
+					},
+				},
+			};
+		},
+	});
+
+	plugins.push(islands());
+
+	plugins.push(virtualAssets());
+	plugins.push(virtualPages());
+	plugins.push(virtualTemplate());
+
+	plugins.push(
+		nitro({
+			serverDir: "./src",
+			renderer: false,
+			...options?.nitro,
+			compressPublicAssets: {
+				gzip: true,
+				brotli: true,
+			},
+			publicAssets: [
+				{
+					baseURL: "assets",
+					dir: "./public/assets",
+					maxAge: 365 * 24 * 60 * 60,
+				},
+			],
+		}),
+	);
+
+	return plugins;
+};
+
+export default yamf;

package/src/vite/islands.ts

@@ -0,0 +1,229 @@
+// reference https://github.com/hi-ogawa/vite-plugin-fullstack/blob/28e9540a68529c58842e9a3bf17d2193a065d524/examples/island/src/framework/island/plugin.ts
+import { generate } from "@babel/generator";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import {
+	callExpression,
+	exportDefaultDeclaration,
+	exportNamedDeclaration,
+	functionDeclaration,
+	functionExpression,
+	identifier,
+	importDeclaration,
+	importDefaultSpecifier,
+	importNamespaceSpecifier,
+	memberExpression,
+	stringLiteral,
+	variableDeclaration,
+	variableDeclarator,
+} from "@babel/types";
+import type { Plugin } from "vite";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const traverse = (_traverse.default as typeof _traverse) ?? _traverse;
+
+const ISLAND_REGEX = /\.island\.(j|t)sx?$/;
+
+export const islands = (): Plugin[] => {
+	return [
+		{
+			name: "yamf:islands",
+			// enforce: "pre",
+			transform: {
+				filter: { id: ISLAND_REGEX },
+				handler(code, id) {
+					if (this.environment.name !== "ssr") {
+						return;
+					}
+
+					const seenExports = new Set<string>();
+
+					const ast = parse(code, {
+						sourceType: "module",
+						plugins: ["typescript", "jsx"],
+					});
+
+					traverse(ast, {
+						Program(path) {
+							// prepends server island runtime
+							// import * as __runtime from "yamf/server";
+							path.unshiftContainer(
+								"body",
+								importDeclaration(
+									[importNamespaceSpecifier(identifier("__runtime"))],
+									stringLiteral("@pajecawav/yamf/server"),
+								),
+							);
+
+							// prepends asset imports for the island:
+							// import __assets from "MODULE_ID?assets=client";
+							path.unshiftContainer(
+								"body",
+								importDeclaration(
+									[importDefaultSpecifier(identifier("__assets"))],
+									stringLiteral(`${id}?assets=client`),
+								),
+							);
+						},
+						ExportDefaultDeclaration(path) {
+							const declarationType = path.node.declaration.type;
+
+							if (
+								!(
+									declarationType === "FunctionDeclaration" ||
+									declarationType === "FunctionExpression" ||
+									declarationType === "ArrowFunctionExpression"
+								)
+							) {
+								return;
+							}
+
+							const originalFunction =
+								path.node.declaration.type === "FunctionExpression" ||
+								path.node.declaration.type === "ArrowFunctionExpression"
+									? path.node.declaration
+									: functionExpression(
+											null,
+											path.node.declaration.params,
+											path.node.declaration.body,
+											undefined,
+											path.node.declaration.async,
+										);
+
+							const islandIdentifier = identifier("__ISLAND__");
+
+							path.insertBefore(
+								variableDeclaration("const", [
+									variableDeclarator(islandIdentifier, originalFunction),
+								]),
+							);
+
+							path.replaceWith(
+								exportDefaultDeclaration(
+									callExpression(
+										memberExpression(
+											identifier("__runtime"),
+											identifier("createIsland"),
+										),
+										[
+											islandIdentifier,
+											stringLiteral("default"),
+											identifier("__assets"),
+										],
+									),
+								),
+							);
+						},
+						ExportNamedDeclaration(path) {
+							if (path.node.declaration?.type === "VariableDeclaration") {
+								const declaration = path.node.declaration.declarations.at(0);
+
+								if (
+									!declaration ||
+									declaration.id.type !== "Identifier" ||
+									seenExports.has(declaration.id.name)
+								) {
+									return;
+								}
+								const exportName = declaration.id.name;
+								seenExports.add(exportName);
+
+								const islandIdentifier = identifier(`__wrap_${exportName}`);
+
+								path.insertBefore(
+									variableDeclaration("const", [
+										variableDeclarator(islandIdentifier, declaration.init),
+									]),
+								);
+
+								path.replaceWith(
+									exportNamedDeclaration(
+										variableDeclaration("const", [
+											variableDeclarator(
+												identifier(exportName),
+												callExpression(
+													memberExpression(
+														identifier("__runtime"),
+														identifier("createIsland"),
+													),
+													[
+														islandIdentifier,
+														stringLiteral(exportName),
+														identifier("__assets"),
+													],
+												),
+											),
+										]),
+									),
+								);
+							} else if (path.node.declaration?.type === "FunctionDeclaration") {
+								const declaration = path.node.declaration;
+
+								if (
+									!declaration ||
+									declaration.id?.type !== "Identifier" ||
+									seenExports.has(declaration.id.name)
+								) {
+									return;
+								}
+								const exportName = declaration.id.name;
+								seenExports.add(exportName);
+
+								const islandIdentifier = identifier(`__wrap_${exportName}`);
+
+								path.insertBefore(
+									functionDeclaration(
+										islandIdentifier,
+										declaration.params,
+										declaration.body,
+										declaration.generator,
+										declaration.async,
+									),
+								);
+
+								path.replaceWith(
+									exportNamedDeclaration(
+										variableDeclaration("const", [
+											variableDeclarator(
+												identifier(exportName),
+												callExpression(
+													memberExpression(
+														identifier("__runtime"),
+														identifier("createIsland"),
+													),
+													[
+														islandIdentifier,
+														stringLiteral(exportName),
+														identifier("__assets"),
+													],
+												),
+											),
+										]),
+									),
+								);
+							}
+						},
+					});
+
+					const result = generate(ast);
+
+					return { code: result.code, map: result.map };
+				},
+			},
+		},
+		{
+			name: "yamf:islands:raw-import",
+			transform: {
+				order: "post",
+				handler(code) {
+					if (code.includes("__island_raw_import__")) {
+						return code.replaceAll("__island_raw_import__", "import");
+					}
+
+					return undefined;
+				},
+			},
+		},
+	];
+};

package/src/vite/virtual-assets.ts

@@ -0,0 +1,30 @@
+import type { Plugin } from "vite";
+import { js } from "../shared/utils";
+
+export const virtualAssets = (): Plugin => {
+	const virtualModuleId = "virtual:yamf:assets";
+	const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+	return {
+		name: "yamf:virtual-assets",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+
+			return undefined;
+		},
+		load(id) {
+			if (id !== resolvedVirtualModuleId) {
+				return;
+			}
+
+			return js`
+import clientAssets from "./src/client/index.ts?assets=client";
+
+export { clientAssets };
+`.trim();
+		},
+	};
+};

package/src/vite/virtual-pages.ts

@@ -0,0 +1,40 @@
+import type { Plugin } from "vite";
+import { js } from "../shared/utils";
+
+export const virtualPages = (): Plugin => {
+	const virtualModuleId = "virtual:yamf:pages";
+	const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+	return {
+		name: "yamf:virtual-pages",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+
+			return undefined;
+		},
+		load(id) {
+			if (id !== resolvedVirtualModuleId) {
+				return;
+			}
+
+			return js`
+const pages = import.meta.glob("/src/pages/**/*.{js,mjs,cjs,ts,mts,cts,tsx,jsx}", {
+	import: "default",
+});
+const assets = import.meta.glob(
+	"/src/pages/**/*.{js,mjs,cjs,ts,mts,cts,tsx,jsx}",
+	{
+		import: "default",
+		query: "?assets=ssr",
+		eager: true,
+	},
+);
+
+export { pages, assets };
+`.trim();
+		},
+	};
+};

package/src/vite/virtual-template.ts

@@ -0,0 +1,62 @@
+import { readFile } from "node:fs/promises";
+import { relative } from "node:path";
+import type { Plugin } from "vite";
+import { js } from "../shared/utils";
+
+const TEMPLATE_PATH = "./src/template.html";
+
+const DEFAULT_TEMPLATE = /* html */ `
+<!DOCTYPE html>
+<html>
+    <head></head>
+    <body>
+        <!--ssr-outlet-->
+    </body>
+</html>
+`.trim();
+
+export const virtualTemplate = (): Plugin => {
+	const virtualModuleId = "virtual:yamf:template";
+	const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+	return {
+		name: "yamf:virtual-template",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+
+			return undefined;
+		},
+		async load(id) {
+			if (id !== resolvedVirtualModuleId) {
+				return;
+			}
+
+			try {
+				const template = await readFile(TEMPLATE_PATH, "utf8");
+
+				return js`export const template = ${JSON.stringify(template)};`;
+			} catch (error) {
+				if (error instanceof Error && "code" in error && error.code === "ENOENT") {
+					return js`export const template = ${JSON.stringify(DEFAULT_TEMPLATE)};`;
+				}
+
+				throw error;
+			}
+		},
+		handleHotUpdate({ file, server }) {
+			if (relative(file, TEMPLATE_PATH) === "") {
+				const mod = server.moduleGraph.getModuleById(resolvedVirtualModuleId);
+
+				if (mod) {
+					server.moduleGraph.invalidateModule(mod);
+				}
+
+				// TODO: should reload?
+				// server.ws.send({ type: "full-reload" });
+			}
+		},
+	};
+};