Merge pull request #7 from davidchin/prefetch

CHECKOUT-4400: Add ability to prefetch scripts and stylesheets

Author: davidchin

src/script-loader.spec.ts

@@ -177,6 +177,24 @@ describe('ScriptLoader', () => {
                 .toEqual('https://cdn.foobar.com/foo.min.js');
         });
 
+        it('prefetches script if option is provided', async () => {
+            await loader.preloadScript('https://cdn.foobar.com/foo.min.js', {
+                prefetch: true,
+            });
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledWith(preloadedScript);
+
+            expect(preloadedScript.rel)
+                .toEqual('prefetch');
+
+            expect(preloadedScript.as)
+                .toEqual('script');
+
+            expect(preloadedScript.href)
+                .toEqual('https://cdn.foobar.com/foo.min.js');
+        });
+
         it('resolves promise if script is preloaded', async () => {
             const output = await loader.preloadScript('https://cdn.foobar.com/foo.min.js');
 

src/script-loader.ts

@@ -1,3 +1,7 @@
+export interface PreloadScriptOptions {
+    prefetch: boolean;
+}
+
 export default class ScriptLoader {
     private _scripts: { [key: string]: Promise<Event> } = {};
     private _preloadedScripts: { [key: string]: Promise<Event> } = {};
@@ -48,13 +52,14 @@ export default class ScriptLoader {
             .then(() => events);
     }
 
-    preloadScript(url: string): Promise<Event> {
+    preloadScript(url: string, options?: PreloadScriptOptions): Promise<Event> {
         if (!this._preloadedScripts[url]) {
             this._preloadedScripts[url] = new Promise((resolve, reject) => {
                 const preloadedScript = document.createElement('link');
+                const { prefetch = false } = options || {};
 
                 preloadedScript.as = 'script';
-                preloadedScript.rel = 'preload';
+                preloadedScript.rel = prefetch ? 'prefetch' : 'preload';
                 preloadedScript.href = url;
 
                 preloadedScript.onload = event => {
@@ -73,8 +78,8 @@ export default class ScriptLoader {
         return this._preloadedScripts[url];
     }
 
-    preloadScripts(urls: string[]): Promise<Event[]> {
-        return Promise.all(urls.map(url => this.preloadScript(url)));
+    preloadScripts(urls: string[], options?: PreloadScriptOptions): Promise<Event[]> {
+        return Promise.all(urls.map(url => this.preloadScript(url, options)));
     }
 }
 

src/stylesheet-loader.spec.ts

@@ -83,4 +83,61 @@ describe('StylesheetLoader', () => {
                 .toHaveBeenCalledTimes(2);
         });
     });
+
+    describe('when preloading stylesheet', () => {
+        let preloadedStylesheet: HTMLLinkElement;
+
+        beforeEach(() => {
+            preloadedStylesheet = document.createElement('link');
+
+            jest.spyOn(document, 'createElement')
+                .mockImplementation(() => preloadedStylesheet);
+
+            jest.spyOn(document.head, 'appendChild')
+                .mockImplementation(element =>
+                    setTimeout(() => element.onload(new Event('load')), 0)
+                );
+        });
+
+        it('attaches preload link tag to document', async () => {
+            await loader.preloadStylesheet('https://foo.bar/hello-world.css');
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledWith(preloadedStylesheet);
+
+            expect(preloadedStylesheet.rel)
+                .toEqual('preload');
+
+            expect(preloadedStylesheet.as)
+                .toEqual('style');
+
+            expect(preloadedStylesheet.href)
+                .toEqual('https://foo.bar/hello-world.css');
+        });
+
+        it('prefetches stylesheet if option is provided', async () => {
+            await loader.preloadStylesheet('https://foo.bar/hello-world.css', {
+                prefetch: true,
+            });
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledWith(preloadedStylesheet);
+
+            expect(preloadedStylesheet.rel)
+                .toEqual('prefetch');
+
+            expect(preloadedStylesheet.as)
+                .toEqual('style');
+
+            expect(preloadedStylesheet.href)
+                .toEqual('https://foo.bar/hello-world.css');
+        });
+
+        it('resolves promise if stylesheet is preloaded', async () => {
+            const output = await loader.preloadStylesheet('https://foo.bar/hello-world.css');
+
+            expect(output)
+                .toBeInstanceOf(Event);
+        });
+    });
 });

src/stylesheet-loader.ts

@@ -2,8 +2,13 @@ export interface LoadStylesheetOptions {
     prepend: boolean;
 }
 
+export interface PreloadStylesheetOptions {
+    prefetch: boolean;
+}
+
 export default class StylesheetLoader {
     private _stylesheets: { [key: string]: Promise<Event> } = {};
+    private _preloadedStylesheets: { [key: string]: Promise<Event> } = {};
 
     loadStylesheet(src: string, options?: LoadStylesheetOptions): Promise<Event> {
         if (!this._stylesheets[src]) {
@@ -33,4 +38,34 @@ export default class StylesheetLoader {
     loadStylesheets(urls: string[], options?: LoadStylesheetOptions): Promise<Event[]> {
         return Promise.all(urls.map(url => this.loadStylesheet(url, options)));
     }
+
+    preloadStylesheet(url: string, options?: PreloadStylesheetOptions): Promise<Event> {
+        if (!this._preloadedStylesheets[url]) {
+            this._preloadedStylesheets[url] = new Promise((resolve, reject) => {
+                const preloadedStylesheet = document.createElement('link');
+                const { prefetch = false } = options || {};
+
+                preloadedStylesheet.as = 'style';
+                preloadedStylesheet.rel = prefetch ? 'prefetch' : 'preload';
+                preloadedStylesheet.href = url;
+
+                preloadedStylesheet.onload = event => {
+                    resolve(event);
+                };
+
+                preloadedStylesheet.onerror = event => {
+                    delete this._preloadedStylesheets[url];
+                    reject(event);
+                };
+
+                document.head.appendChild(preloadedStylesheet);
+            });
+        }
+
+        return this._preloadedStylesheets[url];
+    }
+
+    preloadStylesheets(urls: string[], options?: PreloadStylesheetOptions): Promise<Event[]> {
+        return Promise.all(urls.map(url => this.preloadStylesheet(url, options)));
+    }
 }