@modern-js/plugin-garfish 2.70.1 → 2.70.2

package/dist/cjs/runtime/provider.js

@@ -29,7 +29,7 @@ function generateRootDom(dom, id) {
   const mountNode = dom ? dom.querySelector(`#${id}`) || dom : document.getElementById(id);
   return mountNode;
 }
-function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat } = {}) {
+function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat, basename: customBasename } = {}) {
   return ({ basename, dom }) => {
     let root = null;
     const SubModuleComponent = disableComponentCompat ? null : (props) => {
@@ -48,24 +48,25 @@ function createProvider(id, { customBootstrap, beforeRender, disableComponentCom
     };
     return {
       async render({ basename: basename2, dom: dom2, props, appName }) {
+        const finalBasename = customBasename || basename2;
         const ModernRoot = (0, import_react.createRoot)(null);
         const mountNode = generateRootDom(dom2, id || "root");
         if (customBootstrap) {
           root = await customBootstrap(ModernRoot, () => (0, import_browser.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
-            basename: basename2,
+            basename: finalBasename,
             appName,
             ...props
           }), mountNode));
         } else {
           if (beforeRender) {
             await beforeRender(ModernRoot, {
-              basename: basename2,
+              basename: finalBasename,
               appName,
               ...props
             });
           }
           root = await (0, import_browser.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModernRoot, {
-            basename: basename2,
+            basename: finalBasename,
             appName,
             ...props
           }), mountNode);

package/dist/cjs/runtime/utils/apps.js

@@ -55,6 +55,35 @@ function pathJoin(...args) {
   }, "");
   return res || "/";
 }
+function deepEqualExcludeFunctions(prev, next) {
+  if (prev === next)
+    return true;
+  if (!prev || !next)
+    return false;
+  if (typeof prev !== "object" || typeof next !== "object")
+    return false;
+  const prevKeys = Object.keys(prev).filter((key) => typeof prev[key] !== "function");
+  const nextKeys = Object.keys(next).filter((key) => typeof next[key] !== "function");
+  if (prevKeys.length !== nextKeys.length)
+    return false;
+  for (const key of prevKeys) {
+    if (!nextKeys.includes(key))
+      return false;
+    const prevVal = prev[key];
+    const nextVal = next[key];
+    if (typeof prevVal === "function" || typeof nextVal === "function") {
+      continue;
+    }
+    if (typeof prevVal === "object" && typeof nextVal === "object") {
+      if (!deepEqualExcludeFunctions(prevVal, nextVal)) {
+        return false;
+      }
+    } else if (prevVal !== nextVal) {
+      return false;
+    }
+  }
+  return true;
+}
 function getAppInstance(options, appInfo, manifest) {
   const componentSetterRegistry = {
     current: null
@@ -63,10 +92,15 @@ function getAppInstance(options, appInfo, manifest) {
     var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
     const appRef = (0, import_react.useRef)(null);
     const locationHrefRef = (0, import_react.useRef)("");
+    const propsRef = (0, import_react.useRef)(props);
+    const previousPropsRef = (0, import_react.useRef)(props);
+    const propsUpdateCounterRef = (0, import_react.useRef)(0);
     const domId = (0, import_util.generateSubAppContainerKey)(appInfo);
-    const [{ component: SubModuleComponent }, setSubModuleComponent] = (0, import_react.useState)({
-      component: null
+    const [{ component: SubModuleComponent, isFromJupiter }, setSubModuleComponent] = (0, import_react.useState)({
+      component: null,
+      isFromJupiter: false
     });
+    const [propsUpdateKey, setPropsUpdateKey] = (0, import_react.useState)(0);
     const context = (0, import_react.useContext)(import_runtime.RuntimeReactContext);
     var _props_useRouteMatch;
     const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -133,9 +167,36 @@ or directly pass the "basename":
     }, [
       locationPathname
     ]);
+    (0, import_react.useEffect)(() => {
+      const prevPropsForCompare = {
+        ...previousPropsRef.current
+      };
+      const currentPropsForCompare = {
+        ...props
+      };
+      Object.keys(prevPropsForCompare).forEach((key) => {
+        if (typeof prevPropsForCompare[key] === "function") {
+          delete prevPropsForCompare[key];
+        }
+      });
+      Object.keys(currentPropsForCompare).forEach((key) => {
+        if (typeof currentPropsForCompare[key] === "function") {
+          delete currentPropsForCompare[key];
+        }
+      });
+      if (!deepEqualExcludeFunctions(prevPropsForCompare, currentPropsForCompare)) {
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey((prev) => prev + 1);
+      }
+    }, [
+      props,
+      appInfo.name
+    ]);
     (0, import_react.useEffect)(() => {
       componentSetterRegistry.current = setSubModuleComponent;
-      const { setLoadingState, ...userProps } = props;
+      const { setLoadingState: setLoadingState2, ...userProps } = propsRef.current;
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -152,13 +213,15 @@ or directly pass the "basename":
         customLoader: (provider) => {
           const { render, destroy, SubModuleComponent: SubModuleComponent2, jupiter_submodule_app_key } = provider;
           const SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
+          const isFromJupiter2 = !SubModuleComponent2 && !!jupiter_submodule_app_key;
           const componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
           return {
             mount: (...props2) => {
               if (componetRenderMode && SubComponent) {
                 if (componentSetterRegistry.current) {
                   componentSetterRegistry.current({
-                    component: SubComponent
+                    component: SubComponent,
+                    isFromJupiter: isFromJupiter2
                   });
                 } else {
                   (0, import_util.logger)(`[Garfish] MicroApp for "${appInfo.name}" tried to mount, but no active component setter was found.`);
@@ -179,7 +242,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -193,7 +256,7 @@ or directly pass the "basename":
             throw new Error(`MicroApp Garfish.loadApp "${appInfo.name}" result is null`);
           }
           appRef.current = appInstance;
-          setLoadingState({
+          setLoadingState2({
             isLoading: false
           });
           if (appInstance.mounted && appInstance.appInfo.cache) {
@@ -210,7 +273,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          setLoadingState2({
             isLoading: true,
             error
           });
@@ -232,12 +295,40 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
+    (0, import_react.useEffect)(() => {
+      var _appRef_current;
+      if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.appInfo) {
+        const { setLoadingState: setLoadingState2, ...updatedProps } = props;
+        const updatedPropsWithKey = {
+          ...appInfo.props,
+          ...updatedProps,
+          _garfishPropsUpdateKey: propsUpdateKey
+        };
+        appRef.current.appInfo.props = updatedPropsWithKey;
+      }
+    }, [
+      propsUpdateKey,
+      props
+    ]);
+    const { setLoadingState, ...renderProps } = props;
+    const finalRenderProps = {
+      ...renderProps,
+      _garfishPropsUpdateKey: propsUpdateKey
+    };
+    const componentKey = isFromJupiter ? void 0 : `${appInfo.name}-${propsUpdateKey}`;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         id: domId,
         children: SubModuleComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubModuleComponent, {
-          ...props
+          ...componentKey ? {
+            key: componentKey
+          } : {},
+          ...finalRenderProps
         })
       })
     });

package/dist/esm/runtime/provider.js

@@ -10,7 +10,7 @@ function generateRootDom(dom, id) {
   return mountNode;
 }
 function createProvider(id) {
-  var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, customBootstrap = _ref.customBootstrap, beforeRender = _ref.beforeRender, disableComponentCompat = _ref.disableComponentCompat;
+  var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, customBootstrap = _ref.customBootstrap, beforeRender = _ref.beforeRender, disableComponentCompat = _ref.disableComponentCompat, customBasename = _ref.basename;
   return function(param) {
     var basename = param.basename, dom = param.dom;
     var root = null;
@@ -30,10 +30,11 @@ function createProvider(id) {
       render: function render1(param2) {
         var basename2 = param2.basename, dom2 = param2.dom, props = param2.props, appName = param2.appName;
         return _async_to_generator(function() {
-          var ModernRoot, mountNode;
+          var finalBasename, ModernRoot, mountNode;
           return _ts_generator(this, function(_state) {
             switch (_state.label) {
               case 0:
+                finalBasename = customBasename || basename2;
                 ModernRoot = createRoot(null);
                 mountNode = generateRootDom(dom2, id || "root");
                 if (!customBootstrap)
@@ -45,7 +46,7 @@ function createProvider(id) {
                   4,
                   customBootstrap(ModernRoot, function() {
                     return render(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
-                      basename: basename2,
+                      basename: finalBasename,
                       appName
                     }, props)), mountNode);
                   })
@@ -65,7 +66,7 @@ function createProvider(id) {
                 return [
                   4,
                   beforeRender(ModernRoot, _object_spread({
-                    basename: basename2,
+                    basename: finalBasename,
                     appName
                   }, props))
                 ];
@@ -76,7 +77,7 @@ function createProvider(id) {
                 return [
                   4,
                   render(/* @__PURE__ */ _jsx(ModernRoot, _object_spread({
-                    basename: basename2,
+                    basename: finalBasename,
                     appName
                   }, props)), mountNode)
                 ];

package/dist/esm/runtime/utils/apps.js

@@ -4,6 +4,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { RuntimeReactContext } from "@meta/runtime";
@@ -31,6 +32,56 @@ function pathJoin() {
   }, "");
   return res || "/";
 }
+function deepEqualExcludeFunctions(prev, next) {
+  if (prev === next)
+    return true;
+  if (!prev || !next)
+    return false;
+  if ((typeof prev === "undefined" ? "undefined" : _type_of(prev)) !== "object" || (typeof next === "undefined" ? "undefined" : _type_of(next)) !== "object")
+    return false;
+  var prevKeys = Object.keys(prev).filter(function(key2) {
+    return typeof prev[key2] !== "function";
+  });
+  var nextKeys = Object.keys(next).filter(function(key2) {
+    return typeof next[key2] !== "function";
+  });
+  if (prevKeys.length !== nextKeys.length)
+    return false;
+  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = prevKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var key = _step.value;
+      if (!nextKeys.includes(key))
+        return false;
+      var prevVal = prev[key];
+      var nextVal = next[key];
+      if (typeof prevVal === "function" || typeof nextVal === "function") {
+        continue;
+      }
+      if ((typeof prevVal === "undefined" ? "undefined" : _type_of(prevVal)) === "object" && (typeof nextVal === "undefined" ? "undefined" : _type_of(nextVal)) === "object") {
+        if (!deepEqualExcludeFunctions(prevVal, nextVal)) {
+          return false;
+        }
+      } else if (prevVal !== nextVal) {
+        return false;
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return true;
+}
 function getAppInstance(options, appInfo, manifest) {
   var componentSetterRegistry = {
     current: null
@@ -39,10 +90,15 @@ function getAppInstance(options, appInfo, manifest) {
     var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
     var appRef = useRef(null);
     var locationHrefRef = useRef("");
+    var propsRef = useRef(props);
+    var previousPropsRef = useRef(props);
+    var propsUpdateCounterRef = useRef(0);
     var domId = generateSubAppContainerKey(appInfo);
     var _useState = _sliced_to_array(useState({
-      component: null
-    }), 2), _useState_ = _useState[0], SubModuleComponent = _useState_.component, setSubModuleComponent = _useState[1];
+      component: null,
+      isFromJupiter: false
+    }), 2), _useState_ = _useState[0], SubModuleComponent = _useState_.component, isFromJupiter = _useState_.isFromJupiter, setSubModuleComponent = _useState[1];
+    var _useState1 = _sliced_to_array(useState(0), 2), propsUpdateKey = _useState1[0], setPropsUpdateKey = _useState1[1];
     var context = useContext(RuntimeReactContext);
     var _props_useRouteMatch;
     var useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -107,12 +163,37 @@ or directly pass the "basename":
     }, [
       locationPathname
     ]);
+    useEffect(function() {
+      var prevPropsForCompare = _object_spread({}, previousPropsRef.current);
+      var currentPropsForCompare = _object_spread({}, props);
+      Object.keys(prevPropsForCompare).forEach(function(key2) {
+        if (typeof prevPropsForCompare[key2] === "function") {
+          delete prevPropsForCompare[key2];
+        }
+      });
+      Object.keys(currentPropsForCompare).forEach(function(key2) {
+        if (typeof currentPropsForCompare[key2] === "function") {
+          delete currentPropsForCompare[key2];
+        }
+      });
+      if (!deepEqualExcludeFunctions(prevPropsForCompare, currentPropsForCompare)) {
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey(function(prev) {
+          return prev + 1;
+        });
+      }
+    }, [
+      props,
+      appInfo.name
+    ]);
     useEffect(function() {
       var renderApp = function renderApp2() {
         return _renderApp.apply(this, arguments);
       };
       componentSetterRegistry.current = setSubModuleComponent;
-      var setLoadingState = props.setLoadingState, userProps = _object_without_properties(props, [
+      var _propsRef_current = propsRef.current, setLoadingState2 = _propsRef_current.setLoadingState, userProps = _object_without_properties(_propsRef_current, [
         "setLoadingState"
       ]);
       var loadAppOptions = _object_spread_props(_object_spread({
@@ -127,6 +208,7 @@ or directly pass the "basename":
         customLoader: function(provider) {
           var render = provider.render, destroy = provider.destroy, SubModuleComponent2 = provider.SubModuleComponent, jupiter_submodule_app_key = provider.jupiter_submodule_app_key;
           var SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
+          var isFromJupiter2 = !SubModuleComponent2 && !!jupiter_submodule_app_key;
           var componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
           return {
             mount: function() {
@@ -136,7 +218,8 @@ or directly pass the "basename":
               if (componetRenderMode && SubComponent) {
                 if (componentSetterRegistry.current) {
                   componentSetterRegistry.current({
-                    component: SubComponent
+                    component: SubComponent,
+                    isFromJupiter: isFromJupiter2
                   });
                 } else {
                   logger('[Garfish] MicroApp for "'.concat(appInfo.name, '" tried to mount, but no active component setter was found.'));
@@ -160,7 +243,7 @@ or directly pass the "basename":
           };
         }
       });
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -189,7 +272,7 @@ or directly pass the "basename":
                   throw new Error('MicroApp Garfish.loadApp "'.concat(appInfo.name, '" result is null'));
                 }
                 appRef.current = appInstance;
-                setLoadingState({
+                setLoadingState2({
                   isLoading: false
                 });
                 if (!(appInstance.mounted && appInstance.appInfo.cache))
@@ -230,7 +313,7 @@ or directly pass the "basename":
                 ];
               case 6:
                 error = _state.sent();
-                setLoadingState({
+                setLoadingState2({
                   isLoading: true,
                   error
                 });
@@ -263,11 +346,39 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
+    useEffect(function() {
+      var _appRef_current;
+      if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.appInfo) {
+        var setLoadingState2 = props.setLoadingState, updatedProps = _object_without_properties(props, [
+          "setLoadingState"
+        ]);
+        var updatedPropsWithKey = _object_spread_props(_object_spread({}, appInfo.props, updatedProps), {
+          _garfishPropsUpdateKey: propsUpdateKey
+        });
+        appRef.current.appInfo.props = updatedPropsWithKey;
+      }
+    }, [
+      propsUpdateKey,
+      props
+    ]);
+    var setLoadingState = props.setLoadingState, renderProps = _object_without_properties(props, [
+      "setLoadingState"
+    ]);
+    var finalRenderProps = _object_spread_props(_object_spread({}, renderProps), {
+      _garfishPropsUpdateKey: propsUpdateKey
+    });
+    var componentKey = isFromJupiter ? void 0 : "".concat(appInfo.name, "-").concat(propsUpdateKey);
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,
-        children: SubModuleComponent && /* @__PURE__ */ _jsx(SubModuleComponent, _object_spread({}, props))
+        children: SubModuleComponent && /* @__PURE__ */ _jsx(SubModuleComponent, _object_spread({}, componentKey ? {
+          key: componentKey
+        } : {}, finalRenderProps))
       })
     });
   }

package/dist/esm-node/runtime/provider.js

@@ -6,7 +6,7 @@ function generateRootDom(dom, id) {
   const mountNode = dom ? dom.querySelector(`#${id}`) || dom : document.getElementById(id);
   return mountNode;
 }
-function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat } = {}) {
+function createProvider(id, { customBootstrap, beforeRender, disableComponentCompat, basename: customBasename } = {}) {
   return ({ basename, dom }) => {
     let root = null;
     const SubModuleComponent = disableComponentCompat ? null : (props) => {
@@ -25,24 +25,25 @@ function createProvider(id, { customBootstrap, beforeRender, disableComponentCom
     };
     return {
       async render({ basename: basename2, dom: dom2, props, appName }) {
+        const finalBasename = customBasename || basename2;
         const ModernRoot = createRoot(null);
         const mountNode = generateRootDom(dom2, id || "root");
         if (customBootstrap) {
           root = await customBootstrap(ModernRoot, () => render(/* @__PURE__ */ _jsx(ModernRoot, {
-            basename: basename2,
+            basename: finalBasename,
             appName,
             ...props
           }), mountNode));
         } else {
           if (beforeRender) {
             await beforeRender(ModernRoot, {
-              basename: basename2,
+              basename: finalBasename,
               appName,
               ...props
             });
           }
           root = await render(/* @__PURE__ */ _jsx(ModernRoot, {
-            basename: basename2,
+            basename: finalBasename,
             appName,
             ...props
           }), mountNode);

package/dist/esm-node/runtime/utils/apps.js

@@ -21,6 +21,35 @@ function pathJoin(...args) {
   }, "");
   return res || "/";
 }
+function deepEqualExcludeFunctions(prev, next) {
+  if (prev === next)
+    return true;
+  if (!prev || !next)
+    return false;
+  if (typeof prev !== "object" || typeof next !== "object")
+    return false;
+  const prevKeys = Object.keys(prev).filter((key) => typeof prev[key] !== "function");
+  const nextKeys = Object.keys(next).filter((key) => typeof next[key] !== "function");
+  if (prevKeys.length !== nextKeys.length)
+    return false;
+  for (const key of prevKeys) {
+    if (!nextKeys.includes(key))
+      return false;
+    const prevVal = prev[key];
+    const nextVal = next[key];
+    if (typeof prevVal === "function" || typeof nextVal === "function") {
+      continue;
+    }
+    if (typeof prevVal === "object" && typeof nextVal === "object") {
+      if (!deepEqualExcludeFunctions(prevVal, nextVal)) {
+        return false;
+      }
+    } else if (prevVal !== nextVal) {
+      return false;
+    }
+  }
+  return true;
+}
 function getAppInstance(options, appInfo, manifest) {
   const componentSetterRegistry = {
     current: null
@@ -29,10 +58,15 @@ function getAppInstance(options, appInfo, manifest) {
     var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
     const appRef = useRef(null);
     const locationHrefRef = useRef("");
+    const propsRef = useRef(props);
+    const previousPropsRef = useRef(props);
+    const propsUpdateCounterRef = useRef(0);
     const domId = generateSubAppContainerKey(appInfo);
-    const [{ component: SubModuleComponent }, setSubModuleComponent] = useState({
-      component: null
+    const [{ component: SubModuleComponent, isFromJupiter }, setSubModuleComponent] = useState({
+      component: null,
+      isFromJupiter: false
     });
+    const [propsUpdateKey, setPropsUpdateKey] = useState(0);
     const context = useContext(RuntimeReactContext);
     var _props_useRouteMatch;
     const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
@@ -99,9 +133,36 @@ or directly pass the "basename":
     }, [
       locationPathname
     ]);
+    useEffect(() => {
+      const prevPropsForCompare = {
+        ...previousPropsRef.current
+      };
+      const currentPropsForCompare = {
+        ...props
+      };
+      Object.keys(prevPropsForCompare).forEach((key) => {
+        if (typeof prevPropsForCompare[key] === "function") {
+          delete prevPropsForCompare[key];
+        }
+      });
+      Object.keys(currentPropsForCompare).forEach((key) => {
+        if (typeof currentPropsForCompare[key] === "function") {
+          delete currentPropsForCompare[key];
+        }
+      });
+      if (!deepEqualExcludeFunctions(prevPropsForCompare, currentPropsForCompare)) {
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey((prev) => prev + 1);
+      }
+    }, [
+      props,
+      appInfo.name
+    ]);
     useEffect(() => {
       componentSetterRegistry.current = setSubModuleComponent;
-      const { setLoadingState, ...userProps } = props;
+      const { setLoadingState: setLoadingState2, ...userProps } = propsRef.current;
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -118,13 +179,15 @@ or directly pass the "basename":
         customLoader: (provider) => {
           const { render, destroy, SubModuleComponent: SubModuleComponent2, jupiter_submodule_app_key } = provider;
           const SubComponent = SubModuleComponent2 || jupiter_submodule_app_key;
+          const isFromJupiter2 = !SubModuleComponent2 && !!jupiter_submodule_app_key;
           const componetRenderMode = manifest === null || manifest === void 0 ? void 0 : manifest.componentRender;
           return {
             mount: (...props2) => {
               if (componetRenderMode && SubComponent) {
                 if (componentSetterRegistry.current) {
                   componentSetterRegistry.current({
-                    component: SubComponent
+                    component: SubComponent,
+                    isFromJupiter: isFromJupiter2
                   });
                 } else {
                   logger(`[Garfish] MicroApp for "${appInfo.name}" tried to mount, but no active component setter was found.`);
@@ -145,7 +208,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -159,7 +222,7 @@ or directly pass the "basename":
             throw new Error(`MicroApp Garfish.loadApp "${appInfo.name}" result is null`);
           }
           appRef.current = appInstance;
-          setLoadingState({
+          setLoadingState2({
             isLoading: false
           });
           if (appInstance.mounted && appInstance.appInfo.cache) {
@@ -176,7 +239,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          setLoadingState2({
             isLoading: true,
             error
           });
@@ -198,12 +261,40 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
+    useEffect(() => {
+      var _appRef_current;
+      if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.appInfo) {
+        const { setLoadingState: setLoadingState2, ...updatedProps } = props;
+        const updatedPropsWithKey = {
+          ...appInfo.props,
+          ...updatedProps,
+          _garfishPropsUpdateKey: propsUpdateKey
+        };
+        appRef.current.appInfo.props = updatedPropsWithKey;
+      }
+    }, [
+      propsUpdateKey,
+      props
+    ]);
+    const { setLoadingState, ...renderProps } = props;
+    const finalRenderProps = {
+      ...renderProps,
+      _garfishPropsUpdateKey: propsUpdateKey
+    };
+    const componentKey = isFromJupiter ? void 0 : `${appInfo.name}-${propsUpdateKey}`;
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,
         children: SubModuleComponent && /* @__PURE__ */ _jsx(SubModuleComponent, {
-          ...props
+          ...componentKey ? {
+            key: componentKey
+          } : {},
+          ...finalRenderProps
         })
       })
     });

package/dist/types/runtime/provider.d.ts

@@ -1,9 +1,10 @@
 import { type RenderFunc } from '@meta/runtime/browser';
 import type { Root } from 'react-dom/client';
-export declare function createProvider(id?: string, { customBootstrap, beforeRender, disableComponentCompat, }?: {
+export declare function createProvider(id?: string, { customBootstrap, beforeRender, disableComponentCompat, basename: customBasename, }?: {
     customBootstrap?: (App: React.ComponentType, render: RenderFunc) => Promise<HTMLElement | Root>;
     beforeRender?: (App: React.ComponentType, props?: Record<string, any>) => Promise<any>;
     disableComponentCompat?: boolean;
+    basename?: string;
 }): ({ basename, dom }: {
     basename: string;
     dom: HTMLElement;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.70.1",
+  "version": "2.70.2",
   "jsnext:source": "./src/cli/index.ts",
   "types": "./dist/types/cli/index.d.ts",
   "typesVersions": {
@@ -69,12 +69,12 @@
     "debug": "4.3.7",
     "garfish": "^1.8.1",
     "react-loadable": "^5.5.0",
-    "@modern-js/plugin-v2": "2.70.1",
-    "@modern-js/runtime-utils": "2.70.1",
-    "@modern-js/utils": "2.70.1"
+    "@modern-js/plugin-v2": "2.70.2",
+    "@modern-js/runtime-utils": "2.70.2",
+    "@modern-js/utils": "2.70.2"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "^2.70.1",
+    "@modern-js/runtime": "^2.70.2",
     "react": ">=17",
     "react-dom": ">=17"
   },
@@ -91,15 +91,15 @@
     "jest-location-mock": "2.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.30.3",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.70.1",
-    "@modern-js/core": "2.70.1",
-    "@modern-js/plugin-router-v5": "2.70.1",
-    "@modern-js/runtime": "2.70.1",
-    "@modern-js/types": "2.70.1",
+    "@modern-js/app-tools": "2.70.2",
+    "@modern-js/plugin-router-v5": "2.70.2",
+    "@modern-js/core": "2.70.2",
+    "@modern-js/types": "2.70.2",
     "@scripts/build": "2.66.0",
-    "@scripts/jest-config": "2.66.0"
+    "@scripts/jest-config": "2.66.0",
+    "@modern-js/runtime": "2.70.2"
   },
   "sideEffects": false,
   "publishConfig": {