feat: add storage for canvas (#6399)

* feat: add storage for canvas

* feat: add changeset

* feat: add storage for script

* feat: add set value

* feat: modify userKVStorage

* feat: modify getItem

* feat: add bizID

* chore: add @ice/runtime to dev dependencied

.changeset/smooth-guests-count.md

@@ -0,0 +1,5 @@
+---
+'@ice/cache-canvas': patch
+---
+
+feat: add storage for canvas

examples/cavans-project/src/pages/home.tsx

@@ -24,13 +24,15 @@ export default function Home() {
       setTimeout(() => {
         console.log('canvas paint ready!');
         resolve(true);
-      }, 5000);
+      }, 10000);
     });
   };
+
   return (
     <>
       <h2 className={styles.title}>Home Page</h2>
       <CacheCanvas
+        bizID={'test'}
         ref={childRef}
         id={GAME_CANVAS_ID}
         init={initFunc}

packages/cache-canvas/src/index.tsx

@@ -23,6 +23,9 @@ declare global {
       call: Function;
     };
     _windvane_backControl: Function | null;
+    __megability_bridge__: {
+      syncCall: Function;
+    };
   }
 }
 
@@ -33,6 +36,7 @@ export type RefCacheCanvas = {
 
 export type CacheCanvasProps = {
   id: string;
+  bizID: string;
   init: () => Promise<any>;
   useCache?: Boolean;
   getSnapshot?: () => String;
@@ -50,6 +54,7 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     fallback,
     style,
     className,
+    bizID = '',
     ...rest
   } = props;
 
@@ -69,9 +74,11 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     }
     // Cache base64 string when canvas rendered.
     if (renderedCanvas && strBase64) {
-      Storage.setItem(cacheKey, strBase64);
+      Storage.setItem(cacheKey, strBase64, {
+        bizID,
+      });
     }
-  }, [id, renderedCanvas, cacheKey, getSnapshot]);
+  }, [id, renderedCanvas, cacheKey, getSnapshot, bizID]);
 
   useImperativeHandle(ref, () => ({
     cacheCanvasToStorage: cacheCanvasFunc,
@@ -126,13 +133,13 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
           <img
             className={className}
             style={style}
-            src={Storage.getItem(cacheKey) || ''}
+            src={Storage.getItem(cacheKey, { bizID }) || ''}
             id={`canvas-img-${id}`}
           />
           {
             (typeof fallback === 'function') && (<div
               id={`fallback-${id}`}
-              style={isNode || Storage.getItem(cacheKey) ? { display: 'none' } : { display: 'block' }}
+              style={isNode || Storage.getItem(cacheKey, { bizID }) ? { display: 'none' } : { display: 'block' }}
             >
               {
                 fallback()
@@ -141,8 +148,29 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
           }
           <script
             dangerouslySetInnerHTML={{
-              __html: `
-                  const base64Data = localStorage.getItem('${cacheKey}');
+                  __html: `
+                  let base64Data = '';
+                  if (
+                    window.__megability_bridge__ &&
+                    window.__megability_bridge__.syncCall
+                  ) {
+                    const canIUse = window.__megability_bridge__.syncCall('ability', 'available', {
+                      ability: 'userKVStorage',
+                      api: 'getItem',
+                    });
+            
+                    if (canIUse) {
+                      const res = window.__megability_bridge__.syncCall('userKVStorage', 'getItem', { key: '${cacheKey}',  bizID: '${bizID}' });
+                      if (res && res.statusCode === 0 && res.data && res.data.result) {
+                        base64Data = res.data.result;
+                      }
+                    }
+                  }
+                  
+                  if (!base64Data) {
+                    base64Data = localStorage.getItem(${JSON.stringify(cacheKey)});
+                  }
+                  
                   const fallback = document.getElementById('fallback-${id}');
                   if (base64Data) {
                     const img = document.getElementById('canvas-img-${id}');

packages/cache-canvas/src/storage.tsx

@@ -1,9 +1,31 @@
 const cache = {};
 
 export const Storage = {
-  setItem: (key, value) => {
+  setItem: (key, value, { bizID = '' }) => {
     try {
-      if (typeof window === 'object' && window.localStorage) {
+      if (
+        typeof window !== 'undefined' &&
+        window.__megability_bridge__ &&
+        window.__megability_bridge__.syncCall
+      ) {
+        const canIUse = window.__megability_bridge__.syncCall('ability', 'available', {
+          ability: 'userKVStorage',
+          api: 'setItem',
+        });
+
+        if (canIUse) {
+          const res = window.__megability_bridge__.syncCall('userKVStorage', 'setItem', {
+            key,
+            value,
+            bizID,
+          });
+          if (res && res.statusCode === 0) {
+            return;
+          }
+        }
+      }
+
+      if (typeof window !== 'undefined' && window.localStorage) {
         return localStorage.setItem(key, value);
       }
 
@@ -12,9 +34,33 @@ export const Storage = {
       console.error('Storage setItem error:', e);
     }
   },
-  getItem: (key) => {
+  getItem: (key, { bizID = '' }) => {
     try {
-      if (typeof window === 'object' && window.localStorage) {
+      if (
+        typeof window !== 'undefined' &&
+        window.__megability_bridge__ &&
+        window.__megability_bridge__.syncCall
+      ) {
+        const canIUse = window.__megability_bridge__.syncCall('ability', 'available', {
+          ability: 'userKVStorage',
+          api: 'getItem',
+        });
+
+        if (canIUse) {
+          const res = window.__megability_bridge__.syncCall(
+            'userKVStorage',
+            'getItem',
+            {
+              key,
+              bizID,
+            });
+          if (res && res.statusCode === 0 && res.data && res.data.result) {
+            return res.data.result;
+          }
+        }
+      }
+
+      if (typeof window !== 'undefined' && window.localStorage) {
         return localStorage.getItem(key);
       }
 

packages/plugin-cavans/package.json

@@ -33,7 +33,8 @@
   },
   "devDependencies": {
     "@ice/app": "^3.2.8",
-    "webpack": "^5.86.0"
+    "webpack": "^5.86.0",
+    "@ice/runtime": "^1.2.5"
   },
   "repository": {
     "type": "http",