piral-core 1.0.0-pre.2217 → 1.0.0

package/src/state/createGlobalState.ts

@@ -1,6 +1,5 @@
-import { Atom } from '@dbeining/react-atom';
-import { BrowserRouter } from 'react-router-dom';
-import { DefaultErrorInfo, DefaultLoadingIndicator, DefaultLayout } from '../components';
+import create from 'zustand';
+import { createDefaultState } from '../../app.codegen';
 import { GlobalState, NestedPartial } from '../types';
 
 function extend<T>(defaultState: T, customState: NestedPartial<T>) {
@@ -19,29 +18,6 @@ function extend<T>(defaultState: T, customState: NestedPartial<T>) {
 }
 
 export function createGlobalState(customState: NestedPartial<GlobalState> = {}) {
-  const defaultState: GlobalState = {
-    app: {
-      error: undefined,
-      loading: typeof window !== 'undefined',
-      layout: 'desktop',
-    },
-    components: {
-      ErrorInfo: DefaultErrorInfo,
-      LoadingIndicator: DefaultLoadingIndicator,
-      Router: BrowserRouter,
-      Layout: DefaultLayout,
-    },
-    errorComponents: {},
-    registry: {
-      extensions: {},
-      pages: {},
-      wrappers: {},
-    },
-    routes: {},
-    data: {},
-    portals: {},
-    modules: [],
-  };
-
-  return Atom.of(extend(defaultState, customState));
+  const defaultState: GlobalState = createDefaultState();
+  return create(() => extend(defaultState, customState));
 }

package/src/state/withApi.test.tsx

@@ -1,19 +1,28 @@
 import * as React from 'react';
-import * as hooks from '../hooks';
-import { mount } from 'enzyme';
-import { Atom } from '@dbeining/react-atom';
+import create from 'zustand';
+import { render } from '@testing-library/react';
 import { withApi } from './withApi';
 import { StateContext } from '../state';
 
 function createMockContainer() {
-  const state = Atom.of({
+  const state = create(() => ({
+    app: {},
+    components: {
+      ErrorInfo: StubErrorInfo,
+    },
+    registry: {
+      wrappers: { feed: 'test', '*': 'test' },
+    },
     portals: {},
-  });
+  }));
   return {
     context: {
-      converters: { },
-      readState() {
-        return undefined;
+      converters: {},
+      readState(cb) {
+        return cb(state.getState());
+      },
+      navigation: {
+        router: undefined,
       },
       on: jest.fn(),
       off: jest.fn(),
@@ -24,46 +33,76 @@ function createMockContainer() {
   };
 }
 
-jest.mock('../hooks');
-
-(hooks as any).useGlobalState = (select: any) =>
-  select({
+function createMockContainerWithNoWrappers() {
+  const state = create(() => ({
     components: {
       ErrorInfo: StubErrorInfo,
     },
-  });
-
-(hooks as any).useActions = () => ({
-  destroyPortal: jest.fn(),
-});
+    registry: {},
+    portals: {},
+  }));
+  return {
+    context: {
+      converters: {},
+      readState(cb) {
+        return cb({
+          registry: {
+            wrappers: {},
+          },
+        });
+      },
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+      state,
+      destroyPortal: (id) => {},
+    } as any,
+  };
+}
 
-const StubErrorInfo: React.FC = (props) => <div />;
+const StubErrorInfo: React.FC<any> = ({ type }) => <div role="error">{type}</div>;
 StubErrorInfo.displayName = 'StubErrorInfo';
 
-const StubComponent: React.FC<{ shouldCrash?: boolean }> = ({ shouldCrash }) => {
+const StubComponent: React.FC<{ shouldCrash?: boolean; piral?: any }> = ({ shouldCrash, piral }) => {
   if (shouldCrash) {
     throw new Error('I should crash!');
   }
-  return <div />;
+  return <div role="component">{piral && 'piral'}</div>;
 };
 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 />);
-    expect(node.find(StubComponent).first().prop('piral')).toBe(api);
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Component />
+      </StateContext.Provider>,
+    );
+    expect(node.getByRole('component').textContent).toBe('piral');
   });
 
   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 />);
-    expect(node.find(StubErrorInfo).first().prop('type')).toBe('feed');
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Component shouldCrash />
+      </StateContext.Provider>,
+    );
+    expect(node.getByRole('error').textContent).toBe('feed');
   });
 
   it('reports to console.error when an error is hit', () => {
@@ -75,40 +114,48 @@ describe('withApi Module', () => {
     };
     const { context } = createMockContainer();
     const Component = withApi(context, StubComponent, api, 'feed' as any);
-    mount(<Component shouldCrash />);
+    render(
+      <StateContext.Provider value={context}>
+        <Component shouldCrash />
+      </StateContext.Provider>,
+    );
     expect(console.error).toHaveBeenCalled();
   });
 
   it('Wraps component of type object', () => {
-    const api: any = {};
+    const api: any = {
+      meta: {
+        name: 'foo',
+      },
+    };
     const { context } = createMockContainer();
     context.converters = {
-      html: (component) => {
-        return component.component;
-      },
+      html: ({ component }) => component,
     };
     const Component = withApi(context, { type: 'html', component: { mount: () => {} } }, api, 'unknown');
 
-    const node = mount(
+    const node = render(
       <StateContext.Provider value={context}>
         <Component />
       </StateContext.Provider>,
     );
 
-    expect(node.children.length).toBe(1);
+    expect(node.container.children.length).toBe(1);
   });
 
   it('Wraps component which is object == null.', () => {
-    const api: any = {};
-    const { context } = createMockContainer();
-    context.converters = {
-      html: (component) => {
-        return component.component;
+    const api: any = {
+      meta: {
+        name: 'foo',
       },
     };
-    const Component = withApi(context, null, api, 'unknown');
+    const { context } = createMockContainerWithNoWrappers();
+    context.converters = {
+      html: ({ component }) => component,
+    };
+    const Component = withApi(context, null as any, api, 'unknown');
 
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <Component />
       </StateContext.Provider>,

package/src/state/withApi.tsx

@@ -1,165 +1,40 @@
 import * as React from 'react';
-import { isfunc } from 'piral-base';
-import { __RouterContext } from 'react-router';
-import { StateContext } from './stateContext';
-import { PiralError, PiralLoadingIndicator, ErrorBoundary, ErrorBoundaryOptions } from '../components';
-import { useGlobalState, useActions } from '../hooks';
-import { defaultRender, convertComponent } from '../utils';
-import {
-  AnyComponent,
-  Errors,
-  ComponentConverters,
-  ForeignComponent,
-  PiletApi,
-  BaseComponentProps,
-  ComponentContext,
-  GlobalStateContext,
-} from '../types';
+import { ErrorBoundary, wrapComponent } from '../components';
+import { defaultRender } from '../utils';
+import { AnyComponent, Errors, PiletApi, BaseComponentProps, GlobalStateContext } from '../types';
 
-let portalIdBase = 123456;
+const DefaultWrapper: React.FC<React.PropsWithChildren<{}>> = (props) => defaultRender(props.children);
 
-interface PortalRendererProps {
-  id: string;
-}
-
-const PortalRenderer: React.FC<PortalRendererProps> = ({ id }) => {
-  const children = useGlobalState((m) => m.portals[id] || []);
-  return defaultRender(children);
-};
-
-const DefaultWrapper: React.FC = (props) => <>{props.children}</>;
-
-interface ForeignComponentContainerProps<T> {
-  $portalId: string;
-  $component: ForeignComponent<T>;
-  $context: ComponentContext;
-  innerProps: T & BaseComponentProps;
-}
-
-class ForeignComponentContainer<T> extends React.Component<ForeignComponentContainerProps<T>> {
-  private current?: HTMLElement;
-  private previous?: HTMLElement;
-
-  componentDidMount() {
-    const node = this.current;
-    const { $component, $context, innerProps } = this.props;
-    const { mount } = $component;
-
-    if (node && isfunc(mount)) {
-      mount(node, innerProps, $context);
-    }
-
-    this.previous = node;
-  }
+function getWrapper(wrappers: Record<string, React.ComponentType<any>>, wrapperType: string) {
+  const WrapAll = wrappers['*'];
+  const WrapType = wrappers[wrapperType];
 
-  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);
-    }
-
-    this.previous = undefined;
-  }
-
-  render() {
-    const { $portalId } = this.props;
-
-    return (
-      <div
-        data-portal-id={$portalId}
-        ref={(node) => {
-          this.current = node;
-        }}
-      />
+  if (WrapAll && WrapType) {
+    return (props) => (
+      <WrapAll {...props}>
+        <WrapType {...props} />
+      </WrapAll>
     );
   }
-}
-
-function wrapReactComponent<T>(
-  Component: React.ComponentType<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-): React.ComponentType<T> {
-  return (props: T) => (
-    <Wrapper {...props} piral={piral}>
-      <ErrorBoundary {...stasisOptions} renderProps={props}>
-        <Component {...props} piral={piral} />
-      </ErrorBoundary>
-    </Wrapper>
-  );
-}
-
-function wrapForeignComponent<T>(
-  component: ForeignComponent<T & BaseComponentProps>,
-  stasisOptions: ErrorBoundaryOptions<T>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-): React.ComponentType<T> {
-  return (props: T) => {
-    const { destroyPortal } = useActions();
-    const [id] = React.useState(() => (portalIdBase++).toString(26));
-    const router = React.useContext(__RouterContext);
-    const { state } = React.useContext(StateContext);
-    const innerProps = { ...props, piral };
-
-    React.useEffect(() => () => destroyPortal(id), []);
-
-    return (
-      <Wrapper {...innerProps}>
-        <ErrorBoundary {...stasisOptions} renderProps={props}>
-          <PortalRenderer id={id} />
-          <ForeignComponentContainer
-            innerProps={innerProps}
-            $portalId={id}
-            $component={component}
-            $context={{ router, state }}
-          />
-        </ErrorBoundary>
-      </Wrapper>
-    );
-  };
-}
 
-function isNotExotic(component: any): component is object {
-  return !(component as React.ExoticComponent).$$typeof;
+  return WrapType || WrapAll || DefaultWrapper;
 }
 
-function wrapComponent<T>(
-  converters: ComponentConverters<T & BaseComponentProps>,
-  component: AnyComponent<T & BaseComponentProps>,
-  piral: PiletApi,
-  Wrapper: React.ComponentType<any>,
-  stasisOptions: ErrorBoundaryOptions<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);
-  }
+function makeWrapper<TProps>(
+  context: GlobalStateContext,
+  outerProps: any,
+  wrapperType: string,
+  errorType: keyof Errors,
+): React.FC<React.PropsWithChildren<TProps>> {
+  const OuterWrapper = context.readState((m) => getWrapper(m.registry.wrappers, wrapperType));
 
-  return wrapReactComponent<T>(component, stasisOptions, piral, Wrapper);
+  return (props) => (
+    <OuterWrapper {...outerProps} {...props}>
+      <ErrorBoundary {...outerProps} {...props} errorType={errorType}>
+        {props.children}
+      </ErrorBoundary>
+    </OuterWrapper>
+  );
 }
 
 export function withApi<TProps>(
@@ -168,19 +43,10 @@ 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) => m.registry.wrappers[wrapperType]) || DefaultWrapper;
-
-  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 Wrapper = makeWrapper<TProps>(context, outerProps, wrapperType, errorType);
+  return wrapComponent(converters, component, outerProps, Wrapper);
 }

package/src/tools/codegen.ts

@@ -0,0 +1,193 @@
+// this file is bundled, so the references here will not be at runtime (i.e., for a user)
+import { getModulePath } from 'piral-cli/src/external/resolve';
+
+function getRouterVersion(root: string) {
+  const router = 'react-router';
+
+  try {
+    const modulePath = getModulePath(root, `${router}/package.json`);
+    const { version } = require(modulePath);
+    const [major] = version.split('.');
+    return parseInt(major, 10);
+  } catch {
+    console.warn(`⚠ Could not determine version of ${router}. Falling back to v5.`);
+    return 5;
+  }
+}
+
+function getIdentifiers(root: string, packageName: string) {
+  const packageJson = `${packageName}/package.json`;
+  const identifiers = [packageName];
+
+  try {
+    const modulePath = getModulePath(root, packageJson);
+    const details = require(modulePath);
+
+    if (details.version) {
+      identifiers.push(`${packageName}@${details.version}`);
+
+      if (details.name !== packageName) {
+        identifiers.push(`${details.name}@${details.version}`);
+      }
+    }
+  } catch {}
+
+  return identifiers;
+}
+
+function getModulePathOrDefault(root: string, name: string) {
+  try {
+    return getModulePath(root, name);
+  } catch {
+    return name;
+  }
+}
+
+interface CodegenOptions {
+  root: string;
+  cat: string;
+  appName: string;
+  externals: Array<string>;
+  publicPath: string;
+  debug?: {
+    viewState?: boolean;
+    loadPilets?: boolean;
+    hardRefresh?: boolean;
+    viewOrigins?: boolean;
+    extensionCatalogue?: boolean;
+    clearConsole?: boolean;
+  };
+  emulator: boolean;
+}
+
+export function createDependencies(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
+  const { root, appName, externals } = opts;
+  const assignments: Array<string> = [];
+
+  if (appName) {
+    assignments.push(`deps['${appName}']={}`);
+  }
+
+  for (const name of externals) {
+    const identifiers = getIdentifiers(root, name);
+    const path = getModulePathOrDefault(root, name);
+    const ref = `_${imports.length}`;
+    imports.push(`import * as ${ref} from ${JSON.stringify(path)}`);
+
+    for (const id of identifiers) {
+      assignments.push(`deps[${JSON.stringify(id)}]=${ref}`);
+    }
+  }
+
+  exports.push(`
+    export function fillDependencies(deps) {
+      ${assignments.join(';')}
+    }
+  `);
+}
+
+export function createDefaultState(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
+  const { root, cat, publicPath } = opts;
+  const routerVersion = getRouterVersion(root);
+
+  imports.push(
+    `import { DefaultErrorInfo } from 'piral-core/${cat}/defaults/DefaultErrorInfo';`,
+    `import { DefaultLoadingIndicator } from 'piral-core/${cat}/defaults/DefaultLoadingIndicator';`,
+    `import { DefaultLayout } from 'piral-core/${cat}/defaults/DefaultLayout';`,
+  );
+
+  if (routerVersion < 6) {
+    imports.push(
+      `import { DefaultRouter } from 'piral-core/${cat}/defaults/DefaultRouter_v5';`,
+      `import { DefaultRouteSwitch } from 'piral-core/${cat}/defaults/DefaultRouteSwitch_v5';`,
+      `import { createRedirect, createNavigation, useCurrentNavigation, useRouterContext } from 'piral-core/${cat}/defaults/navigator_v5'`,
+    );
+  } else {
+    imports.push(
+      `import { DefaultRouter } from 'piral-core/${cat}/defaults/DefaultRouter_v6';`,
+      `import { DefaultRouteSwitch } from 'piral-core/${cat}/defaults/DefaultRouteSwitch_v6';`,
+      `import { createRedirect, createNavigation, useCurrentNavigation, useRouterContext } from 'piral-core/${cat}/defaults/navigator_v6'`,
+    );
+  }
+
+  exports.push(`
+    export { createRedirect, createNavigation, useRouterContext };
+  `);
+
+  exports.push(`
+    export const publicPath = ${JSON.stringify(publicPath)};
+  `);
+
+  exports.push(`
+    export function createDefaultState() {
+      return {
+        app: {
+          error: undefined,
+          loading: typeof window !== 'undefined',
+        },
+        components: {
+          ErrorInfo: DefaultErrorInfo,
+          LoadingIndicator: DefaultLoadingIndicator,
+          Router: DefaultRouter,
+          RouteSwitch: DefaultRouteSwitch,
+          Layout: DefaultLayout,
+        },
+        errorComponents: {},
+        registry: {
+          extensions: {},
+          pages: {},
+          wrappers: {},
+        },
+        routes: {},
+        data: {},
+        portals: {},
+        modules: [],
+      };
+    }
+  `);
+}
+
+export function createDebugHandler(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
+  const { cat, debug, emulator } = opts;
+
+  // if we build the debug version of piral (debug and emulator build)
+  if (debug) {
+    const originalCall = `originalDebugger(context, options, { defaultSettings: ${JSON.stringify(debug)}, ...debug })`;
+    imports.push(`import { integrateDebugger as originalDebugger } from "piral-core/${cat}/tools/debugger"`);
+    exports.push(`export function integrateDebugger(context, options, debug) { return ${originalCall}; }`);
+  } else {
+    exports.push(`export function integrateDebugger() {}`);
+  }
+
+  // if we build the emulator version of piral (shipped to pilets)
+  if (emulator) {
+    imports.push(`import { integrateEmulator } from "piral-core/${cat}/tools/emulator"`);
+    exports.push(`export { integrateEmulator }`);
+  } else {
+    exports.push(`export function integrateEmulator() {}`);
+  }
+}
+
+export function createRouteHandler(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
+  const { cat, emulator } = opts;
+  const assignments = [];
+
+  imports.push(`import { useGlobalStateContext } from 'piral-core/${cat}/hooks/globalState';`);
+
+  assignments.push(`
+    useCurrentNavigation();
+  `);
+
+  if (emulator) {
+    imports.push(`import { useDebugRouteFilter } from 'piral-debug-utils';`);
+    assignments.push('return useDebugRouteFilter(paths);');
+  } else {
+    assignments.push('return paths;');
+  }
+
+  exports.push(`
+    export function useRouteFilter(paths) {
+      ${assignments.join('\n')}
+    }
+  `);
+}