piral-core 0.14.8-beta.3500 → 0.14.8-beta.3511

package/src/components/SetRedirect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Redirect } from 'react-router';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 
 /**
  * The props for the SetRedirect component.
@@ -20,7 +20,7 @@ export interface SetRedirectProps {
  * The component capable of setting a global redirect route at mounting.
  */
 export function SetRedirect({ from, to }: SetRedirectProps): React.ReactElement {
-  const setRoute = useAction('setRoute');
+  const { setRoute } = useGlobalStateContext();
   useSetter(() => setRoute(from, () => <Redirect to={to} />));
   // tslint:disable-next-line:no-null-keyword
   return null;

package/src/components/SetRoute.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 
 /**
  * The props for the SetRoute component.
@@ -20,7 +20,7 @@ export interface SetRouteProps<T = {}> {
  * The component capable of setting a global route at mounting.
  */
 export function SetRoute<T = {}>({ path, component }: SetRouteProps<T>): React.ReactElement {
-  const setRoute = useAction('setRoute');
+  const { setRoute } = useGlobalStateContext();
   useSetter(() => component && setRoute(path, component));
   // tslint:disable-next-line:no-null-keyword
   return null;

package/src/createInstance.tsx

@@ -3,7 +3,8 @@ import { blazingStrategy, standardStrategy, createListener, isfunc } from 'piral
 import { defaultApiFactory, defaultDependencySelector, defaultModuleRequester } from './modules';
 import { createGlobalState, createActions, includeActions } from './state';
 import { createPiletOptions } from './helpers';
-import type { PiralConfiguration, PiralInstance } from './types';
+import { generateId } from './utils';
+import type { PiralInstanceOptions, PiralInstance } from './types';
 
 /**
  * Creates a new PiralInstance component, which can be used for
@@ -25,8 +26,9 @@ const app = (
 render(app, document.querySelector('#app'));
 ```
  */
-export function createInstance(config: PiralConfiguration = {}): PiralInstance {
+export function createInstance(config: PiralInstanceOptions = {}): PiralInstance {
   const {
+    id = generateId(),
     state,
     actions,
     availablePilets = [],
@@ -71,6 +73,7 @@ export function createInstance(config: PiralConfiguration = {}): PiralInstance {
   context.options = options;
 
   return __assign(events, {
+    id,
     createApi,
     context,
     root,

package/src/modules/api.test.ts

@@ -1,5 +1,5 @@
 import { createElement, FC } from 'react';
-import { createCoreApi } from './api';
+import { defaultApiFactory } from './api';
 
 jest.mock('../hooks');
 
@@ -21,21 +21,21 @@ function createMockContainer() {
       off: jest.fn(),
       emit: jest.fn(),
       converters: {},
+      apis: {},
       readState() {
         return undefined;
       },
     } as any,
-    api: {} as any,
   };
 }
 
-function createApi(container) {
-  Object.assign(container.api, createCoreApi(container.context)(container.api, moduleMetadata));
-  return container.api;
+function createApi(container, apis = []) {
+  const api = defaultApiFactory(container.context, apis);
+  return api(moduleMetadata);
 }
 
 describe('API Module', () => {
-  it('createCoreApi can register and unregister a page', () => {
+  it('defaultApiFactory can register and unregister a page', () => {
     const container = createMockContainer();
     container.context.registerPage = jest.fn();
     container.context.unregisterPage = jest.fn();
@@ -48,7 +48,7 @@ describe('API Module', () => {
     expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
   });
 
-  it('createCoreApi can dispose a registered page', () => {
+  it('defaultApiFactory can dispose a registered page', () => {
     const container = createMockContainer();
     container.context.registerPage = jest.fn();
     container.context.unregisterPage = jest.fn();
@@ -61,7 +61,7 @@ describe('API Module', () => {
     expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
   });
 
-  it('createCoreApi can register and unregister an extension', () => {
+  it('defaultApiFactory can register and unregister an extension', () => {
     const container = createMockContainer();
     container.context.registerExtension = jest.fn();
     container.context.unregisterExtension = jest.fn();
@@ -76,7 +76,7 @@ describe('API Module', () => {
     );
   });
 
-  it('createCoreApi can dispose an registered extension', () => {
+  it('defaultApiFactory can dispose an registered extension', () => {
     const container = createMockContainer();
     container.context.registerExtension = jest.fn();
     container.context.unregisterExtension = jest.fn();
@@ -91,7 +91,7 @@ describe('API Module', () => {
     );
   });
 
-  it('createCoreApi read data by its name', () => {
+  it('defaultApiFactory read data by its name', () => {
     const container = createMockContainer();
     container.context.readDataValue = jest.fn((name) => name);
     const api = createApi(container);
@@ -100,7 +100,7 @@ describe('API Module', () => {
     expect(container.context.readDataValue).toHaveBeenCalled();
   });
 
-  it('createCoreApi write data without options shall pass, but memory should not emit events', () => {
+  it('defaultApiFactory write data without options shall pass, but memory should not emit events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -109,7 +109,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data with empty options shall pass, but memory should not emit events', () => {
+  it('defaultApiFactory write data with empty options shall pass, but memory should not emit events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -118,7 +118,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the simple option should not pass, never emitting events', () => {
+  it('defaultApiFactory write data by the simple option should not pass, never emitting events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => false);
     const api = createApi(container);
@@ -127,7 +127,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the simple option shall pass with remote', () => {
+  it('defaultApiFactory write data by the simple option shall pass with remote', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -135,7 +135,7 @@ describe('API Module', () => {
     expect(container.context.tryWriteDataItem).toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the object options shall pass with remote', () => {
+  it('defaultApiFactory write data by the object options shall pass with remote', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);

package/src/modules/api.ts

@@ -1,129 +1,7 @@
-import { isfunc, PiletApiCreator, PiletApiExtender, initializeApi, mergeApis } from 'piral-base';
+import { isfunc, PiletApiCreator, initializeApi, mergeApis } from 'piral-base';
 import { __assign } from 'tslib';
-import { withApi } from '../state';
-import { ExtensionSlot } from '../components';
-import { createDataOptions, getDataExpiration, renderInDom, tryParseJson, changeDomPortal, noop } from '../utils';
-import { Disposable, GlobalStateContext, PiletCoreApi, PiralPlugin } from '../types';
-
-interface Updatable {
-  (newProps: any): void;
-}
-
-if (typeof window !== 'undefined' && 'customElements' in window) {
-  class PiralExtension extends HTMLElement {
-    dispose: Disposable = noop;
-    update: Updatable = noop;
-
-    getProps() {
-      const name = this.getAttribute('name');
-      const params = tryParseJson(this.getAttribute('params'));
-      return { name, params };
-    }
-
-    connectedCallback() {
-      if (this.isConnected) {
-        this.dispatchEvent(
-          new CustomEvent('render-html', {
-            bubbles: true,
-            detail: {
-              target: this,
-              props: this.getProps(),
-            },
-          }),
-        );
-      }
-    }
-
-    disconnectedCallback() {
-      this.dispose();
-      this.dispose = noop;
-      this.update = noop;
-    }
-
-    attributeChangedCallback() {
-      this.update(this.getProps());
-    }
-
-    static get observedAttributes() {
-      return ['name', 'params'];
-    }
-  }
-
-  customElements.define('piral-extension', PiralExtension);
-}
-
-function render(context: GlobalStateContext, element: HTMLElement | ShadowRoot, props: any): [Disposable, Updatable] {
-  let [id, portal] = renderInDom(context, element, ExtensionSlot, props);
-  const evName = 'extension-props-changed';
-  const handler = (ev: CustomEvent) => update(ev.detail);
-  const dispose: Disposable = () => {
-    context.hidePortal(id, portal);
-    element.removeEventListener(evName, handler);
-  };
-  const update: Updatable = (newProps) => {
-    [id, portal] = changeDomPortal(id, portal, context, element, ExtensionSlot, newProps);
-  };
-  element.addEventListener(evName, handler);
-  return [dispose, update];
-}
-
-export function createCoreApi(context: GlobalStateContext): PiletApiExtender<PiletCoreApi> {
-  if (typeof document !== 'undefined') {
-    document.body.addEventListener(
-      'render-html',
-      (ev: CustomEvent) => {
-        ev.stopPropagation();
-        const container = ev.detail.target;
-        const [dispose, update] = render(context, container, ev.detail.props);
-        container.dispose = dispose;
-        container.update = update;
-      },
-      false,
-    );
-  }
-
-  return (api, target) => {
-    const pilet = target.name;
-    return {
-      getData(name) {
-        return context.readDataValue(name);
-      },
-      setData(name, value, options) {
-        const { target = 'memory', expires } = createDataOptions(options);
-        const expiration = getDataExpiration(expires);
-        return context.tryWriteDataItem(name, value, pilet, target, expiration);
-      },
-      registerPage(route, arg, meta) {
-        context.registerPage(route, {
-          pilet,
-          meta,
-          component: withApi(context, arg, api, 'page'),
-        });
-        return () => api.unregisterPage(route);
-      },
-      unregisterPage(route) {
-        context.unregisterPage(route);
-      },
-      registerExtension(name, arg, defaults) {
-        context.registerExtension(name as string, {
-          pilet,
-          component: withApi(context, arg, api, 'extension'),
-          reference: arg,
-          defaults,
-        });
-        return () => api.unregisterExtension(name, arg);
-      },
-      unregisterExtension(name, arg) {
-        context.unregisterExtension(name as string, arg);
-      },
-      renderHtmlExtension(element, props) {
-        const [dispose] = render(context, element, props);
-        return dispose;
-      },
-      Extension: ExtensionSlot,
-    };
-  };
-}
+import { createCoreApi } from './core';
+import { GlobalStateContext, PiralPlugin } from '../types';
 
 export function createExtenders(context: GlobalStateContext, apis: Array<PiralPlugin>) {
   const creators: Array<PiralPlugin> = [createCoreApi, ...apis.filter(isfunc)];

package/src/modules/core.test.ts

@@ -0,0 +1,148 @@
+import { createElement, FC } from 'react';
+import { createCoreApi } from './core';
+
+jest.mock('../hooks');
+
+const StubComponent: FC = (props) => createElement('div', props);
+StubComponent.displayName = 'StubComponent';
+
+const moduleMetadata = {
+  name: 'my-module',
+  version: '1.0.0',
+  link: undefined,
+  custom: undefined,
+  hash: '123',
+};
+
+function createMockContainer() {
+  return {
+    context: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+      converters: {},
+      readState() {
+        return undefined;
+      },
+    } as any,
+    api: {} as any,
+  };
+}
+
+function createApi(container) {
+  Object.assign(container.api, createCoreApi(container.context)(container.api, moduleMetadata));
+  return container.api;
+}
+
+describe('Core API Module', () => {
+  it('createCoreApi can register and unregister a page', () => {
+    const container = createMockContainer();
+    container.context.registerPage = jest.fn();
+    container.context.unregisterPage = jest.fn();
+    const api = createApi(container);
+    api.registerPage('/route', StubComponent);
+    expect(container.context.registerPage).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterPage).toHaveBeenCalledTimes(0);
+    api.unregisterPage('/route');
+    expect(container.context.unregisterPage).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
+  });
+
+  it('createCoreApi can dispose a registered page', () => {
+    const container = createMockContainer();
+    container.context.registerPage = jest.fn();
+    container.context.unregisterPage = jest.fn();
+    const api = createApi(container);
+    const dispose = api.registerPage('/route', StubComponent);
+    expect(container.context.registerPage).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterPage).toHaveBeenCalledTimes(0);
+    dispose();
+    expect(container.context.unregisterPage).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
+  });
+
+  it('createCoreApi can register and unregister an extension', () => {
+    const container = createMockContainer();
+    container.context.registerExtension = jest.fn();
+    container.context.unregisterExtension = jest.fn();
+    const api = createApi(container);
+    api.registerExtension('ext', StubComponent);
+    expect(container.context.registerExtension).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterExtension).toHaveBeenCalledTimes(0);
+    api.unregisterExtension('ext', StubComponent);
+    expect(container.context.unregisterExtension).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterExtension.mock.calls[0][0]).toBe(
+      container.context.registerExtension.mock.calls[0][0],
+    );
+  });
+
+  it('createCoreApi can dispose an registered extension', () => {
+    const container = createMockContainer();
+    container.context.registerExtension = jest.fn();
+    container.context.unregisterExtension = jest.fn();
+    const api = createApi(container);
+    const dispose = api.registerExtension('ext', StubComponent);
+    expect(container.context.registerExtension).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterExtension).toHaveBeenCalledTimes(0);
+    dispose();
+    expect(container.context.unregisterExtension).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterExtension.mock.calls[0][0]).toBe(
+      container.context.registerExtension.mock.calls[0][0],
+    );
+  });
+
+  it('createCoreApi read data by its name', () => {
+    const container = createMockContainer();
+    container.context.readDataValue = jest.fn((name) => name);
+    const api = createApi(container);
+    const result = api.getData('foo');
+    expect(result).toBe('foo');
+    expect(container.context.readDataValue).toHaveBeenCalled();
+  });
+
+  it('createCoreApi write data without options shall pass, but memory should not emit events', () => {
+    const container = createMockContainer();
+    container.context.tryWriteDataItem = jest.fn(() => true);
+    const api = createApi(container);
+    api.setData('foo', 5);
+    expect(container.context.tryWriteDataItem).toHaveBeenCalled();
+    expect(container.context.emit).not.toHaveBeenCalled();
+  });
+
+  it('createCoreApi write data with empty options shall pass, but memory should not emit events', () => {
+    const container = createMockContainer();
+    container.context.tryWriteDataItem = jest.fn(() => true);
+    const api = createApi(container);
+    api.setData('foo', 5, {});
+    expect(container.context.tryWriteDataItem).toHaveBeenCalled();
+    expect(container.context.emit).not.toHaveBeenCalled();
+  });
+
+  it('createCoreApi write data by the simple option should not pass, never emitting events', () => {
+    const container = createMockContainer();
+    container.context.tryWriteDataItem = jest.fn(() => false);
+    const api = createApi(container);
+    api.setData('foo', 5, 'remote');
+    expect(container.context.tryWriteDataItem).toHaveBeenCalled();
+    expect(container.context.emit).not.toHaveBeenCalled();
+  });
+
+  it('createCoreApi write data by the simple option shall pass with remote', () => {
+    const container = createMockContainer();
+    container.context.tryWriteDataItem = jest.fn(() => true);
+    const api = createApi(container);
+    api.setData('foo', 5, 'remote');
+    expect(container.context.tryWriteDataItem).toHaveBeenCalled();
+  });
+
+  it('createCoreApi write data by the object options shall pass with remote', () => {
+    const container = createMockContainer();
+    container.context.tryWriteDataItem = jest.fn(() => true);
+    const api = createApi(container);
+    api.setData('foo', 15, {
+      expires: 10,
+      target: 'local',
+    });
+    expect(container.context.tryWriteDataItem).toHaveBeenCalled();
+  });
+});

package/src/modules/core.ts

@@ -0,0 +1,50 @@
+import { PiletApiExtender } from 'piral-base';
+import { renderElement } from './element';
+import { withApi } from '../state';
+import { ExtensionSlot } from '../components';
+import { createDataOptions, getDataExpiration } from '../utils';
+import { GlobalStateContext, PiletCoreApi } from '../types';
+
+export function createCoreApi(context: GlobalStateContext): PiletApiExtender<PiletCoreApi> {
+  return (api, meta) => {
+    const pilet = meta.name;
+    return {
+      getData(name) {
+        return context.readDataValue(name);
+      },
+      setData(name, value, options) {
+        const { target = 'memory', expires } = createDataOptions(options);
+        const expiration = getDataExpiration(expires);
+        return context.tryWriteDataItem(name, value, pilet, target, expiration);
+      },
+      registerPage(route, arg, meta) {
+        context.registerPage(route, {
+          pilet,
+          meta,
+          component: withApi(context, arg, api, 'page'),
+        });
+        return () => api.unregisterPage(route);
+      },
+      unregisterPage(route) {
+        context.unregisterPage(route);
+      },
+      registerExtension(name, arg, defaults) {
+        context.registerExtension(name as string, {
+          pilet,
+          component: withApi(context, arg, api, 'extension'),
+          reference: arg,
+          defaults,
+        });
+        return () => api.unregisterExtension(name, arg);
+      },
+      unregisterExtension(name, arg) {
+        context.unregisterExtension(name as string, arg);
+      },
+      renderHtmlExtension(element, props) {
+        const [dispose] = renderElement(context, element, props);
+        return dispose;
+      },
+      Extension: ExtensionSlot,
+    };
+  };
+}

package/src/modules/element.ts

@@ -0,0 +1,103 @@
+import { ExtensionSlot } from '../components';
+import { tryParseJson, noop, reactifyContent, renderInDom, changeDomPortal } from '../utils';
+import { Disposable, GlobalStateContext } from '../types';
+
+export interface Updatable {
+  (newProps: any): void;
+}
+
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  class PiralExtension extends HTMLElement {
+    dispose: Disposable = noop;
+    update: Updatable = noop;
+    props = {
+      name: this.getAttribute('name'),
+      params: tryParseJson(this.getAttribute('params')),
+      empty: undefined,
+      children: reactifyContent(this.childNodes),
+    };
+
+    get params() {
+      return this.props.params;
+    }
+
+    set params(value) {
+      this.props.params = value;
+      this.update(this.props);
+    }
+
+    get name() {
+      return this.props.name;
+    }
+
+    set name(value) {
+      this.props.name = value;
+      this.update(this.props);
+    }
+
+    get empty() {
+      return this.props.empty;
+    }
+
+    set empty(value) {
+      this.props.empty = value;
+      this.update(this.props);
+    }
+
+    connectedCallback() {
+      if (this.isConnected) {
+        this.dispatchEvent(
+          new CustomEvent('render-html', {
+            bubbles: true,
+            detail: {
+              target: this,
+              props: this.props,
+            },
+          }),
+        );
+      }
+    }
+
+    disconnectedCallback() {
+      this.dispose();
+      this.dispose = noop;
+      this.update = noop;
+    }
+
+    attributeChangedCallback(name: string, _: any, newValue: any) {
+      switch (name) {
+        case 'name':
+          this.name = newValue;
+          break;
+        case 'params':
+          this.params = tryParseJson(newValue);
+          break;
+      }
+    }
+
+    static get observedAttributes() {
+      return ['name', 'params'];
+    }
+  }
+
+  customElements.define('piral-extension', PiralExtension);
+}
+
+export function renderElement(
+  context: GlobalStateContext,
+  element: HTMLElement | ShadowRoot,
+  props: any,
+): [Disposable, Updatable] {
+  let [id, portal] = renderInDom(context, element, ExtensionSlot, props);
+  const evName = 'extension-props-changed';
+  const handler = (ev: CustomEvent) => update(ev.detail);
+  const dispose: Disposable = () => {
+    context.hidePortal(id, portal);
+    element.removeEventListener(evName, handler);
+  };
+  const update: Updatable = (newProps) => {
+    [id, portal] = changeDomPortal(id, portal, context, element, ExtensionSlot, newProps);
+  };
+  element.addEventListener(evName, handler);
+  return [dispose, update];
+}

package/src/modules/index.ts

@@ -1,2 +1,3 @@
 export * from './api';
 export * from './dependencies';
+export * from './element';

package/src/state/withApi.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { isfunc } from 'piral-base';
 import { __RouterContext } from 'react-router';
 import { PiralError, PiralLoadingIndicator, ErrorBoundary, ErrorBoundaryOptions, PortalRenderer } from '../components';
-import { useActions, useGlobalStateContext } from '../hooks';
+import { useGlobalStateContext } from '../hooks';
 import { defaultRender, convertComponent, none } from '../utils';
 import {
   AnyComponent,
@@ -107,8 +107,7 @@ function wrapForeignComponent<T>(
   Wrapper: React.ComponentType<any>,
 ) {
   return React.memo((props: T) => {
-    const { destroyPortal } = useActions();
-    const { state, readState } = useGlobalStateContext();
+    const { state, readState, destroyPortal } = useGlobalStateContext();
     const router = React.useContext(__RouterContext);
     const id = React.useMemo(() => (portalIdBase++).toString(26), none);
     const context = React.useMemo(() => ({ router, state, readState }), [router, state]);

package/src/types/extension.ts

@@ -1,3 +1,4 @@
+import type { ReactNode, ReactElement } from 'react';
 import type { PiralCustomExtensionSlotMap } from './custom';
 
 /**
@@ -9,16 +10,20 @@ export interface PiralExtensionSlotMap extends PiralCustomExtensionSlotMap {}
  * The basic props for defining an extension slot.
  */
 export interface BaseExtensionSlotProps<TName, TParams> {
+  /**
+   * The children to transport, if any.
+   */
+  children?: ReactNode;
   /**
    * Defines what should be rendered when no components are available
    * for the specified extension.
    */
-  empty?(): React.ReactNode;
+  empty?(): ReactNode;
   /**
    * Defines how the provided nodes should be rendered.
    * @param nodes The rendered extension nodes.
    */
-  render?(nodes: Array<React.ReactNode>): React.ReactElement<any, any> | null;
+  render?(nodes: Array<ReactNode>): ReactElement<any, any> | null;
   /**
    * The custom parameters for the given extension.
    */