piral-core 0.15.0-alpha.3589 → 0.15.0-alpha.3711

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":";;;AAAA,+BAA+B;AAE/B,8CAA6D;AAC7D,oCAAyC;AAGzC,MAAM,cAAc,GAAa,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,qBAAa,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAE1E,SAAS,UAAU,CAAC,QAAkD,EAAE,WAAmB;IACzF,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEvC,IAAI,OAAO,IAAI,QAAQ,EAAE;QACvB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAChB,oBAAC,OAAO,oBAAK,KAAK;YAChB,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CACf,CACX,CAAC;KACH;IAED,OAAO,QAAQ,IAAI,OAAO,IAAI,cAAc,CAAC;AAC/C,CAAC;AAED,SAAS,WAAW,CAClB,OAA2B,EAC3B,UAAe,EACf,WAAmB,EACnB,SAAuB;IAEvB,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5F,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAChB,oBAAC,YAAY,oBAAK,UAAU,EAAM,KAAK;QACrC,oBAAC,0BAAa,oBAAK,UAAU,EAAM,KAAK,IAAE,SAAS,EAAE,SAAS,KAC3D,KAAK,CAAC,QAAQ,CACD,CACH,CAChB,CAAC;AACJ,CAAC;AAED,SAAgB,OAAO,CACrB,OAA2B,EAC3B,SAAoD,EACpD,KAAe,EACf,SAAuB,EACvB,cAAsB,SAAS,EAC/B,QAAQ,GAAG,EAAE;IAEb,MAAM,UAAU,mCAAQ,QAAQ,KAAE,KAAK,GAAE,CAAC;IAC1C,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IACtC,MAAM,OAAO,GAAG,WAAW,CAAS,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IACjF,OAAO,IAAA,0BAAa,EAAC,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;AACnE,CAAC;AAZD,0BAYC"}

package/lib/types/api.d.ts

@@ -3,7 +3,7 @@ import type { RouteComponentProps } from 'react-router';
 import type { PiletApi, Pilet, PiletEntry, PiletEntries, PiletMetadata, EventEmitter, PiletLoader, PiletLoadingStrategy } from 'piral-base';
 import type { PiletCustomApi, PiralCustomPageMeta } from './custom';
 import type { AnyComponent } from './components';
-import type { ExtensionSlotProps, PiralExtensionSlotMap } from './extension';
+import type { ExtensionParams, ExtensionSlotProps, PiralExtensionSlotMap } from './extension';
 import type { SharedData, DataStoreOptions } from './data';
 import type { Disposable } from './utils';
 export { PiletApi, Pilet, PiletMetadata, EventEmitter, PiletEntry, PiletEntries, PiletLoader, PiletLoadingStrategy };
@@ -93,7 +93,7 @@ export interface PiletCoreApi {
      * @param Component The component to be rendered.
      * @param defaults Optionally, sets the default values for the expected data.
      */
-    registerExtension<TName>(name: TName extends string ? TName : string, Component: AnyComponent<ExtensionComponentProps<TName>>, defaults?: TName): RegistrationDisposer;
+    registerExtension<TName>(name: TName extends string ? TName : string, Component: AnyComponent<ExtensionComponentProps<TName>>, defaults?: Partial<ExtensionParams<TName>>): RegistrationDisposer;
     /**
      * Unregisters a global extension component.
      * Only previously registered extension components can be unregistered.

package/lib/types/components.d.ts

@@ -81,6 +81,10 @@ export interface PageErrorInfoProps extends RouteComponentProps {
      * The provided error details.
      */
     error: any;
+    /**
+     * The name of the pilet emitting the error.
+     */
+    pilet?: string;
 }
 /**
  * The error used when the app could not be loaded.
@@ -107,6 +111,10 @@ export interface ExtensionErrorInfoProps {
      * The provided error details.
      */
     error: any;
+    /**
+     * The name of the pilet emitting the error.
+     */
+    pilet?: string;
 }
 /**
  * The error used when the exact type is unknown.
@@ -120,6 +128,10 @@ export interface UnknownErrorInfoProps {
      * The provided error details.
      */
     error: any;
+    /**
+     * The name of the pilet emitting the error.
+     */
+    pilet?: string;
 }
 /**
  * Map of all error types to their respective props.

package/lib/types/extension.d.ts

@@ -32,7 +32,11 @@ export interface BaseExtensionSlotProps<TName, TParams> {
      */
     name: TName;
 }
+/**
+ * Gives the extension params shape for the given extension slot name.
+ */
+export declare type ExtensionParams<TName> = TName extends keyof PiralExtensionSlotMap ? PiralExtensionSlotMap[TName] : TName extends string ? any : TName;
 /**
  * The props for defining an extension slot.
  */
-export declare type ExtensionSlotProps<K = string> = BaseExtensionSlotProps<K extends string ? K : string, K extends keyof PiralExtensionSlotMap ? PiralExtensionSlotMap[K] : K extends string ? any : K>;
+export declare type ExtensionSlotProps<TName = string> = BaseExtensionSlotProps<TName extends string ? TName : string, ExtensionParams<TName>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.3589",
+  "version": "0.15.0-alpha.3711",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -22,8 +22,10 @@
     "esm",
     "lib",
     "src",
+    "debug.codegen",
+    "debug.codegen.*",
     "dependencies.codegen",
-    "dependencies.codegen.native.js"
+    "dependencies.codegen.*"
   ],
   "funding": {
     "type": "github",
@@ -37,6 +39,7 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
+    "cleanup": "rimraf esm lib",
     "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",
@@ -45,8 +48,8 @@
   },
   "dependencies": {
     "@dbeining/react-atom": "^4.0.0",
-    "piral-base": "0.15.0-alpha.3589",
-    "piral-debug-utils": "0.15.0-alpha.3589"
+    "piral-base": "0.15.0-alpha.3711",
+    "piral-debug-utils": "0.15.0-alpha.3711"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -76,5 +79,5 @@
     "@libre/atom",
     "@dbeining/react-atom"
   ],
-  "gitHead": "3de80e7857d8f95c5f7c6944dfad56d4a5e21f8d"
+  "gitHead": "2ef676e46e2fb402edeceeb3b4f1a1aa04c99970"
 }

package/src/RootListener.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGlobalStateContext } from '.';
+import { useGlobalStateContext } from './hooks';
 import { renderElement } from './modules';
 
 export const RootListener: React.FC = () => {

package/src/components/ErrorBoundary.tsx

@@ -44,7 +44,8 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     const rest: any = renderProps;
 
     if (error) {
-      return <PiralError type={errorType} error={error} {...rest} />;
+      const pilet = piral.meta.name;
+      return <PiralError type={errorType} error={error} pilet={pilet} {...rest} />;
     }
 
     return <React.Suspense fallback={<PiralLoadingIndicator />}>{children}</React.Suspense>;

package/src/components/ExtensionSlot.tsx

@@ -1,8 +1,30 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
-import { useGlobalState } from '../hooks';
+import { wrapComponent } from './wrapComponent';
+import { useGlobalState, useGlobalStateContext } from '../hooks';
 import { defaultRender, none } from '../utils';
-import { ExtensionSlotProps } from '../types';
+import { ExtensionRegistration, ExtensionSlotProps } from '../types';
+
+const renderExtensions: [ExtensionRegistration] = [
+  {
+    component: (props) => {
+      const context = useGlobalStateContext();
+      const converters = context.converters;
+      const piral = context.apis._;
+      const { component, props: args } = props.params;
+      const Component = React.useMemo(
+        () => wrapComponent(converters, component, { piral }, defaultRender),
+        [component],
+      );
+      return <Component {...args} />;
+    },
+    defaults: {},
+    pilet: '',
+    reference: {
+      displayName: 'RenderExtension',
+    },
+  },
+];
 
 /**
  * The extension slot component to be used when the available
@@ -11,7 +33,7 @@ import { ExtensionSlotProps } from '../types';
  */
 export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
   const { name, render = defaultRender, empty, params, children } = props;
-  const extensions = useGlobalState((s) => s.registry.extensions[name] || none);
+  const extensions = useGlobalState((s) => (name ? s.registry.extensions[name] || none : renderExtensions));
   return render(
     extensions.length === 0 && isfunc(empty)
       ? [defaultRender(empty(), 'empty')]

package/src/components/ForeignComponentContainer.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { isfunc } from 'piral-base';
+import { __RouterContext } from 'react-router';
+import { ForeignComponent, BaseComponentProps, ComponentContext } from '../types';
+
+interface ForeignComponentContainerProps<T> {
+  $portalId: string;
+  $component: ForeignComponent<T>;
+  $context: ComponentContext;
+  innerProps: T & BaseComponentProps;
+}
+
+export class ForeignComponentContainer<T> extends React.Component<ForeignComponentContainerProps<T>> {
+  private current?: HTMLElement;
+  private previous?: HTMLElement;
+  private handler = (ev: CustomEvent) => {
+    const { innerProps } = this.props;
+    ev.stopPropagation();
+    innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+  };
+
+  private setNode = (node: HTMLDivElement) => {
+    this.current = node;
+  };
+
+  componentDidMount() {
+    const node = this.current;
+    const { $component, $context, innerProps } = this.props;
+    const { mount } = $component;
+
+    if (node && isfunc(mount)) {
+      mount(node, innerProps, $context);
+      node.addEventListener('render-html', this.handler, false);
+    }
+
+    this.previous = node;
+  }
+
+  componentDidUpdate() {
+    const { current, previous } = this;
+    const { $component, $context, innerProps } = this.props;
+    const { update } = $component;
+
+    if (current !== previous) {
+      previous && this.componentWillUnmount();
+      current && this.componentDidMount();
+    } else if (isfunc(update)) {
+      update(current, innerProps, $context);
+    }
+  }
+
+  componentWillUnmount() {
+    const node = this.previous;
+    const { $component } = this.props;
+    const { unmount } = $component;
+
+    if (node && isfunc(unmount)) {
+      unmount(node);
+      node.removeEventListener('render-html', this.handler, false);
+    }
+
+    this.previous = undefined;
+  }
+
+  render() {
+    const { $portalId } = this.props;
+    return <div data-portal-id={$portalId} ref={this.setNode} />;
+  }
+}

package/src/components/index.ts

@@ -18,3 +18,4 @@ export * from './SetProvider';
 export * from './SetRedirect';
 export * from './SetRoute';
 export * from './SwitchErrorInfo';
+export * from './wrapComponent';

package/src/components/wrapComponent.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { __RouterContext } from 'react-router';
+import { PortalRenderer } from './PortalRenderer';
+import { ForeignComponentContainer } from './ForeignComponentContainer';
+import { useGlobalStateContext } from '../hooks';
+import { convertComponent, none } from '../utils';
+import { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
+
+// this is an arbitrary start number to have 6 digits
+let portalIdBase = 123456;
+
+interface CapturedProps {
+  piral: PiletApi;
+}
+
+function wrapReactComponent<T>(
+  Component: React.ComponentType<T & BaseComponentProps>,
+  captured: CapturedProps,
+  Wrapper: React.FC<T>,
+): React.ComponentType<T> {
+  return (props: T) => (
+    <Wrapper {...props}>
+      <Component {...props} {...captured} />
+    </Wrapper>
+  );
+}
+
+function wrapForeignComponent<T>(
+  component: ForeignComponent<T & BaseComponentProps>,
+  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, ...captured }), [props]);
+
+    React.useEffect(() => () => destroyPortal(id), none);
+
+    return (
+      <Wrapper {...props}>
+        <PortalRenderer id={id} />
+        <ForeignComponentContainer innerProps={innerProps} $portalId={id} $component={component} $context={context} />
+      </Wrapper>
+    );
+  });
+}
+
+function isNotExotic(component: any): component is object {
+  return !(component as React.ExoticComponent).$$typeof;
+}
+
+export function wrapComponent<T>(
+  converters: ComponentConverters<T & BaseComponentProps>,
+  component: AnyComponent<T & BaseComponentProps>,
+  captured: CapturedProps,
+  Wrapper: React.FC<T>,
+) {
+  if (!component) {
+    const pilet = captured.piral.meta.name;
+    console.error(`[${pilet}] 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, captured, Wrapper);
+  }
+
+  return wrapReactComponent<T>(component, captured, Wrapper);
+}

package/src/createInstance.tsx

@@ -49,7 +49,7 @@ export function createInstance(config: PiralInstanceOptions = {}): PiralInstance
   const usedPlugins = Array.isArray(definedPlugins) ? definedPlugins : [definedPlugins];
   const createApi = apiFactory(context, usedPlugins);
   const root = createApi({
-    name: 'root',
+    name: '_',
     version: process.env.BUILD_PCKG_VERSION || '1.0.0',
     spec: 'v0',
     basePath: '',

package/src/debugger.ts

@@ -3,7 +3,7 @@ import { LoadPiletsOptions } from 'piral-base';
 import { installPiralDebug, DebuggerExtensionOptions } from 'piral-debug-utils';
 import { GlobalStateContext } from './types';
 
-export function integrate(
+export function integrateDebugger(
   context: GlobalStateContext,
   options: LoadPiletsOptions,
   debug: DebuggerExtensionOptions = {},

package/src/emulator.ts

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

package/src/helpers.tsx

@@ -8,9 +8,10 @@ import {
   PiletLoader,
   PiletLifecycleHooks,
 } from 'piral-base';
-import { DebuggerExtensionOptions } from 'piral-debug-utils';
+import type { DebuggerExtensionOptions } from 'piral-debug-utils';
 import { globalDependencies } from './modules';
 import type { Pilet, PiletRequester, GlobalStateContext, PiletLoadingStrategy, DependencySelector } from './types';
+import { integrateDebugger, integrateEmulator } from '../debug.codegen';
 
 export interface PiletOptionsConfig {
   context: GlobalStateContext;
@@ -50,17 +51,8 @@ export function createPiletOptions({
     dependencies: shareDependencies(globalDependencies),
   };
 
-  // if we build the debug version of piral (debug and emulator build)
-  if (process.env.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('./emulator');
-    integrate(context, options);
-  }
+  integrateDebugger(context, options, debug);
+  integrateEmulator(context, options, debug);
 
   return options;
 }

package/src/modules/dependencies.ts

@@ -1,6 +1,6 @@
 import { isfunc } from 'piral-base';
-import { __assign } from 'tslib';
 import type { AvailableDependencies, PiletEntries } from '../types';
+import fillDependencies from '../../dependencies.codegen';
 
 /**
  * The global dependencies, which represent the dependencies
@@ -8,27 +8,8 @@ import type { AvailableDependencies, PiletEntries } from '../types';
  */
 export const globalDependencies: AvailableDependencies = {};
 
-if (process.env.SHARED_DEPENDENCIES) {
-  const fillDependencies = require('../../dependencies.codegen');
-
-  if (isfunc(fillDependencies)) {
-    fillDependencies(globalDependencies);
-  } else {
-    // fall back to the default list if the codegen is invalid / not supported
-    __assign(globalDependencies, {
-      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'),
-    });
-  }
-} else {
-  // App shell is built with something else than the Piral CLI - just don't fill ...
+if (isfunc(fillDependencies)) {
+  fillDependencies(globalDependencies);
 }
 
 /**

package/src/state/withApi.tsx

@@ -1,147 +1,11 @@
 import * as React from 'react';
-import { isfunc } from 'piral-base';
 import { __RouterContext } from 'react-router';
-import { ErrorBoundary, PortalRenderer } from '../components';
-import { useGlobalStateContext } from '../hooks';
-import { defaultRender, convertComponent, none } from '../utils';
-import {
-  AnyComponent,
-  Errors,
-  ComponentConverters,
-  ForeignComponent,
-  PiletApi,
-  BaseComponentProps,
-  ComponentContext,
-  GlobalStateContext,
-} from '../types';
-
-// this is an arbitrary start number to have 6 digits
-let portalIdBase = 123456;
+import { ErrorBoundary, wrapComponent } from '../components';
+import { defaultRender } from '../utils';
+import { AnyComponent, Errors, PiletApi, BaseComponentProps, GlobalStateContext } from '../types';
 
 const DefaultWrapper: React.FC = (props) => defaultRender(props.children);
 
-interface CapturedProps {
-  piral: PiletApi;
-}
-
-interface ForeignComponentContainerProps<T> {
-  $portalId: string;
-  $component: ForeignComponent<T>;
-  $context: ComponentContext;
-  innerProps: T & BaseComponentProps;
-}
-
-class ForeignComponentContainer<T> extends React.Component<ForeignComponentContainerProps<T>> {
-  private current?: HTMLElement;
-  private previous?: HTMLElement;
-  private handler = (ev: CustomEvent) => {
-    const { innerProps } = this.props;
-    ev.stopPropagation();
-    innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-  };
-
-  private setNode = (node: HTMLDivElement) => {
-    this.current = node;
-  };
-
-  componentDidMount() {
-    const node = this.current;
-    const { $component, $context, innerProps } = this.props;
-    const { mount } = $component;
-
-    if (node && isfunc(mount)) {
-      mount(node, innerProps, $context);
-      node.addEventListener('render-html', this.handler, false);
-    }
-
-    this.previous = node;
-  }
-
-  componentDidUpdate() {
-    const { current, previous } = this;
-    const { $component, $context, innerProps } = this.props;
-    const { update } = $component;
-
-    if (current !== previous) {
-      previous && this.componentWillUnmount();
-      current && this.componentDidMount();
-    } else if (isfunc(update)) {
-      update(current, innerProps, $context);
-    }
-  }
-
-  componentWillUnmount() {
-    const node = this.previous;
-    const { $component } = this.props;
-    const { unmount } = $component;
-
-    if (node && isfunc(unmount)) {
-      unmount(node);
-      node.removeEventListener('render-html', this.handler, false);
-    }
-
-    this.previous = undefined;
-  }
-
-  render() {
-    const { $portalId } = this.props;
-    return <div data-portal-id={$portalId} ref={this.setNode} />;
-  }
-}
-
-function wrapReactComponent<T>(
-  Component: React.ComponentType<T & BaseComponentProps>,
-  captured: CapturedProps,
-  Wrapper: React.FC<T>,
-): React.ComponentType<T> {
-  return (props: T) => (
-    <Wrapper {...props}>
-      <Component {...props} {...captured} />
-    </Wrapper>
-  );
-}
-
-function wrapForeignComponent<T>(
-  component: ForeignComponent<T & BaseComponentProps>,
-  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, ...captured }), [props]);
-
-    React.useEffect(() => () => destroyPortal(id), none);
-
-    return (
-      <Wrapper {...props}>
-        <PortalRenderer id={id} />
-        <ForeignComponentContainer innerProps={innerProps} $portalId={id} $component={component} $context={context} />
-      </Wrapper>
-    );
-  });
-}
-
-function isNotExotic(component: any): component is object {
-  return !(component as React.ExoticComponent).$$typeof;
-}
-
-function wrapComponent<T>(
-  converters: ComponentConverters<T & BaseComponentProps>,
-  component: AnyComponent<T & BaseComponentProps>,
-  captured: CapturedProps,
-  Wrapper: React.FC<T>,
-) {
-  if (typeof component === 'object' && isNotExotic(component)) {
-    const result = convertComponent(converters[component.type], component);
-    return wrapForeignComponent<T>(result, captured, Wrapper);
-  }
-
-  return wrapReactComponent<T>(component, captured, Wrapper);
-}
-
 function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
   const WrapAll = wrappers['*'];
   const WrapType = wrappers[wrapperType];
@@ -157,32 +21,33 @@ function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperT
   return WrapType || WrapAll || DefaultWrapper;
 }
 
-export function withApi<TProps>(
+function makeWrapper<TProps>(
   context: GlobalStateContext,
-  component: AnyComponent<TProps & BaseComponentProps>,
-  piral: PiletApi,
+  outerProps: any,
+  wrapperType: string,
   errorType: keyof Errors,
-  wrapperType: string = errorType,
-  captured = {},
-) {
-  const outerProps = { ...captured, piral };
-  const converters = context.converters;
+): React.FC<TProps> {
   const OuterWrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
 
-  const Wrapper: React.FC<TProps> = (props) => (
+  return (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);
+export function withApi<TProps>(
+  context: GlobalStateContext,
+  component: AnyComponent<TProps & BaseComponentProps>,
+  piral: PiletApi,
+  errorType: keyof Errors,
+  wrapperType: string = errorType,
+  captured = {},
+) {
+  const outerProps = { ...captured, piral };
+  const converters = context.converters;
+  const Wrapper = makeWrapper<TProps>(context, outerProps, wrapperType, errorType);
+  return wrapComponent(converters, component, outerProps, Wrapper);
 }

package/src/types/api.ts

@@ -12,7 +12,7 @@ import type {
 } from 'piral-base';
 import type { PiletCustomApi, PiralCustomPageMeta } from './custom';
 import type { AnyComponent } from './components';
-import type { ExtensionSlotProps, PiralExtensionSlotMap } from './extension';
+import type { ExtensionParams, ExtensionSlotProps, PiralExtensionSlotMap } from './extension';
 import type { SharedData, DataStoreOptions } from './data';
 import type { Disposable } from './utils';
 
@@ -113,7 +113,7 @@ export interface PiletCoreApi {
   registerExtension<TName>(
     name: TName extends string ? TName : string,
     Component: AnyComponent<ExtensionComponentProps<TName>>,
-    defaults?: TName,
+    defaults?: Partial<ExtensionParams<TName>>,
   ): RegistrationDisposer;
   /**
    * Unregisters a global extension component.