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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.4036",
+  "version": "0.15.0-alpha.4041",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -11,6 +11,18 @@
     "core",
     "functional"
   ],
+  "importmap": {
+    "imports": {
+      "react": "react",
+      "react-dom": "react-dom",
+      "react-router": "react-router",
+      "react-router-dom": "react-router-dom",
+      "history": "history",
+      "path-to-regexp": "path-to-regexp",
+      "@libre/atom": "@libre/atom",
+      "@dbeining/react-atom": "@dbeining/react-atom"
+    }
+  },
   "author": "smapiot",
   "homepage": "https://piral.io",
   "license": "MIT",
@@ -48,8 +60,8 @@
   },
   "dependencies": {
     "@dbeining/react-atom": "^4.0.0",
-    "piral-base": "0.15.0-alpha.4036",
-    "piral-debug-utils": "0.15.0-alpha.4036"
+    "piral-base": "0.15.0-alpha.4041",
+    "piral-debug-utils": "0.15.0-alpha.4041"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -79,5 +91,5 @@
     "@libre/atom",
     "@dbeining/react-atom"
   ],
-  "gitHead": "5bd5efc3af82380f20e25d821a0de8a88c16a670"
+  "gitHead": "3d305d88c72e3e05a44acbf240a38f6ad7b03959"
 }

package/src/Piral.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount, ReactWrapper } from 'enzyme';
 import { Piral } from './Piral';
-import { PiralRouter } from './components';
+import { RegisteredRouter } from './components';
 import { createInstance } from './createInstance';
 
 async function waitForComponentToPaint<P = {}>(wrapper: ReactWrapper<P>, amount = 0) {
@@ -16,13 +16,13 @@ describe('Piral Component', () => {
   it('renders the Piral instance with default settings', async () => {
     const node = mount(<Piral />);
     await waitForComponentToPaint(node);
-    expect(node.find(PiralRouter).length).toBe(1);
+    expect(node.find(RegisteredRouter).length).toBe(1);
   });
 
   it('renders the Piral instance with custom settings', async () => {
     const instance = createInstance();
     const node = mount(<Piral instance={instance} />);
     await waitForComponentToPaint(node);
-    expect(node.find(PiralRouter).length).toBe(1);
+    expect(node.find(RegisteredRouter).length).toBe(1);
   });
 });

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,39 @@
+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';
+
+const PiralProvider: React.FC = ({ 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/actions/app.test.ts

@@ -2,7 +2,6 @@ import { createElement } from 'react';
 import { Atom, deref } from '@dbeining/react-atom';
 import { createListener, Pilet } from 'piral-base';
 import {
-  changeLayout,
   includeProvider,
   initialize,
   injectPilet,
@@ -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 {
@@ -45,9 +45,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/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,15 @@
+import * as React from 'react';
+import { RegisteredErrorInfo, RegisteredLoadingIndicator } from './components';
+import { useGlobalState } from '../hooks';
+
+export const PiralSuspense: React.FC = ({ 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

@@ -41,6 +41,7 @@ const state = {
         pages: {},
         extensions: {},
     },
+    portals: {},
     routes: {},
     provider: undefined,
 };

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,37 @@
 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 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';

package/src/components/ResponsiveLayout.test.tsx

@@ -6,25 +6,15 @@ import { defaultBreakpoints } from '../utils';
 
 jest.mock('../hooks');
 
-(hooks as any).useGlobalState = (select: any) =>
-  select({
-    app: {
-      layout: 'desktop',
-    },
-  });
-
-const StubComponent: React.FC = () => <div />;
-StubComponent.displayName = 'StubComponent';
-
 describe('Responsive Module', () => {
   it('always renders the given children', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useGlobalStateContext = () => ({
-      changeLayout: changeTo,
-    });
     (hooks as any).useMedia = () => 'desktop';
+    const Layout: React.FC = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    Layout.displayName = 'Layout';
+    const StubComponent: React.FC = () => <div />;
+    StubComponent.displayName = 'StubComponent';
     const node = mount(
-      <ResponsiveLayout breakpoints={defaultBreakpoints}>
+      <ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints}>
         <StubComponent />)
       </ResponsiveLayout>,
     );
@@ -32,42 +22,23 @@ describe('Responsive Module', () => {
   });
 
   it('does not call changeTo when nothing changed', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useGlobalStateContext = () => ({
-      changeLayout: changeTo,
-    });
-    (hooks as any).useMedia = () => 'desktop';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).not.toHaveBeenCalled();
-  });
-
-  it('does not call changeTo when nothing changed', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useGlobalStateContext = () => ({
-      changeLayout: changeTo,
-    });
     (hooks as any).useMedia = () => 'desktop';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).not.toHaveBeenCalled();
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    mount(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'desktop' }, {});
   });
 
   it('does calls changeTo when someething changed (desktop -> tablet)', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useGlobalStateContext = () => ({
-      changeLayout: changeTo,
-    });
     (hooks as any).useMedia = () => 'tablet';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).toHaveBeenCalledWith('tablet');
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    mount(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'tablet' }, {});
   });
 
   it('does calls changeTo when someething changed (desktop -> mobile)', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useGlobalStateContext = () => ({
-      changeLayout: changeTo,
-    });
     (hooks as any).useMedia = () => 'mobile';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).toHaveBeenCalledWith('mobile');
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    mount(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'mobile' }, {});
   });
 });

package/src/components/ResponsiveLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useMedia, useGlobalState, useGlobalStateContext } from '../hooks';
-import { defaultLayouts, defaultRender, defaultBreakpoints } from '../utils';
-import { LayoutBreakpoints } from '../types';
+import { useMedia } from '../hooks';
+import { defaultLayouts, defaultBreakpoints } from '../utils';
+import { LayoutBreakpoints, LayoutProps } from '../types';
 
 /**
  * The props for the ResponsiveLayout component.
@@ -11,22 +11,18 @@ export interface ResponsiveLayoutProps {
    * The individual breakpoints to be used for the different layouts.
    */
   breakpoints?: LayoutBreakpoints;
+  Layout: React.ComponentType<LayoutProps>;
 }
 
 /**
  * The component capable of identifying and switching the currently used layout.
  */
-export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({ breakpoints = defaultBreakpoints, children }) => {
-  const current = useGlobalState((m) => m.app.layout) || 'desktop';
-  const { changeLayout } = useGlobalStateContext();
-  const selected = useMedia(breakpoints, defaultLayouts, current);
-
-  React.useEffect(() => {
-    if (selected !== current) {
-      changeLayout(selected);
-    }
-  }, [selected]);
-
-  return defaultRender(children);
+export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
+  breakpoints = defaultBreakpoints,
+  Layout,
+  children,
+}) => {
+  const selected = useMedia(breakpoints, defaultLayouts, 'desktop');
+  return <Layout currentLayout={selected}>{children}</Layout>;
 };
 ResponsiveLayout.displayName = 'ResponsiveLayout';

package/src/components/components.tsx

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { useGlobalState } from '../hooks';
 import { ComponentsState } from '../types';
 
+/**
+ * Gets a registered layout component by its name.
+ * This will always return a valid component. If nothing is found
+ * then the returned component will just return null.
+ * @param name The name of the registered layout component.
+ * @returns The registered layout component or an empty stub component.
+ */
 export function getPiralComponent<TKey extends keyof ComponentsState>(name: TKey): ComponentsState[TKey] {
   return (props) => {
     const Component = useGlobalState((s) => s.components[name]);
@@ -14,34 +21,34 @@ export function getPiralComponent<TKey extends keyof ComponentsState>(name: TKey
  * Gets the currently registered ErrorInfo component.
  * By default the DefaultErrorInfo component is used.
  */
-export const PiralError = getPiralComponent('ErrorInfo');
+export const RegisteredErrorInfo = getPiralComponent('ErrorInfo');
 
 /**
  * Gets the currently registered LoadingIndicator component.
  * By default only Loading is rendered.
  */
-export const PiralLoadingIndicator = getPiralComponent('LoadingIndicator');
+export const RegisteredLoadingIndicator = getPiralComponent('LoadingIndicator');
 
 /**
  * Gets the currently registered Router component.
  * By default the BrowserRouter is used.
  */
-export const PiralRouter = getPiralComponent('Router');
+export const RegisteredRouter = getPiralComponent('Router');
 
 /**
  * Gets the currently registered Route Switch component.
  * By default the DefaultRouteSwitch component is used.
  */
-export const PiralRouteSwitch = getPiralComponent('RouteSwitch');
+export const RegisteredRouteSwitch = getPiralComponent('RouteSwitch');
 
 /**
  * Gets the currently registered Layout component.
  * By default the children are rendered.
  */
-export const PiralLayout = getPiralComponent('Layout');
+export const RegisteredLayout = getPiralComponent('Layout');
 
 /**
  * Gets the currently registered Debug component.
  * By default nothing is used.
  */
-export const PiralDebug = getPiralComponent('Debug');
+export const RegisteredDebug = getPiralComponent('Debug');

package/src/components/index.ts

@@ -1,22 +1,12 @@
 export * from './components';
-export * from './DefaultErrorInfo';
-export * from './DefaultLayout';
-export * from './DefaultLoader';
-export * from './DefaultRouter';
-export * from './DefaultRouteSwitch';
 export * from './ErrorBoundary';
 export * from './ExtensionSlot';
 export * from './Mediator';
+export * from './PiralGlobals';
 export * from './PiralRoutes';
+export * from './PiralSuspense';
 export * from './PiralView';
 export * from './PortalRenderer';
 export * from './ResponsiveLayout';
-export * from './SetComponent';
-export * from './SetError';
-export * from './SetErrors';
-export * from './SetLayout';
-export * from './SetProvider';
-export * from './SetRedirect';
-export * from './SetRoute';
 export * from './SwitchErrorInfo';
 export * from './wrapComponent';

package/src/{components → defaults}/DefaultErrorInfo.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ExtensionSlot } from './ExtensionSlot';
-import { SwitchErrorInfo } from './SwitchErrorInfo';
+import { ExtensionSlot, SwitchErrorInfo } from '../components';
 import { ErrorInfoProps } from '../types';
 
 /**

package/src/{components → defaults}/DefaultLayout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LayoutProps } from '../types';
 import { defaultRender } from '../utils';
+import { LayoutProps } from '../types';
 
 /**
  * The default layout only rendering the provided children.

package/src/{components/DefaultLoader.test.tsx → defaults/DefaultLoadingIndicator.test.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { DefaultLoadingIndicator } from './DefaultLoader';
+import { DefaultLoadingIndicator } from './DefaultLoadingIndicator';
 import { mount } from 'enzyme';
 
-describe('Default Loader Component', () => {
+describe('Default Loading Indicator Component', () => {
   it('renders correctly', () => {
     const node = mount(<DefaultLoadingIndicator />);
     expect(node.find('div').length).toBe(1);

package/src/defaults/index.ts

@@ -0,0 +1,5 @@
+export * from './DefaultErrorInfo';
+export * from './DefaultLayout';
+export * from './DefaultLoadingIndicator';
+export * from './DefaultRouter';
+export * from './DefaultRouteSwitch';