piral-core 0.15.0-alpha.4034 → 0.15.0-alpha.4098

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/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

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

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,25 @@ export interface ResponsiveLayoutProps {
    * The individual breakpoints to be used for the different layouts.
    */
   breakpoints?: LayoutBreakpoints;
+  /**
+   * The actual layout component to render to transport.
+   */
+  Layout: React.ComponentType<LayoutProps>;
+  /**
+   * The content to display.
+   */
+  children: React.ReactNode;
 }
 
 /**
  * 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/{components → defaults}/DefaultRouter.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { useGlobalState } from '../hooks';
+import { RouterProps } from '../types';
 
-export const DefaultRouter: React.FC = ({ children }) => {
+export const DefaultRouter: React.FC<RouterProps> = ({ children }) => {
   const publicPath = useGlobalState((s) => s.app.publicPath);
   return <BrowserRouter basename={publicPath}>{children}</BrowserRouter>;
 };

package/src/defaults/index.ts

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

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from './Piral';
 export * from './helpers';
 export * from './components';
 export * from './hooks';
+export * from './setters';
 export * from './state';
 export * from './utils';
 export * from './types';

package/src/setters/index.ts

@@ -0,0 +1,7 @@
+export * from './SetComponent';
+export * from './SetError';
+export * from './SetErrors';
+export * from './SetLayout';
+export * from './SetProvider';
+export * from './SetRedirect';
+export * from './SetRoute';

package/src/state/createGlobalState.test.ts

@@ -6,7 +6,7 @@ import {
   DefaultLayout,
   DefaultRouter,
   DefaultRouteSwitch,
-} from '../components';
+} from '../defaults';
 
 process.env.PIRAL_PUBLIC_PATH = '/';
 
@@ -17,7 +17,6 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({});
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -46,7 +45,6 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState({});
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -80,7 +78,6 @@ describe('Create Global State Module', () => {
     expect(deref(globalState)).toEqual({
       app: {
         error: undefined,
-        layout: 'desktop',
         loading: true,
         publicPath: '/',
       },
@@ -108,7 +105,6 @@ describe('Create Global State Module', () => {
     const globalState = createGlobalState();
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -139,7 +135,6 @@ describe('Create Global State Module', () => {
     });
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -170,7 +165,6 @@ describe('Create Global State Module', () => {
     });
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -198,7 +192,6 @@ describe('Create Global State Module', () => {
   it('global state with non-default breakpoints and more routes', () => {
     const globalState = createGlobalState({
       app: {
-        layout: 'desktop',
       },
       routes: {
         '/': '...' as any,
@@ -207,7 +200,6 @@ describe('Create Global State Module', () => {
     });
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: true,
         error: undefined,
         publicPath: '/',
@@ -243,7 +235,6 @@ describe('Create Global State Module', () => {
     });
     expect(deref(globalState)).toEqual({
       app: {
-        layout: 'desktop',
         loading: false,
         error: undefined,
         publicPath: '/',

package/src/state/createGlobalState.ts

@@ -1,12 +1,12 @@
 import { Atom } from '@dbeining/react-atom';
+import { GlobalState, NestedPartial } from '../types';
 import {
   DefaultErrorInfo,
   DefaultLoadingIndicator,
   DefaultLayout,
   DefaultRouter,
   DefaultRouteSwitch,
-} from '../components';
-import { GlobalState, NestedPartial } from '../types';
+} from '../defaults';
 
 function extend<T>(defaultState: T, customState: NestedPartial<T>) {
   for (const key of Object.keys(customState)) {
@@ -28,7 +28,6 @@ export function createGlobalState(customState: NestedPartial<GlobalState> = {})
     app: {
       error: undefined,
       loading: typeof window !== 'undefined',
-      layout: 'desktop',
       publicPath: process.env.PIRAL_PUBLIC_PATH || '/',
     },
     components: {

package/src/state/withApi.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary, wrapComponent } from '../components';
 import { defaultRender } from '../utils';
 import { AnyComponent, Errors, PiletApi, BaseComponentProps, GlobalStateContext } from '../types';
 
-const DefaultWrapper: React.FC = (props) => defaultRender(props.children);
+const DefaultWrapper: React.FC<React.PropsWithChildren<{}>> = (props) => defaultRender(props.children);
 
 function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
   const WrapAll = wrappers['*'];
@@ -26,7 +26,7 @@ function makeWrapper<TProps>(
   outerProps: any,
   wrapperType: string,
   errorType: keyof Errors,
-): React.FC<TProps> {
+): React.FC<React.PropsWithChildren<TProps>> {
   const OuterWrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
 
   return (props) => (