npm - als-document - Versions diffs - 1.1.1 → 1.2.0 - Mend

als-document 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/browser-tests/data/html1.js +2579 -0
package/browser-tests/data/html2.js +1124 -0
package/browser-tests/data/svg.js +66 -0
package/{tests → browser-tests}/index.html +1 -1
package/browser-tests/utils.js +37 -0
package/build-readme.js +8 -0
package/{src/build.js → build.js} +4 -4
package/docs/#.md +52 -0
package/docs/1.parseHTML.md +39 -0
package/docs/2.node.md +25 -0
package/docs/3.singleNode.md +3 -0
package/docs/4.tTextNode.md +3 -0
package/docs/5. Document.md +28 -0
package/docs/6.Query.md +110 -0
package/docs/7.cache.md +14 -0
package/document.js +6 -4
package/index.js +6 -4
package/index.mjs +6 -4
package/{src/node/root.js → lib/node/document.js} +3 -2
package/{src → lib}/node/node.js +6 -3
package/lib/node/root.js +6 -0
package/{src → lib}/node/single-node.js +22 -4
package/package.json +6 -4
package/readme.md +21 -14
package/tests/cache.test.js +23 -0
package/tests/node.test.js +411 -0
package/tests/parser.test.js +353 -0
package/tests/query.test.js +65 -0
package/tests/single-node.test.js +88 -0
package/tests/utils.js +2 -0
package/.vscode/settings.json +0 -3
/package/{tests → browser-tests}/cache.js +0 -0
/package/{tests → browser-tests}/node.js +0 -0
/package/{tests → browser-tests}/parse-real.js +0 -0
/package/{tests → browser-tests}/parser.js +0 -0
/package/{tests → browser-tests}/query.js +0 -0
/package/{tests/test.js → browser-tests/simple-test.js} +0 -0
/package/{src → lib}/node/class-list.js +0 -0
/package/{src → lib}/node/dataset.js +0 -0
/package/{src → lib}/node/find.js +0 -0
/package/{src → lib}/node/style.js +0 -0
/package/{src → lib}/node/text-node.js +0 -0
/package/{src → lib}/parse/cache.js +0 -0
/package/{src → lib}/parse/parse-atts.js +0 -0
/package/{src → lib}/parse/parser.js +0 -0
/package/{src → lib}/parse/void-tags.js +0 -0
/package/{src → lib}/query/check-element.js +0 -0
/package/{src → lib}/query/query.js +0 -0

package/readme.md CHANGED Viewed

@@ -3,11 +3,8 @@
 ## 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.
+`als-document` is a powerful library for parsing HTML and XML, building and manipulating virtual 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
@@ -25,13 +22,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,Root } = require('als-document');
+const { parseHTML, Node, Query, TextNode, SingleNode, Root, Document } = 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, Root } from 'als-document';
+import { parseHTML, Node, Query, TextNode, SingleNode, Root, Document } from 'als-document';
 ```
 3. **document.js**: By including this file, a constant variable named `alsDocument` is created, which wraps all the exports.
@@ -39,10 +36,20 @@ import { parseHTML, Node, Query, TextNode, SingleNode, Root } from 'als-document
 ```html
 <script src="/node_modules/als-document/document.js"></script>
 <script>
-   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root } = alsDocument
+   const { parseHTML, Node, Query, TextNode, SingleNode, buildFromCache, cacheDoc, Root, Document } = alsDocument
 </script>
 ```
+## Change log
+New in 1.2.0:
+  * singleNode can insert(0) and insert(3)
+  * insertAdjacentElement replace element instead cloning it
+  * Document class
+    * has structure <!DOCTYPE html><html lang="en"><head><title></title></head><body></body></html>
+    * get title
+    * set title
+    * get body
+    * get head
 ## 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.
@@ -82,6 +89,7 @@ const parsedScript = parseHTML('<script>console.log("Hello, world!");</script>')
 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
 `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.
@@ -107,17 +115,16 @@ Remember, the actual tree structure will be more complex and detailed, but the p
 - **appendChild**: Add a child node to the element.
 - **insert(place,element)**: place (0-3) or beforebegin,afterbegin,... eleemnt - raw html or element
 ### SingleNode
 `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.
 ### TextNode
 `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)
+### Document node (extends Node)
 Has additional getters and setters:
   * getter root.title
@@ -145,7 +152,7 @@ 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.
@@ -256,7 +263,7 @@ 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.

package/tests/cache.test.js ADDED Viewed

@@ -0,0 +1,23 @@
+const { describe, it } = require('node:test')
+const assert = require('node:assert')
+const { parseHTML, cacheDoc, buildFromCache } = require('../index')
+const html1 = require('./data/html1')
+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/node.test.js ADDED Viewed

@@ -0,0 +1,411 @@
+const { describe, it, beforeEach } = require('node:test')
+const assert = require('node:assert')
+const { Node, Root, TextNode, Document } = require('../index')
+describe('Constructor and Basic Properties', () => {
+   it('Creates an element', () => {
+      const node = new Node('div');
+      assert(node instanceof Node, "Element was not created correctly");
+   });
+   it('Checks the setting of element properties: tagName, attributes, parent, etc.', () => {
+      const rootNode = new Node('ROOT');
+      const divNode = new Node('div', { class: 'container' }, rootNode);
+      assert(divNode.tagName === 'div', "Tag name is correct");
+      assert(divNode.attributes.class === 'container', "Attributes are correct");
+      assert(divNode.parent === rootNode, "Parent node is correct");
+   });
+   it('Adds a new element to the parent\'s childNodes', () => {
+      const rootNode = new Node('ROOT');
+      const childNode = new Node('child', {}, rootNode);
+      assert(rootNode.childNodes.includes(childNode), "New element was added to parent's childNodes");
+   });
+});
+describe('DOM Search and Navigation', () => {
+   it('Gets the previous and next element', () => {
+      const rootNode = new Node('ROOT');
+      const div1 = new Node('div', {}, rootNode);
+      const div2 = new Node('div', {}, rootNode);
+      assert(div2.previousElementSibling === div1, "Previous sibling is correct");
+      assert(div2.nextElementSibling === null, "Next sibling is correct");
+   });
+   it('Gets the list of ancestors', () => {
+      const rootNode = new Node('ROOT');
+      const firstLevel = new Node('first', {}, rootNode);
+      const secondLevel = new Node('second', {}, firstLevel);
+      const thirdLevel = new Node('third', {}, secondLevel);
+      const ancestors = thirdLevel.ancestors;
+      assert(ancestors.length === 2, "The number of ancestors is correct");
+      assert(ancestors[0] === firstLevel, "First ancestor is correct");
+      assert(ancestors[1] === secondLevel, "Second ancestor is correct");
+   });
+   it('Searches for elements using different methods', () => {
+      const rootNode = new Node('ROOT');
+      const div1 = new Node('div', { class: 'test', id: 'first' }, rootNode);
+      const div2 = new Node('div', { class: 'test' }, rootNode);
+      const p = new Node('p', {}, rootNode);
+      const divs = rootNode.getElementsByTagName('div');
+      assert(divs.length === 2, "getElementsByTagName did find correct number of divs");
+      const testClassNodes = rootNode.getElementsByClassName('test');
+      assert(testClassNodes.length === 2, "getElementsByClassName did find correct number of .test elements");
+      const firstDiv = rootNode.getElementById('first');
+      assert(firstDiv === div1, "getElementById did find the correct element");
+      const firstQuery = rootNode.querySelector('.test');
+      assert(firstQuery === div1, "querySelector did return the first matching element");
+      const allQuery = rootNode.querySelectorAll('.test');
+      assert(allQuery.length === 2 && allQuery[0] === div1 && allQuery[1] === div2, "querySelectorAll did not find all matching elements");
+   });
+});
+describe('Attribute Operations', () => {
+   it('Gets, sets, and removes attributes', () => {
+      const attrNode = new Node('div');
+      attrNode.setAttribute('data-test', 'testValue');
+      assert(attrNode.getAttribute('data-test') === 'testValue', "getAttribute/setAttribute is correct");
+      attrNode.removeAttribute('data-test');
+      assert(!attrNode.getAttribute('data-test'), "removeAttribute is correct");
+   });
+   it('Handles classList', () => {
+      const nodeWithClasses = new Node('div', { class: 'class1 class2' });
+      // Assertion to check if classList contains the right classes
+      assert(nodeWithClasses.classList.contains('class1'), "The classList contain 'class1'");
+      assert(nodeWithClasses.classList.contains('class2'), "The classList contain 'class2'");
+      // Modifying classList and checking
+      nodeWithClasses.classList.add('class3');
+      assert(nodeWithClasses.classList.contains('class3'), "The classList contain 'class3' after addition");
+      nodeWithClasses.classList.remove('class1');
+      assert(!nodeWithClasses.classList.contains('class1'), "The classList doesn't contains 'class1' after removal");
+   });
+   it('Handles style', () => {
+      const nodeWithStyle = new Node('div', { style: 'color: red; font-size: 16px;' });
+      // Assertions to check if style is correctly set
+      assert(nodeWithStyle.style.color === 'red', "The style property color is correctly set or retrieved");
+      assert(nodeWithStyle.style.fontSize === '16px', "The style property fontSize is correctly set or retrieved");
+   });
+});
+describe('Content Manipulation', () => {
+   it('Adds and removes child elements', () => {
+      const rootNode = new Node('ROOT');
+      const childNode = new Node('child');
+      rootNode.appendChild(childNode);
+      assert(rootNode.childNodes.includes(childNode), "Child node was added");
+      childNode.remove();
+      assert(!rootNode.childNodes.includes(childNode), "Child node was removed");
+   });
+   it('Inserts content adjacent to an element', () => {
+      const rootNode = new Node('div');
+      const childNode = new Node('p', {}, rootNode);
+      childNode.insertAdjacentElement('beforebegin', new Node('span'));
+      assert(rootNode.childNodes[0].tagName === 'span');
+      childNode.insertAdjacentElement('afterend', new Node('a'));
+      assert(rootNode.childNodes[2].tagName === 'a');
+      childNode.insertAdjacentHTML('beforebegin', '<strong></strong>');
+      assert(rootNode.childNodes[1].tagName === 'strong');
+      childNode.insertAdjacentText('afterend', 'Some text');
+      assert(typeof rootNode.childNodes[3].nodeValue === 'string');
+      assert(rootNode.childNodes[3].nodeValue === 'Some text');
+   });
+   // it('Gets and sets innerHTML and outerHTML', () => {
+   //    const rootNode = new Node('div');
+   //    new Node('p', {id: 'test'}, rootNode);
+   //    assert(rootNode.innerHTML === '<p id="test"></p>');
+   //    const newNode = new Node('span');
+   //    newNode.innerHTML = '<a href="#">Link</a>';
+   //    assert(newNode.childNodes[0].tagName === 'a');
+   //    newNode.childNodes[0].outerHTML = '<div><strong>New content</strong></div>';
+   //    assert(newNode.childNodes[0].childNodes[0].tagName === 'strong');
+   // });
+   // it('Works with text content', () => {
+   //    const rootNode = new Node('div');
+   //    new Node('p', {}, rootNode).textContent = 'Hello World';
+   //    assert(rootNode.textContent === 'Hello World');
+   //    rootNode.textContent = 'Changed Text';
+   //    assert(rootNode.textContent === 'Changed Text');
+   //    assert(rootNode.childNodes.leng === 1);
+   //    assert(rootNode.childNodes[0] === 'Changed Text');
+   // });
+});
+describe('Other Methods and Properties', () => {
+   it('Gets the list of child elements', () => {
+      const rootNode = new Node('div');
+      // Добавление дочерних элементов
+      new Node('p', {}, rootNode);
+      new Node('span', {}, rootNode);
+      new Node('a', {}, rootNode);
+      rootNode.appendChild('Some text'); // Добавляем текстовый узел
+      // Проверяем, что у корневого элемента теперь 4 дочерних узла (3 элемента + 1 текстовый узел)
+      assert(rootNode.childNodes.length === 4);
+      // Проверяем свойство children
+      assert(rootNode.children.length === 3);
+      assert(rootNode.children[0].tagName === 'p');
+      assert(rootNode.children[1].tagName === 'span');
+      assert(rootNode.children[2].tagName === 'a');
+   });
+   it('Gets the parent element', () => {
+      const rootNode = new Node('ROOT');
+      const childNode = new Node('child', {}, rootNode);
+      assert(childNode.parentNode === rootNode, "Parent node is correct");
+   });
+});
+describe('Method and properties 2', () => {
+   let node
+   beforeEach(() => {node = new Node('div')})
+   it('set id', () => {
+      assert(node.getAttribute('id') === null)
+      assert(node.id === null)
+      node.id = 'test'
+      assert(node.getAttribute('id') === 'test')
+      assert(node.id === 'test')
+   })
+   it('get className', () => {
+      assert(node.classList.constructor.name === 'NodeClassList')
+   })
+   it('get outerHTML', () => {
+      assert(node.outerHTML === '<div></div>')
+   })
+   it('set innerHTML', () => {
+      assert(node.innerHTML === '')
+      node.innerHTML = 'some test'
+      assert(node.innerHTML === 'some test')
+   })
+   it('set outerHTML error no parent', () => {
+      assert.throws(() => {node.outerHTML = '<div>some test</div>'}) // element has no parent node
+   })
+   it('set outerHTML', () => {
+      const parent = new Node('div')
+      parent.insert(1,node)
+      assert(parent.children[0].outerHTML === '<div></div>')
+      const html = '<div>some test</div>'
+      node.outerHTML = html
+      assert(parent.children[0].outerHTML === html)
+   })
+   describe('set textContent', () => {
+      it('sets and gets textContent correctly', () => {
+         const node = new Node('div');
+         node.textContent = 'Hello World';
+         assert.strictEqual(node.textContent, 'Hello World', 'textContent should be "Hello World"');
+      });
+   });
+   describe('get innerHTML', () => {
+      it('gets correct innerHTML', () => {
+         const parent = new Node('div');
+         const child = new Node('span');
+         parent.appendChild(child);
+         assert.strictEqual(parent.innerHTML, '<span></span>', 'innerHTML should include child node markup');
+      });
+   });
+   describe('insertAdjacentHTML', () => {
+      it('inserts HTML correctly before begin', () => {
+         const node = new Node('div');
+         node.insertAdjacentHTML('afterbegin', '<span>test</span>');
+         assert(node.innerHTML === '<span>test</span>', 'Should insert <span>test</span> before the node');
+      });
+   });
+   describe('insertAdjacentText', () => {
+      it('inserts text correctly after end', () => {
+         const node = new Node('div');
+         const parent = new Node('div');
+         parent.appendChild(node);
+         node.insertAdjacentText('afterend', 'Hello');
+         assert.strictEqual(parent.childNodes[1].nodeValue, 'Hello', 'Should insert "Hello" after the node');
+      });
+   });
+   describe('appendChild', () => {
+      it('appends a child node correctly', () => {
+         const parentNode = new Node('div');
+         const childNode = new Node('span');
+         parentNode.appendChild(childNode);
+         assert(parentNode.childNodes.includes(childNode), 'Child node should be in parent\'s childNodes array');
+      });
+   });
+   describe('get textContent', () => {
+      it('returns correct text content', () => {
+         const node = new Node('div');
+         const child1 = new TextNode('Hello');
+         const child2 = new TextNode('World');
+         node.appendChild(child1);
+         node.appendChild(child2);
+         assert.strictEqual(node.textContent, 'HelloWorld', 'textContent should be "HelloWorld"');
+      });
+   });
+   describe('insertAdjacentElement', () => {
+      it('inserts an element adjacent to another', () => {
+         const root = new Root();
+         const refNode = new Node('div');
+         const newNode = new Node('span');
+         root.appendChild(refNode);
+         refNode.insertAdjacentElement('afterend', newNode);
+         assert.strictEqual(root.childNodes[1], newNode, 'New node should be inserted after the reference node');
+      });
+   });
+})
+describe('query', () => {
+   describe('$$', () => {
+      it('returns all elements matching the selector', () => {
+         const root = new Root();
+         const child1 = new Node('div', { class: 'test' });
+         const child2 = new Node('div', { class: 'test' });
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.$$('.test').length, 2, 'Should find two elements with class "test"');
+      });
+   });
+   describe('$', () => {
+      it('returns the first element matching the selector', () => {
+         const root = new Root();
+         const child1 = new Node('div', { class: 'test' });
+         const child2 = new Node('div', { class: 'test' });
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.$('.test'), child1, 'Should return the first element with class "test"');
+      });
+   });
+   describe('querySelectorAll', () => {
+      it('finds all elements matching a complex query', () => {
+         const root = new Root();
+         const child1 = new Node('div', { id: 'unique' });
+         const child2 = new Node('div', { class: 'test' });
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.querySelectorAll('div').length, 2, 'Should find two div elements');
+      });
+   });
+   describe('querySelector', () => {
+      it('finds the first element matching a complex query', () => {
+         const root = new Root();
+         const child1 = new Node('div', { id: 'unique' });
+         const child2 = new Node('div', { class: 'test' });
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.querySelector('#unique'), child1, 'Should find the first div with id "unique"');
+      });
+   });
+   describe('getElementsByClassName', () => {
+      it('finds elements by class name', () => {
+         const root = new Root();
+         const child1 = new Node('div', { class: 'test' });
+         const child2 = new Node('div', { class: 'test' });
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.getElementsByClassName('test').length, 2, 'Should find two elements with class "test"');
+      });
+   });
+   describe('getElementsByTagName', () => {
+      it('finds elements by tag name', () => {
+         const root = new Root();
+              const child1 = new Node('div');
+         const child2 = new Node('span');
+         root.appendChild(child1);
+         root.appendChild(child2);
+         assert.strictEqual(root.getElementsByTagName('div').length, 1, 'Should find one div element');
+      });
+   });
+   describe('getElementById', () => {
+      it('finds an element by ID', () => {
+         const root = new Root();
+         const child = new Node('div', { id: 'unique' });
+         root.appendChild(child);
+         assert.strictEqual(root.getElementById('unique'), child, 'Should find the element with id "unique"');
+      });
+   });
+})
+describe('Document element', () => {
+   it('get body', () => {
+      const document = new Document();
+      assert(document.body !== undefined);
+      assert(document.body instanceof Node);
+   });
+   it('get head', () => {
+      const document = new Document();
+      assert(document.head !== undefined);
+      assert(document.head instanceof Node);
+   });
+   it('get and set title', () => {
+      const root = new Document();
+      root.title = 'Original Title';
+      assert.strictEqual(root.title.textContent, 'Original Title', 'Should get the title');
+      root.title = 'New Title';
+      assert.strictEqual(root.title.textContent, 'New Title', 'Should set the new title');
+   });
+})