fix: rerender module after props changed (#592)

packages/icestark-module/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.5.1
+
+- [fix] rerender module when props changed
+- [fix] get latest props after load module bundles
+
 ## 1.5.0
 
 - [fix] exports all library exports. ([#469](https://github.com/ice-lab/icestark/pull/469))

packages/icestark-module/src/MicroModule.tsx

@@ -45,7 +45,10 @@ export default class MicroModule extends React.Component<any, State> {
   }
 
   componentDidUpdate(prevProps) {
-    if (!shallowCompare(prevProps.moduleInfo || {}, this.props.moduleInfo || {})) {
+    const { moduleInfo: preModuleInfo = {}, ...preRest } = prevProps;
+    const { moduleInfo: curModuleInfo = {}, ...curRest } = this.props;
+
+    if (!shallowCompare(preModuleInfo, curModuleInfo) || !shallowCompare(preRest, curRest)) {
       this.mountModule();
     }
   }
@@ -79,9 +82,6 @@ export default class MicroModule extends React.Component<any, State> {
   }
 
   async mountModule() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { sandbox, moduleInfo, wrapperClassName, wrapperStyle, loadingComponent, handleError, ...rest } = this.props;
-
     if (!this.moduleInfo) {
       console.error(`Can't find ${this.props.moduleName} module in modules config`);
       return;
@@ -93,20 +93,22 @@ export default class MicroModule extends React.Component<any, State> {
       this.setState({ loading: true });
 
       try {
-        const { mount, component } = await loadModule(this.moduleInfo, sandbox);
+        const { mount, component } = await loadModule(this.moduleInfo, this.props.sandbox);
         const lifecycleMount = mount;
 
         !this.unmout && this.setState({ loading: false });
         if (lifecycleMount && component) {
           if (this.unmout) {
             unmoutModule(this.moduleInfo, this.mountNode);
           } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { sandbox, moduleInfo, wrapperClassName, wrapperStyle, loadingComponent, handleError, ...rest } = this.props;
             lifecycleMount(component, this.mountNode, rest);
           }
         }
       } catch (err) {
         this.setState({ loading: false });
-        handleError(err);
+        this.props.handleError(err);
       }
     }
   }