html-to-json-parser - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOGS.md

@@ -17,2 +17,9 @@ # CHANGELOG
 
+
+## v1.1.0
+
+#### Features
+
+- Feature to convert JSON back to HTML
+
 ## v1.0.2
@@ -19,0 +26,0 @@

dist/index.d.ts

@@ -1,12 +0,23 @@
-interface JSONContent {
-    type: string;
-    attributes?: object;
-    content: Array<string | JSONContent>;
-}
 /**
- * @param element The HTML string or element to convert to JSON.
- * @param json A boolean to indicate if the output should be a JSON string.
- * @returns {Promise<unknown>}
+ * Convert HTML to JSON or JSON to HTML
+ * The main module that exports the `HTMLParser` function and `JSONToHTML` function,
+ * along with the `JSONType` type.
+ *
+ * @author Yousuf Kalim
  */
-declare function HTMLParser(element: Element | string, json?: boolean): Promise<JSONContent | string>;
+import { HTMLParser } from './html';
+import { JSONToHTML } from './json';
+import { JSONContent } from './types';
+/**
+ * The default export is the `HTMLParser` function.
+ * This function converts an HTML element or HTML string into a JSON object or string.
+ */
 export default HTMLParser;
+/**
+ * The `JSONToHTML` function converts a JSON object or string into an HTML string or document element.
+ */
+export { JSONToHTML };
+/**
+ * The `JSONType` type is used to define the type of the JSON object used in the library.
+ */
+export type JSONType = JSONContent;

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{DOMParser as t}from"xmldom";async function e(e,n=!1){return await new Promise((o,i)=>{try{const i={};let r;if("string"==typeof e){const n=(new t).parseFromString(e,"text/xml");n.firstChild&&(r=n.firstChild)}else r=e;const s=(t,e=i)=>{e.type=t.nodeName;const n=t.childNodes;if(null!==n&&n.length){e.content=[];for(let t=0;t<n.length;t++)3===n[t].nodeType?n[t].nodeValue&&e.content.push(n[t].nodeValue):(e.content.push({}),s(n[t],e.content[e.content.length-1]))}if(null!==t.attributes&&t.attributes.length){e.attributes={};for(let n=0;n<t.attributes.length;n++)e.attributes[t.attributes[n].nodeName]=t.attributes[n].nodeValue}};s(r),o(n?JSON.stringify(i):i)}catch(t){i(t)}})}export{e as default};
+import{DOMParser as t}from"xmldom";async function e(e,n=!1){return await new Promise((r,o)=>{try{const o={};let s;if("string"==typeof e){const n=(new t).parseFromString(e,"text/xml");n.firstChild&&(s=n.firstChild)}else s=e;const i=(t,e=o)=>{e.type=t.nodeName;const n=t.childNodes;if(null!==n&&n.length){e.content=[];for(let t=0;t<n.length;t++)3===n[t].nodeType?n[t].nodeValue&&e.content.push(n[t].nodeValue):(e.content.push({}),i(n[t],e.content[e.content.length-1]))}if(null!==t.attributes&&t.attributes.length){e.attributes={};for(let n=0;n<t.attributes.length;n++)e.attributes[t.attributes[n].nodeName]=t.attributes[n].nodeValue}};i(s),r(n?JSON.stringify(o):o)}catch(t){o(t)}})}async function n(e,n=!0){return await new Promise((r,o)=>{try{let o=e;"string"==typeof e&&(o=JSON.parse(e));const s=t=>{let e=`<${t.type}`;return t.attributes&&Object.entries(t.attributes).forEach(([t,n])=>{e+=` ${t}="${n}"`}),e+=">",t.content&&t.content.forEach(t=>{e+="string"==typeof t?t:s(t)}),e+=`</${t.type}>`,e},i=s(o);r(n?i:(new t).parseFromString(i,"text/xml"))}catch(t){o(t)}})}export{n as JSONToHTML,e as default};
 //# sourceMappingURL=index.modern.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{DOMParser as t}from"xmldom";var e=function(e,n){void 0===n&&(n=!1);try{return Promise.resolve(new Promise(function(r,o){try{var i,a={};if("string"==typeof e){var s=(new t).parseFromString(e,"text/xml");s.firstChild&&(i=s.firstChild)}else i=e;!function t(e,n){void 0===n&&(n=a),n.type=e.nodeName;var r=e.childNodes;if(null!==r&&r.length){n.content=[];for(var o=0;o<r.length;o++)3===r[o].nodeType?r[o].nodeValue&&n.content.push(r[o].nodeValue):(n.content.push({}),t(r[o],n.content[n.content.length-1]))}if(null!==e.attributes&&e.attributes.length){n.attributes={};for(var i=0;i<e.attributes.length;i++)n.attributes[e.attributes[i].nodeName]=e.attributes[i].nodeValue}}(i),r(n?JSON.stringify(a):a)}catch(t){o(t)}}))}catch(t){return Promise.reject(t)}};export{e as default};
+import{DOMParser as t}from"xmldom";var e=function(e,r){void 0===r&&(r=!1);try{return Promise.resolve(new Promise(function(n,o){try{var i,a={};if("string"==typeof e){var s=(new t).parseFromString(e,"text/xml");s.firstChild&&(i=s.firstChild)}else i=e;!function t(e,r){void 0===r&&(r=a),r.type=e.nodeName;var n=e.childNodes;if(null!==n&&n.length){r.content=[];for(var o=0;o<n.length;o++)3===n[o].nodeType?n[o].nodeValue&&r.content.push(n[o].nodeValue):(r.content.push({}),t(n[o],r.content[r.content.length-1]))}if(null!==e.attributes&&e.attributes.length){r.attributes={};for(var i=0;i<e.attributes.length;i++)r.attributes[e.attributes[i].nodeName]=e.attributes[i].nodeValue}}(i),n(r?JSON.stringify(a):a)}catch(t){o(t)}}))}catch(t){return Promise.reject(t)}},r=function(e,r){void 0===r&&(r=!0);try{return Promise.resolve(new Promise(function(n,o){try{var i=e;"string"==typeof e&&(i=JSON.parse(e));var a=function t(e){var r="<"+e.type;return e.attributes&&Object.entries(e.attributes).forEach(function(t){r+=" "+t[0]+'="'+t[1]+'"'}),r+=">",e.content&&e.content.forEach(function(e){r+="string"==typeof e?e:t(e)}),r+="</"+e.type+">"}(i);n(r?a:(new t).parseFromString(a,"text/xml"))}catch(t){o(t)}}))}catch(t){return Promise.reject(t)}};export{r as JSONToHTML,e as default};
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("xmldom")):"function"==typeof define&&define.amd?define(["xmldom"],t):(e||self).htmlToJsonParser=t(e.xmldom)}(this,function(e){return function(t,n){void 0===n&&(n=!1);try{return Promise.resolve(new Promise(function(o,r){try{var i,l={};if("string"==typeof t){var s=(new e.DOMParser).parseFromString(t,"text/xml");s.firstChild&&(i=s.firstChild)}else i=t;!function e(t,n){void 0===n&&(n=l),n.type=t.nodeName;var o=t.childNodes;if(null!==o&&o.length){n.content=[];for(var r=0;r<o.length;r++)3===o[r].nodeType?o[r].nodeValue&&n.content.push(o[r].nodeValue):(n.content.push({}),e(o[r],n.content[n.content.length-1]))}if(null!==t.attributes&&t.attributes.length){n.attributes={};for(var i=0;i<t.attributes.length;i++)n.attributes[t.attributes[i].nodeName]=t.attributes[i].nodeValue}}(i),o(n?JSON.stringify(l):l)}catch(e){r(e)}}))}catch(e){return Promise.reject(e)}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("xmldom")):"function"==typeof define&&define.amd?define(["exports","xmldom"],e):e((t||self).htmlToJsonParser={},t.xmldom)}(this,function(t,e){t.JSONToHTML=function(t,n){void 0===n&&(n=!0);try{return Promise.resolve(new Promise(function(r,o){try{var i=t;"string"==typeof t&&(i=JSON.parse(t));var s=function t(e){var n="<"+e.type;return e.attributes&&Object.entries(e.attributes).forEach(function(t){n+=" "+t[0]+'="'+t[1]+'"'}),n+=">",e.content&&e.content.forEach(function(e){n+="string"==typeof e?e:t(e)}),n+="</"+e.type+">"}(i);r(n?s:(new e.DOMParser).parseFromString(s,"text/xml"))}catch(t){o(t)}}))}catch(t){return Promise.reject(t)}},t.default=function(t,n){void 0===n&&(n=!1);try{return Promise.resolve(new Promise(function(r,o){try{var i,s={};if("string"==typeof t){var a=(new e.DOMParser).parseFromString(t,"text/xml");a.firstChild&&(i=a.firstChild)}else i=t;!function t(e,n){void 0===n&&(n=s),n.type=e.nodeName;var r=e.childNodes;if(null!==r&&r.length){n.content=[];for(var o=0;o<r.length;o++)3===r[o].nodeType?r[o].nodeValue&&n.content.push(r[o].nodeValue):(n.content.push({}),t(r[o],n.content[n.content.length-1]))}if(null!==e.attributes&&e.attributes.length){n.attributes={};for(var i=0;i<e.attributes.length;i++)n.attributes[e.attributes[i].nodeName]=e.attributes[i].nodeValue}}(i),r(n?JSON.stringify(s):s)}catch(t){o(t)}}))}catch(t){return Promise.reject(t)}}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "html-to-json-parser",
-  "version": "1.0.2",
-  "description": "This library converts HTML to JSON tree",
+  "version": "1.1.0",
+  "description": "This library converts HTML to JSON or JSON to HTML tree",
   "type": "module",
@@ -6,0 +6,0 @@ "source": "src/index.ts",

README.md

 # HTML to JSON
 
-This library is capable to convert HTML string/element to JSON/JS Object.
+This library is capable to convert HTML string/element to JSON/JS Object or JSON to HTML.
 
-#### From
+## Features
+
+- Convert HTML to JSON or JavaScript Object
+- Convert JSON or JavaScript Object to HTML
+
+## Example
+**From**
 ```html
@@ -14,3 +20,3 @@ <div class="container">
 
-#### To
+**To**
 ```json
@@ -55,22 +61,93 @@ {
 
-#### Import
+Convert HTML to JSON or JavaScript Object
 
 ```javascript
+// Imports
 import HTMLParser from 'html-to-json-parser'; // ES6
 const HTMLParser = require('html-to-json-parser'); // CommonJS
-```
 
-#### Data
-
-```javascript
+// Data
 const element = '<div><ul><li>Hello <strong>World</strong></li></ul></div>'; // HTML string
 const element = document.querySelector('div'); // HTML element
+
+// Conversion
+let result = await HTMLParser(element, true); // Default: false - true: return JSON, false: return JS Object
 ```
 
-#### Usage
+Convert JSON to HTML using JavaScript
 
 ```javascript
-let result = await HTMLParser(element, true); // Default: false - true: return JSON, false: return JS Object
+// Imports
+import { JSONToHTML } from 'html-to-json-parser'; // ES6
+const { JSONToHTML } = require('html-to-json-parser'); // CommonJS
+
+// Data: JSON or JS Object
+const data = {
+  type: "div",
+  attributes: {
+    class: "container"
+  },
+  content: [
+    {
+      type: "ul",
+      content: [
+        {
+          type: "li",
+          content: [
+            "Hello ",
+            {
+              type: "strong",
+              content: [
+                "World"
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// Conversion
+let result = await JSONToHTML(data, false); // Default: true - true: return HTML String, false: return HTML Element
 ```
 
+Convert JSON to HTML using TypeScript
+
+```typescript
+// Imports
+import { JSONToHTML, JSONType } from 'html-to-json-parser'; // ES6
+const { JSONToHTML, JSONType } = require('html-to-json-parser'); // CommonJS
+
+// Data: JSON or JS Object
+const data: JSONType = {
+  type: "div",
+  attributes: {
+    class: "container"
+  },
+  content: [
+    {
+      type: "ul",
+      content: [
+        {
+          type: "li",
+          content: [
+            "Hello ",
+            {
+              type: "strong",
+              content: [
+                "World"
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// Conversion
+let result = await JSONToHTML(data, false); // Default: true - true: return HTML String, false: return HTML Element
+```
+
 ## Contributing
@@ -77,0 +154,0 @@

tests/index.test.ts

 import { expect, test } from '@jest/globals';
-import HTMLParser from '../src';
+import HTMLParser, { JSONToHTML } from '../src';
 
@@ -12,1 +12,11 @@ test('Test the parser by converting HTML to JSON', async () => {
 });
+
+test('Test the parser by converting JSON to HTML', async () => {
+  const element =
+    '{"type":"div","content":[{"type":"ul","content":[{"type":"li","content":["Hello ",{"type":"strong","content":["World"]}]}]}]}';
+  const result = await JSONToHTML(element, true);
+
+  const expected = '<div><ul><li>Hello <strong>World</strong></li></ul></div>';
+
+  expect(result).toMatch(expected);
+});

No alert changes

Improved metrics

Total package byte prevSize

46667

increased by60.99%

Number of package files

36

increased by20%

Lines of code

150

increased by89.87%

Number of lines in readme file

167

increased by85.56%

No dependency changes