piral-core 0.14.0-pre.3018 → 0.14.0-pre.3085

package/src/Piral.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StateContext } from './state';
 import { createInstance } from './createInstance';
-import { PiralView, Mediator, ResponsiveLayout } from './components';
+import { PiralView, Mediator, ResponsiveLayout, PortalRenderer } from './components';
 import type { PortalProps } from './types';
 
 /**
@@ -21,6 +21,7 @@ const app = (
  */
 export const Piral: React.FC<PortalProps> = ({ instance = createInstance(), breakpoints, children }) => (
   <StateContext.Provider value={instance.context}>
+    <PortalRenderer id="root" />
     <ResponsiveLayout breakpoints={breakpoints} />
     <Mediator options={instance.options} />
     <PiralView>{children}</PiralView>

package/src/actions/portal.ts

@@ -1,5 +1,5 @@
 import { ReactPortal } from 'react';
-import { withoutKey, includeItem, withKey } from '../utils';
+import { withoutKey, withKey, includeItem, excludeItem, replaceOrAddItem } from '../utils';
 import { GlobalStateContext } from '../types';
 
 export function destroyPortal(ctx: GlobalStateContext, id: string) {
@@ -9,6 +9,24 @@ export function destroyPortal(ctx: GlobalStateContext, id: string) {
   }));
 }
 
+export function hidePortal(ctx: GlobalStateContext, id: string, entry: ReactPortal) {
+  ctx.dispatch((state) => ({
+    ...state,
+    portals: withKey(state.portals, id, excludeItem(state.portals[id], entry)),
+  }));
+}
+
+export function updatePortal(ctx: GlobalStateContext, id: string, current: ReactPortal, next: ReactPortal) {
+  ctx.dispatch((state) => ({
+    ...state,
+    portals: withKey(
+      state.portals,
+      id,
+      replaceOrAddItem(state.portals[id], next, (m) => m === current),
+    ),
+  }));
+}
+
 export function showPortal(ctx: GlobalStateContext, id: string, entry: ReactPortal) {
   ctx.dispatch((state) => ({
     ...state,

package/src/components/ExtensionSlot.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
 import { useGlobalState } from '../hooks';
-import { defaultRender } from '../utils';
+import { defaultRender, none } from '../utils';
 import { ExtensionSlotProps } from '../types';
 
 /**
@@ -11,7 +11,7 @@ import { ExtensionSlotProps } from '../types';
  */
 export function ExtensionSlot<T extends string>(props: ExtensionSlotProps<T>) {
   const { name, render = defaultRender, empty, params } = props;
-  const extensions = useGlobalState((s) => s.registry.extensions[name] || []);
+  const extensions = useGlobalState((s) => s.registry.extensions[name] || none);
   return render(
     extensions.length === 0 && isfunc(empty)
       ? [defaultRender(empty(), 'empty')]

package/src/components/Mediator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { LoadPiletsOptions, startLoadingPilets, PiletsLoading } from 'piral-base';
 import { useAction } from '../hooks';
+import { none } from '../utils';
 
 /**
  * The props of the Mediator component.
@@ -24,7 +25,7 @@ export const Mediator: React.FC<MediatorProps> = ({ options }) => {
     };
     connect(notifier);
     return () => disconnect(notifier);
-  }, []);
+  }, none);
   // tslint:disable-next-line:no-null-keyword
   return null;
 };

package/src/components/PortalRenderer.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useGlobalState } from '../hooks';
+import { defaultRender, none } from '../utils';
+
+export interface PortalRendererProps {
+  id: string;
+}
+
+export const PortalRenderer: React.FC<PortalRendererProps> = ({ id }) => {
+  const children = useGlobalState((m) => m.portals[id]) || none;
+  return defaultRender(children);
+};

package/src/components/SwitchErrorInfo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGlobalState } from '../hooks';
-import { defaultRender } from '../utils';
+import { defaultRender, none } from '../utils';
 import { ErrorComponentsState, Errors, ErrorInfoProps } from '../types';
 
 function renderComponent<TKey extends keyof ErrorComponentsState>(
@@ -10,6 +10,10 @@ function renderComponent<TKey extends keyof ErrorComponentsState>(
   const name = props.type;
   const Component = components[name];
 
+  if (process.env.NODE_ENV === 'development') {
+    React.useEffect(() => console.error('[dev-info] An error occurred in the Piral instance.', props), none);
+  }
+
   if (!Component) {
     const Unknown = components.unknown;
 

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './ExtensionSlot';
 export * from './Mediator';
 export * from './PiralRoutes';
 export * from './PiralView';
+export * from './PortalRenderer';
 export * from './ResponsiveLayout';
 export * from './SetComponent';
 export * from './SetError';

package/src/createInstance.tsx

@@ -1,6 +1,6 @@
 import { __assign } from 'tslib';
 import { blazingStrategy, standardStrategy, createListener, isfunc } from 'piral-base';
-import { getLocalDependencies, defaultApiFactory, defaultModuleRequester } from './modules';
+import { defaultApiFactory, defaultDependencySelector, defaultModuleRequester } from './modules';
 import { createGlobalState, createActions, includeActions } from './state';
 import { createPiletOptions } from './helpers';
 import type { PiralConfiguration, PiralInstance } from './types';
@@ -30,21 +30,20 @@ export function createInstance(config: PiralConfiguration = {}): PiralInstance {
     state,
     actions,
     availablePilets = [],
-    extendApi,
     plugins,
     requestPilets = defaultModuleRequester,
-    fetchDependency,
-    getDependencies = getLocalDependencies,
     loaderConfig,
     async = false,
+    shareDependencies = defaultDependencySelector,
     loadPilet,
     loaders,
+    debug,
     apiFactory = defaultApiFactory,
   } = config;
   const globalState = createGlobalState(state);
   const events = createListener(globalState);
   const context = createActions(globalState, events);
-  const definedPlugins = plugins || extendApi || [];
+  const definedPlugins = plugins || [];
   const usedPlugins = Array.isArray(definedPlugins) ? definedPlugins : [definedPlugins];
   const createApi = apiFactory(context, usedPlugins);
   const root = createApi({
@@ -58,11 +57,11 @@ export function createInstance(config: PiralConfiguration = {}): PiralInstance {
     loaders,
     loadPilet,
     availablePilets,
-    fetchDependency,
     loaderConfig,
-    getDependencies,
+    shareDependencies,
     strategy: isfunc(async) ? async : async ? blazingStrategy : standardStrategy,
     requestPilets,
+    debug,
   });
 
   if (actions) {

package/src/helpers.test.tsx

@@ -1,6 +1,6 @@
-import { createPiletOptions, PiletOptionsConfig, extendSharedDependencies, setSharedDependencies } from './helpers';
+import { createPiletOptions, PiletOptionsConfig } from './helpers';
 import { globalDependencies } from './modules';
-import { PiletMetadata, AvailableDependencies } from 'piral-base';
+import { PiletMetadata } from 'piral-base';
 import { Atom, swap, deref } from '@dbeining/react-atom';
 
 function createMockApi(meta: PiletMetadata) {
@@ -16,6 +16,7 @@ function createMockContainer() {
   const state = Atom.of({
     registry: {
       pages: {},
+      extensions: {},
       wrappers: {},
     },
     routes: {},
@@ -48,35 +49,6 @@ function createMockContainer() {
 }
 
 describe('Piral-Core helpers module', () => {
-  it('setSharedDependencies set the shared dependecies', () => {
-    // Arrange
-    const dependencies: AvailableDependencies = {
-      gg: {},
-      ff: {},
-    };
-
-    // Act
-    const dependencyGetter = setSharedDependencies(dependencies);
-    const result = dependencyGetter();
-
-    // Assert
-    expect(result).not.toBeUndefined();
-  });
-
-  it('extendSharedDependencies should extend the dependecies', () => {
-    // Arrange
-    const additionalDependencies: AvailableDependencies = {
-      gg: {},
-      ff: {},
-    };
-
-    // Act
-    const extendedDependecies = extendSharedDependencies(additionalDependencies);
-
-    // Assert
-    expect(extendedDependecies).not.toBeUndefined();
-  });
-
   it('createPiletOptions creates the options using the provided pilets', () => {
     const wasUndefined = process.env.DEBUG_PIRAL === undefined;
 
@@ -102,9 +74,8 @@ describe('Piral-Core helpers module', () => {
     const optionsConfig: PiletOptionsConfig = {
       createApi: createMockApi,
       availablePilets: providedPilets,
+      shareDependencies: jest.fn(deps => deps),
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
       loadPilet: jest.fn(),
       requestPilets: jest.fn(() => Promise.resolve(providedPilets)),
       strategy: jest.fn(),
@@ -143,8 +114,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: () => globalDependencies,
+      shareDependencies: jest.fn(deps => deps),
       loadPilet: jest.fn(),
       requestPilets: jest.fn(() => Promise.resolve(providedPilets)),
       strategy: jest.fn(),
@@ -183,8 +153,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
+      shareDependencies: jest.fn(deps => deps),
       loadPilet: jest.fn(),
       requestPilets: requestPilets,
       strategy: jest.fn(),
@@ -238,8 +207,7 @@ describe('Piral-Core helpers module', () => {
       createApi: createMockApi,
       availablePilets: providedPilets,
       context: globalContext,
-      fetchDependency: jest.fn(),
-      getDependencies: jest.fn(),
+      shareDependencies: jest.fn(deps => deps),
       loadPilet: jest.fn(),
       requestPilets: requestPilets,
       strategy: jest.fn(),

package/src/helpers.tsx

@@ -1,115 +1,62 @@
-import { addChangeHandler } from '@dbeining/react-atom';
 import {
   PiletApiCreator,
   LoadPiletsOptions,
   CustomSpecLoaders,
   DefaultLoaderConfig,
-  PiletDependencyFetcher,
-  getDependencyResolver,
   getDefaultLoader,
   extendLoader,
   PiletLoader,
 } from 'piral-base';
-import { globalDependencies, getLocalDependencies } from './modules';
-import type {
-  AvailableDependencies,
-  Pilet,
-  PiletRequester,
-  GlobalStateContext,
-  PiletDependencyGetter,
-  PiletLoadingStrategy,
-} from './types';
-
-/**
- * Creates a dependency getter that sets the shared dependencies explicitly.
- * Overrides the potentially set shared dependencies from the Piral CLI, but
- * keeps all global dependencies such as react, react-dom, ...
- * @param sharedDependencies The shared dependencies to declare.
- */
-export function setSharedDependencies(sharedDependencies: AvailableDependencies) {
-  const dependencies = {
-    ...globalDependencies,
-    ...sharedDependencies,
-  };
-  return () => dependencies;
-}
-
-/**
- * Creates a dependency getter that extends the shared dependencies with additional dependencies.
- * @param additionalDependencies The additional dependencies to declare.
- */
-export function extendSharedDependencies(additionalDependencies: AvailableDependencies) {
-  const dependencies = {
-    ...getLocalDependencies(),
-    ...additionalDependencies,
-  };
-  return () => dependencies;
-}
+import { DebuggerExtensionOptions } from 'piral-debug-utils';
+import { globalDependencies } from './modules';
+import type { Pilet, PiletRequester, GlobalStateContext, PiletLoadingStrategy, DependencySelector } from './types';
 
 export interface PiletOptionsConfig {
+  context: GlobalStateContext;
+  loaders?: CustomSpecLoaders;
+  loaderConfig?: DefaultLoaderConfig;
   availablePilets: Array<Pilet>;
-  createApi: PiletApiCreator;
-  fetchDependency: PiletDependencyFetcher;
-  getDependencies: PiletDependencyGetter;
   strategy: PiletLoadingStrategy;
-  requestPilets: PiletRequester;
-  loaderConfig?: DefaultLoaderConfig;
-  loaders?: CustomSpecLoaders;
+  createApi: PiletApiCreator;
   loadPilet: PiletLoader;
-  context: GlobalStateContext;
+  requestPilets: PiletRequester;
+  shareDependencies: DependencySelector;
+  debug?: DebuggerExtensionOptions;
 }
 
 export function createPiletOptions({
   context,
-  createApi,
-  availablePilets,
-  fetchDependency,
-  getDependencies,
+  loaders,
   loaderConfig,
-  loadPilet,
+  availablePilets,
   strategy,
-  loaders,
+  createApi,
+  loadPilet,
   requestPilets,
-}: PiletOptionsConfig): LoadPiletsOptions {
-  getDependencies = getDependencyResolver(globalDependencies, getDependencies);
-  loadPilet = extendLoader(loadPilet ?? getDefaultLoader(getDependencies, fetchDependency, loaderConfig), loaders);
+  shareDependencies,
+  debug,
+}: PiletOptionsConfig) {
+  const options: LoadPiletsOptions = {
+    config: loaderConfig,
+    strategy,
+    loadPilet: extendLoader(loadPilet ?? getDefaultLoader(loaderConfig), loaders),
+    createApi,
+    pilets: availablePilets,
+    fetchPilets: requestPilets,
+    dependencies: shareDependencies(globalDependencies),
+  };
 
   // if we build the debug version of piral (debug and emulator build)
   if (process.env.DEBUG_PIRAL) {
-    const { installPiralDebug } = require('piral-debug-utils');
-
-    installPiralDebug({
-      context,
-      createApi,
-      getDependencies,
-      loadPilet,
-      requestPilets,
-      onChange(cb: (previous: any, current: any) => void) {
-        addChangeHandler(context.state, 'debugging', ({ previous, current }) => {
-          cb(previous, current);
-        });
-      },
-    });
+    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 { withEmulatorPilets } = require('piral-debug-utils');
-
-    requestPilets = withEmulatorPilets(requestPilets, {
-      inject: context.injectPilet,
-      createApi,
-      loadPilet,
-    });
+    const { integrate } = require('../debug-pilet');
+    integrate(context, options);
   }
 
-  return {
-    config: loaderConfig,
-    strategy,
-    loadPilet,
-    createApi,
-    getDependencies,
-    pilets: availablePilets,
-    fetchPilets: requestPilets,
-    dependencies: globalDependencies,
-  };
+  return options;
 }

package/src/hooks/index.ts

@@ -1,11 +1,6 @@
 export * from './action';
 export * from './actions';
-export * from './debounce';
 export * from './globalState';
-export * from './lockBodyScroll';
 export * from './media';
-export * from './onClickOutside';
-export * from './onScreenVisible';
-export * from './promise';
 export * from './setter';
 export * from './sharedData';

package/src/hooks/media.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { none } from '../utils/helpers';
 import { getCurrentLayout } from '../utils/media';
 
 /**
@@ -17,7 +18,7 @@ export function useMedia<T>(queries: Array<string>, values: Array<T>, defaultVal
       window.addEventListener('resize', handler);
       return () => window.removeEventListener('resize', handler);
     }
-  }, []);
+  }, none);
 
   return value;
 }

package/src/hooks/setter.ts

@@ -1,4 +1,5 @@
 import { useEffect as useSideEffect } from 'react';
+import { none } from '../utils/helpers';
 
 function useMainEffect(cb: () => void) {
   cb();
@@ -11,5 +12,5 @@ const useEffect = typeof window !== 'undefined' ? useSideEffect : useMainEffect;
  * @param cb The callback to be invoked on mounting.
  */
 export function useSetter(cb: () => void) {
-  useEffect(cb, []);
+  useEffect(cb, none);
 }

package/src/modules/api.ts

@@ -2,10 +2,78 @@ import { isfunc, PiletApiCreator, PiletApiExtender, initializeApi, mergeApis } f
 import { __assign } from 'tslib';
 import { withApi } from '../state';
 import { ExtensionSlot } from '../components';
-import { createDataOptions, getDataExpiration, renderInDom } from '../utils';
-import { GlobalStateContext, PiletCoreApi, PiralPlugin } from '../types';
+import { createDataOptions, getDataExpiration, renderInDom, tryParseJson, changeDomPortal, noop } from '../utils';
+import { Disposable, GlobalStateContext, PiletCoreApi, PiralPlugin } from '../types';
+
+interface Updatable {
+  (newProps: any): void;
+}
+
+if ('customElements' in window) {
+  class PiralExtension extends HTMLElement {
+    dispose: Disposable = noop;
+    update: Updatable = noop;
+
+    getProps() {
+      const name = this.getAttribute('name');
+      const params = tryParseJson(this.getAttribute('params'));
+      return { name, params };
+    }
+
+    connectedCallback() {
+      if (this.isConnected) {
+        this.dispatchEvent(
+          new CustomEvent('render-html', {
+            bubbles: true,
+            detail: {
+              target: this,
+              props: this.getProps(),
+            },
+          }),
+        );
+      }
+    }
+
+    disconnectedCallback() {
+      this.dispose();
+      this.dispose = noop;
+      this.update = noop;
+    }
+
+    attributeChangedCallback() {
+      this.update(this.getProps());
+    }
+
+    static get observedAttributes() {
+      return ['name', 'params'];
+    }
+  }
+
+  customElements.define('piral-extension', PiralExtension);
+}
+
+function render(context: GlobalStateContext, element: HTMLElement | ShadowRoot, props: any): [Disposable, Updatable] {
+  let [id, portal] = renderInDom(context, element, ExtensionSlot, props);
+  const dispose: Disposable = () => context.hidePortal(id, portal);
+  const update: Updatable = (newProps) => {
+    [id, portal] = changeDomPortal(id, portal, context, element, ExtensionSlot, newProps);
+  };
+  return [dispose, update];
+}
 
 export function createCoreApi(context: GlobalStateContext): PiletApiExtender<PiletCoreApi> {
+  document.body.addEventListener(
+    'render-html',
+    (ev: CustomEvent) => {
+      ev.stopPropagation();
+      const container = ev.detail.target;
+      const [dispose, update] = render(context, container, ev.detail.props);
+      container.dispose = dispose;
+      container.update = update;
+    },
+    false,
+  );
+
   return (api, target) => {
     const pilet = target.name;
     return {
@@ -41,8 +109,8 @@ export function createCoreApi(context: GlobalStateContext): PiletApiExtender<Pil
         context.unregisterExtension(name as string, arg);
       },
       renderHtmlExtension(element, props) {
-        const id = renderInDom(context, element, ExtensionSlot, props);
-        return () => context.destroyPortal(id);
+        const [dispose] = render(context, element, props);
+        return dispose;
       },
       Extension: ExtensionSlot,
     };

package/src/modules/dependencies.test.ts

@@ -1,9 +1,22 @@
-import { getLocalDependencies } from './dependencies';
+import { globalDependencies, defaultDependencySelector, defaultModuleRequester } from './dependencies';
 
 describe('Dependencies Module', () => {
-  it('getLocalDependencies should contain global dependencies', () => {
-    const localDependencies = getLocalDependencies();
-    expect(localDependencies).toHaveProperty('react');
-    expect(localDependencies).toHaveProperty('history');
+  it('globalDependencies should contain global dependencies', () => {
+    expect(globalDependencies).toHaveProperty('react');
+    expect(globalDependencies).toHaveProperty('history');
+    expect(globalDependencies).not.toHaveProperty('foo');
+  });
+  
+  it('defaultDependencySelector should return given dependencies', () => {
+    const deps = defaultDependencySelector({
+      foo: 'bar',
+    });
+    expect(deps).toHaveProperty('foo');
+    expect(deps).not.toHaveProperty('bar');
+  });
+  
+  it('defaultModuleRequester should return given dependencies', async () => {
+    const mods = await defaultModuleRequester();
+    expect(mods).toEqual([]);
   });
 });

package/src/modules/dependencies.ts

@@ -1,18 +1,8 @@
 import { PiletMetadata, AvailableDependencies, isfunc } from 'piral-base';
 
-const sharedDependencies: AvailableDependencies = {};
-
-if (process.env.SHARED_DEPENDENCIES) {
-  const fillDependencies = require('../../dependencies.codegen');
-
-  if (isfunc(fillDependencies)) {
-    fillDependencies(sharedDependencies);
-  }
-}
-
 /**
  * The global dependencies, which represent the dependencies
- * already used by piral-core itself.
+ * shared from the app shell itself.
  */
 export const globalDependencies: AvailableDependencies = {
   react: require('react'),
@@ -26,16 +16,20 @@ export const globalDependencies: AvailableDependencies = {
   '@dbeining/react-atom': require('@dbeining/react-atom'),
 };
 
+if (process.env.SHARED_DEPENDENCIES) {
+  const fillDependencies = require('../../dependencies.codegen');
+
+  if (isfunc(fillDependencies)) {
+    fillDependencies(globalDependencies);
+  }
+}
+
 /**
- * Gets the local dependencies for the app shell, which
- * are the global dependencies and the implicitly shared
+ * The default dependency selector, which just returns the provided
  * dependencies.
  */
-export function getLocalDependencies(): AvailableDependencies {
-  return {
-    ...globalDependencies,
-    ...sharedDependencies,
-  };
+export function defaultDependencySelector(dependencies: AvailableDependencies) {
+  return dependencies;
 }
 
 /**