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

package/src/actions/define.test.ts

@@ -1,8 +1,8 @@
-import { Atom } from '@dbeining/react-atom';
+import create from 'zustand';
 import { defineAction, defineActions } from './define';
 
 function createMockContainer(initialState = {}) {
-  const state = Atom.of(initialState);
+  const state = create(() => initialState);
   return {
     context: {
       on: jest.fn(),

package/src/actions/portal.test.ts

@@ -1,48 +1,93 @@
 import * as React from 'react';
-import { Atom, swap, deref } from '@dbeining/react-atom';
-import { showPortal, destroyPortal } from './portal';
+import create from 'zustand';
+import { showPortal, destroyPortal, hidePortal, updatePortal } from './portal';
 
 describe('Piral-Core portal actions', () => {
-  it('showPortal adds a portal', () => {
+  it('destroyPortal removes a portal', () => {
+    const children = React.createElement('div');
+    const portal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
+
+    const state = create(() => ({
+      portals: { test: { portal } },
+    }));
+
+    const ctx: any = {
+      state,
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+    };
+
+    destroyPortal(ctx, 'test');
+    const { portals } = ctx.state.getState();
+    expect(portals).not.toBeNull();
+    expect(portals.test).toBeUndefined();
+  });
+
+  it('hidePortal hides a portal', () => {
     const children = React.createElement('div');
     const newPortal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
     const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
+    const state = create(() => ({
       portals: { p1: { portal } },
-    });
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
-    showPortal(ctx, 'test', newPortal);
-    const { portals } = deref(ctx.state);
+    hidePortal(ctx, 'test', newPortal);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
     expect(portals.test).not.toBeNull();
   });
 
-  it('destroyPortal removes a portal', () => {
+  it('updatePortal updates a portal', () => {
     const children = React.createElement('div');
-    const portal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
+    const current: React.ReactPortal = { key: 'current', children: { children }, type: 'div', props: null };
+    const next: React.ReactPortal = { key: 'next', children: { children }, type: 'div', props: null };
+    const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
 
-    const state = Atom.of({
-      portals: { test: { portal } },
-    });
+    const state = create(() => ({
+      portals: { p1: { portal } },
+    }));
 
     const ctx: any = {
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     };
 
-    destroyPortal(ctx, 'test');
-    const { portals } = deref(ctx.state);
+    updatePortal(ctx, 'test', current, next);
+    const { portals } = ctx.state.getState();
     expect(portals).not.toBeNull();
-    expect(portals.test).toBeUndefined();
+    expect(portals.test).not.toBeNull();
+  });
+
+  it('showPortal adds a portal', () => {
+    const children = React.createElement('div');
+    const newPortal: React.ReactPortal = { key: 'test', children: { children }, type: 'div', props: null };
+    const portal: React.ReactPortal = { key: 'toast', children: { children }, type: 'div', props: null };
+
+    const state = create(() => ({
+      portals: { p1: { portal } },
+    }));
+
+    const ctx: any = {
+      state,
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+    };
+
+    showPortal(ctx, 'test', newPortal);
+    const { portals } = ctx.state.getState();
+    expect(portals).not.toBeNull();
+    expect(portals.test).not.toBeNull();
   });
 });

package/src/actions/portal.ts

@@ -1,5 +1,5 @@
 import { ReactPortal } from 'react';
-import { withoutKey, includeItem, withKey } from '../utils';
+import { withoutKey, withKey, includeItem, excludeItem, replaceOrAddItem } from '../utils';
 import { GlobalStateContext } from '../types';
 
 export function destroyPortal(ctx: GlobalStateContext, id: string) {
@@ -9,6 +9,24 @@ export function destroyPortal(ctx: GlobalStateContext, id: string) {
   }));
 }
 
+export function hidePortal(ctx: GlobalStateContext, id: string, entry: ReactPortal) {
+  ctx.dispatch((state) => ({
+    ...state,
+    portals: withKey(state.portals, id, excludeItem(state.portals[id], entry)),
+  }));
+}
+
+export function updatePortal(ctx: GlobalStateContext, id: string, current: ReactPortal, next: ReactPortal) {
+  ctx.dispatch((state) => ({
+    ...state,
+    portals: withKey(
+      state.portals,
+      id,
+      replaceOrAddItem(state.portals[id], next, (m) => m === current),
+    ),
+  }));
+}
+
 export function showPortal(ctx: GlobalStateContext, id: string, entry: ReactPortal) {
   ctx.dispatch((state) => ({
     ...state,

package/src/actions/state.test.ts

@@ -1,8 +1,8 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
 import { readState, dispatch } from './state';
 
 function createMockContainer(initialState = {}) {
-  const state = Atom.of(initialState);
+  const state = create(() => initialState);
   return {
     context: {
       on: jest.fn(),
@@ -11,7 +11,7 @@ function createMockContainer(initialState = {}) {
       defineActions() {},
       state,
       read() {
-        return deref(state);
+        return state.getState();
       },
     } as any,
   };

package/src/actions/state.ts

@@ -1,11 +1,15 @@
-import { swap, deref } from '@dbeining/react-atom';
+import { isSame } from '../utils';
 import { GlobalState, GlobalStateContext } from '../types';
 
 export function dispatch(ctx: GlobalStateContext, update: (state: GlobalState) => GlobalState) {
-  swap(ctx.state, update);
+  const oldState = ctx.state.getState();
+  const newState = update(oldState);
+
+  if (!isSame(oldState, newState)) {
+    ctx.state.setState(newState);
+  }
 }
 
 export function readState<S>(ctx: GlobalStateContext, read: (state: GlobalState) => S) {
-  const state = deref(ctx.state);
-  return read(state);
+  return read(ctx.state.getState());
 }

package/src/components/ErrorBoundary.tsx

@@ -1,42 +1,22 @@
 import * as React from 'react';
-import { isfunc } from 'piral-base';
+import { RegisteredErrorInfo, RegisteredLoadingIndicator } from './components';
+import { Errors, PiletApi } from '../types';
 
-/**
- * The options to be used for determining the boundary's behavior.
- */
-export interface ErrorBoundaryOptions<T> {
-  /**
-   * Callback to be used in case of an emitted error.
-   * @param error The error caught by the boundary.
-   */
-  onError(error: Error): void;
+export interface ErrorBoundaryProps {
   /**
-   * Callback to be used when an error should be rendered.
-   * @param error The error caught by the boundary.
-   * @param props The props used by the boundary.
+   * The type of error to indicate when caught.
    */
-  renderError?(error: Error, props: T): React.ReactNode;
+  errorType: keyof Errors;
   /**
-   * Callback to used when no error should be rendered.
-   * @param children The standard children to render.
-   * @param props The props used by the boundary.
+   * The associated pilet api for the metadata.
    */
-  renderChild(children: React.ReactNode, props: T): React.ReactNode;
-}
-
-/**
- * The props of the ErrorBoundary component.
- */
-export interface ErrorBoundaryProps<T> extends ErrorBoundaryOptions<T> {
+  piral: PiletApi;
   /**
-   * The render props for the specific ErrorBoundary.
+   * The content to render (i.e., where to apply the boundary to).
    */
-  renderProps: T;
+  children: React.ReactNode;
 }
 
-/**
- * The state of the ErrorBoundary component.
- */
 export interface ErrorBoundaryState {
   /**
    * The current error (if any) caught by the boundary.
@@ -45,22 +25,17 @@ export interface ErrorBoundaryState {
 }
 
 /**
- * The React component for catching errors and displaying error information.
+ * The component for catching errors and displaying error information.
  */
-export class ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps<T>) {
-    super(props);
-    this.state = {
-      error: undefined,
-    };
-  }
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state = {
+    error: undefined,
+  };
 
   componentDidCatch(error: Error) {
-    const { onError } = this.props;
-
-    if (isfunc(onError)) {
-      onError(error);
-    }
+    const { piral, errorType } = this.props;
+    const pilet = piral.meta.name;
+    console.error(`[${pilet}] Exception in component of type "${errorType}".`, error);
 
     this.setState({
       error,
@@ -68,17 +43,15 @@ export class ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, Err
   }
 
   render() {
-    const { children, renderError, renderChild, renderProps } = this.props;
+    const { children, piral, errorType, ...renderProps } = this.props;
     const { error } = this.state;
+    const rest: any = renderProps;
 
     if (error) {
-      if (isfunc(renderError)) {
-        return renderError(error, renderProps);
-      }
-
-      return <div style={{ whiteSpace: 'pre-wrap' }}>{error && error.message}</div>;
+      const pilet = piral.meta.name;
+      return <RegisteredErrorInfo type={errorType} error={error} pilet={pilet} {...rest} />;
     }
 
-    return isfunc(renderChild) ? renderChild(children, renderProps) : children;
+    return <React.Suspense fallback={<RegisteredLoadingIndicator />}>{children}</React.Suspense>;
   }
 }

package/src/components/ExtensionSlot.test.tsx

@@ -1,20 +1,42 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { ExtensionSlot } from './ExtensionSlot';
 
 jest.mock('../hooks/globalState', () => ({
-  useGlobalState(select: any) {
-    return select(state);
-  },
+  useGlobalState: (select: any) => select(state),
+  useGlobalStateContext: () => ({
+    converters: {
+      html: ({ component }) => component,
+    },
+    apis: {
+      _: {
+        meta: {
+          name: 'PiletName',
+        },
+      },
+    },
+    navigation: {
+      router: undefined,
+    },
+    readState() {
+      return '/';
+    },
+    destroyPortal: jest.fn(),
+  }),
 }));
 
-const StubComponent1: React.FC = (props) => <div children={props.children} />;
+(React as any).useMemo = (cb) => cb();
+
+const StubComponent1: React.FC<any> = (props) => <div role="stub1" children={props.children} />;
 StubComponent1.displayName = 'StubComponent1';
 
-const StubComponent2: React.FC = (props) => <div children={props.children} />;
+const StubComponent2: React.FC<any> = (props) => <div role="stub2" children={props.children} />;
 StubComponent2.displayName = 'StubComponent2';
 
+const StubComponent3: React.FC<any> = (props) => <div role="stub3" children={props.children} />;
+
 const state = {
+  portals: {},
   registry: {
     extensions: {
       foo: [],
@@ -29,62 +51,125 @@ const state = {
           component: StubComponent2,
         },
       ],
+      bla: [
+        {
+          component: StubComponent3,
+        },
+      ],
+      lol: [
+        {
+          component: StubComponent1,
+        },
+      ],
     },
   },
 };
 
-(React as any).useMemo = (cb) => cb();
-
 describe('Extension Module', () => {
+  it('is able to default render not available extension with no name', () => {
+    const node = render(<ExtensionSlot />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.container.querySelectorAll('div').length).toBe(0);
+  });
+
+  it('is able to default render given component with no name', () => {
+    const component = {
+      type: 'html',
+      component: {
+        mount(element) {
+          const container = document.createElement('strong');
+          container.textContent = 'Hello!';
+          element.appendChild(container);
+        },
+      },
+    };
+    const node = render(<ExtensionSlot params={{ component }} />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.container.querySelectorAll('strong').length).toBe(1);
+    expect(node.container.textContent).toContain('Hello!');
+  });
+
   it('is able to default render not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
+    const node = render(<ExtensionSlot name="qxz" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
   });
 
   it('is able to (default) render empty extension', () => {
-    const node = mount(<ExtensionSlot name="foo" />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
+    const node = render(<ExtensionSlot name="foo" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
   });
 
   it('is able to custom render not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" render={() => <StubComponent1 />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
+    const node = render(<ExtensionSlot name="qxz" render={() => <StubComponent1 />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
   });
 
   it('is able to (custom) render empty extension', () => {
-    const node = mount(<ExtensionSlot name="foo" render={() => <StubComponent1 />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
+    const node = render(<ExtensionSlot name="foo" render={() => <StubComponent1 />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
   });
 
   it('is able to render extension with multiple entries', () => {
-    const node = mount(<ExtensionSlot name="bar" />);
-    expect(node.find(StubComponent1).length).toBe(2);
-    expect(node.find(StubComponent2).length).toBe(1);
+    const node = render(<ExtensionSlot name="bar" />);
+    expect(node.queryAllByRole("stub1").length).toBe(2);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
+    expect(node.queryAllByRole("stub3").length).toBe(0);
+  });
+
+  it('is able to render extension without displayName', () => {
+    const node = render(<ExtensionSlot name="bla" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
+    expect(node.queryAllByRole("stub3").length).toBe(1);
   });
 
   it('overrides the empty renderer on not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" empty={() => <StubComponent1 key="empty" />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
-    expect(node.find(StubComponent1).length).toBe(1);
+    const node = render(<ExtensionSlot name="qxz" empty={() => <StubComponent1 key="empty" />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
   });
 
   it('overrides the empty renderer on an available extension', () => {
-    const node = mount(<ExtensionSlot name="foo" empty={() => <StubComponent2 key="empty" />} />);
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find(StubComponent2).length).toBe(1);
+    const node = render(<ExtensionSlot name="foo" empty={() => <StubComponent2 key="empty" />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
   });
 
   it('overrides the empty and default renderer on an available extension', () => {
-    const node = mount(
+    const node = render(
+      <ExtensionSlot
+        name="foo"
+        empty={() => <StubComponent2 key="empty" />}
+        render={(nodes) => <StubComponent1 children={nodes} />}
+      />,
+    );
+    expect(node.queryAllByRole("stub1").length).toBe(1);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
+  });
+
+  it('does not use the render function with empty when emptySkipsRender is set', () => {
+    const node = render(
       <ExtensionSlot
         name="foo"
+        emptySkipsRender
+        empty={() => <StubComponent2 key="empty" />}
+        render={(nodes) => <StubComponent1 children={nodes} />}
+      />,
+    );
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
+  });
+
+  it('does use the render function without empty independent if emptySkipsRender is set', () => {
+    const node = render(
+      <ExtensionSlot
+        name="lol"
+        emptySkipsRender
         empty={() => <StubComponent2 key="empty" />}
         render={(nodes) => <StubComponent1 children={nodes} />}
       />,
     );
-    expect(node.find(StubComponent1).length).toBe(1);
-    expect(node.find(StubComponent2).length).toBe(1);
+    expect(node.queryAllByRole("stub1").length).toBe(2);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
   });
 });

package/src/components/ExtensionSlot.tsx

@@ -1,8 +1,33 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
-import { useGlobalState } from '../hooks';
-import { defaultRender } from '../utils';
-import { ExtensionSlotProps } from '../types';
+import { wrapComponent } from './wrapComponent';
+import { useGlobalState, useGlobalStateContext } from '../hooks';
+import { defaultRender, none } from '../utils';
+import { ExtensionRegistration, ExtensionSlotProps } from '../types';
+
+const wrapper = ({ children }) => defaultRender(children);
+
+const renderExtensions: [ExtensionRegistration] = [
+  {
+    component: (props) => {
+      const context = useGlobalStateContext();
+      const converters = context.converters;
+      const piral = context.apis._;
+      const { component, props: args } = props.params;
+      const Component = React.useMemo(() => wrapComponent(converters, component, { piral }, wrapper), [component]);
+      return <Component {...args} />;
+    },
+    defaults: {},
+    pilet: '',
+    reference: {
+      displayName: 'AnyComponent',
+    },
+  },
+];
+
+function defaultOrder(extensions: Array<ExtensionRegistration>) {
+  return extensions;
+}
 
 /**
  * The extension slot component to be used when the available
@@ -10,21 +35,35 @@ import { ExtensionSlotProps } from '../types';
  * location.
  */
 export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
-  const { name, render = defaultRender, empty, params } = props;
-  const extensions = useGlobalState((s) => s.registry.extensions[name] || []);
-  return render(
-    extensions.length === 0 && isfunc(empty)
-      ? [defaultRender(empty(), 'empty')]
-      : extensions.map(({ component: Component, reference, defaults = {} }, i) => (
-          <Component
-            key={`${reference?.displayName || '_'}${i}`}
-            params={{
-              ...defaults,
-              ...(params || {}),
-            }}
-          />
-        )),
-  );
+  const {
+    name,
+    render = defaultRender,
+    empty,
+    params,
+    children,
+    emptySkipsRender = false,
+    order = defaultOrder,
+  } = props;
+  const extensions = useGlobalState((s) => (name ? s.registry.extensions[name] || none : renderExtensions));
+  const isEmpty = extensions.length === 0 && isfunc(empty);
+  const content = isEmpty
+    ? [defaultRender(empty(), 'empty')]
+    : order(extensions).map(({ component: Component, reference, defaults = {} }, i) => (
+        <Component
+          key={`${reference?.displayName || '_'}${i}`}
+          children={children}
+          params={{
+            ...defaults,
+            ...params,
+          }}
+        />
+      ));
+
+  if (isEmpty && emptySkipsRender) {
+    return content[0];
+  }
+
+  return render(content);
 }
 
 ExtensionSlot.displayName = `ExtensionSlot`;