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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { DefaultErrorInfo } from './DefaultErrorInfo';
 
 jest.mock('../hooks/globalState', () => ({
@@ -9,47 +9,44 @@ jest.mock('../hooks/globalState', () => ({
 }));
 
 const state = {
+  components: {},
   registry: {
     extensions: {},
   },
   errorComponents: {},
 };
 
-const StubErrorInfo: React.FC = (props) => <div />;
+const StubErrorInfo: React.FC = (props) => <div role="stub" />;
 StubErrorInfo.displayName = 'StubErrorInfo';
 
 describe('Default Error Info Component', () => {
   it('renders the switch-case in the loading error case', () => {
-    const node = mount(<DefaultErrorInfo type="loading" error="foo" />);
-    expect(node.find(StubErrorInfo).length).toBe(0);
-    expect(node.findWhere((n) => n.key() === 'default_error').length).toBe(1);
+    const node = render(<DefaultErrorInfo type="loading" error="foo" />);
+    expect(node.queryAllByRole("stub").length).toBe(0);
+    expect(node.queryAllByText("Error: loading").length).toBe(1);
   });
 
   it('renders the switch-case in the not_found error case', () => {
-    const node = mount(
+    const node = render(
       <DefaultErrorInfo
         type="not_found"
-        history={undefined}
-        match={undefined}
         location={{ pathname: 'foo', hash: '', key: '', search: '', state: '' }}
       />,
     );
-    expect(node.find(StubErrorInfo).length).toBe(0);
-    expect(node.findWhere((n) => n.key() === 'default_error').length).toBe(1);
+    expect(node.queryAllByRole("stub").length).toBe(0);
+    expect(node.queryAllByText("Error: not_found").length).toBe(1);
   });
 
   it('renders the switch-case in the page error case', () => {
-    const node = mount(
+    const node = render(
       <DefaultErrorInfo
         error={undefined}
         type="page"
-        history={undefined}
-        match={undefined}
         location={{ pathname: 'bar', hash: '', key: '', search: '', state: '' }}
       />,
     );
-    expect(node.find(StubErrorInfo).length).toBe(0);
-    expect(node.findWhere((n) => n.key() === 'default_error').length).toBe(1);
+    expect(node.queryAllByRole("stub").length).toBe(0);
+    expect(node.queryAllByText("Error: page").length).toBe(1);
   });
 
   it('renders the react fragment in the default case', () => {
@@ -58,8 +55,8 @@ describe('Default Error Info Component', () => {
         component: StubErrorInfo,
       },
     ];
-    const node = mount(<DefaultErrorInfo type="extension" error="foo" />);
-    expect(node.find(StubErrorInfo).length).toBe(1);
-    expect(node.findWhere((n) => n.key() === 'default_error').length).toBe(0);
+    const node = render(<DefaultErrorInfo type="extension" error="foo" />);
+    expect(node.queryAllByRole("stub").length).toBe(1);
+    expect(node.queryAllByText("Error: extension").length).toBe(0);
   });
 });

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';
 
 /**
@@ -9,6 +8,6 @@ import { ErrorInfoProps } from '../types';
  * the "error" name.
  */
 export const DefaultErrorInfo: React.FC<ErrorInfoProps> = (props) => (
-  <ExtensionSlot name="error" params={props} empty={() => <SwitchErrorInfo key="default_error" {...props} />} />
+  <ExtensionSlot name="error" params={props} empty={() => <SwitchErrorInfo {...props} />} />
 );
 DefaultErrorInfo.displayName = 'DefaultErrorInfo';

package/src/defaults/DefaultLayout.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultLayout } from './DefaultLayout';
+
+describe('Default Layout Component', () => {
+  it('renders correctly for desktop', () => {
+    const children = <div></div>;
+    const node = render(<DefaultLayout currentLayout="desktop" children={children} />);
+    expect(node.container.querySelectorAll('div').length).toBe(1);
+  });
+
+  it('renders correctly for mobile', () => {
+    const children = <div></div>;
+    const node = render(<DefaultLayout currentLayout="mobile" children={children} />);
+    expect(node.container.querySelectorAll('div').length).toBe(1);
+  });
+
+  it('renders correctly for tablet', () => {
+    const children = <div></div>;
+    const node = render(<DefaultLayout currentLayout="tablet" children={children} />);
+    expect(node.container.querySelectorAll('div').length).toBe(1);
+  });
+});

package/src/defaults/DefaultLoadingIndicator.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultLoadingIndicator } from './DefaultLoadingIndicator';
+
+describe('Default Loading Indicator Component', () => {
+  it('renders correctly', () => {
+    const node = render(<DefaultLoadingIndicator />);
+    expect(node.container.querySelectorAll('div').length).toBe(1);
+  });
+});

package/src/defaults/DefaultRouteSwitch_v5.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Switch, Route } from 'react-router';
+import { RouteSwitchProps } from '../types';
+
+export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound, ...props }) => {
+  return (
+    <Switch {...props}>
+      {paths.map(({ path, Component }) => (
+        <Route exact key={path} path={path} component={Component} />
+      ))}
+      <Route component={NotFound} />
+    </Switch>
+  );
+};
+DefaultRouteSwitch.displayName = 'DefaultRouteSwitch';

package/src/defaults/DefaultRouteSwitch_v6.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+//@ts-ignore
+import { Routes, Route } from 'react-router-dom';
+import { RouteSwitchProps } from '../types';
+
+export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound, ...props }) => {
+  return (
+    <Routes {...props}>
+      {paths.map(({ path, Component }) => (
+        //@ts-ignore
+        <Route key={path} path={path} element={<Component />} />
+      ))}
+      {
+        //@ts-ignore
+        <Route element={<NotFound />} />
+      }
+    </Routes>
+  );
+};
+DefaultRouteSwitch.displayName = 'DefaultRouteSwitch';

package/src/defaults/DefaultRouter_v5.tsx

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

package/src/defaults/DefaultRouter_v6.tsx

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

package/src/defaults/navigator_none.tsx

@@ -0,0 +1,35 @@
+import { NavigationApi } from '../types';
+
+const _noop = () => {};
+
+export function useRouterContext() {
+  return undefined;
+}
+
+export function useCurrentNavigation() {}
+
+export function createRedirect() {
+  return () => null;
+}
+
+export function createNavigation(): NavigationApi {
+  return {
+    get path() {
+      return location.pathname;
+    },
+    get url() {
+      const loc = location;
+      return `${loc.pathname}${loc.search}${loc.hash}`;
+    },
+    push(target, state) {},
+    replace(target, state) {},
+    go(n) {},
+    block(blocker) {
+      return _noop;
+    },
+    listen(listener) {
+      return _noop;
+    },
+    router: undefined,
+  };
+}

package/src/defaults/navigator_v5.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import type { History, Location, Action } from 'history';
+import { __RouterContext as RouterContext, Redirect, useLocation } from 'react-router';
+import { NavigationApi } from '../types';
+
+let _nav: History;
+const _noop = () => {};
+
+export function useRouterContext() {
+  return React.useContext(RouterContext);
+}
+
+export function useCurrentNavigation() {
+  const ctx = useRouterContext();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (_nav) {
+      window.dispatchEvent(
+        new CustomEvent('piral-navigate', {
+          detail: {
+            location,
+          },
+        }),
+      );
+    }
+  }, [location]);
+
+  React.useEffect(() => {
+    _nav = ctx.history;
+
+    return () => {
+      _nav = undefined;
+    };
+  }, []);
+}
+
+export function createRedirect(to: string) {
+  return () => <Redirect to={to} />;
+}
+
+export function createNavigation(): NavigationApi {
+  const enhance = (location: Location, action: Action) => ({
+    action,
+    location: {
+      get href() {
+        return _nav.createHref(location);
+      },
+      ...location,
+    },
+  });
+
+  return {
+    get path() {
+      const loc = _nav ? _nav.location : location;
+      return loc.pathname;
+    },
+    get url() {
+      const loc = _nav ? _nav.location : location;
+      return `${loc.pathname}${loc.search}${loc.hash}`;
+    },
+    push(target, state) {
+      if (_nav) {
+        _nav.push(target, state);
+      }
+    },
+    replace(target, state) {
+      if (_nav) {
+        _nav.replace(target, state);
+      }
+    },
+    go(n) {
+      if (_nav) {
+        _nav.go(n);
+      }
+    },
+    block(blocker) {
+      if (!_nav) {
+        return _noop;
+      }
+
+      return _nav.block((location, action) => blocker(enhance(location, action)));
+    },
+    listen(listener) {
+      const handler = (e: CustomEvent) => listener(enhance(e.detail.location, _nav.action));
+
+      window.addEventListener('piral-navigate', handler);
+
+      return () => {
+        window.removeEventListener('piral-navigate', handler);
+      };
+    },
+    router: {
+      get history() {
+        return _nav;
+      },
+    },
+  };
+}

package/src/defaults/navigator_v6.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+//@ts-ignore
+import { UNSAFE_NavigationContext as RouterContext, Navigate, useLocation } from 'react-router';
+import { NavigationApi } from '../types';
+
+let _nav: any;
+const _noop = () => {};
+
+export function useRouterContext() {
+  return React.useContext(RouterContext);
+}
+
+export function useCurrentNavigation() {
+  const ctx: any = useRouterContext();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (_nav) {
+      window.dispatchEvent(
+        new CustomEvent('piral-navigate', {
+          detail: {
+            location,
+          },
+        }),
+      );
+    }
+  }, [location]);
+
+  React.useEffect(() => {
+    _nav = ctx.navigator;
+
+    return () => {
+      _nav = undefined;
+    };
+  }, []);
+}
+
+export function createRedirect(to: string) {
+  return () => <Navigate to={to} />;
+}
+
+export function createNavigation(): NavigationApi {
+  const enhance = (info) => ({
+    ...info,
+    location: {
+      get href() {
+        return _nav.createHref(info.location);
+      },
+      ...info.location,
+    },
+  });
+
+  return {
+    get path() {
+      const loc = _nav ? _nav.location : location;
+      return loc.pathname;
+    },
+    get url() {
+      const loc = _nav ? _nav.location : location;
+      return `${loc.pathname}${loc.search}${loc.hash}`;
+    },
+    push(target, state) {
+      if (_nav) {
+        _nav.push(target, state);
+      }
+    },
+    replace(target, state) {
+      if (_nav) {
+        _nav.replace(target, state);
+      }
+    },
+    go(n) {
+      if (_nav) {
+        _nav.go(n);
+      }
+    },
+    block(blocker) {
+      if (!_nav) {
+        return _noop;
+      }
+      return _nav.block((transition) => blocker(enhance(transition)));
+    },
+    listen(listener) {
+      const handler = (e: CustomEvent) => listener(enhance(e.detail));
+
+      window.addEventListener('piral-navigate', handler);
+
+      return () => {
+        window.removeEventListener('piral-navigate', handler);
+      };
+    },
+    get router() {
+      return _nav;
+    },
+  };
+}

package/src/helpers.test.tsx

@@ -1,7 +1,7 @@
-import { createPiletOptions, PiletOptionsConfig, extendSharedDependencies, setSharedDependencies } from './helpers';
+import create from 'zustand';
+import { createPiletOptions, PiletOptionsConfig } from './helpers';
 import { globalDependencies } from './modules';
-import { PiletMetadata, Pilet, AvailableDependencies } from 'piral-base';
-import { Atom, swap } from '@dbeining/react-atom';
+import { PiletMetadata } from 'piral-base';
 
 function createMockApi(meta: PiletMetadata) {
   return {
@@ -13,58 +13,43 @@ function createMockApi(meta: PiletMetadata) {
 }
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
+    registry: {
+      pages: {},
+      extensions: {},
+      wrappers: {},
+    },
+    routes: {},
     components: {},
-  });
+    modules: [],
+  }));
   return {
     context: {
       on: jest.fn(),
       off: jest.fn(),
       emit: jest.fn(),
       state,
+      dispatch(cb) {
+        state.setState(cb(state.getState()));
+      },
+      readState(cb) {
+        return cb(state.getState());
+      },
       setComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           components: {
             ...s.components,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
 }
 
 describe('Piral-Core helpers module', () => {
-  it('setSharedDependencies set the shared dependecies', () => {
-    // Arrange
-    const dependencies: AvailableDependencies = {
-      gg: {},
-      ff: {},
-    };
-
-    // Act
-    const dependencyGetter = setSharedDependencies(dependencies);
-    const result = dependencyGetter();
-
-    // Assert
-    expect(result).not.toBeUndefined();
-  });
-
-  it('extendSharedDependencies should extend the dependecies', () => {
-    // Arrange
-    const additionalDependencies: AvailableDependencies = {
-      gg: {},
-      ff: {},
-    };
-
-    // Act
-    const extendedDependecies = extendSharedDependencies(additionalDependencies);
-
-    // Assert
-    expect(extendedDependecies).not.toBeUndefined();
-  });
-
   it('createPiletOptions creates the options using the provided pilets', () => {
     const wasUndefined = process.env.DEBUG_PIRAL === undefined;
 
@@ -73,7 +58,7 @@ describe('Piral-Core helpers module', () => {
     // Arrange
     const setupMock = jest.fn();
     const globalContext = createMockContainer().context;
-    const providedPilets: Array<Pilet> = [
+    const providedPilets: Array<any> = [
       {
         setup: setupMock,
         hash: '12g',
@@ -90,9 +75,8 @@ describe('Piral-Core helpers module', () => {
     const optionsConfig: PiletOptionsConfig = {
       createApi: createMockApi,
       availablePilets: providedPilets,
+      shareDependencies: jest.fn((deps) => deps),
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
       loadPilet: jest.fn(),
       requestPilets: jest.fn(() => Promise.resolve(providedPilets)),
       strategy: jest.fn(),
@@ -102,7 +86,7 @@ describe('Piral-Core helpers module', () => {
     const options = createPiletOptions(optionsConfig);
 
     // Assert
-    expect(options.pilets.length).toEqual(providedPilets.length);
+    expect(options.pilets?.length).toEqual(providedPilets.length);
 
     if (wasUndefined) {
       process.env.DEBUG_PIRAL = undefined;
@@ -113,7 +97,7 @@ describe('Piral-Core helpers module', () => {
     // Arrange
     const setupMock = jest.fn();
     const globalContext = createMockContainer().context;
-    const providedPilets: Array<Pilet> = [
+    const providedPilets: Array<any> = [
       {
         setup: setupMock,
         hash: '12g',
@@ -131,8 +115,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: () => globalDependencies,
+      shareDependencies: jest.fn((deps) => deps),
       loadPilet: jest.fn(),
       requestPilets: jest.fn(() => Promise.resolve(providedPilets)),
       strategy: jest.fn(),
@@ -153,7 +136,7 @@ describe('Piral-Core helpers module', () => {
     const setupMock = jest.fn();
     const requestPilets = jest.fn(() => Promise.resolve(providedPilets));
     const globalContext = createMockContainer().context;
-    const providedPilets: Array<Pilet> = [
+    const providedPilets: Array<any> = [
       {
         setup: setupMock,
         hash: '12g',
@@ -171,8 +154,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
+      shareDependencies: jest.fn((deps) => deps),
       loadPilet: jest.fn(),
       requestPilets: requestPilets,
       strategy: jest.fn(),
@@ -208,7 +190,7 @@ describe('Piral-Core helpers module', () => {
     ) as any;
     const requestPilets = jest.fn(() => Promise.resolve(providedPilets));
     const globalContext = createMockContainer().context;
-    const providedPilets: Array<Pilet> = [
+    const providedPilets: Array<any> = [
       {
         setup: setupMock,
         hash: '12g',
@@ -226,8 +208,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
+      shareDependencies: jest.fn((deps) => deps),
       loadPilet: jest.fn(),
       requestPilets: requestPilets,
       strategy: jest.fn(),