@wrdagency/react-islands 2.0.11 → 2.0.13

package/bin/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import e,{readFileSync as n}from"fs";import t from"yocto-spinner";import r from"@rollup/plugin-commonjs";import o from"@rollup/plugin-node-resolve";import s from"@rollup/plugin-replace";import i from"@rollup/plugin-terser";import a from"@rollup/plugin-typescript";import c from"path";import{rollup as l}from"rollup";import{typescriptPaths as p}from"rollup-plugin-typescript-paths";import{exec as u}from"child_process";import{promisify as m}from"util";import d from"command-line-args";import f from"command-line-usage";function g(e,n){let t="";return t+=function(e){return`import * as ${y(e)} from "${e}";\n`}(e),t+=`${n} = ${y(e)};\n`,t}function y(e){return e.replace(/^@/,"").replace(/\//g,"_").replace(/[-_](.)/g,(e,n)=>n.toUpperCase()).replace(/^[a-z]/,e=>e.toUpperCase())}const h=e=>({name:e.name,input:e.input,output:e.output||"./dist/",minify:j(e.minify,!0),ssg:j(e.ssg,!0),jsx:e.jsx||"react-jsx",typescript:j(e.ssg,!1),common:v(e.common||["react","react-dom/client","@wrdagency/react-islands"])}),j=(e,n)=>!1!==e&&(!0===e||n),v=(e=[""])=>Array.isArray(e)?e.reduce((e,n)=>({...e,[n]:"Islands._Common."+y(n)}),{}):e,w=m(u),x=async e=>{try{const{stdout:n,stderr:t}=await w(e);return n&&console.log(n),t&&console.error(t),n}catch(e){throw console.error(e),e}};function b(n){const{deleteAfterRunning:t=!1}=n;return{name:"rollup-plugin-run-script-after-builder",writeBundle(n,r){const o=n.dir?n.dir:c.dirname(n.file||"");for(const[n,s]of Object.entries(r)){const r=c.resolve(o,n);if("chunk"!==s.type||!s.isEntry)return;if(!r&&!r.endsWith("js"))return;if(!e.existsSync(r))return;x(`node ${r}`).then(()=>{t&&e.unlinkSync(r)})}}}}function $(e){const{dependencies:n,namespace:t=""}=e,r="\0virtual-entry";return{name:"rollup-plugin-virtualize-dependency",resolveId:e=>"virtual-entry"===e?r:null,load(e){if(e!==r)return null;let o=function(e){return e.split(".").filter(Boolean).map((e,n,t)=>{const r="window."+t.slice(0,n+1).join(".");return`${r} = ${r} || {}`}).join(";\n")}(t)+";\n";for(const[e,t]of Object.entries(n))o+=g(e,t);return o}}}function O(e){const n=h(e),{name:t,input:c,output:l,minify:u,ssg:m,jsx:d,typescript:f,common:g}=n,y=[],j=e=>{const{active:n=!0,name:m=`Islands.${t}`,subName:g,format:y,globals:h={},prefix:j,suffix:v,plugins:w=[]}=e;return n?{input:c,external:Object.keys(h),jsx:d,output:{name:m,globals:h,format:y,entryFileNames:`[name]/${g}`,dir:l,banner:j&&(e=>j(e.name)),footer:v&&(e=>v(e.name))},plugins:[o({extensions:[".cjs",".mjs",".js",".json",".node",".jsx",".ts",".tsx"]}),r(),s({preventAssignment:!0,"process.env.NODE_ENV":JSON.stringify("production")}),u&&i(),f&&a({noForceEmit:!0,compilerOptions:{outDir:l,jsx:d}}),f&&p(),...w]}:null};return y.push(j({active:!0,subName:"client.js",format:"iife",globals:g,suffix:e=>`\nwindow.Islands['${e}']?.render('${e}')`})),y.push(j({active:m,subName:"server.cjs",format:"cjs",suffix:()=>`var server = require('react-dom/server');\n\tvar fs = require('node:fs/promises');\n\tvar path = require('node:path');\nconst html = server.renderToString( module.exports.component( {} ) );\nconst file = path.resolve(__dirname, '${"ssg.html"}');\nfs.writeFile(file, html, { flag: "w+" });`,plugins:[b({deleteAfterRunning:!0})]})),y.filter(k)}function k(e){return null!==e}async function N(e,n){let t,r=!1;try{t=await l(e),await t.write(n)}catch(e){r=!0,console.error(e)}return t&&await t.close(),!r}!async function(e){const{command:n,help:t=!1,_unknown:r=[]}=d([{name:"command",type:String,defaultOption:!0},{name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}],{stopAtFirstUnknown:!0});if(n&&n in e)return e[n].run([...r,t&&"--help"].filter(Boolean));if(t){const n=Object.keys(e).map(n=>({name:n,summary:e[n].description})),t=f([{header:"Synopsis",content:"npx react-islands <command> <options>"},{header:"Command List",content:n}]);console.log(t)}else console.error(`Command '${n}' not recognized by React Islands.`)}({build:new class{args;callback;description;constructor(e){let{args:n,callback:t,description:r}=e;n.push({name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}),this.args=n,this.callback=t,this.description=r}run(e){const{help:n,...t}=d(this.args,{argv:e});if(!n)return this.callback(t);console.log(f([{header:"Options",optionList:this.args}]))}}({description:"Build and statically render the islands.",args:[{name:"config",type:String,alias:"c",description:"The config file to use.",defaultValue:"islands.config.json"}],callback:async e=>{const{config:a}=e,l=JSON.parse(n(a,"utf8")),{islands:p,...u}=l;if(!1!==u.common){const e=t({text:"Creating common dependencies file..."}).start(),n=function(e){const n=h(e),{output:t,minify:a,jsx:l,common:p}=n;return{input:"virtual-entry",jsx:l,output:{name:"Islands._Common",file:c.resolve(t,"common.js"),format:"iife"},plugins:[s({preventAssignment:!0,"process.env.NODE_ENV":JSON.stringify("production")}),$({dependencies:p,namespace:"Islands._Common"}),o(),r(),a&&i()]}}(u),{output:a,...l}=n;await N(l,a)?e.success("Succeeded: common dependencies file"):e.warning("Failed: common dependencies file")}for(const[e,n]of Object.entries(p)){const r=t({text:`Creating island ${e}...`}).start(),o=O({input:n,name:e,...u});let s=!1;for(const e of o){const{output:n,...t}=e;await N(t,n)||(s=!0)}o.map(async e=>{}),s?r.warning(`Failed island: ${e}`):r.success(`Succeeded island: ${e}`)}}})});
+import e from"@rollup/plugin-commonjs";import n from"@rollup/plugin-node-resolve";import t from"@rollup/plugin-replace";import o from"@rollup/plugin-terser";import r from"path";import{rollup as s,watch as i}from"rollup";import a from"@rollup/plugin-typescript";import{typescriptPaths as c}from"rollup-plugin-typescript-paths";import l,{readFileSync as u}from"fs";import{exec as p}from"child_process";import{promisify as m}from"util";import d from"yocto-spinner";import f from"command-line-args";import g from"command-line-usage";class h{lines=[];import(e,n){return n||(n=h.packageNameToProperty(e)),this.add(`import * as ${n} from "${e}"`)}createGlobalObject(e){return this.add(e.split(".").map(e=>e.trim()).filter(Boolean).map((e,n,t)=>{const o="window."+t.slice(0,n+1).join(".");return`${o} = ${o} || {}`}))}setGlobalObjectProperty(e,n,t){return this.add(`window.${e}['${n}'] = ${t}`)}static packageNameToProperty(e){return e.replace(/^@/,"").replace(/\//g,"_").replace(/[-_](.)/g,(e,n)=>n.toUpperCase()).replace(/^[a-z]/,e=>e.toUpperCase())}static renderReactComponentToFile(e,n){return`var server = require('react-dom/server');\nvar fs = require('node:fs/promises');\nvar path = require('node:path');\nconst html = server.renderToString( ${n}( {} ) );\nconst file = path.resolve(__dirname, '${e}');\nfs.writeFile(file, html, { flag: "w+" });`}add(e){return Array.isArray(e)?this.lines.push(...e):this.lines.push(e),this}out(){return this.lines.join(";\n")}}function y(e){const{dependencies:n,namespace:t=""}=e,o="\0virtual-entry";return{name:"rollup-plugin-virtualize-dependency",resolveId:e=>"virtual-entry"===e?o:null,load(e){if(e!==o)return null;const r=new h;r.createGlobalObject(t);for(const e of n){const n=h.packageNameToProperty(e);r.import(e,n),r.setGlobalObjectProperty(t,n,n)}return r.out()}}}async function w(e){const{output:n,...t}=e;let o,r=!1;try{o=await s(t),await o.write(n)}catch(e){r=!0,console.error(e)}return o&&await o.close(),!r}function j(e){const{output:n,...t}=e,o=i({...t,output:n,watch:{clearScreen:!1}});return o.on("event",e=>{"BUNDLE_END"===e.code&&e.result&&e.result.close()}),o}function b(s){const{output:i,minify:a,jsx:c,common:l}=s;return{input:"virtual-entry",jsx:c,output:{name:"Islands._Common",file:r.resolve(i,"common.js"),format:"iife"},plugins:[t({preventAssignment:!0,"process.env.NODE_ENV":JSON.stringify("production")}),y({dependencies:l,namespace:"Islands._Common"}),n(),e(),a&&o()]}}const v=m(p);class ${line(e){console.log(e)}async spinner(e,n){const t=d({text:`${e}...`}).start();await n()?t.success(`Succeeded: ${e}`):t.warning(`Failed: ${e}`)}watcher(e,n){const t=d({text:`Rebuilding ${e}...`});let o=0;n.on("event",n=>{if("START"===n.code)t.clear(),t.start(),o=Date.now();else if("END"===n.code){const n=Date.now()-o;t.success(`Rebuilt: ${e} in ${n}ms.`)}else"ERROR"===n.code&&(t.warning(`Failed: ${e}`),console.error(n.error))})}async command(e){try{const{stdout:n,stderr:t}=await v(e);return n&&console.log(n),t&&console.error(t),n}catch(e){throw console.error(e),e}}}function x(e){const{deleteAfterRunning:n=!1}=e;return{name:"rollup-plugin-run-script-after-builder",writeBundle(e,t){const o=e.dir?e.dir:r.dirname(e.file||"");for(const[e,s]of Object.entries(t)){const t=r.resolve(o,e);if("chunk"!==s.type||!s.isEntry)return;if(!t&&!t.endsWith("js"))return;if(!l.existsSync(t))return;(new $).command(`node ${t}`).then(()=>{n&&l.unlinkSync(t)})}}}}function N(r,s){const{name:i,input:l,output:u,minify:p,ssg:m,jsx:d,typescript:f,common:g}=r,{name:h=`Islands.${i}`,subName:y,format:w,globals:j={},prefix:b,suffix:v,plugins:$=[]}=s;return{input:l,external:Object.keys(j),jsx:d,output:{name:h,globals:j,format:w,entryFileNames:`[name]/${y}`,dir:u,banner:b&&(e=>b(e.name)),footer:v&&(e=>v(e.name))},plugins:[n({extensions:[".cjs",".mjs",".js",".json",".node",".jsx",".ts",".tsx"]}),e(),t({preventAssignment:!0,"process.env.NODE_ENV":JSON.stringify("production")}),p&&o(),f&&a({outputToFilesystem:!0,noForceEmit:!0,compilerOptions:{outDir:u,jsx:d}}),f&&c(),...$]}}function O(e){return N(e,{subName:"client.js",format:"iife",globals:e.common.reduce((e,n)=>({...e,[n]:`Islands._Common["${h.packageNameToProperty(n)}"]`}),{}),suffix:e=>`\nwindow.Islands['${e}']?.render('${e}')`})}function k(e){const n=[O(e)];return e.ssg&&n.push(function(e){return N(e,{subName:"server.cjs",format:"cjs",suffix:()=>h.renderReactComponentToFile("ssg.html","module.exports.component"),plugins:[x({deleteAfterRunning:!0})]})}(e)),n}function S(e){return async function(e){let n=!0;for(const t of e)await w(t)||(n=!1);return n}(k(e))}function C(e){return j(O(e))}class T{args;callback;description;constructor(e){let{args:n,callback:t,description:o}=e;n.push({name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}),this.args=n,this.callback=t,this.description=o}run(e){const{help:n,...t}=f(this.args,{argv:e});if(!n)return this.callback(t);console.log(g([{header:"Options",optionList:this.args}]))}}function _(e){const n=u(e,"utf8");return function(e){const n=(e,n)=>!1!==e&&(!0===e||n);return{islands:e.islands,output:e.output||"./dist/",minify:n(e.minify,!0),ssg:n(e.ssg,!0),jsx:e.jsx||"react-jsx",typescript:n(e.ssg,!1),common:e.common||["react","react/jsx-runtime","react-dom/client","@wrdagency/react-islands"]}}(JSON.parse(n))}!async function(e){const{command:n,help:t=!1,_unknown:o=[]}=f([{name:"command",type:String,defaultOption:!0},{name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}],{stopAtFirstUnknown:!0});if(n&&n in e)return e[n].run([...o,t&&"--help"].filter(Boolean));if(t){const n=Object.keys(e).map(n=>({name:n,summary:e[n].description})),t=g([{header:"Synopsis",content:"npx react-islands <command> <options>"},{header:"Command List",content:n}]);console.log(t)}else console.error(`Command '${n}' not recognized by React Islands.`)}({build:new T({description:"Build and statically render the islands.",args:[{name:"config",type:String,alias:"c",description:"The config file to use.",defaultValue:"islands.config.json"}],callback:async e=>{const{config:n}=e,t=new $,o=_(n);o.common&&await t.spinner("Creating common dependencies file",async()=>w(b(o)));for(const[e,n]of Object.entries(o.islands))await t.spinner(`Creating island ${e}`,()=>S({name:e,input:n,...o}))}}),watch:new T({description:"Watch & build the islands for development",args:[{name:"config",type:String,alias:"c",description:"The config file to use.",defaultValue:"islands.config.json"}],callback:async e=>{const{config:n}=e,t=new $,o=_(n);if(o.common){const e=j(b(o));t.watcher("Common Dependencies",e)}for(const[e,n]of Object.entries(o.islands)){const r=C({name:e,input:n,...o});t.watcher(e,r)}}})});

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { JsxPreset } from 'rollup';
 
 interface IslandRenderOptions {
     shouldHydrate: boolean;
@@ -34,16 +33,15 @@ declare function withProps<T>(component: FC<T>, setProps: Partial<T>): FC<T>;
  */
 declare function isServer(): boolean;
 
-type BuildOptions = {
-    name: string;
-    input: string;
+type ConfigOptions = {
+    islands: Record<string, string>;
     output: string;
     minify?: boolean;
     ssg?: boolean;
-    jsx?: JsxPreset;
+    jsx?: "react" | "react-jsx" | "preserve" | "preserve-react";
     typescript?: boolean;
-    common?: string[] | Record<string, string>;
+    common?: string[];
 };
 
 export { Island, isServer, withProps };
-export type { BuildOptions };
+export type { ConfigOptions };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@wrdagency/react-islands",
-	"version": "2.0.11",
+	"version": "2.0.13",
 	"description": "",
 	"main": "./dist/index.js",
 	"files": [

package/src/bin/commands/build.ts

@@ -1,8 +1,7 @@
-import { readFileSync } from "fs";
-import { OutputOptions } from "rollup";
-import yoctoSpinner from "yocto-spinner";
-import { createCommonConfig, createRollupConfigs, runRollup } from "../rollup";
+import { buildCommon, buildIsland } from "../rollup";
 import { Command } from "../util/command";
+import { readConfig } from "../util/config";
+import { Output } from "../util/output";
 
 export default new Command({
 	description: "Build and statically render the islands.",
@@ -17,57 +16,27 @@ export default new Command({
 		},
 	],
 	callback: async (args) => {
-		const { config } = args;
+		const { config: configPath } = args;
 
-		const configJson = JSON.parse(readFileSync(config, "utf8"));
+		const output = new Output();
+		const config = readConfig(configPath);
 
-		const { islands, ...restConfig } = configJson;
-
-		if (restConfig.common !== false) {
-			const spinner = yoctoSpinner({
-				text: `Creating common dependencies file...`,
-			}).start();
-
-			const commonRollupConfig = createCommonConfig(restConfig);
-			const { output, ...input } = commonRollupConfig;
-			const success = await runRollup(input, output as OutputOptions);
-
-			if (success) {
-				spinner.success(`Succeeded: common dependencies file`);
-			} else {
-				spinner.warning(`Failed: common dependencies file`);
-			}
+		// 1. Build common dependencies.
+		if (config.common) {
+			await output.spinner("Creating common dependencies file", async () => {
+				return buildCommon(config);
+			});
 		}
 
-		for (const [name, input] of Object.entries(islands)) {
-			const spinner = yoctoSpinner({
-				text: `Creating island ${name}...`,
-			}).start();
-
-			const rollupConfigs = createRollupConfigs({
-				input,
-				name,
-				...restConfig,
+		// 2. Setup watcher for each island.
+		for (const [name, input] of Object.entries(config.islands)) {
+			await output.spinner(`Creating island ${name}`, () => {
+				return buildIsland({
+					name,
+					input,
+					...config,
+				});
 			});
-
-			let hadFailure = false;
-
-			for (const rollupConfig of rollupConfigs) {
-				const { output, ...input } = rollupConfig;
-				const success = await runRollup(input, output as OutputOptions);
-
-				if (!success) {
-					hadFailure = true;
-				}
-			}
-
-			rollupConfigs.map(async (options) => {});
-
-			if (hadFailure) {
-				spinner.warning(`Failed island: ${name}`);
-			} else {
-				spinner.success(`Succeeded island: ${name}`);
-			}
 		}
 	},
 });

package/src/bin/commands/watch.ts

@@ -0,0 +1,41 @@
+import { watchCommon, watchIsland } from "../rollup";
+import { Command } from "../util/command";
+import { readConfig } from "../util/config";
+import { Output } from "../util/output";
+
+export default new Command({
+	description: "Watch & build the islands for development",
+	args: [
+		{
+			name: "config",
+			type: String,
+			alias: "c",
+			// @ts-ignore
+			description: "The config file to use.",
+			defaultValue: "islands.config.json",
+		},
+	],
+	callback: async (args) => {
+		const { config: configPath } = args;
+
+		const output = new Output();
+		const config = readConfig(configPath);
+
+		// 1. Build common dependencies.
+		if (config.common) {
+			const watcher = watchCommon(config);
+			output.watcher("Common Dependencies", watcher);
+		}
+
+		// 2. Setup watcher for each island.
+		for (const [name, input] of Object.entries(config.islands)) {
+			const watcher = watchIsland({
+				name,
+				input,
+				...config,
+			});
+
+			output.watcher(name, watcher);
+		}
+	},
+});

package/src/bin/index.ts

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 import build from "./commands/build";
+import watch from "./commands/watch";
 import { commandset } from "./util/command";
 
 commandset({
 	build,
+	watch,
 });

package/src/bin/rollup/common.ts

@@ -0,0 +1,48 @@
+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 path from "path";
+import { RollupOptions } from "rollup";
+import { NormalizedConfigOptions } from "../util/config";
+import { virtualizeDependencyPlugin } from "./plugins/virtualizeDependencyPlugin";
+import { runRollup, watchRollup } from "./run";
+
+export function createCommonConfig(
+	options: NormalizedConfigOptions
+): RollupOptions {
+	const { output, minify, jsx, common } = options;
+
+	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(),
+		],
+	};
+}
+
+export function buildCommon(
+	options: NormalizedConfigOptions
+): Promise<boolean> {
+	return runRollup(createCommonConfig(options));
+}
+
+export function watchCommon(options: NormalizedConfigOptions) {
+	return watchRollup(createCommonConfig(options));
+}

package/src/bin/rollup/index.ts

@@ -1,182 +1,3 @@
-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({
-						noForceEmit: true,
-						compilerOptions: {
-							outDir: output,
-							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;
-}
+export * from "./common";
+export * from "./island";
+export * from "./run";

package/src/bin/rollup/island.ts

@@ -0,0 +1,141 @@
+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 { ModuleFormat, Plugin, RollupOptions } from "rollup";
+import { typescriptPaths as typescriptPathsPlugin } from "rollup-plugin-typescript-paths";
+import { CodeGen } from "../util/code-gen";
+import { IndividualIslandConfigOptions } from "../util/config";
+import { runScriptAfterBuildPlugin } from "./plugins/runScriptAfterBuildPlugin";
+import { runRollups, watchRollup } from "./run";
+
+function createIslandRollupConfig(
+	config: IndividualIslandConfigOptions,
+	opts: {
+		name?: string;
+		subName: string;
+		format: ModuleFormat;
+		globals?: Record<string, string>;
+		prefix?: (name: string) => string;
+		suffix?: (name: string) => string;
+		plugins?: Plugin[];
+	}
+): RollupOptions {
+	const { name, input, output, minify, ssg, jsx, typescript, common } = config;
+
+	const {
+		name: mainName = `Islands.${name}`,
+		subName,
+		format,
+		globals = {},
+		prefix,
+		suffix,
+		plugins = [],
+	} = opts;
+
+	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({
+					outputToFilesystem: true,
+					noForceEmit: true,
+					compilerOptions: {
+						outDir: output,
+						jsx,
+					},
+				}),
+			typescript && typescriptPathsPlugin(),
+			...plugins,
+		],
+	};
+}
+
+export function createIslandRollupConfigClient(
+	config: IndividualIslandConfigOptions
+): RollupOptions {
+	return createIslandRollupConfig(config, {
+		subName: "client.js",
+		format: "iife",
+		globals: config.common.reduce((globals, packageName) => {
+			return {
+				...globals,
+				[packageName]: `Islands._Common["${CodeGen.packageNameToProperty(
+					packageName
+				)}"]`,
+			};
+		}, {}),
+		suffix: (name) => `\nwindow.Islands['${name}']?.render('${name}')`,
+	});
+}
+
+export function createIslandRollupConfigServer(
+	config: IndividualIslandConfigOptions
+): RollupOptions {
+	return createIslandRollupConfig(config, {
+		subName: "server.cjs",
+		format: "cjs",
+		suffix: () =>
+			CodeGen.renderReactComponentToFile(
+				"ssg.html",
+				"module.exports.component"
+			),
+		plugins: [
+			runScriptAfterBuildPlugin({
+				deleteAfterRunning: true,
+			}),
+		],
+	});
+}
+
+export function createIslandRollupConfigs(
+	config: IndividualIslandConfigOptions
+): RollupOptions[] {
+	const configs: RollupOptions[] = [createIslandRollupConfigClient(config)];
+
+	if (config.ssg) {
+		configs.push(createIslandRollupConfigServer(config));
+	}
+
+	return configs;
+}
+
+export function buildIsland(
+	options: IndividualIslandConfigOptions
+): Promise<boolean> {
+	return runRollups(createIslandRollupConfigs(options));
+}
+
+export function watchIsland(options: IndividualIslandConfigOptions) {
+	return watchRollup(createIslandRollupConfigClient(options));
+}

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

@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import { Plugin } from "rollup";
-import { consoleExecute } from "../console";
+import { Output } from "../../util/output";
 
 type Options = {
 	deleteAfterRunning?: boolean;
@@ -32,7 +32,8 @@ export function runScriptAfterBuildPlugin(opts: Options): Plugin {
 					return;
 				}
 
-				consoleExecute(`node ${filePath}`).then(() => {
+				const out = new Output();
+				out.command(`node ${filePath}`).then(() => {
 					if (deleteAfterRunning) {
 						fs.unlinkSync(filePath);
 					}

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

@@ -1,8 +1,8 @@
 import { Plugin } from "rollup";
-import * as codeGen from "../generation";
+import { CodeGen } from "../../util/code-gen";
 
 type Options = {
-	dependencies: Record<string, string>;
+	dependencies: string[];
 	namespace?: string;
 };
 
@@ -22,13 +22,16 @@ export function virtualizeDependencyPlugin(opts: Options): Plugin {
 				return null;
 			}
 
-			let str = codeGen.createGlobalObject(namespace) + ";\n";
+			const code = new CodeGen();
+			code.createGlobalObject(namespace);
 
-			for (const [dependency, name] of Object.entries(dependencies)) {
-				str += codeGen.importAndGlobalisePackage(dependency, name);
+			for (const packageName of dependencies) {
+				const name = CodeGen.packageNameToProperty(packageName);
+				code.import(packageName, name);
+				code.setGlobalObjectProperty(namespace, name, name);
 			}
 
-			return str;
+			return code.out();
 		},
 	};
 }

package/src/bin/rollup/run.ts

@@ -0,0 +1,65 @@
+import {
+	OutputOptions,
+	rollup,
+	RollupBuild,
+	RollupOptions,
+	RollupWatcher,
+	watch,
+} from "rollup";
+
+export async function runRollup(options: RollupOptions): Promise<boolean> {
+	const { output, ...input } = options;
+
+	let bundle: RollupBuild | undefined;
+	let buildFailed = false;
+
+	try {
+		bundle = await rollup(input);
+		await bundle.write(output as OutputOptions);
+	} catch (error) {
+		buildFailed = true;
+		console.error(error);
+	}
+
+	if (bundle) {
+		await bundle.close();
+	}
+
+	return !buildFailed;
+}
+
+export async function runRollups(options: RollupOptions[]): Promise<boolean> {
+	let isSuccess = true;
+
+	for (const rollupConfig of options) {
+		if (!(await runRollup(rollupConfig))) {
+			isSuccess = false;
+		}
+	}
+
+	return isSuccess;
+}
+
+export function watchRollup(options: RollupOptions): RollupWatcher {
+	const { output, ...input } = options;
+
+	const watcher = watch({
+		...input,
+		output,
+		watch: {
+			clearScreen: false,
+		},
+	});
+
+	watcher.on("event", (evt) => {
+		if (evt.code === "BUNDLE_END" && evt.result) {
+			evt.result.close();
+		}
+	});
+
+	return watcher;
+}
+
+export function watchRollups(options: RollupOptions[]): RollupWatcher[] {
+	return options.map((rollupConfig) => watchRollup(rollupConfig));
+}

package/src/bin/util/code-gen.ts

@@ -0,0 +1,66 @@
+export class CodeGen {
+	private lines: string[] = [];
+
+	public import(packageName: string, as?: string) {
+		if (!as) {
+			as = CodeGen.packageNameToProperty(packageName);
+		}
+
+		return this.add(`import * as ${as} from "${packageName}"`);
+	}
+
+	public createGlobalObject(scope: string): this {
+		return this.add(
+			scope
+				.split(".")
+				.map((s) => s.trim())
+				.filter(Boolean)
+				.map((_, index, levels) => {
+					const path = "window." + levels.slice(0, index + 1).join(".");
+					return `${path} = ${path} || {}`;
+				})
+		);
+	}
+
+	public setGlobalObjectProperty(
+		scope: string,
+		key: string,
+		value: string
+	): this {
+		return this.add(`window.${scope}['${key}'] = ${value}`);
+	}
+
+	public static packageNameToProperty(packageName: string): string {
+		return packageName
+			.replace(/^@/, "")
+			.replace(/\//g, "_")
+			.replace(/[-_](.)/g, (_, c) => c.toUpperCase())
+			.replace(/^[a-z]/, (c) => c.toUpperCase());
+	}
+
+	public static renderReactComponentToFile(
+		outputFilename: string,
+		component: string
+	) {
+		return `var server = require('react-dom/server');
+var fs = require('node:fs/promises');
+var path = require('node:path');
+const html = server.renderToString( ${component}( {} ) );
+const file = path.resolve(__dirname, '${outputFilename}');
+fs.writeFile(file, html, { flag: "w+" });`;
+	}
+
+	public add(line: string | string[]): this {
+		if (Array.isArray(line)) {
+			this.lines.push(...line);
+		} else {
+			this.lines.push(line);
+		}
+
+		return this;
+	}
+
+	public out(): string {
+		return this.lines.join(";\n");
+	}
+}

package/src/bin/util/config.ts

@@ -0,0 +1,68 @@
+import { readFileSync } from "fs";
+
+export type ConfigOptions = {
+	islands: Record<string, string>;
+	output: string;
+	minify?: boolean;
+	ssg?: boolean;
+	jsx?: "react" | "react-jsx" | "preserve" | "preserve-react";
+	typescript?: boolean;
+	common?: string[];
+};
+
+export type NormalizedConfigOptions = {
+	islands: Record<string, string>;
+	output: string;
+	minify: boolean;
+	ssg: boolean;
+	jsx: "react" | "react-jsx" | "preserve" | "preserve-react";
+	typescript: boolean;
+	common: string[];
+};
+
+export type IndividualIslandConfigOptions = Omit<
+	NormalizedConfigOptions,
+	"islands"
+> & {
+	name: string;
+	input: string;
+};
+
+export function readConfig(path: string): NormalizedConfigOptions {
+	const contents = readFileSync(path, "utf8");
+	const json = JSON.parse(contents) as ConfigOptions;
+
+	return normalizeBuildOptions(json);
+}
+
+export function normalizeBuildOptions(
+	options: ConfigOptions
+): NormalizedConfigOptions {
+	const normalizeBoolean = (
+		value: boolean | undefined | null | void,
+		fallback: boolean
+	): boolean => {
+		if (value === false) {
+			return false;
+		} else if (value === true) {
+			return true;
+		} else {
+			return fallback;
+		}
+	};
+
+	return {
+		islands: options.islands,
+		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: options.common || [
+			"react",
+			"react/jsx-runtime",
+			"react-dom/client",
+			"@wrdagency/react-islands",
+		],
+	};
+}

package/src/bin/util/output.ts

@@ -0,0 +1,67 @@
+import { exec } from "child_process";
+import { RollupWatcher } from "rollup";
+import { promisify } from "util";
+import yoctoSpinner from "yocto-spinner";
+
+const execPromise = promisify(exec);
+
+export class Output {
+	public line(line: string) {
+		console.log(line);
+	}
+
+	public async spinner(message: string, callback: () => Promise<boolean>) {
+		const spinner = yoctoSpinner({
+			text: `${message}...`,
+		}).start();
+
+		const success = await callback();
+
+		if (success) {
+			spinner.success(`Succeeded: ${message}`);
+		} else {
+			spinner.warning(`Failed: ${message}`);
+		}
+	}
+
+	public watcher(name: string, watcher: RollupWatcher) {
+		const spinner = yoctoSpinner({
+			text: `Rebuilding ${name}...`,
+		});
+
+		let timeAtStart = 0;
+
+		watcher.on("event", (evt) => {
+			if (evt.code === "START") {
+				spinner.clear();
+				spinner.start();
+				timeAtStart = Date.now();
+			} else if (evt.code === "END") {
+				const timeElapsed = Date.now() - timeAtStart;
+				spinner.success(`Rebuilt: ${name} in ${timeElapsed}ms.`);
+			} else if (evt.code === "ERROR") {
+				spinner.warning(`Failed: ${name}`);
+				console.error(evt.error);
+			}
+		});
+	}
+
+	public async command(command: string) {
+		try {
+			const { stdout, stderr } = await execPromise(command);
+
+			if (stdout) {
+				console.log(stdout);
+			}
+
+			if (stderr) {
+				console.error(stderr);
+			}
+
+			return stdout;
+		} catch (e) {
+			console.error(e);
+			throw e;
+		}
+	}
+}

package/src/index.tsx

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

package/src/bin/rollup/console.ts

@@ -1,23 +0,0 @@
-import { exec } from "child_process";
-import { promisify } from "util";
-
-const execPromise = promisify(exec);
-
-export const consoleExecute = async (command: string) => {
-	try {
-		const { stdout, stderr } = await execPromise(command);
-
-		if (stdout) {
-			console.log(stdout);
-		}
-
-		if (stderr) {
-			console.error(stderr);
-		}
-
-		return stdout;
-	} catch (e) {
-		console.error(e);
-		throw e;
-	}
-};

package/src/bin/rollup/generation.ts

@@ -1,57 +0,0 @@
-export function createGlobalObject(namespace: string): string {
-	return namespace
-		.split(".")
-		.filter(Boolean)
-		.map((_, index, levels) => {
-			const path = "window." + levels.slice(0, index + 1).join(".");
-			return `${path} = ${path} || {}`;
-		})
-		.join(";\n");
-}
-
-export function assignGlobalProperty(
-	namespace: string,
-	property: string,
-	value: string
-): string {
-	const namespacing = createGlobalObject(namespace);
-	return `${namespacing};\nwindow.${namespace}['${property}'] = ${value};\n`;
-}
-
-export function importPackage(packageName: string): string {
-	return `import * as ${packageNameToProperty(
-		packageName
-	)} from "${packageName}";\n`;
-}
-
-export function importAndGlobalisePackage(
-	packageName: string,
-	globalName: string
-): string {
-	let str = "";
-
-	str += importPackage(packageName);
-	str += `${globalName} = ${packageNameToProperty(packageName)};\n`;
-
-	return str;
-}
-
-export function packageNameToProperty(packageName: string): string {
-	return packageName
-		.replace(/^@/, "")
-		.replace(/\//g, "_")
-		.replace(/[-_](.)/g, (_, c) => c.toUpperCase())
-		.replace(/^[a-z]/, (c) => c.toUpperCase());
-}
-
-export function renderComponentToFile(
-	filename: string,
-	component: string
-): string {
-	return `var server = require('react-dom/server');
-	var fs = require('node:fs/promises');
-	var path = require('node:path');
-const html = server.renderToString( module.exports.component( {} ) );
-const file = path.resolve(__dirname, '${filename}');
-fs.writeFile(file, html, { flag: "w+" });`;
-}

package/src/bin/rollup/options.ts

@@ -1,74 +0,0 @@
-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;
-	}
-};