@fragmentsx/render-react 1.5.1 → 1.5.3

package/dist/hooks/fragment/useFragmentManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFragmentManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentManager.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,gBAChB,OAAO,GAAG,IAAI;;;;;CAyB5B,CAAC"}
+{"version":3,"file":"useFragmentManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/fragment/useFragmentManager.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,gBAChB,OAAO,GAAG,IAAI;;;;;CAiC5B,CAAC"}

package/dist/hooks/global/useGlobalManager.d.ts

@@ -1,6 +1,5 @@
 import { GraphState } from '@graph-state/core';
 export declare const useGlobalManager: (globalManager?: GraphState) => {
-    fragmentsGraph: any;
     manager: GraphState<import('@graph-state/core').SystemFields, string> | null;
     queryFragmentManager: (id: string) => any;
     queryArea: (id: string) => any;

package/dist/hooks/global/useGlobalManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalManager.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,eAAO,MAAM,gBAAgB,mBAAoB,UAAU;;;+BAQvB,MAAM;oBAGjB,MAAM;;;CAc9B,CAAC"}
+{"version":3,"file":"useGlobalManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,eAAO,MAAM,gBAAgB,mBAAoB,UAAU;;+BAIvB,MAAM;oBAGjB,MAAM;;;CAa9B,CAAC"}

package/dist/index.cjs.js

@@ -2196,30 +2196,25 @@ const useStyleSheet = (manager) => {
   };
 };
 const useGlobalManager = (globalManager) => {
-  var _a, _b;
+  var _a;
   const currentGlobalManager = react.useContext(GlobalManagerContext);
   const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = react$1.useGraph(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
   const queryFragmentManager = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+    var _a2, _b;
+    return (_b = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b.call(_a2, id);
   };
   const queryArea = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
+    var _a2, _b;
+    return (_b = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b.call(_a2, id);
   };
   const setRenderTarget = (value) => {
     resultManager == null ? void 0 : resultManager.setRenderTarget(value);
   };
   return {
-    fragmentsGraph,
     manager: resultManager,
     queryFragmentManager,
     queryArea,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? utils.noop,
+    getFragmentManager: ((_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.getManager) ?? utils.noop,
     setRenderTarget
   };
 };
@@ -2892,24 +2887,29 @@ const CssChunk = ({ linkKey }) => {
   return null;
 };
 const useFragmentManager = (fragmentId, inputGlobalManager) => {
-  var _a;
+  var _a, _b;
   const {
-    fragmentsGraph,
-    manager: gg,
+    manager: globalManager,
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
+  react$1.useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$fragments) == null ? void 0 : _a.key, {
+    selector: (state) => {
+      var _a2;
+      return ((_a2 = state == null ? void 0 : state.managers) == null ? void 0 : _a2[fragmentId]) ?? null;
+    }
+  });
   const manager = getFragmentManager(fragmentId);
   const loading = !!fragmentId && !manager;
   react.useEffect(() => {
-    if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+    if (globalManager && !manager && !!fragmentId) {
       queryFragmentManager(fragmentId);
     }
-  }, [fragmentId, fragmentsGraph]);
+  }, [fragmentId, globalManager]);
   return {
     loading,
     manager,
-    fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
+    fragmentLayerKey: (_b = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _b.root,
     queryFragmentManager
   };
 };
@@ -3314,12 +3314,30 @@ const IDLE_STATE = {
   fetching: false,
   error: null
 };
+const resolveStateFromCache = (globalManager, areaCode, skip) => {
+  if (skip || !globalManager || !areaCode) return IDLE_STATE;
+  const cache = getSuspenseCache(globalManager);
+  const cacheKey = `area:${areaCode}`;
+  if (cache.has(cacheKey)) {
+    try {
+      const cached = cache.get(cacheKey).read();
+      return { data: cached, fetching: false, error: null };
+    } catch (e) {
+      if (!(e instanceof Promise)) {
+        return { data: null, fetching: false, error: e };
+      }
+    }
+  }
+  return { data: null, fetching: true, error: null };
+};
 const useAsyncLoadArea = (globalManager, areaCode, skip) => {
-  const [state, setState] = react.useState(IDLE_STATE);
+  const [state, setState] = react.useState(
+    () => resolveStateFromCache(globalManager, areaCode, skip)
+  );
   const areaCodeRef = react.useRef(areaCode);
   if (areaCodeRef.current !== areaCode) {
     areaCodeRef.current = areaCode;
-    setState(IDLE_STATE);
+    setState(resolveStateFromCache(globalManager, areaCode, skip));
   }
   react.useEffect(() => {
     var _a, _b;
@@ -3341,7 +3359,11 @@ const useAsyncLoadArea = (globalManager, areaCode, skip) => {
     const valueOrPromise = cache.has(cacheKey) ? void 0 : (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadArea) == null ? void 0 : _b.call(_a, areaCode);
     if (valueOrPromise != null && !(valueOrPromise instanceof Promise)) {
       createSuspenseResource(cacheKey, valueOrPromise, cache);
-      setState({ data: valueOrPromise, fetching: false, error: null });
+      setState({
+        data: valueOrPromise,
+        fetching: false,
+        error: null
+      });
       return;
     }
     if (valueOrPromise instanceof Promise) {

package/dist/index.es.js

@@ -2194,30 +2194,25 @@ const useStyleSheet = (manager) => {
   };
 };
 const useGlobalManager = (globalManager) => {
-  var _a, _b;
+  var _a;
   const currentGlobalManager = useContext(GlobalManagerContext);
   const resultManager = globalManager ?? currentGlobalManager;
-  const [fragmentsGraph] = useGraph(
-    resultManager,
-    (_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.key
-  );
   const queryFragmentManager = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b2.call(_a2, id);
+    var _a2, _b;
+    return (_b = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadFragment) == null ? void 0 : _b.call(_a2, id);
   };
   const queryArea = (id) => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b2.call(_a2, id);
+    var _a2, _b;
+    return (_b = (_a2 = resultManager == null ? void 0 : resultManager.$load) == null ? void 0 : _a2.loadArea) == null ? void 0 : _b.call(_a2, id);
   };
   const setRenderTarget = (value) => {
     resultManager == null ? void 0 : resultManager.setRenderTarget(value);
   };
   return {
-    fragmentsGraph,
     manager: resultManager,
     queryFragmentManager,
     queryArea,
-    getFragmentManager: ((_b = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _b.getManager) ?? noop,
+    getFragmentManager: ((_a = resultManager == null ? void 0 : resultManager.$fragments) == null ? void 0 : _a.getManager) ?? noop,
     setRenderTarget
   };
 };
@@ -2890,24 +2885,29 @@ const CssChunk = ({ linkKey }) => {
   return null;
 };
 const useFragmentManager = (fragmentId, inputGlobalManager) => {
-  var _a;
+  var _a, _b;
   const {
-    fragmentsGraph,
-    manager: gg,
+    manager: globalManager,
     getFragmentManager,
     queryFragmentManager
   } = useGlobalManager(inputGlobalManager);
+  useGraph(globalManager, (_a = globalManager == null ? void 0 : globalManager.$fragments) == null ? void 0 : _a.key, {
+    selector: (state) => {
+      var _a2;
+      return ((_a2 = state == null ? void 0 : state.managers) == null ? void 0 : _a2[fragmentId]) ?? null;
+    }
+  });
   const manager = getFragmentManager(fragmentId);
   const loading = !!fragmentId && !manager;
   useEffect(() => {
-    if (fragmentsGraph && !getFragmentManager(fragmentId) && !!fragmentId) {
+    if (globalManager && !manager && !!fragmentId) {
       queryFragmentManager(fragmentId);
     }
-  }, [fragmentId, fragmentsGraph]);
+  }, [fragmentId, globalManager]);
   return {
     loading,
     manager,
-    fragmentLayerKey: (_a = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _a.root,
+    fragmentLayerKey: (_b = manager == null ? void 0 : manager.$fragment) == null ? void 0 : _b.root,
     queryFragmentManager
   };
 };
@@ -3312,12 +3312,30 @@ const IDLE_STATE = {
   fetching: false,
   error: null
 };
+const resolveStateFromCache = (globalManager, areaCode, skip) => {
+  if (skip || !globalManager || !areaCode) return IDLE_STATE;
+  const cache = getSuspenseCache(globalManager);
+  const cacheKey = `area:${areaCode}`;
+  if (cache.has(cacheKey)) {
+    try {
+      const cached = cache.get(cacheKey).read();
+      return { data: cached, fetching: false, error: null };
+    } catch (e) {
+      if (!(e instanceof Promise)) {
+        return { data: null, fetching: false, error: e };
+      }
+    }
+  }
+  return { data: null, fetching: true, error: null };
+};
 const useAsyncLoadArea = (globalManager, areaCode, skip) => {
-  const [state, setState] = useState(IDLE_STATE);
+  const [state, setState] = useState(
+    () => resolveStateFromCache(globalManager, areaCode, skip)
+  );
   const areaCodeRef = useRef(areaCode);
   if (areaCodeRef.current !== areaCode) {
     areaCodeRef.current = areaCode;
-    setState(IDLE_STATE);
+    setState(resolveStateFromCache(globalManager, areaCode, skip));
   }
   useEffect(() => {
     var _a, _b;
@@ -3339,7 +3357,11 @@ const useAsyncLoadArea = (globalManager, areaCode, skip) => {
     const valueOrPromise = cache.has(cacheKey) ? void 0 : (_b = (_a = globalManager.$load) == null ? void 0 : _a.loadArea) == null ? void 0 : _b.call(_a, areaCode);
     if (valueOrPromise != null && !(valueOrPromise instanceof Promise)) {
       createSuspenseResource(cacheKey, valueOrPromise, cache);
-      setState({ data: valueOrPromise, fetching: false, error: null });
+      setState({
+        data: valueOrPromise,
+        fetching: false,
+        error: null
+      });
       return;
     }
     if (valueOrPromise instanceof Promise) {

package/dist/nodes/Area/hooks/useAsyncLoadArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAsyncLoadArea.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Area/hooks/useAsyncLoadArea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAQD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,kBACZ,UAAU,GAAG,IAAI,GAAG,SAAS,YAClC,MAAM,QACV,OAAO,KACZ,cAuFF,CAAC"}
+{"version":3,"file":"useAsyncLoadArea.d.ts","sourceRoot":"","sources":["../../../../src/nodes/Area/hooks/useAsyncLoadArea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;CAChB;AAqCD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,kBACZ,UAAU,GAAG,IAAI,GAAG,SAAS,YAClC,MAAM,QACV,OAAO,KACZ,cA6FF,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-react",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.5.3",
   "type": "module",
   "files": [
     "dist"
@@ -27,8 +27,8 @@
     "@graph-state/core": "^0.13.2",
     "@graph-state/react": "^0.8.3",
     "react-use-measure": "^2.1.7",
-    "@fragmentsx/definition": "0.2.2",
     "@fragmentsx/client-core": "0.4.0",
+    "@fragmentsx/definition": "0.2.2",
     "@fragmentsx/utils": "0.2.0"
   },
   "devDependencies": {