piral-core 0.15.0-alpha.3740 → 0.15.0-alpha.3784

package/lib/components/components.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PiralDebug = exports.PiralLayout = exports.PiralRouter = exports.PiralLoadingIndicator = exports.PiralError = exports.getPiralComponent = void 0;
+exports.PiralDebug = exports.PiralLayout = exports.PiralRouteSwitch = exports.PiralRouter = exports.PiralLoadingIndicator = exports.PiralError = exports.getPiralComponent = void 0;
 const React = require("react");
 const hooks_1 = require("../hooks");
 function getPiralComponent(name) {
     return (props) => {
         const Component = (0, hooks_1.useGlobalState)((s) => s.components[name]);
+        // tslint:disable-next-line:no-null-keyword
         return Component ? React.createElement(Component, Object.assign({}, props)) : null;
     };
 }
@@ -25,6 +26,11 @@ exports.PiralLoadingIndicator = getPiralComponent('LoadingIndicator');
  * By default the BrowserRouter is used.
  */
 exports.PiralRouter = getPiralComponent('Router');
+/**
+ * Gets the currently registered Route Switch component.
+ * By default the DefaultRouteSwitch component is used.
+ */
+exports.PiralRouteSwitch = getPiralComponent('RouteSwitch');
 /**
  * Gets the currently registered Layout component.
  * By default the children are rendered.

package/lib/components/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,oCAA0C;AAG1C,SAAgB,iBAAiB,CAAqC,IAAU;IAC9E,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,OAAO,SAAS,CAAC,CAAC,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,CAAC,CAAC;AACJ,CAAC;AALD,8CAKC;AAED;;;GAGG;AACU,QAAA,UAAU,GAAwC,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAE9F;;;GAGG;AACU,QAAA,qBAAqB,GAA+C,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAEvH;;;GAGG;AACU,QAAA,WAAW,GAAqC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAEzF;;;GAGG;AACU,QAAA,WAAW,GAAqC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAEzF;;;GAGG;AACU,QAAA,UAAU,GAAwB,iBAAiB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/components/components.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,oCAA0C;AAU1C,SAAgB,iBAAiB,CAAqC,IAAU;IAC9E,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,SAAS,GAAG,IAAA,sBAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,2CAA2C;QAC3C,OAAO,SAAS,CAAC,CAAC,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,CAAC,CAAC;AACJ,CAAC;AAND,8CAMC;AAED;;;GAGG;AACU,QAAA,UAAU,GAAwC,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAE9F;;;GAGG;AACU,QAAA,qBAAqB,GAA+C,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAEvH;;;GAGG;AACU,QAAA,WAAW,GAAqC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAEzF;;;GAGG;AACU,QAAA,gBAAgB,GAA0C,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAExG;;;GAGG;AACU,QAAA,WAAW,GAAqC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAEzF;;;GAGG;AACU,QAAA,UAAU,GAAwB,iBAAiB,CAAC,OAAO,CAAC,CAAC"}

package/lib/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './DefaultErrorInfo';
 export * from './DefaultLayout';
 export * from './DefaultLoader';
 export * from './DefaultRouter';
+export * from './DefaultRouteSwitch';
 export * from './ErrorBoundary';
 export * from './ExtensionSlot';
 export * from './Mediator';

package/lib/components/index.js

@@ -6,6 +6,7 @@ const tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./DefaultLayout"), exports);
 (0, tslib_1.__exportStar)(require("./DefaultLoader"), exports);
 (0, tslib_1.__exportStar)(require("./DefaultRouter"), exports);
+(0, tslib_1.__exportStar)(require("./DefaultRouteSwitch"), exports);
 (0, tslib_1.__exportStar)(require("./ErrorBoundary"), exports);
 (0, tslib_1.__exportStar)(require("./ExtensionSlot"), exports);
 (0, tslib_1.__exportStar)(require("./Mediator"), exports);

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,4DAA6B;AAC7B,kEAAmC;AACnC,+DAAgC;AAChC,+DAAgC;AAChC,+DAAgC;AAChC,+DAAgC;AAChC,+DAAgC;AAChC,0DAA2B;AAC3B,6DAA8B;AAC9B,2DAA4B;AAC5B,gEAAiC;AACjC,kEAAmC;AACnC,8DAA+B;AAC/B,0DAA2B;AAC3B,2DAA4B;AAC5B,2DAA4B;AAC5B,6DAA8B;AAC9B,6DAA8B;AAC9B,0DAA2B;AAC3B,iEAAkC;AAClC,+DAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,4DAA6B;AAC7B,kEAAmC;AACnC,+DAAgC;AAChC,+DAAgC;AAChC,+DAAgC;AAChC,oEAAqC;AACrC,+DAAgC;AAChC,+DAAgC;AAChC,0DAA2B;AAC3B,6DAA8B;AAC9B,2DAA4B;AAC5B,gEAAiC;AACjC,kEAAmC;AACnC,8DAA+B;AAC/B,0DAA2B;AAC3B,2DAA4B;AAC5B,2DAA4B;AAC5B,6DAA8B;AAC9B,6DAA8B;AAC9B,0DAA2B;AAC3B,iEAAkC;AAClC,+DAAgC"}

package/lib/emulator.js

@@ -3,9 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.integrateEmulator = void 0;
 const piral_debug_utils_1 = require("piral-debug-utils");
 function integrateEmulator(context, options) {
-    options.fetchPilets = (0, piral_debug_utils_1.withEmulatorPilets)(options.fetchPilets, {
+    (0, piral_debug_utils_1.installPiletEmulator)(options.fetchPilets, {
         addPilet: context.addPilet,
         removePilet: context.removePilet,
+        integrate(emulator) {
+            context.dispatch((s) => (Object.assign(Object.assign({}, s), { components: Object.assign(Object.assign({}, s.components), emulator.components) })));
+            options.fetchPilets = emulator.requester;
+        },
     });
 }
 exports.integrateEmulator = integrateEmulator;

package/lib/emulator.js.map

@@ -1 +1 @@
-{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":";;;AACA,yDAAuD;AAGvD,SAAgB,iBAAiB,CAAC,OAA2B,EAAE,OAA0B;IACvF,OAAO,CAAC,WAAW,GAAG,IAAA,sCAAkB,EAAC,OAAO,CAAC,WAAW,EAAE;QAC5D,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;KACjC,CAAC,CAAC;AACL,CAAC;AALD,8CAKC"}
+{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":";;;AACA,yDAAyD;AAGzD,SAAgB,iBAAiB,CAAC,OAA2B,EAAE,OAA0B;IACvF,IAAA,wCAAoB,EAAC,OAAO,CAAC,WAAW,EAAE;QACxC,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,SAAS,CAAC,QAAQ;YAChB,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,iCACnB,CAAC,KACJ,UAAU,kCACL,CAAC,CAAC,UAAU,GACZ,QAAQ,CAAC,UAAU,KAExB,CAAC,CAAC;YAEJ,OAAO,CAAC,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC3C,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAhBD,8CAgBC"}

package/lib/state/createGlobalState.js

@@ -27,6 +27,7 @@ function createGlobalState(customState = {}) {
             ErrorInfo: components_1.DefaultErrorInfo,
             LoadingIndicator: components_1.DefaultLoadingIndicator,
             Router: components_1.DefaultRouter,
+            RouteSwitch: components_1.DefaultRouteSwitch,
             Layout: components_1.DefaultLayout,
         },
         errorComponents: {},

package/lib/state/createGlobalState.js.map

@@ -1 +1 @@
-{"version":3,"file":"createGlobalState.js","sourceRoot":"","sources":["../../src/state/createGlobalState.ts"],"names":[],"mappings":";;;AAAA,qDAA4C;AAC5C,8CAAwG;AAGxG,SAAS,MAAM,CAAI,YAAe,EAAE,WAA6B;IAC/D,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;QAC1C,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,aAAa,EAAE;YAChD,SAAS;SACV;QAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;QACzE,YAAY,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KAC9D;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,SAAgB,iBAAiB,CAAC,cAA0C,EAAE;IAC5E,MAAM,YAAY,GAAgB;QAChC,GAAG,EAAE;YACH,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,OAAO,MAAM,KAAK,WAAW;YACtC,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,iBAAiB,IAAI,GAAG;SACjD;QACD,UAAU,EAAE;YACV,SAAS,EAAE,6BAAgB;YAC3B,gBAAgB,EAAE,oCAAuB;YACzC,MAAM,EAAE,0BAAa;YACrB,MAAM,EAAE,0BAAa;SACtB;QACD,eAAe,EAAE,EAAE;QACnB,QAAQ,EAAE;YACR,UAAU,EAAE,EAAE;YACd,KAAK,EAAE,EAAE;YACT,QAAQ,EAAE,EAAE;SACb;QACD,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,EAAE;QACR,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,OAAO,iBAAI,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC;AA3BD,8CA2BC"}
+{"version":3,"file":"createGlobalState.js","sourceRoot":"","sources":["../../src/state/createGlobalState.ts"],"names":[],"mappings":";;;AAAA,qDAA4C;AAC5C,8CAMuB;AAGvB,SAAS,MAAM,CAAI,YAAe,EAAE,WAA6B;IAC/D,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;QAC1C,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,aAAa,EAAE;YAChD,SAAS;SACV;QAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACnC,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;QACzE,YAAY,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KAC9D;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,SAAgB,iBAAiB,CAAC,cAA0C,EAAE;IAC5E,MAAM,YAAY,GAAgB;QAChC,GAAG,EAAE;YACH,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,OAAO,MAAM,KAAK,WAAW;YACtC,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,iBAAiB,IAAI,GAAG;SACjD;QACD,UAAU,EAAE;YACV,SAAS,EAAE,6BAAgB;YAC3B,gBAAgB,EAAE,oCAAuB;YACzC,MAAM,EAAE,0BAAa;YACrB,WAAW,EAAE,+BAAkB;YAC/B,MAAM,EAAE,0BAAa;SACtB;QACD,eAAe,EAAE,EAAE;QACnB,QAAQ,EAAE;YACR,UAAU,EAAE,EAAE;YACd,KAAK,EAAE,EAAE;YACT,QAAQ,EAAE,EAAE;SACb;QACD,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,EAAE;QACR,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,OAAO,iBAAI,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC;AA5BD,8CA4BC"}

package/lib/types/components.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { RouteComponentProps } from 'react-router';
+import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
 import type { LayoutType } from './layout';
@@ -181,3 +181,25 @@ export interface LayoutProps {
  */
 export interface RouterProps {
 }
+/**
+ * The props of the RouteSwitch component.
+ */
+export interface RouteSwitchProps extends SwitchProps {
+    /**
+     * The component that should be used in case nothing was found.
+     */
+    NotFound: ComponentType<RouteComponentProps>;
+    /**
+     * The component to register for the different paths.
+     */
+    paths: Array<{
+        /**
+         * The exact path to use.
+         */
+        path: string;
+        /**
+         * The component to register for this path.
+         */
+        Component: ComponentType<RouteComponentProps>;
+    }>;
+}

package/lib/types/state.d.ts

@@ -7,7 +7,7 @@ import type { LayoutType } from './layout';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type { PiralCustomActions, PiralCustomState, PiralCustomRegistryState, PiralCustomComponentsState } from './custom';
 import type { EventEmitter, Pilet, BaseComponentProps, PageComponentProps, ExtensionComponentProps, PiletsBag, PiralPageMeta, PiletEntry } from './api';
-import type { ComponentConverters, LoadingIndicatorProps, ErrorInfoProps, RouterProps, LayoutProps, Errors } from './components';
+import type { ComponentConverters, LoadingIndicatorProps, ErrorInfoProps, RouterProps, LayoutProps, Errors, RouteSwitchProps } from './components';
 export interface StateDispatcher<TState> {
     (state: TState): Partial<TState>;
 }
@@ -59,6 +59,10 @@ export interface ComponentsState extends PiralCustomComponentsState {
      * The layout used for pages.
      */
     Layout: ComponentType<LayoutProps>;
+    /**
+     * The route switch used for determining the route registration.
+     */
+    RouteSwitch: ComponentType<RouteSwitchProps>;
     /**
      * A component that can be used for debugging purposes.
      */
@@ -174,18 +178,20 @@ export interface PiralActions extends PiralCustomActions {
     /**
      * Injects an evaluated pilet at runtime - removes the pilet from registry first if available.
      * @param pilet The pilet to be injected.
+     * @returns The injected pilet.
      */
-    injectPilet(pilet: Pilet): void;
+    injectPilet(pilet: Pilet): Pilet;
     /**
      * Adds a pilet at runtime by loading it, evaluating it, and then injecting it.
      * @param pilet The pilet to be added.
+     * @returns The promise indicating when the pilet was fully added.
      */
-    addPilet(pilet: PiletEntry): void;
+    addPilet(pilet: PiletEntry): Promise<void>;
     /**
      * Removes a pilet by unloading it and deleting all component registrations.
      * @param name The name of the pilet to remove.
      */
-    removePilet(name: string): void;
+    removePilet(name: string): Promise<void>;
     /**
      * Defines a single action for Piral.
      * @param actionName The name of the action to define.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.3740",
+  "version": "0.15.0-alpha.3784",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@dbeining/react-atom": "^4.0.0",
-    "piral-base": "0.15.0-alpha.3740",
-    "piral-debug-utils": "0.15.0-alpha.3740"
+    "piral-base": "0.15.0-alpha.3784",
+    "piral-debug-utils": "0.15.0-alpha.3784"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -79,5 +79,5 @@
     "@libre/atom",
     "@dbeining/react-atom"
   ],
-  "gitHead": "e70f3043f4e6750dfab89dd5fd7c9da874cb2883"
+  "gitHead": "e2dc030bd7e656d349caf5353740e45329e471f1"
 }

package/src/actions/app.ts

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { runPilet } from 'piral-base';
-import { withKey, replaceOrAddItem, removeNested, withProvider, withRoute } from '../utils';
+import { withKey, replaceOrAddItem, removeNested, withProvider, withRoute, noop } from '../utils';
 import {
   LayoutType,
   ComponentsState,
@@ -32,18 +32,15 @@ export function initialize(ctx: GlobalStateContext, loading: boolean, error: Err
   }));
 }
 
-export function addPilet(ctx: GlobalStateContext, meta: PiletEntry) {
-  ctx.options.loadPilet(meta).then((pilet) => {
-    try {
-      ctx.injectPilet(pilet);
-      runPilet(ctx.options.createApi, pilet, ctx.options.hooks);
-    } catch (error) {
-      console.error(error);
-    }
-  });
+export function addPilet(ctx: GlobalStateContext, meta: PiletEntry): Promise<void> {
+  return ctx.options
+    .loadPilet(meta)
+    .then((pilet) => ctx.injectPilet(pilet))
+    .then((pilet) => runPilet(ctx.options.createApi, pilet, ctx.options.hooks))
+    .then(noop);
 }
 
-export function removePilet(ctx: GlobalStateContext, name: string) {
+export function removePilet(ctx: GlobalStateContext, name: string): Promise<void> {
   ctx.dispatch((state) => ({
     ...state,
     modules: state.modules.filter((m) => m.name !== name),
@@ -53,9 +50,11 @@ export function removePilet(ctx: GlobalStateContext, name: string) {
   ctx.emit('unload-pilet', {
     name,
   });
+
+  return Promise.resolve();
 }
 
-export function injectPilet(ctx: GlobalStateContext, pilet: Pilet) {
+export function injectPilet(ctx: GlobalStateContext, pilet: Pilet): Pilet {
   ctx.dispatch((state) => ({
     ...state,
     modules: replaceOrAddItem(state.modules, pilet, (m) => m.name === pilet.name),
@@ -65,6 +64,8 @@ export function injectPilet(ctx: GlobalStateContext, pilet: Pilet) {
   ctx.emit('unload-pilet', {
     name: pilet.name,
   });
+
+  return pilet;
 }
 
 export function setComponent<TKey extends keyof ComponentsState>(

package/src/components/DefaultRouteSwitch.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Switch, Route } from 'react-router';
+import { RouteSwitchProps } from '../types';
+
+export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound, ...props }) => {
+  return (
+    <Switch {...props}>
+      {paths.map(({ path, Component }) => (
+        <Route exact key={path} path={path} component={Component} />
+      ))}
+      <Route component={NotFound} />
+    </Switch>
+  );
+};

package/src/components/PiralRoutes.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as hooks from '../hooks';
 import { MemoryRouter } from 'react-router';
 import { mount } from 'enzyme';
+import { DefaultRouteSwitch } from './DefaultRouteSwitch';
 import { PiralRoutes } from './PiralRoutes';
 
 const mountWithRouter = (node, url = '/') =>
@@ -52,7 +53,7 @@ StubBarPage.displayName = 'StubBarPage';
 
 describe('Routes Module', () => {
   it('always goes to the given home on "/"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/');
     expect(node.find(StubHome).length).toBe(1);
     expect(node.find(StubNotFound).length).toBe(0);
     expect(node.find(StubCustomPage).length).toBe(0);
@@ -60,7 +61,7 @@ describe('Routes Module', () => {
   });
 
   it('goes to the not found on an invalid path', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/qxz');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/qxz');
     expect(node.find(StubHome).length).toBe(0);
     expect(node.find(StubNotFound).length).toBe(1);
     expect(node.find(StubCustomPage).length).toBe(0);
@@ -68,7 +69,7 @@ describe('Routes Module', () => {
   });
 
   it('goes to the custom page on "/custom"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/custom');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/custom');
     expect(node.find(StubHome).length).toBe(0);
     expect(node.find(StubNotFound).length).toBe(0);
     expect(node.find(StubCustomPage).length).toBe(1);
@@ -76,7 +77,7 @@ describe('Routes Module', () => {
   });
 
   it('goes exactly to the page on "/foo/bar"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/foo/bar');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/foo/bar');
     expect(node.find(StubHome).length).toBe(0);
     expect(node.find(StubNotFound).length).toBe(0);
     expect(node.find(StubCustomPage).length).toBe(0);
@@ -84,7 +85,7 @@ describe('Routes Module', () => {
   });
 
   it('goes exactly to the page on "/foo"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/foo');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/foo');
     expect(node.find(StubHome).length).toBe(0);
     expect(node.find(StubNotFound).length).toBe(0);
     expect(node.find(StubCustomPage).length).toBe(0);
@@ -93,7 +94,7 @@ describe('Routes Module', () => {
   });
 
   it('goes exactly to the page on "/bar"', () => {
-    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} />, '/bar');
+    const node = mountWithRouter(<PiralRoutes NotFound={StubNotFound} RouteSwitch={DefaultRouteSwitch} />, '/bar');
     expect(node.find(StubHome).length).toBe(0);
     expect(node.find(StubNotFound).length).toBe(0);
     expect(node.find(StubCustomPage).length).toBe(0);

package/src/components/PiralRoutes.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Route, Switch, RouteComponentProps, SwitchProps } from 'react-router';
+import { RouteComponentProps, SwitchProps } from 'react-router';
 import { useGlobalState } from '../hooks';
+import { RouteSwitchProps } from '../types';
 
 /**
  * The props used by the PiralRoutes component.
@@ -10,25 +11,23 @@ export interface RoutesProps extends SwitchProps {
    * Sets the component for showing the not found page.
    */
   NotFound: React.ComponentType<RouteComponentProps>;
+  /**
+   * Sets the component for actually switching the routes.
+   */
+  RouteSwitch: React.ComponentType<RouteSwitchProps>;
 }
 
 /**
  * The component for defining the exclusive routes to be used.
  */
-export const PiralRoutes: React.FC<RoutesProps> = ({ NotFound, ...props }) => {
+export const PiralRoutes: React.FC<RoutesProps> = ({ NotFound, RouteSwitch, ...props }) => {
   const routes = useGlobalState((s) => s.routes);
   const pages = useGlobalState((s) => s.registry.pages);
+  const paths = [];
+
+  Object.keys(routes).map((path) => paths.push({ path, Component: routes[path] }));
+  Object.keys(pages).map((path) => paths.push({ path, Component: pages[path].component }));
 
-  return (
-    <Switch {...props}>
-      {Object.keys(routes).map((url) => (
-        <Route exact key={url} path={url} component={routes[url]} />
-      ))}
-      {Object.keys(pages).map((url) => (
-        <Route exact key={url} path={url} component={pages[url].component} />
-      ))}
-      <Route component={NotFound} />
-    </Switch>
-  );
+  return <RouteSwitch NotFound={NotFound} paths={paths} {...props} />;
 };
 PiralRoutes.displayName = 'Routes';

package/src/components/PiralView.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { RouteComponentProps, StaticRouter } from 'react-router';
-import { PiralError, PiralRouter, PiralLoadingIndicator, PiralLayout, PiralDebug } from './components';
 import { PiralRoutes } from './PiralRoutes';
+import {
+  PiralError,
+  PiralRouter,
+  PiralLoadingIndicator,
+  PiralRouteSwitch,
+  PiralLayout,
+  PiralDebug,
+} from './components';
 import { useGlobalState } from '../hooks';
 
 const NotFound: React.FC<RouteComponentProps> = (props) => <PiralError type="not_found" {...props} />;
@@ -15,7 +22,7 @@ const PiralContent: React.FC = () => {
     <PiralLoadingIndicator />
   ) : (
     <PiralLayout currentLayout={layout}>
-      <PiralRoutes NotFound={NotFound} />
+      <PiralRoutes NotFound={NotFound} RouteSwitch={PiralRouteSwitch} />
     </PiralLayout>
   );
 };

package/src/components/components.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { useGlobalState } from '../hooks';
-import { ComponentsState, ErrorInfoProps, LoadingIndicatorProps, RouterProps, LayoutProps } from '../types';
+import {
+  ComponentsState,
+  ErrorInfoProps,
+  LoadingIndicatorProps,
+  RouterProps,
+  LayoutProps,
+  RouteSwitchProps,
+} from '../types';
 
 export function getPiralComponent<TKey extends keyof ComponentsState>(name: TKey): ComponentsState[TKey] {
   return (props) => {
     const Component = useGlobalState((s) => s.components[name]);
+    // tslint:disable-next-line:no-null-keyword
     return Component ? <Component {...props} /> : null;
   };
 }
@@ -27,6 +35,12 @@ export const PiralLoadingIndicator: React.ComponentType<LoadingIndicatorProps> =
  */
 export const PiralRouter: React.ComponentType<RouterProps> = getPiralComponent('Router');
 
+/**
+ * Gets the currently registered Route Switch component.
+ * By default the DefaultRouteSwitch component is used.
+ */
+export const PiralRouteSwitch: React.ComponentType<RouteSwitchProps> = getPiralComponent('RouteSwitch');
+
 /**
  * Gets the currently registered Layout component.
  * By default the children are rendered.

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './DefaultErrorInfo';
 export * from './DefaultLayout';
 export * from './DefaultLoader';
 export * from './DefaultRouter';
+export * from './DefaultRouteSwitch';
 export * from './ErrorBoundary';
 export * from './ExtensionSlot';
 export * from './Mediator';

package/src/emulator.ts

@@ -1,10 +1,21 @@
 import { LoadPiletsOptions } from 'piral-base';
-import { withEmulatorPilets } from 'piral-debug-utils';
+import { installPiletEmulator } from 'piral-debug-utils';
 import { GlobalStateContext } from './types';
 
 export function integrateEmulator(context: GlobalStateContext, options: LoadPiletsOptions) {
-  options.fetchPilets = withEmulatorPilets(options.fetchPilets, {
+  installPiletEmulator(options.fetchPilets, {
     addPilet: context.addPilet,
     removePilet: context.removePilet,
+    integrate(emulator) {
+      context.dispatch((s) => ({
+        ...s,
+        components: {
+          ...s.components,
+          ...emulator.components,
+        },
+      }));
+
+      options.fetchPilets = emulator.requester;
+    },
   });
 }

package/src/state/createGlobalState.test.ts

@@ -1,6 +1,12 @@
 import { deref } from '@dbeining/react-atom';
 import { createGlobalState } from './createGlobalState';
-import { DefaultErrorInfo, DefaultLoadingIndicator, DefaultLayout, DefaultRouter } from '../components';
+import {
+  DefaultErrorInfo,
+  DefaultLoadingIndicator,
+  DefaultLayout,
+  DefaultRouter,
+  DefaultRouteSwitch,
+} from '../components';
 
 process.env.PIRAL_PUBLIC_PATH = '/';
 
@@ -22,6 +28,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       routes: {},
       registry: {
@@ -50,6 +57,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       routes: {},
       registry: {
@@ -82,6 +90,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       routes,
       registry: {
@@ -110,6 +119,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       registry: {
         extensions: {},
@@ -140,6 +150,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       registry: {
         extensions: {},
@@ -170,6 +181,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       registry: {
         extensions: {},
@@ -206,6 +218,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       registry: {
         extensions: {},
@@ -241,6 +254,7 @@ describe('Create Global State Module', () => {
         LoadingIndicator: DefaultLoadingIndicator,
         Router: DefaultRouter,
         Layout: DefaultLayout,
+        RouteSwitch: DefaultRouteSwitch,
       },
       registry: {
         extensions: {},

package/src/state/createGlobalState.ts

@@ -1,5 +1,11 @@
 import { Atom } from '@dbeining/react-atom';
-import { DefaultErrorInfo, DefaultLoadingIndicator, DefaultLayout, DefaultRouter } from '../components';
+import {
+  DefaultErrorInfo,
+  DefaultLoadingIndicator,
+  DefaultLayout,
+  DefaultRouter,
+  DefaultRouteSwitch,
+} from '../components';
 import { GlobalState, NestedPartial } from '../types';
 
 function extend<T>(defaultState: T, customState: NestedPartial<T>) {
@@ -29,6 +35,7 @@ export function createGlobalState(customState: NestedPartial<GlobalState> = {})
       ErrorInfo: DefaultErrorInfo,
       LoadingIndicator: DefaultLoadingIndicator,
       Router: DefaultRouter,
+      RouteSwitch: DefaultRouteSwitch,
       Layout: DefaultLayout,
     },
     errorComponents: {},

package/src/types/components.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { RouteComponentProps } from 'react-router';
+import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
 import type { LayoutType } from './layout';
@@ -194,3 +194,26 @@ export interface LayoutProps {
  * The props of a Router component.
  */
 export interface RouterProps {}
+
+/**
+ * The props of the RouteSwitch component.
+ */
+export interface RouteSwitchProps extends SwitchProps {
+  /**
+   * The component that should be used in case nothing was found.
+   */
+  NotFound: ComponentType<RouteComponentProps>;
+  /**
+   * The component to register for the different paths.
+   */
+  paths: Array<{
+    /**
+     * The exact path to use.
+     */
+    path: string;
+    /**
+     * The component to register for this path.
+     */
+    Component: ComponentType<RouteComponentProps>;
+  }>;
+}

package/src/types/state.ts

@@ -28,6 +28,7 @@ import type {
   RouterProps,
   LayoutProps,
   Errors,
+  RouteSwitchProps,
 } from './components';
 
 export interface StateDispatcher<TState> {
@@ -87,6 +88,10 @@ export interface ComponentsState extends PiralCustomComponentsState {
    * The layout used for pages.
    */
   Layout: ComponentType<LayoutProps>;
+  /**
+   * The route switch used for determining the route registration.
+   */
+  RouteSwitch: ComponentType<RouteSwitchProps>;
   /**
    * A component that can be used for debugging purposes.
    */
@@ -207,18 +212,20 @@ export interface PiralActions extends PiralCustomActions {
   /**
    * Injects an evaluated pilet at runtime - removes the pilet from registry first if available.
    * @param pilet The pilet to be injected.
+   * @returns The injected pilet.
    */
-  injectPilet(pilet: Pilet): void;
+  injectPilet(pilet: Pilet): Pilet;
   /**
    * Adds a pilet at runtime by loading it, evaluating it, and then injecting it.
    * @param pilet The pilet to be added.
+   * @returns The promise indicating when the pilet was fully added.
    */
-  addPilet(pilet: PiletEntry): void;
+  addPilet(pilet: PiletEntry): Promise<void>;
   /**
    * Removes a pilet by unloading it and deleting all component registrations.
    * @param name The name of the pilet to remove.
    */
-  removePilet(name: string): void;
+  removePilet(name: string): Promise<void>;
   /**
    * Defines a single action for Piral.
    * @param actionName The name of the action to define.