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

package/src/components/PiralView.test.tsx

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import * as hooks from '../hooks';
 import * as routes from './PiralRoutes';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { PiralView } from './PiralView';
 
-const StubDashboard: React.FC = () => <div />;
+const StubDashboard: React.FC<any> = () => <div role="dashboard" />;
 StubDashboard.displayName = 'StubDashboard';
 
-const StubErrorInfo: React.FC = () => <div />;
+const StubErrorInfo: React.FC<any> = ({ type }) => <div role="error">{type}</div>;
 StubErrorInfo.displayName = 'StubErrorInfo';
 
-const StubLoader: React.FC = () => <div />;
+const StubLoader: React.FC<any> = () => <div role="loader" />;
 StubLoader.displayName = 'StubLoader';
 
-const StubRouter: React.FC = ({ children }) => <div>{children}</div>;
+const StubRouter: React.FC<any> = ({ children }) => <div role="router">{children}</div>;
 StubRouter.displayName = 'StubRouter';
 
-const StubLayout: React.FC = ({ children }) => <div>{children}</div>;
+const StubLayout: React.FC<any> = ({ children }) => <div role="layout">{children}</div>;
 StubLayout.displayName = 'StubLayout';
 
 jest.mock('../hooks');
@@ -24,7 +24,7 @@ jest.mock('./PiralRoutes');
 
 const state = {
   app: {
-    error: undefined,
+    error: undefined as any,
     loading: true,
   },
   components: {
@@ -33,6 +33,7 @@ const state = {
     Router: StubRouter,
     Layout: StubLayout,
   },
+  portals: {},
   registry: {
     pages: {},
     extensions: {},
@@ -43,45 +44,45 @@ const state = {
 
 (hooks as any).useGlobalState = (select: any) => select(state);
 
-(routes as any).PiralRoutes = ({}) => <StubDashboard />;
+(routes as any).PiralRoutes = ({ }) => <StubDashboard />;
 
 describe('Portal Module', () => {
   it('renders the dashboard / content in layout if loaded without error', () => {
     state.app.loading = false;
     state.app.error = undefined;
-    const node = mount(<PiralView />);
-    expect(node.find(StubLoader).length).toBe(0);
-    expect(node.find(StubErrorInfo).length).toBe(0);
-    expect(node.find(StubDashboard).length).toBe(1);
+    const node = render(<PiralView />);
+    expect(node.queryAllByRole("loader").length).toBe(0);
+    expect(node.queryAllByRole("error").length).toBe(0);
+    expect(node.queryAllByRole("dashboard").length).toBe(1);
   });
 
   it('just renders the loader if not loaded yet', () => {
     state.app.loading = true;
     state.app.error = undefined;
-    const node = mount(<PiralView />);
-    expect(node.find(StubLoader).length).toBe(1);
-    expect(node.find(StubErrorInfo).length).toBe(0);
-    expect(node.find(StubDashboard).length).toBe(0);
+    const node = render(<PiralView />);
+    expect(node.queryAllByRole("loader").length).toBe(1);
+    expect(node.queryAllByRole("error").length).toBe(0);
+    expect(node.queryAllByRole("dashboard").length).toBe(0);
   });
 
   it('renders the error outside layout if errored when loading', () => {
     state.app.loading = false;
     state.app.error = new Error('Test');
-    const node = mount(<PiralView />);
-    expect(node.find(StubLoader).length).toBe(0);
-    expect(node.find(StubErrorInfo).length).toBe(1);
-    expect(node.find(StubErrorInfo).prop('type')).toBe('loading');
-    expect(node.find(StubDashboard).length).toBe(0);
+    const node = render(<PiralView />);
+    expect(node.queryAllByRole("loader").length).toBe(0);
+    expect(node.queryAllByRole("error").length).toBe(1);
+    expect(node.getByRole("error").textContent).toBe('loading');
+    expect(node.queryAllByRole("dashboard").length).toBe(0);
   });
 
   it('renders the not found error in layout', () => {
     state.app.loading = false;
     state.app.error = undefined;
     (routes as any).PiralRoutes = ({ NotFound }) => <NotFound />;
-    const node = mount(<PiralView />);
-    expect(node.find(StubLoader).length).toBe(0);
-    expect(node.find(StubErrorInfo).length).toBe(1);
-    expect(node.find(StubErrorInfo).prop('type')).toBe('not_found');
-    expect(node.find(StubDashboard).length).toBe(0);
+    const node = render(<PiralView />);
+    expect(node.queryAllByRole("loader").length).toBe(0);
+    expect(node.queryAllByRole("error").length).toBe(1);
+    expect(node.getByRole("error").textContent).toBe('not_found');
+    expect(node.queryAllByRole("dashboard").length).toBe(0);
   });
 });

package/src/components/PiralView.tsx

@@ -1,48 +1,41 @@
 import * as React from 'react';
-import { RouteComponentProps, StaticRouter } from 'react-router';
-import { PiralError, PiralRouter, PiralLoadingIndicator, PiralLayout, PiralDebug } from './components';
+import { RouteComponentProps } from 'react-router';
+import { PiralGlobals } from './PiralGlobals';
 import { PiralRoutes } from './PiralRoutes';
-import { useGlobalState } from '../hooks';
+import { PiralSuspense } from './PiralSuspense';
+import { ResponsiveLayout } from './ResponsiveLayout';
+import { RegisteredErrorInfo, RegisteredRouteSwitch, RegisteredLayout } from './components';
+import { LayoutBreakpoints } from '../types';
 
-const NotFound: React.FC<RouteComponentProps> = (props) => <PiralError type="not_found" {...props} />;
-
-const PiralContent: React.FC = () => {
-  const { error, loading, layout } = useGlobalState((m) => m.app);
-
-  return error ? (
-    <PiralError type="loading" error={error} />
-  ) : loading ? (
-    <PiralLoadingIndicator />
-  ) : (
-    <PiralLayout currentLayout={layout}>
-      <PiralRoutes NotFound={NotFound} />
-    </PiralLayout>
-  );
-};
-
-const Router = typeof window === 'undefined' ? (props) => <StaticRouter location="/" {...props} /> : PiralRouter;
-
-const PiralProvider: React.FC = ({ children }) => {
-  const provider = useGlobalState((m) => m.provider) || React.Fragment;
-  return React.createElement(provider, undefined, children);
-};
+const NotFound: React.FC<RouteComponentProps> = (props) => <RegisteredErrorInfo type="not_found" {...props} />;
 
 /**
  * The props for the PiralView component.
  */
-export interface PiralViewProps {}
+export interface PiralViewProps {
+  /**
+   * The custom breakpoints for the different layout modi.
+   */
+  breakpoints?: LayoutBreakpoints;
+  /**
+   * The extra content.
+   */
+  children: React.ReactNode;
+}
 
 /**
  * The component responsible for the generic view of the application.
- * This includes the global providers, the used Router, the current content and some convenience.
+ * This includes the used the current content and some convenience.
  */
-export const PiralView: React.FC<PiralViewProps> = ({ children }) => (
-  <PiralProvider>
-    <Router>
-      <PiralContent />
-      {children}
-      <PiralDebug />
-    </Router>
-  </PiralProvider>
+export const PiralView: React.FC<PiralViewProps> = ({ breakpoints, children }) => (
+  <>
+    <PiralGlobals />
+    <PiralSuspense>
+      <ResponsiveLayout breakpoints={breakpoints} Layout={RegisteredLayout}>
+        <PiralRoutes NotFound={NotFound} RouteSwitch={RegisteredRouteSwitch} />
+      </ResponsiveLayout>
+    </PiralSuspense>
+    {children}
+  </>
 );
 PiralView.displayName = 'PiralView';

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/ResponsiveLayout.test.tsx

@@ -1,63 +1,44 @@
 import * as React from 'react';
 import * as hooks from '../hooks';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { ResponsiveLayout } from './ResponsiveLayout';
 import { defaultBreakpoints } from '../utils';
 
 jest.mock('../hooks');
 
-(hooks as any).useGlobalState = (select: any) =>
-  select({
-    app: {
-      layout: 'desktop',
-    },
-  });
-
-const StubComponent: React.FC = () => <div />;
-StubComponent.displayName = 'StubComponent';
-
 describe('Responsive Module', () => {
   it('always renders the given children', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
     (hooks as any).useMedia = () => 'desktop';
-    const node = mount(
-      <ResponsiveLayout breakpoints={defaultBreakpoints}>
-        <StubComponent />)
+    const Layout: React.FC = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    Layout.displayName = 'Layout';
+    const StubComponent: React.FC = () => <div role="stub" />;
+    StubComponent.displayName = 'StubComponent';
+    const node = render(
+      <ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints}>
+        <StubComponent />
       </ResponsiveLayout>,
     );
-    expect(node.find(StubComponent).length).toBe(1);
-  });
-
-  it('does not call changeTo when nothing changed', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
-    (hooks as any).useMedia = () => 'desktop';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).not.toHaveBeenCalled();
+    expect(node.queryAllByRole('stub').length).toBe(1);
   });
 
   it('does not call changeTo when nothing changed', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
     (hooks as any).useMedia = () => 'desktop';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).not.toHaveBeenCalled();
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    render(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'desktop' }, {});
   });
 
   it('does calls changeTo when someething changed (desktop -> tablet)', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
     (hooks as any).useMedia = () => 'tablet';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).toHaveBeenCalledWith('tablet');
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    render(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'tablet' }, {});
   });
 
   it('does calls changeTo when someething changed (desktop -> mobile)', () => {
-    const changeTo = jest.fn();
-    (hooks as any).useAction = () => changeTo;
     (hooks as any).useMedia = () => 'mobile';
-    mount(<ResponsiveLayout breakpoints={defaultBreakpoints} />);
-    expect(changeTo).toHaveBeenCalledWith('mobile');
+    const Layout = jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
+    render(<ResponsiveLayout Layout={Layout} breakpoints={defaultBreakpoints} />);
+    expect(Layout).toHaveBeenCalledWith({ currentLayout: 'mobile' }, {});
   });
 });

package/src/components/ResponsiveLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useMedia, useGlobalState, useAction } from '../hooks';
-import { defaultLayouts, defaultRender, defaultBreakpoints } from '../utils';
-import { LayoutBreakpoints } from '../types';
+import { useMedia } from '../hooks';
+import { defaultLayouts, defaultBreakpoints } from '../utils';
+import { LayoutBreakpoints, LayoutProps } from '../types';
 
 /**
  * The props for the ResponsiveLayout component.
@@ -11,22 +11,25 @@ export interface ResponsiveLayoutProps {
    * The individual breakpoints to be used for the different layouts.
    */
   breakpoints?: LayoutBreakpoints;
+  /**
+   * The actual layout component to render to transport.
+   */
+  Layout: React.ComponentType<LayoutProps>;
+  /**
+   * The content to display.
+   */
+  children: React.ReactNode;
 }
 
 /**
  * The component capable of identifying and switching the currently used layout.
  */
-export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({ breakpoints = defaultBreakpoints, children }) => {
-  const current = useGlobalState((m) => m.app.layout) || 'desktop';
-  const changeTo = useAction('changeLayout');
-  const selected = useMedia(breakpoints, defaultLayouts, current);
-
-  React.useEffect(() => {
-    if (selected !== current) {
-      changeTo(selected);
-    }
-  }, [selected]);
-
-  return defaultRender(children);
+export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
+  breakpoints = defaultBreakpoints,
+  Layout,
+  children,
+}) => {
+  const selected = useMedia(breakpoints, defaultLayouts, 'desktop');
+  return <Layout currentLayout={selected}>{children}</Layout>;
 };
 ResponsiveLayout.displayName = 'ResponsiveLayout';

package/src/components/SwitchErrorInfo.test.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { SwitchErrorInfo } from './SwitchErrorInfo';
+
+jest.mock('../hooks/globalState', () => ({
+  useGlobalState(select: any) {
+    return select(state);
+  },
+}));
+
+const StubComponent1: React.FC<any> = (props) => <div role="stub" children={props.children} />;
+const Unknown: React.FC<any> = (props) => <div role="unknown" children={props.children} />;
+
+const state = {
+  registry: {
+    extensions: {},
+  },
+  errorComponents: {
+    stubComponent1: StubComponent1,
+    unknown: Unknown,
+  },
+};
+
+(React as any).useMemo = (cb) => cb();
+
+describe('SwitchErrorInfo Module', () => {
+  it('is able to render StubComponent1 component', () => {
+    const node = render(<SwitchErrorInfo type="stubComponent1" />);
+    expect(node.queryAllByRole('stub').length).toBe(1);
+  });
+
+  it('is able to default render Unknow component if the compenent name not available in state data', () => {
+    const node = render(<SwitchErrorInfo type="notRealComponent" />);
+    expect(node.queryAllByRole('unknown').length).toBe(1);
+  });
+});

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

@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { useGlobalState } from '../hooks';
-import { ComponentsState, ErrorInfoProps, LoadingIndicatorProps, RouterProps, LayoutProps } from '../types';
+import { ComponentsState } from '../types';
 
+/**
+ * Gets a registered layout component by its name.
+ * This will always return a valid component. If nothing is found
+ * then the returned component will just return null.
+ * @param name The name of the registered layout component.
+ * @returns The registered layout component or an empty stub component.
+ */
 export function getPiralComponent<TKey extends keyof ComponentsState>(name: TKey): ComponentsState[TKey] {
   return (props) => {
     const Component = useGlobalState((s) => s.components[name]);
+    // tslint:disable-next-line:no-null-keyword
     return Component ? <Component {...props} /> : null;
   };
 }
@@ -13,28 +21,34 @@ export function getPiralComponent<TKey extends keyof ComponentsState>(name: TKey
  * Gets the currently registered ErrorInfo component.
  * By default the DefaultErrorInfo component is used.
  */
-export const PiralError: React.ComponentType<ErrorInfoProps> = getPiralComponent('ErrorInfo');
+export const RegisteredErrorInfo = getPiralComponent('ErrorInfo');
 
 /**
  * Gets the currently registered LoadingIndicator component.
  * By default only Loading is rendered.
  */
-export const PiralLoadingIndicator: React.ComponentType<LoadingIndicatorProps> = getPiralComponent('LoadingIndicator');
+export const RegisteredLoadingIndicator = getPiralComponent('LoadingIndicator');
 
 /**
  * Gets the currently registered Router component.
  * By default the BrowserRouter is used.
  */
-export const PiralRouter: React.ComponentType<RouterProps> = getPiralComponent('Router');
+export const RegisteredRouter = getPiralComponent('Router');
+
+/**
+ * Gets the currently registered Route Switch component.
+ * By default the DefaultRouteSwitch component is used.
+ */
+export const RegisteredRouteSwitch = getPiralComponent('RouteSwitch');
 
 /**
  * Gets the currently registered Layout component.
  * By default the children are rendered.
  */
-export const PiralLayout: React.ComponentType<LayoutProps> = getPiralComponent('Layout');
+export const RegisteredLayout = getPiralComponent('Layout');
 
 /**
  * Gets the currently registered Debug component.
  * By default nothing is used.
  */
-export const PiralDebug: React.ComponentType = getPiralComponent('Debug');
+export const RegisteredDebug = getPiralComponent('Debug');

package/src/components/index.ts

@@ -1,18 +1,12 @@
 export * from './components';
-export * from './DefaultErrorInfo';
-export * from './DefaultLayout';
-export * from './DefaultLoader';
 export * from './ErrorBoundary';
 export * from './ExtensionSlot';
 export * from './Mediator';
+export * from './PiralGlobals';
 export * from './PiralRoutes';
+export * from './PiralSuspense';
 export * from './PiralView';
+export * from './PortalRenderer';
 export * from './ResponsiveLayout';
-export * from './SetComponent';
-export * from './SetError';
-export * from './SetErrors';
-export * from './SetLayout';
-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 { PortalRenderer } from './PortalRenderer';
+import { ForeignComponentContainer } from './ForeignComponentContainer';
+import { useGlobalStateContext } from '../hooks';
+import { convertComponent, none } from '../utils';
+import { publicPath } from '../../app.codegen';
+import type { 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 { destroyPortal, navigation } = useGlobalStateContext();
+    const id = React.useMemo(() => (portalIdBase++).toString(26), none);
+    // router added for backwards compatibility
+    const context = React.useMemo(() => ({ publicPath, navigation, router: navigation.router }), []);
+    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.test.tsx

@@ -11,4 +11,14 @@ describe('Piral-Core createInstance module', () => {
     const instance = createInstance({ async: true });
     expect(instance.options.strategy).toBe(blazingStrategy);
   });
+
+  it('createInstance with empty actions and plugins uses the standard strategy', () => {
+    const instance = createInstance({ plugins: {}, actions: {} });
+    expect(instance.options.strategy).toBe(standardStrategy);
+  })
+
+  it('createInstance with async function uses the blazing strategy', () => {
+    const instance = createInstance({ async: () => { } });
+    expect(instance.options.strategy).not.toBe(blazingStrategy);
+  })
 });

package/src/createInstance.tsx

@@ -1,10 +1,10 @@
 import { __assign } from 'tslib';
-import { blazingStrategy, standardStrategy, isfunc } from 'piral-base';
-import { getLocalDependencies, defaultApiFactory, defaultModuleRequester } from './modules';
+import { blazingStrategy, standardStrategy, createListener, isfunc } from 'piral-base';
+import { defaultApiFactory, defaultDependencySelector, defaultModuleRequester } from './modules';
 import { createGlobalState, createActions, includeActions } from './state';
 import { createPiletOptions } from './helpers';
-import { createListener } from './utils';
-import type { PiralConfiguration, PiralInstance } from './types';
+import { generateId } from './utils';
+import type { PiralInstanceOptions, PiralInstance } from './types';
 
 /**
  * Creates a new PiralInstance component, which can be used for
@@ -26,32 +26,36 @@ const app = (
 render(app, document.querySelector('#app'));
 ```
  */
-export function createInstance(config: PiralConfiguration = {}): PiralInstance {
+export function createInstance(config: PiralInstanceOptions = {}): PiralInstance {
   const {
+    id = generateId(),
     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({
-    name: 'root',
-    version: process.env.BUILD_PCKG_VERSION || '1.0.0',
-    spec: '',
+    name: '_',
+    version: '0',
+    spec: 'v0',
+    basePath: '',
+    link: '',
+    config: {},
+    dependencies: {},
   });
   const options = createPiletOptions({
     context,
@@ -59,11 +63,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) {
@@ -73,6 +77,7 @@ export function createInstance(config: PiralConfiguration = {}): PiralInstance {
   context.options = options;
 
   return __assign(events, {
+    id,
     createApi,
     context,
     root,