Refactor cache

- improve fast src change - remove unused queue
gilbarbara · Apr 15, 2022 · f1abdfa · f1abdfa
1 parent 45d8662
commit f1abdfa
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 47 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -151,17 +151,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     }
   }
 
-  private handleCacheQueue = (content: string | Error) => {
-    /* istanbul ignore else */
-    if (typeof content === 'string') {
-      this.handleLoad(content);
-
-      return;
-    }
-
-    this.handleError(content);
-  };
-
   private handleLoad = (content: string) => {
     /* istanbul ignore else */
     if (this.isActive) {
@@ -196,7 +185,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
     try {
       if (cacheRequests) {
-        cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
+        cacheStore[src] = { content: '', status: STATUS.LOADING };
       }
 
       return fetch(src, fetchOptions)
@@ -219,6 +208,10 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
           // the current src don't match the previous one, skipping...
           if (src !== currentSrc) {
+            if (cacheStore[src].status === STATUS.LOADING) {
+              delete cacheStore[src];
+            }
+
             return;
           }
 
@@ -232,12 +225,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
             if (cache) {
               cache.content = content;
               cache.status = STATUS.LOADED;
-
-              cache.queue = cache.queue.filter(callback => {
-                callback(content);
-
-                return false;
-              });
             }
           }
         })
@@ -250,10 +237,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
             /* istanbul ignore else */
             if (cache) {
-              cache.queue.forEach((callback: (content: string) => void) => {
-                callback(error);
-              });
-
               delete cacheStore[src];
             }
           }
@@ -276,24 +259,17 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
           const { cacheRequests, src } = this.props;
           const cache = cacheRequests && cacheStore[src];
 
-          if (cache) {
-            if (cache.status === STATUS.LOADED) {
-              this.handleLoad(cache.content);
+          if (cache && cache.status === STATUS.LOADED) {
+            this.handleLoad(cache.content);
 
-              return;
-            }
-
-            /* istanbul ignore else */
-            if (cache.status === STATUS.LOADING) {
-              cache.queue.push(this.handleCacheQueue);
-            }
+            return;
           }
 
           const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
           let inlineSrc;
 
           if (dataURI) {
-            inlineSrc = dataURI[1] ? atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
+            inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
           } else if (src.includes('<svg')) {
             inlineSrc = src;
           }

diff --git a/src/types.ts b/src/types.ts
@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-type Callback = (...arguments_: any[]) => void;
-
 export type ErrorCallback = (error: Error | FetchError) => void;
 export type LoadCallback = (src: string, isCached: boolean) => void;
 export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
@@ -40,6 +38,5 @@ export interface FetchError extends Error {
 
 export interface StorageItem {
   content: string;
-  queue: Callback[];
   status: string;
 }
diff --git a/test/__snapshots__/index.spec.tsx.snap b/test/__snapshots__/index.spec.tsx.snap
@@ -2384,7 +2384,6 @@ Object {
   <circle>
   </circle>
 </svg>,
-    "queue": Array [],
     "status": "loaded",
   },
 }
@@ -2400,7 +2399,6 @@ Object {
   <circle>
   </circle>
 </svg>,
-    "queue": Array [],
     "status": "loaded",
   },
 }
@@ -2424,14 +2422,8 @@ Object {
   <circle>
   </circle>
 </svg>,
-    "queue": Array [],
     "status": "loaded",
   },
-  "https://cdn.svgporn.com/logos/javascript.svg": Object {
-    "content": "",
-    "queue": Array [],
-    "status": "loading",
-  },
 }
 `;
 

diff --git a/test/index.spec.tsx b/test/index.spec.tsx
@@ -431,7 +431,6 @@ describe('react-inlinesvg', () => {
       cacheStore[fixtures.react] = {
         content: '',
         status: 'loading',
-        queue: [],
       };
 
       setup({ src: fixtures.react });
@@ -453,7 +452,6 @@ describe('react-inlinesvg', () => {
       cacheStore[fixtures.react] = {
         content: '',
         status: 'loading',
-        queue: [],
       };
 
       setup({ src: fixtures.react });
@@ -593,7 +591,6 @@ describe('react-inlinesvg', () => {
       cacheStore[fixtures.react] = {
         content: '<svg><circle /></svg>',
         status: 'loaded',
-        queue: [],
       };
 
       const { container } = render(<ReactInlineSVG onLoad={mockOnLoad} src={fixtures.react} />);