better-jsonp - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/better-jsonp.common.js

 /*!
- * better-jsonp v1.0.2
+ * better-jsonp v1.1.0
  * Copyrights (c) 2018 Bowen (lbwa)
@@ -54,4 +54,12 @@ * Released under the MIT License.
 var Jsonp = function () {
-  function Jsonp() {
+  function Jsonp(options) {
     classCallCheck(this, Jsonp);
+
+    this.checkOptions(options);
+
+    this.initState(options);
+
+    this.encodeURL(options.url);
+
+    this.insertToElement(this._request);
   }
@@ -62,3 +70,3 @@
     value: function checkOptions(options) {
-      if (!options.url) throw new Error('Please check your request url.');
+      if (!options || !options.url) throw new Error('Please check your request url.');
 
@@ -68,4 +76,4 @@ this.options = options;
   }, {
-    key: 'generateJsonpCallback',
-    value: function generateJsonpCallback(options) {
+    key: 'genJsonpCallback',
+    value: function genJsonpCallback(options) {
       if (options.jsonpCallback) {
@@ -92,2 +100,8 @@ this._jsonpCallback = options.jsonpCallback;
       return new Promise(function (resolve, reject) {
+        // handle 404/500 in response
+        _this._insertScript.onerror = function () {
+          _this.cleanScript();
+          reject(new Error('Countdown has been clear! JSONP request unsuccessfully due to 404/500'));
+        };
+
         window[_this._jsonpCallback] = function (data) {
@@ -100,4 +114,4 @@ _this.cleanScript();
   }, {
-    key: 'generateTimer',
-    value: function generateTimer(options) {
+    key: 'genTimer',
+    value: function genTimer(options) {
       var _this2 = this;
@@ -108,3 +122,3 @@
 
-      // use arrow function to define `this` object value.
+      // use arrow function to define `this` object value (Jsonp instance).
       if (timeout) {
@@ -120,2 +134,8 @@ this._timer = setTimeout(function () {
   }, {
+    key: 'genScript',
+    value: function genScript() {
+      this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild;
+      this._insertScript = document.createElement('script');
+    }
+  }, {
     key: 'initState',
@@ -129,4 +149,6 @@ value: function initState(options) {
 
+      this.genScript();
+
       // set this._jsonpCallback
-      this.generateJsonpCallback(options);
+      this.genJsonpCallback(options);
 
@@ -137,3 +159,3 @@ // invoke defineGlobalCallback after setting this._jsonpCallback
       // set timer for limit request time
-      this.generateTimer(options);
+      this.genTimer(options);
     }
@@ -159,11 +181,9 @@ }, {
     }
+
+    // activate JSONP
+
   }, {
     key: 'insertToElement',
     value: function insertToElement(url) {
-      this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild;
-
-      this._insertScript = document.createElement('script');
       this._insertScript.src = url;
-
-      // activate JSONP
       this._target.parentNode.insertBefore(this._insertScript, this._target);
@@ -180,3 +200,2 @@ }
       window[this._jsonpCallback] = noop;
-
       if (this._timer) clearTimeout(this._timer);
@@ -191,15 +210,8 @@ }
 function createInstance(options) {
-  var jsonp = new Jsonp();
+  var jsonp = new Jsonp(options);
 
-  jsonp.checkOptions(options);
-
-  jsonp.initState(options);
-
-  jsonp.encodeURL(jsonp.options.url);
-
-  jsonp.insertToElement(jsonp._request);
-
-  return jsonp._globalCallback; // from initState(options)
+  // from initState(options)
+  return jsonp._globalCallback;
 }
 
 module.exports = createInstance;

dist/better-jsonp.js

 /*!
- * better-jsonp v1.0.2
+ * better-jsonp v1.1.0
  * Copyrights (c) 2018 Bowen (lbwa)
@@ -58,4 +58,12 @@ * Released under the MIT License.
   var Jsonp = function () {
-    function Jsonp() {
+    function Jsonp(options) {
       classCallCheck(this, Jsonp);
+
+      this.checkOptions(options);
+
+      this.initState(options);
+
+      this.encodeURL(options.url);
+
+      this.insertToElement(this._request);
     }
@@ -66,3 +74,3 @@
       value: function checkOptions(options) {
-        if (!options.url) throw new Error('Please check your request url.');
+        if (!options || !options.url) throw new Error('Please check your request url.');
 
@@ -72,4 +80,4 @@ this.options = options;
     }, {
-      key: 'generateJsonpCallback',
-      value: function generateJsonpCallback(options) {
+      key: 'genJsonpCallback',
+      value: function genJsonpCallback(options) {
         if (options.jsonpCallback) {
@@ -96,2 +104,8 @@ this._jsonpCallback = options.jsonpCallback;
         return new Promise(function (resolve, reject) {
+          // handle 404/500 in response
+          _this._insertScript.onerror = function () {
+            _this.cleanScript();
+            reject(new Error('Countdown has been clear! JSONP request unsuccessfully due to 404/500'));
+          };
+
           window[_this._jsonpCallback] = function (data) {
@@ -104,4 +118,4 @@ _this.cleanScript();
     }, {
-      key: 'generateTimer',
-      value: function generateTimer(options) {
+      key: 'genTimer',
+      value: function genTimer(options) {
         var _this2 = this;
@@ -112,3 +126,3 @@
 
-        // use arrow function to define `this` object value.
+        // use arrow function to define `this` object value (Jsonp instance).
         if (timeout) {
@@ -124,2 +138,8 @@ this._timer = setTimeout(function () {
     }, {
+      key: 'genScript',
+      value: function genScript() {
+        this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild;
+        this._insertScript = document.createElement('script');
+      }
+    }, {
       key: 'initState',
@@ -133,4 +153,6 @@ value: function initState(options) {
 
+        this.genScript();
+
         // set this._jsonpCallback
-        this.generateJsonpCallback(options);
+        this.genJsonpCallback(options);
 
@@ -141,3 +163,3 @@ // invoke defineGlobalCallback after setting this._jsonpCallback
         // set timer for limit request time
-        this.generateTimer(options);
+        this.genTimer(options);
       }
@@ -163,11 +185,9 @@ }, {
       }
+
+      // activate JSONP
+
     }, {
       key: 'insertToElement',
       value: function insertToElement(url) {
-        this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild;
-
-        this._insertScript = document.createElement('script');
         this._insertScript.src = url;
-
-        // activate JSONP
         this._target.parentNode.insertBefore(this._insertScript, this._target);
@@ -184,3 +204,2 @@ }
         window[this._jsonpCallback] = noop;
-
         if (this._timer) clearTimeout(this._timer);
@@ -195,13 +214,6 @@ }
   function createInstance(options) {
-    var jsonp = new Jsonp();
+    var jsonp = new Jsonp(options);
 
-    jsonp.checkOptions(options);
-
-    jsonp.initState(options);
-
-    jsonp.encodeURL(jsonp.options.url);
-
-    jsonp.insertToElement(jsonp._request);
-
-    return jsonp._globalCallback; // from initState(options)
+    // from initState(options)
+    return jsonp._globalCallback;
   }
@@ -208,0 +220,0 @@

dist/better-jsonp.min.js

 /*!
- * better-jsonp v1.0.2
+ * better-jsonp v1.1.0
  * Copyrights (c) 2018 Bowen (lbwa)
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.jsonp=t()}(this,function(){"use strict";function e(){}function t(e,t,n){Reflect.defineProperty(e,t,{enumerable:!1,writable:!0,value:n})}function n(e){return encodeURIComponent(e)}var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),a={timeout:6e3,prefix:"callback",callbackParams:"jsonpCallback",urlParams:{}},l=function(){function l(){i(this,l)}return r(l,[{key:"checkOptions",value:function(e){if(!e.url)throw new Error("Please check your request url.");this.options=e}},{key:"generateJsonpCallback",value:function(e){if(e.jsonpCallback)this._jsonpCallback=e.jsonpCallback;else{var t=a.prefix;this._jsonpCallback=t+Date.now()}}},{key:"defineGlobalCallback",value:function(){var e=this;return new Promise(function(t,n){window[e._jsonpCallback]=function(n){e.cleanScript(),t(n)}})}},{key:"generateTimer",value:function(t){var n=this,i=t.timeout||a.timeout;i&&(this._timer=setTimeout(function(){throw window[n._jsonpCallback]=e,n._timer=null,n.cleanScript(),new Error("JSONP request unsuccessfully (eg.timeout or wrong url).")},i))}},{key:"initState",value:function(e){t(this,"_timer",null),t(this,"_request",null),t(this,"_jsonpCallback",null),t(this,"_insertScript",null),t(this,"_target",null),this.generateJsonpCallback(e),t(this,"_globalCallback",this.defineGlobalCallback()),this.generateTimer(e)}},{key:"encodeURL",value:function(e){var t=this.options.callbackParams||a.callbackParams,i=n(this._jsonpCallback);e+=(e.indexOf("?")<0?"?":"&")+t+"="+i;var r=this.options.urlParams||a.urlParams;Object.keys(r).forEach(function(t){var i=void 0!==r[t]?r[t]:"";e+="&"+t+"="+n(i)}),this._request=e}},{key:"insertToElement",value:function(e){this._target=document.getElementsByTagName("script")[0]||document.body.lastElementChild,this._insertScript=document.createElement("script"),this._insertScript.src=e,this._target.parentNode.insertBefore(this._insertScript,this._target)}},{key:"cleanScript",value:function(){this._insertScript.parentNode&&(this._target.parentNode.removeChild(this._insertScript),this._insertScript=null),window[this._jsonpCallback]=e,this._timer&&clearTimeout(this._timer)}}]),l}();return function(e){var t=new l;return t.checkOptions(e),t.initState(e),t.encodeURL(t.options.url),t.insertToElement(t._request),t._globalCallback}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.jsonp=t()}(this,function(){"use strict";function e(){}function t(e,t,n){Reflect.defineProperty(e,t,{enumerable:!1,writable:!0,value:n})}function n(e){return encodeURIComponent(e)}var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),a={timeout:6e3,prefix:"callback",callbackParams:"jsonpCallback",urlParams:{}},l=function(){function l(e){i(this,l),this.checkOptions(e),this.initState(e),this.encodeURL(e.url),this.insertToElement(this._request)}return r(l,[{key:"checkOptions",value:function(e){if(!e||!e.url)throw new Error("Please check your request url.");this.options=e}},{key:"genJsonpCallback",value:function(e){if(e.jsonpCallback)this._jsonpCallback=e.jsonpCallback;else{var t=a.prefix;this._jsonpCallback=t+Date.now()}}},{key:"defineGlobalCallback",value:function(){var e=this;return new Promise(function(t,n){e._insertScript.onerror=function(){e.cleanScript(),n(new Error("Countdown has been clear! JSONP request unsuccessfully due to 404/500"))},window[e._jsonpCallback]=function(n){e.cleanScript(),t(n)}})}},{key:"genTimer",value:function(t){var n=this,i=t.timeout||a.timeout;i&&(this._timer=setTimeout(function(){throw window[n._jsonpCallback]=e,n._timer=null,n.cleanScript(),new Error("JSONP request unsuccessfully (eg.timeout or wrong url).")},i))}},{key:"genScript",value:function(){this._target=document.getElementsByTagName("script")[0]||document.body.lastElementChild,this._insertScript=document.createElement("script")}},{key:"initState",value:function(e){t(this,"_timer",null),t(this,"_request",null),t(this,"_jsonpCallback",null),t(this,"_insertScript",null),t(this,"_target",null),this.genScript(),this.genJsonpCallback(e),t(this,"_globalCallback",this.defineGlobalCallback()),this.genTimer(e)}},{key:"encodeURL",value:function(e){var t=this.options.callbackParams||a.callbackParams,i=n(this._jsonpCallback);e+=(e.indexOf("?")<0?"?":"&")+t+"="+i;var r=this.options.urlParams||a.urlParams;Object.keys(r).forEach(function(t){var i=void 0!==r[t]?r[t]:"";e+="&"+t+"="+n(i)}),this._request=e}},{key:"insertToElement",value:function(e){this._insertScript.src=e,this._target.parentNode.insertBefore(this._insertScript,this._target)}},{key:"cleanScript",value:function(){this._insertScript.parentNode&&(this._target.parentNode.removeChild(this._insertScript),this._insertScript=null),window[this._jsonpCallback]=e,this._timer&&clearTimeout(this._timer)}}]),l}();return function(e){return new l(e)._globalCallback}});

lib/core/Jsonp.js

@@ -11,4 +11,14 @@ import { noop, defineEnumerable, euc } from '../utils/index.js'
 export default class Jsonp {
+  constructor (options) {
+    this.checkOptions(options)
+
+    this.initState(options)
+
+    this.encodeURL(options.url)
+
+    this.insertToElement(this._request)
+  }
+
   checkOptions (options) {
-    if (!options.url) throw new Error('Please check your request url.')
+    if (!options || !options.url) throw new Error('Please check your request url.')
 
@@ -18,3 +28,3 @@ this.options = options
 
-  generateJsonpCallback (options) {
+  genJsonpCallback (options) {
     if (options.jsonpCallback) {
@@ -38,2 +48,8 @@ this._jsonpCallback = options.jsonpCallback
     return new Promise((resolve, reject) => {
+      // handle 404/500 in response
+      this._insertScript.onerror = () => {
+        this.cleanScript()
+        reject(new Error(`Countdown has been clear! JSONP request unsuccessfully due to 404/500`))
+      }
+
       window[this._jsonpCallback] = (data) => {
@@ -46,7 +62,7 @@ this.cleanScript()
 
-  generateTimer (options) {
+  genTimer (options) {
     // limit request period
     const timeout = options.timeout || defaultOptions.timeout
 
-    // use arrow function to define `this` object value.
+    // use arrow function to define `this` object value (Jsonp instance).
     if (timeout) {
@@ -62,2 +78,7 @@ this._timer = setTimeout(() => {
 
+  genScript () {
+    this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild
+    this._insertScript = document.createElement('script')
+  }
+
   initState (options) {
@@ -70,4 +91,6 @@ defineEnumerable(this, '_timer', null)
 
+    this.genScript()
+
     // set this._jsonpCallback
-    this.generateJsonpCallback(options)
+    this.genJsonpCallback(options)
 
@@ -78,3 +101,3 @@ // invoke defineGlobalCallback after setting this._jsonpCallback
     // set timer for limit request time
-    this.generateTimer(options)
+    this.genTimer(options)
   }
@@ -100,9 +123,5 @@
 
+  // activate JSONP
   insertToElement (url) {
-    this._target = document.getElementsByTagName('script')[0] || document.body.lastElementChild
-
-    this._insertScript = document.createElement('script')
     this._insertScript.src = url
-
-    // activate JSONP
     this._target.parentNode.insertBefore(this._insertScript, this._target)
@@ -118,5 +137,4 @@ }
     window[this._jsonpCallback] = noop
-
     if (this._timer) clearTimeout(this._timer)
   }
 }

lib/jsonp.js

@@ -6,15 +6,8 @@ import Jsonp from './core/Jsonp'
 function createInstance (options) {
-  const jsonp = new Jsonp()
+  const jsonp = new Jsonp(options)
 
-  jsonp.checkOptions(options)
-
-  jsonp.initState(options)
-
-  jsonp.encodeURL(jsonp.options.url)
-
-  jsonp.insertToElement(jsonp._request)
-
-  return jsonp._globalCallback // from initState(options)
+  // from initState(options)
+  return jsonp._globalCallback
 }
 
 export default createInstance

package.json

 {
   "name": "better-jsonp",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A simple JSONP implementation",
@@ -22,3 +22,4 @@ "main": "dist/better-jsonp.common.js",
     "cleaner": "rm -vrf dist/*",
-    "commit": "yarn run build && git add . && git-cz"
+    "commit": "yarn run build && git add . && git-cz",
+    "changelog": "./node_modules/.bin/conventional-changelog -p angular -i CHANGELOG.md -s"
   },
@@ -47,2 +48,3 @@ "repository": {
     "commitizen": "^2.10.1",
+    "conventional-changelog-cli": "^2.0.1",
     "cz-conventional-changelog": "^2.1.0",
@@ -49,0 +51,0 @@ "eslint": "^4.19.1",

README.md

@@ -1,4 +0,4 @@
-# Better JSONP [![npm](https://img.shields.io/npm/v/better-jsonp.svg)](https://www.npmjs.com/package/better-jsonp) [![Build Status](https://travis-ci.org/lbwa/jsonp.svg?branch=master)](https://travis-ci.org/lbwa/jsonp)
+# Better JSONP [![npm](https://img.shields.io/npm/v/better-jsonp.svg)](https://www.npmjs.com/package/better-jsonp) [![Build Status](https://travis-ci.org/lbwa/jsonp.svg?branch=master)](https://travis-ci.org/lbwa/jsonp) [![npm](https://img.shields.io/npm/dt/better-jsonp.svg)](https://github.com/lbwa/jsonp)
 
-A minimal JSONP implementation which is used to be a kind of cross domain solution.
+A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions.
 
@@ -25,7 +25,22 @@ ## Features
 <!-- using CDN -->
-<script src="https://cdn.jsdelivr.net/npm/better-jsonp"></script>
+<script src="https://unpkg.com/better-jsonp"></script>
+<script src="https://cdn.jsdelivr.net/npm/better-jsonp@latest/dist/better-jsonp.min.js"></script>
 ```
 
+## Promise polyfill
+
+If your browser doesn't support [ES6 Promise], you should import polyfill to the global environment at the beginning of your application.
+
+```js
+require('es6-promise').polyfill()
+```
+
+***Notice***: Don't assign the result of `polyfill()` to any variable.
+
+[es6 promise]:http://www.ecma-international.org/ecma-262/#sec-promise-objects
+
 ## Usage
 
+JSONP ***only*** support GET methods, same as `better-JSONP`.
+
 ```js
@@ -53,4 +68,10 @@ jsonp({
 | `timeout` | `Number` | false, default : `6000` | how long after timeout error is emitted. `0` to disable |
-| `jsonpCallback`  | `String` | false, default : `'callback'+'Date.now()'` | global callback function name which is used to handle JSONP response. |
+| `jsonpCallback`  | `String` | false, default : `'callback'+Date.now()` | global callback function name which is used to handle JSONP response. |
 | `callbackParams` | `String` | false, default: `jsonpCallback` | name of query parameter to specify the callback name |
 | `urlParams` |  `Object`  | false, default: `{}` | other parameters in query string parameters |
+
+## Notice
+
+- `Uncaught SyntaxError: Unexpected token :`error
+
+It mostly doesn't support JSONP request when you are calling a JSON api. The difference between JSON api and JSONP is that  JSON api response with an object like `{ num: 1 }` (It will throw a error when client executed this response as a function. ). On the other hand, JSONP will respond with a function wrapped object like `jsonpCallback({ num: 1 })` and we will get what we need when client executed this response as a function.

No alert changes

Improved metrics

Total package byte prevSize

25165

increased by12.44%

Number of package files

9

increased by12.5%

Lines of code

495

increased by7.14%

Number of lines in readme file

76

increased by38.18%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes