@wrdagency/react-islands 2.1.0 → 2.1.2

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 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,define:h}=r,{name:y=`Islands.${i}`,subName:w,format:j,globals:b={},prefix:v,suffix:$,plugins:x=[]}=s;return{input:l,external:Object.keys(b),jsx:d,output:{name:y,globals:b,format:j,entryFileNames:`[name]/${w}`,dir:u,banner:v&&(e=>v(e.name)),footer:$&&(e=>$(e.name))},plugins:[n({extensions:[".cjs",".mjs",".js",".json",".node",".jsx",".ts",".tsx"]}),e(),t({preventAssignment:!0,values:{...h,"process.env.NODE_ENV":JSON.stringify("production")}}),p&&o(),f&&a({outputToFilesystem:!0,noForceEmit:!0,compilerOptions:{outDir:u,jsx:d}}),f&&c(),...x]}}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"],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(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)}}})});
+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,define:h}=r,{subName:y,format:w,globals:j={},prefix:b,suffix:v,plugins:$=[]}=s;return{input:l,external:Object.keys(j),jsx:d,output:{name:`Islands.${i}`,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,values:{...h,"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:()=>`\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 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"],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(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/package.json

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

package/src/bin/commands/build.ts

@@ -28,7 +28,7 @@ export default new Command({
 			});
 		}
 
-		// 2. Setup watcher for each island.
+		// 2. Build each island.
 		for (const [name, input] of Object.entries(config.islands)) {
 			await output.spinner(`Creating island ${name}`, () => {
 				return buildIsland({

package/src/bin/commands/watch.ts

@@ -21,7 +21,7 @@ export default new Command({
 		const output = new Output();
 		const config = readConfig(configPath);
 
-		// 1. Build common dependencies.
+		// 1. Watch common dependencies.
 		if (config.common) {
 			const watcher = watchCommon(config);
 			output.watcher("Common Dependencies", watcher);

package/src/bin/rollup/island.ts

@@ -13,7 +13,6 @@ import { runRollups, watchRollup } from "./run";
 function createIslandRollupConfig(
 	config: IndividualIslandConfigOptions,
 	opts: {
-		name?: string;
 		subName: string;
 		format: ModuleFormat;
 		globals?: Record<string, string>;
@@ -25,22 +24,14 @@ function createIslandRollupConfig(
 	const { name, input, output, minify, ssg, jsx, typescript, common, define } =
 		config;
 
-	const {
-		name: mainName = `Islands.${name}`,
-		subName,
-		format,
-		globals = {},
-		prefix,
-		suffix,
-		plugins = [],
-	} = opts;
+	const { subName, format, globals = {}, prefix, suffix, plugins = [] } = opts;
 
 	return {
 		input,
 		external: Object.keys(globals),
 		jsx,
 		output: {
-			name: mainName,
+			name: `Islands.${name}`,
 			globals,
 			format,
 			entryFileNames: `[name]/${subName}`,
@@ -99,7 +90,8 @@ export function createIslandRollupConfigClient(
 				)}"]`,
 			};
 		}, {}),
-		suffix: (name) => `\nwindow.Islands['${name}']?.render('${name}')`,
+		suffix: () =>
+			`\nwindow.Islands['${config.name}']?.render('${config.name}')`,
 	});
 }