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

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/wrapComponent.tsx

@@ -4,7 +4,7 @@ import { PortalRenderer } from './PortalRenderer';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 import { useGlobalStateContext } from '../hooks';
 import { convertComponent, none } from '../utils';
-import { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
+import type { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
 
 // this is an arbitrary start number to have 6 digits
 let portalIdBase = 123456;

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/hooks/setter.test.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { useSetter } from './setter';
 
 describe('UseSetter Hook Module', () => {
@@ -12,7 +12,8 @@ describe('UseSetter Hook Module', () => {
       return null;
     };
 
-    render(React.createElement(MyComponent), document.body.appendChild(document.createElement('div')));
+    const root = createRoot(document.body.appendChild(document.createElement('div')));
+    root.render(React.createElement(MyComponent));
     await act(() => Promise.resolve());
     expect(cb).toHaveBeenCalled();
   });

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { __RouterContext } from 'react-router';
 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 +25,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) => (

package/src/types/components.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
@@ -191,12 +191,21 @@ export interface LayoutProps {
    * The currently selected layout type.
    */
   currentLayout: LayoutType;
+  /**
+   * The page's content.
+   */
+  children: ReactNode;
 }
 
 /**
  * The props of a Router component.
  */
-export interface RouterProps {}
+export interface RouterProps {
+  /**
+   * The content to be rendered inside the router.
+   */
+  children?: ReactNode;
+}
 
 /**
  * The props of the RouteSwitch component.

package/src/types/instance.ts

@@ -1,16 +1,24 @@
+import type { ReactNode } from 'react';
 import type { PiletApi, PiletApiCreator, LoadPiletsOptions, EventEmitter } from 'piral-base';
 import type { GlobalStateContext } from './state';
 import type { LayoutBreakpoints } from './layout';
-import { PiralConfiguration } from './config';
+import type { PiralConfiguration } from './config';
 
 /**
- * The props of the Piral component.
+ * The props of the Piral context.
  */
-export interface PiralProps {
+export interface PiralContextProps {
   /**
    * The specific Piral instance to be used.
    */
   instance?: PiralInstance;
+  children?: ReactNode;
+}
+
+/**
+ * The props of the Piral component.
+ */
+export interface PiralProps extends PiralContextProps {
   /**
    * The custom breakpoints for the different layout modi.
    */

package/src/types/state.ts

@@ -1,9 +1,8 @@
-import type { ComponentType, ReactPortal } from 'react';
+import type { ComponentType, ReactPortal, PropsWithChildren } from 'react';
 import type { RouteComponentProps } from 'react-router';
 import type { Atom } from '@dbeining/react-atom';
 import type { LoadPiletsOptions } from 'piral-base';
 import type { Dict, Without } from './common';
-import type { LayoutType } from './layout';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type {
   PiralCustomActions,
@@ -42,7 +41,7 @@ declare module './components' {
   }
 }
 
-export type WrappedComponent<TProps> = ComponentType<Without<TProps, keyof BaseComponentProps>>;
+export type WrappedComponent<TProps> = ComponentType<PropsWithChildren<Without<TProps, keyof BaseComponentProps>>>;
 
 /**
  * The base type for pilet component registration in the global state context.
@@ -102,10 +101,6 @@ export interface ComponentsState extends PiralCustomComponentsState {
  * The Piral global app sub-state container for app information.
  */
 export interface AppState {
-  /**
-   * Information for the layout computation.
-   */
-  layout: LayoutType;
   /**
    * Gets if the application is currently performing a background loading
    * activity, e.g., for loading modules asynchronously or fetching
@@ -254,11 +249,6 @@ export interface PiralActions extends PiralCustomActions {
    * @param expiration The time for when to dispose the shared item.
    */
   tryWriteDataItem(name: string, value: any, owner: string, target: DataStoreTarget, expiration: number): boolean;
-  /**
-   * Performs a layout change.
-   * @param current The layout to take.
-   */
-  changeLayout(current: LayoutType): void;
   /**
    * Registers a new route to be resolved.
    * @param route The route to register.