symbols-html-parser - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "symbols-html-parser",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Parse HTML to Object",
@@ -5,0 +5,0 @@ "main": "main.js",

README.md

@@ -1,48 +0,93 @@
-# HTML Parser
+# symbols-html-parser
 
-This is a simple HTML to Virtual Tree parser that can be used both in the CLI and the browser.
+## Description
 
-## Usage
+`symbols-html-parser` is a JavaScript library that allows you to parse HTML into a structured object format. It provides a way to convert HTML markup into a tree-like structure, making it easier to work with and manipulate HTML content programmatically.
 
-### CLI Usage
+## Installation
 
-To parse an HTML file using the command line interface (CLI), run the following command:
+To install `symbols-html-parser`, you can use npm:
 
 ```bash
-node main.js <html-file-path>
+npm install symbols-html-parser
 ```
 
-## Node Js Installation
+## Usage
 
+To use symbols-html-parser, import it into your JavaScript or TypeScript code:
 
+```javascript
+const { parseHtml } = require('symbols-html-parser/dist'); // For CommonJS
+// or
+import { parseHtml } from 'symbols-html-parser/dist'; // For ES Modules
+```
+
+### To parse an HTML file using the command line interface (CLI), run the following command:
 ```bash
-node main.js <html-file-path>
+node symbols-html-parser/dist/main.js example.html
 ```
+## Parsing HTML
+You can parse HTML content using the parseHtml function:
 
-## Browser Usage
-To use the parser in the browser, follow these steps:
-
-Include the html-to-vtree.js script in your HTML file:
-```html 
-<script src="html-to-vtree.js"></script> 
+```javascript
+const html = `
+<div style="background-color: yellow; font-size: 14px" id="first-div">
+    Hello, friends
+    <p class="para" style="font-faimly: monospace; font-size: 11px">
+        Lorem ipsum dolor sit
+    </p>
+    <footer style="width: auto; height: 100px; color: blue">
+        <span>
+            This is the end
+        </span>
+    </footer>
+</div>`;
+const parsedHtml = parseHtml(html);
+console.log(parsedHtml);
 ```
-Create a textarea element where users can input HTML:
-```html 
-<script src="html-to-vtree.js"></script> 
-```
-```javascript
-const htmlString = '<div class="container">Hello, <b>world</b></div>';
-const parser = new HtmlParser(htmlString);
-const rootNode = parser.parseHtml();
 
-// output 
+The `parseHtml` function takes an HTML string as input and returns a structured object representing the HTML content.
 
+## Example Output
+Here's an example of the output structure:
+
+```javascript
 {
-    tag: 'div',
-    text: 'Hello, ',
-    class: 'container',
-    children: [
-        {tag: 'b', text: 'world'}
-    ]
+  tag: 'div',
+  text: 'Hello, friends',
+  style: {
+    backgroundColor: 'yellow',
+    fontSize: '14px'
+  },
+  id: 'first-div',
+  children: [{
+    tag: 'p',
+    text: 'Lorem ipsum dolor sit',
+    class: 'para',
+    style: {
+      fontFamily: 'monospace',
+      fontSize: '11px',
+    }
+  }, {
+    tag: 'footer',
+    style: {
+      width: 'auto',
+      height: '100px',
+      color: 'blue',
+    },
+    children: [{ tag: 'span', text: 'This is the end' }]
+  }]
 }
-```
+```
+
+## Using symbols-html-parser in a Browser
+symbols-html-parser can be used in a web browser environment just like any other JavaScript library. To use it, you'll need to include the library in your HTML file and use it in your client-side JavaScript code. Here's a step-by-step guide on how to do that:
+
+## Step 1: Include the Library
+Include the symbols-html-parser library in your HTML file using a script tag. You can host the library on a CDN or include it from a local file. Here's an example using a CDN:
+
+Note: I am going to deploy to CDN later
+```html
+
+<script src="https://cdn.jsdelivr.net/npm/symbols-html-parser/dist/main.js"></script>
+```

No alert changes

Improved metrics

Total package byte prevSize

12480

15.94%

Number of lines in readme file

94

95.83%

No dependency changes