@appshell/react 0.2.2 → 0.3.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.1-alpha.0](https://github.com/navaris/appshell/compare/@appshell/react@0.3.0...@appshell/react@0.3.1-alpha.0) (2024-08-31)
+
+
+### Bug Fixes
+
+* bump pipeline ([8bb63bc](https://github.com/navaris/appshell/commit/8bb63bcae1928c01bb6bc853d88010939e686af5))
+
+
+
+
+
+# [0.3.0](https://github.com/navaris/appshell/compare/@appshell/react@0.2.2...@appshell/react@0.3.0) (2024-01-25)
+
+
+### Features
+
+* AppshellComponent impl ([2b82621](https://github.com/navaris/appshell/commit/2b82621c13302f790a8e1c457f9a82f39903fc1f))
+
+
+
+
+
 ## [0.2.2](https://github.com/navaris/appshell/compare/@appshell/react@0.2.1...@appshell/react@0.2.2) (2024-01-04)
 
 

package/README.md

@@ -35,17 +35,17 @@ or
 pnpm add -D @appshell/react
 ```
 
-## FederatedComponent
+## AppshellComponent
 
-React component that dynamically loads federated components.
+React component that dynamically loads Appshell components.
 
 ```tsx
-import { FederatedComponent, ManifestProvider } from '@appshell/react';
+import { AppshellComponent, ManifestProvider } from '@appshell/react';
 
 <App>
   <ManifestProvider manifest={manifest}>
-    <FederatedComponent remote="PingModule/Ping">
-    <FederatedComponent remote="PongModule/Pong">
+    <AppshellComponent remote="PingModule/Ping">
+    <AppshellComponent remote="PongModule/Pong">
   </ManifestProvider>
 </App>
 ```

package/__tests__/{FederatedComponent.spec.tsx → AppshellComponent.spec.tsx}

@@ -3,7 +3,7 @@ import * as remoteLoader from '@appshell/loader';
 import '@testing-library/jest-dom';
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
-import FederatedComponent from '../src/components/FederatedComponent';
+import AppshellComponent from '../src/components/AppshellComponent';
 import * as useGlobalConfig from '../src/hooks/useGlobalConfig';
 import manifest from './fixtures/Manifest';
 import TestComponent from './fixtures/TestComponent';
@@ -13,13 +13,13 @@ jest.mock('../src/hooks/useGlobalConfig');
 
 const TestFallback = () => <div>loading...</div>;
 
-describe('FederatedComponent', () => {
+describe('AppshellComponent', () => {
   it('should match snapshot', async () => {
     jest.spyOn(useGlobalConfig, 'default').mockReturnValue(config);
     jest.spyOn(remoteLoader, 'default').mockReturnValueOnce(async () => [TestComponent, manifest]);
 
     const { container, findByText } = await act(() =>
-      render(<FederatedComponent remote="TestModule/TestComponent" />),
+      render(<AppshellComponent remote="TestModule/TestComponent" />),
     );
     const view = await findByText(/test component/i);
 
@@ -32,7 +32,7 @@ describe('FederatedComponent', () => {
     jest.spyOn(remoteLoader, 'default').mockReturnValueOnce(() => [null, null]);
 
     await act(() =>
-      render(<FederatedComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
+      render(<AppshellComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
     );
 
     expect(screen.getByText(/loading/i)).toBeInTheDocument();
@@ -45,9 +45,9 @@ describe('FederatedComponent', () => {
       .mockImplementationOnce(() => new Error('Failed to get resource'));
 
     await act(() =>
-      render(<FederatedComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
+      render(<AppshellComponent remote="TestModule/TestComponent" fallback={<TestFallback />} />),
     );
 
-    expect(screen.getByText(/Error loading federated component/i)).toBeInTheDocument();
+    expect(screen.getByText(/Error loading Appshell component/i)).toBeInTheDocument();
   });
 });

package/__tests__/ReactHost.spec.tsx

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { act, render, screen } from '@testing-library/react';
 import fetch, { enableFetchMocks } from 'jest-fetch-mock';
 import React from 'react';
-import * as FederatedComponent from '../src/components/FederatedComponent';
+import * as AppshellComponent from '../src/components/AppshellComponent';
 import ReactHost from '../src/components/ReactHost';
 
 enableFetchMocks();
@@ -17,7 +17,7 @@ jest.mock('@appshell/core', () => ({
   },
 }));
 
-jest.mock('../src/components/FederatedComponent', () => ({
+jest.mock('../src/components/AppshellComponent', () => ({
   __esModule: true,
   default: () => <div>test component</div>,
 }));
@@ -68,16 +68,16 @@ describe('RenderHost', () => {
     expect(screen.getByText(/test component/i)).toBeInTheDocument();
   });
 
-  it('should pass props to federated component when available', async () => {
+  it('should pass props to Appshell component when available', async () => {
     mockUseState({ config: 'foo' });
-    const federatedComponentSpy = jest.spyOn(FederatedComponent, 'default');
+    const appshellComponentSpy = jest.spyOn(AppshellComponent, 'default');
     await act(() =>
       render(<ReactHost configUrl={configUrl} remote={remote} foo="bar" fallback="Loading" />),
     );
 
     expect(screen.getByText(/test component/i)).toBeInTheDocument();
 
-    expect(federatedComponentSpy).toHaveBeenCalledWith(
+    expect(appshellComponentSpy).toHaveBeenCalledWith(
       { fallback: 'Loading', foo: 'bar', remote: 'TestModule/TestComponent' },
       {},
     );

package/__tests__/__snapshots__/{FederatedComponent.spec.tsx.snap → AppshellComponent.spec.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FederatedComponent should match snapshot 1`] = `
+exports[`AppshellComponent should match snapshot 1`] = `
 <div>
   <div>
     test component

package/__tests__/__snapshots__/LoadingError.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`LoadingError should match snapshot 1`] = `
         style="border: 3px solid red;"
       >
         <h5>
-          Error loading federated component 'TestModule/TestComponent.'
+          Error loading Appshell component 'TestModule/TestComponent.'
         </h5>
         <span
           style="font-size: 1rem;"
@@ -24,7 +24,7 @@ exports[`LoadingError should match snapshot 1`] = `
       style="border: 3px solid red;"
     >
       <h5>
-        Error loading federated component 'TestModule/TestComponent.'
+        Error loading Appshell component 'TestModule/TestComponent.'
       </h5>
       <span
         style="font-size: 1rem;"

package/dist/main.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{o.S={};var e={},t={};o.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];o.o(o.S,r)||(o.S[r]={}),o.S[r];var c=[];return e[r]=c.length?Promise.all(c).then((()=>e[r]=1)):1}}})();var n={};return(()=>{o.r(n),o.d(n,{FederatedComponent:()=>h,GlobalConfigProvider:()=>u,ManifestProvider:()=>i,MetadataProvider:()=>E,ReactHost:()=>b,jsonResource:()=>S,useGlobalConfig:()=>m,useManifest:()=>$,useMetadata:()=>j});const e=new Set,t=new Set,r=new Map;var a=o(156),c=o.n(a);const s=(0,a.createContext)({remotes:{},modules:{},environment:{}}),i=({manifest:e,children:t})=>c().createElement(s.Provider,{value:e},t),l=(s.Consumer,s),d=(0,a.createContext)({index:{}}),u=({config:e,children:t})=>c().createElement(d.Provider,{value:e},t),f=(d.Consumer,d),m=()=>c().useContext(f),p=({remote:e,reason:t})=>c().createElement("div",{style:{border:"3px solid red"}},c().createElement("h5",null,`Error loading federated component '${e}.'`),c().createElement("span",{style:{fontSize:"1rem"}},t)),v=({remote:n,fallback:s,...l})=>{const d=m(),[u,f]=(0,a.useState)();return(0,a.useEffect)((()=>{let a=!1;const s=(n=>async a=>{let c;const s=n.index[a];if(!s)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const i=await(async e=>{if(r.has(e))return r.get(e);r.set(e,void 0);const t=await fetch(e);if(t.ok)return t.json();const o=await t.text();throw new Error(`Failed to get manifest from ${e}. ${o}`)})(s);if(i){r.set(s,i);const l=i.remotes[a],d=i.environment[l.scope]||{},u=n.overrides?.environment&&n.overrides?.environment[l.scope]||{};if(window[`__appshell_env__${l.scope}`]={...d,...u},t.has(l.remoteEntryUrl)||await(async t=>{const r=document.createElement("script");return new Promise(((o,n)=>{e.has(t)?o(!1):(e.add(t),r.src=t,r.type="text/javascript",r.async=!0,r.onload=()=>{console.debug(`Remote entry fetched from '${t}'.`),o(!0)},r.onerror=()=>{const e=`Failed to fetch remote entry from '${t}'.`;console.error(e),n(e)},document.head.appendChild(r))})).finally((()=>{document.head.contains(r)&&document.head.removeChild(r)}))})(l.remoteEntryUrl))return t.add(l.remoteEntryUrl),c=await(async(e,t,r="default")=>{console.debug(`loading federated component: { scope: ${e}, module: ${t}, shareScope: ${r} }`),await o.I(r);const n=window[e];if(!n)throw new Error(`Failed to find module container ${e}`);await n.init(o.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const c=a();return console.debug(`federated component loaded: { scope: ${e}, module: ${t}, shareScope: ${r} }`),c.default})(l.scope,l.module,l.shareScope),[c,i]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}})(d);return a||async function(){try{a=!0,f(void 0);const[e,t]=await s(n);if(!e)return;a=!1,f(c().createElement(i,{manifest:t},c().createElement(e,l)))}catch(e){f(c().createElement(p,{remote:n,reason:`${e}`}))}}(),()=>{a=!1}}),[n,d,...Object.values(l)]),console.debug(`rendering FederatedComponent[${n}], loading=${!u}`),c().createElement(c().Fragment,null,u||s)};v.defaultProps={fallback:void 0};const h=v;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},y.apply(this,arguments)}const w=({configUrl:e,remote:t,fallback:r,...o})=>{const[n,s]=c().useState();return(0,a.useEffect)((()=>{n||(async()=>{const t=await fetch(e);if(t.ok){const e=await t.json();s(e)}else s({index:{}})})()}),[n,e]),n?c().createElement(u,{config:n},c().createElement(h,y({remote:t,fallback:r},o))):null};w.defaultProps={fallback:void 0};const b=w,g=(0,a.createContext)({}),E=({metata:e,children:t})=>c().createElement(g.Provider,{value:e},t),x=(g.Consumer,g),$=()=>c().useContext(l),j=()=>c().useContext(x),S=e=>{let t,r="pending";const o=fetch(e,{headers:{"Content-Type":"application/json",Accept:"application/json"}}).then((e=>{if(e.ok)return e.json().then((e=>{r="success",t=e}));r="error",t=new Error(`${e.status} ${e.statusText} ${e.url}`)}));return{read(){if("pending"===r)throw o;if("error"===r)throw t;if("success"===r)return t}}}})(),n})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={156:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{o.S={};var e={},t={};o.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];o.o(o.S,r)||(o.S[r]={}),o.S[r];var s=[];return e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})();var n={};return(()=>{o.r(n),o.d(n,{AppshellComponent:()=>v,FederatedComponent:()=>y,GlobalConfigProvider:()=>u,ManifestProvider:()=>l,MetadataProvider:()=>x,ReactHost:()=>b,jsonResource:()=>C,useGlobalConfig:()=>p,useManifest:()=>S,useMetadata:()=>j});const e=new Set,t=new Set,r=new Map;var a=o(156),s=o.n(a);const c=(0,a.createContext)({remotes:{},modules:{},environment:{}}),l=({manifest:e,children:t})=>s().createElement(c.Provider,{value:e},t),i=(c.Consumer,c),d=(0,a.createContext)({index:{}}),u=({config:e,children:t})=>s().createElement(d.Provider,{value:e},t),f=(d.Consumer,d),p=()=>s().useContext(f),m=({remote:e,reason:t})=>s().createElement("div",{style:{border:"3px solid red"}},s().createElement("h5",null,`Error loading Appshell component '${e}.'`),s().createElement("span",{style:{fontSize:"1rem"}},t)),h=({remote:n,fallback:c,...i})=>{const d=p(),[u,f]=(0,a.useState)();return(0,a.useEffect)((()=>{let a=!1;const c=(n=>async a=>{let s;const c=n.index[a];if(!c)throw new Error(`Remote resource not found in registry. Expected: ${a}`);try{const l=await(async e=>{if(r.has(e))return r.get(e);r.set(e,void 0);const t=await fetch(e);if(t.ok)return t.json();const o=await t.text();throw new Error(`Failed to get manifest from ${e}. ${o}`)})(c);if(l){r.set(c,l);const i=l.remotes[a],d=l.environment[i.scope]||{},u=n.overrides?.environment&&n.overrides?.environment[i.scope]||{};if(window[`__appshell_env__${i.scope}`]={...d,...u},t.has(i.remoteEntryUrl)||await(async t=>{const r=document.createElement("script");return new Promise(((o,n)=>{e.has(t)?o(!1):(e.add(t),r.src=t,r.type="text/javascript",r.async=!0,r.onload=()=>{console.debug(`Remote entry fetched from '${t}'.`),o(!0)},r.onerror=()=>{const e=`Failed to fetch remote entry from '${t}'.`;console.error(e),n(e)},document.head.appendChild(r))})).finally((()=>{document.head.contains(r)&&document.head.removeChild(r)}))})(i.remoteEntryUrl))return t.add(i.remoteEntryUrl),s=await(async(e,t,r="default")=>{console.debug(`loading Appshell component: { scope: ${e}, module: ${t}, shareScope: ${r} }`),await o.I(r);const n=window[e];if(!n)throw new Error(`Failed to find module container ${e}`);await n.init(o.S[r]);const a=await n.get(t);if(!a)throw new Error(`Invalid factory produced by container for module ${t}.`);const s=a();return console.debug(`Appshell component loaded: { scope: ${e}, module: ${t}, shareScope: ${r} }`),s.default})(i.scope,i.module,i.shareScope),[s,l]}return[null,null]}catch(e){throw new Error(`Failed to load component '${a}'. ${e?.toString()}`)}})(d);return a||async function(){try{a=!0,f(void 0);const[e,t]=await c(n);if(!e)return;a=!1,f(s().createElement(l,{manifest:t},s().createElement(e,i)))}catch(e){f(s().createElement(m,{remote:n,reason:`${e}`}))}}(),()=>{a=!1}}),[n,d,...Object.values(i)]),console.debug(`rendering AppshellComponent[${n}], loading=${!u}`),s().createElement(s().Fragment,null,u||c)};h.defaultProps={fallback:void 0};const v=h,y=h;function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},w.apply(null,arguments)}const g=({configUrl:e,remote:t,fallback:r,...o})=>{const[n,c]=s().useState();return(0,a.useEffect)((()=>{n||(async()=>{const t=await fetch(e);if(t.ok){const e=await t.json();c(e)}else c({index:{}})})()}),[n,e]),n?s().createElement(u,{config:n},s().createElement(v,w({remote:t,fallback:r},o))):null};g.defaultProps={fallback:void 0};const b=g,E=(0,a.createContext)({}),x=({metata:e,children:t})=>s().createElement(E.Provider,{value:e},t),$=(E.Consumer,E),S=()=>s().useContext(i),j=()=>s().useContext($),C=e=>{let t,r="pending";const o=fetch(e,{headers:{"Content-Type":"application/json",Accept:"application/json"}}).then((e=>{if(e.ok)return e.json().then((e=>{r="success",t=e}));r="error",t=new Error(`${e.status} ${e.statusText} ${e.url}`)}));return{read(){if("pending"===r)throw o;if("error"===r)throw t;if("success"===r)return t}}}})(),n})()));

package/dist/types/loader/src/{loadFederatedComponent.d.ts → loadAppshellComponent.d.ts}

@@ -11,4 +11,4 @@ declare global {
 }
 declare const _default: <TComponent>(scope: string, module: string, shareScope?: string) => Promise<TComponent>;
 export default _default;
-//# sourceMappingURL=loadFederatedComponent.d.ts.map
+//# sourceMappingURL=loadAppshellComponent.d.ts.map

package/dist/types/loader/src/loadAppshellComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadAppshellComponent.d.ts","sourceRoot":"","sources":["../../../../../loader/src/loadAppshellComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,SAAS,wBAAwB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7D,MAAM,wBAAwB,EAAE;QAAE,OAAO,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,UAAU,MAAM;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACtD;CACF;4CAIwC,MAAM,UAAU,MAAM;AAA/D,wBAgCE"}

package/dist/types/react/src/components/AppshellComponent.d.ts

@@ -0,0 +1,30 @@
+import { AppshellIndex } from '@appshell/config';
+import React, { ReactElement, ReactNode } from 'react';
+export type ExtendedProps = Record<string, unknown>;
+declare global {
+    interface Window {
+        __appshell_index__: AppshellIndex;
+    }
+}
+export type AppshellComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
+    remote: string;
+    fallback?: ReactNode;
+} & TProps;
+declare const AppshellComponent: {
+    <TProps extends ExtendedProps>({ remote, fallback, ...rest }: AppshellComponentProps<TProps>): React.ReactElement<TProps, string | React.JSXElementConstructor<any>>;
+    defaultProps: {
+        fallback: undefined;
+    };
+};
+export default AppshellComponent;
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * Please use AppshellComponent instead.
+ */
+export declare const FederatedComponent: {
+    <TProps extends ExtendedProps>({ remote, fallback, ...rest }: AppshellComponentProps<TProps>): React.ReactElement<TProps, string | React.JSXElementConstructor<any>>;
+    defaultProps: {
+        fallback: undefined;
+    };
+};
+//# sourceMappingURL=AppshellComponent.d.ts.map

package/dist/types/react/src/components/AppshellComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppshellComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppshellComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK3F,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF;AAED,MAAM,MAAM,sBAAsB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,IAAI;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,MAAM,CAAC;AAEX,QAAA,MAAM,iBAAiB;;;;;CA6CtB,CAAC;AAMF,eAAe,iBAAiB,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;CAAoB,CAAC"}

package/dist/types/react/src/index.d.ts

@@ -1,4 +1,4 @@
-export { default as FederatedComponent } from './components/FederatedComponent';
+export { default as AppshellComponent, FederatedComponent } from './components/AppshellComponent';
 export { default as ReactHost } from './components/ReactHost';
 export { GlobalConfigProvider } from './contexts/GlobalConfigContext';
 export { ManifestProvider } from './contexts/ManifestContext';

package/dist/types/react/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appshell/react",
-  "version": "0.2.2",
+  "version": "0.3.1-alpha.0",
   "description": "React utilities for building micro-frontends with Appshell and Module Federation",
   "main": "dist/main.js",
   "types": "dist/types/react/src/index.d.ts",
@@ -18,7 +18,6 @@
     "stats": "webpack --json > stats.json"
   },
   "keywords": [
-    "webpack",
     "module federation",
     "micro-frontends",
     "appshell"
@@ -28,5 +27,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "e6a546f851057c9443348684401d42fabd7bd236"
+  "gitHead": "a44ca542cf779c0cbbc527a02bc74d0a0619d0b9"
 }

package/src/components/{FederatedComponent.tsx → AppshellComponent.tsx}

@@ -14,16 +14,16 @@ declare global {
   }
 }
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-export type FederatedComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
+export type AppshellComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
   remote: string;
   fallback?: ReactNode;
 } & TProps;
 
-const FederatedComponent = <TProps extends ExtendedProps>({
+const AppshellComponent = <TProps extends ExtendedProps>({
   remote,
   fallback,
   ...rest
-}: FederatedComponentProps<TProps>): ReactElement<TProps> => {
+}: AppshellComponentProps<TProps>): ReactElement<TProps> => {
   const config = useGlobalConfig();
   const [element, setElement] = useState<ReactElement>();
 
@@ -61,13 +61,19 @@ const FederatedComponent = <TProps extends ExtendedProps>({
   }, [remote, config, ...Object.values(rest)]);
 
   // eslint-disable-next-line no-console
-  console.debug(`rendering FederatedComponent[${remote}], loading=${!element}`);
+  console.debug(`rendering AppshellComponent[${remote}], loading=${!element}`);
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{element || fallback}</>;
 };
 
-FederatedComponent.defaultProps = {
+AppshellComponent.defaultProps = {
   fallback: undefined,
 };
 
-export default FederatedComponent;
+export default AppshellComponent;
+
+/**
+ * @deprecated This component is deprecated and will be removed in future versions.
+ * Please use AppshellComponent instead.
+ */
+export const FederatedComponent = AppshellComponent;

package/src/components/LoadingError.tsx

@@ -7,7 +7,7 @@ type ErrorProps = {
 
 const LoadingError: FC<ErrorProps> = ({ remote, reason }) => (
   <div style={{ border: '3px solid red' }}>
-    <h5>{`Error loading federated component '${remote}.'`}</h5>
+    <h5>{`Error loading Appshell component '${remote}.'`}</h5>
     <span style={{ fontSize: '1rem' }}>{reason}</span>
   </div>
 );

package/src/components/ReactHost.tsx

@@ -2,7 +2,7 @@
 import { AppshellGlobalConfig } from 'packages/config/src/types';
 import React, { FC, ReactNode, useEffect } from 'react';
 import { GlobalConfigProvider } from '../contexts/GlobalConfigContext';
-import FederatedComponent from './FederatedComponent';
+import AppshellComponent from './AppshellComponent';
 
 const ReactHost: FC<{
   configUrl: string;
@@ -35,7 +35,7 @@ const ReactHost: FC<{
 
   return (
     <GlobalConfigProvider config={config}>
-      <FederatedComponent remote={remote} fallback={fallback} {...rest} />
+      <AppshellComponent remote={remote} fallback={fallback} {...rest} />
     </GlobalConfigProvider>
   );
 };

package/src/index.ts

@@ -1,4 +1,4 @@
-export { default as FederatedComponent } from './components/FederatedComponent';
+export { default as AppshellComponent, FederatedComponent } from './components/AppshellComponent';
 export { default as ReactHost } from './components/ReactHost';
 export { GlobalConfigProvider } from './contexts/GlobalConfigContext';
 export { ManifestProvider } from './contexts/ManifestContext';

package/dist/types/loader/src/loadFederatedComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"loadFederatedComponent.d.ts","sourceRoot":"","sources":["../../../../../loader/src/loadFederatedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,SAAS,wBAAwB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7D,MAAM,wBAAwB,EAAE;QAAE,OAAO,EAAE,UAAU,CAAA;KAAE,CAAC;IACxD,UAAU,MAAM;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACtD;CACF;4CAIwC,MAAM,UAAU,MAAM;AAA/D,wBAgCE"}

package/dist/types/react/src/components/FederatedComponent.d.ts

@@ -1,20 +0,0 @@
-import { AppshellIndex } from '@appshell/config';
-import React, { ReactElement, ReactNode } from 'react';
-export type ExtendedProps = Record<string, unknown>;
-declare global {
-    interface Window {
-        __appshell_index__: AppshellIndex;
-    }
-}
-export type FederatedComponentProps<TProps extends ExtendedProps = ExtendedProps> = {
-    remote: string;
-    fallback?: ReactNode;
-} & TProps;
-declare const FederatedComponent: {
-    <TProps extends ExtendedProps>({ remote, fallback, ...rest }: FederatedComponentProps<TProps>): React.ReactElement<TProps, string | React.JSXElementConstructor<any>>;
-    defaultProps: {
-        fallback: undefined;
-    };
-};
-export default FederatedComponent;
-//# sourceMappingURL=FederatedComponent.d.ts.map

package/dist/types/react/src/components/FederatedComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FederatedComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/FederatedComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAK3F,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,kBAAkB,EAAE,aAAa,CAAC;KACnC;CACF;AAED,MAAM,MAAM,uBAAuB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,IAAI;IAClF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,MAAM,CAAC;AAEX,QAAA,MAAM,kBAAkB;;;;;CA6CvB,CAAC;AAMF,eAAe,kBAAkB,CAAC"}