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

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,6 +92,9 @@ 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
@@ -133,9 +165,44 @@ 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;
+        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, ...userProps } = propsRef.current;
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -232,13 +299,17 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
     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
-        })
+          ...propsRef.current
+        }, `${appInfo.name}-${propsUpdateCounterRef.current}`)
       })
     });
   }

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,6 +90,9 @@ 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
@@ -107,12 +161,43 @@ 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;
+        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, setLoadingState = _propsRef_current.setLoadingState, userProps = _object_without_properties(_propsRef_current, [
         "setLoadingState"
       ]);
       var loadAppOptions = _object_spread_props(_object_spread({
@@ -263,11 +348,15 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
     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({}, propsRef.current), "".concat(appInfo.name, "-").concat(propsUpdateCounterRef.current))
       })
     });
   }

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,6 +58,9 @@ 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
@@ -99,9 +131,44 @@ 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;
+        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, ...userProps } = propsRef.current;
       const loadAppOptions = {
         cache: true,
         insulationVariable: [
@@ -198,13 +265,17 @@ or directly pass the "basename":
           }
         }
       };
-    }, []);
+    }, [
+      basename,
+      domId,
+      appInfo.name
+    ]);
     return /* @__PURE__ */ _jsx(_Fragment, {
       children: /* @__PURE__ */ _jsx("div", {
         id: domId,
         children: SubModuleComponent && /* @__PURE__ */ _jsx(SubModuleComponent, {
-          ...props
-        })
+          ...propsRef.current
+        }, `${appInfo.name}-${propsUpdateCounterRef.current}`)
       })
     });
   }

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.68.18",
+  "version": "2.68.19-alpha.0",
   "jsnext:source": "./src/cli/index.ts",
   "types": "./dist/types/cli/index.d.ts",
   "typesVersions": {
@@ -69,8 +69,8 @@
     "debug": "4.3.7",
     "garfish": "^1.8.1",
     "react-loadable": "^5.5.0",
-    "@modern-js/plugin-v2": "2.68.18",
     "@modern-js/runtime-utils": "2.68.18",
+    "@modern-js/plugin-v2": "2.68.18",
     "@modern-js/utils": "2.68.18"
   },
   "peerDependencies": {
@@ -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/types": "2.68.18"
   },
   "sideEffects": false,
   "publishConfig": {