als-document 0.12.0 → 1.0.1-alpha

package/readme.md

@@ -1,204 +1,244 @@
-# Als-Document
+# als-document: HTML Parser & DOM Manipulation Library
 
-*If something wrong or not working properly, please write me to: sh.mashkanta@gmail.com*
+## Overview
 
+`als-document` is a powerful library for parsing HTML and manipulating the DOM structure on backend and frontend. It provides a robust and intuitive API for querying and interacting with DOM elements using selectors, making it a valuable tool for web developers.
 
-Document is a class which gets html as string and return new object with DOM tree. 
-You can add or remove elements from DOM tree and modify each element. 
-You can select elements and collections and read and modify them with given instruments. 
 
-**0.11**
-* events issue fixed
+## Installation
 
-**0.12**
-* added getAttribute and setAttribute
+To install the `als-document` library, use the following npm command:
 
-## Write and Read files
-Document have 2 static methods to read and write files. 
-The syntax:
-```javascript
-Document.writeFile(filePath,obj,encoding = 'utf-8')
-Document.readFile(filePath,encoding = 'utf-8')
+```bash
+npm i als-document
 ```
 
-* ``filepath`` - filepath can be string (absolute path to file) or array for joining.
-* ``obj`` - obj can be string or object for stringify.
-* ``encoding`` - encoding for read or write file
-
-Example:
-```javascript
-let {Document} = require('als-document')
-let html = Document.readFile([__dirname,'index.html'])
-```
 
+## Including the Library
 
-## Creating new object
+The library provides three different files to cater to different module systems:
 
-Document constructor get single string parameter - the outerHTML for converting to virtual DOM tree. 
+1. **index.js**: This file uses the CommonJS module system. It's suitable for projects using Node.js or bundlers like Browserify or Webpack. The entry point in `package.json` for this file is "main".
 
 ```javascript
-let document = new Document(html) // html has to be string
-document.domTree // includes virtual DOM tree as array of elements
+const { parseHTML, Node, Query, TextNode, SingleNode } = require('als-document');
 ```
 
+2. **index.mjs**: This file uses the ES Modules (ESM) system. It's suitable for modern JavaScript environments that support ESM. The entry point in `package.json` for this file is "module".
 
-## QuerySelector for single element
-Then document object has created, you can select elements or collections. 
-For selecting single element, use ``$(selector)`` and for selecting collections ``$$(selector)``.
+```js
+import { parseHTML, Node, Query, TextNode, SingleNode } from 'als-document';
+```
 
-**Selecting element**
+3. **document.js**: By including this file, a constant variable named `alsDocument` is created, which wraps all the exports.
 
-```javascript
-document.$('div') // select first div in document
-document.$('div.some') // select first div element with some class
+```html
+<script src="/node_modules/als-document/document.js"></script>
+<script>
+   const { parseHTML, Node, Query, TextNode, SingleNode } = alsDocument
+</script>
 ```
 
-At this time, selector supports this:
-* Selects all elements - ``*``
-* element - ``div``
-* class - ``.some-class``
-* id - ``#some-id``
-* parent - ``div > p``
-* next - ``div + p``
-* previous - ``p ~ ul``
-* attribute - ``[some-attribute="some value"]``
-   * ``[prop]``
-   * ``[prop~=value]``
-   * ``[prop|=value]``
-   * ``[prop^="value"]``
-   * ``[prop$="value"]``
-   * ``[prop*="value"]``
+## parseHTML
 
+`parseHTML` is a function that takes an HTML string and constructs a DOM tree representation from it. It recognizes various HTML elements, such as comments, scripts, styles, and CDATA, and organizes them into nodes that can be manipulated and queried.
 
-The folowing, **won't work**: ``div p``.
+### API:
+`parseHTML(html: string) -> Node`
 
+Parses an HTML string and returns a tree structure representing its content.
 
-Each returned element, has the folowing:
-```javascript
-{
-   parent, // parent element
-   prev, // previous element (null if no exists)
-   next, // next element (null if no exists)
-   innerText, // innner text of element and it's childNodes separated by |
-   children, // array of childNodes(elements and text nodes) - includes text element too
-   tagName, // tag name of element
-   id, // id of element if exists (not included in attributes)
-   attributes, // object of attributes (id not included)
-   classList, // array of classes and add and remove methods
-   getAttribute(name)
-   setAttribute(name,value)
-   $(selector),
-   $$(selector),
-   json(), // remove all methods and circular objects from object
-   remove(), // remove this element
-   add(element/outerHtml,place), 
-   add0(element/outerHtml), 
-   add1(element/outerHtml), 
-   add2(element/outerHtml), 
-   add3(element/outerHtml), 
-}
-```
+* `html`: The HTML string to parse.
+* `Returns`: A Node object representing the root of the parsed HTML content tree.
 
-Text node has the folowing:
-```javascript
-{
-   text,
-   prev,
-   next
-}
-```
+###  Expected Outcome:
+When using the parseHTML function, the output will be a tree of nodes representing the HTML content. Each node can be one of the following:
+* **Node**: A standard HTML element node with tag name, attributes, and child nodes.
+* **SingleNode**: Represents self-closing or void HTML elements.
+* **TextNode**: Represents text content in the HTML.
 
-Comment node:
-```javascript
-tagName:comment,
-comment // comment it self
-```
+Each node will have a tag name, a dictionary of attributes, and a list of child nodes (if applicable).
 
-You can add or remove classes with classList methods.
-Example:
-```javascript
-let element = document.$('div')
-element.classList.remove('some')
-element.classList.add('another')
-element.classList.add('onemore')
-```
+### Examples
 
-Also you can change element's id:
-```javascript
-let element = document.$('div')
-element.id = 'new-id'
+```js
+const parsedHTML = parseHTML('<div class="container"><img src="image.jpg" alt="Image"/><p>Hello, world!</p></div>');
+
+// The returned `parsedHTML` object will be a tree-like structure. 
+// For instance, parsedHTML.childNodes[0] would represent the <div> element, 
+// and parsedHTML.childNodes[0].childNodes[0] would represent the <img> element inside it.
 ```
 
-## Element methods
+```js
+const parsedScript = parseHTML('<script>console.log("Hello, world!");</script>');
 
-```javascript
-json() // remove all methods and circular objects from object
-remove() // remove this element
-add(element/outerHtml,place) // adding AdjacentHTML or AdjacentElement to place(0-3)
-add0(element/outerHtml) // adding AdjacentHTML or AdjacentElement beforebegin
-add1(element/outerHtml) // adding AdjacentHTML or AdjacentElement afterbegin
-add2(element/outerHtml) // adding AdjacentHTML or AdjacentElement beforeend
-add3(element/outerHtml) // adding AdjacentHTML or AdjacentElement afterend
+// The returned `parsedScript` object will contain a `script` Node with a child node 
+// holding the JavaScript code as text content.
 ```
 
-Example:
-```javascript
-let document = new Document(html)
-let a = document.$('a')
-let div = document.$('div')
-div.add2('<div id="test">Hello world</div>')
-div.add3(a)
-a.remove()
-```
+Remember, the actual tree structure will be more complex and detailed, but the provided examples give you a basic understanding of how to navigate through the parsed result.
 
+## Node
 
-Create new element with ``Document.newElement(outerHtml)``
+`Node` is a fundamental class that represents an element node in the DOM tree. It provides functionality similar to the native DOM API in browsers, but with its own implementation.
 
-```javascript
-Document.newElement('<div id="test">Hello world</div>')
-```
+### Properties:
+- **tagName**: Represents the tag name of the element.
+- **attributes**: A dictionary of attributes and their values.
+- **childNodes**: An array of child nodes for the element.
+- **isSingle**: Boolean value to check if the node is a self-closing tag.
+- **parentNode, previousElementSibling, nextElementSibling, children**: Navigation properties to move through the DOM tree.
+- **dataset, classList, style**: Special properties for interacting with `data-*` attributes, classes, and inline styles.
 
+### Methods:
+- **getAttribute, setAttribute, removeAttribute**: Manipulate element's attributes.
+- **remove**: Removes the element from its parent.
+- **innerHTML, outerHTML**: Get and set the inner or entire HTML of the element.
+- **querySelector, querySelectorAll**: Find elements within the node based on CSS-like selectors.
+  - limits: pseudo selector like `:first-of-type` or `:checked` not available
+  - namaspace for tags `some:namspace` available
+  - there are additional methods `$` for `querySelector` and `$$` for `querySelectorAll`
+- **getElementsByClassName, getElementsByTagName, getElementById**: Get elements by class, tag, or id respectively.
+- **insertAdjacentElement, insertAdjacentHTML, insertAdjacentText**: Insert content relative to the element.
+- **appendChild**: Add a child node to the element.
 
-## QuerySelector for Collection ``$$()``
-To select few elements, use ``$$(selector)`` method. 
 
-```javascript
-document.$$('div') // return collection of all div elements
-```
+### SingleNode
 
-The collection is array which has the elements and two methods: ``each`` and ``parse``.
+`SingleNode` extends from the `Node` class and represents elements that don't have closing tags (self-closing tags) in HTML. Examples include `<img>`, `<br>`, and `<!DOCTYPE>`. This class has restricted methods and properties since these elements can't have child nodes.
 
-``each`` method gets callback function with 3 parameters: element it self, index of the element in collection and collection itself. 
+### TextNode
 
-Here example:
-```javascript
-let array = []
-document.$$('div').each((element,index,collection) => {
-   if(element.innerText.includes('some text'))
-      array.push(element)
-})
-```
+`TextNode` is a class that represents text content within the DOM. A TextNode holds raw text data and does not have child nodes.
 
-``parse`` method, gets two parameters: ``part`` and ``fn`` and return array with results. 
-* ``part`` is a part of element. It can be innerText, id, tagName or any property inside attributes. 
-* ``fn`` is a filter function which gets content of part. If return true, content will be included.
 
-Example:
-```javascript
-new Document(htmlText).$$('div')
-.parse('innerText',
-   content=> (content.length > 0) ? true : false)
-```
 
-## Building html
+### Examples:
 
-For building html again, use ``build`` method. 
-Example:
 ```javascript
-let element = document.$('div')
-element.classList.add('another')
-element.classList.remove('some')
-element.id = 'new-id'
-document.build() // return new html text
-document.build([__dirname,'new-index.html']) // will create a file with new html text
+const div = new Node('div');
+div.setAttribute('class', 'container');
+
+const img = new SingleNode('img', { src: 'image.jpg', alt: 'An image' });
+div.appendChild(img);
+
+console.log(div.outerHTML);  // Outputs: <div class="container"><img src="image.jpg" alt="An image"></div>
+
+const p = new Node('p',{},div); // adding as last child to parent div
+p.textContent = "Hello, world!";
+
+const foundP = div.querySelector('p');
+console.log(foundP.textContent);  // Outputs: Hello, world!
+```
+
+
+## Query
+
+The `Query` class is designed to parse CSS selector strings and transform them into a structured object format, providing detailed insights into each selector and its components.
+
+By using the class, one can expect to transform a CSS selector string into an array of objects. 
+
+Each object will represent a selector, containing detailed information such as its tag, identifier, classes, attributes, and associated selectors if any. This can be useful for further processing or analysis of CSS selectors in an application.
+
+### Example 
+
+```javascript
+let q1 = 'html>body>div.tabs~.some[type $= "radio and some"]>p+div>.some-id .tab-content~input[disabled] div.some'
+let result = new Query(q1).selectors
+let result1 = Query.get(q1)
+// result and result1 has to be same
+console.log(result)
+```
+
+Result:
+```javascript
+[
+   {
+      "query": "div.some",
+      "tag": "div",
+      "classList": [
+         "some"
+      ],
+      "ancestors": [
+         {
+            "query": ".some-id",
+            "classList": [
+               "some-id"
+            ],
+            "parents": [
+               {
+                  "query": "div",
+                  "tag": "div"
+               }
+            ],
+            "prev": {
+               "query": "p",
+               "tag": "p",
+               "parents": [
+                  {
+                     "query": ".some[0]",
+                     "classList": [
+                        "some"
+                     ],
+                     "attribs": [
+                        {
+                           check:(f),
+                           "query": "[type$=\"radio and some\"]",
+                           "name": "type",
+                           "value": "radio and some",
+                           "sign": "$="
+                        }
+                     ]
+                  }
+               ],
+               "prevAny": {
+                  "query": "div.tabs",
+                  "tag": "div",
+                  "classList": [
+                     "tabs"
+                  ],
+                  "parents": [
+                     {
+                        "query": "html",
+                        "tag": "html"
+                     },
+                     {
+                        "query": "body",
+                        "tag": "body"
+                     }
+                  ]
+               },
+               "group": "html>body>div.tabs~.some[0]>p"
+            },
+            "group": "html>body>div.tabs~.some[0]>p+div>.some-id"
+         },
+         {
+            "query": "input[1]",
+            "tag": "input",
+            "attribs": [
+               {
+                  "query": "[disabled]",
+                  "name": "disabled"
+               }
+            ],
+            "prevAny": {
+               "query": ".tab-content",
+               "classList": [
+                  "tab-content"
+               ]
+            },
+            "group": ".tab-content~input[1]"
+         }
+      ],
+      "group": "html>body>div.tabs~.some[type $= \"radio and some\"]>p+div>.some-id .tab-content~input[disabled] div.some"
+   }
+]
+```
+
+### Attribs and check function
+if attribute has value, attrib object will contain check function with one parameter for value to check. 
+
+```javascript
+let s = Query.get('[test^="some"]')[0]
+console.log(s.attribs[0].check('some value test')) // true
 ```

package/src/build.js

@@ -0,0 +1,65 @@
+const { readFileSync, writeFileSync, watchFile, watch } = require('fs')
+const { join,basename } = require('path')
+
+function optimizeCode(content) {
+   content = content.replace(/(?<!\\)\/\/.*$/gm, '') // remove comments
+   // content = content.replace(/\;\s*?$/gm,'') // remove ; at end of line
+   content = content.replace(/\[\s*?\n\s*/gm, '[') // 
+   content = content.replace(/\s*?\]/gm, ']') // 
+   content = content.replace(/\s*?$/gm, '') // remove space at end of line
+   content = content.replace(/^\s\s\s/gm, '  ') // change tripple space to double space
+   content = content.replace(/\s(\=|\>|\<|\-|\+|\*|\!)/g, (s) => s.trim()) // replace space before operators
+   content = content.replace(/(\=|\>|\-|\+|\*)\s/g, (s) => s.includes(' ') ? s.trim() : s) // replace space after operators
+   content = content.replace(/\,\s*?$\s*/gm, ',') // join lines separated with comma
+   content = content.replace(/\s?,\s?/g, ',') // trim comma
+   content = content.replace(/\s\{/g, '{')
+   return content
+}
+
+const root = join(__dirname, '..')
+const files = {
+   'query': ['query','check-element'],
+   'node':[
+      'dataset','find','text-node',
+      'style','class-list','node','single-node'
+   ],
+   'parse':['parse-atts','void-tags','parser'],
+}
+const fileList = []
+function buildFileList() {
+   Object.entries(files).forEach(([dir,filenames]) => {
+      filenames.forEach(filename => {
+         fileList.push(join(__dirname,dir,filename+'.js'))
+      });
+   });
+}
+
+buildFileList()
+
+function build() {
+   let content = fileList.map(filePath => readFileSync(filePath, 'utf-8')).join('\n');
+
+   const toReturn = '{ parseHTML, Node, Query, TextNode, SingleNode }'
+   content = optimizeCode(content)
+   writeFileSync(join(root, 'document.js'), `const alsDocument = (function(){\n${content}\nreturn ${toReturn}\n})()`)
+   writeFileSync(join(root, 'index.js'), content + '\n' + `module.exports = ${toReturn}`)
+   writeFileSync(join(root, 'index.mjs'), content + '\n' + `export default ${toReturn}`)
+   console.log('Files are builded')
+}
+
+build()
+if (process.argv[2] === '--watch') {
+   let count = 1;
+   console.log('Waching...')
+   let lastChangeTime = Date.now()
+   Object.keys(files).forEach(dirName => {
+      const dirPath = join(__dirname,dirName)
+      watch(dirPath, (eventType, filename) => {
+         let newChangeTime = Date.now()
+         if(newChangeTime - lastChangeTime < 1000) return
+         build()
+         lastChangeTime = newChangeTime
+         console.log(`${filename} has changed (${count++})`)
+      });
+   })
+}

package/src/node/class-list.js

@@ -0,0 +1,25 @@
+class NodeClassList {
+   constructor(node) { this.node = node }
+   get classes() { return (this.node.attributes.class || "").split(" ").filter(Boolean) }
+   set classes(val) { this.node.attributes.class = val.join(" ") }
+   contains(className) { return this.classes.includes(className) }
+
+   add(className) {
+      const currentClasses = this.classes;
+      if (!currentClasses.includes(className)) this.classes = [...currentClasses, className];
+   }
+
+   remove(className) { this.classes = this.classes.filter(cls => cls !== className); }
+
+   toggle(className) {
+      if (this.classes.includes(className)) this.remove(className);
+      else this.add(className);
+   }
+
+   replace(oldClass, newClass) {
+      if (this.classes.includes(oldClass)) {
+         this.remove(oldClass);
+         this.add(newClass);
+      }
+   }
+}

package/src/node/dataset.js

@@ -0,0 +1,15 @@
+const getDataName = prop => 'data-' + prop.toLowerCase()
+function getDataset(element) {
+   return new Proxy(element.attributes, {
+       get: (target, prop) => {return target[getDataName(prop)]},
+       set: (target, prop, value) => {target[getDataName(prop)] = value; return true},
+       deleteProperty: (target, prop) => { // Удаляем data-* атрибут
+           const dataAttr = getDataName(prop)
+           if (dataAttr in target) {
+               delete target[dataAttr];
+               return true;  // обозначает успешное удаление
+           }
+           return false;
+       }
+   });
+}

package/src/node/find.js

@@ -0,0 +1,12 @@
+function find(selectors,element,collection,first=false,firstTime = true) {
+   for(let selector of selectors) {
+      if(checkElement(element,selector)) collection.add(element)
+   }
+   if(element.children)
+   element.children.forEach(child => {
+      if(first && collection.size > 0) return
+      find(selectors,child,collection,first,false)
+   })
+
+   return firstTime ? [...collection] : collection
+}

package/src/node/node.js

@@ -0,0 +1,159 @@
+class Node {
+   constructor(tagName, attributes = {}, parent = null) {
+      this.isSingle = false;
+      this.tagName = tagName;
+      this.attributes = attributes;
+      this.childNodes = [];
+      if (parent !== null) parent.childNodes.push(this)
+      this.parent = parent;
+      this._classList = null; // Cache the classList instance
+      this.__style = null;
+      this._dataset = null
+   }
+
+   get id() { return this.attributes.id || null; }
+   get className() {return this.attributes.class || null}
+   get parentNode() { return this.parent }
+   get ancestors() {
+      const ancestors = []
+      let element = this.parent
+      while (element.tagName !== 'ROOT') {
+         ancestors.push(element)
+         element = element.parent
+      }
+      return ancestors.reverse()
+   }
+
+   get childIndex() { return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null }
+   get previousElementSibling() { return this.prev }
+   get prev() {
+      if (!this.childIndex) return null // if no index or index == 0
+      return this.parent.childNodes[this.childIndex - 1]
+   }
+
+   get nextElementSibling() { return this.next }
+   get next() {
+      if (!this.childIndex) return null
+      return this.parent.childNodes[this.childIndex + 1] || null
+   }
+
+   get dataset() {
+      if (!this._dataset) this._dataset = getDataset(this);
+      return this._dataset;
+   }
+
+   get classList() {
+      if (!this._classList) this._classList = new NodeClassList(this);
+      return this._classList;
+   }
+
+   get style() {
+      if (!this.__style) this.__style = buildStyle(this.attributes)
+      return this.__style
+   }
+
+   get outerHTML() {
+      const attrs = Object.entries(this.attributes).map(([key, val]) => `${key}="${val}"`).join(" ");
+      return `<${this.tagName} ${attrs}>${this.innerHTML}</${this.tagName}>`;
+   }
+
+   getAttribute(attrName) { return this.attributes[attrName] || null }
+   setAttribute(attrName, value) { this.attributes[attrName] = value }
+   removeAttribute(attrName) { delete this.attributes[attrName] }
+
+   remove() {
+      if (!this.parent) return
+      const index = this.childIndex;
+      if (index !== null) this.parent.childNodes.splice(index, 1);
+   }
+
+   get innerHTML() {
+      return this.childNodes.map(child => {
+         if (child instanceof Node || child instanceof SingleNode) return child.outerHTML;
+         else if (child instanceof TextNode) return child.textContent; // Assuming child is a text node or something that can be stringified.
+         else return child
+      }).join("");
+   }
+
+   $$(query) {return this.querySelectorAll(query)}
+   querySelectorAll(query) {
+      const selectors = Query.get(query)
+      return find(selectors, this, new Set())
+   }
+   $(query) {return this.querySelector(query)}
+   querySelector(query) {
+      const selectors = Query.get(query)
+      return find(selectors, this, new Set(), true)[0]
+   }
+
+   getElementsByClassName(query) { return this.querySelectorAll('.' + query) }
+   getElementsByTagName(query) { return this.querySelectorAll(query) }
+   getElementById(query) { return this.querySelector('#' + query) }
+
+   get children() {
+      return this.childNodes.filter(child => {
+         if (!(child instanceof Node)) return false
+         if (child.tagName === '#comment') return false
+         return true
+      });
+   }
+
+   insertAdjacentElement(position, newElement) {
+      if(newElement.tagName === 'ROOT' && newElement.childNodes.length > 0) newElement = newElement.childNodes[0]
+      const pos = position.toLowerCase();
+      if (pos === "afterbegin") this.childNodes.unshift(newElement);
+      else if (pos === "beforeend") this.childNodes.push(newElement);
+      if (!this.parent) return newElement
+      if (pos === "beforebegin") this.parent.childNodes.unshift(newElement);
+      else if (pos === "afterend") this.parent.childNodes.splice(this.childIndex + 1, 0, newElement);
+      return newElement
+   }
+
+   insertAdjacentHTML(position, html) {
+      const newNode = parseHTML(html);
+      return this.insertAdjacentElement(position, newNode);
+   }
+
+   insertAdjacentText(position, text) {
+      return this.insertAdjacentElement(position, new TextNode(text));
+   }
+
+   set innerHTML(html) {
+      const parsed = parseHTML(html);
+      this.childNodes = parsed.childNodes;
+   }
+
+   set outerHTML(html) {
+      const parsed = parseHTML(html);
+      if (!this.parent) return console.log('element has no parent node')
+      const index = this.childIndex
+      if (index !== null) this.parent.childNodes.splice(index, 1, ...parsed.childNodes);
+   }
+
+   appendChild(newChild) {
+      if (newChild instanceof Node || newChild instanceof TextNode || newChild instanceof SingleNode) {
+         if (newChild.parent) newChild.parent.childNodes = newChild.parent.childNodes.filter(child => child !== newChild); // Если у newChild уже есть родительский узел, необходимо его удалить оттуда
+      } else if(typeof newChild === 'string') newChild = new TextNode(newChild)
+      else return newChild
+      this.childNodes.push(newChild);
+      newChild.parent = this;
+      return newChild; // возвращаем добавленный узел (по спецификации DOM)
+   }
+
+   get textContent() {
+      if (this.childNodes.length === 0) return this.nodeName === '#text' ? this.nodeValue : '';
+      return this.childNodes.map(child => { // Concatenate text content of this node and all descendants
+         if(child instanceof SingleNode) return ''
+         if(child instanceof TextNode) return child.nodeValue
+         if(child instanceof Node) return child.textContent;
+         else return child;
+      }).join(" ");
+   }
+
+   set textContent(value) {
+      this.childNodes = []; // Clear the current child nodes
+      if (value !== null && value !== undefined) { // Add a new text node with the given value
+         this.childNodes.push(value.toString());  // In your code, text nodes are just strings.
+      }
+   }
+}