diff --git a/src/cache.ts b/src/cache.ts index 45720e0..1b88263 100644 --- a/src/cache.ts +++ b/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; private readonly subscribers: Array<() => void> = []; - private readonly usePersistentCache: boolean; public isReady = false; constructor() { this.cacheStore = new Map(); - 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)); diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..9571b41 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,6 @@ +export declare global { + interface Window { + REACT_INLINESVG_CACHE_NAME?: string; + REACT_INLINESVG_PERSISTENT_CACHE?: boolean; + } +} diff --git a/src/provider.tsx b/src/provider.tsx index 6ddd28a..f8e8999 100644 --- a/src/provider.tsx +++ b/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; } diff --git a/test/indexWithPersistentCache.spec.tsx b/test/indexWithPersistentCache.spec.tsx index 43ec8fb..4292425 100644 --- a/test/indexWithPersistentCache.spec.tsx +++ b/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( } onError={mockOnError} onLoad={mockOnLoad} {...rest} />, - { wrapper: ({ children }) => {children} }, + { wrapper: ({ children }) => {children} }, ); } @@ -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 }); diff --git a/test/tsconfig.json b/test/tsconfig.json index eee49f8..ce096e5 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -4,5 +4,5 @@ "noUnusedLocals": false, "module": "esnext" }, - "include": ["**/*"] + "include": ["**/*", "../src/**/*"] } diff --git a/tsconfig.json b/tsconfig.json index 423c53f..8488835 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "downlevelIteration": true, "noEmit": true, - "target": "es5" + "target": "ES2020" }, "include": ["src/**/*"] }