@wrdagency/react-islands 1.0.5 → 2.0.0

package/src/bin/rollup/index.ts

@@ -0,0 +1,178 @@
+import commonjsPlugin from "@rollup/plugin-commonjs";
+import resolvePlugin from "@rollup/plugin-node-resolve";
+import replacePlugin from "@rollup/plugin-replace";
+import terserPlugin from "@rollup/plugin-terser";
+import typescriptPlugin from "@rollup/plugin-typescript";
+import path from "path";
+import {
+	InputOptions,
+	ModuleFormat,
+	OutputOptions,
+	Plugin,
+	rollup,
+	RollupBuild,
+	RollupOptions,
+} from "rollup";
+import { typescriptPaths as typescriptPathsPlugin } from "rollup-plugin-typescript-paths";
+import * as codeGen from "./generation";
+import { BuildOptions, normalizeOptions } from "./options";
+import { runScriptAfterBuildPlugin } from "./plugins/runScriptAfterBuildPlugin";
+import { virtualizeDependencyPlugin } from "./plugins/virtualizeDependencyPlugin";
+
+export function createRollupConfigs(options: BuildOptions): RollupOptions[] {
+	const normalized = normalizeOptions(options);
+	const { name, input, output, minify, ssg, jsx, typescript, common } =
+		normalized;
+
+	const configs: (RollupOptions | null)[] = [];
+
+	const createRollupConfig = (opts: {
+		active?: boolean;
+		name?: string;
+		subName: string;
+		format: ModuleFormat;
+		globals?: Record<string, string>;
+		prefix?: (name: string) => string;
+		suffix?: (name: string) => string;
+		plugins?: Plugin[];
+	}): RollupOptions | null => {
+		const {
+			active = true,
+			name: mainName = `Islands.${name}`,
+			subName,
+			format,
+			globals = {},
+			prefix,
+			suffix,
+			plugins = [],
+		} = opts;
+
+		if (!active) {
+			return null;
+		}
+
+		return {
+			input,
+			external: Object.keys(globals),
+			jsx,
+			output: {
+				name: mainName,
+				globals,
+				format,
+				entryFileNames: `[name]/${subName}`,
+				dir: output,
+				banner: prefix && ((chunk) => prefix(chunk.name)),
+				footer: suffix && ((chunk) => suffix(chunk.name)),
+			},
+			plugins: [
+				resolvePlugin({
+					extensions: [
+						".cjs",
+						".mjs",
+						".js",
+						".json",
+						".node",
+						".jsx",
+						".ts",
+						".tsx",
+					],
+				}),
+				commonjsPlugin(),
+				replacePlugin({
+					preventAssignment: true,
+					"process.env.NODE_ENV": JSON.stringify("production"),
+				}),
+				minify && terserPlugin(),
+				typescript &&
+					typescriptPlugin({
+						jsx,
+					}),
+				typescript && typescriptPathsPlugin(),
+				...plugins,
+			],
+		};
+	};
+
+	configs.push(
+		createRollupConfig({
+			active: true,
+			subName: "client.js",
+			format: "iife",
+			globals: common,
+			suffix: (name) => `\nwindow.Islands['${name}']?.render('${name}')`,
+		})
+	);
+
+	configs.push(
+		createRollupConfig({
+			active: ssg,
+			subName: "server.cjs",
+			format: "cjs",
+			suffix: () =>
+				codeGen.renderComponentToFile("ssg.html", "module.exports.component"),
+			plugins: [
+				runScriptAfterBuildPlugin({
+					deleteAfterRunning: true,
+				}),
+			],
+		})
+	);
+
+	return configs.filter(isRollupOptions);
+}
+
+export function createCommonConfig(options: BuildOptions): RollupOptions {
+	const normalized = normalizeOptions(options);
+	const { output, minify, jsx, common } = normalized;
+
+	return {
+		input: "virtual-entry",
+		jsx,
+		output: {
+			name: "Islands._Common",
+			file: path.resolve(output, "common.js"),
+			format: "iife",
+		},
+		plugins: [
+			replacePlugin({
+				preventAssignment: true,
+				"process.env.NODE_ENV": JSON.stringify("production"),
+			}),
+			virtualizeDependencyPlugin({
+				dependencies: common,
+				namespace: "Islands._Common",
+			}),
+			resolvePlugin(),
+			commonjsPlugin(),
+			minify && terserPlugin(),
+		],
+	};
+}
+
+function isRollupOptions(
+	config: RollupOptions | null
+): config is RollupOptions {
+	return config !== null;
+}
+
+export async function runRollup(
+	inputOptions: InputOptions,
+	outputOptions: OutputOptions
+) {
+	let bundle: RollupBuild | undefined;
+	let buildFailed = false;
+
+	try {
+		bundle = await rollup(inputOptions);
+		await bundle.write(outputOptions);
+	} catch (error) {
+		buildFailed = true;
+		console.error(error);
+	}
+
+	if (bundle) {
+		await bundle.close();
+	}
+
+	return !buildFailed;
+}

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"]}