Refactor cache and provider to support SSR

- add name prop to provider
- update tsconfig target to ES2020

src/cache.ts

@@ -1,22 +1,26 @@
 import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from './config';
-import { request, sleep } from './helpers';
+import { canUseDOM, request, sleep } from './helpers';
 import { StorageItem } from './types';
 
 export default class CacheStore {
   private cacheApi: Cache | undefined;
   private readonly cacheStore: Map<string, StorageItem>;
   private readonly subscribers: Array<() => void> = [];
-  private readonly usePersistentCache: boolean;
   public isReady = false;
 
   constructor() {
     this.cacheStore = new Map<string, StorageItem>();
 
-    this.usePersistentCache =
-      'REACT_INLINESVG_PERSISTENT_CACHE' in window && !!window.REACT_INLINESVG_PERSISTENT_CACHE;
+    let cacheName = CACHE_NAME;
+    let usePersistentCache = false;
 
-    if (this.usePersistentCache) {
-      caches.open(CACHE_NAME).then(cache => {
+    if (canUseDOM()) {
+      cacheName = window.REACT_INLINESVG_CACHE_NAME ?? CACHE_NAME;
+      usePersistentCache = !!window.REACT_INLINESVG_PERSISTENT_CACHE;
+    }
+
+    if (usePersistentCache) {
+      caches.open(cacheName).then(cache => {
         this.cacheApi = cache;
         this.isReady = true;
 
@@ -36,7 +40,7 @@ export default class CacheStore {
   }
 
   public async get(url: string, fetchOptions?: RequestInit) {
-    await (this.usePersistentCache
+    await (this.cacheApi
       ? this.fetchAndAddToPersistentCache(url, fetchOptions)
       : this.fetchAndAddToInternalCache(url, fetchOptions));
 

src/global.d.ts

@@ -0,0 +1,6 @@
+export declare global {
+  interface Window {
+    REACT_INLINESVG_CACHE_NAME?: string;
+    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;
+  }
+}

src/provider.tsx

@@ -1,25 +1,17 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode } from 'react';
+
+import { canUseDOM } from './helpers';
 
 interface Props {
   children: ReactNode;
+  name?: string;
 }
 
-declare global {
-  interface Window {
-    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;
-  }
-}
-
-export default function CacheProvider({ children }: Props) {
-  window.REACT_INLINESVG_PERSISTENT_CACHE = true;
-
-  useEffect(() => {
+export default function CacheProvider({ children, name }: Props) {
+  if (canUseDOM()) {
+    window.REACT_INLINESVG_CACHE_NAME = name;
     window.REACT_INLINESVG_PERSISTENT_CACHE = true;
-
-    return () => {
-      delete window.REACT_INLINESVG_PERSISTENT_CACHE;
-    };
-  }, []);
+  }
 
   return children;
 }

test/indexWithPersistentCache.spec.tsx

@@ -40,10 +40,10 @@ fetchMock.mockResponse(() =>
   }),
 );
 
-function setup({ onLoad, ...rest }: Props) {
+function setup({ cacheName, onLoad, ...rest }: Props & { cacheName?: string }) {
   return render(
     <ReactInlineSVG loader={<Loader />} onError={mockOnError} onLoad={mockOnLoad} {...rest} />,
-    { wrapper: ({ children }) => <CacheProvider>{children}</CacheProvider> },
+    { wrapper: ({ children }) => <CacheProvider name={cacheName}>{children}</CacheProvider> },
   );
 }
 
@@ -53,6 +53,19 @@ describe('react-inlinesvg (with persistent cache)', () => {
     await cacheStore.clear();
   });
 
+  it('should set the default global variables', () => {
+    setup({ src: url });
+
+    expect(window.REACT_INLINESVG_PERSISTENT_CACHE).toBeTrue();
+    expect(window.REACT_INLINESVG_CACHE_NAME).toBeUndefined();
+  });
+
+  it('should set the cache name global variable', () => {
+    setup({ cacheName: 'test-cache', src: url });
+
+    expect(window.REACT_INLINESVG_CACHE_NAME).toBe('test-cache');
+  });
+
   it('should request an SVG only once', async () => {
     setup({ src: url });
 

test/tsconfig.json

@@ -4,5 +4,5 @@
     "noUnusedLocals": false,
     "module": "esnext"
   },
-  "include": ["**/*"]
+  "include": ["**/*", "../src/**/*"]
 }

tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "downlevelIteration": true,
     "noEmit": true,
-    "target": "es5"
+    "target": "ES2020"
   },
   "include": ["src/**/*"]
 }