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

package/lib/modules/core.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCoreApi = void 0;
+const element_1 = require("./element");
+const state_1 = require("../state");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+function createCoreApi(context) {
+    return (api, meta) => {
+        const pilet = meta.name;
+        return {
+            getData(name) {
+                return context.readDataValue(name);
+            },
+            setData(name, value, options) {
+                const { target = 'memory', expires } = (0, utils_1.createDataOptions)(options);
+                const expiration = (0, utils_1.getDataExpiration)(expires);
+                return context.tryWriteDataItem(name, value, pilet, target, expiration);
+            },
+            registerPage(route, arg, meta) {
+                context.registerPage(route, {
+                    pilet,
+                    meta,
+                    component: (0, state_1.withApi)(context, arg, api, 'page'),
+                });
+                return () => api.unregisterPage(route);
+            },
+            unregisterPage(route) {
+                context.unregisterPage(route);
+            },
+            registerExtension(name, arg, defaults) {
+                context.registerExtension(name, {
+                    pilet,
+                    component: (0, state_1.withApi)(context, arg, api, 'extension'),
+                    reference: arg,
+                    defaults,
+                });
+                return () => api.unregisterExtension(name, arg);
+            },
+            unregisterExtension(name, arg) {
+                context.unregisterExtension(name, arg);
+            },
+            renderHtmlExtension(element, props) {
+                const [dispose] = (0, element_1.renderElement)(context, element, props);
+                return dispose;
+            },
+            Extension: components_1.ExtensionSlot,
+        };
+    };
+}
+exports.createCoreApi = createCoreApi;
+//# sourceMappingURL=core.js.map

package/lib/modules/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../../src/modules/core.ts"],"names":[],"mappings":";;;AACA,uCAA0C;AAC1C,oCAAmC;AACnC,8CAA8C;AAC9C,oCAAgE;AAGhE,SAAgB,aAAa,CAAC,OAA2B;IACvD,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACxB,OAAO;YACL,OAAO,CAAC,IAAI;gBACV,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YACD,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO;gBAC1B,MAAM,EAAE,MAAM,GAAG,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,yBAAiB,EAAC,OAAO,CAAC,CAAC;gBAClE,MAAM,UAAU,GAAG,IAAA,yBAAiB,EAAC,OAAO,CAAC,CAAC;gBAC9C,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;YAC1E,CAAC;YACD,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI;gBAC3B,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC1B,KAAK;oBACL,IAAI;oBACJ,SAAS,EAAE,IAAA,eAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC;iBAC9C,CAAC,CAAC;gBACH,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YACzC,CAAC;YACD,cAAc,CAAC,KAAK;gBAClB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;YACD,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ;gBACnC,OAAO,CAAC,iBAAiB,CAAC,IAAc,EAAE;oBACxC,KAAK;oBACL,SAAS,EAAE,IAAA,eAAO,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC;oBAClD,SAAS,EAAE,GAAG;oBACd,QAAQ;iBACT,CAAC,CAAC;gBACH,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAClD,CAAC;YACD,mBAAmB,CAAC,IAAI,EAAE,GAAG;gBAC3B,OAAO,CAAC,mBAAmB,CAAC,IAAc,EAAE,GAAG,CAAC,CAAC;YACnD,CAAC;YACD,mBAAmB,CAAC,OAAO,EAAE,KAAK;gBAChC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAA,uBAAa,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;gBACzD,OAAO,OAAO,CAAC;YACjB,CAAC;YACD,SAAS,EAAE,0BAAa;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AA1CD,sCA0CC"}

package/lib/modules/element.d.ts

@@ -0,0 +1,5 @@
+import { Disposable, GlobalStateContext } from '../types';
+export interface Updatable {
+    (newProps: any): void;
+}
+export declare function renderElement(context: GlobalStateContext, element: HTMLElement | ShadowRoot, props: any): [Disposable, Updatable];

package/lib/modules/element.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderElement = void 0;
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+if (typeof window !== 'undefined' && 'customElements' in window) {
+    class PiralExtension extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this.dispose = utils_1.noop;
+            this.update = utils_1.noop;
+            this.props = {
+                name: this.getAttribute('name'),
+                params: (0, utils_1.tryParseJson)(this.getAttribute('params')),
+                empty: undefined,
+                children: (0, utils_1.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 = utils_1.noop;
+            this.update = utils_1.noop;
+        }
+        attributeChangedCallback(name, _, newValue) {
+            switch (name) {
+                case 'name':
+                    this.name = newValue;
+                    break;
+                case 'params':
+                    this.params = (0, utils_1.tryParseJson)(newValue);
+                    break;
+            }
+        }
+        static get observedAttributes() {
+            return ['name', 'params'];
+        }
+    }
+    customElements.define('piral-extension', PiralExtension);
+}
+function renderElement(context, element, props) {
+    let [id, portal] = (0, utils_1.renderInDom)(context, element, components_1.ExtensionSlot, props);
+    const evName = 'extension-props-changed';
+    const handler = (ev) => update(ev.detail);
+    const dispose = () => {
+        context.hidePortal(id, portal);
+        element.removeEventListener(evName, handler);
+    };
+    const update = (newProps) => {
+        [id, portal] = (0, utils_1.changeDomPortal)(id, portal, context, element, components_1.ExtensionSlot, newProps);
+    };
+    element.addEventListener(evName, handler);
+    return [dispose, update];
+}
+exports.renderElement = renderElement;
+//# sourceMappingURL=element.js.map

package/lib/modules/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/modules/element.ts"],"names":[],"mappings":"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"}

package/lib/modules/index.d.ts

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

package/lib/modules/index.js

@@ -3,4 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./api"), exports);
 (0, tslib_1.__exportStar)(require("./dependencies"), exports);
+(0, tslib_1.__exportStar)(require("./element"), exports);
 //# sourceMappingURL=index.js.map

package/lib/modules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modules/index.ts"],"names":[],"mappings":";;;AAAA,qDAAsB;AACtB,8DAA+B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modules/index.ts"],"names":[],"mappings":";;;AAAA,qDAAsB;AACtB,8DAA+B;AAC/B,yDAA0B"}

package/lib/state/withApi.js

@@ -66,8 +66,7 @@ function wrapReactComponent(Component, stasisOptions, piral, Wrapper) {
 }
 function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
     return React.memo((props) => {
-        const { destroyPortal } = (0, hooks_1.useActions)();
-        const { state, readState } = (0, hooks_1.useGlobalStateContext)();
+        const { state, readState, destroyPortal } = (0, hooks_1.useGlobalStateContext)();
         const router = React.useContext(react_router_1.__RouterContext);
         const id = React.useMemo(() => (portalIdBase++).toString(26), utils_1.none);
         const context = React.useMemo(() => ({ router, state, readState }), [router, state]);

package/lib/state/withApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"withApi.js","sourceRoot":"","sources":["../../src/state/withApi.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withApi.js","sourceRoot":"","sources":["../../src/state/withApi.tsx"],"names":[],"mappings":"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"}

package/lib/types/extension.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode, ReactElement } from 'react';
 import type { PiralCustomExtensionSlotMap } from './custom';
 /**
  * The mapping of the existing (known) extension slots.
@@ -9,16 +9,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/lib/types/instance.d.ts

@@ -1,10 +1,11 @@
 import type { PiletApi, PiletApiCreator, LoadPiletsOptions, EventEmitter } from 'piral-base';
 import type { GlobalStateContext } from './state';
 import type { LayoutBreakpoints } from './layout';
+import { PiralConfiguration } from './config';
 /**
  * The props of the Piral component.
  */
-export interface PortalProps {
+export interface PiralProps {
     /**
      * The specific Piral instance to be used.
      */
@@ -15,10 +16,24 @@ export interface PortalProps {
     breakpoints?: LayoutBreakpoints;
 }
 /**
- * The PiralInstance component, which is an event emitter containing the React
- * functional component as well as some other utilities and helpers.
+ * The options for creating a new PiralInstance object.
+ */
+export interface PiralInstanceOptions extends PiralConfiguration {
+    /**
+     * Defines the id of this instance. Used in case of multiple instances.
+     */
+    id?: string;
+}
+/**
+ * The PiralInstance object, which is an event emitter with some other
+ * utilities and helper. This object is the source for the React
+ * functional component (`Piral`).
  */
 export interface PiralInstance extends EventEmitter {
+    /**
+     * The id of the Piral instance.
+     */
+    id: string;
     /**
      * The global state context instance.
      */

package/lib/utils/extension.d.ts

@@ -1,3 +1,16 @@
 import * as React from 'react';
 import { ExtensionComponentProps, WrappedComponent } from '../types';
+/**
+ * Transforms the given component to an extension component.
+ * @param Component The component to transform.
+ * @returns The extension component (receiving its props via params).
+ */
 export declare function toExtension<T>(Component: React.ComponentType<T>): WrappedComponent<ExtensionComponentProps<T>>;
+/**
+ * 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 declare function reactifyContent(childNodes: NodeListOf<ChildNode>): React.ReactNode;

package/lib/utils/extension.js

@@ -1,9 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toExtension = void 0;
+exports.reactifyContent = exports.toExtension = void 0;
 const React = require("react");
+function removeAll(nodes) {
+    nodes.forEach((node) => node.remove());
+}
+const SlotCarrier = ({ nodes }) => {
+    const host = React.useRef();
+    React.useEffect(() => {
+        var _a;
+        (_a = host.current) === null || _a === void 0 ? void 0 : _a.append(...nodes);
+        return () => removeAll(nodes);
+    }, [nodes]);
+    if (nodes.length) {
+        return React.createElement("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).
+ */
 function toExtension(Component) {
     return (props) => React.createElement(Component, Object.assign({}, props.params));
 }
 exports.toExtension = toExtension;
+/**
+ * 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.
+ */
+function reactifyContent(childNodes) {
+    const nodes = Array.prototype.filter.call(childNodes, Boolean);
+    removeAll(nodes);
+    return React.createElement(SlotCarrier, { nodes: nodes });
+}
+exports.reactifyContent = reactifyContent;
 //# sourceMappingURL=extension.js.map

package/lib/utils/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../../src/utils/extension.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,SAAgB,WAAW,CAAI,SAAiC;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC;AACpD,CAAC;AAFD,kCAEC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../../src/utils/extension.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,SAAS,SAAS,CAAC,KAAuB;IACxC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AACzC,CAAC;AAMD,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAmB,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;QAC/B,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,KAAK,CAAC,MAAM,EAAE;QAChB,OAAO,8BAAM,GAAG,EAAE,IAAI,GAAI,CAAC;KAC5B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,SAAgB,WAAW,CAAI,SAAiC;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC;AACpD,CAAC;AAFD,kCAEC;AAED;;;;;;GAMG;AACH,SAAgB,eAAe,CAAC,UAAiC;IAC/D,MAAM,KAAK,GAAqB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACjF,SAAS,CAAC,KAAK,CAAC,CAAC;IACjB,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;AACvC,CAAC;AAJD,0CAIC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.14.8-beta.3500",
+  "version": "0.14.8-beta.3511",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@dbeining/react-atom": "^4.0.0",
-    "piral-base": "0.14.8-beta.3500",
-    "piral-debug-utils": "0.14.8-beta.3500"
+    "piral-base": "0.14.8-beta.3511",
+    "piral-debug-utils": "0.14.8-beta.3511"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -78,5 +78,5 @@
     "@libre/atom",
     "@dbeining/react-atom"
   ],
-  "gitHead": "89a719e1827869c9953f9c3c76a338be59e31b7d"
+  "gitHead": "69a69677e9c44c0013c3220877978d262e11c9ac"
 }

package/src/Piral.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { StateContext } from './state';
 import { createInstance } from './createInstance';
 import { PiralView, Mediator, ResponsiveLayout, PortalRenderer } from './components';
-import type { PortalProps } from './types';
+import { RootListener } from './RootListener';
+import type { PiralProps } from './types';
 
 /**
  * Represents the Piral app shell frame. Use this component together
@@ -19,10 +20,11 @@ const app = (
 );
 ```
  */
-export const Piral: React.FC<PortalProps> = ({ instance = createInstance(), breakpoints, children }) => (
+export const Piral: React.FC<PiralProps> = ({ instance = createInstance(), breakpoints, children }) => (
   <StateContext.Provider value={instance.context}>
     <ResponsiveLayout breakpoints={breakpoints} />
-    <Mediator options={instance.options} />
+    <Mediator options={instance.options} key={instance.id} />
+    <RootListener />
     <PiralView>
       <PortalRenderer id="root" />
       {children}

package/src/RootListener.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useGlobalStateContext } from '.';
+import { renderElement } from './modules';
+
+export const RootListener: React.FC = () => {
+  const context = useGlobalStateContext();
+
+  React.useLayoutEffect(() => {
+    if (typeof document !== 'undefined') {
+      const handler = (ev: CustomEvent) => {
+        ev.stopPropagation();
+        const { target, props } = ev.detail;
+        const [dispose, update] = renderElement(context, target, props);
+        target.dispose = dispose;
+        target.update = update;
+      };
+      document.body.addEventListener('render-html', handler, false);
+
+      return () => {
+        document.body.removeEventListener('render-html', handler, false);
+      };
+    }
+  }, [context]);
+
+  return null;
+};

package/src/actions/app.ts

@@ -1,4 +1,4 @@
-import { ComponentType, cloneElement, createElement } from 'react';
+import { ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { withKey, replaceOrAddItem, removeNested, withProvider, withRoute } from '../utils';
 import {

package/src/components/ExtensionSlot.tsx

@@ -10,7 +10,7 @@ import { ExtensionSlotProps } from '../types';
  * location.
  */
 export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
-  const { name, render = defaultRender, empty, params } = props;
+  const { name, render = defaultRender, empty, params, children } = props;
   const extensions = useGlobalState((s) => s.registry.extensions[name] || none);
   return render(
     extensions.length === 0 && isfunc(empty)
@@ -18,6 +18,7 @@ export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
       : extensions.map(({ component: Component, reference, defaults = {} }, i) => (
           <Component
             key={`${reference?.displayName || '_'}${i}`}
+            children={children}
             params={{
               ...defaults,
               ...(params || {}),

package/src/components/Mediator.test.tsx

@@ -22,6 +22,9 @@ function createMockContainer() {
       dispatch(update) {
         swap(state, update);
       },
+      readState(select) {
+        return select(deref(state));
+      },
       initialize(loading, error, modules) {
         swap(state, (state) => ({
           ...state,
@@ -42,9 +45,7 @@ describe('Component Mediator', () => {
     const options = {
       createApi: jest.fn(),
       fetchPilets: () => {
-        return new Promise<Array<PiletMetadata>>((resolve, reject) => {
-          resolve([]);
-        });
+        return new Promise<Array<PiletMetadata>>((resolve) => resolve([]));
       },
     };
     const { context } = createMockContainer();

package/src/components/Mediator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LoadPiletsOptions, startLoadingPilets, PiletsLoading } from 'piral-base';
-import { useAction } from '../hooks';
+import { useGlobalStateContext } from '../hooks';
 import { none } from '../utils';
 
 /**
@@ -17,15 +17,22 @@ export interface MediatorProps {
  * The Mediator component for interfacing with pilets loading.
  */
 export const Mediator: React.FC<MediatorProps> = ({ options }) => {
-  const initialize = useAction('initialize');
+  const { initialize, readState } = useGlobalStateContext();
+
   React.useEffect(() => {
-    const { connect, disconnect } = startLoadingPilets(options);
-    const notifier: PiletsLoading = (error, pilets, loaded) => {
-      initialize(!loaded, error, pilets);
-    };
-    connect(notifier);
-    return () => disconnect(notifier);
+    const shouldLoad = readState(s => s.app.loading);
+
+    if (shouldLoad) {
+      const { connect, disconnect } = startLoadingPilets(options);
+      const notifier: PiletsLoading = (error, pilets, loaded) => {
+        initialize(!loaded, error, pilets);
+      };
+      connect(notifier);
+      return () => disconnect(notifier);
+    }
+
   }, none);
+
   // tslint:disable-next-line:no-null-keyword
   return null;
 };

package/src/components/ResponsiveLayout.test.tsx

@@ -19,7 +19,9 @@ StubComponent.displayName = 'StubComponent';
 describe('Responsive Module', () => {
   it('always renders the given children', () => {
     const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
+    (hooks as any).useGlobalStateContext = () => ({
+      changeLayout: changeTo,
+    });
     (hooks as any).useMedia = () => 'desktop';
     const node = mount(
       <ResponsiveLayout breakpoints={defaultBreakpoints}>
@@ -31,7 +33,9 @@ describe('Responsive Module', () => {
 
   it('does not call changeTo when nothing changed', () => {
     const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
+    (hooks as any).useGlobalStateContext = () => ({
+      changeLayout: changeTo,
+    });
     (hooks as any).useMedia = () => 'desktop';
     mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
     expect(changeTo).not.toHaveBeenCalled();
@@ -39,7 +43,9 @@ describe('Responsive Module', () => {
 
   it('does not call changeTo when nothing changed', () => {
     const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
+    (hooks as any).useGlobalStateContext = () => ({
+      changeLayout: changeTo,
+    });
     (hooks as any).useMedia = () => 'desktop';
     mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
     expect(changeTo).not.toHaveBeenCalled();
@@ -47,7 +53,9 @@ describe('Responsive Module', () => {
 
   it('does calls changeTo when someething changed (desktop -> tablet)', () => {
     const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
+    (hooks as any).useGlobalStateContext = () => ({
+      changeLayout: changeTo,
+    });
     (hooks as any).useMedia = () => 'tablet';
     mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
     expect(changeTo).toHaveBeenCalledWith('tablet');
@@ -55,7 +63,9 @@ describe('Responsive Module', () => {
 
   it('does calls changeTo when someething changed (desktop -> mobile)', () => {
     const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
+    (hooks as any).useGlobalStateContext = () => ({
+      changeLayout: changeTo,
+    });
     (hooks as any).useMedia = () => 'mobile';
     mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
     expect(changeTo).toHaveBeenCalledWith('mobile');

package/src/components/ResponsiveLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMedia, useGlobalState, useAction } from '../hooks';
+import { useMedia, useGlobalState, useGlobalStateContext } from '../hooks';
 import { defaultLayouts, defaultRender, defaultBreakpoints } from '../utils';
 import { LayoutBreakpoints } from '../types';
 
@@ -18,12 +18,12 @@ export interface ResponsiveLayoutProps {
  */
 export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({ breakpoints = defaultBreakpoints, children }) => {
   const current = useGlobalState((m) => m.app.layout) || 'desktop';
-  const changeTo = useAction('changeLayout');
+  const { changeLayout } = useGlobalStateContext();
   const selected = useMedia(breakpoints, defaultLayouts, current);
 
   React.useEffect(() => {
     if (selected !== current) {
-      changeTo(selected);
+      changeLayout(selected);
     }
   }, [selected]);
 

package/src/components/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;

package/src/components/SetError.tsx

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

package/src/components/SetProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAction, useSetter } from '../hooks';
+import { useGlobalStateContext, useSetter } from '../hooks';
 
 /**
  * The props for the SetProvider component.
@@ -15,7 +15,7 @@ export interface SetProviderProps {
  * The component capable of setting a global provider at mounting.
  */
 export function SetProvider({ provider }: SetProviderProps): React.ReactElement {
-  const includeProvider = useAction('includeProvider');
+  const {includeProvider} = useGlobalStateContext();
   useSetter(() => provider && includeProvider(provider));
   // tslint:disable-next-line:no-null-keyword
   return null;