Feat/fix storage (#6488)

* fix: The base64 of canvans may be too large, and the syncCall will block the thread

* chore: add changeset

* feat: modify return

* feat: modify promise

* feat: modify

* chore: modify version

.changeset/clever-snakes-buy.md

@@ -0,0 +1,5 @@
+---
+'@ice/cache-canvas': patch
+---
+
+fix: The base64 of canvans may be too large, and the syncCall will block the thread.

packages/cache-canvas/src/index.tsx

@@ -25,6 +25,7 @@ declare global {
     _windvane_backControl: Function | null;
     __megability_bridge__: {
       syncCall: Function;
+      asyncCall: Function;
     };
   }
 }
@@ -74,7 +75,7 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     }
     // Cache base64 string when canvas rendered.
     if (renderedCanvas && strBase64) {
-      Storage.setItem(cacheKey, strBase64, {
+      return Storage.setItem(cacheKey, strBase64, {
         bizID,
       });
     }
@@ -88,27 +89,6 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    if (window.WindVane) {
-      window.WindVane.call('WebAppInterface', 'enableHookNativeBack', {});
-      window._windvane_backControl = () => {
-        cacheCanvasFunc();
-        // Windvane must return a string value of true for it to work properly.
-        return 'false';
-      };
-    }
-    document.addEventListener('wvBackClickEvent', cacheCanvasFunc, false);
-    window.addEventListener('beforeunload', cacheCanvasFunc);
-
-    return () => {
-      window.removeEventListener('beforeunload', cacheCanvasFunc);
-      window.removeEventListener('wvBackClickEvent', cacheCanvasFunc);
-      if (window._windvane_backControl) {
-        window._windvane_backControl = null;
-      }
-    };
-  }, [cacheCanvasFunc]);
-
   useEffect(() => {
     if (mounted && typeof init === 'function') {
       const res = init();

packages/cache-canvas/src/storage.tsx

@@ -14,24 +14,33 @@ export const Storage = {
         });
 
         if (canIUse) {
-          const res = window.__megability_bridge__.syncCall('userKVStorage', 'setItem', {
+          return new Promise((resolve, reject) => {
-            key,
+            // The base64 of canvans may be too large, and the syncCall will block the thread.
-            value,
+            window.__megability_bridge__.asyncCall('userKVStorage', 'setItem', {
-            bizID,
+              key,
+              value,
+              bizID,
+            }, (res) => {
+              if (res && res.statusCode <= 100) {
+                resolve(res);
+              } else {
+                reject();
+              }
+            });
           });
-          if (res && res.statusCode === 0) {
-            return;
-          }
         }
       }
 
-      if (typeof window !== 'undefined' && window.localStorage) {
+      return new Promise((resolve, reject) => {
-        return localStorage.setItem(key, value);
+        if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') {
-      }
+          resolve(localStorage.setItem(key, value));
-
+        } else {
-      return (cache[key] = value);
+          reject(new Error('localStorage is undefined.'));
+        }
+      });
     } catch (e) {
       console.error('Storage setItem error:', e);
+      return Promise.reject(e);
     }
   },
   getItem: (key, { bizID = '' }) => {