als-document 0.1.1 → 0.5.1

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "als-document",
-  "version": "0.1.1",
-  "description": "virtual dom",
+  "version": "0.5.1",
+  "description": "",
   "main": "document.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node test/test.js"
   },
-  "keywords": [
-    "virtual DOM"
-  ],
+  "keywords": ["htmlparser","css query","cheerio","virtual dom"],
   "author": "Alex Sorkin",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {}
 }

package/parser/parser.js

@@ -0,0 +1,287 @@
+class HtmlParser {
+   static parse(html) {
+      let result = new HtmlParser(html)
+      return result.root
+   }
+   constructor(html='') {
+      if(this.checkHtml(html)) {
+         this.indexes = []
+         this.events = []
+         this.html = this.htmlString = html
+         this.removeScripts()
+         this.removeStyles()
+         this.removeEventStrings()
+         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
+         this.root = this.parse()
+      }
+   }
+
+   checkHtml(html,isGood=false) {
+      if(html == '') console.log('html parameter is empty')
+      else if(typeof html !== 'string') console.log(`html parameter has to be string. Recieved ${typeof html}`)
+      else isGood = true
+      return isGood
+   }
+
+   removeScripts(scripts=[]) {
+      let $scripts = this.htmlString.match(/\<script(.*?)\>[\S\s]*?\<\/script\>/gm)
+      if($scripts !== null) $scripts.forEach((script,i) => {
+         let inner = script.replace(/^\<script(.*?)\>/,'').replace(/\<\/script\>$/,'')
+         scripts.push(inner)
+         this.htmlString = this.htmlString.replace(inner,`{{{{script ${scripts.length-1}`)
+      });
+      this.scripts = scripts
+   }
+   removeStyles(styles=[]) {
+      let $styles = this.htmlString.match(/\<style\>[\S\s]*?\<\/style\>/gm)
+      if($styles !== null) $styles.forEach((style,i) => {
+         let inner = style.replace(/^\<style\>/,'').replace(/\<\/style\>$/,'')
+         styles.push(inner)
+         this.htmlString = this.htmlString.replace(inner,`{{{{style ${styles.length-1}`)
+      });
+      this.styles = styles
+   }
+   
+   removeEventStrings() {
+      let eventsWithHtml = this.htmlString.match(/on\w*\s*?\=\s*?["|'|`](.*?(<[^>]*>)(\'|\`).*?)["|'|`]/g)
+      if(eventsWithHtml !== null) {
+         eventsWithHtml.forEach(event => {
+            let array = event.split('=')
+            let value = array.filter((v,i) => i>0 && i!=='').join('=')
+            value = value.replace(/^\"/,'').replace(/\"$/,'')
+            this.events.push(value)
+            let newEvent = event.replace(value,`{{{{event ${this.events.length-1}`)
+            this.htmlString = this.htmlString.replace(event,newEvent)
+         })
+      }
+   }
+
+   parse(htmlString=this.htmlString) {
+   // Parse tags
+      let elements = htmlString.match(/<[^>]*>/g)
+      elements.forEach((tag,index) => {
+         elements[index] = this.parseElement(tag)
+         htmlString = htmlString.replace(tag,`<tag${index}>`)
+      });
+   // Parse inner text
+      let inners = htmlString.match(/tag[\s\S]*?\</g)
+      for (let i = inners.length-1; i >=0 ; i--) {
+         let inner = inners[i];
+         let tagIndex = inner.match(/(\d*)\>/)[1]
+         inner = inner.replace(/tag.*\>/,'').slice(0, -1).trim()
+         if(inner.length > 0) {
+            elements.splice(parseInt(tagIndex)+1, 0, inner);
+         }
+      }
+      this.elements = elements
+      let root = this.getPairs()
+      return root
+   }
+  
+   lookForPair(element,startIndex,parent,level) {
+      element.parent = parent
+      element.children = []
+      let {tag} = element
+      let count = 0
+      let endIndex
+      for (let index = startIndex+1; index < this.elements.length; index++) {
+         const el = this.elements[index];
+         if(el.tag == tag) {
+            if(el.status == 'close') {
+               if(count == 0) {
+                  endIndex = index
+                  el.level = level
+                  break
+               } else count--
+            } else if(el.status == 'open') count++
+         }
+      }
+      if(!endIndex) endIndex = startIndex+1
+      element.endIndex = endIndex
+      let child = this.getPairs(element,startIndex+1,endIndex,level+1)
+      return child
+   }
+
+   getPairs(parent={type:'root',children:[]},startIndex = 0,endIndex=this.elements.length,level=0,childIndex=0) {
+      for(let index = startIndex; index < endIndex; index++) {
+         if(this.indexes.includes(index)) continue
+         const element = this.elements[index];
+         let child
+         if(typeof element == 'string') child = element
+         else if(element.type == 'tag') {
+            if(element.status == 'single') {
+               child = element
+               child.parent = parent
+            }
+            else if(element.status == 'open') {
+               child = this.lookForPair(element,index,parent,level)
+            }
+         }
+         this.addChild(parent,child,index,level,childIndex/2)
+         childIndex++
+      }
+      return parent
+   }
+
+   addScriptsAndStyles(parent,child,index) {
+      if(parent.tag == 'script') {
+         let scriptIndex = child.match(/(?<=\{\{\{\{script\s)(\d*)?/)
+         if(scriptIndex !== null) {
+            let i = parseInt(scriptIndex[0])
+            if(typeof i == 'number') child = this.scripts[i]
+         }
+      }
+      if(parent.tag == 'style') {
+         let stylesIndex = child.match(/(?<=\{\{\{\{style\s)(\d*)?/)
+         if(stylesIndex !== null) {
+            let i = parseInt(stylesIndex[0])
+            if(typeof i == 'number') child = this.styles[i]
+         }
+      }
+      this.elements[index] = child
+      return child
+   }
+
+   addChild(parent,child,index,level,childIndex) {
+      if(typeof child == 'string') {
+         child = this.addScriptsAndStyles(parent,child,index)
+         child = {type:'text',text:child}
+         this.elements[index] = child
+      } 
+      if(child) {
+         delete child.status
+         this.getElements(child)
+         this.innerHTML(child)
+         this.outerHTML(child)
+         this.innerText(child)
+         this.getAncestors(child)
+         this.getAttribute(child)
+         child.childIndex = childIndex
+         child.index = index
+         child.level = level
+         child.prev = null
+         child.next = null
+         if(parent.children.length > 0) {
+            let prevI = parent.children.length-1
+            parent.children[prevI].next = child
+            child.prev = parent.children[prevI]
+         }
+         parent.children.push(child)
+      }
+      this.indexes.push(index)
+   }
+
+   getAttribute(element) {
+      element.getAttribute = function(name) {
+         let array = Object.keys(this.attribs).filter(key => key == name)
+         return array.length > 0 ? this.attribs[array[0]] : null
+      }
+   }
+
+   getAncestors(element) {
+      Object.defineProperty(element, 'ancestors', { get() {
+         let ancestors = []
+         let parent = this.parent
+         if(parent) while(parent.parent) {
+            ancestors.unshift(parent)
+            parent = parent.parent
+         }
+         return ancestors
+      }});
+   }
+
+   getElements(element,elements=this.elements) {
+      Object.defineProperty(element, 'elements', { get() {
+         return elements.slice(this.index,this.endIndex+1)
+      }});
+   }
+
+   outerHTML(element) {
+      Object.defineProperty(element, 'outerHTML', { get() {
+         let {elements} = this
+         return elements[0].text + this.innerHTML + elements[elements.length-1].text
+      }});
+   }
+
+   innerText(element) {
+      Object.defineProperty(element, 'innerText', { get() {
+         if(element.children)
+            return element.children.map(child => child.type == 'text' ? child.text : '').join('')
+         else return ''
+      }})
+   }
+
+   innerHTML(element) {
+      Object.defineProperty(element, 'innerHTML', { get() {
+         let tab = '   ',result = '',firstLevel,space=''
+            let {elements} = this
+            let endIndex = elements.length
+         for (let i = 1; i < endIndex-1; i++) {
+            let element = elements[i]
+            let {level,tag,text} = element
+            if(firstLevel == undefined) firstLevel = level
+            if(i == endIndex-1) space = ''
+            else if(level) space = Array.from(Array(level-firstLevel).keys()).map(n => tab).join('')
+            result += space + text
+            if(endIndex > 3) result += '\n'
+         }
+         return result
+      }});
+   }
+
+   parseElement(tagString) {
+      let text = tagString
+      let type = 'tag'
+      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type}
+      let status = 'close'
+      let tag = tagString.match(/(?<=\<\/)(\w*\-?)*/)
+      if(tag == null) {
+         tag = tagString.match(/(?<=\<)(\w*\-?)*/)
+         if(tag) {
+            tag = tag[0]
+            if(this.singleTags.includes(tag)) status='single'
+            else status = 'open'
+         }
+      } else tag = tag[0]
+      let {classList,attribs,style,id} = this.parseAttributes(tagString)
+      let obj = {tag,status,attribs,type,classList,text,style,id}
+      return obj
+   }
+   singleTags = ['comment','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','source','track','wbr']
+
+   parseAttributes(tagString,classList=[],attribs={},style={},id=null) {
+      let attributes = tagString.match(/(?<=\s)(\w*\-?)*(\s*?\=\s*?\"[\s\S]*?\")?/g)
+      if(attributes) attributes.forEach(attribString => {
+         let [name,value] = attribString.split('=')
+         if(value !== undefined && name !== '') {
+            value = value.trim().replace(/^\"/,'').replace(/\"$/m,'')
+
+            let eventIndex = value.match(/(?<=\{\{\{\{event\s)(\d*)?/)
+            if(eventIndex !== null) value = this.events[eventIndex[0]]
+
+            if(name == 'class') classList = value.split(/\s\s?\s?/)
+            else if(name == 'style') style = this.parseInlineCss(value)
+            else if(name == 'id') id = value
+            attribs[name] = value
+         } else if(name !== '') attribs[name] = undefined
+      });
+      return {classList,attribs,style,id}
+   }
+
+   parseInlineCss(textCss) {
+      let rules = textCss.split(';')
+      let styles = {}
+      rules.forEach(rule => {
+         let [prop,value] = rule.trim().split(':')
+         if(rule !== '') {
+            if(prop.match(/\w*\-\w*(-\w*)?/) !== null) {
+               let words = prop.split('-')
+               prop = words.map((w,i) => i==0 ? w : w[0].toUpperCase() + w.slice(1)).join('')
+            }
+            styles[prop] = value.trim()
+         }
+      });
+      return styles
+   }
+}
+try {module.exports = HtmlParser} catch{}

package/parser/readme.md

@@ -0,0 +1,121 @@
+## HtmlParser
+
+HtmlParser is a class which build dom tree from html string.
+
+* HtmlParser removes all html comments and they not included in dom tree. 
+* Contrary to regular dom, attribute includes class,id and style as attribute in addition to classList, id and style(as array) inside element's object.
+
+
+### Syntax
+
+```javascript
+let parsed = new HtmlParser(htmlString:string):instanceof HtmlParser
+parsed.root : circular object
+
+// static method
+HtmlParser.parse(html):object // parsed.root
+```
+
+Each element, except root and text elements has:
+* attribs - element's attributes
+* parent - parent element
+* next - next element or null
+* prev - previous element or null
+* children - array of children include text nodes
+* type - tag or text or root
+* classList - array with classes
+* index - start index of element inside elements list
+* id - element's id or null
+* endIndex - end index of element inside elements list
+* level - level in dom tree
+* text - parsed text for tag and for text element
+* innerText:getter - concats all children's text together | ''
+* innerHTML:getter - return innerHTML for element
+* outerHTML:getter - return outerHTML for element
+* ancestors:getter - return array of ancestors
+* getAttribute(name) - return value of attribute or null
+* style:[] - array of styles with camelCase property name
+
+Example for parsed.document
+
+```javascript
+{
+   type:'root',
+   children:[
+      {
+         attribs: {},
+         index: 0,
+         prev:null,
+         next:{...}
+         tag: "!DOCTYPE html",
+         type: "tag",
+         ...
+      },
+      {
+         attribs: {lang:'en'},
+         prev:{...},
+         next:null,
+         classList:[],
+         children:[
+            {
+               attribs: {},
+               children:[...]
+               prev:null,
+               next:{...}
+               classList:[],
+               index: 2,
+               tag: "head",
+               parent:{tag:'html',...} // reference to parent
+               type: "tag",
+               ...
+            },
+            {
+               attribs: {},
+               children:[...]
+               index: 10,
+               prev:{...},
+               next:null,
+               classList:[],
+               tag: "body",
+               parent:{tag:'html',...} // reference to parent
+               type: "tag",
+               ...
+            },
+         ]
+         index: 1,
+         tag: "html",
+         parent:{type:'root',...} // reference to parent
+         type: "tag",
+         ...
+      }
+   ]
+}
+```
+
+
+### Frontend example
+
+```html
+<script src="/node_modules/als-document/parser/parser.js"></script>
+<script>
+let result = new HtmlParser(htmlString)
+console.log(result.root)
+
+// Or with static method
+console.log(HtmlParser.parse(html))
+
+</script>
+```
+
+### Backend example
+
+```javascript
+const {HtmlParser} = require('als-htmlparser')
+let result = new HtmlParser(htmlString)
+console.log(result.root)
+
+// Or with static method
+console.log(HtmlParser.parse(html))
+```
+
+

package/parser/test.js

@@ -0,0 +1,233 @@
+let Test = require('als-test')
+let {equal,greater,smaller,$greater, $smaller,mesureTime} = Test
+let Parser = require('./parser')
+const htmlparser2 = require("htmlparser2");
+
+module.exports = new Test('HtmlParser tests',[
+   {
+      title:'Parse html for html1',
+      result:function({html1}){
+         this.vars.root1 = Parser.parse(html1)
+         if(this.vars.root1.type == 'root')
+            return `succesfully parsed with Parser.parse(html)`
+         else {
+            this.terminate = true
+            return 'Something went wrong..'
+         }
+      },
+   },
+   {
+      title:'Compare to htmlparser2',
+      expected:mesureTime(function({html2}){htmlparser2.parseDocument(html2);}),
+      result:mesureTime(function({html2}){Parser.parse(html2)}),
+      action:greater
+   },
+   {
+      title:'Parse html for html2',
+      result:function({html2}){
+         this.vars.root2 = Parser.parse(html2)
+         if(this.vars.root2.type == 'root')
+            return `succesfully parsed with Parser.parse(html)`
+         else {
+            this.terminate = true
+            return 'Something went wrong..'
+         }
+      },
+   },
+   {
+      title:'root1 element has 2 children',
+      expected:2,
+      result:function({root1}){
+         return root1.children.length
+      },
+      action:equal
+   },
+   {
+      title:'Check if element is right',
+      expected:'body',
+      result:function({root1}){
+         this.vars.body1 = root1.children[1].children[1]
+         return this.vars.body1.tag
+      },
+      action:equal
+   },
+   {
+      title:'Check if element right',
+      expected:'head',
+      result:function({root1}){
+         this.vars.head1 = root1.children[1].children[0]
+         return this.vars.head1.tag
+      },
+      action:equal
+   },
+   {
+      title:'body element has 4 children',
+      expected:4,
+      result:function({body1}){
+         return body1.children.length
+      },
+      action:equal
+   },
+   {
+      title:'Read title text',
+      expected:'Document',
+      result:function({head1}){
+         return head1.children[3].children[0].text
+      },
+      action:equal
+   },
+   {
+      title:'innerHTML',
+      expected:'tab3 content',
+      result:function({body1}){
+         return body1.children[3].children[6].innerHTML
+      },
+      action:equal
+   },
+   {
+      title:'innerHTML',
+      expected:669,
+      result:function({body1}){
+         return body1.children[3].innerHTML.length
+      },
+      action:equal
+   },
+   {
+      title:'outerHTML',
+      expected:'<div class="tab-content p2 transition1">tab3 content</div>'.length,
+      result:function({body1}){
+         return body1.children[3].children[6].outerHTML.length
+      },
+      action:equal
+   },
+   {
+      title:'ancestors',
+      expected:3,
+      result:function({body1}){
+         return body1.children[3].children[6].ancestors.length
+      },
+      action:equal
+   },
+   {
+      title:'elements',
+      expected:25,
+      result:function({body1}){
+         return body1.children[3].elements.length
+      },
+      action:equal
+   },
+   {
+      title:'children length',
+      expected:15,
+      result:function({root2}){
+         this.vars.body2 = root2.children[0].children[1]
+         return this.vars.body2.children.length
+      },
+      action:equal
+   },
+   {
+      title:'id',
+      expected:'tab2',
+      result:function({body1}){
+         return body1.children[3].children[1].id
+      },
+      action:equal
+   },
+   {
+      title:'classList',
+      expected:5,
+      result:function({body2}){
+         return body2.children[2].children[0].children[4].classList.length
+      },
+      action:equal
+   },
+   {
+      title:'style',
+      expected:'marginTop',
+      result:function({body2}){
+         let style = body2.children[2].children[0].children[4].style
+         return Object.keys(style)[0]
+      },
+      action:equal
+   },
+   {
+      title:'style length',
+      expected:5,
+      result:function({body2}){
+         let style = body2.children[4].style
+         return Object.keys(style).length
+      },
+      action:equal
+   },
+   {
+      title:'style with multiple styles',
+      expected:'605px',
+      result:function({body2}){
+         let style = body2.children[4].style
+         return style.left
+      },
+      action:equal
+   },
+   {
+      title:'attributs length',
+      expected:6,
+      result:function({body2}){
+         let attribs = body2.children[2].children[0].children[0].attribs
+         return Object.keys(attribs).length
+      },
+      action:equal
+   },
+   {
+      title:'attribute content',
+      expected:'_blank',
+      result:function({body2}){
+         return body2.children[2].children[0].children[0].attribs.target
+      },
+      action:equal
+   },
+   {
+      title:'next',
+      expected:'a#menuButton',
+      result:function({body2}){
+         let {tag,id} = body2.children[2].children[0].children[0].next
+         return `${tag}#${id}`
+      },
+      action:equal
+   },
+   {
+      title:'prev',
+      expected:'a#tryhome',
+      result:function({body2}){
+         let {tag,id} = body2.children[2].children[0].children[1].prev
+         return `${tag}#${id}`
+      },
+      action:equal
+   },
+   {
+      title:'parent',
+      expected:'div.w3-bar',
+      result:function({body2}){
+         let {tag,classList} = body2.children[2].children[0].children[1].parent
+         return `${tag}.${classList[0]}`
+      },
+      action:equal
+   },
+   {
+      title:'Single tags doesnt have children',
+      expected:undefined,
+      result:function({root2}){
+         let head = root2.children[0].children[0]
+         return head.children[1].children
+      },
+      action:equal
+   },
+   {
+      title:'Text tag doesnt have children',
+      expected:undefined,
+      result:function({root2}){
+         let head = root2.children[0].children[0]
+         return head.children[0].children[0].children
+      },
+      action:equal
+   },
+])