piral-breadcrumbs 1.0.0-pre.2077 → 1.0.0

package/src/create.test.ts

@@ -1,8 +1,12 @@
-import { Atom, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createBreadcrumbsApi } from './create';
 
 function createMockContainer() {
-  const state = Atom.of({});
+  const state = create(() => ({
+    registry: {
+      extensions: {},
+    },
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -11,7 +15,7 @@ function createMockContainer() {
       defineActions() {},
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     } as any,
     api: {} as any,
@@ -34,55 +38,52 @@ const moduleMetadata = {
 describe('Create Breadcrumb API Extensions', () => {
   it('createBreadcrumbsApi can register and unregister a breadcrumb', () => {
     const container = createMockContainer();
-    container.context.registerBreadcrumb = jest.fn();
-    container.context.unregisterBreadcrumb = jest.fn();
+    container.context.registerBreadcrumbs = jest.fn();
+    container.context.unregisterBreadcrumbs = jest.fn();
     const api = createApi(container);
     api.registerBreadcrumb('my-bc', {
       title: 'My breadcrumb',
       path: '/example',
     });
-    expect(container.context.registerBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(0);
+    expect(container.context.registerBreadcrumbs).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(0);
     api.unregisterBreadcrumb('my-bc');
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb.mock.calls[0][0]).toBe(
-      container.context.registerBreadcrumb.mock.calls[0][0],
-    );
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(1);
+    const ids = Object.keys(container.context.registerBreadcrumbs.mock.calls[0][0]);
+    expect(container.context.unregisterBreadcrumbs.mock.calls[0][0]).toEqual(ids);
   });
 
   it('createBreadcrumbsApi can dispose a registered breadcrumb', () => {
     const container = createMockContainer();
-    container.context.registerBreadcrumb = jest.fn();
-    container.context.unregisterBreadcrumb = jest.fn();
+    container.context.registerBreadcrumbs = jest.fn();
+    container.context.unregisterBreadcrumbs = jest.fn();
     const api = createApi(container);
     const dispose = api.registerBreadcrumb('my-bc', {
       title: 'My breadcrumb',
       path: '/example',
     });
-    expect(container.context.registerBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(0);
+    expect(container.context.registerBreadcrumbs).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(0);
     dispose();
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb.mock.calls[0][0]).toBe(
-      container.context.registerBreadcrumb.mock.calls[0][0],
-    );
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(1);
+    const ids = Object.keys(container.context.registerBreadcrumbs.mock.calls[0][0]);
+    expect(container.context.unregisterBreadcrumbs.mock.calls[0][0]).toEqual(ids);
   });
 
   it('createBreadcrumbsApi can dispose a registered anonymous breadcrumb', () => {
     const container = createMockContainer();
-    container.context.registerBreadcrumb = jest.fn();
-    container.context.unregisterBreadcrumb = jest.fn();
+    container.context.registerBreadcrumbs = jest.fn();
+    container.context.unregisterBreadcrumbs = jest.fn();
     const api = createApi(container);
     const dispose = api.registerBreadcrumb({
       title: 'My breadcrumb',
       path: '/example',
     });
-    expect(container.context.registerBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(0);
+    expect(container.context.registerBreadcrumbs).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(0);
     dispose();
-    expect(container.context.unregisterBreadcrumb).toHaveBeenCalledTimes(1);
-    expect(container.context.unregisterBreadcrumb.mock.calls[0][0]).toBe(
-      container.context.registerBreadcrumb.mock.calls[0][0],
-    );
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(1);
+    const ids = Object.keys(container.context.registerBreadcrumbs.mock.calls[0][0]);
+    expect(container.context.unregisterBreadcrumbs.mock.calls[0][0]).toEqual(ids);
   });
 });

package/src/create.ts

@@ -1,9 +1,13 @@
-import * as ptr from 'path-to-regexp';
 import * as actions from './actions';
-import { buildName, PiralPlugin, Dict } from 'piral-core';
+import { buildName, PiralPlugin, Dict, withRootExtension, withAll, GlobalState } from 'piral-core';
 import { DefaultBreadbrumbItem, DefaultBreadcrumbsContainer } from './default';
+import { Breadcrumbs } from './Breadcrumbs';
 import { PiletBreadcrumbsApi, BreadcrumbSettings, BreadcrumbRegistration } from './types';
 
+// Unfortunately `require`d:
+// * exports are otherwise potentially converted by, e.g., Parcel (see #385)
+const ptr = require('path-to-regexp');
+
 /**
  * Available configuration options for the breadcrumbs plugin.
  */
@@ -15,7 +19,7 @@ export interface DashboardConfig {
   breadcrumbs?: Array<BreadcrumbSettings>;
 }
 
-function getMatcher(settings: BreadcrumbSettings) {
+function getMatcher(settings: BreadcrumbSettings): RegExp {
   if (settings.matcher instanceof RegExp) {
     return settings.matcher;
   } else if (typeof settings.matcher === 'string') {
@@ -40,6 +44,21 @@ function getBreadcrumbs(items: Array<BreadcrumbSettings>) {
   return breadcrumbs;
 }
 
+function withBreadcrumbs(breadcrumbs: Dict<BreadcrumbRegistration>) {
+  return (state: GlobalState): GlobalState => ({
+    ...state,
+    components: {
+      BreadcrumbItem: DefaultBreadbrumbItem,
+      BreadcrumbsContainer: DefaultBreadcrumbsContainer,
+      ...state.components,
+    },
+    registry: {
+      ...state.registry,
+      breadcrumbs,
+    },
+  });
+}
+
 /**
  * Creates the Pilet API extension for activating breadcrumbs support.
  */
@@ -49,24 +68,27 @@ export function createBreadcrumbsApi(config: DashboardConfig = {}): PiralPlugin<
   return (context) => {
     context.defineActions(actions);
 
-    context.dispatch((state) => ({
-      ...state,
-      components: {
-        BreadcrumbItem: DefaultBreadbrumbItem,
-        BreadcrumbsContainer: DefaultBreadcrumbsContainer,
-        ...state.components,
-      },
-      registry: {
-        ...state.registry,
-        breadcrumbs: getBreadcrumbs(breadcrumbs),
-      },
-    }));
+    context.dispatch(
+      withAll(withBreadcrumbs(getBreadcrumbs(breadcrumbs)), withRootExtension('piral-breadcrumbs', Breadcrumbs)),
+    );
 
-    return (api, target) => {
+    return (_, target) => {
       const pilet = target.name;
       let next = 0;
 
       return {
+        registerBreadcrumbs(values) {
+          const bc = {};
+
+          for (const value of values) {
+            const { name = next++, ...settings } = value;
+            const id = buildName(pilet, name);
+            bc[id] = settings;
+          }
+
+          context.registerBreadcrumbs(bc);
+          return () => context.unregisterBreadcrumbs(Object.keys(bc));
+        },
         registerBreadcrumb(name, settings?) {
           if (typeof name !== 'string') {
             settings = name;
@@ -74,16 +96,18 @@ export function createBreadcrumbsApi(config: DashboardConfig = {}): PiralPlugin<
           }
 
           const id = buildName(pilet, name);
-          context.registerBreadcrumb(id, {
-            pilet,
-            matcher: getMatcher(settings),
-            settings,
+          context.registerBreadcrumbs({
+            [id]: {
+              pilet,
+              matcher: getMatcher(settings),
+              settings,
+            },
           });
-          return () => api.unregisterBreadcrumb(name);
+          return () => context.unregisterBreadcrumbs([id]);
         },
         unregisterBreadcrumb(name) {
           const id = buildName(pilet, name);
-          context.unregisterBreadcrumb(id);
+          context.unregisterBreadcrumbs([id]);
         },
       };
     };

package/src/default.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { DefaultBreadcrumbsContainer } from './default';
 
 jest.mock('piral-core', () => ({
@@ -35,10 +35,10 @@ const state = {
 
 (React as any).useMemo = (cb) => cb();
 
-const StubBreadcrumbsContainer: React.FC = () => <div />;
+const StubBreadcrumbsContainer: React.FC = () => <ul />;
 StubBreadcrumbsContainer.displayName = 'StubBreadcrumbsContainer';
 
-const StubBreadcrumbItem: React.FC = () => <div />;
+const StubBreadcrumbItem: React.FC = () => <li />;
 StubBreadcrumbItem.displayName = 'BreadcrumbItem';
 
 describe('Default Breadcrumbs Component', () => {
@@ -47,13 +47,13 @@ describe('Default Breadcrumbs Component', () => {
       component: StubBreadcrumbItem,
       preferences: {},
     };
-    const node = mount(
+    const node = render(
       <DefaultBreadcrumbsContainer>
         <StubBreadcrumbItem />
       </DefaultBreadcrumbsContainer>,
     );
-    expect(node.find(StubBreadcrumbsContainer).length).toBe(0);
-    expect(node.find(StubBreadcrumbItem).length).toBe(1);
+    expect(node.queryByRole('list')).toBe(null);
+    expect(node.getAllByRole('listitem').length).toBe(1);
   });
 
   it('renders the provided extension in the default case', () => {
@@ -62,12 +62,12 @@ describe('Default Breadcrumbs Component', () => {
         component: StubBreadcrumbsContainer,
       },
     ];
-    const node = mount(
+    const node = render(
       <DefaultBreadcrumbsContainer>
         <StubBreadcrumbItem />
       </DefaultBreadcrumbsContainer>,
     );
-    expect(node.find(StubBreadcrumbItem).length).toBe(0);
-    expect(node.find(StubBreadcrumbsContainer).length).toBe(1);
+    expect(node.queryByRole('listitem')).toBe(null);
+    expect(node.getAllByRole('list').length).toBe(1);
   });
 });

package/src/types.ts

@@ -1,5 +1,5 @@
-import { ComponentType, ReactChild } from 'react';
-import { Dict, BaseRegistration, RegistrationDisposer } from 'piral-core';
+import type { ComponentType, ReactNode } from 'react';
+import type { Dict, BaseRegistration, RegistrationDisposer } from 'piral-core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletBreadcrumbsApi {}
@@ -9,15 +9,14 @@ declare module 'piral-core/lib/types/custom' {
   interface PiralCustomActions {
     /**
      * Registers a new breadcrumb.
-     * @param name The name of the breadcrumb.
-     * @param value The breadcrumb registration.
+     * @param values The breadcrumbs to register.
      */
-    registerBreadcrumb(name: string, value: BreadcrumbRegistration): void;
+    registerBreadcrumbs(values: Dict<BreadcrumbRegistration>): void;
     /**
      * Unregisters an existing breadcrumb.
      * @param name The name of the breadcrumb to be removed.
      */
-    unregisterBreadcrumb(name: string): void;
+    unregisterBreadcrumbs(names: Array<string>): void;
   }
 
   interface PiralCustomRegistryState {
@@ -39,13 +38,22 @@ declare module 'piral-core/lib/types/custom' {
   }
 }
 
-export interface BreadcrumbsContainerProps {}
+export interface BreadcrumbsContainerProps {
+  /**
+   * The breadcrumbs to display.
+   */
+  children?: ReactNode;
+}
 
 export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
   /**
    * Determins if the breadcrumb is the current page.
    */
   current: boolean;
+  /**
+   * The title of the breadcrumb to display.
+   */
+  children?: ReactNode;
 }
 
 export interface PiralCustomBreadcrumbSettings {}
@@ -75,7 +83,7 @@ export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
   /**
    * The title of the breadcrumb.
    */
-  title: ReactChild;
+  title: ReactNode;
 }
 
 export interface BreadcrumbRegistration extends BaseRegistration {
@@ -84,6 +92,11 @@ export interface BreadcrumbRegistration extends BaseRegistration {
 }
 
 export interface PiletBreadcrumbsApi {
+  /**
+   * Registers a set of breadcrumbs.
+   * @param values The different breadcrumb settings.
+   */
+  registerBreadcrumbs(values: Array<{ name?: string; } & BreadcrumbSettings>): RegistrationDisposer;
   /**
    * Registers a breadcrumb with the provided settings.
    * @param settings The settings for configuring the breadcrumb.