als-document 1.0.2-alpha → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-document",
-  "version": "1.0.2-alpha",
+  "version": "1.0.2",
   "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

@@ -4,6 +4,10 @@
 
 `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 +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.
@@ -35,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 } = alsDocument
+   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root } = alsDocument
 </script>
 ```
 
@@ -101,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
@@ -112,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:
 
@@ -242,3 +256,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

@@ -2,7 +2,9 @@ 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 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
@@ -20,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() {
@@ -38,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

@@ -1,3 +1,9 @@
+function insertBefore(arr, index, newItem) {
+   const existingIndex = arr.indexOf(newItem);
+   if (existingIndex !== -1) arr.splice(existingIndex, 1);
+   arr.splice(index, 0, newItem);
+}
+
 class Node {
    constructor(tagName, attributes = {}, parent = null) {
       this.isSingle = false;
@@ -11,10 +17,12 @@ class Node {
       this._dataset = null
    }
 
-   get id() { return this.attributes.id || null; }
+   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 parentNode() { return this.parent }
    get ancestors() {
+      if(!this.parent) return []
       const ancestors = []
       let element = this.parent
       while (element.tagName !== 'ROOT') {
@@ -24,17 +32,25 @@ class Node {
       return ancestors.reverse()
    }
 
-   get childIndex() { return this.parent.childNodes ? this.parent.childNodes.indexOf(this) : null }
+   get childNodeIndex() {
+      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 previousElementSibling() { return this.prev }
    get prev() {
       if (!this.childIndex) return null // if no index or index == 0
-      return this.parent.childNodes[this.childIndex - 1]
+      return this.parent.children[this.childIndex - 1]
    }
 
    get nextElementSibling() { return this.next }
    get next() {
       if (!this.childIndex) return null
-      return this.parent.childNodes[this.childIndex + 1] || null
+      return this.parent.children[this.childIndex + 1] || null
    }
 
    get dataset() {
@@ -53,8 +69,8 @@ class Node {
    }
 
    get outerHTML() {
-      const attrs = Object.entries(this.attributes).map(([key, val]) => `${key}="${val}"`).join(" ");
-      return `<${this.tagName} ${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 }
@@ -63,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);
    }
 
@@ -101,23 +117,44 @@ class Node {
    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);
+      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
       return newElement
    }
 
    insertAdjacentHTML(position, html) {
       const newNode = parseHTML(html);
-      return this.insertAdjacentElement(position, newNode);
+      newNode.childNodes.reverse().forEach(node => {
+         this.insertAdjacentElement(position, node);
+      });
+      return newNode
    }
 
    insertAdjacentText(position, text) {
       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;

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,7 +1,28 @@
 function parseHTML(html) {
-   const root = new Node("ROOT");
+   const root = new Root();
    const stack = [root];
    let currentText = "", i = 0;
+   let max = 0
+
+   function parseScript() {
+      if (!html.startsWith("<script", i)) return false;
+      const openTagEnd = html.indexOf(">", i);
+      if (openTagEnd === -1) return false; 
+
+      const attributesString = html.substring(i + 7, openTagEnd).trim();  // +7 чтобы пропустить "<script"
+      const attributes = parseAttributes(attributesString); // Извлечь атрибуты
+
+      let closeTagStart = html.indexOf("</script>", openTagEnd); // Находим закрывающий тег
+      if (closeTagStart === -1) return false;  // Если нет закрывающего тега, возвращаем ошибку
+      const content = html.substring(openTagEnd + 1, closeTagStart); // Получить содержимое тега
+
+      const scriptNode = new Node('script', attributes, stack[stack.length - 1]); // Создаем узел
+      if(content.length > 0) scriptNode.childNodes.push(content);
+
+      // Переместить указатель i к концу закрывающего тега
+      i = closeTagStart + 9;  // +9 чтобы пропустить "</script>"
+      return true;
+   }
 
    function parseSpecial(startStr, endStr, n1, n2, tag) {
       if (!html.startsWith(startStr, i)) return false
@@ -13,8 +34,10 @@ function parseHTML(html) {
    }
 
    while (i < html.length) {
+      if(i >= max) max = i;
+      else break;
+      if (parseScript()) continue
       if (parseSpecial("<!--", "-->", 4, 3, '#comment')) continue
-      if (parseSpecial("<script", "</script>", 8, 9, 'script')) continue
       if (parseSpecial("<style", "</style>", 7, 8, 'style')) continue
 
       if (html.startsWith("<![CDATA[", i)) {
@@ -28,8 +51,10 @@ function parseHTML(html) {
       }
 
       if (html.startsWith("<", i)) {
-         if (currentText.trim()) {
-            stack[stack.length - 1].childNodes.push(new TextNode(currentText.trim()));
+         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 = "";
          }
 
@@ -52,7 +77,6 @@ function parseHTML(html) {
          }
 
          const tagContent = html.substring(i + 1, tagEnd);
-
          if (tagContent.startsWith("/")) stack.pop(); // It is close tag
          else { // It is open tag
             let isSelfClosing = tagContent.endsWith('/');
@@ -69,6 +93,6 @@ function parseHTML(html) {
          i++;
       }
    }
-   if (currentText.trim()) stack[stack.length - 1].childNodes.push(new TextNode(currentText.trim()));
+   if (currentText.trim() && stack[stack.length - 1]) stack[stack.length - 1].childNodes.push(new TextNode(currentText));
    return root;
 }

package/src/query/check-element.js

@@ -1,7 +1,7 @@
 function checkElement(el,selector) {
    if(selector == undefined) return true
    if(el == null) return false
-   let {tag,classList,attributes,id,prev,ancestors,parents,prevAny} = selector
+   let {tag,classList,attribs:attributes,id,prev,ancestors,parents,prevAny} = selector
    if(typeof el === 'string') return false
    if(id !== undefined && el.id === null) return false
    if(id && id !== el.id) return false

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,23 +4,24 @@
    <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="/document.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/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>
+   <!-- <script src="parse-real.js"></script> -->
    <script>
       runTests();
 

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', () => {