piral-core 0.14.8-beta.3504 → 0.14.8-beta.3513

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/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.
    */

package/src/utils/extension.tsx

@@ -1,6 +1,47 @@
 import * as React from 'react';
 import { ExtensionComponentProps, WrappedComponent } from '../types';
 
+function removeAll(nodes: Array<ChildNode>) {
+  nodes.forEach((node) => node.remove());
+}
+
+interface SlotCarrierProps {
+  nodes: Array<ChildNode>;
+}
+
+const SlotCarrier: React.FC<SlotCarrierProps> = ({ nodes }) => {
+  const host = React.useRef<HTMLSlotElement>();
+
+  React.useEffect(() => {
+    host.current?.append(...nodes);
+    return () => removeAll(nodes);
+  }, [nodes]);
+
+  if (nodes.length) {
+    return <slot ref={host} />;
+  }
+
+  return null;
+};
+
+/**
+ * Transforms the given component to an extension component.
+ * @param Component The component to transform.
+ * @returns The extension component (receiving its props via params).
+ */
 export function toExtension<T>(Component: React.ComponentType<T>): WrappedComponent<ExtensionComponentProps<T>> {
   return (props) => <Component {...props.params} />;
 }
+
+/**
+ * Reactifies the list of child nodes to a React Node by removing the
+ * nodes from the DOM and carrying it in a React Node, where it would be
+ * attached at a slot.
+ * @param childNodes The child nodes to reactify.
+ * @returns The React Node.
+ */
+export function reactifyContent(childNodes: NodeListOf<ChildNode>): React.ReactNode {
+  const nodes: Array<ChildNode> = Array.prototype.filter.call(childNodes, Boolean);
+  removeAll(nodes);
+  return <SlotCarrier nodes={nodes} />;
+}