@wrdagency/react-islands 2.1.5 → 2.2.0

package/README.md

@@ -10,77 +10,50 @@ Create your island. Here we use an existing component and use our Islands direct
 
 ```
 // ./islands/my-component.tsx
-import MyComponent from "./components";
-import { createIsland } from "@wrdagency/react-islands";
+import { Island } from "@wrdagency/react-islands";
 
-export const myComponentIsland = createIsland(MyComponent, {
+const MyCompontent: React.FC = () => {
+	<p>
+		Hello World
+	</p>
+}
+
+export default new Island(MyComponent, {
 	name: "my-component",
 });
 ```
 
-```
-// ./islands/index.ts
-export * from "./my-component";
-```
-
-On the client you can then render each of those islands. They'll automatically hook into the DOM where the selector is matched (similar to a portal) to create an island of reactivity.
-
-```
-// index.ts
-import * as islands from "./islands";
-import { hydrateIslands } from "@wrdagency/react-islands";
-
-hydrateIslands( islands );
-
-```
-
-Create a pre-render script. You can configure your build tool to use this as a seperate entrypoint.
-
-```
-// prerender.ts
-
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import * as islands from "./islands";
-import { prerenderIslands } from "@wrdagency/react-islands/server";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const outDir = path.resolve(__dirname, "ssg");
-
-prerenderIslands({ islands, outDir });
+Create a configuration file for your islands and use the built-in CLI commands to build, watch, or serve them.
+
+```json
+// islands.config.json
+{
+	"islands": {
+		"my-component": "./src/islands/my-component.tsx"
+	},
+	"output": "./dist/",
+	"minify": true,
+	"ssg": true,
+	"typescript": true
+}
 ```
 
-For our example we're using Vite. We'll build our prerendering script.
+Run the package CLI commands from your project root:
 
 ```
-npx vite build --ssr ./src/prerender.tsx --outDir ./dist
+npx react-islands build --config islands.config.json
+npx react-islands watch --config islands.config.json
+npx react-islands serve --config islands.config.json
 ```
 
-And then we can run that compiled script. It'll create all of our statically rendered islands and put them into the `outDir` we specified.
-
-```
-node ./dist/prerender.js
-```
-
-For convenience we'd recommend setting up a script in your `package.json` for this like so:
-
-```
-"scripts": {
-	"prerender": "npx vite build --ssr ./src/prerender.tsx --outDir ./dist && node ./dist/prerender.js",
-},
-```
+The `build` command compiles each island and produces the shared output bundle. The `watch` command rebuilds on file changes. The `serve` command starts a local dev server with hot reload and prints each island URL.
 
 ## API
 
-### `createIsland`
-
-`(component: React.FC, options: IslandOpts) => Island`
-
-Creates an island.
-
 #### `IslandOpts`
 
+When you create an Island you can pass the following options,
+
 | Options      | Type     | Default                   | Description                                                                                                                       |
 | ------------ | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | name         | string   | Required                  | The name of the island. Used for the default selector and the filename of pre-rendering.                                          |
@@ -99,12 +72,3 @@ Creates a version of your React component with props already set. Useful for cre
 `() => boolean`
 
 Checks if the current environment is the server. Useful for disabled certain features not available during the prerender step.
-
-### `prerenderIslands`
-
-`(options: PrerenderIslandsOpts) => Promise<void>`
-
-| Option  | Type                   | Description                                                                                                                              |
-| ------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| islands | Record<string, Island> | The islands the pre-render. The key of the record is not used, it's just useful to accept a record if we're using `import * as Islands`. |
-| ourDir  | string                 | Path of the directory to output the static HTML to. This directory will be emptied before pre-rendering begins.                          |

package/bin/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-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 b(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 j(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,define:h}=r,{subName:y,format:w,globals:b={},prefix:j,suffix:v,plugins:$=[]}=s;return{input:l,external:Object.keys(b),jsx:d,output:{name:`Islands.${i}`,globals:b,format:w,entryFileNames:`${i}/${y}`,dir:u,banner:j&&(e=>j(e.name)),footer:v&&(e=>v(e.name))},plugins:[n({extensions:[".cjs",".mjs",".js",".json",".node",".jsx",".ts",".tsx"]}),e(),f&&a({outputToFilesystem:!1,noForceEmit:!0,compilerOptions:{outDir:u,jsx:d}}),f&&c(),t({preventAssignment:!0,values:{...h,"process.env.NODE_ENV":JSON.stringify("production")}}),p&&o(),...$]}}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:()=>`\nwindow.Islands['${e.name}']?.render('${e.name}')`})}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 b(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)=>"boolean"==typeof e?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.typescript,!0),common:e.common||["react","react/jsx-runtime","react-dom/client","@wrdagency/react-islands"],define:e.define||{}}}(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(j(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=b(j(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)}}})});
+import e from"@rollup/plugin-commonjs";import t from"@rollup/plugin-node-resolve";import n from"@rollup/plugin-replace";import o from"@rollup/plugin-terser";import r from"path";import{watch as i,rollup as s}from"rollup";import c from"@rollup/plugin-typescript";import{typescriptPaths as a}from"rollup-plugin-typescript-paths";import l,{readFileSync as d,existsSync as u,watch as p,statSync as m}from"fs";import{exec as f}from"child_process";import{promisify as h}from"util";import v from"yocto-spinner";import y from"command-line-args";import g from"command-line-usage";import{readFile as w}from"fs/promises";import{createServer as b}from"http";import j from"mime";function $(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}function O(e,t,n,o){return new(n||(n=Promise))(function(r,i){function s(e){try{a(o.next(e))}catch(e){i(e)}}function c(e){try{a(o.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(s,c)}a((o=o.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class x{constructor(){this.lines=[]}import(e,t){return t||(t=x.packageNameToProperty(e)),this.add(`import * as ${t} from "${e}"`)}createGlobalObject(e){return this.add(e.split(".").map(e=>e.trim()).filter(Boolean).map((e,t,n)=>{const o="window."+n.slice(0,t+1).join(".");return`${o} = ${o} || {}`}))}setGlobalObjectProperty(e,t,n){return this.add(`window.${e}['${t}'] = ${n}`)}static packageNameToProperty(e){return e.replace(/^@/,"").replace(/\//g,"_").replace(/[-_](.)/g,(e,t)=>t.toUpperCase()).replace(/^[a-z]/,e=>e.toUpperCase())}static renderReactComponentToFile(e,t){return`var server = require('react-dom/server');\nvar fs = require('node:fs/promises');\nvar path = require('node:path');\nconst html = server.renderToString( ${t}( {} ) );\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 C(e){const{dependencies:t,namespace:n=""}=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 x;r.createGlobalObject(n);for(const e of t){const t=x.packageNameToProperty(e);r.import(e,t),r.setGlobalObjectProperty(n,t,t)}return r.out()}}}function S(e){return O(this,void 0,void 0,function*(){const{output:t}=e,n=$(e,["output"]);let o,r=!1;try{o=yield s(n),yield o.write(t)}catch(e){r=!0,console.error(e)}return o&&(yield o.close()),!r})}function R(e){const{output:t}=e,n=$(e,["output"]),o=i(Object.assign(Object.assign({},n),{output:t,watch:{clearScreen:!1}}));return o.on("event",e=>{"BUNDLE_END"===e.code&&e.result&&e.result.close()}),o}function N(i){const{output:s,minify:c,jsx:a,common:l}=i;return{input:"virtual-entry",jsx:a,output:{name:"Islands._Common",file:r.resolve(s,"common.js"),format:"iife"},plugins:[n({preventAssignment:!0,"process.env.NODE_ENV":JSON.stringify("production")}),C({dependencies:l,namespace:"Islands._Common"}),t(),e(),c&&o()]}}function T(e){return R(N(e))}const E=h(f);class k{line(e){console.log(e)}spinner(e,t){return O(this,void 0,void 0,function*(){const n=v({text:`${e}...`}).start();(yield t())?n.success(`Succeeded: ${e}`):n.warning(`Failed: ${e}`)})}watcher(e,t){const n=v({text:`Rebuilding ${e}...`});let o=0;t.on("event",t=>{if("START"===t.code)n.clear(),n.start(),o=Date.now();else if("END"===t.code){const t=Date.now()-o;n.success(`Rebuilt: ${e} in ${t}ms.`)}else"ERROR"===t.code&&(n.warning(`Failed: ${e}`),console.error(t.error))})}command(e){return O(this,void 0,void 0,function*(){try{const{stdout:t,stderr:n}=yield E(e);return t&&console.log(t),n&&console.error(n),t}catch(e){throw console.error(e),e}})}}function I(e){const{deleteAfterRunning:t=!1}=e;return{name:"rollup-plugin-run-script-after-builder",writeBundle(e,n){const o=e.dir?e.dir:r.dirname(e.file||"");for(const[e,i]of Object.entries(n)){const n=r.resolve(o,e);if("chunk"!==i.type||!i.isEntry)return;if(!n&&!n.endsWith("js"))return;if(!l.existsSync(n))return;(new k).command(`node ${n}`).then(()=>{t&&l.unlinkSync(n)})}}}}function D(r,i){const{name:s,input:l,output:d,minify:u,jsx:p,typescript:m,define:f}=r,{external:h=[],subName:v,format:y,globals:g={},prefix:w,suffix:b,plugins:j=[]}=i;return{input:l,external:[...Object.keys(g),...h],jsx:p,output:{name:`Islands.${s}`,globals:g,format:y,entryFileNames:`${s}/${v}`,dir:d,banner:w&&(e=>w(e.name)),footer:b&&(e=>b(e.name))},plugins:[t({extensions:[".cjs",".mjs",".js",".json",".node",".jsx",".ts",".tsx"]}),e(),m&&c({outputToFilesystem:!1,noForceEmit:!0,compilerOptions:{outDir:d,jsx:p}}),m&&a(),n({preventAssignment:!0,values:Object.assign(Object.assign({},f),{"process.env.NODE_ENV":JSON.stringify("production")})}),u&&o(),...j]}}function _(e){return D(e,{subName:"client.js",format:"iife",globals:e.common.reduce((e,t)=>Object.assign(Object.assign({},e),{[t]:`Islands._Common["${x.packageNameToProperty(t)}"]`}),{}),suffix:()=>`\nwindow.Islands['${e.name}']?.render('${e.name}')`})}function H(e){const t=[_(e)];return e.ssg&&t.push(function(e){return D(e,{external:["react","react-dom"],subName:"server.cjs",format:"cjs",suffix:()=>x.renderReactComponentToFile("ssg.html","module.exports.component"),plugins:[I({deleteAfterRunning:!0})]})}(e)),t}function U(e){return function(e){return O(this,void 0,void 0,function*(){let t=!0;for(const n of e)(yield S(n))||(t=!1);return t})}(H(e))}function A(e){return R(_(e))}class F{constructor(e){let{args:t,callback:n,description:o}=e;t.push({name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}),this.args=t,this.callback=n,this.description=o}run(e){const t=y(this.args,{argv:e}),{help:n}=t,o=$(t,["help"]);if(!n)return this.callback(o);console.log(g([{header:"Options",optionList:this.args}]))}}function P(e){const t=d(e,"utf8");return function(e){const t=(e,t)=>"boolean"==typeof e?e:t;return{islands:e.islands,output:e.output||"./dist/",minify:t(e.minify,!0),ssg:t(e.ssg,!0),jsx:e.jsx||"react-jsx",typescript:t(e.typescript,!0),common:e.common||["react","react/jsx-runtime","react-dom/client","@wrdagency/react-islands"],define:e.define||{},serve:{css:e.serve?Array.isArray(e.serve.css)?e.serve.css:e.serve.css?[e.serve.css]:[]:[]}}}(JSON.parse(t))}var B=new F({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:e=>O(void 0,void 0,void 0,function*(){const{config:t}=e,n=new k,o=P(t);o.common&&(yield n.spinner("Creating common dependencies file",()=>O(void 0,void 0,void 0,function*(){return S(N(o))})));for(const[e,t]of Object.entries(o.islands))yield n.spinner(`Creating island ${e}`,()=>U(Object.assign({name:e,input:t},o)))})}),W=new F({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:e=>O(void 0,void 0,void 0,function*(){const{config:t}=e,n=new k,o=P(t);if(o.common){const e=T(o);n.watcher("Common Dependencies",e)}for(const[e,t]of Object.entries(o.islands)){const r=A(Object.assign({name:e,input:t},o));n.watcher(e,r)}})});const G=3e3,L="localhost",V="/events",M="/islands",q="/__react-islands-css";function z(e,t,n){return O(this,void 0,void 0,function*(){const o=r.resolve(t,`.${e}`);if(!function(e,t){const n=r.relative(e,t);return n&&!n.startsWith("..")&&!r.isAbsolute(n)}(t,o))return n.writeHead(403),n.end("Forbidden"),!0;if(!u(o))return!1;if(m(o).isDirectory()){const e=r.join(o,"index.html");return u(e)?(n.writeHead(200,{"Content-Type":"text/html; charset=utf-8"}),n.end(yield w(e)),!0):(n.writeHead(404),n.end("Not found"),!0)}var i;return n.writeHead(200,{"Content-Type":(i=o,j.getType(i)||"application/octet-stream")}),n.end(yield w(o)),!0})}function J(e,t,n,o,r,i){return(s,c)=>O(this,void 0,void 0,function*(){const a=new URL(s.url||"/",`http://${s.headers.host||L}`).pathname;if(a===V)return c.writeHead(200,{"Content-Type":"text/event-stream","Cache-Control":"no-cache",Connection:"keep-alive"}),c.write("retry: 1000\n\n"),i.addClient(c),void s.on("close",()=>{i.removeClient(c)});if("/"===a)return c.writeHead(200,{"Content-Type":"text/html; charset=utf-8"}),void c.end((l=n,`<!doctype html>\n<html lang="en">\n<head>\n\t<meta charset="utf-8" />\n\t<meta name="viewport" content="width=device-width, initial-scale=1" />\n\t<title>React Islands</title>\n</head>\n<body>\n\t<h1>React Islands</h1>\n\t<ul>\n\t\t${l.map(e=>`<li><a href="${M}/${encodeURIComponent(e)}">${e}</a></li>`).join("\n")}\n\t</ul>\n</body>\n</html>`));var l;if(a.startsWith(`${q}/`))return void function(e,t,n){const o=t.get(e);!!o&&(u(o)?(n.writeHead(200,{"Content-Type":"text/css; charset=utf-8"}),w(o).then(e=>n.end(e)).catch(()=>{n.writeHead(500),n.end("Failed to read CSS file")})):(n.writeHead(404),n.end("Not found")))}(a,r,c);if(a.startsWith(`${M}/`)){const t=decodeURIComponent(a.slice(9));return e.islands[t]?(c.writeHead(200,{"Content-Type":"text/html; charset=utf-8"}),void c.end(function(e,t){return`<!doctype html>\n<html lang="en">\n<head>\n\t<meta charset="utf-8" />\n\t<meta name="viewport" content="width=device-width, initial-scale=1" />\n\t<title>${e}</title>\n${function(e){return e.map(e=>`\t<link rel="stylesheet" href="${e}" />`).join("\n")}(t)}\n</head>\n<body>\n\t<div data-island="${e}"></div>\n\t<script src="/common.js"><\/script>\n\t<script src="/${encodeURIComponent(e)}/client.js"><\/script>\n\t<script>\n\t\tconst evtSource = new EventSource('${V}');\n\t\tevtSource.onmessage = () => {\n\t\t\twindow.location.reload();\n\t\t};\n\t<\/script>\n</body>\n</html>`}(t,o))):(c.writeHead(404),void c.end("Island not found"))}(yield z(a,t,c))||(c.writeHead(404),c.end("Not found"))})}!function(e){O(this,void 0,void 0,function*(){const{command:t,help:n=!1,_unknown:o=[]}=y([{name:"command",type:String,defaultOption:!0},{name:"help",alias:"h",type:Boolean,description:"Display this usage guide."}],{stopAtFirstUnknown:!0});if(t&&t in e)return e[t].run([...o,n&&"--help"].filter(Boolean));if(n){const t=Object.keys(e).map(t=>({name:t,summary:e[t].description})),n=g([{header:"Synopsis",content:"npx react-islands <command> <options>"},{header:"Command List",content:t}]);console.log(n)}else console.error(`Command '${t}' not recognized by React Islands.`)})}({build:B,watch:W,serve:new F({description:"Serve the islands on a development server",args:[{name:"config",type:String,alias:"c",description:"The config file to use.",defaultValue:"islands.config.json"}],callback:e=>O(void 0,void 0,void 0,function*(){const{config:t}=e,n=new k,o=P(t),i=process.cwd(),s=r.resolve(i,o.output),c=Object.keys(o.islands),a=function(){const e=new Set;return{notifyReload(){e.forEach(e=>{e.write("data: reload\n\n")})},addClient(t){e.add(t)},removeClient(t){e.delete(t)}}}(),{cssRouteMap:l,cssRoutes:d,cssWatchers:m}=function(e,t,n,o){const i=new Map,s=[],c=new Set;for(const a of t){const t=r.resolve(e,a);if(!u(t)){n.line(`Warning: serve.css file not found: ${a}`);continue}const l=r.relative(e,t).split(r.sep).join("/"),d=`${q}/${encodeURIComponent(l)}`;i.set(d,t),s.push(d);const m=p(t,{persistent:!0},e=>{"change"!==e&&"rename"!==e||o.notifyReload()});c.add(m)}return{cssRouteMap:i,cssRoutes:s,cssWatchers:c}}(i,o.serve.css,n,a),f=o.common?T(o):void 0;f&&(n.watcher("Common Dependencies",f),f.on("event",e=>{"BUNDLE_END"===e.code&&a.notifyReload()}));const h=c.map(e=>{const t=A(Object.assign({name:e,input:o.islands[e]},o));return n.watcher(e,t),t.on("event",e=>{"BUNDLE_END"===e.code&&a.notifyReload()}),t}),v=b(J(o,s,c,d,l,a));v.listen(G,L,()=>{n.line(`Serving islands at http://${L}:3000`);for(const e of c)n.line(`- ${e}: http://${L}:3000${M}/${encodeURIComponent(e)}`)});const y=()=>O(void 0,void 0,void 0,function*(){v.close(),null==f||f.close();for(const e of h)e.close();for(const e of m)e.close()});process.on("SIGINT",y),process.on("SIGTERM",y)})})});

package/dist/index.d.ts

@@ -42,6 +42,9 @@ type ConfigOptions = {
     typescript?: boolean;
     common?: string[];
     define?: Record<string, string>;
+    serve?: {
+        css?: string | string[];
+    };
 };
 
 export { Island, isServer, withProps };

package/dist/index.js

@@ -26,7 +26,7 @@ function RawHTML({ html }) {
  */
 function withProps(component, setProps) {
     return (props) => {
-        return component({ ...props, ...setProps });
+        return component(Object.assign(Object.assign({}, props), setProps));
     };
 }
 /**
@@ -39,14 +39,13 @@ function isServer() {
 }
 
 class Island {
-    component;
-    renderOptions;
     constructor(component, opts = {}) {
+        var _a, _b, _c;
         this.component = component;
         this.renderOptions = {
-            shouldHydrate: opts.shouldHydrate ?? true,
-            multiple: opts.multiple ?? false,
-            keepChildren: opts.keepChildren ?? false,
+            shouldHydrate: (_a = opts.shouldHydrate) !== null && _a !== void 0 ? _a : true,
+            multiple: (_b = opts.multiple) !== null && _b !== void 0 ? _b : false,
+            keepChildren: (_c = opts.keepChildren) !== null && _c !== void 0 ? _c : false,
         };
     }
     getProps(element) {
@@ -77,8 +76,8 @@ class Island {
     getRoots(name) {
         const selector = `[data-island="${name}"]`;
         const { multiple } = this.renderOptions;
-        const nodes = [...document.querySelectorAll(selector)];
-        if (!nodes) {
+        const nodes = Array.from(document.querySelectorAll(selector));
+        if (!nodes.length) {
             console.warn(`Could not render React Island because DOM node (${selector}) could not be found.`);
             return [];
         }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@wrdagency/react-islands",
-	"version": "2.1.5",
+	"version": "2.2.0",
 	"description": "",
 	"main": "./dist/index.js",
 	"files": [
@@ -30,6 +30,7 @@
 	"devDependencies": {
 		"@types/command-line-args": "^5.2.3",
 		"@types/command-line-usage": "^5.0.4",
+		"@types/node": "^25.9.3",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"typescript": "^5.4.3"
@@ -53,6 +54,7 @@
 		"command-line-usage": "^7.0.3",
 		"rollup": "^4.45.1",
 		"rollup-plugin-dts": "^6.2.1",
+		"rollup-plugin-serve": "^3.0.0",
 		"rollup-plugin-typescript-paths": "^1.5.0",
 		"tslib": "^2.8.1",
 		"yocto-spinner": "^1.0.0"

package/src/bin/commands/serve.ts

@@ -0,0 +1,370 @@
+import { existsSync, statSync, watch } from "fs";
+import { readFile } from "fs/promises";
+import { createServer, IncomingMessage, ServerResponse } from "http";
+import mime from "mime";
+import path from "path";
+import { watchCommon, watchIsland } from "../rollup";
+import { Command } from "../util/command";
+import { NormalizedConfigOptions, readConfig } from "../util/config";
+import { Output } from "../util/output";
+
+const DEFAULT_PORT = 3000;
+const DEFAULT_HOST = "localhost";
+const EVENTS_PATH = "/events";
+const ISLANDS_BASE_PATH = "/islands";
+const SERVE_CSS_BASE_PATH = "/__react-islands-css";
+
+function createCssLinks(cssRoutes: string[]): string {
+	return cssRoutes
+		.map((route) => `	<link rel="stylesheet" href="${route}" />`)
+		.join("\n");
+}
+
+function createIslandPage(name: string, cssRoutes: string[]): string {
+	return `<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>${name}</title>
+${createCssLinks(cssRoutes)}
+</head>
+<body>
+	<div data-island="${name}"></div>
+	<script src="/common.js"></script>
+	<script src="/${encodeURIComponent(name)}/client.js"></script>
+	<script>
+		const evtSource = new EventSource('${EVENTS_PATH}');
+		evtSource.onmessage = () => {
+			window.location.reload();
+		};
+	</script>
+</body>
+</html>`;
+}
+
+function createIndexPage(islands: string[]): string {
+	const links = islands
+		.map(
+			(name) =>
+				`<li><a href="${ISLANDS_BASE_PATH}/${encodeURIComponent(name)}">${name}</a></li>`,
+		)
+		.join("\n");
+
+	return `<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>React Islands</title>
+</head>
+<body>
+	<h1>React Islands</h1>
+	<ul>
+		${links}
+	</ul>
+</body>
+</html>`;
+}
+
+function getContentType(filePath: string): string {
+	return mime.getType(filePath) || "application/octet-stream";
+}
+
+function createReloadNotifier() {
+	const clients = new Set<ServerResponse>();
+
+	return {
+		notifyReload() {
+			clients.forEach((client) => {
+				client.write("data: reload\n\n");
+			});
+		},
+
+		addClient(res: ServerResponse) {
+			clients.add(res);
+		},
+
+		removeClient(res: ServerResponse) {
+			clients.delete(res);
+		},
+	};
+}
+
+function watchCssFiles(
+	projectRoot: string,
+	cssFiles: string[],
+	output: Output,
+	notifier: ReturnType<typeof createReloadNotifier>,
+) {
+	const cssRouteMap = new Map<string, string>();
+	const cssRoutes: string[] = [];
+	const cssWatchers = new Set<ReturnType<typeof watch>>();
+
+	for (const cssFile of cssFiles) {
+		const absoluteCssPath = path.resolve(projectRoot, cssFile);
+		if (!existsSync(absoluteCssPath)) {
+			output.line(`Warning: serve.css file not found: ${cssFile}`);
+			continue;
+		}
+
+		const relativePath = path
+			.relative(projectRoot, absoluteCssPath)
+			.split(path.sep)
+			.join("/");
+		const cssRoute = `${SERVE_CSS_BASE_PATH}/${encodeURIComponent(relativePath)}`;
+
+		cssRouteMap.set(cssRoute, absoluteCssPath);
+		cssRoutes.push(cssRoute);
+
+		const watcher = watch(
+			absoluteCssPath,
+			{ persistent: true },
+			(eventType) => {
+				if (eventType === "change" || eventType === "rename") {
+					notifier.notifyReload();
+				}
+			},
+		);
+
+		cssWatchers.add(watcher);
+	}
+
+	return { cssRouteMap, cssRoutes, cssWatchers };
+}
+
+function serveCssAsset(
+	pathname: string,
+	cssRouteMap: Map<string, string>,
+	res: ServerResponse,
+) {
+	const cssFile = cssRouteMap.get(pathname);
+	if (!cssFile) {
+		return false;
+	}
+
+	if (!existsSync(cssFile)) {
+		res.writeHead(404);
+		res.end("Not found");
+		return true;
+	}
+
+	res.writeHead(200, {
+		"Content-Type": "text/css; charset=utf-8",
+	});
+	readFile(cssFile)
+		.then((contents) => res.end(contents))
+		.catch(() => {
+			res.writeHead(500);
+			res.end("Failed to read CSS file");
+		});
+
+	return true;
+}
+
+function isSafeAssetPath(distPath: string, assetPath: string) {
+	const relative = path.relative(distPath, assetPath);
+	return relative && !relative.startsWith("..") && !path.isAbsolute(relative);
+}
+
+async function serveStaticAsset(
+	pathname: string,
+	distPath: string,
+	res: ServerResponse,
+) {
+	const assetPath = path.resolve(distPath, `.${pathname}`);
+	if (!isSafeAssetPath(distPath, assetPath)) {
+		res.writeHead(403);
+		res.end("Forbidden");
+		return true;
+	}
+
+	if (!existsSync(assetPath)) {
+		return false;
+	}
+
+	const fileStat = statSync(assetPath);
+	if (fileStat.isDirectory()) {
+		const indexFile = path.join(assetPath, "index.html");
+		if (!existsSync(indexFile)) {
+			res.writeHead(404);
+			res.end("Not found");
+			return true;
+		}
+
+		res.writeHead(200, {
+			"Content-Type": "text/html; charset=utf-8",
+		});
+		res.end(await readFile(indexFile));
+		return true;
+	}
+
+	res.writeHead(200, {
+		"Content-Type": getContentType(assetPath),
+	});
+	res.end(await readFile(assetPath));
+	return true;
+}
+
+function createRequestHandler(
+	config: NormalizedConfigOptions,
+	distPath: string,
+	islandNames: string[],
+	cssRoutes: string[],
+	cssRouteMap: Map<string, string>,
+	notifier: ReturnType<typeof createReloadNotifier>,
+) {
+	return async (req: IncomingMessage, res: ServerResponse) => {
+		const requestUrl = new URL(
+			req.url || "/",
+			`http://${req.headers.host || DEFAULT_HOST}`,
+		);
+		const pathname = requestUrl.pathname;
+
+		if (pathname === EVENTS_PATH) {
+			res.writeHead(200, {
+				"Content-Type": "text/event-stream",
+				"Cache-Control": "no-cache",
+				Connection: "keep-alive",
+			});
+
+			res.write("retry: 1000\n\n");
+			notifier.addClient(res);
+
+			req.on("close", () => {
+				notifier.removeClient(res);
+			});
+
+			return;
+		}
+
+		if (pathname === "/") {
+			res.writeHead(200, {
+				"Content-Type": "text/html; charset=utf-8",
+			});
+			res.end(createIndexPage(islandNames));
+			return;
+		}
+
+		if (pathname.startsWith(`${SERVE_CSS_BASE_PATH}/`)) {
+			serveCssAsset(pathname, cssRouteMap, res);
+			return;
+		}
+
+		if (pathname.startsWith(`${ISLANDS_BASE_PATH}/`)) {
+			const islandName = decodeURIComponent(
+				pathname.slice(ISLANDS_BASE_PATH.length + 1),
+			);
+			if (!config.islands[islandName]) {
+				res.writeHead(404);
+				res.end("Island not found");
+				return;
+			}
+
+			res.writeHead(200, {
+				"Content-Type": "text/html; charset=utf-8",
+			});
+			res.end(createIslandPage(islandName, cssRoutes));
+			return;
+		}
+
+		const served = await serveStaticAsset(pathname, distPath, res);
+		if (served) {
+			return;
+		}
+
+		res.writeHead(404);
+		res.end("Not found");
+	};
+}
+
+export default new Command({
+	description: "Serve the islands on a development server",
+	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);
+		const projectRoot = process.cwd();
+		const distPath = path.resolve(projectRoot, config.output);
+		const islandNames = Object.keys(config.islands);
+		const notifier = createReloadNotifier();
+		const { cssRouteMap, cssRoutes, cssWatchers } = watchCssFiles(
+			projectRoot,
+			config.serve.css,
+			output,
+			notifier,
+		);
+
+		const commonWatcher = config.common ? watchCommon(config) : undefined;
+		if (commonWatcher) {
+			output.watcher("Common Dependencies", commonWatcher);
+			commonWatcher.on("event", (evt) => {
+				if (evt.code === "BUNDLE_END") {
+					notifier.notifyReload();
+				}
+			});
+		}
+
+		const islandWatchers = islandNames.map((name) => {
+			const watcher = watchIsland({
+				name,
+				input: config.islands[name],
+				...config,
+			});
+
+			output.watcher(name, watcher);
+			watcher.on("event", (evt) => {
+				if (evt.code === "BUNDLE_END") {
+					notifier.notifyReload();
+				}
+			});
+
+			return watcher;
+		});
+
+		const server = createServer(
+			createRequestHandler(
+				config,
+				distPath,
+				islandNames,
+				cssRoutes,
+				cssRouteMap,
+				notifier,
+			),
+		);
+
+		server.listen(DEFAULT_PORT, DEFAULT_HOST, () => {
+			output.line(`Serving islands at http://${DEFAULT_HOST}:${DEFAULT_PORT}`);
+			for (const name of islandNames) {
+				output.line(
+					`- ${name}: http://${DEFAULT_HOST}:${DEFAULT_PORT}${ISLANDS_BASE_PATH}/${encodeURIComponent(name)}`,
+				);
+			}
+		});
+
+		const shutdown = async () => {
+			server.close();
+			commonWatcher?.close();
+			for (const watcher of islandWatchers) {
+				watcher.close();
+			}
+			for (const watcher of cssWatchers) {
+				watcher.close();
+			}
+		};
+
+		process.on("SIGINT", shutdown);
+		process.on("SIGTERM", shutdown);
+	},
+});

package/src/bin/index.ts

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

package/src/bin/util/config.ts

@@ -9,6 +9,9 @@ export type ConfigOptions = {
 	typescript?: boolean;
 	common?: string[];
 	define?: Record<string, string>;
+	serve?: {
+		css?: string | string[];
+	};
 };
 
 export type NormalizedConfigOptions = {
@@ -20,6 +23,9 @@ export type NormalizedConfigOptions = {
 	typescript: boolean;
 	common: string[];
 	define: Record<string, string>;
+	serve: {
+		css: string[];
+	};
 };
 
 export type IndividualIslandConfigOptions = Omit<
@@ -38,11 +44,11 @@ export function readConfig(path: string): NormalizedConfigOptions {
 }
 
 export function normalizeBuildOptions(
-	options: ConfigOptions
+	options: ConfigOptions,
 ): NormalizedConfigOptions {
 	const normalizeBoolean = (
 		value: boolean | undefined | null | void,
-		fallback: boolean
+		fallback: boolean,
 	): boolean => {
 		return typeof value === "boolean" ? value : fallback;
 	};
@@ -61,5 +67,14 @@ export function normalizeBuildOptions(
 			"@wrdagency/react-islands",
 		],
 		define: options.define || {},
+		serve: {
+			css: options.serve
+				? Array.isArray(options.serve.css)
+					? options.serve.css
+					: options.serve.css
+						? [options.serve.css]
+						: []
+				: [],
+		},
 	};
 }

package/src/island.tsx

@@ -35,7 +35,7 @@ export class Island {
 
 				if (typeof parsed !== "object" || Array.isArray(parsed)) {
 					throw new Error(
-						`Parsed JSON is not a valid dictionary object: '${json}'`
+						`Parsed JSON is not a valid dictionary object: '${json}'`,
 					);
 				}
 
@@ -59,11 +59,11 @@ export class Island {
 	private getRoots(name: string): HTMLElement[] {
 		const selector = `[data-island="${name}"]`;
 		const { multiple } = this.renderOptions;
-		const nodes = [...document.querySelectorAll(selector)];
+		const nodes = Array.from(document.querySelectorAll(selector));
 
-		if (!nodes) {
+		if (!nodes.length) {
 			console.warn(
-				`Could not render React Island because DOM node (${selector}) could not be found.`
+				`Could not render React Island because DOM node (${selector}) could not be found.`,
 			);
 
 			return [];
@@ -71,7 +71,7 @@ export class Island {
 
 		if (nodes.length > 1 && !multiple) {
 			console.warn(
-				`Multiple elements matched React Island selector (${selector}) but multiple was not enabled. Choosing first element as root.`
+				`Multiple elements matched React Island selector (${selector}) but multiple was not enabled. Choosing first element as root.`,
 			);
 
 			return [nodes[0] as HTMLElement];