@bigcommerce/script-loader - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/bigcommerce/script-loader-js/compare/v0.2.0...v1.0.0) (2019-09-23)
+
+
+### Features
+
+* **core:** CHECKOUT-4400 Add ability to prefetch scripts and stylesheets ([072d567](https://github.com/bigcommerce/script-loader-js/commit/072d567))
+
+
+
 <a name="0.2.0"></a>
@@ -7,0 +17,0 @@ # [0.2.0](https://github.com/bigcommerce/script-loader-js/compare/v0.1.6...v0.2.0) (2019-09-20)

lib/script-loader.d.ts

@@ -0,1 +1,4 @@
+export interface PreloadScriptOptions {
+    prefetch: boolean;
+}
 export default class ScriptLoader {
@@ -6,4 +9,4 @@ private _scripts;
     loadScripts(urls: string[]): Promise<Event[]>;
-    preloadScript(url: string): Promise<Event>;
-    preloadScripts(urls: string[]): Promise<Event[]>;
+    preloadScript(url: string, options?: PreloadScriptOptions): Promise<Event>;
+    preloadScripts(urls: string[], options?: PreloadScriptOptions): Promise<Event[]>;
 }

lib/script-loader.js

@@ -48,3 +48,3 @@ "use strict";
     };
-    ScriptLoader.prototype.preloadScript = function (url) {
+    ScriptLoader.prototype.preloadScript = function (url, options) {
         var _this = this;
@@ -54,4 +54,5 @@ if (!this._preloadedScripts[url]) {
                 var preloadedScript = document.createElement('link');
+                var _a = (options || {}).prefetch, prefetch = _a === void 0 ? false : _a;
                 preloadedScript.as = 'script';
-                preloadedScript.rel = 'preload';
+                preloadedScript.rel = prefetch ? 'prefetch' : 'preload';
                 preloadedScript.href = url;
@@ -70,5 +71,5 @@ preloadedScript.onload = function (event) {
     };
-    ScriptLoader.prototype.preloadScripts = function (urls) {
+    ScriptLoader.prototype.preloadScripts = function (urls, options) {
         var _this = this;
-        return Promise.all(urls.map(function (url) { return _this.preloadScript(url); }));
+        return Promise.all(urls.map(function (url) { return _this.preloadScript(url, options); }));
     };
@@ -75,0 +76,0 @@ return ScriptLoader;

lib/stylesheet-loader.d.ts

 export interface LoadStylesheetOptions {
     prepend: boolean;
 }
+export interface PreloadStylesheetOptions {
+    prefetch: boolean;
+}
 export default class StylesheetLoader {
     private _stylesheets;
+    private _preloadedStylesheets;
     loadStylesheet(src: string, options?: LoadStylesheetOptions): Promise<Event>;
     loadStylesheets(urls: string[], options?: LoadStylesheetOptions): Promise<Event[]>;
+    preloadStylesheet(url: string, options?: PreloadStylesheetOptions): Promise<Event>;
+    preloadStylesheets(urls: string[], options?: PreloadStylesheetOptions): Promise<Event[]>;
 }

lib/stylesheet-loader.js

@@ -6,2 +6,3 @@ "use strict";
         this._stylesheets = {};
+        this._preloadedStylesheets = {};
     }
@@ -35,2 +36,27 @@ StylesheetLoader.prototype.loadStylesheet = function (src, options) {
     };
+    StylesheetLoader.prototype.preloadStylesheet = function (url, options) {
+        var _this = this;
+        if (!this._preloadedStylesheets[url]) {
+            this._preloadedStylesheets[url] = new Promise(function (resolve, reject) {
+                var preloadedStylesheet = document.createElement('link');
+                var _a = (options || {}).prefetch, prefetch = _a === void 0 ? false : _a;
+                preloadedStylesheet.as = 'style';
+                preloadedStylesheet.rel = prefetch ? 'prefetch' : 'preload';
+                preloadedStylesheet.href = url;
+                preloadedStylesheet.onload = function (event) {
+                    resolve(event);
+                };
+                preloadedStylesheet.onerror = function (event) {
+                    delete _this._preloadedStylesheets[url];
+                    reject(event);
+                };
+                document.head.appendChild(preloadedStylesheet);
+            });
+        }
+        return this._preloadedStylesheets[url];
+    };
+    StylesheetLoader.prototype.preloadStylesheets = function (urls, options) {
+        var _this = this;
+        return Promise.all(urls.map(function (url) { return _this.preloadStylesheet(url, options); }));
+    };
     return StylesheetLoader;
@@ -37,0 +63,0 @@ }());

package.json

 {
   "name": "@bigcommerce/script-loader",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "A library for loading JavaScript files asynchronously",
@@ -39,3 +39,3 @@ "license": "MIT",
     "@bigcommerce/tslint-config": "^2.0.1",
-    "@bigcommerce/validate-commits": "^2.0.3",
+    "@bigcommerce/validate-commits": "^2.2.0",
     "@types/jest": "^21.1.10",
@@ -42,0 +42,0 @@ "check-node-version": "^3.2.0",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29339

19.63%

Lines of code

226

18.95%

Number of low quality alerts

0

-100%

No dependency changes