Beta

dist/pokeapi-js-wrapper-sw.js

@@ -0,0 +1,28 @@
+const imgRe = /https:\/\/raw\.githubusercontent\.com\/PokeAPI\/sprites\/[\/-\w\d]+\/[\d\w-]+\.(?:png|svg|gif)/
+const version = 1
+
+self.addEventListener('fetch', function (event) {
+    if (event.request.url.match(imgRe)) {
+        event.respondWith(caches.match(event.request).then(function (response) {
+            if (response) {
+                return response
+            }
+
+            return fetch(event.request).then(function (response) {
+                if (event.request.url.match(imgRe)) {
+                    caches.open("pokeapi-js-wrapper-images-" + version).then(function (cache) {
+                        // The response is opaque, if it fails cache.add() will reject it
+                        cache.add(event.request.url)
+                    })
+                }
+                return response;
+            }).catch(function (error) {
+                console.error(error)
+            })
+        }))
+    }
+})
+
+self.addEventListener('install', function(event) {
+    self.skipWaiting()
+})

package.json

@@ -1,17 +1,23 @@
 {
   "name": "pokeapi-js-wrapper",
-  "version": "1.1.2",
-  "description": "An API wrapper for PokeAPI - browser use only",
+  "version": "1.2.0-beta.0",
+  "description": "An API wrapper for PokeAPI",
   "main": "dist/index.js",
   "module": "src/index.js",
+  "files": [
+    "dist/index.js",
+    "dist/pokeapi-js-wrapper-sw.js",
+    "src/*"
+  ],
   "scripts": {
     "analyze": "webpack --json | webpack-bundle-size-analyzer",
     "build": "webpack -p",
     "build:watch": "webpack --watch",
     "doctoc": "doctoc .",
     "pretest": "npm run build",
     "test": "nyc mocha -r mock-local-storage -r source-map-support/register ./test/test.js",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "serve": "http-server ."
   },
   "repository": {
     "type": "git",
@@ -34,8 +40,8 @@
   },
   "homepage": "https://github.com/PokeAPI/pokeapi-js-wrapper#readme",
   "dependencies": {
-    "axios": "^0.19.0",
-    "localforage": "^1.7.3"
+    "axios": "^0.21.0",
+    "localforage": "^1.9.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -45,12 +51,14 @@
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "chai-things": "^0.2.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "http-server": "^0.12.3",
     "json-loader": "^0.5.7",
     "mocha": "^4.1.0",
-    "mock-local-storage": "^1.1.8",
-    "nyc": "^14.1.1",
-    "source-map-support": "^0.5.12",
+    "mock-local-storage": "^1.1.15",
+    "nyc": "^15.1.0",
+    "source-map-support": "^0.5.19",
     "webpack": "^3.12.0",
     "webpack-bundle-size-analyzer": "^2.7.0"
   }
-}
+}

src/config.js

@@ -0,0 +1,38 @@
+class Config {
+    constructor(config={}) {
+        this.protocol = 'https'
+        this.hostName = 'pokeapi.co'
+        this.versionPath = '/api/v2/'
+        this.offset = 0
+        this.limit = 100000
+        this.timeout = 10 * 1000 // 2 seconds
+        this.cache = true
+        this.cacheImages = false
+
+        if (config.hasOwnProperty('protocol')) {
+            this.protocol = config.protocol
+        }
+        if (config.hasOwnProperty('hostName')) {
+            this.hostName = config.hostName
+        }
+        if (config.hasOwnProperty('versionPath')) {
+            this.versionPath = config.versionPath
+        }
+        if (config.hasOwnProperty('offset')) {
+            this.offset = config.offset - 1
+        }
+        if (config.hasOwnProperty('limit')) {
+            this.limit = config.limit
+        }
+        if (config.hasOwnProperty('timeout')) {
+            this.timeout = config.timeout
+        }
+        if (config.hasOwnProperty('cache')) {
+            this.cache = config.cache
+        }
+        if (config.hasOwnProperty('cacheImages')) {
+            this.cacheImages = config.cacheImages
+        }
+    }
+}
+export { Config }

src/getter.js

@@ -1,63 +1,56 @@
-import axios from 'axios';
-import localForage from "localforage";
+import axios from 'axios'
+import localForage from "localforage"
 
-import { values } from './default.js';
+const CACHE_PREFIX = "pokeapi-js-wrapper-"
 
-const CACHE_PREFIX = "pokeapi-js-wrapper-";
-
-function loadResource(url) {
+function loadResource(config, url) {
     return new Promise((resolve, reject) => {
         localForage.ready()
             .then(() => {
                 localForage.getItem(`${CACHE_PREFIX}${url}`)
                     .then(value => {
                         if (value === null) {
-                            loadUrl(url).then(res => {resolve(res)})
-                                .catch(err => {reject(err)});
+                            loadUrl(config, url).then(res => {resolve(res)})
+                                .catch(err => {reject(err)})
                         } else {
                             resolve(addCacheMark(value))
                         }
                     })
-                    .catch(error => {
-                        loadUrl(url).then(res => {resolve(res)})
-                            .catch(err => {reject(err)});
-                    });
+                    .catch(err => {
+                        loadUrl(config, url).then(res => {resolve(res)})
+                            .catch(err => {reject(err)})
+                    })
             })
             .catch(err => {
-                loadUrl(url).then(res => {resolve(res)})
-                    .catch(err => {reject(err)});
-            });
-    });
-};
+                loadUrl(config, url).then(res => {resolve(res)})
+                    .catch(err => {reject(err)})
+            })
+    })
+}
 
-function loadUrl(url) {
+function loadUrl(config, url) {
     return new Promise((resolve, reject) => {
         let options = {
-            baseURL: `${values.protocol}://${values.hostName}/`,
-            timeout: values.timeout
+            baseURL: `${config.protocol}://${config.hostName}/`,
+            timeout: config.timeout
         }
         axios.get(url, options)
             .then(response => {
                 // if there was an error
                 if (response.status >= 400) {
-                    reject(response);
+                    reject(response)
                 } else {
                     // if everything was good
                     // cache the object in browser memory
                     // only if cache is true
-                    if (values.cache) {
-                        localForage.setItem(`${CACHE_PREFIX}${url}`, response.data);
+                    if (config.cache) {
+                        localForage.setItem(`${CACHE_PREFIX}${url}`, response.data)
                     }
-                    resolve(addCacheMark(response.data, 0));
+                    resolve(response.data)
                 }  
             })
             .catch(err => { reject(err) }) 
-    });
-}
-
-function addCacheMark(object, cached = 1) {
-    //object.fromCache = cached;
-    return object;
+    })
 }
 
-export { loadResource };
+export { loadResource }

src/index.js

@@ -1,37 +1,42 @@
-import endpoints from './endpoints.json';
-import rootEndpoints from './rootEndpoints.json';
-import { loadResource } from './getter.js';
-import { values } from './default.js';
-import { configurator } from './configurator.js';
+import localForage from "localforage"
+
+import endpoints from './endpoints.json'
+import rootEndpoints from './rootEndpoints.json'
+import { loadResource } from './getter.js'
+import { installSW } from './installSW.js'
+import { Config } from './config.js'
 
 export class Pokedex {
+
     constructor(config) {
-        configurator.setPokedexConfiguration(config);
-        configurator.setRootEndpointConfiguration(config);
-
+        this.config = new Config(config)
+        this.getConfig = function() {
+            return this.config
+        }
+
         // add to Pokedex.prototype all our endpoint functions
         endpoints.forEach(endpoint => {
             this[endpoint[0]] = input => { 
                 if (input) {
 
                     // if the user has submitted a Name or an ID, return the JSON promise
                     if (typeof input === 'number' || typeof input === 'string') {
-                        return loadResource(`${values.versionPath}${endpoint[1]}/${input}/`); 
+                        return loadResource(this.config, `${this.config.versionPath}${endpoint[1]}/${input}/`) 
                     }
 
                     // if the user has submitted an Array
                     // return a new promise which will resolve when all loadResource calls are ended
                     else if (typeof input === 'object') {
-                        return Promise.all(mapResources(endpoint, input));
+                        return Promise.all(mapResources(this.config, endpoint, input))
                     }
                 }
             }
-        });
+        })
 
         rootEndpoints.forEach(rootEndpoint => {
             this[rootEndpoint[0]] = config => {
-                var limit = values.limit
-                var offset = values.offset
+                var limit = this.config.limit
+                var offset = this.config.offset
                 if (config) {
                     if (config.hasOwnProperty('offset')) {
                         offset = config.offset
@@ -40,24 +45,32 @@ export class Pokedex {
                         limit = config.limit
                     }
                 }
-                return loadResource(`${values.versionPath}${rootEndpoint[1]}?limit=${limit}&offset=${offset}`);
+                return loadResource(this.config, `${this.config.versionPath}${rootEndpoint[1]}?limit=${limit}&offset=${offset}`)
             }
-        });
+        })
+
+        localForage.config({
+            name: 'pokeapi-js-wrapper'
+        })
+
+        if (this.config.cacheImages) {
+            installSW()
+        }
     }
 
     resource(path) {
         if (typeof path === 'string') {
-            return loadResource(path)
+            return loadResource(this.config, path)
         } else if (typeof path === 'object') {
-            return Promise.all(path.map(p => loadResource(p)));
+            return Promise.all(path.map(p => loadResource(this.config, p)))
         } else {
             return 'String or Array is required'
         }
     }
-};
+}
 
-function mapResources(endpoint, input) {
+function mapResources(config, endpoint, input) {
     return input.map(res => {
-        return loadResource(`${values.versionPath}${endpoint[1]}/${res}/`);
-    });
+        return loadResource(config, `${config.versionPath}${endpoint[1]}/${res}/`)
+    })
 }