als-document 1.0.4-alpha → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-document",
-  "version": "1.0.4-alpha",
+  "version": "1.0.5",
   "description": "A powerful HTML parser & DOM manipulation library for both backend and frontend.",
   "main": "index.js",
   "module": "index.mjs",
@@ -10,8 +10,5 @@
   },
   "keywords": ["HTML", "DOM", "parser", "manipulation", "backend", "frontend", "als-document"],
   "author": "Alex Sorkin <alexsorkin1980@gmail.com>",
-  "license": "ISC",
-  "devDependencies": {
-    "als-simple-test": "^0.3.5"
-  }
+  "license": "ISC"
 }

package/readme.md

@@ -1,9 +1,14 @@
 # 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.
 
+## Release notes
+* 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
 
@@ -21,13 +26,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.
@@ -35,7 +40,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 } = alsDocument
+   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root } = alsDocument
 </script>
 ```
 
@@ -101,6 +106,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
@@ -112,6 +118,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:
 
@@ -242,3 +257,18 @@ if attribute has value, attrib object will contain check function with one param
 let s = Query.get('[test^="some"]')[0]
 console.log(s.attribs[0].check('some value test')) // true
 ```
+
+## buildFromCache and cacheDoc
+
+Building DOM from raw html, usually takes tens of milliseconds. But now, you can build DOM once and save it's cache as regular stringified JSON. 
+The caching process and building from cache takes less then 5ms for each and require realy low resources. 
+
+
+How it works?
+```js
+const html = `` // some real html 255KB
+const root = parseHTML(html); // 31.9ms
+const cache = cacheDoc(root); // 2.4ms
+const root1 = buildFromCache(cache); // 1.2ms
+console.log(root.inneHTML === root1.innerHTML) // true
+```

package/src/build.js

@@ -22,9 +22,9 @@ 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'],
+   'parse':['parse-atts','void-tags','parser','cache'],
 }
 const fileList = []
 function buildFileList() {
@@ -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 }'
+   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() {
@@ -69,8 +69,8 @@ class Node {
    }
 
    get outerHTML() {
-      const attrs = Object.entries(this.attributes).map(([key, val]) => `${key}="${val}"`).join(" ");
-      return `<${this.tagName}${attrs ? ' '+attrs : ''}>${this.innerHTML}</${this.tagName}>`;
+      const attrs = Object.entries(this.attributes).map(([key, val]) => val.length ? `${key}="${val}"` : key).join(" ");
+      return `<${this.tagName}${attrs ? ' ' + attrs : ''}>${this.innerHTML}</${this.tagName}>`;
    }
 
    getAttribute(attrName) { return this.attributes[attrName] || null }
@@ -79,7 +79,7 @@ class Node {
 
    remove() {
       if (!this.parent) return
-      const index = this.childIndex;
+      const index = this.childNodeIndex;
       if (index !== null) this.parent.childNodes.splice(index, 1);
    }
 
@@ -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
@@ -139,9 +142,26 @@ 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;
+      if (this.tagName === 'script' || this.tagName === 'style') {
+         this.childNodes.length ? this.childNodes[0] = html : this.childNodes.push(html)
+      } else {
+         const parsed = parseHTML(html);
+         this.childNodes = parsed.childNodes;
+      }
    }
 
    set outerHTML(html) {
@@ -154,7 +174,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 +184,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]) => `${key}="${val}"`).join(" ");
+      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

@@ -0,0 +1,33 @@
+function buildFromCache(cached) {
+   function buildNode(cache,parent=null) {
+      if(typeof cache === 'string') return parent.childNodes.push(cache)
+      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 = tagName === 'ROOT' ? new Root() : new Node(tagName,attributes,parent)
+      childNodes.forEach(childNode => {
+         buildNode(childNode,newDoc)
+      });
+      return newDoc
+   }
+   return buildNode(cached)
+}
+
+
+function cacheDoc(doc) {
+   const props = ['isSingle','tagName','attributes']
+   function addToCache(element,cache={}) {
+      if(typeof element === 'string') return element
+      if(element.nodeName === '#text') return {textContent:element.textContent}
+      props.forEach(prop => {
+         if(element[prop]) cache[prop] = element[prop]
+      });
+      if(!element.childNodes) return cache
+      cache.childNodes = []
+      element.childNodes.forEach(childNode => {
+         cache.childNodes.push(addToCache(childNode))
+      });
+      return cache
+   }
+   return addToCache(doc)
+}

package/src/parse/parse-atts.js

@@ -31,6 +31,6 @@ function parseAttributes(str) {
       else value += char;
    }
    
-   if (key.trim() && !value) attrs[key.trim()] = true; // After the loop, check if there's a leftover key, which would be an attribute without a value
+   if (key.trim() && !value) attrs[key.trim()] = ''; // After the loop, check if there's a leftover key, which would be an attribute without a value
    return attrs;
 }

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
@@ -51,8 +51,10 @@ function parseHTML(html) {
       }
 
       if (html.startsWith("<", i)) {
-         if (currentText) {
-            stack[stack.length - 1].childNodes.push(new TextNode(currentText));
+         if (currentText && stack[stack.length - 1]) {
+            const textNode = new TextNode(currentText)
+            stack[stack.length - 1].childNodes.push(textNode);
+            textNode.parent = stack[stack.length - 1]
             currentText = "";
          }
 
@@ -91,6 +93,6 @@ function parseHTML(html) {
          i++;
       }
    }
-   if (currentText.trim()) stack[stack.length - 1].childNodes.push(new TextNode(currentText));
+   if (currentText.trim() && stack[stack.length - 1]) stack[stack.length - 1].childNodes.push(new TextNode(currentText));
    return root;
 }

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/cache.js

@@ -0,0 +1,19 @@
+function mesureTime(fn) {
+   let time = performance.now()
+   const result = fn()
+   time = performance.now() - time
+   return {result,time}
+}
+
+describe('Cache and build from cache', () => {
+   const {result:root,time:rootTime} = mesureTime(() => parseHTML(html1))
+   const {result:cache,time:cacheTime} = mesureTime(() => cacheDoc(root))
+   const {result:root1,time:root1Time} = mesureTime(() => buildFromCache(cache))
+
+   it('HTML from cache and HTML from not cached same',() => {
+      console.log({rootTime,cacheTime,root1Time})
+      assert(cacheTime < 5,'Build cache takes less then 5ms')
+      assert(root1Time < 5,'Build DOM from cache takes less then 5ms')
+      assert(root.innerHTML === root1.innerHTML)
+   })
+})

package/tests/index.html

@@ -4,20 +4,21 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
-   <script src="/node_modules/als-simple-test/test.js"></script>
+   <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 } = 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>
-   <script src="./query.js"></script>
    <script src="utils.js"></script>
+   <script src="./query.js"></script>
    <script src="parser.js"></script>
    <script src="node.js"></script>
+   <script src="./cache.js"></script>
 </head>
 <body>
    <script src="parse-real.js"></script>

package/tests/node.js

@@ -130,7 +130,7 @@ describe('Content Manipulation', () => {
       expect(rootNode.childNodes[2].tagName).equalTo('a');
       
       childNode.insertAdjacentHTML('beforebegin', '<strong></strong>');
-      expect(rootNode.childNodes[0].tagName).equalTo('strong');
+      expect(rootNode.childNodes[1].tagName).equalTo('strong');
 
       childNode.insertAdjacentText('afterend', 'Some text');
       expect(typeof rootNode.childNodes[3].nodeValue).equalTo('string');

package/tests/parse-real.js

@@ -32,8 +32,9 @@ describe('Real data html1', async () => {
    it('Text nodes check', () => {
       const realParagraph = iframe.querySelector('p');
       const parsedParagraph = parsedHTML.querySelector('p');
-      const real = realParagraph.textContent.trim().replace(/\n\s*/gm,'')
-      const parsed = parsedParagraph.textContent.trim()
+      const real = realParagraph.textContent.trim().replace(/\n|\s/gm,'')
+      const parsed = parsedParagraph.textContent.trim().replace(/\n|\s/gm,'')
+      console.log({parsed,real})
       assert(real === parsed, 'Text contents are the same');
    });
 

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', () => {
@@ -225,11 +225,11 @@ describe('signle tags, script and style', () => {
 <link rel="stylesheet" href="styles.css">
 `;
         const rootMetaLink = parseHTML(testMetaLink);
-        assert(rootMetaLink.childNodes[0].tagName === "meta", "Test Meta/Link 1: Meta tag not created");
-        assert(rootMetaLink.childNodes[0].getAttribute("charset") === "UTF-8", "Test Meta/Link 1: Meta content not correct");
-        assert(rootMetaLink.childNodes[1].tagName === "link", "Test Meta/Link 2: Link tag not created");
-        assert(rootMetaLink.childNodes[1].getAttribute("rel") === "stylesheet", "Test Meta/Link 2: Link rel attribute not correct");
-        assert(rootMetaLink.childNodes[1].getAttribute("href") === "styles.css", "Test Meta/Link 2: Link href attribute not correct");
+        assert(rootMetaLink.children[0].tagName === "meta", "Test Meta/Link 1: Meta tag not created");
+        assert(rootMetaLink.children[0].getAttribute("charset") === "UTF-8", "Test Meta/Link 1: Meta content not correct");
+        assert(rootMetaLink.children[1].tagName === "link", "Test Meta/Link 2: Link tag not created");
+        assert(rootMetaLink.children[1].getAttribute("rel") === "stylesheet", "Test Meta/Link 2: Link rel attribute not correct");
+        assert(rootMetaLink.children[1].getAttribute("href") === "styles.css", "Test Meta/Link 2: Link href attribute not correct");
     })
 
     it('broken html structure', () => {