@pushwoosh/single-spa 0.2.3 → 0.2.5

package/Parcel.js

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 import { mountRootParcel } from 'single-spa';
 import SingleSpaParcel from 'single-spa-react/parcel';
+import { useSPAContext } from '@pushwoosh/spa-context';
 export const Parcel = ({
   className,
   module,
   parcelFunctionName = 'parcel',
   ...transferProps
 }) => {
+  const spaContext = useSPAContext();
   const parcelConfig = useMemo(() => {
     let parcel;
     return {
@@ -32,6 +34,7 @@ export const Parcel = ({
   }, [module, parcelFunctionName]);
   return React.createElement(SingleSpaParcel, {
     ...transferProps,
+    spaContext: spaContext,
     config: parcelConfig,
     wrapClassName: className,
     mountParcel: mountRootParcel,

package/createApplicationFunction.js

@@ -2,38 +2,58 @@ import React, { Component } from 'react';
 import ReactDOMClient from 'react-dom/client';
 import singleSpaReact from 'single-spa-react';
 import { SPAContextProvider } from '@pushwoosh/spa-context';
-class AppWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError() {
-    return {
-      hasError: true
-    };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error('AppWrapper caught an error', error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return React.createElement("div", null, "Application has been crashed! Please try again later!");
+export function createApplicationFunction(Comp) {
+  class AppWrapper extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        hasError: false
+      };
+    }
+    static getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+    componentDidCatch(error, errorInfo) {
+      console.error('AppWrapper caught an error', error, errorInfo);
+    }
+    render() {
+      if (this.state.hasError) {
+        return React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            maxWidth: 520,
+            margin: '64px auto',
+            padding: 24,
+            textAlign: 'center'
+          }
+        }, React.createElement("h2", {
+          style: {
+            margin: '0 0 8px',
+            fontSize: 20,
+            fontWeight: 500
+          }
+        }, "Something went wrong"), React.createElement("p", {
+          style: {
+            margin: 0,
+            color: '#7C8595'
+          }
+        }, "Please refresh the page or try again later."));
+      }
+      return React.createElement(SPAContextProvider, {
+        value: this.props.spaContext
+      }, React.createElement(Comp, {
+        ...this.props
+      }));
     }
-    return React.createElement(SPAContextProvider, {
-      value: this.props.spaContext
-    }, this.props.children);
   }
-}
-export function createApplicationFunction(Comp) {
   return singleSpaReact({
     React,
     ReactDOMClient,
-    rootComponent: props => React.createElement(AppWrapper, {
-      spaContext: props.spaContext
-    }, React.createElement(Comp, {
-      ...props
-    }))
+    rootComponent: AppWrapper
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/single-spa",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",