@modern-js/plugin-garfish 2.68.18 → 2.68.19-alpha.1

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,14 @@ 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 [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 +166,45 @@ 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)) {
+        var _appRef_current;
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey((prev) => prev + 1);
+        if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.mounted) {
+          window.dispatchEvent(new CustomEvent("garfishPropsUpdated", {
+            detail: {
+              appName: appInfo.name,
+              props
+            }
+          }));
+        }
+      }
+    }, [
+      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: [
@@ -179,7 +248,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -193,7 +262,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 +279,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          setLoadingState2({
             isLoading: true,
             error
           });
@@ -232,13 +301,38 @@ 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 = `${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
-        })
+          ...finalRenderProps
+        }, componentKey)
       })
     });
   }

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,14 @@ 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];
+    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 +162,46 @@ 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)) {
+        var _appRef_current;
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey(function(prev) {
+          return prev + 1;
+        });
+        if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.mounted) {
+          window.dispatchEvent(new CustomEvent("garfishPropsUpdated", {
+            detail: {
+              appName: appInfo.name,
+              props
+            }
+          }));
+        }
+      }
+    }, [
+      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({
@@ -160,7 +249,7 @@ or directly pass the "basename":
           };
         }
       });
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -189,7 +278,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 +319,7 @@ or directly pass the "basename":
                 ];
               case 6:
                 error = _state.sent();
-                setLoadingState({
+                setLoadingState2({
                   isLoading: true,
                   error
                 });
@@ -263,11 +352,37 @@ 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 = "".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({}, finalRenderProps), componentKey)
       })
     });
   }

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,14 @@ 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 [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 +132,45 @@ 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)) {
+        var _appRef_current;
+        previousPropsRef.current = props;
+        propsRef.current = props;
+        propsUpdateCounterRef.current += 1;
+        setPropsUpdateKey((prev) => prev + 1);
+        if ((_appRef_current = appRef.current) === null || _appRef_current === void 0 ? void 0 : _appRef_current.mounted) {
+          window.dispatchEvent(new CustomEvent("garfishPropsUpdated", {
+            detail: {
+              appName: appInfo.name,
+              props
+            }
+          }));
+        }
+      }
+    }, [
+      props,
+      appInfo.name
+    ]);
     useEffect(() => {
       componentSetterRegistry.current = setSubModuleComponent;
-      const { setLoadingState, ...userProps } = props;
+      const { setLoadingState: setLoadingState2, ...userProps } = propsRef.current;
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -145,7 +214,7 @@ or directly pass the "basename":
           };
         }
       };
-      setLoadingState({
+      setLoadingState2({
         isLoading: true,
         error: null
       });
@@ -159,7 +228,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 +245,7 @@ or directly pass the "basename":
             await (appInstance === null || appInstance === void 0 ? void 0 : appInstance.mount());
           }
         } catch (error) {
-          setLoadingState({
+          setLoadingState2({
             isLoading: true,
             error
           });
@@ -198,13 +267,38 @@ 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 = `${appInfo.name}-${propsUpdateKey}`;
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,
         children: SubModuleComponent && /* @__PURE__ */ _jsx(SubModuleComponent, {
-          ...props
-        })
+          ...finalRenderProps
+        }, componentKey)
       })
     });
   }

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.68.18",
+  "version": "2.68.19-alpha.1",
   "jsnext:source": "./src/cli/index.ts",
   "types": "./dist/types/cli/index.d.ts",
   "typesVersions": {
@@ -69,9 +69,9 @@
     "debug": "4.3.7",
     "garfish": "^1.8.1",
     "react-loadable": "^5.5.0",
-    "@modern-js/plugin-v2": "2.68.18",
+    "@modern-js/utils": "2.68.18",
     "@modern-js/runtime-utils": "2.68.18",
-    "@modern-js/utils": "2.68.18"
+    "@modern-js/plugin-v2": "2.68.18"
   },
   "peerDependencies": {
     "@modern-js/runtime": "^2.68.18",
@@ -94,12 +94,12 @@
     "react-router-dom": "6.27.0",
     "typescript": "^5",
     "@modern-js/app-tools": "2.68.18",
+    "@scripts/build": "2.66.0",
     "@modern-js/core": "2.68.18",
     "@modern-js/plugin-router-v5": "2.68.18",
-    "@modern-js/runtime": "2.68.18",
-    "@scripts/build": "2.66.0",
     "@modern-js/types": "2.68.18",
-    "@scripts/jest-config": "2.66.0"
+    "@scripts/jest-config": "2.66.0",
+    "@modern-js/runtime": "2.68.18"
   },
   "sideEffects": false,
   "publishConfig": {