fix(core): CHECKOUT-4455 Provide fallback for browsers that don't support preload attribute

Author: davidchin

package-lock.json

@@ -32,6 +32,7 @@
     "validate-commits": "validate-commits"
   },
   "dependencies": {
+    "@bigcommerce/request-sender": "^0.3.0",
     "tslib": "^1.10.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,43 @@
+import BrowserSupport from './browser-support';
+
+describe('BrowserSupport', () => {
+    let link: HTMLLinkElement;
+    let support: BrowserSupport;
+
+    beforeEach(() => {
+        const createElement = document.createElement.bind(document);
+
+        link = {
+            relList: {
+                supports: jest.fn(() => true),
+            },
+        } as unknown as HTMLLinkElement;
+
+        jest.spyOn(document, 'createElement')
+            .mockImplementation(type => {
+                return type === 'link' ? link : createElement(type);
+            });
+
+        support = new BrowserSupport();
+    });
+
+    it('returns true if able to support rel type', () => {
+        expect(support.canSupportRel('preload'))
+            .toEqual(true);
+    });
+
+    it('returns false if unable to support rel type', () => {
+        jest.spyOn(link.relList, 'supports')
+            .mockReturnValue(false);
+
+        expect(support.canSupportRel('preload'))
+            .toEqual(false);
+    });
+
+    it('returns false if `relList` is not supported', () => {
+        link = {} as unknown as HTMLLinkElement;
+
+        expect(support.canSupportRel('preload'))
+            .toEqual(false);
+    });
+});

src/browser-support.spec.ts

@@ -0,0 +1,11 @@
+export default class BrowserSupport {
+    canSupportRel(rel: string): boolean {
+        const link = document.createElement('link');
+
+        return !!(
+            link.relList &&
+            link.relList.supports &&
+            link.relList.supports(rel)
+        );
+    }
+}

src/browser-support.ts

@@ -1,5 +1,11 @@
+import { createRequestSender } from '@bigcommerce/request-sender';
+
+import BrowserSupport from './browser-support';
 import ScriptLoader from './script-loader';
 
 export default function createScriptLoader(): ScriptLoader {
-    return new ScriptLoader();
+    return new ScriptLoader(
+        new BrowserSupport(),
+        createRequestSender()
+    );
 }

src/create-script-loader.ts

@@ -1,5 +1,11 @@
+import { createRequestSender } from '@bigcommerce/request-sender';
+
+import BrowserSupport from './browser-support';
 import StylesheetLoader from './stylesheet-loader';
 
 export default function createStylesheetLoader(): StylesheetLoader {
-    return new StylesheetLoader();
+    return new StylesheetLoader(
+        new BrowserSupport(),
+        createRequestSender()
+    );
 }

src/create-stylesheet-loader.ts

@@ -1,7 +1,7 @@
-export { default as ScriptLoader } from './script-loader';
+export { default as ScriptLoader, LoadScriptOptions, PreloadScriptOptions } from './script-loader';
 export { default as createScriptLoader } from './create-script-loader';
 export { default as getScriptLoader } from './get-script-loader';
 
-export { default as StylesheetLoader } from './stylesheet-loader';
+export { default as StylesheetLoader, LoadStylesheetOptions, PreloadStylesheetOptions } from './stylesheet-loader';
 export { default as createStylesheetLoader } from './create-stylesheet-loader';
 export { default as getStylesheetLoader } from './get-stylesheet-loader';

src/index.ts

@@ -1,10 +1,27 @@
+import { createRequestSender, RequestSender } from '@bigcommerce/request-sender';
+
+import BrowserSupport from './browser-support';
 import ScriptLoader from './script-loader';
 
 describe('ScriptLoader', () => {
+    let browserSupport: BrowserSupport;
     let loader: ScriptLoader;
+    let requestSender: RequestSender;
 
     beforeEach(() => {
-        loader = new ScriptLoader();
+        browserSupport = new BrowserSupport();
+        requestSender = createRequestSender();
+
+        jest.spyOn(browserSupport, 'canSupportRel')
+            .mockReturnValue(true);
+
+        jest.spyOn(requestSender, 'get')
+            .mockReturnValue(Promise.resolve({}));
+
+        loader = new ScriptLoader(
+            browserSupport,
+            requestSender
+        );
     });
 
     afterEach(() => {
@@ -36,6 +53,13 @@ describe('ScriptLoader', () => {
                 .toEqual('https://code.jquery.com/jquery-3.2.1.min.js');
         });
 
+        it('loads script synchronously by default', async () => {
+            await loader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js');
+
+            expect(script.async)
+                .toEqual(false);
+        });
+
         it('resolves promise if script is loaded', async () => {
             const output = await loader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js');
 
@@ -111,13 +135,6 @@ describe('ScriptLoader', () => {
             ];
         });
 
-        it('preloads scripts in parallel', async () => {
-            await loader.loadScripts(urls);
-
-            expect(loader.preloadScripts)
-                .toHaveBeenCalledWith(urls);
-        });
-
         it('loads preloaded scripts in sequence', async () => {
             jest.spyOn(loader, 'loadScript')
                 .mockReturnValue(Promise.resolve(new Event('readystatechange')));
@@ -195,6 +212,19 @@ describe('ScriptLoader', () => {
                 .toEqual('https://cdn.foobar.com/foo.min.js');
         });
 
+        it('falls back to using XHR if browser does not support preload', async () => {
+            jest.spyOn(browserSupport, 'canSupportRel')
+                .mockImplementation(rel => rel === 'preload' ? false : true);
+
+            await loader.preloadScript('https://cdn.foobar.com/foo.min.js');
+
+            expect(requestSender.get)
+                .toHaveBeenCalledWith('https://cdn.foobar.com/foo.min.js', {
+                    credentials: false,
+                    headers: { Accept: 'application/javascript' },
+                });
+        });
+
         it('resolves promise if script is preloaded', async () => {
             const output = await loader.preloadScript('https://cdn.foobar.com/foo.min.js');