piral-core 1.0.0-pre.2296 → 1.0.1-beta.5640

package/src/components/ForeignComponentContainer.test.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { render, act } from '@testing-library/react';
+import { ForeignComponentContainer } from './ForeignComponentContainer';
+
+function resolveAfter(time = 5) {
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
+}
+
+describe('ForeignComponentContainer component', () => {
+  it('mounts an HTML component', async () => {
+    const mount = jest.fn();
+    const component = { mount };
+    const container = render(
+      <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
+    );
+    await act(resolveAfter);
+    expect(mount).toHaveBeenCalled();
+    container.unmount();
+  });
+
+  it('unmounts an HTML component', async () => {
+    const mount = jest.fn();
+    const unmount = jest.fn();
+    const component = { mount, unmount };
+    const container = render(
+      <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
+    );
+    await act(resolveAfter);
+    expect(mount).toHaveBeenCalled();
+    expect(unmount).not.toHaveBeenCalled();
+    container.unmount();
+    expect(unmount).toHaveBeenCalled();
+  });
+
+  it('updates an HTML component', async () => {
+    const mount = jest.fn();
+    const update = jest.fn();
+    const component = { mount, update };
+    const container = render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'bar' }}
+      />,
+    );
+    await act(resolveAfter);
+    expect(mount).toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    container.rerender(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'foo' }}
+      />,
+    );
+    await act(resolveAfter);
+    expect(update).toHaveBeenCalled();
+    container.unmount();
+  });
+
+  it('forces re-rendering of an HTML component', async () => {
+    const componentDidMount = ForeignComponentContainer.prototype.componentDidMount;
+    ForeignComponentContainer.prototype.componentDidMount = function () {
+      componentDidMount.call(this);
+      this.previous = {
+        removeEventListener() {},
+      };
+    };
+    const mount = jest.fn();
+    const update = jest.fn();
+    const unmount = jest.fn();
+    const component = { mount, update, unmount };
+    const container = render(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'bar' }}
+      />,
+    );
+    await act(resolveAfter);
+    expect(mount).toHaveBeenCalled();
+    expect(unmount).not.toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    container.rerender(
+      <ForeignComponentContainer
+        $component={component}
+        $context={undefined}
+        $portalId="foo"
+        innerProps={{ a: 'foo' }}
+      />,
+    );
+    await act(resolveAfter);
+    expect(update).not.toHaveBeenCalled();
+    expect(unmount).toHaveBeenCalled();
+    container.unmount();
+  });
+});

package/src/components/ForeignComponentContainer.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { isfunc } from 'piral-base';
+import type {} from 'piral-debug-utils';
+import type { ForeignComponent, BaseComponentProps, ComponentContext } from '../types';
+
+interface ForeignComponentContainerProps<T> {
+  $portalId: string;
+  $component: ForeignComponent<T>;
+  $context: ComponentContext;
+  innerProps: T & BaseComponentProps;
+}
+
+export class ForeignComponentContainer<T> extends React.Component<ForeignComponentContainerProps<T>> {
+  private locals?: Record<string, any> = {};
+  private current?: HTMLElement;
+  private previous?: HTMLElement;
+
+  private setNode = (node: HTMLDivElement) => {
+    this.current = node;
+  };
+
+  componentDidMount() {
+    const { current } = this;
+    const { $component, $context, innerProps } = this.props;
+    const { mount } = $component;
+
+    if (current && isfunc(mount)) {
+      mount(current, innerProps, $context, this.locals);
+    }
+
+    this.previous = current;
+  }
+
+  componentDidUpdate() {
+    const { current, previous } = this;
+    const { $component, $context, innerProps } = this.props;
+    const { update } = $component;
+
+    if (current !== previous) {
+      previous && this.componentWillUnmount();
+      current && this.componentDidMount();
+    } else if (isfunc(update)) {
+      update(current, innerProps, $context, this.locals);
+    }
+  }
+
+  componentWillUnmount() {
+    const { previous } = this;
+    const { $component } = this.props;
+    const { unmount } = $component;
+
+    if (previous && isfunc(unmount)) {
+      unmount(previous, this.locals);
+    }
+
+    this.previous = undefined;
+  }
+
+  render() {
+    const { $portalId } = this.props;
+    return <piral-portal pid={$portalId} ref={this.setNode} />;
+  }
+}

package/src/components/Mediator.test.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { Mediator } from './Mediator';
-import { Atom, swap, deref } from '@dbeining/react-atom';
-import { mount } from 'enzyme';
 import { StateContext } from '../state';
 import { PiletMetadata } from '../types';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     app: {
       layout: 'tablet',
       loading: false,
       error: undefined,
     },
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -20,18 +20,22 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
+      },
+      readState(select) {
+        return select(state.getState());
       },
       initialize(loading, error, modules) {
-        swap(state, (state) => ({
-          ...state,
+        const s = state.getState();
+        state.setState({
+          ...s,
           app: {
-            ...state.app,
+            ...s.app,
             error,
             loading,
           },
           modules,
-        }));
+        } as any);
       },
     } as any,
   };
@@ -42,17 +46,15 @@ describe('Component Mediator', () => {
     const options = {
       createApi: jest.fn(),
       fetchPilets: () => {
-        return new Promise<Array<PiletMetadata>>((resolve, reject) => {
-          resolve([]);
-        });
+        return new Promise<Array<PiletMetadata>>((resolve) => resolve([]));
       },
     };
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <Mediator options={options} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).app.layout).toEqual('tablet');
+    expect(context.state.getState().app.layout).toEqual('tablet');
   });
 });

package/src/components/Mediator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { LoadPiletsOptions, startLoadingPilets, PiletsLoading } from 'piral-base';
-import { useAction } from '../hooks';
+import { useGlobalStateContext } from '../hooks';
+import { none } from '../utils';
 
 /**
  * The props of the Mediator component.
@@ -16,15 +17,22 @@ export interface MediatorProps {
  * The Mediator component for interfacing with pilets loading.
  */
 export const Mediator: React.FC<MediatorProps> = ({ options }) => {
-  const initialize = useAction('initialize');
+  const { initialize, readState } = useGlobalStateContext();
+
   React.useEffect(() => {
-    const { connect, disconnect } = startLoadingPilets(options);
-    const notifier: PiletsLoading = (error, pilets, loaded) => {
-      initialize(!loaded, error, pilets);
-    };
-    connect(notifier);
-    return () => disconnect(notifier);
-  }, []);
+    const shouldLoad = readState(s => s.app.loading);
+
+    if (shouldLoad) {
+      const { connect, disconnect } = startLoadingPilets(options);
+      const notifier: PiletsLoading = (error, pilets, loaded) => {
+        initialize(!loaded, error, pilets);
+      };
+      connect(notifier);
+      return () => disconnect(notifier);
+    }
+
+  }, none);
+
   // tslint:disable-next-line:no-null-keyword
   return null;
 };

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import * as hooks from '../hooks';
 import { MemoryRouter } from 'react-router';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { PiralRoutes } from './PiralRoutes';
+import { DefaultRouteSwitch } from '../defaults/DefaultRouteSwitch_v5';
 
 const mountWithRouter = (node, url = '/') =>
-  mount(
+  render(
     <MemoryRouter initialEntries={[url]} initialIndex={0}>
       {node}
     </MemoryRouter>,
@@ -13,91 +14,98 @@ const mountWithRouter = (node, url = '/') =>
 
 jest.mock('../hooks');
 
-(hooks as any).useGlobalState = (select: any) =>
-  select({
-    app: {},
-    routes: {
-      '/': StubHome,
-      '/custom': StubCustomPage,
-    },
-    registry: {
-      pages: {
-        '/foo': { component: StubFooPage },
-        '/foo/bar': { component: StubFooBarPage },
-        '/bar': { component: StubBarPage },
-      },
-    },
-  });
-
-const StubHome: React.FC = (props) => <div />;
+(hooks as any).useRoutes = () => [
+  {
+    path: '/',
+    Component: StubHome,
+  },
+  {
+    path: '/custom',
+    Component: StubCustomPage,
+  },
+  {
+    path: '/foo',
+    Component: StubFooPage,
+  },
+  {
+    path: '/foo/bar',
+    Component: StubFooBarPage,
+  },
+  {
+    path: '/bar',
+    Component: StubBarPage,
+  },
+];
+
+const StubHome: React.FC = (props) => <div role="home" />;
 StubHome.displayName = 'StubHome';
 
-const StubCustomPage: React.FC = (props) => <div />;
+const StubCustomPage: React.FC = (props) => <div role="custom-page" />;
 StubCustomPage.displayName = 'StubCustomPage';
 
-const StubNotFound: React.FC = (props) => <div />;
+const StubNotFound: React.FC = (props) => <div role="not-found" />;
 StubNotFound.displayName = 'StubNotFound';
 
-const StubComponent: React.FC<{ data: any }> = (props) => <div />;
+const StubComponent: React.FC<{ data: any }> = (props) => <div role="component" />;
 StubComponent.displayName = 'StubComponent';
 
-const StubFooPage: React.FC<{ data: any }> = (props) => <div />;
+const StubFooPage: React.FC<{ data: any }> = (props) => <div role="foo-page" />;
 StubFooPage.displayName = 'StubFooPage';
 
-const StubFooBarPage: React.FC<{ data: any }> = (props) => <div />;
+const StubFooBarPage: React.FC<{ data: any }> = (props) => <div role="foo-bar-page" />;
 StubFooBarPage.displayName = 'StubFooBarPage';
 
-const StubBarPage: React.FC<{ data: any }> = (props) => <div />;
+const StubBarPage: React.FC<{ data: any }> = (props) => <div role="bar-page" />;
 StubBarPage.displayName = 'StubBarPage';
 
 describe('Routes Module', () => {
   it('always goes to the given home on "/"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/');
-    expect(node.find(StubHome).length).toBe(1);
-    expect(node.find(StubNotFound).length).toBe(0);
-    expect(node.find(StubCustomPage).length).toBe(0);
-    expect(node.find(StubFooBarPage).length).toBe(0);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/');
+    expect(node.queryAllByRole('home').length).toBe(1);
+    expect(node.queryAllByRole('not-found').length).toBe(0);
+    expect(node.queryAllByRole('custom-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(0);
   });
 
   it('goes to the not found on an invalid path', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/qxz');
-    expect(node.find(StubHome).length).toBe(0);
-    expect(node.find(StubNotFound).length).toBe(1);
-    expect(node.find(StubCustomPage).length).toBe(0);
-    expect(node.find(StubFooBarPage).length).toBe(0);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/qxz');
+    expect(node.queryAllByRole('home').length).toBe(0);
+    expect(node.queryAllByRole('not-found').length).toBe(1);
+    expect(node.queryAllByRole('custom-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(0);
   });
 
   it('goes to the custom page on "/custom"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/custom');
-    expect(node.find(StubHome).length).toBe(0);
-    expect(node.find(StubNotFound).length).toBe(0);
-    expect(node.find(StubCustomPage).length).toBe(1);
-    expect(node.find(StubFooBarPage).length).toBe(0);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/custom');
+    expect(node.queryAllByRole('home').length).toBe(0);
+    expect(node.queryAllByRole('not-found').length).toBe(0);
+    expect(node.queryAllByRole('custom-page').length).toBe(1);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(0);
   });
 
   it('goes exactly to the page on "/foo/bar"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/foo/bar');
-    expect(node.find(StubHome).length).toBe(0);
-    expect(node.find(StubNotFound).length).toBe(0);
-    expect(node.find(StubCustomPage).length).toBe(0);
-    expect(node.find(StubFooBarPage).length).toBe(1);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/foo/bar');
+    expect(node.queryAllByRole('home').length).toBe(0);
+    expect(node.queryAllByRole('not-found').length).toBe(0);
+    expect(node.queryAllByRole('custom-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(1);
   });
 
   it('goes exactly to the page on "/foo"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/foo');
-    expect(node.find(StubHome).length).toBe(0);
-    expect(node.find(StubNotFound).length).toBe(0);
-    expect(node.find(StubCustomPage).length).toBe(0);
-    expect(node.find(StubFooBarPage).length).toBe(0);
-    expect(node.find(StubFooPage).length).toBe(1);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/foo');
+    expect(node.queryAllByRole('home').length).toBe(0);
+    expect(node.queryAllByRole('not-found').length).toBe(0);
+    expect(node.queryAllByRole('custom-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-page').length).toBe(1);
   });
 
   it('goes exactly to the page on "/bar"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/bar');
-    expect(node.find(StubHome).length).toBe(0);
-    expect(node.find(StubNotFound).length).toBe(0);
-    expect(node.find(StubCustomPage).length).toBe(0);
-    expect(node.find(StubFooBarPage).length).toBe(0);
-    expect(node.find(StubBarPage).length).toBe(1);
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/bar');
+    expect(node.queryAllByRole('home').length).toBe(0);
+    expect(node.queryAllByRole('not-found').length).toBe(0);
+    expect(node.queryAllByRole('custom-page').length).toBe(0);
+    expect(node.queryAllByRole('foo-bar-page').length).toBe(0);
+    expect(node.queryAllByRole('bar-page').length).toBe(1);
   });
 });

package/src/components/PiralRoutes.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Route, Switch, RouteComponentProps, SwitchProps } from 'react-router';
-import { useGlobalState } from '../hooks';
+import { RouteComponentProps, SwitchProps } from 'react-router';
+import { useRoutes } from '../hooks';
+import { RouteSwitchProps } from '../types';
 
 /**
  * The props used by the PiralRoutes component.
@@ -10,25 +11,17 @@ export interface RoutesProps extends SwitchProps {
    * Sets the component for showing the not found page.
    */
   NotFound: React.ComponentType<RouteComponentProps>;
+  /**
+   * Sets the component for actually switching the routes.
+   */
+  RouteSwitch: React.ComponentType<RouteSwitchProps>;
 }
 
 /**
  * The component for defining the exclusive routes to be used.
  */
-export const PiralRoutes: React.FC<RoutesProps> = ({ NotFound, ...props }) => {
-  const routes = useGlobalState((s) => s.routes);
-  const pages = useGlobalState((s) => s.registry.pages);
-
-  return (
-    <Switch {...props}>
-      {Object.keys(routes).map((url) => (
-        <Route exact key={url} path={url} component={routes[url]} />
-      ))}
-      {Object.keys(pages).map((url) => (
-        <Route exact key={url} path={url} component={pages[url].component} />
-      ))}
-      <Route component={NotFound} />
-    </Switch>
-  );
+export const PiralRoutes: React.FC<RoutesProps> = ({ NotFound, RouteSwitch, ...props }) => {
+  const paths = useRoutes();
+  return <RouteSwitch NotFound={NotFound} paths={paths} {...props} />;
 };
 PiralRoutes.displayName = 'Routes';

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

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment node
+ */
+
+import * as React from 'react';
+import * as hooks from '../hooks';
+import * as routes from './PiralRoutes';
+import { renderToString } from 'react-dom/server';
+import { PiralView } from './PiralView';
+
+const StubDashboard: React.FC = () => <div />;
+StubDashboard.displayName = 'StubDashboard';
+
+const StubErrorInfo: React.FC = () => <div />;
+StubErrorInfo.displayName = 'StubErrorInfo';
+
+const StubLoader: React.FC = () => <div />;
+StubLoader.displayName = 'StubLoader';
+
+const StubRouter: React.FC<React.PropsWithChildren<{}>> = ({ children }) => <div>{children}</div>;
+StubRouter.displayName = 'StubRouter';
+
+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: {},
+  },
+  portals: {},
+  routes: {},
+  provider: undefined,
+};
+
+(hooks as any).useGlobalState = (select: any) => select(state);
+
+(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 html = renderToString(<PiralView children={undefined} />);
+    expect(typeof window).toBe('undefined');
+    expect(html).not.toBe('');
+  });
+});