@wrdagency/react-islands 1.0.5 → 2.0.1

package/src/bin/rollup/options.ts

@@ -0,0 +1,74 @@
+import { JsxPreset } from "rollup";
+import { packageNameToProperty } from "./generation";
+
+export type BuildOptions = {
+	name: string;
+	input: string;
+	output: string;
+	minify?: boolean;
+	ssg?: boolean;
+	jsx?: JsxPreset;
+	typescript?: boolean;
+	common?: string[] | Record<string, string>;
+};
+
+export type NormalizedBuildOptions = {
+	name: string;
+	input: string;
+	output: string;
+	minify: boolean;
+	ssg: boolean;
+	jsx: JsxPreset;
+	typescript: boolean;
+	common: Record<string, string>;
+};
+
+export const normalizeOptions = (
+	options: BuildOptions
+): NormalizedBuildOptions => {
+	return {
+		name: options.name,
+		input: options.input,
+		output: options.output || "./dist/",
+		minify: normalizeBoolean(options.minify, true),
+		ssg: normalizeBoolean(options.ssg, true),
+		jsx: options.jsx || "react-jsx",
+		typescript: normalizeBoolean(options.ssg, false),
+		common: normalizeCommonOption(
+			options.common || [
+				"react",
+				"react-dom/client",
+				"@wrdagency/react-islands",
+			]
+		),
+	};
+};
+
+export const normalizeBoolean = (
+	value: boolean | undefined | null | void,
+	fallback: boolean
+): boolean => {
+	if (value === false) {
+		return false;
+	} else if (value === true) {
+		return true;
+	} else {
+		return fallback;
+	}
+};
+
+export const normalizeCommonOption = (
+	share: BuildOptions["common"] = [""]
+): NormalizedBuildOptions["common"] => {
+	if (Array.isArray(share)) {
+		return share.reduce(
+			(record, packageName) => ({
+				...record,
+				[packageName]: "Islands._Common." + packageNameToProperty(packageName),
+			}),
+			{}
+		);
+	} else {
+		return share;
+	}
+};

package/src/bin/rollup/plugins/runScriptAfterBuildPlugin.ts

@@ -0,0 +1,43 @@
+import fs from "fs";
+import path from "path";
+import { Plugin } from "rollup";
+import { consoleExecute } from "../console";
+
+type Options = {
+	deleteAfterRunning?: boolean;
+};
+
+export function runScriptAfterBuildPlugin(opts: Options): Plugin {
+	const { deleteAfterRunning = false } = opts;
+
+	return {
+		name: "rollup-plugin-run-script-after-builder",
+		writeBundle(outputOptions, bundle) {
+			const outputDir = outputOptions.dir
+				? outputOptions.dir
+				: path.dirname(outputOptions.file || "");
+
+			for (const [fileName, chunkInfo] of Object.entries(bundle)) {
+				const filePath = path.resolve(outputDir, fileName);
+
+				if (chunkInfo.type !== "chunk" || !chunkInfo.isEntry) {
+					return;
+				}
+
+				if (!filePath && !filePath.endsWith("js")) {
+					return;
+				}
+
+				if (!fs.existsSync(filePath)) {
+					return;
+				}
+
+				consoleExecute(`node ${filePath}`).then(() => {
+					if (deleteAfterRunning) {
+						fs.unlinkSync(filePath);
+					}
+				});
+			}
+		},
+	};
+}

package/src/bin/rollup/plugins/virtualizeDependencyPlugin.ts

@@ -0,0 +1,34 @@
+import { Plugin } from "rollup";
+import * as codeGen from "../generation";
+
+type Options = {
+	dependencies: Record<string, string>;
+	namespace?: string;
+};
+
+export function virtualizeDependencyPlugin(opts: Options): Plugin {
+	const { dependencies, namespace = "" } = opts;
+
+	const VIRTUAL_MODULE_ID = "\0virtual-entry";
+
+	return {
+		name: "rollup-plugin-virtualize-dependency",
+		resolveId(source) {
+			if (source === "virtual-entry") return VIRTUAL_MODULE_ID;
+			return null;
+		},
+		load(id) {
+			if (id !== VIRTUAL_MODULE_ID) {
+				return null;
+			}
+
+			let str = codeGen.createGlobalObject(namespace) + ";\n";
+
+			for (const [dependency, name] of Object.entries(dependencies)) {
+				str += codeGen.importAndGlobalisePackage(dependency, name);
+			}
+
+			return str;
+		},
+	};
+}

package/src/bin/util/command.ts

@@ -0,0 +1,101 @@
+import commandLineArgs from "command-line-args";
+import commandLineUsage from "command-line-usage";
+
+export class Command {
+	public readonly args: commandLineArgs.OptionDefinition[];
+	public readonly callback: (args: commandLineArgs.CommandLineOptions) => void;
+	public readonly description: string;
+
+	constructor(options: {
+		args: commandLineArgs.OptionDefinition[];
+		callback: (args: commandLineArgs.CommandLineOptions) => void;
+		description: string;
+	}) {
+		let { args, callback, description } = options;
+
+		args.push({
+			name: "help",
+			alias: "h",
+			type: Boolean,
+			// @ts-ignore
+			description: "Display this usage guide.",
+		});
+
+		this.args = args;
+		this.callback = callback;
+		this.description = description;
+	}
+
+	run(argv: string[]) {
+		const { help, ...args } = commandLineArgs(this.args, { argv });
+
+		if (help) {
+			console.log(
+				commandLineUsage([
+					{
+						header: "Options",
+						optionList: this.args,
+					},
+				])
+			);
+
+			return;
+		}
+
+		return this.callback(args);
+	}
+}
+
+export async function commandset(commands: Record<string, Command>) {
+	const {
+		command,
+		help = false,
+		_unknown: argv = [],
+	} = commandLineArgs(
+		[
+			{
+				name: "command",
+				type: String,
+				defaultOption: true,
+			},
+			{
+				name: "help",
+				alias: "h",
+				type: Boolean,
+				// @ts-ignore
+				description: "Display this usage guide.",
+			},
+		],
+		{
+			stopAtFirstUnknown: true,
+		}
+	);
+
+	if (!command || !(command in commands)) {
+		if (help) {
+			const commandsSummary = Object.keys(commands).map((key) => ({
+				name: key,
+				summary: commands[key].description,
+			}));
+
+			const usage = commandLineUsage([
+				{
+					header: "Synopsis",
+					content: "npx react-islands <command> <options>",
+				},
+				{
+					header: "Command List",
+					content: commandsSummary,
+				},
+			]);
+
+			console.log(usage);
+		} else {
+			console.error(`Command '${command}' not recognized by React Islands.`);
+		}
+
+		return;
+	}
+
+	return commands[command].run([...argv, help && "--help"].filter(Boolean));
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+import { Island } from "./island";
+import { isServer, withProps } from "./util";
+
+export type { BuildOptions } from "./bin/rollup/options";
+export { Island, isServer, withProps };

package/src/island.tsx

@@ -0,0 +1,94 @@
+import { createRoot } from "react-dom/client";
+import { RawHTML, withProps } from "./util";
+
+export interface IslandRenderOptions {
+	shouldHydrate: boolean;
+	multiple: boolean;
+	keepChildren: boolean;
+}
+
+export interface IslandOpts extends Partial<IslandRenderOptions> {}
+
+export class Island {
+	public readonly component: React.FC;
+	public readonly renderOptions: IslandRenderOptions;
+
+	public constructor(component: React.FC, opts: IslandOpts = {}) {
+		this.component = component;
+
+		this.renderOptions = {
+			shouldHydrate: opts.shouldHydrate ?? true,
+			multiple: opts.multiple ?? false,
+			keepChildren: opts.keepChildren ?? false,
+		};
+	}
+
+	private getProps(element: HTMLElement): React.PropsWithChildren {
+		const { keepChildren } = this.renderOptions;
+		let props: React.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} />;
+		}
+
+		return props;
+	}
+
+	private getRoots(name: string): HTMLElement[] {
+		const selector = `[data-island="${name}"]`;
+		const { multiple } = this.renderOptions;
+		const nodes = [...document.querySelectorAll(selector)];
+
+		if (!nodes) {
+			console.warn(
+				`Could not render React Island because DOM node (${selector}) could not be found.`
+			);
+
+			return [];
+		}
+
+		if (nodes.length > 1 && !multiple) {
+			console.warn(
+				`Multiple elements matched React Island selector (${selector}) but multiple was not enabled. Choosing first element as root.`
+			);
+
+			return [nodes[0] as HTMLElement];
+		}
+
+		return nodes as HTMLElement[];
+	}
+
+	public render(name: string): void {
+		this.getRoots(name).forEach((element) => {
+			const props = this.getProps(element);
+			const Component = withProps(this.component, props);
+
+			const root = createRoot(element);
+			root.render(<Component />);
+
+			return root;
+		});
+	}
+}

package/src/util.tsx

@@ -0,0 +1,41 @@
+import { FC, useEffect, useRef } from "react";
+
+/**
+ * Internal component for rendering raw HTML in a React component.
+ */
+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} />;
+}
+
+/**
+ * Create a higher-order component with certain fixed.
+ *
+ * Useful for quickly creating multiple variants of the same component to use as islands.
+ *
+ * @param component FC<T>
+ * @param setProps Partial<T>
+ * @returns FC<T>
+ */
+export function withProps<T>(component: FC<T>, setProps: Partial<T>): FC<T> {
+	return (props: T) => {
+		return component({ ...props, ...setProps });
+	};
+}
+
+/**
+ * Checks if the current script is running in a pre-render.
+ *
+ * @returns boolean
+ */
+export function isServer(): boolean {
+	return !(typeof window != "undefined" && window.document);
+}

package/dist/index.d.mts

@@ -1,9 +0,0 @@
-import { WebpackOptionsNormalized, Compiler } from 'webpack';
-
-declare class ReactIslandsWebpackPlugin {
-    createSubCompiler(dir: string, entry: Record<string, any>, options: WebpackOptionsNormalized): Compiler;
-    apply(compiler: Compiler): Promise<void>;
-}
-declare function createIsland(name: string, Component: React.FC): void;
-
-export { ReactIslandsWebpackPlugin, createIsland };

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\n\tCompilation,\n\tCompiler,\n\tConfiguration,\n\tWebpackOptionsNormalized,\n\twebpack,\n} from \"webpack\";\nimport tmp from \"tmp\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport { hydrateRoot } from \"react-dom/client\";\n\ntmp.setGracefulCleanup();\n\nexport class ReactIslandsWebpackPlugin {\n\tcreateSubCompiler(\n\t\tdir: string,\n\t\tentry: Record<string, any>,\n\t\toptions: WebpackOptionsNormalized\n\t): Compiler {\n\t\tconst plugins = options.plugins.filter(\n\t\t\t(plugin) => !(plugin instanceof ReactIslandsWebpackPlugin)\n\t\t);\n\n\t\tconst compilerOptions: Configuration = {\n\t\t\tmode: \"development\",\n\t\t\ttarget: \"node\",\n\t\t\tcontext: process.cwd(),\n\t\t\tentry,\n\t\t\toutput: {\n\t\t\t\tlibraryTarget: \"commonjs\",\n\t\t\t\tpath: dir,\n\t\t\t\tfilename: \"[name].js\",\n\t\t\t},\n\t\t\tmodule: options.module,\n\t\t\tstats: false,\n\t\t\tdevtool: false,\n\t\t\toptimization: {\n\t\t\t\tminimize: false,\n\t\t\t},\n\t\t\tplugins,\n\t\t};\n\n\t\treturn webpack(compilerOptions);\n\t}\n\n\tasync apply(compiler: Compiler) {\n\t\tlet components: string[] = [];\n\n\t\tconst options = compiler.options;\n\n\t\tconst entry =\n\t\t\ttypeof options.entry === \"function\"\n\t\t\t\t? await options.entry()\n\t\t\t\t: options.entry;\n\n\t\tconst { name: dir } = tmp.dirSync();\n\n\t\tconst { RawSource } = compiler.webpack.sources;\n\n\t\tcompiler.hooks.run.tapAsync(\n\t\t\t\"ReactIslandsWebpackPlugin\",\n\t\t\t(compiler: Compiler, callback) => {\n\t\t\t\tcomponents = Object.keys(entry);\n\n\t\t\t\tconst subCompiler = this.createSubCompiler(dir, entry, options);\n\n\t\t\t\tsubCompiler.run((err, stats) => {\n\t\t\t\t\tif (err) {\n\t\t\t\t\t\tconsole.error(err);\n\t\t\t\t\t\tthrow new Error(\"ReactIslandsWebpackPlugin: Error during compile.\");\n\t\t\t\t\t}\n\n\t\t\t\t\tif (stats?.hasErrors()) {\n\t\t\t\t\t\tconsole.log(stats?.toString());\n\t\t\t\t\t\tthrow new Error(\"ReactIslandsWebpackPlugin: Failed to compile.\");\n\t\t\t\t\t}\n\n\t\t\t\t\tcallback();\n\t\t\t\t\tconsole.log(\"ReactIslandsWebpackPlugin: Compilation complete.\");\n\t\t\t\t});\n\t\t\t}\n\t\t);\n\n\t\tcompiler.hooks.thisCompilation.tap(\n\t\t\t\"ReactIslandsWebpackPlugin\",\n\t\t\t(compilation: Compilation) => {\n\t\t\t\tfor (const name of components) {\n\t\t\t\t\tconst file = `${dir}/${name}.js`;\n\t\t\t\t\tconst { default: component } = require(file);\n\n\t\t\t\t\tconst markup = renderToStaticMarkup(component());\n\n\t\t\t\t\tcompilation.emitAsset(`${name}.html`, new RawSource(markup));\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n}\n\nexport function createIsland(name: string, Component: React.FC) {\n\tconst isBrowser =\n\t\ttypeof window !== \"undefined\" && typeof window.document !== \"undefined\";\n\n\tif (isBrowser) {\n\t\tdocument\n\t\t\t.querySelectorAll(`[data-react-component=\"${name}\"]`)\n\t\t\t.forEach((element) => {\n\t\t\t\tconst propsJSON = element.getAttribute(\"data-react-props\") || \"{}\";\n\t\t\t\tconst props = JSON.parse(propsJSON);\n\t\t\t\thydrateRoot(element, Component(props));\n\t\t\t});\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMO;AACP,iBAAgB;AAChB,oBAAqC;AACrC,oBAA4B;AAE5B,WAAAA,QAAI,mBAAmB;AAEhB,IAAM,4BAAN,MAAM,2BAA0B;AAAA,EACtC,kBACC,KACA,OACA,SACW;AACX,UAAM,UAAU,QAAQ,QAAQ;AAAA,MAC/B,CAAC,WAAW,EAAE,kBAAkB;AAAA,IACjC;AAEA,UAAM,kBAAiC;AAAA,MACtC,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI;AAAA,MACrB;AAAA,MACA,QAAQ;AAAA,QACP,eAAe;AAAA,QACf,MAAM;AAAA,QACN,UAAU;AAAA,MACX;AAAA,MACA,QAAQ,QAAQ;AAAA,MAChB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,QACb,UAAU;AAAA,MACX;AAAA,MACA;AAAA,IACD;AAEA,eAAO,wBAAQ,eAAe;AAAA,EAC/B;AAAA,EAEM,MAAM,UAAoB;AAAA;AAC/B,UAAI,aAAuB,CAAC;AAE5B,YAAM,UAAU,SAAS;AAEzB,YAAM,QACL,OAAO,QAAQ,UAAU,aACtB,MAAM,QAAQ,MAAM,IACpB,QAAQ;AAEZ,YAAM,EAAE,MAAM,IAAI,IAAI,WAAAA,QAAI,QAAQ;AAElC,YAAM,EAAE,UAAU,IAAI,SAAS,QAAQ;AAEvC,eAAS,MAAM,IAAI;AAAA,QAClB;AAAA,QACA,CAACC,WAAoB,aAAa;AACjC,uBAAa,OAAO,KAAK,KAAK;AAE9B,gBAAM,cAAc,KAAK,kBAAkB,KAAK,OAAO,OAAO;AAE9D,sBAAY,IAAI,CAAC,KAAK,UAAU;AAC/B,gBAAI,KAAK;AACR,sBAAQ,MAAM,GAAG;AACjB,oBAAM,IAAI,MAAM,kDAAkD;AAAA,YACnE;AAEA,gBAAI,+BAAO,aAAa;AACvB,sBAAQ,IAAI,+BAAO,UAAU;AAC7B,oBAAM,IAAI,MAAM,+CAA+C;AAAA,YAChE;AAEA,qBAAS;AACT,oBAAQ,IAAI,kDAAkD;AAAA,UAC/D,CAAC;AAAA,QACF;AAAA,MACD;AAEA,eAAS,MAAM,gBAAgB;AAAA,QAC9B;AAAA,QACA,CAAC,gBAA6B;AAC7B,qBAAW,QAAQ,YAAY;AAC9B,kBAAM,OAAO,GAAG,GAAG,IAAI,IAAI;AAC3B,kBAAM,EAAE,SAAS,UAAU,IAAI,QAAQ,IAAI;AAE3C,kBAAM,aAAS,oCAAqB,UAAU,CAAC;AAE/C,wBAAY,UAAU,GAAG,IAAI,SAAS,IAAI,UAAU,MAAM,CAAC;AAAA,UAC5D;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA;AACD;AAEO,SAAS,aAAa,MAAc,WAAqB;AAC/D,QAAM,YACL,OAAO,WAAW,eAAe,OAAO,OAAO,aAAa;AAE7D,MAAI,WAAW;AACd,aACE,iBAAiB,0BAA0B,IAAI,IAAI,EACnD,QAAQ,CAAC,YAAY;AACrB,YAAM,YAAY,QAAQ,aAAa,kBAAkB,KAAK;AAC9D,YAAM,QAAQ,KAAK,MAAM,SAAS;AAClC,qCAAY,SAAS,UAAU,KAAK,CAAC;AAAA,IACtC,CAAC;AAAA,EACH;AACD;","names":["tmp","compiler"]}

package/dist/index.mjs

@@ -1,116 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/index.ts
-import {
-  webpack
-} from "webpack";
-import tmp from "tmp";
-import { renderToStaticMarkup } from "react-dom/server";
-import { hydrateRoot } from "react-dom/client";
-tmp.setGracefulCleanup();
-var ReactIslandsWebpackPlugin = class _ReactIslandsWebpackPlugin {
-  createSubCompiler(dir, entry, options) {
-    const plugins = options.plugins.filter(
-      (plugin) => !(plugin instanceof _ReactIslandsWebpackPlugin)
-    );
-    const compilerOptions = {
-      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);
-  }
-  apply(compiler) {
-    return __async(this, null, function* () {
-      let components = [];
-      const options = compiler.options;
-      const entry = typeof options.entry === "function" ? yield options.entry() : options.entry;
-      const { name: dir } = tmp.dirSync();
-      const { RawSource } = compiler.webpack.sources;
-      compiler.hooks.run.tapAsync(
-        "ReactIslandsWebpackPlugin",
-        (compiler2, 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 == null ? void 0 : stats.hasErrors()) {
-              console.log(stats == null ? void 0 : stats.toString());
-              throw new Error("ReactIslandsWebpackPlugin: Failed to compile.");
-            }
-            callback();
-            console.log("ReactIslandsWebpackPlugin: Compilation complete.");
-          });
-        }
-      );
-      compiler.hooks.thisCompilation.tap(
-        "ReactIslandsWebpackPlugin",
-        (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));
-          }
-        }
-      );
-    });
-  }
-};
-function createIsland(name, Component) {
-  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));
-    });
-  }
-}
-export {
-  ReactIslandsWebpackPlugin,
-  createIsland
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\n\tCompilation,\n\tCompiler,\n\tConfiguration,\n\tWebpackOptionsNormalized,\n\twebpack,\n} from \"webpack\";\nimport tmp from \"tmp\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport { hydrateRoot } from \"react-dom/client\";\n\ntmp.setGracefulCleanup();\n\nexport class ReactIslandsWebpackPlugin {\n\tcreateSubCompiler(\n\t\tdir: string,\n\t\tentry: Record<string, any>,\n\t\toptions: WebpackOptionsNormalized\n\t): Compiler {\n\t\tconst plugins = options.plugins.filter(\n\t\t\t(plugin) => !(plugin instanceof ReactIslandsWebpackPlugin)\n\t\t);\n\n\t\tconst compilerOptions: Configuration = {\n\t\t\tmode: \"development\",\n\t\t\ttarget: \"node\",\n\t\t\tcontext: process.cwd(),\n\t\t\tentry,\n\t\t\toutput: {\n\t\t\t\tlibraryTarget: \"commonjs\",\n\t\t\t\tpath: dir,\n\t\t\t\tfilename: \"[name].js\",\n\t\t\t},\n\t\t\tmodule: options.module,\n\t\t\tstats: false,\n\t\t\tdevtool: false,\n\t\t\toptimization: {\n\t\t\t\tminimize: false,\n\t\t\t},\n\t\t\tplugins,\n\t\t};\n\n\t\treturn webpack(compilerOptions);\n\t}\n\n\tasync apply(compiler: Compiler) {\n\t\tlet components: string[] = [];\n\n\t\tconst options = compiler.options;\n\n\t\tconst entry =\n\t\t\ttypeof options.entry === \"function\"\n\t\t\t\t? await options.entry()\n\t\t\t\t: options.entry;\n\n\t\tconst { name: dir } = tmp.dirSync();\n\n\t\tconst { RawSource } = compiler.webpack.sources;\n\n\t\tcompiler.hooks.run.tapAsync(\n\t\t\t\"ReactIslandsWebpackPlugin\",\n\t\t\t(compiler: Compiler, callback) => {\n\t\t\t\tcomponents = Object.keys(entry);\n\n\t\t\t\tconst subCompiler = this.createSubCompiler(dir, entry, options);\n\n\t\t\t\tsubCompiler.run((err, stats) => {\n\t\t\t\t\tif (err) {\n\t\t\t\t\t\tconsole.error(err);\n\t\t\t\t\t\tthrow new Error(\"ReactIslandsWebpackPlugin: Error during compile.\");\n\t\t\t\t\t}\n\n\t\t\t\t\tif (stats?.hasErrors()) {\n\t\t\t\t\t\tconsole.log(stats?.toString());\n\t\t\t\t\t\tthrow new Error(\"ReactIslandsWebpackPlugin: Failed to compile.\");\n\t\t\t\t\t}\n\n\t\t\t\t\tcallback();\n\t\t\t\t\tconsole.log(\"ReactIslandsWebpackPlugin: Compilation complete.\");\n\t\t\t\t});\n\t\t\t}\n\t\t);\n\n\t\tcompiler.hooks.thisCompilation.tap(\n\t\t\t\"ReactIslandsWebpackPlugin\",\n\t\t\t(compilation: Compilation) => {\n\t\t\t\tfor (const name of components) {\n\t\t\t\t\tconst file = `${dir}/${name}.js`;\n\t\t\t\t\tconst { default: component } = require(file);\n\n\t\t\t\t\tconst markup = renderToStaticMarkup(component());\n\n\t\t\t\t\tcompilation.emitAsset(`${name}.html`, new RawSource(markup));\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n}\n\nexport function createIsland(name: string, Component: React.FC) {\n\tconst isBrowser =\n\t\ttypeof window !== \"undefined\" && typeof window.document !== \"undefined\";\n\n\tif (isBrowser) {\n\t\tdocument\n\t\t\t.querySelectorAll(`[data-react-component=\"${name}\"]`)\n\t\t\t.forEach((element) => {\n\t\t\t\tconst propsJSON = element.getAttribute(\"data-react-props\") || \"{}\";\n\t\t\t\tconst props = JSON.parse(propsJSON);\n\t\t\t\thydrateRoot(element, Component(props));\n\t\t\t});\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAKC;AAAA,OACM;AACP,OAAO,SAAS;AAChB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAE5B,IAAI,mBAAmB;AAEhB,IAAM,4BAAN,MAAM,2BAA0B;AAAA,EACtC,kBACC,KACA,OACA,SACW;AACX,UAAM,UAAU,QAAQ,QAAQ;AAAA,MAC/B,CAAC,WAAW,EAAE,kBAAkB;AAAA,IACjC;AAEA,UAAM,kBAAiC;AAAA,MACtC,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI;AAAA,MACrB;AAAA,MACA,QAAQ;AAAA,QACP,eAAe;AAAA,QACf,MAAM;AAAA,QACN,UAAU;AAAA,MACX;AAAA,MACA,QAAQ,QAAQ;AAAA,MAChB,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,QACb,UAAU;AAAA,MACX;AAAA,MACA;AAAA,IACD;AAEA,WAAO,QAAQ,eAAe;AAAA,EAC/B;AAAA,EAEM,MAAM,UAAoB;AAAA;AAC/B,UAAI,aAAuB,CAAC;AAE5B,YAAM,UAAU,SAAS;AAEzB,YAAM,QACL,OAAO,QAAQ,UAAU,aACtB,MAAM,QAAQ,MAAM,IACpB,QAAQ;AAEZ,YAAM,EAAE,MAAM,IAAI,IAAI,IAAI,QAAQ;AAElC,YAAM,EAAE,UAAU,IAAI,SAAS,QAAQ;AAEvC,eAAS,MAAM,IAAI;AAAA,QAClB;AAAA,QACA,CAACA,WAAoB,aAAa;AACjC,uBAAa,OAAO,KAAK,KAAK;AAE9B,gBAAM,cAAc,KAAK,kBAAkB,KAAK,OAAO,OAAO;AAE9D,sBAAY,IAAI,CAAC,KAAK,UAAU;AAC/B,gBAAI,KAAK;AACR,sBAAQ,MAAM,GAAG;AACjB,oBAAM,IAAI,MAAM,kDAAkD;AAAA,YACnE;AAEA,gBAAI,+BAAO,aAAa;AACvB,sBAAQ,IAAI,+BAAO,UAAU;AAC7B,oBAAM,IAAI,MAAM,+CAA+C;AAAA,YAChE;AAEA,qBAAS;AACT,oBAAQ,IAAI,kDAAkD;AAAA,UAC/D,CAAC;AAAA,QACF;AAAA,MACD;AAEA,eAAS,MAAM,gBAAgB;AAAA,QAC9B;AAAA,QACA,CAAC,gBAA6B;AAC7B,qBAAW,QAAQ,YAAY;AAC9B,kBAAM,OAAO,GAAG,GAAG,IAAI,IAAI;AAC3B,kBAAM,EAAE,SAAS,UAAU,IAAI,UAAQ,IAAI;AAE3C,kBAAM,SAAS,qBAAqB,UAAU,CAAC;AAE/C,wBAAY,UAAU,GAAG,IAAI,SAAS,IAAI,UAAU,MAAM,CAAC;AAAA,UAC5D;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA;AACD;AAEO,SAAS,aAAa,MAAc,WAAqB;AAC/D,QAAM,YACL,OAAO,WAAW,eAAe,OAAO,OAAO,aAAa;AAE7D,MAAI,WAAW;AACd,aACE,iBAAiB,0BAA0B,IAAI,IAAI,EACnD,QAAQ,CAAC,YAAY;AACrB,YAAM,YAAY,QAAQ,aAAa,kBAAkB,KAAK;AAC9D,YAAM,QAAQ,KAAK,MAAM,SAAS;AAClC,kBAAY,SAAS,UAAU,KAAK,CAAC;AAAA,IACtC,CAAC;AAAA,EACH;AACD;","names":["compiler"]}

package/src/index.ts

@@ -1,113 +0,0 @@
-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

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

package/tsup.config.ts

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