piral-core 0.15.0-alpha.4036 → 0.15.0-alpha.4122

package/src/Piral.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
-import { StateContext } from './state';
+import { StaticRouter } from 'react-router';
 import { createInstance } from './createInstance';
-import { PiralView, Mediator, ResponsiveLayout, PortalRenderer } from './components';
-import { RootListener } from './RootListener';
+import { PiralView, RegisteredRouter } from './components';
+import { useGlobalState } from './hooks';
+import { PiralContext } from './PiralContext';
 import type { PiralProps } from './types';
 
+const FallbackRouter: React.FC = (props) => {
+  const publicPath = useGlobalState((s) => s.app.publicPath);
+  return <StaticRouter location="/" {...props} basename={publicPath} />;
+};
+
+const Router = typeof window === 'undefined' ? FallbackRouter : RegisteredRouter;
+
 /**
  * Represents the Piral app shell frame. Use this component together
  * with an existing instance to render the app shell.
- * Includes layout and routing handling. Wires the state container
- * to the generated views.
+ * Includes layout and routing handling. Connects the Piral context
+ * and the React router to the generated views.
  *
  * @example
 ```jsx
@@ -21,14 +29,10 @@ const app = (
 ```
  */
 export const Piral: React.FC<PiralProps> = ({ instance = createInstance(), breakpoints, children }) => (
-  <StateContext.Provider value={instance.context}>
-    <ResponsiveLayout breakpoints={breakpoints} />
-    <Mediator options={instance.options} key={instance.id} />
-    <RootListener />
-    <PiralView>
-      <PortalRenderer id="root" />
-      {children}
-    </PiralView>
-  </StateContext.Provider>
+  <PiralContext instance={instance}>
+    <Router>
+      <PiralView breakpoints={breakpoints}>{children}</PiralView>
+    </Router>
+  </PiralContext>
 );
 Piral.displayName = 'Piral';

package/src/PiralContext.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StateContext } from './state';
+import { createInstance } from './createInstance';
+import { Mediator } from './components';
+import { useGlobalState } from './hooks';
+import { RootListener } from './RootListener';
+import type { PiralContextProps } from './types';
+
+interface PiralProviderProps {
+  children: React.ReactNode;
+}
+
+const PiralProvider: React.FC<PiralProviderProps> = ({ children }) => {
+  const Provider = useGlobalState((m) => m.provider || React.Fragment);
+  return <Provider>{children}</Provider>;
+};
+
+/**
+ * Represents the Piral app shell frame. Use this component together
+ * with an existing instance to render components from micro frontends
+ * in your app.
+ * Wires the state container together with the global providers.
+ *
+ * @example
+```jsx
+const app = (
+  <MyRouter>
+    <PiralContext instance={yourPiralInstance}>
+      <PiralGlobals />
+      <MyAppContent />
+    </PiralContext>
+  </MyRouter>
+);
+```
+ */
+export const PiralContext: React.FC<PiralContextProps> = ({ instance = createInstance(), children }) => (
+  <StateContext.Provider value={instance.context}>
+    <Mediator options={instance.options} key={instance.id} />
+    <RootListener />
+    <PiralProvider>{children}</PiralProvider>
+  </StateContext.Provider>
+);
+PiralContext.displayName = 'PiralContext';

package/src/RootListener.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { RootListener } from './RootListener';
 
@@ -15,7 +15,8 @@ describe('RootListener Component', () => {
     const removed = jest.fn();
     document.body.appendChild(element);
     const container = document.body.appendChild(document.createElement('div'));
-    render(<RootListener />, container);
+    const root = createRoot(container);
+    root.render(<RootListener />);
     document.body.removeEventListener = removed;
     await act(() => {
       const event = new CustomEvent('render-html', {
@@ -23,7 +24,7 @@ describe('RootListener Component', () => {
         detail: {
           target: element,
           props: {},
-        }
+        },
       });
       element.dispatchEvent(event);
       return Promise.resolve();
@@ -35,10 +36,11 @@ describe('RootListener Component', () => {
   it('removes the RootListener successfully', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const removed = jest.fn();
-    render(<RootListener />, container);
+    const root = createRoot(container);
+    root.render(<RootListener />);
     document.body.removeEventListener = removed;
     await act(() => Promise.resolve());
-    unmountComponentAtNode(container);
+    root.unmount();
     await act(() => Promise.resolve());
     expect(removed).toHaveBeenCalled();
   });

package/src/actions/app.test.ts

@@ -1,8 +1,8 @@
+import { mount } from 'enzyme';
 import { createElement } from 'react';
 import { Atom, deref } from '@dbeining/react-atom';
 import { createListener, Pilet } from 'piral-base';
 import {
-  changeLayout,
   includeProvider,
   initialize,
   injectPilet,
@@ -12,7 +12,6 @@ import {
   setRoute,
 } from './app';
 import { createActions } from '../state';
-import { mount } from 'enzyme';
 import { RootListener } from '../RootListener';
 
 const pilet: Pilet = {
@@ -23,23 +22,6 @@ const pilet: Pilet = {
 };
 
 describe('App Actions Module', () => {
-  it('changeLayout changes the current layout', () => {
-    const state = Atom.of({
-      foo: 5,
-      app: {
-        layout: 'tablet',
-      },
-    });
-    const ctx = createActions(state, createListener({}));
-    changeLayout(ctx, 'mobile');
-    expect(deref(state)).toEqual({
-      foo: 5,
-      app: {
-        layout: 'mobile',
-      },
-    });
-  });
-
   it('initialize initializes state data', () => {
     const state = Atom.of({
       app: {},

package/src/actions/app.ts

@@ -3,7 +3,6 @@ import { RouteComponentProps } from 'react-router';
 import { runPilet } from 'piral-base';
 import { withKey, replaceOrAddItem, removeNested, withProvider, withRoute, noop } from '../utils';
 import {
-  LayoutType,
   ComponentsState,
   ErrorComponentsState,
   BaseRegistration,
@@ -13,13 +12,6 @@ import {
   PiletEntry,
 } from '../types';
 
-export function changeLayout(ctx: GlobalStateContext, current: LayoutType) {
-  ctx.dispatch((state) => ({
-    ...state,
-    app: withKey(state.app, 'layout', current),
-  }));
-}
-
 export function initialize(ctx: GlobalStateContext, loading: boolean, error: Error | undefined, modules: Array<Pilet>) {
   ctx.dispatch((state) => ({
     ...state,

package/src/actions/state.ts

@@ -1,8 +1,13 @@
 import { swap, deref } from '@dbeining/react-atom';
+import { isSame } from '../utils';
 import { GlobalState, GlobalStateContext } from '../types';
 
+function onlyChangedState(oldState: GlobalState, newState: GlobalState) {
+  return isSame(oldState, newState) ? oldState : newState;
+}
+
 export function dispatch(ctx: GlobalStateContext, update: (state: GlobalState) => GlobalState) {
-  swap(ctx.state, update);
+  swap(ctx.state, oldState => onlyChangedState(oldState, update(oldState)));
 }
 
 export function readState<S>(ctx: GlobalStateContext, read: (state: GlobalState) => S) {

package/src/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PiralError, PiralLoadingIndicator } from './components';
+import { RegisteredErrorInfo, RegisteredLoadingIndicator } from './components';
 import { Errors, PiletApi } from '../types';
 
 export interface ErrorBoundaryProps {
@@ -11,6 +11,10 @@ export interface ErrorBoundaryProps {
    * The associated pilet api for the metadata.
    */
   piral: PiletApi;
+  /**
+   * The content to render (i.e., where to apply the boundary to).
+   */
+  children: React.ReactNode;
 }
 
 export interface ErrorBoundaryState {
@@ -45,9 +49,9 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
 
     if (error) {
       const pilet = piral.meta.name;
-      return <PiralError type={errorType} error={error} pilet={pilet} {...rest} />;
+      return <RegisteredErrorInfo type={errorType} error={error} pilet={pilet} {...rest} />;
     }
 
-    return <React.Suspense fallback={<PiralLoadingIndicator />}>{children}</React.Suspense>;
+    return <React.Suspense fallback={<RegisteredLoadingIndicator />}>{children}</React.Suspense>;
   }
 }

package/src/components/ForeignComponentContainer.test.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 
+async function render(element: any, container: Element) {
+  const root = createRoot(container);
+  root.render(element);
+  await act(() => Promise.resolve());
+  return root;
+}
+
 describe('ForeignComponentContainer component', () => {
-  it('mounts an HTML component', () => {
+  it('mounts an HTML component', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const component = { mount };
-    render(
+    await render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
       container,
     );
@@ -15,28 +23,28 @@ describe('ForeignComponentContainer component', () => {
     container.remove();
   });
 
-  it('unmounts an HTML component', () => {
+  it('unmounts an HTML component', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const unmount = jest.fn();
     const component = { mount, unmount };
-    render(
+    const root = await render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
       container,
     );
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
-    unmountComponentAtNode(container);
+    root.unmount();
     expect(unmount).toHaveBeenCalled();
     container.remove();
   });
 
-  it('updates an HTML component', () => {
+  it('updates an HTML component', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const update = jest.fn();
     const component = { mount, update };
-    render(
+    const root = await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -47,20 +55,20 @@ describe('ForeignComponentContainer component', () => {
     );
     expect(mount).toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    render(
+    root.render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
-      container,
     );
+    await act(() => Promise.resolve());
     expect(update).toHaveBeenCalled();
     container.remove();
   });
 
-  it('forces re-rendering of an HTML component', () => {
+  it('forces re-rendering of an HTML component', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const componentDidMount = ForeignComponentContainer.prototype.componentDidMount;
     ForeignComponentContainer.prototype.componentDidMount = function () {
@@ -73,7 +81,7 @@ describe('ForeignComponentContainer component', () => {
     const update = jest.fn();
     const unmount = jest.fn();
     const component = { mount, update, unmount };
-    render(
+    const root = await render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -85,27 +93,27 @@ describe('ForeignComponentContainer component', () => {
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    render(
+    root.render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'foo' }}
       />,
-      container,
     );
+    await act(() => Promise.resolve());
     expect(update).not.toHaveBeenCalled();
     expect(unmount).toHaveBeenCalled();
     container.remove();
   });
 
-  it('listens to render-html', () => {
+  it('listens to render-html', async () => {
     const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const renderHtmlExtension = jest.fn();
     const component = { mount };
     const props = { piral: { renderHtmlExtension }, meta: {} };
-    render(
+    await render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={props} />,
       container,
     );
@@ -113,6 +121,7 @@ describe('ForeignComponentContainer component', () => {
     const node = document.querySelector('[data-portal-id=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
     node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
+    await act(() => Promise.resolve());
     expect(renderHtmlExtension).toHaveBeenCalled();
     container.remove();
   });

package/src/components/ForeignComponentContainer.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
-import { __RouterContext } from 'react-router';
-import { ForeignComponent, BaseComponentProps, ComponentContext } from '../types';
+import type { ForeignComponent, BaseComponentProps, ComponentContext } from '../types';
 
 interface ForeignComponentContainerProps<T> {
   $portalId: string;

package/src/components/PiralGlobals.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PortalRenderer } from './PortalRenderer';
+import { RegisteredDebug } from './components';
+
+/**
+ * Integrates the global portal renderer and the debug utilities
+ * (if registered).
+ */
+export const PiralGlobals: React.FC = () => {
+  return (
+    <>
+      <PortalRenderer id="root" />
+      <RegisteredDebug />
+    </>
+  );
+};

package/src/components/PiralRoutes.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as hooks from '../hooks';
 import { MemoryRouter } from 'react-router';
 import { mount } from 'enzyme';
-import { DefaultRouteSwitch } from './DefaultRouteSwitch';
 import { PiralRoutes } from './PiralRoutes';
+import { DefaultRouteSwitch } from '../defaults';
 
 const mountWithRouter = (node, url = '/') =>
   mount(

package/src/components/PiralSuspense.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { RegisteredErrorInfo, RegisteredLoadingIndicator } from './components';
+import { useGlobalState } from '../hooks';
+
+export interface PiralSuspenseProps {
+  children?: React.ReactNode;
+}
+
+export const PiralSuspense: React.FC<PiralSuspenseProps> = ({ children }) => {
+  const { error, loading } = useGlobalState((m) => m.app);
+
+  return error ? (
+    <RegisteredErrorInfo type="loading" error={error} />
+  ) : loading ? (
+    <RegisteredLoadingIndicator />
+  ) : (
+    <>{children}</>
+  );
+};

package/src/components/PiralView-server.test.tsx

@@ -17,44 +17,45 @@ StubErrorInfo.displayName = 'StubErrorInfo';
 const StubLoader: React.FC = () => <div />;
 StubLoader.displayName = 'StubLoader';
 
-const StubRouter: React.FC = ({ children }) => <div>{children}</div>;
+const StubRouter: React.FC<React.PropsWithChildren<{}>> = ({ children }) => <div>{children}</div>;
 StubRouter.displayName = 'StubRouter';
 
-const StubLayout: React.FC = ({ children }) => <div>{children}</div>;
+const StubLayout: React.FC<React.PropsWithChildren<{}>> = ({ children }) => <div>{children}</div>;
 StubLayout.displayName = 'StubLayout';
 
 jest.mock('../hooks');
 jest.mock('./PiralRoutes');
 
 const state = {
-    app: {
-        error: undefined,
-        loading: true,
-    },
-    components: {
-        ErrorInfo: StubErrorInfo,
-        LoadingIndicator: StubLoader,
-        Router: StubRouter,
-        Layout: StubLayout,
-    },
-    registry: {
-        pages: {},
-        extensions: {},
-    },
-    routes: {},
-    provider: undefined,
+  app: {
+    error: undefined,
+    loading: true,
+  },
+  components: {
+    ErrorInfo: StubErrorInfo,
+    LoadingIndicator: StubLoader,
+    Router: StubRouter,
+    Layout: StubLayout,
+  },
+  registry: {
+    pages: {},
+    extensions: {},
+  },
+  portals: {},
+  routes: {},
+  provider: undefined,
 };
 
 (hooks as any).useGlobalState = (select: any) => select(state);
 
-(routes as any).PiralRoutes = ({ }) => <StubDashboard />;
+(routes as any).PiralRoutes = ({}) => <StubDashboard />;
 
 describe('Portal Module', () => {
-    it('In this test window should be undefined', () => {
-        state.app.loading = false;
-        state.app.error = undefined;
-        const node = render(<PiralView />);
-        expect(typeof window).toBe("undefined")
-        expect(node.length).toBe(1);
-    });
+  it('In this test window should be undefined', () => {
+    state.app.loading = false;
+    state.app.error = undefined;
+    const node = render(<PiralView children={undefined} />);
+    expect(typeof window).toBe('undefined');
+    expect(node.length).toBe(1);
+  });
 });

package/src/components/PiralView.test.tsx

@@ -33,6 +33,7 @@ const state = {
     Router: StubRouter,
     Layout: StubLayout,
   },
+  portals: {},
   registry: {
     pages: {},
     extensions: {},

package/src/components/PiralView.tsx

@@ -1,60 +1,41 @@
 import * as React from 'react';
-import { RouteComponentProps, StaticRouter } from 'react-router';
+import { RouteComponentProps } from 'react-router';
+import { PiralGlobals } from './PiralGlobals';
 import { PiralRoutes } from './PiralRoutes';
-import {
-  PiralError,
-  PiralRouter,
-  PiralLoadingIndicator,
-  PiralRouteSwitch,
-  PiralLayout,
-  PiralDebug,
-} from './components';
-import { useGlobalState } from '../hooks';
+import { PiralSuspense } from './PiralSuspense';
+import { ResponsiveLayout } from './ResponsiveLayout';
+import { RegisteredErrorInfo, RegisteredRouteSwitch, RegisteredLayout } from './components';
+import { LayoutBreakpoints } from '../types';
 
-const NotFound: React.FC<RouteComponentProps> = (props) => <PiralError type="not_found" {...props} />;
-
-const PiralContent: React.FC = () => {
-  const { error, loading, layout } = useGlobalState((m) => m.app);
-
-  return error ? (
-    <PiralError type="loading" error={error} />
-  ) : loading ? (
-    <PiralLoadingIndicator />
-  ) : (
-    <PiralLayout currentLayout={layout}>
-      <PiralRoutes NotFound={NotFound} RouteSwitch={PiralRouteSwitch} />
-    </PiralLayout>
-  );
-};
-
-const FallbackRouter: React.FC = (props) => {
-  const publicPath = useGlobalState((s) => s.app.publicPath);
-  return <StaticRouter location="/" {...props} basename={publicPath} />;
-};
-
-const Router = typeof window === 'undefined' ? FallbackRouter : PiralRouter;
-
-const PiralProvider: React.FC = ({ children }) => {
-  const provider = useGlobalState((m) => m.provider) || React.Fragment;
-  return React.createElement(provider, undefined, children);
-};
+const NotFound: React.FC<RouteComponentProps> = (props) => <RegisteredErrorInfo type="not_found" {...props} />;
 
 /**
  * The props for the PiralView component.
  */
-export interface PiralViewProps { }
+export interface PiralViewProps {
+  /**
+   * The custom breakpoints for the different layout modi.
+   */
+  breakpoints?: LayoutBreakpoints;
+  /**
+   * The extra content.
+   */
+  children: React.ReactNode;
+}
 
 /**
  * The component responsible for the generic view of the application.
- * This includes the global providers, the used Router, the current content and some convenience.
+ * This includes the used the current content and some convenience.
  */
-export const PiralView: React.FC<PiralViewProps> = ({ children }) => (
-  <PiralProvider>
-    <Router>
-      <PiralContent />
-      {children}
-      <PiralDebug />
-    </Router>
-  </PiralProvider>
+export const PiralView: React.FC<PiralViewProps> = ({ breakpoints, children }) => (
+  <>
+    <PiralGlobals />
+    <PiralSuspense>
+      <ResponsiveLayout breakpoints={breakpoints} Layout={RegisteredLayout}>
+        <PiralRoutes NotFound={NotFound} RouteSwitch={RegisteredRouteSwitch} />
+      </ResponsiveLayout>
+    </PiralSuspense>
+    {children}
+  </>
 );
 PiralView.displayName = 'PiralView';