jsonpath-picker-vanilla - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/jsonpath-picker.js

@@ -0,3 +1,13 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
 
+var lib = require('./jsonpath-picker');
+
+var JPPicker = window.JPPicker || {};
+JPPicker.render = lib.jsonPathPicker;
+JPPicker.destory = lib.clearJsonPathPicker;
+window.JPPicker = JPPicker;
+},{"./jsonpath-picker":2}],2:[function(require,module,exports){
+"use strict";
+
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -74,6 +84,5 @@
     if (keyCount > 0) {
-      html += '{<ul class="json-dict">'; // eslint-disable-next-line no-restricted-syntax
+      html += '{<ul class="json-dict">';
 
       for (var key in json) {
-        // eslint-disable-next-line no-prototype-builtins
         if (json.hasOwnProperty(key)) {
@@ -89,3 +98,3 @@ html += "<li data-key-type=\"object\" data-key=\"".concat(key, "\">");
 
-          html += '<span class="pick-path" title="Pick path">&#x1f4cb;</span>';
+          html += '<span class="pick-path" title="Pick path">&' + options.pickerIcon + ';</span>';
           html += ": ".concat(json2html(json[key], options)); // Add comma if item is not last
@@ -240,6 +249,6 @@
 /**
- * jQuery plugin method
- * @param source path to element where to put render
+ * Plugin method
+ * @param source: Element
  * @param json: a javascript object
- * @param target: array of javascript object
+ * @param target: NodeListOf<Element> | Element | { value: String }[] | { value: String }
  * @param opt: an optional options hash
@@ -251,11 +260,30 @@ */
   var options = opt || {};
-  options.pathQuotesType = options.pathQuotesType !== undefined ? options.pathQuotesType : 'single';
-  var $source = document.querySelector(source); // Transform to HTML
 
+  if (!source instanceof Element) {
+    return 1;
+  }
+
+  var targetList = [];
+
+  if (target) {
+    if (target.length) {
+      targetList = target;
+    } else if (target.value) {
+      targetList = [target];
+    } else {
+      return 3;
+    }
+  } else {
+    return 3;
+  }
+
+  options.pathQuotesType = options.pathQuotesType !== undefined ? options.pathQuotesType : 'single'; // Transform to HTML
+
+  options.pickerIcon = options.pickerIcon || '#x1f4cb';
   var html = json2html(json, options);
   if (isCollapsable(json)) html = "<a href class=\"json-toggle\"></a>".concat(html); // Insert HTML in target DOM element
 
-  $source.innerHTML = html; // Bind click on toggle buttons
+  source.innerHTML = html; // Bind click on toggle buttons
 
-  off('click', $source);
+  off('click', source);
 
@@ -267,3 +295,2 @@ function HandlerEventToggle(elm, event) {
     var subTarget = siblings(elm, 'ul.json-dict, ol.json-array', function (el) {
-      // eslint-disable-next-line no-param-reassign
       el.style.display = el.style.display === '' || el.style.display === 'block' ? 'none' : 'block';
@@ -300,3 +327,3 @@ }); // ForEach subtarget, previous siblings return array so we parse it
 
-  $source.addEventListener('click', function ToggleEventListener(event) {
+  source.addEventListener('click', function ToggleEventListener(event) {
     var t = event.target;
@@ -323,3 +350,3 @@
 
-  $source.addEventListener('click', function SimulateClickEventListener(event) {
+  source.addEventListener('click', function SimulateClickEventListener(event) {
     var t = event.target;
@@ -337,3 +364,3 @@
   function PickPathHandler(elm) {
-    if (target.length === 0) {
+    if (targetList.length === 0) {
       return;
@@ -387,9 +414,10 @@ }
 
-    for (var _i2 = 0; _i2 < target.length; _i2 += 1) {
-      // eslint-disable-next-line no-param-reassign
-      target[_i2].value = path;
+    for (var _i2 = 0; _i2 < targetList.length; _i2 += 1) {
+      if (targetList[_i2].value !== undefined) {
+        targetList[_i2].value = path;
+      }
     }
   }
 
-  $source.addEventListener('click', function PickEventListener(event) {
+  source.addEventListener('click', function PickEventListener(event) {
     var t = event.target;
@@ -414,2 +442,17 @@
   }
-}
+}
+/**
+ * Plugin clear method
+ * @param source: Element
+ */
+
+
+function clearJsonPathPicker(source) {
+  source.removeEventListener('click');
+}
+
+module.exports = {
+  jsonPathPicker: jsonPathPicker,
+  clearJsonPathPicker: clearJsonPathPicker
+};
+},{}]},{},[1]);

lib/jsonpath-picker.min.js

@@ -1,1 +0,1 @@
-"use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function isCollapsable(e){return e instanceof Object&&0<Object.keys(e).length}function isUrl(e){return/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(e)}function json2html(e,t){var n="";if("string"==typeof e){var a=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");isUrl(a)?n+='<a href="'.concat(a,'" class="json-string">').concat(a,"</a>"):n+='<span class="json-string">"'.concat(a,'"</span>')}else if("number"==typeof e)n+='<span class="json-literal">'.concat(e,"</span>");else if("boolean"==typeof e)n+='<span class="json-literal">'.concat(e,"</span>");else if(null===e)n+='<span class="json-literal">null</span>';else if(e instanceof Array)if(0<e.length){n+='[<ol class="json-array">';for(var o=0;o<e.length;o+=1)n+='<li data-key-type="array" data-key="'.concat(o,'">'),isCollapsable(e[o])&&(n+='<a href class="json-toggle"></a>'),n+=json2html(e[o],t),o<e.length-1&&(n+=","),n+="</li>";n+="</ol>]"}else n+="[]";else if("object"===_typeof(e)){var s=Object.keys(e).length;if(0<s){for(var l in n+='{<ul class="json-dict">',e)if(e.hasOwnProperty(l)){n+='<li data-key-type="object" data-key="'.concat(l,'">');var r=t.outputWithQuotes?'<span class="json-string">"'.concat(l,'"</span>'):l;isCollapsable(e[l])?n+='<a href class="json-toggle">'.concat(r,"</a>"):n+=r,n+='<span class="pick-path" title="Pick path">&#x1f4cb;</span>',n+=": ".concat(json2html(e[l],t)),0<(s-=1)&&(n+=","),n+="</li>"}n+="</ul>}"}else n+="{}"}return n}function off(e,t,n,a){var o=a,s=n,l=t;"function"==typeof t&&(o=n,s=t,l=window),o=!!o,(l="string"==typeof l?document.querySelector(l):l)&&l.removeEventListener(e,s,o)}function siblings(e,t,n){for(var a=[],o=0;o<e.parentNode.children.length;o+=1){var s=e.parentNode.children[o];s===e||t&&!s.matches(t)||a.push(s)}if(n&&"function"==typeof n)for(var l=0;l<a.length;l+=1)n(a[l]);return a}function fireClick(e){var t;if(e.ownerDocument)t=e.ownerDocument;else{if(9!==e.nodeType)throw new Error("Invalid node passed to fireEvent: ".concat(e.id));t=e}if(e.dispatchEvent){var n=t.createEvent("MouseEvents");n.initEvent("click",!0,!0),n.synthetic=!0,e.dispatchEvent(n,!0)}else if(e.fireEvent){var a=t.createEventObject();a.synthetic=!0,e.fireEvent("onclick",a)}}function isHidden(e){var t=e.offsetWidth,n=e.offsetHeight;return 0===t&&0===n||"none"===window.getComputedStyle(e).display}function getParents(e,t){for(var n=[],a=e&&e.parentElement;a;a=a.parentElement)t&&!a.matches(t)||n.push(a);return n}function jsonPathPicker(e,t,f,n){var u=n||{};u.pathQuotesType=void 0!==u.pathQuotesType?u.pathQuotesType:"single";var a=document.querySelector(e),o=json2html(t,u);function s(e,t){e.classList.toggle("collapsed");for(var n=siblings(e,"ul.json-dict, ol.json-array",function(e){e.style.display=""===e.style.display||"block"===e.style.display?"none":"block"}),a=0;a<n.length;a+=1)if(isHidden(n[a])){for(var o=n[a].children,s=0,l=0;l<o.length;l+=1)"LI"===o[l].tagName&&(s+=1);var r=s+(1<s?" items":" item");n[a].insertAdjacentHTML("afterend",'<a href class="json-placeholder">'.concat(r,"</a>"))}else siblings(n[a],".json-placeholder",function(e){return e.parentNode.removeChild(e)});t.stopPropagation(),t.preventDefault()}function l(e,t){siblings(e,"a.json-toggle",function(e){return fireClick(e,"click")}),t.stopPropagation(),t.preventDefault()}function r(e){if(0!==f.length){for(var t=getParents(e,"li").reverse(),n=[],a=0;a<t.length;a+=1){var o=t[a].dataset.key,s=t[a].dataset.keyType;if("object"===s&&"number"!=typeof o&&u.processKeys&&void 0!==u.keyReplaceRegexPattern){var l=new RegExp(u.keyReplaceRegexPattern,u.keyReplaceRegexFlags),r=void 0===u.keyReplacementText?"":u.keyReplacementText;o=o.replace(l,r)}n.push({key:o,keyType:s})}for(var c={none:"",single:"'",double:'"'}[u.pathQuotesType],i=(n=n.map(function(e,t){var n="brackets"===u.pathNotation,a=!/^\w+$/.test(e.key)||"number"==typeof e.key;return"array"===e.keyType||e.isKeyANumber?"[".concat(e.key,"]"):n||a?"[".concat(c).concat(e.key).concat(c,"]"):0<t?".".concat(e.key):e.key})).join(""),p=0;p<f.length;p+=1)f[p].value=i}}if(isCollapsable(t)&&(o='<a href class="json-toggle"></a>'.concat(o)),a.innerHTML=o,off("click",a),a.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches("a.json-toggle")&&(s.call(null,t,e),e.stopPropagation(),e.preventDefault()),t=t.parentNode}),a.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches("a.json-placeholder")&&l.call(null,t,e),t=t.parentNode}),a.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches(".pick-path")&&r.call(null,t,e),t=t.parentNode}),!0===u.outputCollapsed)for(var c=document.querySelectorAll("a.json-toggle"),i=0;i<c.length;i+=1)fireClick(c[i],"click")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.json2html=json2html,exports.default=jsonPathPicker;
+!function a(c,i,s){function l(t,e){if(!i[t]){if(!c[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(p)return p(t,!0);var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}var r=i[t]={exports:{}};c[t][0].call(r.exports,function(e){return l(c[t][1][e]||e)},r,r.exports,a,c,i,s)}return i[t].exports}for(var p="function"==typeof require&&require,e=0;e<s.length;e++)l(s[e]);return l}({1:[function(e,t,n){"use strict";var o=e("./jsonpath-picker"),r=window.JPPicker||{};r.render=o.jsonPathPicker,r.destory=o.clearJsonPathPicker,window.JPPicker=r},{"./jsonpath-picker":2}],2:[function(e,t,n){"use strict";function p(e){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e){return e instanceof Object&&0<Object.keys(e).length}function h(e,t,n){for(var o=[],r=0;r<e.parentNode.children.length;r+=1){var a=e.parentNode.children[r];a===e||t&&!a.matches(t)||o.push(a)}if(n&&"function"==typeof n)for(var c=0;c<o.length;c+=1)n(o[c]);return o}function v(e){var t;if(e.ownerDocument)t=e.ownerDocument;else{if(9!==e.nodeType)throw new Error("Invalid node passed to fireEvent: ".concat(e.id));t=e}if(e.dispatchEvent){var n=t.createEvent("MouseEvents");n.initEvent("click",!0,!0),n.synthetic=!0,e.dispatchEvent(n,!0)}else if(e.fireEvent){var o=t.createEventObject();o.synthetic=!0,e.fireEvent("onclick",o)}}t.exports={jsonPathPicker:function(e,t,n,o){var f=o||{};if(!e instanceof Element)return 1;var u=[];if(!n)return 3;if(n.length)u=n;else{if(!n.value)return 3;u=[n]}f.pathQuotesType=void 0!==f.pathQuotesType?f.pathQuotesType:"single",f.pickerIcon=f.pickerIcon||"#x1f4cb";var r=function e(t,n){var o="";if("string"==typeof t){var r=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");!function(e){return/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(e)}(r)?o+='<span class="json-string">"'.concat(r,'"</span>'):o+='<a href="'.concat(r,'" class="json-string">').concat(r,"</a>")}else if("number"==typeof t)o+='<span class="json-literal">'.concat(t,"</span>");else if("boolean"==typeof t)o+='<span class="json-literal">'.concat(t,"</span>");else if(null===t)o+='<span class="json-literal">null</span>';else if(t instanceof Array)if(0<t.length){o+='[<ol class="json-array">';for(var a=0;a<t.length;a+=1)o+='<li data-key-type="array" data-key="'.concat(a,'">'),y(t[a])&&(o+='<a href class="json-toggle"></a>'),o+=e(t[a],n),a<t.length-1&&(o+=","),o+="</li>";o+="</ol>]"}else o+="[]";else if("object"===p(t)){var c=Object.keys(t).length;if(0<c){for(var i in o+='{<ul class="json-dict">',t)if(t.hasOwnProperty(i)){o+='<li data-key-type="object" data-key="'.concat(i,'">');var s=n.outputWithQuotes?'<span class="json-string">"'.concat(i,'"</span>'):i;y(t[i])?o+='<a href class="json-toggle">'.concat(s,"</a>"):o+=s,o+='<span class="pick-path" title="Pick path">&'+n.pickerIcon+";</span>",o+=": ".concat(e(t[i],n)),0<(c-=1)&&(o+=","),o+="</li>"}o+="</ul>}"}else o+="{}"}return o}(t,f);function a(e,t){e.classList.toggle("collapsed");for(var n,o,r,a=h(e,"ul.json-dict, ol.json-array",function(e){e.style.display=""===e.style.display||"block"===e.style.display?"none":"block"}),c=0;c<a.length;c+=1)if(n=a[c],void 0,o=n.offsetWidth,r=n.offsetHeight,0===o&&0===r||"none"===window.getComputedStyle(n).display){for(var i=a[c].children,s=0,l=0;l<i.length;l+=1)"LI"===i[l].tagName&&(s+=1);var p=s+(1<s?" items":" item");a[c].insertAdjacentHTML("afterend",'<a href class="json-placeholder">'.concat(p,"</a>"))}else h(a[c],".json-placeholder",function(e){return e.parentNode.removeChild(e)});t.stopPropagation(),t.preventDefault()}function c(e,t){h(e,"a.json-toggle",function(e){return v(e)}),t.stopPropagation(),t.preventDefault()}function i(e){if(0!==u.length){for(var t=function(e,t){for(var n=[],o=e&&e.parentElement;o;o=o.parentElement)t&&!o.matches(t)||n.push(o);return n}(e,"li").reverse(),n=[],o=0;o<t.length;o+=1){var r=t[o].dataset.key,a=t[o].dataset.keyType;if("object"===a&&"number"!=typeof r&&f.processKeys&&void 0!==f.keyReplaceRegexPattern){var c=new RegExp(f.keyReplaceRegexPattern,f.keyReplaceRegexFlags),i=void 0===f.keyReplacementText?"":f.keyReplacementText;r=r.replace(c,i)}n.push({key:r,keyType:a})}for(var s={none:"",single:"'",double:'"'}[f.pathQuotesType],l=(n=n.map(function(e,t){var n="brackets"===f.pathNotation,o=!/^\w+$/.test(e.key)||"number"==typeof e.key;return"array"===e.keyType||e.isKeyANumber?"[".concat(e.key,"]"):n||o?"[".concat(s).concat(e.key).concat(s,"]"):0<t?".".concat(e.key):e.key})).join(""),p=0;p<u.length;p+=1)void 0!==u[p].value&&(u[p].value=l)}}if(y(t)&&(r='<a href class="json-toggle"></a>'.concat(r)),e.innerHTML=r,function(e,t,n,o){var r=o,a=n,c=t;"function"==typeof t&&(r=n,a=t,c=window),r=!!r,(c="string"==typeof c?document.querySelector(c):c)&&c.removeEventListener(e,a,r)}("click",e),e.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches("a.json-toggle")&&(a.call(null,t,e),e.stopPropagation(),e.preventDefault()),t=t.parentNode}),e.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches("a.json-placeholder")&&c.call(null,t,e),t=t.parentNode}),e.addEventListener("click",function(e){for(var t=e.target;t&&t!==this;)t.matches(".pick-path")&&i.call(null,t,e),t=t.parentNode}),!0===f.outputCollapsed)for(var s=document.querySelectorAll("a.json-toggle"),l=0;l<s.length;l+=1)v(s[l])},clearJsonPathPicker:function(e){e.removeEventListener("click")}}},{}]},{},[1]);

package.json

 {
   "name": "jsonpath-picker-vanilla",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "JS native script for displaying JSON data with path picker feature",
   "author": "Oscar Marie--Taillefer",
+  "main": "index.js",
   "repository": {
@@ -14,3 +15,6 @@ "type": "git",
     "min": "npm run min:js && npm run min:css",
-    "build": "babel src -d lib"
+    "build:babel": "babel src -d build",
+    "build:browser": "browserify build/jsonpath-picker.browser.js -o lib/jsonpath-picker.js",
+    "build:node": "cp build/jsonpath-picker.js index.js",
+    "build": "npm run build:babel && npm run build:browser && npm run build:node"
   },
@@ -32,2 +36,3 @@ "keywords": [
     "@babel/preset-env": "^7.4.5",
+    "browserify": "^16.2.3",
     "uglify-js": "^3.6.0",
@@ -34,0 +39,0 @@ "uglifycss": "0.0.29"

README.md

@@ -24,3 +24,3 @@ # [JSON path picker](https://ryshu.github.io/jsonpath-picker/)
 
-Import `json-path-picker.min.js` and `json-path-picker.min.css` in your application.
+Import `jsonpath-picker.min.js` and `jsonpath-picker.min.css` in your application.
 
@@ -38,6 +38,6 @@ ## Plugin Usage
   ```html
-  <input id="path" type="text">
+  <input class="path" type="text">
   ```
 
-3. Call the `jsonPathPicker()` method and pass your JSON data and path target element selector as an arguments:
+3. Call the `render()` method and pass your JSON data and path target element selector as an arguments:
 
@@ -49,3 +49,11 @@ ```js
 
-  jsonPathPicker('#json-renderer', data, '#path');
+  source = document.querySelector('#json-renderer');
+  dest = document.querySelectorAll('.path');
+
+  // Browser
+  JPPicker.render(source, data, dests);
+
+  // Using Node require
+  const JPP = require('jsonpath-picker-vanilla');
+  JPPicker.render(source, data, dests);
   ```
@@ -55,3 +63,3 @@
 
-The `jsonPathPicker` method accepts an optional `options` object as a third argument.
+The `render` method accepts an optional `options` object as a 4th argument.
 
@@ -68,2 +76,3 @@ | Option                     | Type      | Default         | Description                                              |
 | keyReplacementText         | string    | `''`            |  |
+| pickerIcon | string | `#x1f4cb` | Hexa Unicode for picker Icon |
 
@@ -73,3 +82,8 @@ Example:
 ```js
-jsonPathPicker('#json-renderer', data, '#path', {
+
+source = document.querySelector('#json-renderer');
+dest = document.querySelectorAll('.path');
+
+// For Browser
+JPPicker.render(source, data, dest, {
     outputWithQuotes: true,
@@ -79,2 +93,10 @@ pathNotation: 'brackets',
 });
+
+// Using Node require
+const JPP = require('jsonpath-picker-vanilla');
+JPP.jsonPathPicker(source, data, dest, {
+    outputWithQuotes: true,
+    pathNotation: 'brackets',
+    pathQuotesType: 'double'
+});
 ```
@@ -81,0 +103,0 @@

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39480

62.33%

Number of package files

8

14.29%

Lines of code

757

102.41%

Number of lines in readme file

105

26.51%

Worsened metrics

Dev dependency count

6

20%

Number of low quality alerts

1

Infinity%

Number of low supply chain risk alerts

4

Infinity%

No dependency changes