jsontohtml-render - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

build/index.js

@@ -9,2 +9,15 @@ "use strict";
     span: (data, style) => `<span ${style ? `style="${style}"` : ''}>${data}</span>`,
+    comment: (data, styles) => styles.comments.show
+        ? `<i style="
+    color:${styles.comments.color};
+    position:absolute;
+    margin-left:${styles.comments.space_from_left};
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    ">${data}</i>`
+        : '',
     br: () => `<br>`,
@@ -27,2 +40,8 @@ code: (data, styles, style) => `<pre style="
     translate: -100% 1px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
       ${style || ''}"
@@ -45,3 +64,3 @@ >${++num}</span>`
         position:absolute;
-        left: calc(${styles.line_numbers.space_from_left} + ${styles.retractors.space_from_left} + ${styles.line_numbers.show ? styles.fontSize : '0px'});
+        left:${styles.retractors.space_from_left};
         translate:0 -${styles.fontSize};
@@ -54,4 +73,22 @@ background: ${styles.colors.background};
         font-size: ${styles.fontSize};
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
         "
-        onclick="jsontohtmlClose(this)">▾</button>`
+        onclick="(function(e){
+          const entries = e.target.parentElement.querySelector('div');
+          if(entries.style.display === 'block' || entries.style.display === ''){
+            entries.style.display = 'none';
+            e.target.parentElement.style.display = 'inline-block'
+            e.target.innerText = '▾';
+          }else {
+            entries.style.display = 'block';
+            e.target.parentElement.style.display = 'block'
+            e.target.innerText = '▴';
+          }
+        return false;
+        })(arguments[0]);return false;">▴</button>`
         : '',
@@ -81,3 +118,4 @@ };
             tags.number(styles) +
-            tags.curlyBrace('}', styles));
+            tags.curlyBrace('}', styles) +
+            tags.comment(` // ${Object.entries(data).length} entries`, styles));
     },
@@ -98,3 +136,4 @@ array: (data, styles) => {
             tags.number(styles) +
-            tags.squareBrace(']', styles));
+            tags.squareBrace(']', styles) +
+            tags.comment(` // ${data.length} elements`, styles));
     },
@@ -127,18 +166,29 @@ string: (data, styles) => {
     else if (typeof data === 'object' && data instanceof Array) {
-        const html = `${styles.line_numbers.show && (num === 0 || addNumber) ? tags.number(styles) : ''}` +
-            parseOperations.array(data, styles);
+        const html = `${num === 0 || addNumber ? tags.number(styles) : ''}` + parseOperations.array(data, styles);
         return html;
     }
-    else if (typeof data === 'string')
-        return parseOperations.string(data, styles);
-    else if (typeof data === 'object' && JSON.stringify(data) === 'null')
-        return parseOperations.null(styles);
-    else if (typeof data === 'number')
-        return parseOperations.number(data, styles);
-    else if (typeof data === 'boolean')
-        return parseOperations.boolean(data, styles);
-    else if (typeof data === 'undefined')
-        return parseOperations.undefined(styles);
-    else if (typeof data === 'function')
-        return parseOperations.function(data, styles);
+    else if (typeof data === 'string') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.string(data, styles);
+        return html;
+    }
+    else if (typeof data === 'object' && JSON.stringify(data) === 'null') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.null(styles);
+        return html;
+    }
+    else if (typeof data === 'number') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.number(data, styles);
+        return html;
+    }
+    else if (typeof data === 'boolean') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.boolean(data, styles);
+        return html;
+    }
+    else if (typeof data === 'undefined') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.undefined(styles);
+        return html;
+    }
+    else if (typeof data === 'function') {
+        const html = `${num === 0 ? tags.number(styles) : ''}` + parseOperations.function(data, styles);
+        return html;
+    }
     return parseOperations.other(data, styles);
@@ -148,3 +198,3 @@ };
     num = 0;
-    const styles = Object.assign(Object.assign(Object.assign({}, default_1.defaultStyles), options), { colors: Object.assign(Object.assign({}, default_1.defaultStyles.colors), options === null || options === void 0 ? void 0 : options.colors), line_numbers: Object.assign(Object.assign({}, default_1.defaultStyles.line_numbers), options === null || options === void 0 ? void 0 : options.line_numbers), retractors: Object.assign(Object.assign({}, default_1.defaultStyles.retractors), options === null || options === void 0 ? void 0 : options.retractors), bracket_pair_lines: Object.assign(Object.assign({}, default_1.defaultStyles.bracket_pair_lines), options === null || options === void 0 ? void 0 : options.bracket_pair_lines) });
+    const styles = Object.assign(Object.assign(Object.assign({}, default_1.defaultStyles), options), { colors: Object.assign(Object.assign({}, default_1.defaultStyles.colors), options === null || options === void 0 ? void 0 : options.colors), comments: Object.assign(Object.assign({}, default_1.defaultStyles.comments), options === null || options === void 0 ? void 0 : options.comments), line_numbers: Object.assign(Object.assign({}, default_1.defaultStyles.line_numbers), options === null || options === void 0 ? void 0 : options.line_numbers), retractors: Object.assign(Object.assign({}, default_1.defaultStyles.retractors), options === null || options === void 0 ? void 0 : options.retractors), bracket_pair_lines: Object.assign(Object.assign({}, default_1.defaultStyles.bracket_pair_lines), options === null || options === void 0 ? void 0 : options.bracket_pair_lines) });
     styles.retractors.space_from_left = styles.retractors.show ? styles.retractors.space_from_left : '0px';
@@ -158,7 +208,5 @@ styles.line_numbers.space_from_left = styles.line_numbers.show ? styles.line_numbers.space_from_left : '0px';
   position:relative;
-  ${styles.line_numbers
-        ? `padding-left:calc(${styles.space_from_left} + ${styles.line_numbers.space_from_left} + ${styles.retractors.space_from_left} + ${styles.line_numbers.show ? styles.fontSize : '0px'});`
-        : ''}
+  padding-left:${styles.space_from_left};
   background:${styles.colors.background};
-  font-size:${styles.fontSize};
+  font-size:${styles.fontSize} !important;
   ${styles.font ? `font-family:${styles.font}` : ''}
@@ -168,19 +216,4 @@ ">
   </div>
-  ${styles.retractors.show
-        ? `<script>
-    const jsontohtmlClose = (element)=>{
-      const parent = element.parentElement;
-      const dataTag = parent.querySelector("div");
-      if(dataTag.style.display === "block" || dataTag.style.display === ""){
-        dataTag.style.display = "none";
-        element.innerText = "▴";
-      }else {
-        dataTag.style.display = "block";
-        element.innerText = "▾";
-      }
-    }
-  </script>`
-        : ''}
   `.replace(/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))/g, `${styles.links ? `<a target="_blank" style='color:#3891ff; text-decoration:"underline";' href="$1">$1</a>` : '$1'}`);
 }
 exports.jsontohtml = jsontohtml;

build/src/default.js

@@ -6,4 +6,5 @@ "use strict";
     fontSize: '14px',
+    font: "'Lucida Console', monospace",
     space: '25px',
-    space_from_left: '20px',
+    space_from_left: '50px',
     links: true,
@@ -26,6 +27,11 @@ colors: {
     },
+    comments: {
+        show: true,
+        color: 'gray',
+        space_from_left: '35px',
+    },
     retractors: {
         show: true,
         color: '#8c8c8c',
-        space_from_left: '-5px',
+        space_from_left: '37px',
     },
@@ -35,7 +41,7 @@ line_numbers: {
         color: '#5c749c',
-        space_from_left: '40px',
+        space_from_left: '30px',
     },
     bracket_pair_lines: {
         show: true,
-        color: '#5c5c5c',
+        color: '#3c3c3c',
         space_from_left: '6px',
@@ -42,0 +48,0 @@ type: 'solid',

package.json

 {
   "name": "jsontohtml-render",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Do multile pdf operations with one package",
@@ -43,2 +43,4 @@ "main": "./build/index.js",
     "json to html",
+    "json formatter",
+    "json-formatter",
     "object to html",
@@ -45,0 +47,0 @@ "object visualizer",

README.md

@@ -19,2 +19,3 @@ # jsontohtml-render
 - [Options](#options)
+  - [Options Usage Example](#options-usage-examples)
   - [Option type definition](#type-declaration-of-the-options-property-of-type-jsontohtmloptiontype)
@@ -77,5 +78,3 @@ - [Option default values](#default-values)
     const result = await axios.get(url);
-
-    // because react and next do not allow script tags, retractors cannot be used
-    setHtml(jsontohtml(result.data, { retractors: { show: false } }));
+    setHtml(jsontohtml(result.data));
   };
@@ -99,2 +98,55 @@
 
+### Options usage examples
+
+- For increasing the font size, you also need to change the spacing (for better formatting):
+
+```js
+jsontohtml(data, {
+  fontSize: '25px',
+  space: '40px',
+  space_from_left: '80px',
+  line_numbers: { space_from_left: '50px' },
+  retractors: { space_from_left: '60px' },
+});
+```
+
+- You can change visibility of any components:
+
+```js
+jsontohtml(data, {
+  line_numbers: { show: false },
+
+  // for better formatting
+  space_from_left: '20px',
+  retractors: { space_from_left: '5px' },
+});
+```
+
+- For changing colors:
+
+```js
+jsontohtml(data, {
+  colors: {
+    background: 'white',
+    keys: 'red',
+    values: {
+      string: 'green',
+      number: '#FFA500',
+      comma_colon_quotes: '#9c9c9c',
+    },
+  },
+  bracket_pair_lines: { color: '#bcbcbc' },
+});
+```
+
+- For disabling links:
+
+```js
+jsontohtml(data, {
+  links: false,
+});
+```
+
+For description of all the options read the blocks ahead.
+
 ### Type declaration of the options property (of type JsonToHtmlOptionType):
@@ -125,2 +177,7 @@
   };
+  comments?: {
+    show?: boolean;
+    color?: string;
+    space_from_left?: string;
+  };
   line_numbers?: {
@@ -150,4 +207,5 @@ show?: boolean;
   fontSize: '14px',
+  font: "'Lucida Console', monospace",
   space: '25px',
-  space_from_left: '20px',
+  space_from_left: '50px',
   links: true,
@@ -170,6 +228,11 @@ colors: {
   },
+  comments: {
+    show: true,
+    color: 'gray',
+    space_from_left: '35px',
+  },
   retractors: {
     show: true,
     color: '#8c8c8c',
-    space_from_left: '-5px',
+    space_from_left: '37px',
   },
@@ -179,7 +242,7 @@ line_numbers: {
     color: '#5c749c',
-    space_from_left: '40px',
+    space_from_left: '30px',
   },
   bracket_pair_lines: {
     show: true,
-    color: '#5c5c5c',
+    color: '#3c3c3c',
     space_from_left: '6px',
@@ -189,3 +252,2 @@ type: 'solid',
 };
-// Note: Other values like "font" is left to browser default
 ```
@@ -267,2 +329,16 @@
 
+- comments: To manage the visibility and styles of the comments (number of element) for each object or array
+
+  - show: If "false it will not show the comments
+
+    `It should contain a boolean value (i.e. true or false)`
+
+  - color: To change the color of the comments
+
+    `example values: "orange", "#fceb4e"`
+
+  - space_from_left: To change the space between closing backets and the comment
+
+    `example values: "2rem", "20px"`
+
 - line_numbers: To manage the visibility and styles of the line numbers on the lefside.
@@ -269,0 +345,0 @@

No alert changes

Improved metrics

Total package byte prevSize

24309

increased by14%

Lines of code

303

increased by15.21%

Number of lines in readme file

378

increased by25.17%

No dependency changes