asset-preloader - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/asset-preloader.cjs.development.js

@@ -46,7 +46,9 @@ 'use strict';
 var getItemByUrl = function getItemByUrl(context) {
-  return function (rawUrl) {
+  return function (url) {
     for (var _iterator = _createForOfIteratorHelperLoose(context.state), _step; !(_step = _iterator()).done;) {
       var item = _step.value;
-      if (item.url == rawUrl) return item;
+      if (item.url == url) return item;
     }
+
+    return null;
   };
@@ -59,3 +61,3 @@ };
 
-      if (item.completion < 100) {
+      if (item.completion < 1) {
         item.xhr.abort();
@@ -73,25 +75,13 @@ item.status = 0;
     var sumCompletion = 0;
-    var maxCompletion = context.stepped ? context.state.length * 100 : 0;
-    var initialisedCount = 0;
+    var maxCompletion = context.state.length;
 
     for (var _iterator3 = _createForOfIteratorHelperLoose(context.state), _step3; !(_step3 = _iterator3()).done;) {
       var itemState = _step3.value;
-      if (itemState.completion) initialisedCount++;
 
-      if (context.stepped) {
-        if (itemState.completion) {
-          sumCompletion += itemState.completion;
-        }
-      } else {
-        if (context._readyForComputation) {
-          sumCompletion += itemState.downloaded;
-          maxCompletion += itemState.total;
-        } else {
-          sumCompletion = maxCompletion = 0;
-        }
+      if (itemState.completion) {
+        sumCompletion += itemState.completion;
       }
     }
 
-    context._readyForComputation = initialisedCount == context.state.length;
-    var totalCompletion = sumCompletion / maxCompletion * 100;
+    var totalCompletion = sumCompletion / maxCompletion;
 
@@ -116,3 +106,3 @@ if (!isNaN(totalCompletion)) {
       if (event.lengthComputable) {
-        item.completion = event.loaded / event.total * 100;
+        item.completion = event.loaded / event.total;
         item.downloaded = event.loaded;
@@ -156,13 +146,14 @@ item.total = event.total;
 var fetch = function fetch(context) {
-  return function (list) {
+  return function (urls) {
     return new Promise(function (resolve) {
-      context.loaded = list.length;
+      context.loaded = urls.length;
 
-      for (var _iterator4 = _createForOfIteratorHelperLoose(list), _step4; !(_step4 = _iterator4()).done;) {
-        var item = _step4.value;
+      for (var _iterator4 = _createForOfIteratorHelperLoose(urls), _step4; !(_step4 = _iterator4()).done;) {
+        var itemUrl = _step4.value;
+        // the item isn't a full StateItem yet but for the sake of simplicity we just cast
         context.state.push({
-          url: item
+          url: itemUrl
         });
-        preloadItem(context)(item, function (item) {
-          context.onFetched(item);
+        preloadItem(context)(itemUrl, function (loadedItem) {
+          context.onFetched(loadedItem);
           context.loaded--;
@@ -179,7 +170,3 @@
 };
-var createPreloader = function createPreloader(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
+var createPreloader = function createPreloader() {
   var onProgress = lightcast.createPubSub();
@@ -193,3 +180,2 @@ var onComplete = lightcast.createPubSub();
     loaded: 0,
-    stepped: options.stepped || true,
     onProgress: onProgress.dispatch,
@@ -196,0 +182,0 @@ onComplete: onComplete.dispatch,

dist/asset-preloader.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lightcast");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}function r(e,r){var o="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(o)return(o=o.call(e)).next.bind(o);if(Array.isArray(e)||(o=function(e,r){if(e){if("string"==typeof e)return t(e,void 0);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,void 0):void 0}}(e))||r&&e&&"number"==typeof e.length){o&&(e=o);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o=function(e){return function(t){for(var o,n=r(e.state);!(o=n()).done;){var a=o.value;if(a.url==t)return a}}},n=function(e){return function(){for(var t,o=r(e.state);!(t=o()).done;){var n=t.value;n.completion<100&&(n.xhr.abort(),n.status=0)}return e.onCancel(e.state),e.state}},a=function(e){return function(t){for(var o,n=0,a=e.stepped?100*e.state.length:0,s=0,i=r(e.state);!(o=i()).done;){var u=o.value;u.completion&&s++,e.stepped?u.completion&&(n+=u.completion):e._readyForComputation?(n+=u.downloaded,a+=u.total):n=a=0}e._readyForComputation=s==e.state.length;var l=n/a*100;isNaN(l)||e.onProgress({progress:l,item:t})}},s=function(e){return function(t,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="blob";var s=o(e)(t);s.xhr=n,n.onprogress=function(t){t.lengthComputable&&(s.completion=t.loaded/t.total*100,s.downloaded=t.loaded,s.total=t.total,a(e)(s))},n.onload=function(t){var o=t.target.response.type,a=t.target.responseURL;if(s.fileName=a.substring(a.lastIndexOf("/")+1),s.type=o,s.status=n.status,404==n.status)s.blobUrl=s.size=null,s.error=!0,e.onError(s);else{var i=new Blob([t.target.response],{type:o});s.blobUrl=URL.createObjectURL(i),s.size=i.size,s.error=!1}r(s)},n.send()}},i=function(e){return function(t){return new Promise((function(o){e.loaded=t.length;for(var n,a=r(t);!(n=a()).done;){var i=n.value;e.state.push({url:i}),s(e)(i,(function(t){e.onFetched(t),e.loaded--,0==e.loaded&&(e.onComplete(e.state),o(e.state))}))}}))}};exports.createPreloader=function(t){void 0===t&&(t={});var r=e.createPubSub(),u=e.createPubSub(),l=e.createPubSub(),c=e.createPubSub(),d=e.createPubSub(),p={state:[],loaded:0,stepped:t.stepped||!0,onProgress:r.dispatch,onComplete:u.dispatch,onFetched:l.dispatch,onError:c.dispatch,onCancel:d.dispatch};return{fetch:i(p),updateProgress:a(p),preloadItem:s(p),getItemByUrl:o(p),cancel:n(p),onProgress:r.subscribe,onComplete:u.subscribe,onFetched:l.subscribe,onError:c.subscribe,onCancel:d.subscribe,dispose:function(){n(p)(),r.dispose(),u.dispose(),l.dispose(),c.dispose(),d.dispose()}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lightcast");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}function r(e,r){var o="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(o)return(o=o.call(e)).next.bind(o);if(Array.isArray(e)||(o=function(e,r){if(e){if("string"==typeof e)return t(e,void 0);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,void 0):void 0}}(e))||r&&e&&"number"==typeof e.length){o&&(e=o);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o=function(e){return function(t){for(var o,n=r(e.state);!(o=n()).done;){var a=o.value;if(a.url==t)return a}return null}},n=function(e){return function(){for(var t,o=r(e.state);!(t=o()).done;){var n=t.value;n.completion<1&&(n.xhr.abort(),n.status=0)}return e.onCancel(e.state),e.state}},a=function(e){return function(t){for(var o,n=0,a=e.state.length,s=r(e.state);!(o=s()).done;){var u=o.value;u.completion&&(n+=u.completion)}var i=n/a;isNaN(i)||e.onProgress({progress:i,item:t})}},s=function(e){return function(t,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="blob";var s=o(e)(t);s.xhr=n,n.onprogress=function(t){t.lengthComputable&&(s.completion=t.loaded/t.total,s.downloaded=t.loaded,s.total=t.total,a(e)(s))},n.onload=function(t){var o=t.target.response.type,a=t.target.responseURL;if(s.fileName=a.substring(a.lastIndexOf("/")+1),s.type=o,s.status=n.status,404==n.status)s.blobUrl=s.size=null,s.error=!0,e.onError(s);else{var u=new Blob([t.target.response],{type:o});s.blobUrl=URL.createObjectURL(u),s.size=u.size,s.error=!1}r(s)},n.send()}},u=function(e){return function(t){return new Promise((function(o){e.loaded=t.length;for(var n,a=r(t);!(n=a()).done;){var u=n.value;e.state.push({url:u}),s(e)(u,(function(t){e.onFetched(t),e.loaded--,0==e.loaded&&(e.onComplete(e.state),o(e.state))}))}}))}};exports.createPreloader=function(){var t=e.createPubSub(),r=e.createPubSub(),i=e.createPubSub(),l=e.createPubSub(),c=e.createPubSub(),d={state:[],loaded:0,onProgress:t.dispatch,onComplete:r.dispatch,onFetched:i.dispatch,onError:l.dispatch,onCancel:c.dispatch};return{fetch:u(d),updateProgress:a(d),preloadItem:s(d),getItemByUrl:o(d),cancel:n(d),onProgress:t.subscribe,onComplete:r.subscribe,onFetched:i.subscribe,onError:l.subscribe,onCancel:c.subscribe,dispose:function(){n(d)(),t.dispose(),r.dispose(),i.dispose(),l.dispose(),c.dispose()}}};
 //# sourceMappingURL=asset-preloader.cjs.production.min.js.map

dist/asset-preloader.esm.js

@@ -42,7 +42,9 @@ import { createPubSub } from 'lightcast';
 var getItemByUrl = function getItemByUrl(context) {
-  return function (rawUrl) {
+  return function (url) {
     for (var _iterator = _createForOfIteratorHelperLoose(context.state), _step; !(_step = _iterator()).done;) {
       var item = _step.value;
-      if (item.url == rawUrl) return item;
+      if (item.url == url) return item;
     }
+
+    return null;
   };
@@ -55,3 +57,3 @@ };
 
-      if (item.completion < 100) {
+      if (item.completion < 1) {
         item.xhr.abort();
@@ -69,25 +71,13 @@ item.status = 0;
     var sumCompletion = 0;
-    var maxCompletion = context.stepped ? context.state.length * 100 : 0;
-    var initialisedCount = 0;
+    var maxCompletion = context.state.length;
 
     for (var _iterator3 = _createForOfIteratorHelperLoose(context.state), _step3; !(_step3 = _iterator3()).done;) {
       var itemState = _step3.value;
-      if (itemState.completion) initialisedCount++;
 
-      if (context.stepped) {
-        if (itemState.completion) {
-          sumCompletion += itemState.completion;
-        }
-      } else {
-        if (context._readyForComputation) {
-          sumCompletion += itemState.downloaded;
-          maxCompletion += itemState.total;
-        } else {
-          sumCompletion = maxCompletion = 0;
-        }
+      if (itemState.completion) {
+        sumCompletion += itemState.completion;
       }
     }
 
-    context._readyForComputation = initialisedCount == context.state.length;
-    var totalCompletion = sumCompletion / maxCompletion * 100;
+    var totalCompletion = sumCompletion / maxCompletion;
 
@@ -112,3 +102,3 @@ if (!isNaN(totalCompletion)) {
       if (event.lengthComputable) {
-        item.completion = event.loaded / event.total * 100;
+        item.completion = event.loaded / event.total;
         item.downloaded = event.loaded;
@@ -152,13 +142,14 @@ item.total = event.total;
 var fetch = function fetch(context) {
-  return function (list) {
+  return function (urls) {
     return new Promise(function (resolve) {
-      context.loaded = list.length;
+      context.loaded = urls.length;
 
-      for (var _iterator4 = _createForOfIteratorHelperLoose(list), _step4; !(_step4 = _iterator4()).done;) {
-        var item = _step4.value;
+      for (var _iterator4 = _createForOfIteratorHelperLoose(urls), _step4; !(_step4 = _iterator4()).done;) {
+        var itemUrl = _step4.value;
+        // the item isn't a full StateItem yet but for the sake of simplicity we just cast
         context.state.push({
-          url: item
+          url: itemUrl
         });
-        preloadItem(context)(item, function (item) {
-          context.onFetched(item);
+        preloadItem(context)(itemUrl, function (loadedItem) {
+          context.onFetched(loadedItem);
           context.loaded--;
@@ -175,7 +166,3 @@
 };
-var createPreloader = function createPreloader(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
+var createPreloader = function createPreloader() {
   var onProgress = createPubSub();
@@ -189,3 +176,2 @@ var onComplete = createPubSub();
     loaded: 0,
-    stepped: options.stepped || true,
     onProgress: onProgress.dispatch,
@@ -192,0 +178,0 @@ onComplete: onComplete.dispatch,

dist/lib/preloader.d.ts

@@ -1,39 +0,46 @@
-export declare const getItemByUrl: (context: PreloaderContext) => (rawUrl: string) => any;
-export declare const cancel: (context: PreloaderContext) => () => State;
-export declare const updateProgress: (context: PreloaderContext) => (item: StateItem) => void;
-export declare const preloadItem: <T>(context: PreloaderContext) => (url: string, done: (item: T) => void) => void;
-export declare const fetch: (context: PreloaderContext) => (list: Array<string>) => Promise<unknown>;
-declare type PreloaderOptions = {
-    stepped: boolean;
+export declare const getItemByUrl: (context: PreloaderContext) => (url: string) => Asset | null;
+export declare const cancel: (context: PreloaderContext) => () => Assets;
+export declare const updateProgress: (context: PreloaderContext) => (item: Asset) => void;
+export declare const preloadItem: (context: PreloaderContext) => (url: string, done: (item: Asset) => void) => void;
+export declare const fetch: (context: PreloaderContext) => (urls: Array<string>) => Promise<Assets>;
+declare type Asset = {
+    xhr: XMLHttpRequest;
+    blobUrl: string | null;
+    completion: number;
+    downloaded: number;
+    error: boolean;
+    fileName: string;
+    size: number | null;
+    status: number;
+    total: number;
+    type: string;
+    url: string;
 };
-declare type StateItem = any;
-declare type State = Array<StateItem>;
+declare type Assets = Array<Asset>;
 declare type ProgressPayload = {
-    item: StateItem;
+    item: Asset;
     progress: number;
 };
 declare type PreloaderContext = {
-    state: State;
+    state: Assets;
     loaded: number;
-    stepped: boolean;
     onProgress: (payload: ProgressPayload) => void;
-    onComplete: (payload: State) => void;
-    onFetched: (payload: StateItem) => void;
+    onComplete: (payload: Assets) => void;
+    onFetched: (payload: Asset) => void;
     onError: (payload: any) => void;
-    onCancel: (payload: State) => void;
-    _readyForComputation?: boolean;
+    onCancel: (payload: Assets) => void;
 };
-export declare const createPreloader: (options?: Partial<PreloaderOptions>) => {
-    fetch: (list: Array<string>) => Promise<unknown>;
-    updateProgress: (item: StateItem) => void;
-    preloadItem: (url: string, done: (item: unknown) => void) => void;
-    getItemByUrl: (rawUrl: string) => any;
-    cancel: () => State;
+export declare const createPreloader: () => {
+    fetch: (urls: Array<string>) => Promise<Assets>;
+    updateProgress: (item: Asset) => void;
+    preloadItem: (url: string, done: (item: Asset) => void) => void;
+    getItemByUrl: (url: string) => Asset | null;
+    cancel: () => Assets;
     onProgress: (callback: (payload: ProgressPayload) => void) => () => void;
-    onComplete: (callback: (payload: State) => void) => () => void;
-    onFetched: (callback: (payload: any) => void) => () => void;
+    onComplete: (callback: (payload: Assets) => void) => () => void;
+    onFetched: (callback: (payload: Asset) => void) => () => void;
     onError: (callback: (payload: string) => void) => () => void;
-    onCancel: (callback: (payload: State) => void) => () => void;
+    onCancel: (callback: (payload: Assets) => void) => () => void;
     dispose: () => void;
 };
 export {};

package.json

 {
   "name": "asset-preloader",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "skulptur",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -27,22 +27,21 @@ ## `asset-preloader`
   ])
-  .then((state) => {
+  .then((assets) => {
     // use the promise or the onComplete event
-    console.log('resolved', state)
+    console.log('resolved', assets)
   })
 
-preloader.onComplete((state) => {
-  console.log('completed', state)
+preloader.onComplete((assets) => {
+  console.log('completed', assets)
 })
 
 preloader.onProgress((event) => {
-  // use Math.round() if you want integers only
-  console.log(event.progress + '%')
+  console.log(Math.round(event.progress * 100) + '%')
 })
 
-preloader.onFetched((state) => {
-  console.log('fetched', state)
+preloader.onFetched((assets) => {
+  console.log('fetched', assets)
 })
 
-preloader.onError((state) => {
-  console.log('error', state)
+preloader.onError((assets) => {
+  console.log('error', assets)
 })
@@ -55,3 +54,3 @@ ```
 
-The asset preloader can be canceled at any time during loading, when calling `preload.cancel()` all assets already preloaded will be available for use, but the download of pending assets will be abandoned and `status` will be set to `0`.
+The asset preloader can be canceled at any time during loading. When calling `preload.cancel()` all assets already preloaded will be available for use, but the download of pending assets will be abandoned and `status` will be set to `0`.
 
@@ -58,0 +57,0 @@ ```typescript

src/lib/preloader.ts

 // code adapted from and improved upon https://github.com/andreupifarre/preload-it
 import { createPubSub } from 'lightcast'
 
-export const getItemByUrl = (context: PreloaderContext) => (rawUrl: string) => {
+export const getItemByUrl = (context: PreloaderContext) => (url: string) => {
   for (var item of context.state) {
-    if (item.url == rawUrl) return item
+    if (item.url == url) return item
   }
+
+  return null
 }
@@ -12,3 +14,3 @@
   for (var item of context.state) {
-    if (item.completion < 100) {
+    if (item.completion < 1) {
       item.xhr.abort()
@@ -24,27 +26,14 @@ item.status = 0
 
-export const updateProgress = (context: PreloaderContext) => (item: StateItem) => {
+export const updateProgress = (context: PreloaderContext) => (item: Asset) => {
   let sumCompletion = 0
-  let maxCompletion = context.stepped ? context.state.length * 100 : 0
-  let initialisedCount = 0
+  let maxCompletion = context.state.length
 
   for (const itemState of context.state) {
-    if (itemState.completion) initialisedCount++
-    if (context.stepped) {
-      if (itemState.completion) {
-        sumCompletion += itemState.completion
-      }
-    } else {
-      if (context._readyForComputation) {
-        sumCompletion += itemState.downloaded
-        maxCompletion += itemState.total
-      } else {
-        sumCompletion = maxCompletion = 0
-      }
+    if (itemState.completion) {
+      sumCompletion += itemState.completion
     }
   }
 
-  context._readyForComputation = initialisedCount == context.state.length
+  const totalCompletion = sumCompletion / maxCompletion
 
-  const totalCompletion = (sumCompletion / maxCompletion) * 100
-
   if (!isNaN(totalCompletion)) {
@@ -58,5 +47,5 @@ context.onProgress({
 
-export const preloadItem = <T>(context: PreloaderContext) => (
+export const preloadItem = (context: PreloaderContext) => (
   url: string,
-  done: (item: T) => void
+  done: (item: Asset) => void
 ) => {
@@ -67,3 +56,3 @@ const xhr = new XMLHttpRequest()
 
-  const item = getItemByUrl(context)(url)
+  const item = getItemByUrl(context)(url) as Asset
   item.xhr = xhr
@@ -73,3 +62,3 @@
     if (event.lengthComputable) {
-      item.completion = (event.loaded / event.total) * 100
+      item.completion = event.loaded / event.total
       item.downloaded = event.loaded
@@ -109,9 +98,10 @@ item.total = event.total
 
-export const fetch = (context: PreloaderContext) => (list: Array<string>) => {
-  return new Promise((resolve) => {
-    context.loaded = list.length
-    for (let item of list) {
-      context.state.push({ url: item })
-      preloadItem(context)(item, (item) => {
-        context.onFetched(item)
+export const fetch = (context: PreloaderContext) => (urls: Array<string>) => {
+  return new Promise<Assets>((resolve) => {
+    context.loaded = urls.length
+    for (let itemUrl of urls) {
+      // the item isn't a full StateItem yet but for the sake of simplicity we just cast
+      context.state.push({ url: itemUrl } as Asset)
+      preloadItem(context)(itemUrl, (loadedItem) => {
+        context.onFetched(loadedItem)
         context.loaded--
@@ -127,12 +117,20 @@ if (context.loaded == 0) {
 
-type PreloaderOptions = {
-  stepped: boolean
+type Asset = {
+  xhr: XMLHttpRequest
+  blobUrl: string | null
+  completion: number
+  downloaded: number
+  error: boolean
+  fileName: string
+  size: number | null
+  status: number
+  total: number
+  type: string
+  url: string
 }
 
-type StateItem = any
+type Assets = Array<Asset>
 
-type State = Array<StateItem>
-
 type ProgressPayload = {
-  item: StateItem
+  item: Asset
   progress: number
@@ -142,19 +140,17 @@ }
 type PreloaderContext = {
-  state: State
+  state: Assets
   loaded: number
-  stepped: boolean
   onProgress: (payload: ProgressPayload) => void
-  onComplete: (payload: State) => void
-  onFetched: (payload: StateItem) => void
+  onComplete: (payload: Assets) => void
+  onFetched: (payload: Asset) => void
   onError: (payload: any) => void
-  onCancel: (payload: State) => void
-  _readyForComputation?: boolean
+  onCancel: (payload: Assets) => void
 }
 
-export const createPreloader = (options: Partial<PreloaderOptions> = {}) => {
+export const createPreloader = () => {
   const onProgress = createPubSub<ProgressPayload>()
-  const onComplete = createPubSub<State>()
-  const onFetched = createPubSub<StateItem>()
+  const onComplete = createPubSub<Assets>()
+  const onFetched = createPubSub<Asset>()
   const onError = createPubSub<string>()
-  const onCancel = createPubSub<State>()
+  const onCancel = createPubSub<Assets>()
 
@@ -164,3 +160,2 @@ const context: PreloaderContext = {
     loaded: 0,
-    stepped: options.stepped || true,
     onProgress: onProgress.dispatch,
@@ -167,0 +162,0 @@ onComplete: onComplete.dispatch,

No alert changes

Worsened metrics

Total package byte prevSize

52560

decreased by-6.35%

Lines of code

577

decreased by-4.31%

Number of lines in readme file

62

decreased by-1.59%

No dependency changes