piral-core 1.0.0-pre.2296 → 1.0.1-beta.5640

package/src/helpers.tsx

@@ -1,135 +1,58 @@
-import { addChangeHandler } from '@dbeining/react-atom';
 import {
   PiletApiCreator,
   LoadPiletsOptions,
   CustomSpecLoaders,
   DefaultLoaderConfig,
-  PiletDependencyFetcher,
-  getDependencyResolver,
   getDefaultLoader,
   extendLoader,
   PiletLoader,
+  PiletLifecycleHooks,
 } 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 type { DebuggerExtensionOptions } from 'piral-debug-utils';
+import { globalDependencies } from './modules';
+import type { Pilet, PiletRequester, GlobalStateContext, PiletLoadingStrategy, DependencySelector } from './types';
+import { integrateDebugger, integrateEmulator } from '../app.codegen';
 
 export interface PiletOptionsConfig {
+  context: GlobalStateContext;
+  hooks?: PiletLifecycleHooks;
+  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({
+  hooks,
   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);
-
-  // 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,
-    });
-
-    // we watch the state container for changes
-    addChangeHandler(context.state, 'debugging', ({ current, previous }) => {
-      const viewState = sessionStorage.getItem('dbg:view-state') !== 'off';
-
-      if (viewState) {
-        const infos = new Error().stack;
-
-        if (infos) {
-          // Chrome, Firefox, ... (full capability)
-          const action = infos.split('\n')[7].replace(/^\s+at\s+(Atom\.|Object\.)?/, '');
-          console.group(
-            `%c Piral State Change %c ${new Date().toLocaleTimeString()}`,
-            'color: gray; font-weight: lighter;',
-            'color: black; font-weight: bold;',
-          );
-          console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
-          console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
-          console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
-          console.groupEnd();
-        } else {
-          // IE 11, ... (does not know colors etc.)
-          console.log('Changed state', previous, current);
-        }
-      }
-    });
-  }
-
-  if (process.env.DEBUG_PILET) {
-    const { withEmulatorPilets } = require('piral-debug-utils');
-
-    requestPilets = withEmulatorPilets(requestPilets, {
-      inject: context.injectPilet,
-      createApi,
-      loadPilet,
-    });
-  }
-
-  return {
+  shareDependencies,
+  debug,
+}: PiletOptionsConfig) {
+  const options: LoadPiletsOptions = {
+    config: loaderConfig,
     strategy,
-    loadPilet,
+    loadPilet: extendLoader(loadPilet ?? getDefaultLoader(loaderConfig), loaders),
     createApi,
-    getDependencies,
     pilets: availablePilets,
     fetchPilets: requestPilets,
-    dependencies: globalDependencies,
+    hooks,
+    dependencies: shareDependencies(globalDependencies),
   };
+
+  integrateDebugger(context, options, debug);
+  integrateEmulator(context, options, debug);
+
+  return options;
 }

package/src/hooks/action.ts

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { StateContext } from '../state/stateContext';
+import { useGlobalStateContext } from './globalState';
 import { PiralActions, GlobalStateContext } from '../types';
 
 /**
@@ -7,6 +6,6 @@ import { PiralActions, GlobalStateContext } from '../types';
  * @param action The name of the action to retrieve.
  */
 export function useAction<T extends keyof PiralActions>(action: T): GlobalStateContext[T] {
-  const ctx = useContext(StateContext);
+  const ctx = useGlobalStateContext();
   return ctx[action];
 }

package/src/hooks/globalState.ts

@@ -1,14 +1,15 @@
 import { useContext } from 'react';
-import { useAtom, deref } from '@dbeining/react-atom';
 import { StateContext } from '../state/stateContext';
 import { GlobalState } from '../types';
 
-const useGlobalAtom = typeof window !== 'undefined' ? useAtom : useDirectAtom;
-
-function useDirectAtom(atom: any, opts: any) {
-  const state = deref(atom);
-  const select = opts && opts.select;
-  return typeof select === 'function' ? select(state) : state;
+/**
+ * Hook to obtain the global state context, which gives you directly
+ * all actions, state, and more of the Piral instance.
+ * If you are only interested in reading out the state, use the
+ * `useGlobalState` hook instead.
+ */
+export function useGlobalStateContext() {
+  return useContext(StateContext);
 }
 
 /**
@@ -25,6 +26,6 @@ export function useGlobalState(): GlobalState;
 export function useGlobalState<R>(select: (state: GlobalState) => R): R;
 
 export function useGlobalState<R>(select?: (state: GlobalState) => R) {
-  const { state } = useContext(StateContext);
-  return useGlobalAtom(state, select && { select });
+  const { state: useState } = useGlobalStateContext();
+  return useState(select);
 }

package/src/hooks/index.ts

@@ -1,11 +1,8 @@
 export * from './action';
 export * from './actions';
-export * from './debounce';
 export * from './globalState';
-export * from './lockBodyScroll';
+export * from './piletApi';
 export * from './media';
-export * from './onClickOutside';
-export * from './onScreenVisible';
-export * from './promise';
+export * from './routes';
 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/piletApi.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+import { useGlobalStateContext } from "./globalState";
+
+/**
+ * Uses the global state context to retrieve the pilet API stored
+ * for the root pilet. This allows interaction with the pilet API
+ * from the app shell.
+ * @returns The pilet API object of the root pilet.
+ */
+export function usePiletApi() {
+  const context = useGlobalStateContext();
+  const [api] = useState(() => Object.values(context.apis).shift());
+  return api;
+}

package/src/hooks/routes.ts

@@ -0,0 +1,14 @@
+import { useGlobalState } from './globalState';
+import { useRouteFilter } from '../../app.codegen';
+import { AppPath } from '../types';
+
+export function useRoutes() {
+  const routes = useGlobalState((s) => s.routes);
+  const pages = useGlobalState((s) => s.registry.pages);
+  const paths: Array<AppPath> = [];
+
+  Object.keys(routes).map((path) => paths.push({ path, Component: routes[path] }));
+  Object.keys(pages).map((path) => paths.push({ path, Component: pages[path].component }));
+
+  return useRouteFilter(paths);
+}

package/src/hooks/setter-server.test.ts

@@ -0,0 +1,22 @@
+/**
+ * @jest-environment node
+ */
+
+import * as React from 'react';
+import { renderToString } from 'react-dom/server';
+import { useSetter } from './setter';
+
+describe('UseSetter Hook Module', () => {
+  it('UseSetter', () => {
+    const cb = jest.fn();
+
+    const MyComponent = () => {
+      useSetter(cb);
+      return null;
+    };
+
+    const result = renderToString(React.createElement(MyComponent));
+    expect(result).toEqual('');
+    expect(cb).toHaveBeenCalled();
+  });
+});

package/src/hooks/setter.test.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render, act } from '@testing-library/react';
+import { useSetter } from './setter';
+
+describe('UseSetter Hook Module', () => {
+  it('UseSetter', async () => {
+    const cb = jest.fn();
+
+    const MyComponent = () => {
+      useSetter(cb);
+      return null;
+    };
+
+    render(React.createElement(MyComponent));
+    await act(() => new Promise((resolve) => setTimeout(resolve, 5)));
+    expect(cb).toHaveBeenCalled();
+  });
+});

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/index.tsx

@@ -1,8 +1,10 @@
 export * from './createInstance';
-export * from './Piral';
 export * from './helpers';
 export * from './components';
 export * from './hooks';
+export * from './setters';
 export * from './state';
 export * from './utils';
+export * from './Piral';
+export * from './PiralContext';
 export * from './types';

package/src/modules/api.test.ts

@@ -1,6 +1,5 @@
-import * as hooks from '../hooks';
 import { createElement, FC } from 'react';
-import { createCoreApi, initializeApi } from './api';
+import { defaultApiFactory } from './api';
 
 jest.mock('../hooks');
 
@@ -22,31 +21,21 @@ function createMockContainer() {
       off: jest.fn(),
       emit: jest.fn(),
       converters: {},
+      apis: {},
       readState() {
         return undefined;
       },
     } as any,
-    api: {} as any,
   };
 }
 
-function createApi(container) {
-  Object.assign(container.api, createCoreApi(container.context)(container.api, moduleMetadata));
-  return container.api;
+function createApi(container, apis = []) {
+  const api = defaultApiFactory(container.context, apis);
+  return api(moduleMetadata);
 }
 
 describe('API Module', () => {
-  it('createCoreApi pluginMeta returns the metadata', () => {
-    const container = createMockContainer();
-    const api = initializeApi(moduleMetadata, container.context);
-    expect(api.meta).toEqual({
-      name: moduleMetadata.name,
-      version: moduleMetadata.version,
-      hash: moduleMetadata.hash,
-    });
-  });
-
-  it('createCoreApi can register and unregister a page', () => {
+  it('defaultApiFactory can register and unregister a page', () => {
     const container = createMockContainer();
     container.context.registerPage = jest.fn();
     container.context.unregisterPage = jest.fn();
@@ -59,7 +48,7 @@ describe('API Module', () => {
     expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
   });
 
-  it('createCoreApi can dispose a registered page', () => {
+  it('defaultApiFactory can dispose a registered page', () => {
     const container = createMockContainer();
     container.context.registerPage = jest.fn();
     container.context.unregisterPage = jest.fn();
@@ -72,7 +61,7 @@ describe('API Module', () => {
     expect(container.context.unregisterPage.mock.calls[0][0]).toBe(container.context.registerPage.mock.calls[0][0]);
   });
 
-  it('createCoreApi can register and unregister an extension', () => {
+  it('defaultApiFactory can register and unregister an extension', () => {
     const container = createMockContainer();
     container.context.registerExtension = jest.fn();
     container.context.unregisterExtension = jest.fn();
@@ -87,7 +76,7 @@ describe('API Module', () => {
     );
   });
 
-  it('createCoreApi can dispose an registered extension', () => {
+  it('defaultApiFactory can dispose an registered extension', () => {
     const container = createMockContainer();
     container.context.registerExtension = jest.fn();
     container.context.unregisterExtension = jest.fn();
@@ -102,7 +91,7 @@ describe('API Module', () => {
     );
   });
 
-  it('createCoreApi read data by its name', () => {
+  it('defaultApiFactory read data by its name', () => {
     const container = createMockContainer();
     container.context.readDataValue = jest.fn((name) => name);
     const api = createApi(container);
@@ -111,7 +100,7 @@ describe('API Module', () => {
     expect(container.context.readDataValue).toHaveBeenCalled();
   });
 
-  it('createCoreApi write data without options shall pass, but memory should not emit events', () => {
+  it('defaultApiFactory write data without options shall pass, but memory should not emit events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -120,7 +109,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data with empty options shall pass, but memory should not emit events', () => {
+  it('defaultApiFactory write data with empty options shall pass, but memory should not emit events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -129,7 +118,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the simple option should not pass, never emitting events', () => {
+  it('defaultApiFactory write data by the simple option should not pass, never emitting events', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => false);
     const api = createApi(container);
@@ -138,7 +127,7 @@ describe('API Module', () => {
     expect(container.context.emit).not.toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the simple option shall pass with remote', () => {
+  it('defaultApiFactory write data by the simple option shall pass with remote', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);
@@ -146,7 +135,7 @@ describe('API Module', () => {
     expect(container.context.tryWriteDataItem).toHaveBeenCalled();
   });
 
-  it('createCoreApi write data by the object options shall pass with remote', () => {
+  it('defaultApiFactory write data by the object options shall pass with remote', () => {
     const container = createMockContainer();
     container.context.tryWriteDataItem = jest.fn(() => true);
     const api = createApi(container);

package/src/modules/api.ts

@@ -1,70 +1,7 @@
-import { isfunc, PiletApiCreator } from 'piral-base';
+import { isfunc, PiletApiCreator, initializeApi, mergeApis } from 'piral-base';
 import { __assign } from 'tslib';
-import { withApi } from '../state';
-import { ExtensionSlot } from '../components';
-import { createDataOptions, getDataExpiration, renderInDom } from '../utils';
-import { PiletApi, PiletMetadata, GlobalStateContext, PiletCoreApi, PiralPlugin, PiletApiExtender } from '../types';
-
-export function createCoreApi(context: GlobalStateContext): PiletApiExtender<PiletCoreApi> {
-  return (api, target) => {
-    const pilet = target.name;
-    return {
-      getData(name) {
-        return context.readDataValue(name);
-      },
-      setData(name, value, options) {
-        const { target = 'memory', expires } = createDataOptions(options);
-        const expiration = getDataExpiration(expires);
-        return context.tryWriteDataItem(name, value, pilet, target, expiration);
-      },
-      registerPage(route, arg, meta) {
-        context.registerPage(route, {
-          pilet,
-          meta,
-          component: withApi(context, arg, api, 'page'),
-        });
-        return () => api.unregisterPage(route);
-      },
-      unregisterPage(route) {
-        context.unregisterPage(route);
-      },
-      registerExtension(name, arg, defaults) {
-        context.registerExtension(name as string, {
-          pilet,
-          component: withApi(context, arg, api, 'extension'),
-          reference: arg,
-          defaults,
-        });
-        return () => api.unregisterExtension(name, arg);
-      },
-      unregisterExtension(name, arg) {
-        context.unregisterExtension(name as string, arg);
-      },
-      renderHtmlExtension(element, props) {
-        const id = renderInDom(context, element, ExtensionSlot, props);
-        return () => context.destroyPortal(id);
-      },
-      Extension: ExtensionSlot,
-    };
-  };
-}
-
-export function initializeApi(target: PiletMetadata, context: GlobalStateContext) {
-  return {
-    on: context.on,
-    off: context.off,
-    emit: context.emit,
-    meta: {
-      ...target,
-    },
-  } as PiletApi;
-}
-
-export function mergeApis(api: PiletApi, extenders: Array<PiletApiExtender<Partial<PiletApi>>>, target: PiletMetadata) {
-  const frags = extenders.map((extender) => extender(api, target));
-  __assign(api, ...frags);
-  return api;
-}
+import { createCoreApi } from './core';
+import { GlobalStateContext, PiralPlugin } from '../types';
 
 export function createExtenders(context: GlobalStateContext, apis: Array<PiralPlugin>) {
   const creators: Array<PiralPlugin> = [createCoreApi, ...apis.filter(isfunc)];