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

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,52 @@
+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 = {}) {
+        const component = withApi(context, arg, api, 'page', undefined, { meta });
+        context.registerPage(route, {
+          pilet,
+          meta,
+          component,
+        });
+        return () => api.unregisterPage(route);
+      },
+      unregisterPage(route) {
+        context.unregisterPage(route);
+      },
+      registerExtension(name, reference, defaults) {
+        const component = withApi(context, reference, api, 'extension');
+        context.registerExtension(name, {
+          pilet,
+          component,
+          reference,
+          defaults,
+        });
+        return () => api.unregisterExtension(name, reference);
+      },
+      unregisterExtension(name, arg) {
+        context.unregisterExtension(name, arg);
+      },
+      renderHtmlExtension(element, props) {
+        const [dispose] = renderElement(context, element, props);
+        return dispose;
+      },
+      Extension: ExtensionSlot,
+    };
+  };
+}

package/src/modules/dependencies.test.ts

@@ -1,9 +1,20 @@
-import { getLocalDependencies } from './dependencies';
+import { globalDependencies, defaultDependencySelector, defaultModuleRequester } from './dependencies';
 
 describe('Dependencies Module', () => {
-  it('getLocalDependencies should contain global dependencies', () => {
-    const localDependencies = getLocalDependencies();
-    expect(localDependencies).toHaveProperty('react');
-    expect(localDependencies).toHaveProperty('history');
+  it('globalDependencies should not contain any dependencies', () => {
+    expect(globalDependencies).toEqual({});
+  });
+
+  it('defaultDependencySelector should return given dependencies', () => {
+    const deps = defaultDependencySelector({
+      foo: 'bar',
+    });
+    expect(deps).toHaveProperty('foo');
+    expect(deps).not.toHaveProperty('bar');
+  });
+
+  it('defaultModuleRequester should return given dependencies', async () => {
+    const mods = await defaultModuleRequester();
+    expect(mods).toEqual([]);
   });
 });

package/src/modules/dependencies.ts

@@ -1,41 +1,23 @@
-import { PiletMetadata, AvailableDependencies, isfunc } from 'piral-base';
-
-const sharedDependencies: AvailableDependencies = {};
-
-if (process.env.SHARED_DEPENDENCIES) {
-  const fillDependencies = require('../../dependencies.codegen');
-
-  if (isfunc(fillDependencies)) {
-    fillDependencies(sharedDependencies);
-  }
-}
+import { isfunc } from 'piral-base';
+import type { AvailableDependencies, PiletEntries } from '../types';
+import { fillDependencies } from '../../app.codegen';
 
 /**
  * The global dependencies, which represent the dependencies
- * already used by piral-core itself.
+ * shared from the app shell itself.
  */
-export const globalDependencies: AvailableDependencies = {
-  react: require('react'),
-  'react-dom': require('react-dom'),
-  'react-router': require('react-router'),
-  'react-router-dom': require('react-router-dom'),
-  history: require('history'),
-  tslib: require('tslib'),
-  'path-to-regexp': require('path-to-regexp'),
-  '@libre/atom': require('@libre/atom'),
-  '@dbeining/react-atom': require('@dbeining/react-atom'),
-};
+export const globalDependencies: AvailableDependencies = {};
+
+if (isfunc(fillDependencies)) {
+  fillDependencies(globalDependencies);
+}
 
 /**
- * Gets the local dependencies for the app shell, which
- * are the global dependencies and the implicitly shared
+ * The default dependency selector, which just returns the provided
  * dependencies.
  */
-export function getLocalDependencies(): AvailableDependencies {
-  return {
-    ...globalDependencies,
-    ...sharedDependencies,
-  };
+export function defaultDependencySelector(dependencies: AvailableDependencies) {
+  return dependencies;
 }
 
 /**
@@ -49,6 +31,6 @@ return fetch('https://feed.piral.cloud/api/v1/pilet/sample')
   .then(res => res.items);
 ```
  */
-export function defaultModuleRequester(): Promise<Array<PiletMetadata>> {
+export function defaultModuleRequester(): Promise<PiletEntries> {
   return Promise.resolve([]);
 }

package/src/modules/element-server.test.ts

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment node
+ */
+
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions } from '../state';
+import { renderElement } from './element';
+
+function createMockContext(): [any, any] {
+  const state: any = create(() => ({
+    portals: {
+      root: [],
+    },
+  }));
+  const context = createActions(state, createListener({}));
+  return [context, state];
+}
+
+describe('Elements Module from SSR', () => {
+  it('Should not have piral-extensions web component', () => {
+    const [context, state] = createMockContext();
+    const element: any = {
+      addEventListener() {},
+    };
+    renderElement(context, element, {});
+    expect(state.getState().portals.root.length).toBe(0);
+  });
+});

package/src/modules/element.test.ts

@@ -0,0 +1,67 @@
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions } from '../state';
+import { renderElement } from './element';
+
+function createMockContext(): [any, any] {
+  const state: any = create(() => ({
+    portals: {},
+  }));
+  const context = createActions(state, createListener({}));
+  return [context, state];
+}
+
+describe('Elements Module', () => {
+  it('testing basic renderElement functionality of piral-extension web component', () => {
+    const [context, state] = createMockContext();
+    const element = document.createElement('piral-extension');
+    const event = new Event('extension-props-changed');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    element.dispatchEvent(event);
+    document.body.removeChild(element);
+    (element as any).connectedCallback();
+    expect(state.getState().portals.root.length).toBe(1);
+  });
+
+  it('disposing piral-extension web component', () => {
+    const [context, state] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    const [dispose] = renderElement(context, element, {});
+    expect(state.getState().portals.root.length).toBe(1);
+    dispose();
+    expect(state.getState().portals.root.length).toBe(0);
+  });
+
+  it('testing setters and getters in piral-extension web component', () => {
+    const [context] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    expect(element.params).toEqual(null);
+    expect(element.name).toEqual(null);
+    expect(element.empty).toEqual(undefined);
+    element.params = 'anything';
+    element.name = 'foo';
+    element.empty = 'anything';
+    expect(element.params).toEqual('anything');
+    expect(element.name).toEqual('foo');
+    expect(element.empty).toEqual('anything');
+    element.setAttribute('name', 'bar');
+    element.setAttribute('params', '{}');
+    expect(element.params).toEqual({});
+    expect(element.name).toEqual('bar');
+  });
+
+  it('testing attributes of piral-extension web component', () => {
+    const [context] = createMockContext();
+    const element = document.createElement('piral-extension');
+    document.body.appendChild(element);
+    renderElement(context, element, {});
+    element.setAttribute('name', 'bar');
+    element.setAttribute('params', '{}');
+    expect(element.params).toEqual({});
+    expect(element.name).toEqual('bar');
+  });
+});

package/src/modules/element.ts

@@ -0,0 +1,212 @@
+import { ExtensionSlot } from '../components';
+import { Disposable, GlobalStateContext, BaseExtensionSlotProps } from '../types';
+import {
+  tryParseJson,
+  noop,
+  reactifyContent,
+  renderInDom,
+  changeDomPortal,
+  portalName,
+  extensionName,
+  slotName,
+  isSame,
+} from '../utils';
+
+export interface Updatable {
+  (newProps: any): void;
+}
+
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  /**
+   * This is a nice abstraction allowing anyone to actually use the extension system
+   * brought by Piral. Not all props of the extension system are actually exposed.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-extension name="my-ext-name"></piral-extension>
+   * ```
+   */
+  class PiralExtension extends HTMLElement {
+    dispose: Disposable = noop;
+    update: Updatable = noop;
+
+    props = {
+      name: this.getAttribute('name'),
+      emptySkipsRender: typeof this.getAttribute('empty-skips-render') === 'string',
+      params: tryParseJson(this.getAttribute('params')),
+      empty: undefined,
+      order: undefined,
+      render: undefined,
+      children: reactifyContent(this.childNodes),
+    } as BaseExtensionSlotProps<string, any>;
+
+    get params() {
+      return this.props.params;
+    }
+
+    set params(value) {
+      if (!isSame(this.props.params, value)) {
+        this.props.params = value;
+        this.update(this.props);
+      }
+    }
+
+    get name() {
+      return this.props.name;
+    }
+
+    set name(value) {
+      if (this.props.name !== value) {
+        this.props.name = value;
+        this.update(this.props);
+      }
+    }
+
+    get order() {
+      return this.props.order;
+    }
+
+    set order(value) {
+      if (this.props.order !== value) {
+        this.props.order = value;
+        this.update(this.props);
+      }
+    }
+
+    get render() {
+      return this.props.render;
+    }
+
+    set render(value) {
+      if (this.props.render !== value) {
+        this.props.render = value;
+        this.update(this.props);
+      }
+    }
+
+    get empty() {
+      return this.props.empty;
+    }
+
+    set empty(value) {
+      if (this.props.empty !== value) {
+        this.props.empty = value;
+        this.update(this.props);
+      }
+    }
+
+    get emptySkipsRender() {
+      return this.props.emptySkipsRender;
+    }
+
+    set emptySkipsRender(value) {
+      if (this.props.emptySkipsRender !== value) {
+        this.props.emptySkipsRender = value;
+        this.update(this.props);
+      }
+    }
+
+    connectedCallback() {
+      this.style.display = 'contents';
+
+      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;
+        case 'empty-skips-render':
+          this.emptySkipsRender = typeof newValue === 'string';
+          break;
+      }
+    }
+
+    static get observedAttributes() {
+      return ['name', 'params', 'empty-skips-render'];
+    }
+  }
+
+  customElements.define(extensionName, PiralExtension);
+
+  /**
+   * This is a boundary to host elements from other frameworks - effectively vanishing
+   * at runtime.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-portal pid="host-1234"></piral-portal>
+   * ```
+   */
+  class PiralPortal extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+    }
+  }
+
+  customElements.define(portalName, PiralPortal);
+
+  /**
+   * This is a virtual element to aggregate rendering from other frameworks, mostly
+   * used like piral-portal, but without context-hosting capabilities. This would
+   * be used exclusively within a foreign framework, not from Piral to initiate.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-slot></piral-slot>
+   * ```
+   */
+  class PiralSlot extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+    }
+  }
+
+  customElements.define(slotName, PiralSlot);
+}
+
+export function renderElement(
+  context: GlobalStateContext,
+  element: HTMLElement | ShadowRoot,
+  props: any,
+): [Disposable, Updatable] {
+  if (typeof window !== 'undefined') {
+    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];
+  }
+
+  return [noop, noop];
+}

package/src/modules/index.ts

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

package/src/{components → setters}/SetComponent.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
-import { Atom, swap, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { SetComponent } from './SetComponent';
 import { StateContext } from '../state';
 
@@ -8,9 +8,9 @@ const FakeLoading = () => null;
 FakeLoading.displayName = 'FakeLoading';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
     components: {},
-  });
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -18,13 +18,14 @@ function createMockContainer() {
       emit: jest.fn(),
       state,
       setComponent(name, comp) {
-        swap(state, (s) => ({
+        const s = state.getState();
+        state.setState({
           ...s,
           components: {
             ...s.components,
             [name]: comp,
           },
-        }));
+        });
       },
     } as any,
   };
@@ -33,12 +34,12 @@ function createMockContainer() {
 describe('Piral-Core SetComponent component', () => {
   it('SetComponent sets the layout component in the store', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <SetComponent name="LoadingIndicator" component={FakeLoading} />
       </StateContext.Provider>,
     );
-    expect(deref<any>(context.state).components).toEqual({
+    expect(context.state.getState().components).toEqual({
       LoadingIndicator: FakeLoading,
     });
   });

package/src/{components → setters}/SetComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 import { ComponentsState } from '../types';
 
 /**
@@ -23,7 +23,7 @@ export function SetComponent<TKey extends keyof ComponentsState>({
   name,
   component,
 }: SetComponentProps<TKey>): React.ReactElement {
-  const setComponent = useAction('setComponent');
+  const { setComponent } = useGlobalStateContext();
   useSetter(() => component && setComponent(name, component));
   // tslint:disable-next-line:no-null-keyword
   return null;