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

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/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);
 }

package/src/types/api.ts

@@ -1,13 +1,22 @@
 import type { ReactElement } from 'react';
 import type { RouteComponentProps } from 'react-router';
-import type { PiletApi, Pilet, PiletEntry, PiletEntries, PiletMetadata, EventEmitter } from 'piral-base';
+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 { SharedData, DataStoreOptions } from './data';
 import type { Disposable } from './utils';
 
-export { PiletApi, Pilet, PiletMetadata, EventEmitter, PiletEntry, PiletEntries };
+export { PiletApi, Pilet, PiletMetadata, EventEmitter, PiletEntry, PiletEntries, PiletLoader, PiletLoadingStrategy };
 
 /**
  * The props that every registered component obtains.
@@ -39,6 +48,11 @@ export interface ExtensionComponentProps<T> extends BaseComponentProps {
   params: T extends keyof PiralExtensionSlotMap ? PiralExtensionSlotMap[T] : T extends string ? any : T;
 }
 
+/**
+ * The meta data registered for a page.
+ */
+export interface PiralPageMeta extends PiralCustomPageMeta {}
+
 /**
  * The props that every registered page component obtains.
  */
@@ -49,12 +63,12 @@ export interface RouteBaseProps<UrlParams = any, UrlState = any>
 /**
  * The props used by a page component.
  */
-export interface PageComponentProps<T = any, S = any> extends RouteBaseProps<T, S> {}
-
-/**
- * The meta data registered for a page.
- */
-export interface PiralPageMeta extends PiralCustomPageMeta {}
+export interface PageComponentProps<T = any, S = any> extends RouteBaseProps<T, S> {
+  /**
+   * The meta data registered with the page.
+   */
+  meta: PiralPageMeta;
+}
 
 /**
  * Defines the Pilet API from piral-core.
@@ -126,7 +140,7 @@ export interface PiletCoreApi {
   renderHtmlExtension<TName>(element: HTMLElement | ShadowRoot, props: ExtensionSlotProps<TName>): Disposable;
 }
 
-declare module 'piral-base/lib/types' {
+declare module 'piral-base/lib/types/runtime' {
   interface PiletApi extends PiletCustomApi, PiletCoreApi {}
 }
 

package/src/utils/index.ts

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

package/debug-piral.js

@@ -1,72 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-exports.__esModule = true;
-exports.integrate = void 0;
-var react_atom_1 = require("@dbeining/react-atom");
-var piral_debug_utils_1 = require("piral-debug-utils");
-function integrate(context, options, debug) {
-    if (debug === void 0) { debug = {}; }
-    (0, piral_debug_utils_1.installPiralDebug)(__assign(__assign({}, debug), { addPilet: context.addPilet, removePilet: context.removePilet, updatePilet: function (pilet) {
-            if (!pilet.disabled) {
-                var createApi = options.createApi;
-                var newApi = createApi(pilet);
-                try {
-                    context.injectPilet(pilet);
-                    pilet.setup(newApi);
-                }
-                catch (error) {
-                    console.error(error);
-                }
-            }
-            else {
-                context.injectPilet(pilet);
-            }
-        }, fireEvent: context.emit, getDependencies: function () {
-            return Object.keys(options.dependencies);
-        }, getExtensions: function () {
-            return context.readState(function (s) { return Object.keys(s.registry.extensions); });
-        }, getRoutes: function () {
-            var registeredRoutes = context.readState(function (state) { return Object.keys(state.registry.pages); });
-            var componentRoutes = context.readState(function (state) { return Object.keys(state.routes); });
-            return __spreadArray(__spreadArray([], componentRoutes, true), registeredRoutes, true);
-        }, getGlobalState: function () {
-            return context.readState(function (s) { return s; });
-        }, getPilets: function () {
-            return context.readState(function (s) { return s.modules; });
-        }, integrate: function (dbg) {
-            context.dispatch(function (s) { return (__assign(__assign({}, s), { components: __assign(__assign({}, s.components), dbg.components), routes: __assign(__assign({}, s.routes), dbg.routes), registry: __assign(__assign({}, s.registry), { wrappers: __assign(__assign({}, s.registry.wrappers), dbg.wrappers) }) })); });
-            (0, react_atom_1.addChangeHandler)(context.state, 'debugging', function (_a) {
-                var previous = _a.previous, current = _a.current;
-                var pilets = current.modules !== previous.modules;
-                var pages = current.registry.pages !== previous.registry.pages || current.routes !== previous.routes;
-                var extensions = current.registry.extensions !== previous.registry.extensions;
-                var state = current !== previous;
-                dbg.onChange(previous, current, {
-                    pilets: pilets,
-                    pages: pages,
-                    extensions: extensions,
-                    state: state
-                });
-            });
-        } }));
-}
-exports.integrate = integrate;