piral-core 0.14.8 → 0.14.10-beta.3615

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/modules/core.ts

@@ -17,11 +17,12 @@ 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);
       },

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,179 +1,53 @@
 import * as React from 'react';
-import { isfunc } from 'piral-base';
 import { __RouterContext } from 'react-router';
-import { PiralError, PiralLoadingIndicator, ErrorBoundary, ErrorBoundaryOptions, 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 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;
+function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
+  const WrapAll = wrappers['*'];
+  const WrapType = wrappers[wrapperType];
+
+  if (WrapAll && WrapType) {
+    return (props) => (
+      <WrapAll {...props}>
+        <WrapType {...props} />
+      </WrapAll>
+    );
   }
 
-  render() {
-    const { $portalId } = this.props;
-    return <div data-portal-id={$portalId} ref={this.setNode} />;
-  }
+  return WrapType || WrapAll || DefaultWrapper;
 }
 
-function wrapReactComponent<T>(
-  Component: React.ComponentType<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-): React.ComponentType<T> {
-  return (props: T) => (
-    <Wrapper {...props} piral={piral}>
-      <ErrorBoundary {...stasisOptions} renderProps={props}>
-        <Component {...props} piral={piral} />
+function makeWrapper<TProps>(
+  context: GlobalStateContext,
+  outerProps: any,
+  wrapperType: string,
+  errorType: keyof Errors,
+): React.FC<TProps> {
+  const OuterWrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
+
+  return (props) => (
+    <OuterWrapper {...outerProps} {...props}>
+      <ErrorBoundary {...outerProps} {...props} errorType={errorType}>
+        {props.children}
       </ErrorBoundary>
-    </Wrapper>
+    </OuterWrapper>
   );
 }
 
-function wrapForeignComponent<T>(
-  component: ForeignComponent<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-) {
-  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]);
-
-    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>
-    );
-  });
-}
-
-function isNotExotic(component: any): component is object {
-  return !(component as React.ExoticComponent).$$typeof;
-}
-
-function wrapComponent<T>(
-  converters: ComponentConverters<T & BaseComponentProps>,
-  component: AnyComponent<T & BaseComponentProps>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-  stasisOptions: ErrorBoundaryOptions<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 wrapReactComponent<T>(component, stasisOptions, piral, Wrapper);
-}
-
-function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
-  return wrappers[wrapperType] || wrappers['*'] || DefaultWrapper;
-}
-
 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 = 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 Wrapper = makeWrapper<TProps>(context, outerProps, wrapperType, errorType);
+  return wrapComponent(converters, component, outerProps, Wrapper);
 }

package/src/types/api.ts

@@ -3,7 +3,7 @@ import type { RouteComponentProps } from 'react-router';
 import type { PiletApi, Pilet, PiletMetadata, EventEmitter, SinglePilet, MultiPilet } 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';
 
@@ -99,7 +99,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.

package/src/types/extension.ts

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