als-document 0.5.1 → 0.6.1

package/document.min.js

@@ -0,0 +1 @@
+class HtmlSelector{constructor(e){"string"==typeof e?(this.html=new HtmlParser(e),this.elements.forEach((e,t)=>{this.makeSelectable(e)})):console.log("Parameter is not string")}get elements(){return this.html.elements}makeSelectable(e){"tag"==e.type&&"close"!==e.status&&(e.$$=t=>this.$$(t,e.index,e.endIndex),e.$=t=>this.$(t,e.index,e.endIndex))}$(e,t=0,s=this.elements.length){return this.$$(e,t,s,!0)}$$(e,t=0,s=this.elements.length,i=!1){let l=[];return(this.selectors=new Query(e).selectors,this.query=e,this.selectors.forEach(e=>{for(let r=t;r<s;r++){let n=this.elements[r];if(this.checkElement(n,e)&&!l.includes(n)&&l.push(n),i&&1==l.length)break}}),i&&1==l.length)?l[0]:i&&0==l.length?null:l}checkElement(e,t){if(void 0==t)return!0;if(null==e)return!1;let{tag:s,classList:i,attribs:l,id:r,prev:n,ancestors:h,parents:a,prevAny:c}=t;return"close"!=e.status&&"text"!=e.type&&(void 0===r||void 0!=e.id)&&(!r||r===e.id)&&(!s||void 0!=e.tag)&&(!s||s===e.tag)&&(void 0===i||void 0!=e.classList)&&(!(void 0!==i&&Array.isArray(e.classList))||!1!=i.every(t=>e.classList.includes(t)))&&!1!=this.checkAttribs(l,e)&&!1!=this.checkElement(e.prev,n)&&!1!=this.checkAncestors(e.ancestors,h)&&!1!=this.checkParents(e.ancestors,a)&&(!e.parent||!1!=this.prevAny(e.parent.children,e.childIndex,c))}prevAny(e=[],t,s){if((0==e.length||0==t)&&s)return!1;for(let i=t;i>=0;i--)if(this.checkElement(e[i],s))return!0;return!1}checkAncestors(e=[],t=[]){let s=0;if(0==t.length)return!0;let i=e.length-1,l=t.length-1;for(;l>=0;){for(let r=i;r>=0;r--)if(i=r-1,!0==this.checkElement(e[r],t[l])){s++;break}l--}return s==t.length}checkParents(e=[],t=[]){if(0==t.length)return!0;if(e.length<t.length)return!1;let s=e.length-1;for(let i=t.length-1;i>=0;i--){if(!1==this.checkElement(e[s],t[i]))return!1;s--}return!0}checkAttribs(e=[],t){let s=t.attribs,i=Object.keys(s),l=0;if(e)for(let r=0;r<e.length;r++){let{name:n,value:h,check:a}=e[r];if("inner"==n&&void 0!==h&&a&&t.innerText&&a(t.innerText)&&l++,i.includes(n)){if(void 0==h)l++;else if(h&&s[n]){if(!1==a(s[n]))continue;l++}}}return l==e.length}}class Query{static get(e){return new Query(e).selectors}constructor(e){this.query=e,this.selectors=[],this.getQueries(e.split(","))}getQueries(e){e.forEach(e=>{let t=e;e=this.removeSpaces(e),this.stringValues=[],e=e.replace(/\[.*?\]/g,e=>(this.stringValues.push(e),`[${this.stringValues.length-1}]`));let[s,i]=this.splitAndCutLast(e," ");s=this.getFamily(s),i.length>0&&(s.ancestors=i.map(e=>this.getFamily(e))),s.group=t,this.selectors.push(s)})}splitAndCutLast(e,t){let s=e.split(t),i;return 1==s.length?(i=s[0],s=[]):i=s.splice(s.length-1,s.length-1)[0],[i,s]}getFamily(e,t,s,i,l){if(null!==e.match(/\~|\+/)){let[r,n]=this.splitAndCutLast(e,/\~|\+/),h=e.replace(r,"");n.forEach(e=>h=h.replace(e,"")),1==(h=h.match(/\~|\+/g)).length?l=h[0]:h.length>1&&(l=h.splice(h.length-1,h.length-1)[0],n[0]=n.map((e,t)=>(t<n.length-1&&(e+=h[t]),e)).join(""),n[0]=this.getFamily(n[0])),"~"==l?i=n[0]:"+"==l&&(s=n[0]),t=r}else t=e;let a;return s||i?(a=this.getParents(t),s&&(a.prev=this.getParents(s)),i&&(a.prevAny=this.getParents(i))):a=this.getParents(t),a.query!==e&&(a.group=e),a}getParents(e){if("string"!=typeof e)return e;{let[t,s]=this.splitAndCutLast(e,">");return t=this.buildElement(t),(s=s.map(e=>this.buildElement(e))).length>0&&(t.parents=s),t}}buildElement(e,t=null,s=null,i=[]){let l=e;e=(e=(e=e.replace(/\#(\w-?)*/,e=>(t=e.replace(/^\#/,""),""))).replace(/\.(\w-?)*/,e=>(i.push(e.replace(/^\./,"")),""))).replace(/(\w-?)*/,e=>(s=""==e?null:e,""));let r=this.getAttributes(e);return e={query:l},t&&(e.id=t),s&&(e.tag=s),i.length>0&&(e.classList=i),r.length>0&&(e.attribs=r),e}getAttributes(e){let t=this.stringValues.filter((t,s)=>{let i=`[${s}]`;return!!e.match(i)});return t.map(e=>{let t=e,[s,i]=(e=e.replace("[","").replace("]","")).split(/[\~\|\^\$\*]?\=/),l=e.replace(s,"").replace(i,"");return e={query:t},s&&(e.name=s),i&&(e.value=i.trim().replace(/^\"/,"").replace(/\"$/,"")),l&&(e.sign=l,e.check=this.getAttribFn(l).bind(e)),e})}getAttribFn(e){return"="==e?function(e){return e==this.value}:"*="==e?function(e){return!!e.includes(this.value)}:"^="==e?function(e){return!!e.startsWith(this.value)}:"$="==e?function(e){return!!e.endsWith(this.value)}:"|="==e?function(e){return!!(1==e.trim().split(" ").length&&(e.startsWith(this.value)||e.startsWith(this.value+"-")))}:"~="==e?function(e){return!!(1==this.value.trim().split(" ").length&&e.includes(this.value))}:void 0}removeSpaces(e){return e=(e=(e=e.replace(/\s{2}/g," ")).replace(/\s?\^?\$?\|?\~?\*?\=\s*/g,e=>e.trim())).replace(/\s?(\+|\~|\>)\s?/g,e=>e.trim())}}class HtmlParser{static parse(e){return new HtmlParser(e).root}constructor(e=""){this.checkHtml(e)&&(this.indexes=[],this.events=[],this.html=this.htmlString=e,this.htmlString=this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,""),this.removeScripts(),this.removeStyles(),this.removeEventStrings(),this.root=this.parse(),this.clean())}clean(){["events","indexes","scripts","styles","htmlString","html"].forEach(e=>{delete this[e]})}checkHtml(e,t=!1){return""==e?console.log("html parameter is empty"):"string"!=typeof e?console.log(`html parameter has to be string. Recieved ${typeof e}`):t=!0,t}removeScripts(e=[]){let t=this.htmlString.match(/\<script(.*?)\>[\S\s]*?\<\/script\>/gm);null!==t&&t.forEach((t,s)=>{let i=t.replace(/^\<script(.*?)\>/,"").replace(/\<\/script\>$/,"");e.push(i),this.htmlString=this.htmlString.replace(i,`{{{{script ${e.length-1}`)}),this.scripts=e}removeStyles(e=[]){let t=this.htmlString.match(/\<style\>[\S\s]*?\<\/style\>/gm);null!==t&&t.forEach((t,s)=>{let i=t.replace(/^\<style\>/,"").replace(/\<\/style\>$/,"");e.push(i),this.htmlString=this.htmlString.replace(i,`{{{{style ${e.length-1}`)}),this.styles=e}removeEventStrings(){let e=this.htmlString.match(/\son\w*\s*?\=\s*?\"(.*?)\"/g);null!==e&&e.forEach(e=>{let t=e.split("=").filter((e,t)=>t>0&&""!==t).join("=");t=t.replace(/^\"/,"").replace(/\"$/,""),this.events.push(t);let s=e.replace(t,`{{{{event ${this.events.length-1}`);this.htmlString=this.htmlString.replace(e,s)})}parse(e=this.htmlString){let t=e.match(/<("[^"]*"|'[^']*'|[^'">])*>/g);t.forEach((s,i)=>{t[i]=this.parseElement(s),e=e.replace(s,`<tag${i}>`)});let s=e.match(/tag[\s\S]*?\</g);for(let i=s.length-1;i>=0;i--){let l=s[i],r=l.match(/(\d*)\>/)[1];(l=l.replace(/tag.*\>/,"").slice(0,-1).trim()).length>0&&t.splice(parseInt(r)+1,0,l)}this.elements=t;let n=this.getPairs();return n.level=0,n.elements=this.elements,this.innerHTML(n),n}lookForPair(e,t,s,i){e.parent=s,e.children=[];let{tag:l}=e,r=0,n;for(let h=t+1;h<this.elements.length;h++){let a=this.elements[h];if(a.tag==l){if("close"==a.status){if(0==r){n=h,a.level=i;break}r--}else"open"==a.status&&r++}}return n||(n=t+1),e.endIndex=n,this.getPairs(e,t+1,n,i+1)}getPairs(e={type:"root",children:[]},t=0,s=this.elements.length,i=0,l=0){for(let r=t;r<s;r++){if(this.indexes.includes(r))continue;let n=this.elements[r],h;"string"==typeof n?h=n:"tag"==n.type&&("single"==n.status?(h=n).parent=e:"open"==n.status?h=this.lookForPair(n,r,e,i):n.index=r),this.addChild(e,h,r,i),l++}return e}addScriptsAndStyles(e,t,s){if("script"==e.tag){let i=t.match(/(?<=\{\{\{\{script\s)(\d*)?/);if(null!==i){let l=parseInt(i[0]);"number"==typeof l&&(t=this.scripts[l])}}if("style"==e.tag){let r=t.match(/(?<=\{\{\{\{style\s)(\d*)?/);if(null!==r){let n=parseInt(r[0]);"number"==typeof n&&(t=this.styles[n])}}return this.elements[s]=t,t}addChild(e,t,s,i){"string"==typeof t&&(t={type:"text",text:t=this.addScriptsAndStyles(e,t,s),parent:e},this.elements[s]=t),t&&(delete t.status,"text"!==t.type&&(this.innerHTML(t),this.outerHTML(t),this.innerText(t)),this.getElements(t),this.getAncestors(t),this.getAttribute(t),this.nextAndPrev(t),t.index=s,t.level=i,e.children.push(t)),this.indexes.push(s)}getAttribute(e){e.getAttribute=function(e){let t=Object.keys(this.attribs).filter(t=>t==e);return t.length>0?this.attribs[t[0]]:null}}getAncestors(e){Object.defineProperty(e,"ancestors",{get(){let e=[],t=this.parent;if(t)for(;t.parent;)e.unshift(t),t=t.parent;return e}})}nextAndPrev(e){Object.defineProperty(e,"childIndex",{get(){return this.parent.children.map(e=>e.index).indexOf(this.index)}}),Object.defineProperty(e,"prev",{get(){let e=this.childIndex,t=this.parent.children;return 0==e?null:t[e-1]}}),Object.defineProperty(e,"next",{get(){let e=this.childIndex,t=this.parent.children;return e==t.length-1?null:t[e+1]}})}getElements(e,t=this){"text"!==e.type&&Object.defineProperty(e,"elements",{configurable:!0,get(){let e=isNaN(this.endIndex)?this.index+1:this.endIndex+1;return t.elements.slice(this.index,e)}}),Object.defineProperty(e,"$elements",{configurable:!0,get:()=>t.elements}),Object.defineProperty(e,"root",{configurable:!0,get:()=>t.root}),Object.defineProperty(e,"html",{configurable:!0,get:()=>t})}outerHTML(e){Object.defineProperty(e,"outerHTML",{get(){let{elements:e}=this;return e[0].text+this.innerHTML+e[e.length-1].text}})}innerText(e){Object.defineProperty(e,"innerText",{get:()=>e.children?e.children.map(e=>"text"==e.type?e.text:"").join(""):""})}innerHTML(e){e.tab="   ",e.n="\n",Object.defineProperty(e,"innerHTML",{get(){let{tab:e,n:t}=this,s="",i,l="",{elements:r}=this,n=r.length,h=n-1,a=1;"root"==this.type&&(h=n,a=0);for(let c=a;c<h;c++){let{level:d,text:o}=r[c];void 0==i&&(i=d),c==h?l="":d&&(l=Array.from(Array(d-i).keys()).map(t=>e).join("")),s+=l+o,n>3&&(s+=t)}return s}})}parseElement(e){if("<!DOCTYPE html>"==e)return{tag:"!DOCTYPE html",status:"single",attribs:{},type:"tag",text:e};let t="close",s=e.match(/(?<=\<\/)(\w*\-?)*/);null==s?(s=e.match(/(?<=\<)(\w*\-?)*/))&&(s=s[0],t=HtmlParser.singleTags.includes(s)?"single":"open"):s=s[0];let{classList:i,attribs:l,style:r,id:n,text:h}=this.parseAttributes(e);return{tag:s,status:t,attribs:l,type:"tag",classList:i,text:h,style:r,id:n}}static singleTags=["comment","area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];parseAttributes(e,t=[],s={},i={},l=null){let r=e,n=e.match(/(?<=\s)(\w*\-?)*(\s*?\=\s*?\"[\s\S]*?\")?/g);return n&&n.forEach(n=>{let[h,a]=n.split("=");if(void 0!==a&&""!==h){let c=(a=a.trim().replace(/^\"/,"").replace(/\"$/m,"")).match(/(?<=\{\{\{\{event\s)(\d*)?/);null!==c&&(a=this.events[c[0]],r=e.replace(`{{{{event ${c[0]}`,a)),"class"==h?t=a.split(/\s\s?\s?/):"style"==h?i=this.parseInlineCss(a):"id"==h&&(l=a),s[h]=a}else""!==h&&(s[h]=void 0)}),{classList:t,attribs:s,style:i,id:l,text:r}}parseInlineCss(e){let t=e.split(";"),s={};return t.forEach(e=>{let[t,i]=e.trim().split(":");""!==e&&(null!==t.match(/\w*\-\w*(-\w*)?/)&&(t=t.split("-").map((e,t)=>0==t?e:e[0].toUpperCase()+e.slice(1)).join("")),s[t]=i.trim())}),s}}class Document extends HtmlSelector{constructor(e){super(e),this.elements.forEach(e=>{this.addMethods(e)})}addMethods(e){"tag"==e.type&&"close"!==e.status&&(this.insert(e),this.buildAttribs(e),this.classlistMethods(e),this.style(e),this.id(e))}id(e,t=this){(void 0===e.id||!Object.getOwnPropertyDescriptor(e,"id").get)&&(null==e.id||void 0!==e.id)&&("string"==typeof e.id&&delete e.id,Object.defineProperty(e,"id",{get(){return this.attribs.id?this.attribs.id:null},set(e){this.attribs.id=e,t.changeElementText(this)}}))}style(e,t={},s=this){void 0!==e.style&&(t={...e.style});let i=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`);e.style=new Proxy(t,{get(e,t,s){return"target"===t?e:Reflect.get(...arguments)},set(t,l,r){t[l]=r,e.attribs.style=Object.keys(t).map(e=>`${i(e)}:${t[e]};`).join(""),s.changeElementText(this)},deleteProperty(t,l){l in t&&(delete t[l],e.attribs.style=Object.keys(t).map(e=>`${i(e)}:${t[e]};`).join("")),s.changeElementText(this)}})}classlistMethods(e,t=this){void 0==e.classList&&(e.classList=[]),e.classList.add=function(s){void 0==e.attribs.class&&(e.attribs.class=""),this.push(s),e.attribs.class+=" "+s,t.changeElementText(this)},e.classList.remove=function(s){this.splice(this.indexOf(s),1),e.attribs.class=this.filter(e=>void 0!==e).join(" "),t.changeElementText(this)},e.classList.toggle=function(e){this.includes(e)?this.remove(e):this.add(e),t.changeElementText(this)}}buildAttribs(e,t=this){e.attr||(e.attr=function(e,s){if(e&&void 0===s)return this.attribs[e];e&&null===s&&!["class","style","id"].includes(e)?delete this.attribs[e]:e&&null!=s&&!["style","id"].includes(e)&&(this.attribs[e]=s,"class"==e&&(this.classList=s.split(" ").filter(e=>" "!==e),t.classlistMethods(this))),t.changeElementText(this)})}insert(e){let t=this;e.insert=function(e,s=0){let i,l=this.$elements;if("string"==typeof e)(e=new HtmlParser(e)).elements.forEach(e=>{t.html.getElements(e),t.makeSelectable(e),t.addMethods(e)}),i=e.elements,e=e.root.children[0];else{let{index:r,endIndex:n}=e,h=isNaN(n-r)?1:n-r+1;i=l.splice(r,h);let{parent:a,childIndex:c}=e;a.children.splice(c,1)}t.rebildElements(l),t.addElement(this,l,e,i,s)},e.remove=function(){let{$elements:e,elements:s,parent:i,childIndex:l,index:r}=this;e.splice(r,s.length),i.children.splice(l,1),i.endIndex=i.endIndex-s.length,t.rebildElements(e)},Object.defineProperty(e,"before",{set(e){this.insert(e,0)}}),Object.defineProperty(e,"after",{set(e){this.insert(e,3)}}),Object.defineProperty(e,"last",{set(e){this.insert(e,2)}}),Object.defineProperty(e,"first",{set(e){this.insert(e,1)}})}addElement(e,t,s,i,l){let{parent:r,level:n,index:h,endIndex:a}=e;0==l?(t.splice(h,0,...i),r.children.splice(e.childIndex,0,s)):3==l?(t.splice(a+1,0,...i),r.children.splice(e.childIndex+1,0,s)):(1==l||2==l)&&(n+=1,r=e,1==l?(t.splice(h+1,0,...i),e.children.unshift(s)):2==l&&(t.splice(a-1,0,...i),e.children.push(s)),e.endIndex=e.endIndex+i.length),this.rebildElements(t),this.rebuildChild(i[0],r,e.html,n)}rebildElements(e){for(let t=0;t<e.length;t++){let{endIndex:s,index:i}=e[t];if(s){let l=s-i;e[t].endIndex=t+l}e[t].index=t}}rebuildChild(e,t,s,i){void 0!==e.endIndex&&(e.elements[e.elements.length-1].level=i),s.getElements(e,s),e.parent=t,e.level=i,e.children&&e.children.length>0&&e.children.forEach(t=>{this.rebuildChild(t,e,s,i+1)})}changeElementText(e){let{type:t,status:s,attribs:i,tag:l}=e;if("tag"==t&&"close"!==s){let r=Object.keys(i);r=r.length>0?" "+r.map(e=>`${e}${i[e]?`="${i[e]}"`:""}`).join(" "):"",e.text=`<${l}${r}>`}}}

package/index.js

@@ -0,0 +1,6 @@
+let HtmlSelector = require('./selector/selector')
+let HtmlParser = require('./parser/parser')
+let Query = require('./query/query')
+let Document = require('./document/document')
+
+module.exports = {HtmlSelector,HtmlParser,Query,Document}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "als-document",
-  "version": "0.5.1",
-  "description": "",
-  "main": "document.js",
+  "version": "0.6.1",
+  "description": "Build virtual dom from string and manage it, similar you do it on browser",
+  "main": "index.js",
   "scripts": {
     "test": "node test/test.js"
   },

package/parser/parser.js

@@ -8,14 +8,22 @@ class HtmlParser {
          this.indexes = []
          this.events = []
          this.html = this.htmlString = html
+         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
          this.removeScripts()
          this.removeStyles()
          this.removeEventStrings()
-         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
          this.root = this.parse()
+         this.clean()
       }
    }
 
+   clean() {
+      let toDelete = ['events','indexes','scripts','styles','htmlString','html']
+      toDelete.forEach(name => {
+         delete this[name]
+      });
+   }
+
    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}`)
@@ -41,9 +49,9 @@ class HtmlParser {
       });
       this.styles = styles
    }
-   
+
    removeEventStrings() {
-      let eventsWithHtml = this.htmlString.match(/on\w*\s*?\=\s*?["|'|`](.*?(<[^>]*>)(\'|\`).*?)["|'|`]/g)
+      let eventsWithHtml = this.htmlString.match(/\son\w*\s*?\=\s*?\"(.*?)\"/g)
       if(eventsWithHtml !== null) {
          eventsWithHtml.forEach(event => {
             let array = event.split('=')
@@ -58,7 +66,7 @@ class HtmlParser {
 
    parse(htmlString=this.htmlString) {
    // Parse tags
-      let elements = htmlString.match(/<[^>]*>/g)
+      let elements = htmlString.match(/<("[^"]*"|'[^']*'|[^'">])*>/g)
       elements.forEach((tag,index) => {
          elements[index] = this.parseElement(tag)
          htmlString = htmlString.replace(tag,`<tag${index}>`)
@@ -75,6 +83,9 @@ class HtmlParser {
       }
       this.elements = elements
       let root = this.getPairs()
+      root.level = 0
+      root.elements = this.elements
+      this.innerHTML(root)
       return root
    }
   
@@ -105,19 +116,18 @@ class HtmlParser {
    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 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') {
+            } else if(element.status == 'open') {
                child = this.lookForPair(element,index,parent,level)
-            }
-         }
-         this.addChild(parent,child,index,level,childIndex/2)
+            } else element.index = index
+         } 
+         this.addChild(parent,child,index,level)
          childIndex++
       }
       return parent
@@ -142,30 +152,25 @@ class HtmlParser {
       return child
    }
 
-   addChild(parent,child,index,level,childIndex) {
+   addChild(parent,child,index,level) {
       if(typeof child == 'string') {
          child = this.addScriptsAndStyles(parent,child,index)
-         child = {type:'text',text:child}
+         child = {type:'text',text:child,parent}
          this.elements[index] = child
       } 
       if(child) {
          delete child.status
+         if(child.type !== 'text') {
+            this.innerHTML(child)
+            this.outerHTML(child)
+            this.innerText(child)
+         }
          this.getElements(child)
-         this.innerHTML(child)
-         this.outerHTML(child)
-         this.innerText(child)
          this.getAncestors(child)
          this.getAttribute(child)
-         child.childIndex = childIndex
+         this.nextAndPrev(child)
          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)
@@ -190,10 +195,45 @@ class HtmlParser {
       }});
    }
 
-   getElements(element,elements=this.elements) {
-      Object.defineProperty(element, 'elements', { get() {
-         return elements.slice(this.index,this.endIndex+1)
-      }});
+   nextAndPrev(element) {
+      Object.defineProperty(element, 'childIndex', { 
+         get() {return this.parent.children.map(o => o.index).indexOf(this.index)}
+      });
+      Object.defineProperty(element, 'prev', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == 0 ? null : brothers[i-1]
+         }
+      });
+      Object.defineProperty(element, 'next', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == brothers.length-1 ? null : brothers[i+1]
+         }
+      });
+   }
+
+   getElements(element,self=this) {
+      if(element.type !== 'text')
+      Object.defineProperty(element, 'elements', { 
+         configurable:true,
+         get() {
+            let endIndex = isNaN(this.endIndex) ? this.index + 1 : this.endIndex+1
+            return self.elements.slice(this.index,endIndex)
+         }
+      });
+      Object.defineProperty(element, '$elements', { 
+         configurable:true,
+         get() {return self.elements}
+      });
+      Object.defineProperty(element, 'root', {
+         configurable:true,
+         get() {return self.root}
+      });
+      Object.defineProperty(element, 'html', {
+         configurable:true,
+         get() {return self}
+      });
    }
 
    outerHTML(element) {
@@ -210,62 +250,71 @@ class HtmlParser {
          else return ''
       }})
    }
-
    innerHTML(element) {
+      element.tab = '   '
+      element.n = '\n'
       Object.defineProperty(element, 'innerHTML', { get() {
-         let tab = '   ',result = '',firstLevel,space=''
+         // let tab = '   ',result = '',firstLevel,space=''
+         let {tab,n} = this
+         let result = '',firstLevel,space=''
             let {elements} = this
             let endIndex = elements.length
-         for (let i = 1; i < endIndex-1; i++) {
+            let end = endIndex-1,start=1
+            if(this.type == 'root') {
+               end = endIndex
+               start = 0
+            }
+         for(let i = start; i < end; i++) {
             let element = elements[i]
-            let {level,tag,text} = element
+            let {level,text} = element
             if(firstLevel == undefined) firstLevel = level
-            if(i == endIndex-1) space = ''
+            if(i == end) space = ''
             else if(level) space = Array.from(Array(level-firstLevel).keys()).map(n => tab).join('')
             result += space + text
-            if(endIndex > 3) result += '\n'
+            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}
+      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type,text:tagString}
       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'
+            if(HtmlParser.singleTags.includes(tag)) status='single'
             else status = 'open'
          }
       } else tag = tag[0]
-      let {classList,attribs,style,id} = this.parseAttributes(tagString)
+      let {classList,attribs,style,id,text} = 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']
+   static 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 text = tagString
       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(eventIndex !== null) {
+               value = this.events[eventIndex[0]]
+               text = tagString.replace(`{{{{event ${eventIndex[0]}`,value)
+            }
             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}
+      return {classList,attribs,style,id,text}
    }
 
    parseInlineCss(textCss) {
@@ -284,4 +333,4 @@ class HtmlParser {
       return styles
    }
 }
-try {module.exports = HtmlParser} catch{}
+try {module.exports = HtmlParser} catch {}

package/parser/test.js

@@ -1,7 +1,7 @@
 let Test = require('als-test')
 let {equal,greater,smaller,$greater, $smaller,mesureTime} = Test
 let Parser = require('./parser')
-const htmlparser2 = require("htmlparser2");
+// const htmlparser2 = require("htmlparser2");
 
 module.exports = new Test('HtmlParser tests',[
    {
@@ -16,12 +16,12 @@ module.exports = new Test('HtmlParser tests',[
          }
       },
    },
-   {
-      title:'Compare to htmlparser2',
-      expected:mesureTime(function({html2}){htmlparser2.parseDocument(html2);}),
-      result:mesureTime(function({html2}){Parser.parse(html2)}),
-      action:greater
-   },
+   // {
+   //    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}){

package/query/query.js

@@ -144,4 +144,4 @@ class Query {
       return selector
    }
 }
-try {module.exports = Query} catch {}
+module.exports = Query

package/query/readme.md

@@ -3,10 +3,13 @@ Query is a class for parsing selectors inside html query. Query not supporting p
 You can use Query on frontend and on backend. 
 
 Query can be used on fronten and on backend.
+You can use:
+* node_modules/als-document/document.js - original file
+* node_modules/als-document/document.min.js - minimized file
 
 Frontend:
 ```html
-<script src="/node_modules/als-document/query/query.js"></script>
+<script src="node_modules/als-document/document.min.js"></script>
 ```
 
 Backend: