piral-core 0.15.0-alpha.3549 → 0.15.0-alpha.3592

package/lib/types/state.d.ts

@@ -6,7 +6,7 @@ import type { Dict, Without } from './common';
 import type { LayoutType } from './layout';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type { PiralCustomActions, PiralCustomState, PiralCustomRegistryState, PiralCustomComponentsState } from './custom';
-import type { PiletMetadata, EventEmitter, Pilet, BaseComponentProps, PageComponentProps, ExtensionComponentProps, PiletsBag, PiralPageMeta } from './api';
+import type { EventEmitter, Pilet, BaseComponentProps, PageComponentProps, ExtensionComponentProps, PiletsBag, PiralPageMeta, PiletEntry } from './api';
 import type { ComponentConverters, LoadingIndicatorProps, ErrorInfoProps, RouterProps, LayoutProps, Errors } from './components';
 export interface StateDispatcher<TState> {
     (state: TState): Partial<TState>;
@@ -130,7 +130,7 @@ export interface GlobalState extends PiralCustomState {
     /**
      * Gets the loaded modules.
      */
-    modules: Array<PiletMetadata>;
+    modules: Array<Pilet>;
     /**
      * The foreign component portals to render.
      */
@@ -172,10 +172,20 @@ export interface PiralActions extends PiralCustomActions {
      */
     initialize(loading: boolean, error: Error | undefined, modules: Array<Pilet>): void;
     /**
-     * Injects a pilet at runtime - removes the pilet from registry first if available.
+     * Injects an evaluated pilet at runtime - removes the pilet from registry first if available.
      * @param pilet The pilet to be injected.
      */
     injectPilet(pilet: Pilet): void;
+    /**
+     * Adds a pilet at runtime by loading it, evaluating it, and then injecting it.
+     * @param pilet The pilet to be added.
+     */
+    addPilet(pilet: PiletEntry): 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;
     /**
      * Defines a single action for Piral.
      * @param actionName The name of the action to define.

package/lib/types/utils.d.ts

@@ -55,7 +55,7 @@ export interface PiralStoreDataEvent<TValue = any> {
      */
     expires: number;
 }
-declare module 'piral-base/lib/types' {
+declare module 'piral-base/lib/types/api' {
     interface PiralEventMap extends PiralCustomEventMap {
         'store-data': PiralStoreDataEvent;
     }

package/lib/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { isfunc, requireModule } from 'piral-base';
 export * from './compare';
 export * from './data';
 export * from './extension';

package/lib/utils/index.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireModule = exports.isfunc = void 0;
 const tslib_1 = require("tslib");
+var piral_base_1 = require("piral-base");
+Object.defineProperty(exports, "isfunc", { enumerable: true, get: function () { return piral_base_1.isfunc; } });
+Object.defineProperty(exports, "requireModule", { enumerable: true, get: function () { return piral_base_1.requireModule; } });
 (0, tslib_1.__exportStar)(require("./compare"), exports);
 (0, tslib_1.__exportStar)(require("./data"), exports);
 (0, tslib_1.__exportStar)(require("./extension"), exports);

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,yDAA0B;AAC1B,sDAAuB;AACvB,2DAA4B;AAC5B,yDAA0B;AAC1B,sDAAuB;AACvB,yDAA0B;AAC1B,uDAAwB;AACxB,uDAAwB;AACxB,uDAAwB;AACxB,yDAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;AAAA,yCAAmD;AAA1C,oGAAA,MAAM,OAAA;AAAE,2GAAA,aAAa,OAAA;AAE9B,yDAA0B;AAC1B,sDAAuB;AACvB,2DAA4B;AAC5B,yDAA0B;AAC1B,sDAAuB;AACvB,yDAA0B;AAC1B,uDAAwB;AACxB,uDAAwB;AACxB,uDAAwB;AACxB,yDAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.3549",
+  "version": "0.15.0-alpha.3592",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -22,10 +22,6 @@
     "esm",
     "lib",
     "src",
-    "debug-pilet.d.ts",
-    "debug-piral.d.ts",
-    "debug-pilet.js",
-    "debug-piral.js",
     "dependencies.codegen",
     "dependencies.codegen.native.js"
   ],
@@ -41,8 +37,7 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
-    "build:convert": "tsc debug-pilet.ts debug-piral.ts --skipLibCheck --declaration",
+    "build": "yarn build:commonjs && yarn build:esnext",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-core.json src --exclude \"src/**/*.test.*\"",
@@ -50,8 +45,8 @@
   },
   "dependencies": {
     "@dbeining/react-atom": "^4.0.0",
-    "piral-base": "0.15.0-alpha.3549",
-    "piral-debug-utils": "0.15.0-alpha.3549"
+    "piral-base": "0.15.0-alpha.3592",
+    "piral-debug-utils": "0.15.0-alpha.3592"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -62,10 +57,13 @@
   "devDependencies": {
     "@types/history": "^4.7.8",
     "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0"
   },
   "sharedDependencies": [
     "react",
@@ -78,5 +76,5 @@
     "@libre/atom",
     "@dbeining/react-atom"
   ],
-  "gitHead": "2edf7bbcee6a7e931348198d14139c7f958877e7"
+  "gitHead": "5537ccd39d275afdc53845ab8cb4868a8dbc8903"
 }

package/src/actions/app.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
+import { runPilet } from 'piral-base';
 import { withKey, replaceOrAddItem, removeNested, withProvider, withRoute } from '../utils';
 import {
   LayoutType,
@@ -9,6 +10,7 @@ import {
   RegistryState,
   GlobalStateContext,
   Pilet,
+  PiletEntry,
 } from '../types';
 
 export function changeLayout(ctx: GlobalStateContext, current: LayoutType) {
@@ -30,6 +32,29 @@ 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 removePilet(ctx: GlobalStateContext, name: string) {
+  ctx.dispatch((state) => ({
+    ...state,
+    modules: state.modules.filter((m) => m.name !== name),
+    registry: removeNested<RegistryState, BaseRegistration>(state.registry, (m) => m.pilet === name),
+  }));
+
+  ctx.emit('unload-pilet', {
+    name,
+  });
+}
+
 export function injectPilet(ctx: GlobalStateContext, pilet: Pilet) {
   ctx.dispatch((state) => ({
     ...state,

package/src/components/ErrorBoundary.tsx

@@ -1,42 +1,18 @@
 import * as React from 'react';
-import { isfunc } from 'piral-base';
+import { PiralError, PiralLoadingIndicator } from './components';
+import { Errors, PiletApi } from '../types';
 
-/**
- * The options to be used for determining the boundary's behavior.
- */
-export interface ErrorBoundaryOptions<T> {
-  /**
-   * Callback to be used in case of an emitted error.
-   * @param error The error caught by the boundary.
-   */
-  onError(error: Error): void;
+export interface ErrorBoundaryProps {
   /**
-   * Callback to be used when an error should be rendered.
-   * @param error The error caught by the boundary.
-   * @param props The props used by the boundary.
+   * The type of error to indicate when caught.
    */
-  renderError?(error: Error, props: T): React.ReactNode;
-  /**
-   * Callback to used when no error should be rendered.
-   * @param children The standard children to render.
-   * @param props The props used by the boundary.
-   */
-  renderChild(children: React.ReactNode, props: T): React.ReactNode;
-}
-
-/**
- * The props of the ErrorBoundary component.
- */
-export interface ErrorBoundaryProps<T> extends ErrorBoundaryOptions<T> {
+  errorType: keyof Errors;
   /**
-   * The render props for the specific ErrorBoundary.
+   * The associated pilet api for the metadata.
    */
-  renderProps: T;
+  piral: PiletApi;
 }
 
-/**
- * The state of the ErrorBoundary component.
- */
 export interface ErrorBoundaryState {
   /**
    * The current error (if any) caught by the boundary.
@@ -45,22 +21,17 @@ export interface ErrorBoundaryState {
 }
 
 /**
- * The React component for catching errors and displaying error information.
+ * The component for catching errors and displaying error information.
  */
-export class ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps<T>) {
-    super(props);
-    this.state = {
-      error: undefined,
-    };
-  }
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state = {
+    error: undefined,
+  };
 
   componentDidCatch(error: Error) {
-    const { onError } = this.props;
-
-    if (isfunc(onError)) {
-      onError(error);
-    }
+    const { piral, errorType } = this.props;
+    const pilet = piral.meta.name;
+    console.error(`[${pilet}] Exception in component of type "${errorType}".`, error);
 
     this.setState({
       error,
@@ -68,17 +39,14 @@ export class ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, Err
   }
 
   render() {
-    const { children, renderError, renderChild, renderProps } = this.props;
+    const { children, piral, errorType, ...renderProps } = this.props;
     const { error } = this.state;
+    const rest: any = renderProps;
 
     if (error) {
-      if (isfunc(renderError)) {
-        return renderError(error, renderProps);
-      }
-
-      return <div style={{ whiteSpace: 'pre-wrap' }}>{error && error.message}</div>;
+      return <PiralError type={errorType} error={error} {...rest} />;
     }
 
-    return isfunc(renderChild) ? renderChild(children, renderProps) : children;
+    return <React.Suspense fallback={<PiralLoadingIndicator />}>{children}</React.Suspense>;
   }
 }

package/src/createInstance.tsx

@@ -51,7 +51,11 @@ export function createInstance(config: PiralInstanceOptions = {}): PiralInstance
   const root = createApi({
     name: 'root',
     version: process.env.BUILD_PCKG_VERSION || '1.0.0',
-    spec: '',
+    spec: 'v0',
+    basePath: '',
+    link: '',
+    config: {},
+    dependencies: {},
   });
   const options = createPiletOptions({
     context,

package/src/debugger.ts

@@ -0,0 +1,82 @@
+import { addChangeHandler } from '@dbeining/react-atom';
+import { LoadPiletsOptions } from 'piral-base';
+import { installPiralDebug, DebuggerExtensionOptions } from 'piral-debug-utils';
+import { GlobalStateContext } from './types';
+
+export function integrate(
+  context: GlobalStateContext,
+  options: LoadPiletsOptions,
+  debug: DebuggerExtensionOptions = {},
+) {
+  installPiralDebug({
+    ...debug,
+    addPilet: context.addPilet,
+    removePilet: context.removePilet,
+    updatePilet(pilet) {
+      if (!pilet.disabled) {
+        const { createApi } = options;
+        const newApi = createApi(pilet);
+
+        try {
+          context.injectPilet(pilet);
+          pilet.setup(newApi);
+        } catch (error) {
+          console.error(error);
+        }
+      } else {
+        context.injectPilet(pilet);
+      }
+    },
+    fireEvent: context.emit,
+    getDependencies() {
+      return Object.keys(options.dependencies);
+    },
+    getExtensions() {
+      return context.readState((s) => Object.keys(s.registry.extensions));
+    },
+    getRoutes() {
+      const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages));
+      const componentRoutes = context.readState((state) => Object.keys(state.routes));
+      return [...componentRoutes, ...registeredRoutes];
+    },
+    getGlobalState() {
+      return context.readState((s) => s);
+    },
+    getPilets() {
+      return context.readState((s) => s.modules);
+    },
+    integrate(dbg) {
+      context.dispatch((s) => ({
+        ...s,
+        components: {
+          ...s.components,
+          ...dbg.components,
+        },
+        routes: {
+          ...s.routes,
+          ...dbg.routes,
+        },
+        registry: {
+          ...s.registry,
+          wrappers: {
+            ...s.registry.wrappers,
+            ...dbg.wrappers,
+          },
+        },
+      }));
+
+      addChangeHandler(context.state, 'debugging', ({ previous, current }) => {
+        const pilets = current.modules !== previous.modules;
+        const pages = current.registry.pages !== previous.registry.pages || current.routes !== previous.routes;
+        const extensions = current.registry.extensions !== previous.registry.extensions;
+        const state = current !== previous;
+        dbg.onChange(previous, current, {
+          pilets,
+          pages,
+          extensions,
+          state,
+        });
+      });
+    },
+  });
+}

package/src/emulator.ts

@@ -0,0 +1,10 @@
+import { LoadPiletsOptions } from 'piral-base';
+import { withEmulatorPilets } from 'piral-debug-utils';
+import { GlobalStateContext } from './types';
+
+export function integrate(context: GlobalStateContext, options: LoadPiletsOptions) {
+  options.fetchPilets = withEmulatorPilets(options.fetchPilets, {
+    addPilet: context.addPilet,
+    removePilet: context.removePilet,
+  });
+}

package/src/helpers.tsx

@@ -52,13 +52,13 @@ export function createPiletOptions({
 
   // if we build the debug version of piral (debug and emulator build)
   if (process.env.DEBUG_PIRAL) {
-    const { integrate } = require('../debug-piral');
+    const { integrate } = require('./debugger');
     integrate(context, options, debug);
   }
 
   // if we build the emulator version of piral (shipped to pilets)
   if (process.env.DEBUG_PILET) {
-    const { integrate } = require('../debug-pilet');
+    const { integrate } = require('./emulator');
     integrate(context, options);
   }
 

package/src/modules/core.ts

@@ -17,28 +17,30 @@ export function createCoreApi(context: GlobalStateContext): PiletApiExtender<Pil
         const expiration = getDataExpiration(expires);
         return context.tryWriteDataItem(name, value, pilet, target, expiration);
       },
-      registerPage(route, arg, meta) {
+      registerPage(route, arg, meta = {}) {
+        const component = withApi(context, arg, api, 'page', undefined, { meta });
         context.registerPage(route, {
           pilet,
           meta,
-          component: withApi(context, arg, api, 'page'),
+          component,
         });
         return () => api.unregisterPage(route);
       },
       unregisterPage(route) {
         context.unregisterPage(route);
       },
-      registerExtension(name, arg, defaults) {
-        context.registerExtension(name as string, {
+      registerExtension(name, reference, defaults) {
+        const component = withApi(context, reference, api, 'extension');
+        context.registerExtension(name, {
           pilet,
-          component: withApi(context, arg, api, 'extension'),
-          reference: arg,
+          component,
+          reference,
           defaults,
         });
-        return () => api.unregisterExtension(name, arg);
+        return () => api.unregisterExtension(name, reference);
       },
       unregisterExtension(name, arg) {
-        context.unregisterExtension(name as string, arg);
+        context.unregisterExtension(name, arg);
       },
       renderHtmlExtension(element, props) {
         const [dispose] = renderElement(context, element, props);

package/src/modules/dependencies.ts

@@ -1,5 +1,6 @@
-import { PiletMetadata, AvailableDependencies, isfunc } from 'piral-base';
+import { isfunc } from 'piral-base';
 import { __assign } from 'tslib';
+import type { AvailableDependencies, PiletEntries } from '../types';
 
 /**
  * The global dependencies, which represent the dependencies
@@ -49,6 +50,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/state/withApi.test.tsx

@@ -58,7 +58,11 @@ StubComponent.displayName = 'StubComponent';
 
 describe('withApi Module', () => {
   it('wraps a component and forwards the API as piral', () => {
-    const api: any = {};
+    const api: any = {
+      meta: {
+        name: 'foo',
+      },
+    };
     const { context } = createMockContainer();
     const Component = withApi(context, StubComponent, api, 'feed' as any);
     const node = mount(<Component />);
@@ -67,7 +71,11 @@ describe('withApi Module', () => {
 
   it('is protected against a component crash', () => {
     console.error = jest.fn();
-    const api: any = {};
+    const api: any = {
+      meta: {
+        name: 'foo',
+      },
+    };
     const { context } = createMockContainer();
     const Component = withApi(context, StubComponent, api, 'feed' as any);
     const node = mount(<Component shouldCrash />);
@@ -88,7 +96,11 @@ describe('withApi Module', () => {
   });
 
   it('Wraps component of type object', () => {
-    const api: any = {};
+    const api: any = {
+      meta: {
+        name: 'foo',
+      },
+    };
     const { context } = createMockContainer();
     context.converters = {
       html: (component) => {
@@ -107,7 +119,11 @@ describe('withApi Module', () => {
   });
 
   it('Wraps component which is object == null.', () => {
-    const api: any = {};
+    const api: any = {
+      meta: {
+        name: 'foo',
+      },
+    };
     const { context } = createMockContainer();
     context.converters = {
       html: (component) => {

package/src/state/withApi.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
 import { __RouterContext } from 'react-router';
-import { PiralError, PiralLoadingIndicator, ErrorBoundary, ErrorBoundaryOptions, PortalRenderer } from '../components';
+import { ErrorBoundary, PortalRenderer } from '../components';
 import { useGlobalStateContext } from '../hooks';
 import { defaultRender, convertComponent, none } from '../utils';
 import {
@@ -20,6 +20,10 @@ let portalIdBase = 123456;
 
 const DefaultWrapper: React.FC = (props) => defaultRender(props.children);
 
+interface CapturedProps {
+  piral: PiletApi;
+}
+
 interface ForeignComponentContainerProps<T> {
   $portalId: string;
   $component: ForeignComponent<T>;
@@ -87,40 +91,34 @@ class ForeignComponentContainer<T> extends React.Component<ForeignComponentConta
 
 function wrapReactComponent<T>(
   Component: React.ComponentType<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
+  captured: CapturedProps,
+  Wrapper: React.FC<T>,
 ): React.ComponentType<T> {
   return (props: T) => (
-    <Wrapper {...props} piral={piral}>
-      <ErrorBoundary {...stasisOptions} renderProps={props}>
-        <Component {...props} piral={piral} />
-      </ErrorBoundary>
+    <Wrapper {...props}>
+      <Component {...props} {...captured} />
     </Wrapper>
   );
 }
 
 function wrapForeignComponent<T>(
   component: ForeignComponent<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
+  captured: CapturedProps,
+  Wrapper: React.FC<T>,
 ) {
   return React.memo((props: T) => {
     const { state, readState, destroyPortal } = useGlobalStateContext();
     const router = React.useContext(__RouterContext);
     const id = React.useMemo(() => (portalIdBase++).toString(26), none);
     const context = React.useMemo(() => ({ router, state, readState }), [router, state]);
-    const innerProps = React.useMemo(() => ({ ...props, piral }), [props]);
+    const innerProps = React.useMemo(() => ({ ...props, ...captured }), [props]);
 
     React.useEffect(() => () => destroyPortal(id), none);
 
     return (
-      <Wrapper {...innerProps}>
-        <ErrorBoundary {...stasisOptions} renderProps={props}>
-          <PortalRenderer id={id} />
-          <ForeignComponentContainer innerProps={innerProps} $portalId={id} $component={component} $context={context} />
-        </ErrorBoundary>
+      <Wrapper {...props}>
+        <PortalRenderer id={id} />
+        <ForeignComponentContainer innerProps={innerProps} $portalId={id} $component={component} $context={context} />
       </Wrapper>
     );
   });
@@ -133,26 +131,30 @@ function isNotExotic(component: any): component is object {
 function wrapComponent<T>(
   converters: ComponentConverters<T & BaseComponentProps>,
   component: AnyComponent<T & BaseComponentProps>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-  stasisOptions: ErrorBoundaryOptions<T>,
+  captured: CapturedProps,
+  Wrapper: React.FC<T>,
 ) {
-  if (!component) {
-    console.error('The given value is not a valid component.');
-    // tslint:disable-next-line:no-null-keyword
-    component = () => null;
-  }
-
   if (typeof component === 'object' && isNotExotic(component)) {
     const result = convertComponent(converters[component.type], component);
-    return wrapForeignComponent<T>(result, stasisOptions, piral, Wrapper);
+    return wrapForeignComponent<T>(result, captured, Wrapper);
   }
 
-  return wrapReactComponent<T>(component, stasisOptions, piral, Wrapper);
+  return wrapReactComponent<T>(component, captured, Wrapper);
 }
 
 function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
-  return wrappers[wrapperType] || wrappers['*'] || DefaultWrapper;
+  const WrapAll = wrappers['*'];
+  const WrapType = wrappers[wrapperType];
+
+  if (WrapAll && WrapType) {
+    return (props) => (
+      <WrapAll {...props}>
+        <WrapType {...props} />
+      </WrapAll>
+    );
+  }
+
+  return WrapType || WrapAll || DefaultWrapper;
 }
 
 export function withApi<TProps>(
@@ -161,19 +163,26 @@ export function withApi<TProps>(
   piral: PiletApi,
   errorType: keyof Errors,
   wrapperType: string = errorType,
+  captured = {},
 ) {
+  const outerProps = { ...captured, piral };
   const converters = context.converters;
-  const Wrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
-
-  return wrapComponent<TProps>(converters, component, piral, Wrapper, {
-    onError(error) {
-      console.error(piral, error);
-    },
-    renderChild(child) {
-      return <React.Suspense fallback={<PiralLoadingIndicator />}>{child}</React.Suspense>;
-    },
-    renderError(error, props: any) {
-      return <PiralError type={errorType} error={error} {...props} />;
-    },
-  });
+  const OuterWrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
+
+  const Wrapper: React.FC<TProps> = (props) => (
+    <OuterWrapper {...outerProps} {...props}>
+      <ErrorBoundary {...outerProps} {...props} errorType={errorType}>
+        {props.children}
+      </ErrorBoundary>
+    </OuterWrapper>
+  );
+
+  if (!component) {
+    const pilet = piral.meta.name;
+    console.error(`[${pilet}] The given value is not a valid component.`);
+    // tslint:disable-next-line:no-null-keyword
+    component = () => null;
+  }
+
+  return wrapComponent<TProps>(converters, component, outerProps, Wrapper);
 }