als-document 1.0.8-alpha → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-document",
-  "version": "1.0.8-alpha",
+  "version": "1.1.0",
   "description": "A powerful HTML parser & DOM manipulation library for both backend and frontend.",
   "main": "index.js",
   "module": "index.mjs",

package/readme.md

@@ -1,5 +1,6 @@
 # als-document: HTML Parser & DOM Manipulation Library
 
+
 ## 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.
@@ -8,7 +9,6 @@
 * als-document is still on alpha testing. All tested features works fine, but through the use, discovering  some bugs or things that should work different. For example in this release, changed the way for storing attributes with empty value. 
 * Also, this release, has additional very powefull feature which is building cache for storing DOM tree as json and building back DOM from cache. 
 
-
 ## Installation
 
 To install the `als-document` library, use the following npm command:
@@ -25,13 +25,13 @@ The library provides three different files to cater to different module systems:
 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
-const { parseHTML, Node, Query, TextNode, SingleNode } = require('als-document');
+const { parseHTML, Node, Query, TextNode, SingleNode,Root } = 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".
 
 ```js
-import { parseHTML, Node, Query, TextNode, SingleNode } from 'als-document';
+import { parseHTML, Node, Query, TextNode, SingleNode, Root } from 'als-document';
 ```
 
 3. **document.js**: By including this file, a constant variable named `alsDocument` is created, which wraps all the exports.
@@ -39,7 +39,7 @@ import { parseHTML, Node, Query, TextNode, SingleNode } from 'als-document';
 ```html
 <script src="/node_modules/als-document/document.js"></script>
 <script>
-   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc } = alsDocument
+   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root } = alsDocument
 </script>
 ```
 
@@ -105,6 +105,7 @@ Remember, the actual tree structure will be more complex and detailed, but the p
 - **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.
+- **insert(place,element)**: place (0-3) or beforebegin,afterbegin,... eleemnt - raw html or element
 
 
 ### SingleNode
@@ -116,6 +117,15 @@ Remember, the actual tree structure will be more complex and detailed, but the p
 `TextNode` is a class that represents text content within the DOM. A TextNode holds raw text data and does not have child nodes.
 
 
+### Root node (extends Node)
+
+Has additional getters and setters:
+  * getter root.title
+  * setter root.title
+  * getter root.body
+  * getter root.head
+
+
 
 ### Examples:
 

package/src/build.js

@@ -22,7 +22,7 @@ const files = {
    'query': ['query','check-element'],
    'node':[
       'dataset','find','text-node',
-      'style','class-list','node','single-node',
+      'style','class-list','node','single-node','root'
    ],
    'parse':['parse-atts','void-tags','parser','cache'],
 }
@@ -40,7 +40,7 @@ buildFileList()
 function build() {
    let content = fileList.map(filePath => readFileSync(filePath, 'utf-8')).join('\n');
 
-   const toReturn = '{ parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc }'
+   const toReturn = '{ parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root }'
    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}`)

package/src/node/node.js

@@ -19,10 +19,10 @@ class Node {
 
    get id() { return this.attributes.id ? this.attributes.id : null; }
    set id(newValue) { this.attributes.id = newValue; }
-   get className() {return this.attributes.class || null}
+   get className() { return this.attributes.class || null }
    get parentNode() { return this.parent }
    get ancestors() {
-      if(!this.parent) return []
+      if (!this.parent) return []
       const ancestors = []
       let element = this.parent
       while (element.tagName !== 'ROOT') {
@@ -33,13 +33,13 @@ class Node {
    }
 
    get childNodeIndex() {
-      if(!this.parent) return null
-      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null 
+      if (!this.parent) return null
+      return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null
    }
 
-   get childIndex() { 
-      if(!this.parent) return null
-      return this.parent.children ? this.parent.children.indexOf(this) : null 
+   get childIndex() {
+      if (!this.parent) return null
+      return this.parent.children ? this.parent.children.indexOf(this) : null
    }
    get previousElementSibling() { return this.prev }
    get prev() {
@@ -70,7 +70,7 @@ class Node {
 
    get outerHTML() {
       const attrs = Object.entries(this.attributes).map(([key, val]) => val.length ? `${key}="${val}"` : key).join(" ");
-      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
+      return `<${this.tagName}${attrs ? ' ' + attrs : ''}>${this.innerHTML}</${this.tagName}>`;
    }
 
    getAttribute(attrName) { return this.attributes[attrName] || null }
@@ -91,12 +91,12 @@ class Node {
       }).join("");
    }
 
-   $$(query) {return this.querySelectorAll(query)}
+   $$(query) { return this.querySelectorAll(query) }
    querySelectorAll(query) {
       const selectors = Query.get(query)
       return find(selectors, this, new Set())
    }
-   $(query) {return this.querySelector(query)}
+   $(query) { return this.querySelector(query) }
    querySelector(query) {
       const selectors = Query.get(query)
       return find(selectors, this, new Set(), true)[0] || null
@@ -115,12 +115,15 @@ class Node {
    }
 
    insertAdjacentElement(position, newElement) {
-      if(newElement.tagName === 'ROOT' && newElement.childNodes.length > 0) newElement = newElement.childNodes[0]
+      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);
-      newElement.parent = this
-      if (!this.parent) return newElement
+      if (pos === 'afterbegin' || pos === 'beforeend') {
+         if (pos === "afterbegin") this.childNodes.unshift(newElement);
+         else if (pos === "beforeend") this.childNodes.push(newElement);
+         newElement.parent = this
+         return newElement
+      }
+      if (!this.parent) throw new Error("Can't insert element to element without parent")
       if (pos === "beforebegin") insertBefore(this.parent.childNodes, this.childNodeIndex, newElement)
       else if (pos === "afterend") this.parent.childNodes.splice(this.childNodeIndex + 1, 0, newElement);
       newElement.parent = this.parent
@@ -129,7 +132,7 @@ class Node {
 
    insertAdjacentHTML(position, html) {
       const newNode = parseHTML(html);
-      newNode.childNodes.reverse().forEach(node => {
+      newNode.childNodes.forEach(node => {
          this.insertAdjacentElement(position, node);
       });
       return newNode
@@ -139,9 +142,21 @@ class Node {
       return this.insertAdjacentElement(position, new TextNode(text));
    }
 
+   insert(position, element) {
+      const positions = ['beforebegin', 'afterbegin', 'beforeend', 'afterend']
+      if (positions[position]) position = positions[position]
+      if (typeof element === 'string') {
+         element = element.trim()
+         if (element.startsWith('<') && element.endsWith('>')) {
+            return this.insertAdjacentHTML(position, element)
+         }
+         return this.insertAdjacentText(position, element)
+      }
+      return this.insertAdjacentElement(position, element)
+   }
+
    set innerHTML(html) {
-      const parsed = parseHTML(html);
-      this.childNodes = parsed.childNodes;
+      this.childNodes = html.trim().startsWith('<') ? parseHTML(html).childNodes : [html]
    }
 
    set outerHTML(html) {
@@ -154,7 +169,7 @@ class Node {
    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 if (typeof newChild === 'string') newChild = new TextNode(newChild)
       else return newChild
       this.childNodes.push(newChild);
       newChild.parent = this;
@@ -164,9 +179,9 @@ class Node {
    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;
+         if (child instanceof SingleNode) return ''
+         if (child instanceof TextNode) return child.nodeValue
+         if (child instanceof Node) return child.textContent;
          else return child;
       }).join(" ");
    }

package/src/node/root.js

@@ -0,0 +1,11 @@
+class Root extends Node {
+   constructor() {
+      super('ROOT',{},null);
+      this.isSingle = false
+   }
+
+   get body() {return this.$('body')}
+   get head() {return this.$('head')}
+   get title() {return this.$('title')}
+   set title(title) {return this.$('title').innerHTML = title}
+}

package/src/node/single-node.js

@@ -5,12 +5,12 @@ class SingleNode extends Node {
       this.isSingle = true
    }
    
-   get outerHTML() { // Переопределение outerHTML для одиночного узла
+   get outerHTML() { // outerHTML for single node
       if (this.tagName === "#cdata-section") return `<![CDATA[${this.nodeValue}]]>`;
       const attrs = Object.entries(this.attributes).map(([key, val]) => val.length ? `${key}="${val}"` : key).join(" ");
       return `<${this.tagName} ${attrs}${this.tagName === '?xml' ? '?' : ''}>`;
    }
-   // Удаляем методы и свойства, которые не имеют смысла для одиночных узлов
+   // Remove getters,setters and methods which no make sence in single node
    get innerHTML() { return ""; }
    set innerHTML(_) { }
    $(_) {return null}
@@ -25,6 +25,7 @@ class SingleNode extends Node {
    insertAdjacentHTML(_, __) { }
    insertAdjacentText(_, __) { }
    appendChild(_) { }
+   insert(_,__) { }
    get textContent() { return ""; }
    set textContent(_) { }
-}
+}

package/src/parse/cache.js

@@ -4,7 +4,7 @@ function buildFromCache(cached) {
       const {isSingle,tagName,attributes,childNodes,textContent} = cache
       if(textContent) return parent.childNodes.push(new TextNode(textContent))
       if(isSingle) return parent.childNodes.push(new SingleNode(tagName,attributes))
-      const newDoc = new Node(tagName,attributes,parent)
+      const newDoc = tagName === 'ROOT' ? new Root() : new Node(tagName,attributes,parent)
       childNodes.forEach(childNode => {
          buildNode(childNode,newDoc)
       });

package/src/parse/parser.js

@@ -1,5 +1,5 @@
 function parseHTML(html) {
-   const root = new Node("ROOT");
+   const root = new Root();
    const stack = [root];
    let currentText = "", i = 0;
    let max = 0

package/src/query/query.js

@@ -31,7 +31,7 @@ class Query {
 
    splitAndCutLast(string, splitBy) {
       const array = string.split(splitBy);
-      const last = array.pop(); // pop() удаляет и возвращает последний элемент массива
+      const last = array.pop();
       return [last, array];
    }
 
@@ -104,11 +104,18 @@ class Query {
       attribs = attribs.map(attrib => {
          let query = attrib
          attrib = attrib.replace('[', '').replace(']', '')
-         let [name, value] = attrib.split(/[\~\|\^\$\*]?\=/)
-         let sign = attrib.replace(name, '').replace(value, '')
-         attrib = { query }
-         if (name) attrib.name = name
-         if (value) attrib.value = value.trim().replace(/^\"/, '').replace(/\"$/, '')
+         let [name,...values] = attrib.split('=')
+         const value = values.join('=').trim().replace(/^\"/,'').replace(/\"$/,'')
+         let sign
+         attrib = {query,name}
+         if(value) {
+            sign = '='
+            attrib.name = attrib.name.replace(/[\~\|\^\$\*]$/,(match => {
+               sign = match+sign
+               return ''
+            }))
+            attrib.value = value
+         }
          if (sign) {
             attrib.sign = sign
             attrib.check = this.getAttribFn(sign).bind(attrib)

package/tests/index.html

@@ -6,11 +6,11 @@
    <title>Document</title>
    <script src="test.js"></script>
    <script src="../document.js"></script>
-   <script src="./data/html1.js"></script>
-   <!-- <script src="./data/html2.js"></script> -->
+   <!-- <script src="./data/html1.js"></script> -->
+   <script src="./data/html2.js"></script>
    <script src="./data/svg.js"></script>
    <script>
-      const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc } = alsDocument
+      const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc,Root } = alsDocument
       let {describe,it,beforeEach,runTests,expect,delay,assert,beforeAll} = SimpleTest
       SimpleTest.showFullError = true
    </script>

package/tests/parser.js

@@ -70,7 +70,7 @@ describe('Advanced tests', () => {
         let time = Date.now() - now
         // console.log(memoryAfter - memoryBefore)
         assert(time < 20, `Big html (${(deepHTML.length / 1024).toFixed(2)}KB) in less then 20ms (${time}ms)`)
-        expect(result).instanceof(Node); // or any other validation you see fit
+        expect(result).instanceof(Root); // or any other validation you see fit
     });
 
     it('handles incorrectly closed tags', () => {

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-   "liveServer.settings.port": 5502
-}