@wrdagency/react-islands 1.0.0

package/README.md

@@ -0,0 +1,7 @@
+## React Islands
+
+Created by Kyle Cooper at [WRD.agency](https://webresultsdirect.com)
+
+React Islands is a way of introducing React into static pages. We developed React Islands as a way of introducing React-based interactivity sprinkled into places on WordPress sites (rendered via PHP).
+
+The ReactIslandsWebpackPlugin automatically creates statically rendered mark-up for each Webpack entry point. This is rendered to a HTML file at build time which can then be hydrated using the `createIsland`.

package/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@wrdagency/react-islands",
+	"version": "1.0.0",
+	"description": "",
+	"main": "./dist/index.js",
+	"scripts": {
+		"build": "tsc"
+	},
+	"keywords": [],
+	"author": "Kyle Thomas Cooper @ WRD",
+	"license": "MIT",
+	"devDependencies": {
+		"@babel/core": "^7.24.3",
+		"@babel/preset-env": "^7.24.3",
+		"@babel/preset-react": "^7.24.1",
+		"@types/react-dom": "^18.2.23",
+		"@types/tmp": "^0.2.6",
+		"@types/webpack": "^5.28.5",
+		"babel-loader": "^9.1.3",
+		"typescript": "^5.4.3",
+		"tmp": "^0.2.3",
+		"webpack": "^5.91.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	}
+}

package/src/index.ts

@@ -0,0 +1,113 @@
+import {
+	Compilation,
+	Compiler,
+	Configuration,
+	WebpackOptionsNormalized,
+	webpack,
+} from "webpack";
+import tmp from "tmp";
+import { renderToStaticMarkup } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+
+tmp.setGracefulCleanup();
+
+export class ReactIslandsWebpackPlugin {
+	createSubCompiler(
+		dir: string,
+		entry: Record<string, any>,
+		options: WebpackOptionsNormalized
+	): Compiler {
+		const plugins = options.plugins.filter(
+			(plugin) => !(plugin instanceof ReactIslandsWebpackPlugin)
+		);
+
+		const compilerOptions: Configuration = {
+			mode: "development",
+			target: "node",
+			context: process.cwd(),
+			entry,
+			output: {
+				libraryTarget: "commonjs",
+				path: dir,
+				filename: "[name].js",
+			},
+			module: options.module,
+			stats: false,
+			devtool: false,
+			optimization: {
+				minimize: false,
+			},
+			plugins,
+		};
+
+		return webpack(compilerOptions);
+	}
+
+	async apply(compiler: Compiler) {
+		let components: string[] = [];
+
+		const options = compiler.options;
+
+		const entry =
+			typeof options.entry === "function"
+				? await options.entry()
+				: options.entry;
+
+		const { name: dir } = tmp.dirSync();
+
+		const { RawSource } = compiler.webpack.sources;
+
+		compiler.hooks.run.tapAsync(
+			"ReactIslandsWebpackPlugin",
+			(compiler: Compiler, callback) => {
+				components = Object.keys(entry);
+
+				const subCompiler = this.createSubCompiler(dir, entry, options);
+
+				subCompiler.run((err, stats) => {
+					if (err) {
+						console.error(err);
+						throw new Error("ReactIslandsWebpackPlugin: Error during compile.");
+					}
+
+					if (stats?.hasErrors()) {
+						console.log(stats?.toString());
+						throw new Error("ReactIslandsWebpackPlugin: Failed to compile.");
+					}
+
+					callback();
+					console.log("ReactIslandsWebpackPlugin: Compilation complete.");
+				});
+			}
+		);
+
+		compiler.hooks.thisCompilation.tap(
+			"ReactIslandsWebpackPlugin",
+			(compilation: Compilation) => {
+				for (const name of components) {
+					const file = `${dir}/${name}.js`;
+					const { default: component } = require(file);
+
+					const markup = renderToStaticMarkup(component());
+
+					compilation.emitAsset(`${name}.html`, new RawSource(markup));
+				}
+			}
+		);
+	}
+}
+
+export function createIsland(name: string, Component: React.FC) {
+	const isBrowser =
+		typeof window !== "undefined" && typeof window.document !== "undefined";
+
+	if (isBrowser) {
+		document
+			.querySelectorAll(`[data-react-component="${name}"]`)
+			.forEach((element) => {
+				const propsJSON = element.getAttribute("data-react-props") || "{}";
+				const props = JSON.parse(propsJSON);
+				hydrateRoot(element, Component(props));
+			});
+	}
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"outDir": "./dist/",
+		"target": "es2016",
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		"module": "Node16",
+		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
+		// "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"skipLibCheck": true
+	}
+}