@appshell/react-shell 1.0.0-alpha.14 → 1.0.0-alpha.16

package/README.md

@@ -17,19 +17,19 @@ Working examples can be found [here](https://github.com/appshell-org/appshell/tr
 
 `@appshell/react-shell` is the browser bundle that mounts your micro-frontends. It is not a server —
 the Appshell registry renders the shell document, inlines the resolved composition, and serves this
-bundle at the URL an environment's `shellBundleUrl` points at.
+bundle at the URL an application's `shellBundleUrl` points at.
 
 **Building a micro-frontend? You do not need this package.** Run your own dev server and publish to
-an environment; the registry loads the shell bundle for you. This README is for pinning which bundle
-an environment uses, and for working on the bundle itself.
+an application; the registry loads the shell bundle for you. This README is for pinning which bundle
+an application uses, and for working on the bundle itself.
 
 ## Choosing a bundle
 
-Every environment resolves a shell bundle. By default that is the one the registry image ships, so
+Every application resolves a shell bundle. By default that is the one the registry image ships, so
 there is nothing to configure. Point `shellBundleUrl` elsewhere to pin a version or serve from a CDN:
 
 ```bash
-appshell env create my-env --shell-bundle-url https://cdn.example.com/appshell/1.2.3/main.js
+appshell app create my-env --shell-bundle-url https://cdn.example.com/appshell/1.2.3/main.js
 ```
 
 The package publishes `dist/` and nothing else, so a registry image can serve it under a versioned
@@ -48,36 +48,43 @@ resolved by the browser, so a shared registry can point at your machine.
 
 ```bash
 npm start
-appshell env create shell-dev --ephemeral --shell-bundle-url http://localhost:3030/main.js
+appshell app create shell-dev --ephemeral --shell-bundle-url http://localhost:3030/main.js
 ```
 
 > **Note**
 > Chrome and Firefox treat `localhost` as a trustworthy origin, so an `https` registry may load an
 > `http` bundle from it. Safari is stricter — run the registry locally, or serve `main.js` over TLS.
 
-## Environment configuration
+## Application configuration
 
-A registry-served shell needs none of this — the environment supplies the root remote, its props,
-and the page's title, colours and stylesheet, and the registry inlines them. These are the
-standalone fallbacks, read from the `appshell.env.js` that `appshell generate env` writes:
+The registry supplies the root remote, its props, and the page's title, colours,
+favicon and stylesheet, inlining them into the document it serves. None of it comes
+from this package's environment any more.
+
+What remains here is dev-server and CLI configuration:
 
 ```sh
-# Public url. Defaults to localhost
-APPSHELL_PUBLIC_URL=
 # Port the bundle's development server listens on
 APPSHELL_PORT=3030
-# Remote module to mount at the root, when no composition is inlined
-APPSHELL_ROOT=ContainerModule/App
-# Props for that remote, as a serialized JSON string
-APPSHELL_ROOT_PROPS='{"foo":"bar"}'
-# File to setup the environment. Defaults to .env
-APPSHELL_ENV=.env
-# Prefix used to specify which env vars to include when generating appshell.env.js. Leaving this empty will include ALL variables in the .env
-APPSHELL_ENV_PREFIX=APPSHELL_
-# Name of global variable used in the generated appshell.env.js. Defaults to window.__appshell_env__
-APPSHELL_ENV_GLOBAL_VAR=__appshell_env__
-# Background color of splash screen
-APPSHELL_THEME_COLOR=
-# Color of splash screen loading
-APPSHELL_PRIMARY_COLOR=
+# Registry to publish and activate against
+APPSHELL_REGISTRY=
+# Credential for that registry
+APPSHELL_API_KEY=
 ```
+
+## What fills the page before the root remote mounts
+
+Nothing, currently. The shell renders no fallback: what covers the gap while the root
+remote is fetched is the application's business, and it cannot come from the root
+package itself — that package is the thing being waited for. It has to come from the
+document the registry renders.
+
+The shell used to ship a `Splash` component for this, configured through two env vars
+that stopped reaching the browser when the registry took over page rendering, so it had
+been rendering its hardcoded fallback colours for some time. It was removed rather than
+rewired: a document-level splash paints on the document's first paint rather than after
+the shell bundle downloads, parses and mounts React, and it can be styled by the
+application instead of by this package.
+
+Inner remotes are unaffected — `RemoteSlot` takes a `fallback` prop, and that has always
+been the consumer's to supply.

package/dist/428.js

@@ -0,0 +1 @@
+"use strict";(globalThis.webpackChunkappshell_react_shell=globalThis.webpackChunkappshell_react_shell||[]).push([[428],{428(e,t,n){var o=n(348),r=n(650);let a=!1;const s=new Set,i=async(e,t,n,o="default")=>{console.debug(`loading Appshell component: { scope: ${e}, module: ${t}, shareScope: ${o} }`),a||(a=!0,(0,r.getInstance)()||(0,r.init)({name:"Appshell",remotes:[]})),s.has(e)||(s.add(e),(0,r.registerRemotes)([{name:e,entry:n}]));const i=t.replace(/^\.\//,""),c=await(0,r.loadRemote)(`${e}/${i}`);if(!c)throw new Error(`Failed to find module container ${e}`);return console.debug(`Appshell component loaded: { scope: ${e}, module: ${t}, shareScope: ${o} }`),c.default};(Object.getOwnPropertyDescriptor(i,"name")||{}).writable||Object.defineProperty(i,"name",{value:"default",configurable:!0});const c=(e={})=>{const t=e.composition??("undefined"==typeof window?void 0:window.__appshell_config__),n=e.resolver??((...e)=>async t=>{for(const n of e){const e=await n(t);if(e)return e}})((e=>async t=>{const n=e?.remotes[t];if(e&&n)return{remote:n,vars:e.vars[n.scope]??{}}})(t),((e,t="")=>async n=>{if(!e)return;const o=`${t}/v1/applications/${e.applicationId}/remotes/${n}`,r=await fetch(o,{credentials:"include"});if(!r.ok)return;const a=await r.json();return{remote:a,vars:e.vars[a.scope]??{}}})(t));return async e=>{const t=t=>new Error(`Failed to load component '${e}'. ${t?.toString()}`);let r;try{r=await n(e)}catch(e){throw t(e)}if(!r)throw new Error(`Remote resource not found in registry. Expected: ${e}`);const{remote:a,vars:s}=r;try{return(0,o.setVars)(a.scope,s),[await i(a.scope,a.module,a.remoteEntryUrl,a.shareScope),a]}catch(e){throw t(e)}}};(Object.getOwnPropertyDescriptor(c,"name")||{}).writable||Object.defineProperty(c,"name",{value:"default",configurable:!0});const l=c;var d=n(488),p=n.n(d);const u=(0,d.createContext)(void 0),m=({remote:e,children:t})=>p().createElement(u.Provider,{value:e},t);m.defaultProps={remote:void 0},u.Consumer;const f=({remote:e,reason:t})=>p().createElement("div",{style:{border:"3px solid red"}},p().createElement("h5",null,`Error loading Appshell component '${e}.'`),p().createElement("span",{style:{fontSize:"1rem"}},t)),h=({remote:e,fallback:t,...n})=>{const[o,r]=(0,d.useState)();return(0,d.useEffect)((()=>{let t=!1;const o=l();return r(void 0),async function(){try{const[a,s]=await o(e);if(t||!a)return;r(p().createElement(m,{remote:s},p().createElement(a,n)))}catch(n){t||r(p().createElement(f,{remote:e,reason:`${n}`}))}}(),()=>{t=!0}}),[e,...Object.values(n)]),console.debug(`rendering RemoteSlot[${e}], loading=${!o}`),p().createElement(p().Fragment,null,o||t)};h.defaultProps={fallback:void 0};const v=h,g=()=>(void 0).useContext(void 0);(Object.getOwnPropertyDescriptor(g,"name")||{}).writable||Object.defineProperty(g,"name",{value:"default",configurable:!0});var y=n(873);const b="appshell-overlay-badge",w=["position:fixed","bottom:12px","left:12px","z-index:2147483647","max-width:min(420px, calc(100vw - 24px))","padding:8px 12px","border-radius:6px","border:1px solid #f0b429","background:#3d3016","color:#f7e3a1","font:12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace","box-shadow:0 2px 8px rgba(0,0,0,.35)"].join(";"),x=e=>{const t=e?.overlay;if(!t||document.getElementById(b))return;const n=document.createElement("div");n.id=b,n.innerHTML=((e,t="prod")=>{const n=["dev"===t&&"development shell",e.length&&`${e.length} remote${1===e.length?"":"s"} redirected`].filter(Boolean),o=e.map((e=>{return`<li>${t=e,t.replace(/&/g,"&amp;").replace(/</g,"&lt;")}</li>`;var t})).join("");return[`<details style="${w}" open>`,`<summary style="cursor:pointer;font-weight:600;list-style:none">⚠ Development overlay — ${n.join(", ")}</summary>`,o?`<ul style="margin:6px 0 0;padding-left:16px">${o}</ul>`:"","</details>"].join("")})(t.remotes??[],t.shellFlavor),document.body.appendChild(n)};(Object.getOwnPropertyDescriptor(x,"name")||{}).writable||Object.defineProperty(x,"name",{value:"default",configurable:!0});var E=n(591),$=n.n(E),j=n(740),O=n.n(j),P=n(128),S=n.n(P),T=n(855),A=n.n(T),C=n(51),_=n.n(C),k=n(656),M=n.n(k),I=n(97),R={};function F(){return F=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},F.apply(null,arguments)}R.styleTagTransform=M(),R.setAttributes=A(),R.insert=S().bind(null,"head"),R.domAPI=O(),R.insertStyleElement=_(),$()(I.A,R),I.A&&I.A.locals&&I.A.locals;const D=(0,y.H)(document.getElementById("root")),H=window.__appshell_config__;if(x(H),!H?.root)throw new Error("No root remote to mount. The registry supplies one in the composition.");const N=H.root,z=H.rootProps;D.render(p().createElement(p().StrictMode,null,p().createElement(v,F({remote:N},z))))},97(e,t,n){n.d(t,{A:()=>i});var o=n(758),r=n.n(o),a=n(935),s=n.n(a)()(r());s.push([e.id,"/*\n * The one reset on the page.\n *\n * Packages must not ship their own — several global resets (Tailwind's Preflight, for\n * one) fight each other and the shell. This is structural only: it holds no view on how\n * an application looks, which is the packages' and the theme's business, but it does own\n * the handful of browser defaults that must be settled exactly once.\n */\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  min-height: 100vh;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n#root {\n  min-height: 100vh;\n}\n",""]);const i=s},935(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(o)for(var i=0;i<this.length;i++){var c=this[i][0];null!=c&&(s[c]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);o&&s[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),t.push(d))}},t}},758(e){e.exports=function(e){return e[1]}},873(e,t,n){var o=n(536);t.H=o.createRoot,o.hydrateRoot},591(e){var t=[];function n(e){for(var n=-1,o=0;o<t.length;o++)if(t[o].identifier===e){n=o;break}return n}function o(e,o){for(var a={},s=[],i=0;i<e.length;i++){var c=e[i],l=o.base?c[0]+o.base:c[0],d=a[l]||0,p="".concat(l," ").concat(d);a[l]=d+1;var u=n(p),m={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)t[u].references++,t[u].updater(m);else{var f=r(m,o);o.byIndex=i,t.splice(i,0,{identifier:p,updater:f,references:1})}s.push(p)}return s}function r(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,r){var a=o(e=e||[],r=r||{});return function(e){e=e||[];for(var s=0;s<a.length;s++){var i=n(a[s]);t[i].references--}for(var c=o(e,r),l=0;l<a.length;l++){var d=n(a[l]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}a=c}}},128(e){var t={};e.exports=function(e,n){var o=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}},51(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},855(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},740(e){e.exports=function(e){var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,r&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(o,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},656(e){e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}}]);

package/dist/877.js

@@ -0,0 +1 @@
+"use strict";(globalThis.webpackChunkappshell_react_shell=globalThis.webpackChunkappshell_react_shell||[]).push([[877],{877(e,r,s){s.r(r),s.d(r,{MissingVarsError:()=>a,VarsConflictError:()=>t,hasVars:()=>h,readVars:()=>c,resetVars:()=>i,setVars:()=>n});class a extends Error{constructor(e,r){super(`No vars were delivered for '${e}'. ${r.length?`Vars are present for ${r.map((e=>`'${e}'`)).join(", ")} — check that '${e}' matches the module federation name the registry knows this package by.`:"Nothing has delivered vars on this page — check that the host and this package both declare '@appshell/runtime' as a shared singleton."}`),this.name="MissingVarsError",this.scope=e}}class t extends Error{constructor(e){super(`Vars for '${e}' were already delivered and cannot be replaced. A scope receives its vars once per page load.`),this.name="VarsConflictError",this.scope=e}}const o=new Map,n=(e,r)=>{const s=o.get(e);var a,n;if(s){if(a=s,n=r,![...new Set([...Object.keys(a),...Object.keys(n)])].every((e=>a[e]===n[e])))throw new t(e)}else o.set(e,Object.freeze({...r}))},c=e=>{const r=o.get(e);if(!r)throw new a(e,[...o.keys()]);return r},h=e=>o.has(e),i=()=>{o.clear()}}}]);

package/dist/dev/main.js

@@ -52,7 +52,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // Must run before `bootstrap` evaluates `react-dom`; see ./devtools.
 (0,_devtools__WEBPACK_IMPORTED_MODULE_0__["default"])();
-Promise.all(/*! import() */[__webpack_require__.e("vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_sour-63708e"), __webpack_require__.e("webpack_sharing_consume_default_react_react"), __webpack_require__.e("src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom")]).then(__webpack_require__.bind(__webpack_require__, /*! ./bootstrap */ "./src/bootstrap.tsx"));
+Promise.all(/*! import() */[__webpack_require__.e("webpack_sharing_consume_default_react_react"), __webpack_require__.e("src_bootstrap_tsx")]).then(__webpack_require__.bind(__webpack_require__, /*! ./bootstrap */ "./src/bootstrap.tsx"));
 
 /***/ },
 
@@ -3550,7 +3550,7 @@ __webpack_require__.r(__webpack_exports__);
 
 //#region src/utils/env.ts
 function getBuilderId() {
-	return  true ? "Appshell:1.0.0-alpha.14" : 0;
+	return  true ? "Appshell:1.0.0-alpha.16" : 0;
 }
 
 //#endregion
@@ -5482,7 +5482,7 @@ __webpack_require__.r(__webpack_exports__);
 
 //#region src/utils.ts
 function getBuilderId() {
-	return  true ? "Appshell:1.0.0-alpha.14" : 0;
+	return  true ? "Appshell:1.0.0-alpha.16" : 0;
 }
 function getGlobalFederationInstance(name, version) {
 	const buildId = getBuilderId();
@@ -7874,6 +7874,7 @@ function updateRemoteOptions(options) {
 /******/ 			var promises = [];
 /******/ 			switch(name) {
 /******/ 				case "default": {
+/******/ 					register("@appshell/runtime", "1.0.0-alpha.16", () => (__webpack_require__.e("runtime_src_index_ts").then(() => (() => (__webpack_require__(/*! ../runtime/src/index.ts */ "../runtime/src/index.ts"))))));
 /******/ 					register("react-dom", "18.2.0", () => (Promise.all([__webpack_require__.e("vendors-node_modules_react-dom_index_js"), __webpack_require__.e("webpack_sharing_consume_default_react_react")]).then(() => (() => (__webpack_require__(/*! ../../node_modules/react-dom/index.js */ "../../node_modules/react-dom/index.js"))))));
 /******/ 					register("react", "18.2.0", () => (__webpack_require__.e("vendors-node_modules_react_index_js").then(() => (() => (__webpack_require__(/*! ../../node_modules/react/index.js */ "../../node_modules/react/index.js"))))));
 /******/ 				}
@@ -7886,7 +7887,11 @@ function updateRemoteOptions(options) {
 /******/ 	
 /******/ 	/* webpack/runtime/sharing */
 /******/ 	(() => {
-/******/ 		__webpack_require__.federation.initOptions.shared = {	"react-dom": [{	version: "18.2.0",
+/******/ 		__webpack_require__.federation.initOptions.shared = {	"@appshell/runtime": [{	version: "1.0.0-alpha.16",
+/******/ 				get: () => (__webpack_require__.e("runtime_src_index_ts").then(() => (() => (__webpack_require__(/*! ../runtime/src/index.ts */ "../runtime/src/index.ts"))))),
+/******/ 				scope: ["default"],
+/******/ 				shareConfig: {"eager":false,"singleton":true,"layer":null},
+/******/ 			},],	"react-dom": [{	version: "18.2.0",
 /******/ 				get: () => (Promise.all([__webpack_require__.e("vendors-node_modules_react-dom_index_js"), __webpack_require__.e("webpack_sharing_consume_default_react_react")]).then(() => (() => (__webpack_require__(/*! ../../node_modules/react-dom/index.js */ "../../node_modules/react-dom/index.js"))))),
 /******/ 				scope: ["default"],
 /******/ 				shareConfig: {"eager":false,"requiredVersion":"18.2.0","singleton":true,"layer":null},
@@ -7946,6 +7951,17 @@ function updateRemoteOptions(options) {
 /******/ 				shareKey: "react",
 /******/ 		
 /******/ 			},
+/******/ 			"webpack/sharing/consume/default/@appshell/runtime/@appshell/runtime": {
+/******/ 				fallback: () => (__webpack_require__.e("runtime_src_index_ts").then(() => (() => (__webpack_require__(/*! @appshell/runtime */ "../runtime/src/index.ts"))))),
+/******/ 				shareScope: ["default"],
+/******/ 				singleton: true,
+/******/ 				requiredVersion: "^1.0.0-alpha.16",
+/******/ 				strictVersion: false,
+/******/ 				eager: false,
+/******/ 				layer: undefined,
+/******/ 				shareKey: "@appshell/runtime",
+/******/ 		
+/******/ 			},
 /******/ 			"webpack/sharing/consume/default/react-dom/react-dom": {
 /******/ 				fallback: () => (__webpack_require__.e("vendors-node_modules_react-dom_index_js").then(() => (() => (__webpack_require__(/*! react-dom */ "../../node_modules/react-dom/index.js"))))),
 /******/ 				shareScope: ["default"],
@@ -7964,7 +7980,8 @@ function updateRemoteOptions(options) {
 /******/ 			"webpack_sharing_consume_default_react_react": [
 /******/ 				"webpack/sharing/consume/default/react/react"
 /******/ 			],
-/******/ 			"src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom": [
+/******/ 			"src_bootstrap_tsx": [
+/******/ 				"webpack/sharing/consume/default/@appshell/runtime/@appshell/runtime",
 /******/ 				"webpack/sharing/consume/default/react-dom/react-dom"
 /******/ 			]
 /******/ 		};