@wrdagency/react-islands 0.1.0

package/src/index.tsx

@@ -0,0 +1,111 @@
+import { FC, PropsWithChildren, useEffect, useRef } from "react";
+import { Island, IslandOpts, IslandRenderOpts } from "./types";
+import { createRoot, hydrateRoot } from "react-dom/client";
+
+export default function createIsland(component: FC, opts: IslandOpts): Island {
+	const mergedOpts: Required<IslandOpts> = {
+		multiple: false,
+		selector: `[data-hydrate="${opts.name}"]`,
+		keepChildren: false,
+		...opts,
+	};
+
+	const island: Island = {
+		type: "island",
+		component,
+		opts: mergedOpts,
+		render(opts) {
+			renderIsland(this, opts);
+		},
+	};
+
+	return island;
+}
+
+export function withProps<T>(component: FC<T>, setProps: Partial<T>): FC<T> {
+	return (props: T) => {
+		return component({ ...props, ...setProps });
+	};
+}
+
+export function isServer() {
+	return !(typeof window != "undefined" && window.document);
+}
+
+export function RawHTML({ html }: { html: string }) {
+	const ref = useRef<HTMLScriptElement>(null);
+
+	// important to not have ANY deps
+	useEffect(() => {
+		if (ref.current) {
+			ref.current.outerHTML = html;
+		}
+	}, []);
+
+	return <script ref={ref} />;
+}
+
+function renderIsland(island: Island, renderOpts: IslandRenderOpts = {}) {
+	const { component, opts } = island;
+	const { selector, multiple, keepChildren } = opts;
+
+	const nodes = [...document.querySelectorAll(selector)];
+
+	if (!nodes) {
+		console.warn(
+			`Could not hydrate React Island because DOM node (${selector}) could not be found.`
+		);
+
+		return false;
+	}
+
+	if (nodes.length > 1 && !multiple) {
+		console.warn(
+			`Multiple elements matched React Island selector (${selector}) but multiple was not enabled. Choosing first element as root.`
+		);
+	}
+
+	for (let i = 0; i < nodes.length; i++) {
+		if (i > 0 && !multiple) {
+			break;
+		}
+
+		const element = nodes[i] as HTMLElement;
+		let props: PropsWithChildren = {};
+
+		try {
+			const json = element.dataset.props || "{}";
+
+			if (json) {
+				const parsed = JSON.parse(json);
+
+				if (typeof parsed !== "object" || Array.isArray(parsed)) {
+					throw new Error(
+						`Parsed JSON is not a valid dictionary object: '${json}'`
+					);
+				}
+
+				if (parsed) {
+					// Ignore null.
+					props = parsed;
+				}
+			}
+		} catch (e) {
+			console.warn("Could not parse JSON props for React Island.");
+			console.error(e);
+		}
+
+		if (keepChildren) {
+			props.children = <RawHTML html={element.innerHTML} />;
+		}
+
+		const Component = withProps(component, props);
+
+		if (renderOpts.hydrate) {
+			hydrateRoot(nodes[i], <Component />);
+		} else {
+			const root = createRoot(nodes[i]);
+			root.render(<Component />);
+		}
+	}
+}

package/src/server.tsx

@@ -0,0 +1,38 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { Island } from "./types";
+import { renderToString } from "react-dom/server";
+
+interface PrerenderIslandsOpts {
+	islands: Record<string, Island>;
+	outDir: string;
+}
+
+export async function prerenderIslands(opts: PrerenderIslandsOpts) {
+	const { islands, outDir } = opts;
+
+	// Clean or create outDir.
+	try {
+		await fs.access(outDir);
+
+		for (const file of await fs.readdir(outDir)) {
+			await fs.unlink(path.resolve(outDir, file));
+		}
+	} catch (error) {
+		await fs.mkdir(outDir);
+	}
+
+	// For each island.
+	for (const island of Object.values(islands)) {
+		const { component, opts } = island;
+		const { name } = opts;
+		const Component = component;
+
+		// Render it to [outDir]/[name].html.
+		const html = renderToString(<Component />);
+		const file = path.resolve(outDir, `${name}.html`);
+
+		console.log(`Rendering component ${name} to ${file}`);
+		fs.writeFile(file, html, { flag: "w+" });
+	}
+}

package/src/types.ts

@@ -0,0 +1,17 @@
+export interface IslandOpts {
+	name: string;
+	selector?: string;
+	multiple?: boolean;
+	keepChildren?: boolean;
+}
+
+export interface IslandRenderOpts {
+	hydrate?: boolean;
+}
+
+export type Island = {
+	type: "island";
+	component: React.FC;
+	opts: Required<IslandOpts>;
+	render: (opts: IslandRenderOpts) => void;
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"outDir": "./dist/",
+		"target": "es2016",
+		"module": "Node16",
+		"jsx": "react-jsx",
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"skipLibCheck": true
+	},
+	"exclude": ["dist", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+	entry: ["src/index.tsx", "src/server.tsx"],
+	format: ["cjs", "esm"],
+	dts: true,
+	splitting: false,
+	sourcemap: true,
+	clean: true,
+});