piral-core 0.15.0-alpha.3555 → 0.15.0-alpha.3640

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

@@ -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/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

@@ -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 integrateDebugger(
+  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 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('../debug-piral');
-    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');
-    integrate(context, options);
-  }
+  integrateDebugger(context, options, debug);
+  integrateEmulator(context, options, debug);
 
   return 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,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.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) => {