@pushwoosh/single-spa 1.4.0 → 1.5.0

package/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export declare const ErrorFallback: () => import("react").JSX.Element;
+type ParcelErrorBoundaryProps = {
+    module: string;
+    onError?: (error: Error) => void;
+    children: ReactNode;
+};
+export declare class ParcelErrorBoundary extends Component<ParcelErrorBoundaryProps, {
+    hasError: boolean;
+}> {
+    constructor(props: ParcelErrorBoundaryProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}
+export {};

package/ErrorBoundary.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+export const ErrorFallback = () => _jsxs("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: 520,
+    margin: '64px auto',
+    padding: 24,
+    textAlign: 'center'
+  },
+  children: [_jsx("h2", {
+    style: {
+      margin: '0 0 8px',
+      fontSize: 20,
+      fontWeight: 500
+    },
+    children: "Something went wrong"
+  }), _jsx("p", {
+    style: {
+      margin: 0,
+      color: '#7C8595'
+    },
+    children: "Please refresh the page or try again later."
+  })]
+});
+export class ParcelErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(`Parcel ${this.props.module} caught an error`, error, errorInfo);
+    this.props.onError?.(error);
+  }
+  render() {
+    return this.state.hasError ? _jsx(ErrorFallback, {}) : this.props.children;
+  }
+}

package/Parcel.d.ts

@@ -3,6 +3,7 @@ type ParcelProps = {
     className?: string;
     module: string;
     parcelFunctionName?: string;
+    inline?: boolean;
     [key: string]: any;
 };
 export declare const Parcel: FC<ParcelProps>;

package/Parcel.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { mountRootParcel } from 'single-spa';
 import SingleSpaParcel from 'single-spa-react/parcel';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { ParcelErrorBoundary } from './ErrorBoundary';
+import { isInlineParcelsEnabled } from './inlineParcels';
 import { loadModule } from './loadModule';
-export const Parcel = ({
-  className,
+const parcelKey = ({
   module,
-  parcelFunctionName = 'parcel',
-  ...transferProps
-}) => {
+  parcelFunctionName
+}) => `${module}-${parcelFunctionName}`;
+const MountedParcel = props => {
+  const {
+    className,
+    module,
+    parcelFunctionName,
+    ...transferProps
+  } = props;
   const spaContext = useSPAContext();
   const parcelConfig = useMemo(() => {
     let parcel;
@@ -40,5 +47,73 @@ export const Parcel = ({
     config: parcelConfig,
     wrapClassName: className,
     mountParcel: mountRootParcel
-  }, `${module}-${parcelFunctionName}`);
+  }, parcelKey(props));
+};
+const InlineParcel = props => {
+  const {
+    className,
+    module,
+    parcelFunctionName,
+    wrapWith: Wrapper = 'div',
+    wrapStyle,
+    handleError,
+    parcelDidMount,
+    ...transferProps
+  } = props;
+  const spaContext = useSPAContext();
+  const key = parcelKey(props);
+  const [loaded, setLoaded] = useState(null);
+  const Component = loaded?.key === key ? loaded.Component : undefined;
+  useEffect(() => {
+    let cancelled = false;
+    loadModule(module).then(imported => {
+      if (!cancelled) setLoaded({
+        key,
+        Component: imported[parcelFunctionName]?.Component
+      });
+    }, () => {
+      if (!cancelled) setLoaded({
+        key
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, module, parcelFunctionName]);
+  useEffect(() => {
+    if (Component) parcelDidMount?.();
+  }, [Component]); // eslint-disable-line react-hooks/exhaustive-deps
+  if (loaded?.key === key && !Component) {
+    return _jsx(MountedParcel, {
+      ...props
+    });
+  }
+  return _jsx(Wrapper, {
+    style: wrapStyle,
+    className: className,
+    children: Component && _jsx(ParcelErrorBoundary, {
+      module: module,
+      onError: handleError,
+      children: _jsx(Component, {
+        ...transferProps,
+        spaContext: spaContext
+      })
+    })
+  }, key);
+};
+export const Parcel = ({
+  inline,
+  parcelFunctionName = 'parcel',
+  ...rest
+}) => {
+  const [inlineByDefault] = useState(isInlineParcelsEnabled);
+  const props = {
+    ...rest,
+    parcelFunctionName
+  };
+  return (inline ?? inlineByDefault) && !props.appendTo ? _jsx(InlineParcel, {
+    ...props
+  }) : _jsx(MountedParcel, {
+    ...props
+  });
 };

package/createApplicationFunction.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Component } from 'react';
 import ReactDOMClient from 'react-dom/client';
 import singleSpaReact from 'single-spa-react';
 import { SPAContextProvider } from '@pushwoosh/spa-context';
+import { ErrorFallback } from './ErrorBoundary';
 export function createApplicationFunction(Comp) {
   class AppWrapper extends Component {
     constructor(props) {
@@ -21,32 +22,7 @@ export function createApplicationFunction(Comp) {
     }
     render() {
       if (this.state.hasError) {
-        return _jsxs("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            maxWidth: 520,
-            margin: '64px auto',
-            padding: 24,
-            textAlign: 'center'
-          },
-          children: [_jsx("h2", {
-            style: {
-              margin: '0 0 8px',
-              fontSize: 20,
-              fontWeight: 500
-            },
-            children: "Something went wrong"
-          }), _jsx("p", {
-            style: {
-              margin: 0,
-              color: '#7C8595'
-            },
-            children: "Please refresh the page or try again later."
-          })]
-        });
+        return _jsx(ErrorFallback, {});
       }
       return _jsx(SPAContextProvider, {
         value: this.props.spaContext,

package/createParcelFunction.d.ts

@@ -4,7 +4,10 @@ type ParcelResult<T> = {
     render: (props: T) => void;
     unmount: () => void;
 };
+export type ParcelFunction<T> = ((container: HTMLElement) => ParcelResult<T>) & {
+    Component: ComponentType<T>;
+};
 export declare function createParcelFunction<T extends {
     spaContext: SPAContextType;
-}>(Comp: ComponentType<T>): (container: HTMLElement) => ParcelResult<T>;
+}>(Comp: ComponentType<T>): ParcelFunction<T>;
 export {};

package/createParcelFunction.js

@@ -2,7 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import { SPAContextProvider } from '@pushwoosh/spa-context';
 export function createParcelFunction(Comp) {
-  return container => {
+  const Component = props => _jsx(SPAContextProvider, {
+    value: props.spaContext,
+    children: _jsx(Comp, {
+      ...props
+    })
+  });
+  const parcel = container => {
     const root = createRoot(container);
     return {
       render(props) {
@@ -18,4 +24,7 @@ export function createParcelFunction(Comp) {
       }
     };
   };
+  return Object.assign(parcel, {
+    Component
+  });
 }

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Parcel';
-export { createParcelFunction } from './createParcelFunction';
+export { createParcelFunction, type ParcelFunction } from './createParcelFunction';
 export { type ApplicationFunctionResult, createApplicationFunction } from './createApplicationFunction';
+export { INLINE_PARCELS_STORAGE_KEY } from './inlineParcels';
 export { loadModule } from './loadModule';

package/index.js

@@ -1,4 +1,5 @@
 export * from './Parcel';
 export { createParcelFunction } from './createParcelFunction';
 export { createApplicationFunction } from './createApplicationFunction';
+export { INLINE_PARCELS_STORAGE_KEY } from './inlineParcels';
 export { loadModule } from './loadModule';

package/inlineParcels.d.ts

@@ -0,0 +1,2 @@
+export declare const INLINE_PARCELS_STORAGE_KEY = "single-spa:inline-parcels";
+export declare function isInlineParcelsEnabled(): boolean;

package/inlineParcels.js

@@ -0,0 +1,8 @@
+export const INLINE_PARCELS_STORAGE_KEY = 'single-spa:inline-parcels';
+export function isInlineParcelsEnabled() {
+  try {
+    return globalThis.localStorage?.getItem(INLINE_PARCELS_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/single-spa",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "single-spa lifecycle helpers for Pushwoosh micro-frontends: application and parcel factories wrapped in SPAContextProvider",
   "repository": {
     "type": "git",