als-render - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

lib/build-content/build-component/index.js

@@ -6,22 +6,12 @@ const getFunction = require('./get-function')
    if(originalFn === null) return content
-   const newFunction = /*js*/`function ${componentName}(props={},attributes=[],inner) {
-      const selector = '${componentName}'+(props.key || '')
-      const main = {
-         selector,
-         update(props,$attributes=attributes,$inner = inner) {
-            context.update('${componentName}',props,attributes,inner)
-         },
-         get element() {return document.querySelector(selector)}
-      }
+   const newFunction = /*js*/`function ${componentName}(props={},attributes=[],inner,component) {
       let originalFn = ${originalFn}
-      originalFn = originalFn.bind(main)
-      let result = originalFn(props,inner)
-      return context.modifyResult(result,attributes,'${componentName}',props,inner)
+      component = context.component('${componentName}',props,attributes,inner,component)
+      originalFn = originalFn.bind(component)
+      const result = originalFn(props,inner)
+      context.hashes[component.name] = context.genHash(result)
+      return result
    }
    context.components.${componentName} = ${componentName}
-   context.components.${componentName}.update = (props,attributes,inner) => {
-      context.update('${componentName}',props,attributes,inner)
-   }
    `
-
    return content.replace(originalFn,newFunction)
@@ -28,0 +18,0 @@ }

lib/build-content/index.js

@@ -7,4 +7,4 @@ const jsxParser = require('./jsx/jsx-parser')
    const componentName = path.split('/').pop().replace(/\.js$/,'')
-
-   const newContent = jsxParser(removeComments(content))
+   const curPath = `context.currentPath = '${path}';\n`
+   const newContent = curPath+jsxParser(removeComments(content),componentName)
    return buildComponent(newContent,componentName)
@@ -11,0 +11,0 @@ }

lib/build-content/jsx/attributes/build-action.js

@@ -7,3 +7,3 @@ function buildAction(toAdd,element) {
    const selector = `[${event}="\${context.counter-1}"]`
-   const addToActions = '$'+`{context.actions.push({selector:\`${selector}\`,event:'${event}',fn:${fn}}) ? '' : ''}`
+   const addToActions = '$'+`{context.actions.push({name:this.name,selector:\`${selector}\`,event:'${event}',fn:${fn}}) ? '' : ''}`
    value = value + addToActions
@@ -10,0 +10,0 @@ element.attributes.push([event,value])

lib/build-content/jsx/attributes/build-prop.js

@@ -8,3 +8,3 @@ const singleProps = ['checked', 'disabled', 'selected']
    if(singleProps.includes(name)) {
-      name = `\${${value} ? ${name} : ''}`
+      name = `\${${value} ? '${name}' : ''}`
       value = undefined
@@ -11,0 +11,0 @@ element.attributes.push([name])

lib/build-content/jsx/attributes/get-attributes.js

@@ -7,3 +7,3 @@ const buildProp = require('./build-prop')
       parsingProp = true; parsingValue = false; prop = ''; value = ''; open = null;
-      while (content[i] === ' ') {i++}
+      while (content[i].trim().length === 0) {i++}
       return i
@@ -22,3 +22,3 @@ }
             add(i)
-         } else if (char === '=' || char === ' ') {
+         } else if (char === '=' || char.trim().length === 0) {
             if (prop.length > 0) {
@@ -25,0 +25,0 @@ parsingProp = false;

lib/build-content/jsx/element.js

@@ -7,10 +7,19 @@ const getAttributes = require('./attributes/get-attributes')
 
-   constructor(content, i) {
-      this.isComponent = /[A-Z]/.test(content[i + 1])
-      while (i < content.length) {
-         i++
-         if (/[A-Za-z0-9.]/.test(content[i]) === false) break
-         this.tagName += content[i]
+   constructor(content, i,componentName) {
+      if(content[i + 1] === '>') {
+         this.isComponent = true
+         this.tagName = ''
+         this.i = i+2
+      } else {
+         this.isComponent = /[A-Z]/.test(content[i + 1])
+         while (i < content.length) {
+            i++
+            if (/[A-Za-z0-9.]/.test(content[i]) === false) break
+            this.tagName += content[i]
+         }
+         if(componentName) {
+            this.attributes.push(['component',`\${'${componentName}'+ (props.key !== undefined ? props.key : \'\')}`])
+         }
+         this.i = getAttributes(content[i], i, this, content)
       }
-      this.i = getAttributes(content[i], i, this, content)
       if (this.selfClosed === false) this.getInner(content)
@@ -24,5 +33,6 @@ }
       let count = 0;
+      const endsWith = close === '</>' ? '<>' : `<${this.tagName}`
       while (this.i < content.length) {
          this.inner += content[this.i]
-         if (this.inner.endsWith(`<${this.tagName}`)) count++
+         if (this.inner.endsWith(endsWith)) count++
          if (this.inner.endsWith(close)) {
@@ -29,0 +39,0 @@ if (count > 0) count--

lib/build-content/jsx/jsx-parser.js

 const Element = require('./element')
 
-function jsxParser(content) {
+function jsxParser(content,componentName) {
    let newContent = ''
@@ -11,3 +11,3 @@ for (let i = 0; i < content.length; i++) {
          if(content[i] === '<') {
-            const element = new Element(content,i)
+            const element = new Element(content,i,componentName)
             i = element.i
@@ -14,0 +14,0 @@ newContent += '`'+element.outer+'`'

lib/context.js

 class Context {
+   Component = class Component {
+      static context
+      constructor(componentName, props, attributes, inner) {
+         this.componentName = componentName
+         this.props = props
+         this.attributes = attributes
+         this.inner = inner
+      }
+
+      updateData(attributes, props, inner) {
+         if (attributes !== this.attributes) this.attributes = attributes;
+         if (props !== this.props) this.props = props
+         if (inner !== this.inner) this.inner = inner
+      }
+
+      createNewElement(rawHtml) {
+         const template = document.createElement('template');
+         template.innerHTML = rawHtml.trim();
+         return template.content.firstChild;
+      }
+
+      updateComponent(oldElement, newElement) {
+         const updatedComponent = oldElement 
+      
+         function cloneTag(element) {
+            const { attributes, tagName } = element
+            const newElement = document.createElement(tagName)
+            for (const { name, value } of attributes) {
+               newElement.setAttribute(name, value)
+            }
+            return newElement
+         }
+      
+         function updateDom(oldNode, newNode) {
+            const oldChildren = new Set(Array.from(oldNode.childNodes));
+            const newChildren = Array.from(newNode.childNodes);
+            newChildren.forEach((element, i) => {
+               if (element.nodeType === Node.TEXT_NODE) oldNode.appendChild(element);
+               else if (element.getAttribute('component')) {
+                  const name = element.getAttribute('component')
+                  const hash = Component.context.hashes[name]
+                  const oldComponent = updatedComponent.querySelector(`[component=${name}]`)
+                  if (oldComponent && oldComponent.hash === hash) {
+                     oldNode.appendChild(oldComponent)
+                     if (oldChildren.has(oldComponent)) oldChildren.delete(oldComponent)
+                     Component.context.excludes.push(name)
+                  } else oldNode.appendChild(element)
+               } else {
+                  const childOldNode = cloneTag(element)
+                  oldNode.appendChild(childOldNode)
+                  updateDom(childOldNode, element)
+               }
+            });
+            oldChildren.forEach(element => element.remove());
+         }
+      
+         oldElement.style.display = 'none'
+         updateDom(oldElement, newElement)
+         oldElement.style.display = ''
+      }
+
+      update(props = this.props, attributes = this.attributes, inner = this.inner) {
+         this.updateData(attributes, props, inner)
+         const selector = `[component=${this.name}]`
+         const element = document.querySelector(selector)
+         const componentFn = Component.context.components[this.componentName]
+         if (element && componentFn) {
+            const newHtml = componentFn(props, attributes, inner, this)
+            const newElement = this.createNewElement(newHtml)
+            if(newHtml.length < 1000) element.replaceWith(newElement)
+            else this.updateComponent(element, newElement)
+            Component.context.runActions()
+            this.element = element
+         }
+      }
+
+      get name() {
+         const key = this.props.key !== undefined ? this.props.key : ''
+         return `${this.componentName}${key}`
+      }
+   }
+
    constructor() {
-      this.counter = 0; 
-      this.actions = []; 
-      this.components = {}; 
-      this.states = {};
+      this.Component.context = this
+      this.counter = 0;
+      this.components = {};
+      this.reset()
    }
+   
+   reset() {
+      this.actions = [];
+      this.hashes = {};
+      this.excludes = [];
+      this.links = [];
+   }
 
-   component(componentName, key) {
-      const selector = `[component=${componentName}${key || ''}]`
-      const element = document.querySelector(selector)
-      return element
+   component(componentName, props, attributes, inner, component) {
+      if (component) component.updateData(attributes, props, inner)
+      else component = new this.Component(componentName, props, attributes, inner)
+      return component
    }
 
+   link(link) {
+      const arr = this.currentPath.split('/')
+      arr.pop()
+      link.split('/').forEach(part => {
+         if(part === '.') return
+         if(part === '..') arr.pop()
+         else arr.push(part)
+      })
+      link = arr.join('/')
+      this.links.push(link)
+   }
+
+   genHash(content) {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(content);
+      let hash = 0, cur = 0;
+      const fns = [n => { hash += n; return 1 }, n => { hash -= n; return 0 }]
+      for (let b of data) { cur = fns[cur](b) }
+      return hash
+   }
+
    runActions() {
-      this.actions.forEach(({ event, fn, selector }) => {
+      this.links.forEach(link => {
+         document.querySelector('head').insertAdjacentHTML('afterend',/*html*/`<link rel="stylesheet" href="${link}">`)
+      });
+      this.actions.forEach(({ name, event, fn, selector }) => {
+         if (this.excludes.includes(name)) return
          const element = document.querySelector(selector);
          if (!element) return
-         if(event === 'load') fn(element)
+         if (event === 'load') fn(element)
          else element.addEventListener(event, fn)
       })
-      this.actions = []
-   }
-
-   modifyResult(result, attributes=[], componentName, props={},inner) {
-      const key = props.key || ''
-      this.states[`${componentName}${key}`] = { attributes, props, inner }
-      if (result.startsWith('<>')) return result.replace(/\<\/?\>/g, '')
-      const curAttributes = [['component',componentName+key],...attributes]
-      return result.replace(/<([\s\S]*?)\>/, (m) => { // get first tag. 
-         const attributes = curAttributes.map(([name,value]) => value ? `${name}="${value}"` : name)
-         // TODO update style and class by adding
-         return m.slice(0, -1) + ' ' + attributes + '>'
-      })
-   }
-   
-   update(componentName, props, attributes, inner) {
-      const key = props.key || ''
-      const selector = `${componentName}${key}`
-      const lastState = this.states[selector]
-      // if(lastState.props === props) return
-      const element = this.component(componentName, key)
-      if(!attributes) attributes = lastState.attributes
-      if(!inner) inner = lastState.inner
-   
-      const componentFn = this.components[componentName]
-      if (element && componentFn) {
-         element.outerHTML = componentFn(props,attributes,inner)
-         this.runActions()
+      for (const name in this.hashes) {
+         const element = document.querySelector(`[component=${name}]`)
+         if (element) element.hash = this.hashes[name]
       }
+      this.reset()
    }
@@ -52,0 +142,0 @@ }

lib/get-bundle.js

@@ -1,2 +0,1 @@
-const Context = require('./context')
 function buildFn(fnBody,path) {
@@ -11,12 +10,11 @@ return /*js*/`modules['${path}'] = (function (){
 
-function getBundle({contents, keys}, contextName = 'context') {
-   const fn = new Function(/*js*/`
+function getBundle({contents, keys}, {contextName, bundleName}) {
+   const fn = /*js*/`function ${bundleName}(data = {}) {
    const modules = {};
    function require(path) { return modules[path] || null };
-   ${Context.toString()}
    const ${contextName} = new Context();
    ${keys.map((path, i) => buildFn(contents[path],path)).join('\n')}
-   modules['${keys[keys.length-1]}']()
+   modules['${keys[keys.length-1]}'](data)
    context.runActions()
-`)
+}`
    return fn
@@ -23,0 +21,0 @@ }

lib/index.js

@@ -5,20 +5,47 @@ const build = require('./build')
 const UglifyJS = require("uglify-js");
+const Context = require('./context')
+class Render {
+   static stringContext = Context.toString()
+   static minifiedStringContext = UglifyJS.minify(Context.toString()).code
+   static contextName = 'context';
+   static minified = false;
+   static bundleName = 'renderedBundle'
+   static cache = {};
+   static render(path,data,minified) {
+      return new Render(path,minified).build(data)
+   }
+   constructor(path,minified = Render.minified) {
+      if(Render.cache[path]) {
+         const obj = Render.cache[path];
+         obj.minified = minified
+         return obj
+      }
+      this.minified = minified
+      Render.cache[path] = this
+      this.getContent(path)
+   }
+   
+   getContent(path) {
+      const modules = new Require(path)
+      modules.getContent()
+      const { resultFn, context } = build(modules,Render.contextName)
+      this.resultFn = resultFn
+      this.bundleFn = getBundle(modules,Render)
+      if(this.minified) this.bundleFn = UglifyJS.minify(this.bundleFn).code
+   }
 
-const cache = {}
-function render(path, data = {},contextName = 'context',minified = false) {
-   if (cache[path]) {
-      const { resultFn, bundle } = cache[path]
-      const rawHtml = resultFn(data).trim()
-      return { rawHtml, bundle }
+   build(data={}) {
+      this.rawHtml = this.resultFn(data).trim()
+      this.callBundle = `${Render.bundleName}(${JSON.stringify(data)})`
+      return this
    }
-   const modules = new Require(path)
-   modules.getContent()
-   const { resultFn, context } = build(modules,contextName)
-   const rawHtml = resultFn(data).trim()
-   let bundle = '(' + getBundle(modules,contextName).toString() + ')()'
-   if(minified) bundle = UglifyJS.minify(bundle).code
-   cache[path] = { resultFn, bundle }
-   return { rawHtml, bundle }
+
+   get bundle() {
+      return '\n'+[this.context,this.bundleFn,this.callBundle].join('\n')
+   }
+   get context() {
+      return this.minified ? Render.minifiedStringContext : Render.stringContext
+   }
 }
 
-module.exports = render
+module.exports = Render

package.json

 {
   "name": "als-render",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "index.js",
@@ -5,0 +5,0 @@ "keywords": [

readme.md

 # ALS-Render
 
-**Alpha testing**
+**Development stage**
 **Not for production use**
@@ -22,2 +22,3 @@
 
+
 ## Usage
@@ -117,2 +118,30 @@
 
-* **updating** - Each component has `this.update(state,attributes,inner)`
+* **updating** - Each component has `this.update(props,attributes,inner)`
+
+* **context.link** - by using `context.link(href)` you can add link stylesheet to html
+
+## Counter example
+
+App.js
+```js
+const Counter = require('./Counter')
+function App({count}) {
+   return (<div>
+      <Counter count={count} />
+   </div>)
+}
+module.exports = App
+```
+
+Counter.js
+```js
+function Counter({count}) {
+   return (<div>
+      <button onclick={() => this.update({count:count+1})}>Increase</button>
+      <span>{count}</span>
+      <button onclick={() => this.update({count:count-1})}>Decrease</button>
+   </div>)
+}
+
+module.exports = Counter
+```

render.js

@@ -191,51 +191,141 @@ const Require = (function(){
 class Context {
+   Component = class Component {
+      static context
+      constructor(componentName, props, attributes, inner) {
+         this.componentName = componentName
+         this.props = props
+         this.attributes = attributes
+         this.inner = inner
+      }
+
+      updateData(attributes, props, inner) {
+         if (attributes !== this.attributes) this.attributes = attributes;
+         if (props !== this.props) this.props = props
+         if (inner !== this.inner) this.inner = inner
+      }
+
+      createNewElement(rawHtml) {
+         const template = document.createElement('template');
+         template.innerHTML = rawHtml.trim();
+         return template.content.firstChild;
+      }
+
+      updateComponent(oldElement, newElement) {
+         const updatedComponent = oldElement 
+      
+         function cloneTag(element) {
+            const { attributes, tagName } = element
+            const newElement = document.createElement(tagName)
+            for (const { name, value } of attributes) {
+               newElement.setAttribute(name, value)
+            }
+            return newElement
+         }
+      
+         function updateDom(oldNode, newNode) {
+            const oldChildren = new Set(Array.from(oldNode.childNodes));
+            const newChildren = Array.from(newNode.childNodes);
+            newChildren.forEach((element, i) => {
+               if (element.nodeType === Node.TEXT_NODE) oldNode.appendChild(element);
+               else if (element.getAttribute('component')) {
+                  const name = element.getAttribute('component')
+                  const hash = Component.context.hashes[name]
+                  const oldComponent = updatedComponent.querySelector(`[component=${name}]`)
+                  if (oldComponent && oldComponent.hash === hash) {
+                     oldNode.appendChild(oldComponent)
+                     if (oldChildren.has(oldComponent)) oldChildren.delete(oldComponent)
+                     Component.context.excludes.push(name)
+                  } else oldNode.appendChild(element)
+               } else {
+                  const childOldNode = cloneTag(element)
+                  oldNode.appendChild(childOldNode)
+                  updateDom(childOldNode, element)
+               }
+            });
+            oldChildren.forEach(element => element.remove());
+         }
+      
+         oldElement.style.display = 'none'
+         updateDom(oldElement, newElement)
+         oldElement.style.display = ''
+      }
+
+      update(props = this.props, attributes = this.attributes, inner = this.inner) {
+         this.updateData(attributes, props, inner)
+         const selector = `[component=${this.name}]`
+         const element = document.querySelector(selector)
+         const componentFn = Component.context.components[this.componentName]
+         if (element && componentFn) {
+            const newHtml = componentFn(props, attributes, inner, this)
+            const newElement = this.createNewElement(newHtml)
+            if(newHtml.length < 1000) element.replaceWith(newElement)
+            else this.updateComponent(element, newElement)
+            Component.context.runActions()
+            this.element = element
+         }
+      }
+
+      get name() {
+         const key = this.props.key !== undefined ? this.props.key : ''
+         return `${this.componentName}${key}`
+      }
+   }
+
    constructor() {
-      this.counter = 0; 
-      this.actions = []; 
-      this.components = {}; 
-      this.states = {};
+      this.Component.context = this
+      this.counter = 0;
+      this.components = {};
+      this.reset()
    }
+   
+   reset() {
+      this.actions = [];
+      this.hashes = {};
+      this.excludes = [];
+      this.links = [];
+   }
 
-   component(componentName, key) {
-      const selector = `[component=${componentName}${key || ''}]`
-      const element = document.querySelector(selector)
-      return element
+   component(componentName, props, attributes, inner, component) {
+      if (component) component.updateData(attributes, props, inner)
+      else component = new this.Component(componentName, props, attributes, inner)
+      return component
    }
 
+   link(link) {
+      const arr = this.currentPath.split('/')
+      arr.pop()
+      link.split('/').forEach(part => {
+         if(part === '.') return
+         if(part === '..') arr.pop()
+         else arr.push(part)
+      })
+      link = arr.join('/')
+      this.links.push(link)
+   }
+
+   genHash(content) {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(content);
+      let hash = 0, cur = 0;
+      const fns = [n => { hash += n; return 1 }, n => { hash -= n; return 0 }]
+      for (let b of data) { cur = fns[cur](b) }
+      return hash
+   }
+
    runActions() {
-      this.actions.forEach(({ event, fn, selector }) => {
+      this.links.forEach(link => {
+         document.querySelector('head').insertAdjacentHTML('afterend',/*html*/`<link rel="stylesheet" href="${link}">`)
+      });
+      this.actions.forEach(({ name, event, fn, selector }) => {
+         if (this.excludes.includes(name)) return
          const element = document.querySelector(selector);
          if (!element) return
-         if(event === 'load') fn(element)
+         if (event === 'load') fn(element)
          else element.addEventListener(event, fn)
       })
-      this.actions = []
-   }
-
-   modifyResult(result, attributes=[], componentName, props={},inner) {
-      const key = props.key || ''
-      this.states[`${componentName}${key}`] = { attributes, props, inner }
-      if (result.startsWith('<>')) return result.replace(/\<\/?\>/g, '')
-      const curAttributes = [['component',componentName+key],...attributes]
-      return result.replace(/<([\s\S]*?)\>/, (m) => { // get first tag. 
-         const attributes = curAttributes.map(([name,value]) => value ? `${name}="${value}"` : name)
-         // TODO update style and class by adding
-         return m.slice(0, -1) + ' ' + attributes + '>'
-      })
-   }
-   
-   update(componentName, props, attributes, inner) {
-      const key = props.key || ''
-      const selector = `${componentName}${key}`
-      const lastState = this.states[selector]
-      // if(lastState.props === props) return
-      const element = this.component(componentName, key)
-      if(!attributes) attributes = lastState.attributes
-      if(!inner) inner = lastState.inner
-   
-      const componentFn = this.components[componentName]
-      if (element && componentFn) {
-         element.outerHTML = componentFn(props,attributes,inner)
-         this.runActions()
+      for (const name in this.hashes) {
+         const element = document.querySelector(`[component=${name}]`)
+         if (element) element.hash = this.hashes[name]
       }
+      this.reset()
    }
@@ -299,22 +389,12 @@ }
    if(originalFn === null) return content
-   const newFunction = /*js*/`function ${componentName}(props={},attributes=[],inner) {
-      const selector = '${componentName}'+(props.key || '')
-      const main = {
-         selector,
-         update(props,$attributes=attributes,$inner = inner) {
-            context.update('${componentName}',props,attributes,inner)
-         },
-         get element() {return document.querySelector(selector)}
-      }
+   const newFunction = /*js*/`function ${componentName}(props={},attributes=[],inner,component) {
       let originalFn = ${originalFn}
-      originalFn = originalFn.bind(main)
-      let result = originalFn(props,inner)
-      return context.modifyResult(result,attributes,'${componentName}',props,inner)
+      component = context.component('${componentName}',props,attributes,inner,component)
+      originalFn = originalFn.bind(component)
+      const result = originalFn(props,inner)
+      context.hashes[component.name] = context.genHash(result)
+      return result
    }
    context.components.${componentName} = ${componentName}
-   context.components.${componentName}.update = (props,attributes,inner) => {
-      context.update('${componentName}',props,attributes,inner)
-   }
    `
-
    return content.replace(originalFn,newFunction)
@@ -383,3 +463,3 @@ }
    const selector = `[${event}="\${context.counter-1}"]`
-   const addToActions = '$'+`{context.actions.push({selector:\`${selector}\`,event:'${event}',fn:${fn}}) ? '' : ''}`
+   const addToActions = '$'+`{context.actions.push({name:this.name,selector:\`${selector}\`,event:'${event}',fn:${fn}}) ? '' : ''}`
    value = value + addToActions
@@ -402,3 +482,3 @@ element.attributes.push([event,value])
    if(singleProps.includes(name)) {
-      name = `\${${value} ? ${name} : ''}`
+      name = `\${${value} ? '${name}' : ''}`
       value = undefined
@@ -422,3 +502,3 @@ element.attributes.push([name])
       parsingProp = true; parsingValue = false; prop = ''; value = ''; open = null;
-      while (content[i] === ' ') {i++}
+      while (content[i].trim().length === 0) {i++}
       return i
@@ -437,3 +517,3 @@ }
             add(i)
-         } else if (char === '=' || char === ' ') {
+         } else if (char === '=' || char.trim().length === 0) {
             if (prop.length > 0) {
@@ -496,10 +576,19 @@ parsingProp = false;
 
-   constructor(content, i) {
-      this.isComponent = /[A-Z]/.test(content[i + 1])
-      while (i < content.length) {
-         i++
-         if (/[A-Za-z0-9.]/.test(content[i]) === false) break
-         this.tagName += content[i]
+   constructor(content, i,componentName) {
+      if(content[i + 1] === '>') {
+         this.isComponent = true
+         this.tagName = ''
+         this.i = i+2
+      } else {
+         this.isComponent = /[A-Z]/.test(content[i + 1])
+         while (i < content.length) {
+            i++
+            if (/[A-Za-z0-9.]/.test(content[i]) === false) break
+            this.tagName += content[i]
+         }
+         if(componentName) {
+            this.attributes.push(['component',`\${'${componentName}'+ (props.key !== undefined ? props.key : \'\')}`])
+         }
+         this.i = getAttributes(content[i], i, this, content)
       }
-      this.i = getAttributes(content[i], i, this, content)
       if (this.selfClosed === false) this.getInner(content)
@@ -513,5 +602,6 @@ }
       let count = 0;
+      const endsWith = close === '</>' ? '<>' : `<${this.tagName}`
       while (this.i < content.length) {
          this.inner += content[this.i]
-         if (this.inner.endsWith(`<${this.tagName}`)) count++
+         if (this.inner.endsWith(endsWith)) count++
          if (this.inner.endsWith(close)) {
@@ -557,3 +647,3 @@ if (count > 0) count--
 
-function jsxParser(content) {
+function jsxParser(content,componentName) {
    let newContent = ''
@@ -566,3 +656,3 @@ for (let i = 0; i < content.length; i++) {
          if(content[i] === '<') {
-            const element = new Element(content,i)
+            const element = new Element(content,i,componentName)
             i = element.i
@@ -591,4 +681,4 @@ newContent += '`'+element.outer+'`'
    const componentName = path.split('/').pop().replace(/\.js$/,'')
-
-   const newContent = jsxParser(removeComments(content))
+   const curPath = `context.currentPath = '${path}';\n`
+   const newContent = curPath+jsxParser(removeComments(content),componentName)
    return buildComponent(newContent,componentName)
@@ -649,4 +739,4 @@ }
    } catch(error) {
-      parseError(error, {"/lib/context.js":{"from":4,"to":62},"/lib/build-content/remove-comments.js":{"from":63,"to":74},"/lib/build-content/build-component/get-function.js":{"from":75,"to":106},"/lib/build-content/build-component/index.js":{"from":107,"to":140},"/lib/build-content/jsx/outer.js":{"from":141,"to":163},"/lib/build-content/jsx/breckets.js":{"from":164,"to":188},"/lib/build-content/jsx/attributes/build-action.js":{"from":189,"to":205},"/lib/build-content/jsx/attributes/build-prop.js":{"from":206,"to":225},"/lib/build-content/jsx/attributes/get-attributes.js":{"from":226,"to":297},"/lib/build-content/jsx/element.js":{"from":298,"to":360},"/lib/build-content/jsx/jsx-parser.js":{"from":361,"to":388},"/lib/build-content/index.js":{"from":389,"to":405},"/lib/build.js":{"from":406,"to":423},"/lib/browser.js":{"from":424,"to":446}}, 446)
+      parseError(error, {"/lib/context.js":{"from":4,"to":152},"/lib/build-content/remove-comments.js":{"from":153,"to":164},"/lib/build-content/build-component/get-function.js":{"from":165,"to":196},"/lib/build-content/build-component/index.js":{"from":197,"to":220},"/lib/build-content/jsx/outer.js":{"from":221,"to":243},"/lib/build-content/jsx/breckets.js":{"from":244,"to":268},"/lib/build-content/jsx/attributes/build-action.js":{"from":269,"to":285},"/lib/build-content/jsx/attributes/build-prop.js":{"from":286,"to":305},"/lib/build-content/jsx/attributes/get-attributes.js":{"from":306,"to":377},"/lib/build-content/jsx/element.js":{"from":378,"to":450},"/lib/build-content/jsx/jsx-parser.js":{"from":451,"to":478},"/lib/build-content/index.js":{"from":479,"to":495},"/lib/build.js":{"from":496,"to":513},"/lib/browser.js":{"from":514,"to":536}}, 536)
    }
 })()

render.min.js

@@ -9,20 +9,12 @@ let Require=function(){function i(t,e){if(o.contents[t]&&o.contents[t].children.includes(e))throw`cyclic dependency between ${e} and `+t}function c(t,e){var n,t=t.split("/"),r=[];for(n of[...e.split("/").slice(0,-1),...t])".."===n?0<r.length&&".."!==r[r.length-1]?r.pop():r.push(n):"."!==n&&r.push(n);e=r.join("/");return e.endsWith(".js")?e:e+".js"}async function u(t,e="text"){t=await fetch(t);if(t.ok)return t[e]();throw new Error("HTTP error! status: "+t.status)}async function t({contents:r,fullPath:t},a){let o=async s=>{if(void 0===r[s]){if(!a.contents[s]){let t=await u(s),r=[],o=[];t=t.replace(/^(?!\/\/|\/\*.*\*\/).*require\(["'`](.*)["'`]\)/gm,(t,e)=>{var n;return e.startsWith(".")?(i(n=c(e,s),s),r.push(n),t.replace(e,n)):(o.push({match:t,modulePath:e}),t)}),t=await async function(t,e,n){if(0!==t.length)for(var{match:r,modulePath:o}of t){var s=`/node_modules/${o}/package.json`;(await fetch(s,{method:"HEAD"})).ok?({main:s="index.js"}=await u(s,"json"),i(s=`/node_modules/${o}/`+s,o),e.push(s),n=n.replace(r,r.replace(o,s))):console.warn(`The module "${o}" can't be imported and will be replaced with null`)}return n}(o,r,t),a.contents[s]={content:t,children:r}}let{content:t,children:e}=a.contents[s];r[s]=t;for(var n of e)await o(n)}};await o(t)}class o{static contents={};static async getModule(t,e,n,r){t=new o(t);return await t.getContent(),t.build(r,e,n)}constructor(t){this.contents={},this.path=t,this.fullPath=c(t,location.pathname),this.contentReady=!1}async getContent(){return this.contentReady||(await t(this,o),this.keys=function(e,n){let r=new Set,o=t=>{t.forEach(t=>{e[t]&&(o(n.contents[t].children),r.add(t))})};return o(Object.keys(e).reverse()),Array.from(r)}(this.contents,o),this.contentReady=!0),this}build(t={},e={},r="context"){var{fn:r,modulesLines:o,curLastLine:s}=function(t="context",r){let o={},s=3;var e=r.keys.map((t,e)=>{let n=`modules['${t}'] = (function (){
 `+e),modulesLines:o,curLastLine:s}}(r,this);try{return r(t,e)}catch(n){{r=n;var a=o;var i=s;let[t,...e]=r.stack.split("\n");throw e=e.map(t=>{var e=t.match(/<anonymous>:(\d*):(\d*)\)$/);if(e){let n=Number(e[1]);if(n+1!==i){var r,o,e=Number(e[2]),s=Object.entries(a).filter(([,{from:t,to:e}])=>n>=t&&n<=e);if(0!==s.length)return[s,{from:r,to:o}]=s[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${s} (${n-r-2}:${e})`}}}).filter(Boolean),r.stack=t+"\n"+e.join("\n"),r;return}}}}return o}(),require=Require.getModule;
-const render = (()=>{function t(e,t){function l(t){return e[t]||null}var n;return e["/lib/context.js"]=((n={exports:{}}).exports=class{constructor(){this.counter=0,this.actions=[],this.components={},this.states={}}component(t,e){return document.querySelector(`[component=${t}${e||""}]`)}runActions(){this.actions.forEach(({event:t,fn:e,selector:n})=>{n=document.querySelector(n);n&&("load"===t?e(n):n.addEventListener(t,e))}),this.actions=[]}modifyResult(t,e=[],n,r={},s){var i=r.key||"";if(this.states[""+n+i]={attributes:e,props:r,inner:s},t.startsWith("<>"))return t.replace(/\<\/?\>/g,"");let o=[["component",n+i],...e];return t.replace(/<([\s\S]*?)\>/,t=>{var e=o.map(([t,e])=>e?t+`="${e}"`:t);return t.slice(0,-1)+" "+e+">"})}update(t,e,n,r){var s=e.key||"",i=this.states[""+t+s],s=this.component(t,s),i=(n=n||i.attributes,r=r||i.inner,this.components[t]);s&&i&&(s.outerHTML=i(e,n,r),this.runActions())}},n.exports),e["/lib/build-content/remove-comments.js"]=((n={exports:{}}).exports=function(t){return t.replace(/\/\/.*(?=\n|$)/g,"").replace(/\{?\/\*[\s\S]*?\*\/\}?/g,"")},n.exports),e["/lib/build-content/build-component/get-function.js"]=((n={exports:{}}).exports=function(r,t){var e="[\\s\\S]*?",t=new RegExp(`^\\s*?function\\s*?${t}\\s*?\\(${e}\\)${e}{`,"m");if(!(e=r.match(t)))return null;let s=0,i;for(let n=e.index+e[0].length;n<r.length;n++){let t=r[n],e=r[n-1];if(t.match(/["'`]/)&&"\\"!==e)for(;e=r[n],r[++n]!==t&&"\\"!==e;);if("{"===t)s++;else if("}"===t)if(0<s)s--;else if(0===s){i=n+1;break}}return r.slice(e.index,i)},n.exports),e["/lib/build-content/build-component/index.js"]=(()=>{var t={exports:{}};let r=l("/lib/build-content/build-component/get-function.js");return t.exports=function(t,e){var n=r(t,e);return null===n?t:t.replace(n,`function ${e}(props={},attributes=[],inner) {
-      const selector = '${e}'+(props.key || '')
-      const main = {
-         selector,
-         update(props,$attributes=attributes,$inner = inner) {
-            context.update('${e}',props,attributes,inner)
-         },
-         get element() {return document.querySelector(selector)}
-      }
+const render = (()=>{function t(e,t){function n(t){return e[t]||null}var s;return e["/lib/context.js"]=(()=>{var t={exports:{}};class e{Component=class c{static context;constructor(t,e,n,s){this.componentName=t,this.props=e,this.attributes=n,this.inner=s}updateData(t,e,n){t!==this.attributes&&(this.attributes=t),e!==this.props&&(this.props=e),n!==this.inner&&(this.inner=n)}createNewElement(t){var e=document.createElement("template");return e.innerHTML=t.trim(),e.content.firstChild}updateComponent(t,e){let u=t;t.style.display="none",function i(o,t){let l=new Set(Array.from(o.childNodes));Array.from(t.childNodes).forEach((t,e)=>{var n,s,r;t.nodeType===Node.TEXT_NODE?o.appendChild(t):t.getAttribute("component")?(n=t.getAttribute("component"),r=c.context.hashes[n],(s=u.querySelector(`[component=${n}]`))&&s.hash===r?(o.appendChild(s),l.has(s)&&l.delete(s),c.context.excludes.push(n)):o.appendChild(t)):(r=(t=>{var e,n,{attributes:t,tagName:s}=t,r=document.createElement(s);for({name:e,value:n}of t)r.setAttribute(e,n);return r})(t),o.appendChild(r),i(r,t))}),l.forEach(t=>t.remove())}(t,e),t.style.display=""}update(t=this.props,e=this.attributes,n=this.inner){this.updateData(e,t,n);var s=`[component=${this.name}]`,s=document.querySelector(s),r=c.context.components[this.componentName];s&&r&&(r=r(t,e,n,this),t=this.createNewElement(r),r.length<1e3?s.replaceWith(t):this.updateComponent(s,t),c.context.runActions(),this.element=s)}get name(){var t=void 0!==this.props.key?this.props.key:"";return""+this.componentName+t}};constructor(){(this.Component.context=this).counter=0,this.components={},this.reset()}reset(){this.actions=[],this.hashes={},this.excludes=[],this.links=[]}component(t,e,n,s,r){return r?r.updateData(n,e,s):r=new this.Component(t,e,n,s),r}link(t){let e=this.currentPath.split("/");e.pop(),t.split("/").forEach(t=>{"."!==t&&(".."===t?e.pop():e.push(t))}),t=e.join("/"),this.links.push(t)}genHash(t){t=(new TextEncoder).encode(t);let e=0,n=0;var s,r=[t=>(e+=t,1),t=>(e-=t,0)];for(s of t)n=r[n](s);return e}runActions(){for(var t in this.links.forEach(t=>{document.querySelector("head").insertAdjacentHTML("afterend",`<link rel="stylesheet" href="${t}">`)}),this.actions.forEach(({name:t,event:e,fn:n,selector:s})=>{this.excludes.includes(t)||(t=document.querySelector(s))&&("load"===e?n(t):t.addEventListener(e,n))}),this.hashes){var e=document.querySelector(`[component=${t}]`);e&&(e.hash=this.hashes[t])}this.reset()}}return t.exports=e,t.exports})(),e["/lib/build-content/remove-comments.js"]=((s={exports:{}}).exports=function(t){return t.replace(/\/\/.*(?=\n|$)/g,"").replace(/\{?\/\*[\s\S]*?\*\/\}?/g,"")},s.exports),e["/lib/build-content/build-component/get-function.js"]=((s={exports:{}}).exports=function(s,t){var e="[\\s\\S]*?",t=new RegExp(`^\\s*?function\\s*?${t}\\s*?\\(${e}\\)${e}{`,"m");if(!(e=s.match(t)))return null;let r=0,i;for(let n=e.index+e[0].length;n<s.length;n++){let t=s[n],e=s[n-1];if(t.match(/["'`]/)&&"\\"!==e)for(;e=s[n],s[++n]!==t&&"\\"!==e;);if("{"===t)r++;else if("}"===t)if(0<r)r--;else if(0===r){i=n+1;break}}return s.slice(e.index,i)},s.exports),e["/lib/build-content/build-component/index.js"]=(()=>{var t={exports:{}};let s=n("/lib/build-content/build-component/get-function.js");return t.exports=function(t,e){var n=s(t,e);return null===n?t:t.replace(n,`function ${e}(props={},attributes=[],inner,component) {
       let originalFn = ${n}
-      originalFn = originalFn.bind(main)
-      let result = originalFn(props,inner)
-      return context.modifyResult(result,attributes,'${e}',props,inner)
+      component = context.component('${e}',props,attributes,inner,component)
+      originalFn = originalFn.bind(component)
+      const result = originalFn(props,inner)
+      context.hashes[component.name] = context.genHash(result)
+      return result
    }
    context.components.${e} = ${e}
-   context.components.${e}.update = (props,attributes,inner) => {
-      context.update('${e}',props,attributes,inner)
-   }
-   `)},t.exports})(),e["/lib/build-content/jsx/outer.js"]=((n={exports:{}}).exports=function(t){let{tagName:e,selfClosed:n,attributes:r,props:s,isComponent:i,rest:o,inner:l}=t,u="";return i?(s="{"+s.map(([t,e])=>t+":"+e).join(",")+(o?","+o:"")+"}",u="${"+`${e}(${s},${JSON.stringify(r)},\`${l}\`)`+"}"):(s=s.map(([t,e])=>[t,"${"+e+"}"]),t=[...r,...s].map(([t,e])=>e?t+`="${e}"`:t).join(" "),u=`<${e}${t.length?" "+t:""}>`,n||(u+=l+`</${e}>`)),u},n.exports),e["/lib/build-content/jsx/breckets.js"]=((n={exports:{}}).exports=function(t,e){let n=0,r=null;for(;t<e.length;)if(t++,null===r&&/["'`]/.test(e[t]))r=e[t];else if(r)e[t]===r&&"\\"!==e[t-1]&&(r=null);else if("{"===e[t])n++;else if("}"===e[t]){if(!(0<n))break;n--}return++t},n.exports),e["/lib/build-content/jsx/attributes/build-action.js"]=((n={exports:{}}).exports=function(t,e){var[t,n]=t,t=t.split("on")[1].toLowerCase(),r=n,n="${context.counter++}";e.attributes.push([t,n+="$"+`{context.actions.push({selector:\`${`[${t}="\${context.counter-1}"]`}\`,event:'${t}',fn:${r}}) ? '' : ''}`])},n.exports),e["/lib/build-content/jsx/attributes/build-prop.js"]=(()=>{var t={exports:{}};let i=["checked","disabled","selected"],o=l("/lib/build-content/jsx/attributes/build-action.js");return t.exports=function(n,r,s){if(n){let[t,e]=n;"className"===t&&(t="class"),i.includes(t)?(t=`\${${e} ? ${t} : ''}`,e=void 0,s.attributes.push([t])):"props"===r&&t.startsWith("on")?o(n,s):s[r].push([t,e])}},t.exports})(),e["/lib/build-content/jsx/attributes/get-attributes.js"]=(()=>{var t={exports:{}};let a=l("/lib/build-content/jsx/attributes/build-prop.js");return t.exports=function(t,e,r,s){let i="",o="",l=!0,u=!1,c,n=0;function b(t,e,n="attributes"){for(a(e,n,r),l=!0,u=!1,i="",o="",c=null;" "===s[t];)t++;return t}for(;">"!==t&&!(e>=s.length);){if(l)if("{"===t){for(;e<s.length&&"}"!==(t=s[++e]);)r.rest+=t;b(e)}else if("="===t||" "===t)0<i.length&&(l=!1,u=!0);else{if(">"===s[e+1]){"/"===t?r.selfClosed=!0:""!==i&&r.attributes.push([i+t]),e++;break}i+=t}else u&&(c?"{"===c?(o+=t,"{"===t?n++:"}"===t&&(0<n?n--:e=b(e,[i,o.slice(0,-1)],"props"))):"\\"!==s[e-1]&&t===c?e=b(e,[i,o]):o+=t:/["'`{]/.test(t)?c=t:/[a-zA-Z]/.test(t)&&(""!==i&&r.attributes.push([i]),l=!0,u=!1,i=t));">"===(t=s[++e])&&u&&(o+=t,t=s[++e])}return++e},t.exports})(),e["/lib/build-content/jsx/element.js"]=(()=>{var t={exports:{}};let n=l("/lib/build-content/jsx/attributes/get-attributes.js"),s=l("/lib/build-content/jsx/breckets.js"),e=l("/lib/build-content/jsx/outer.js");class i{tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(t,e){for(this.isComponent=/[A-Z]/.test(t[e+1]);e<t.length&&!1!==/[A-Za-z0-9.]/.test(t[++e]);)this.tagName+=t[e];this.i=n(t[e],e,this,t),!1===this.selfClosed&&this.getInner(t)}get outer(){return e(this)}getInner(t){var e=`</${this.tagName}>`;let n=0;for(;this.i<t.length;){if(this.inner+=t[this.i],this.inner.endsWith("<"+this.tagName)&&n++,this.inner.endsWith(e)){if(!(0<n)){this.inner=this.inner.slice(0,-e.length).trim();break}n--}this.i++}this.buildInner()}buildInner(){let e="";if(!(this.inner.trim().length<2)&&(this.inner.includes("<")||this.inner.includes("{"))){for(let t=0;t<this.inner.length;t++){var n,r;"<"===this.inner[t]?(n=new i(this.inner,t),e+=n.outer,t=n.i):"{"===this.inner[t]?(n=t,t=s(t,this.inner),r=this.inner.slice(n,t),e+="$"+i.jsxParser(r)):e+=this.inner[t]}this.inner=e}}}return t.exports=i,t.exports})(),e["/lib/build-content/jsx/jsx-parser.js"]=(()=>{var t={exports:{}};let i=l("/lib/build-content/jsx/element.js");function e(e){let n="";for(let t=0;t<e.length;t++)if("("===e[t]){var r=t;for(t++;0===e[t].trim().length;)t++;if("<"===e[t]){var s=new i(e,t);for(t=s.i,n+="`"+s.outer+"`";")"!==e[t];)t++}else n+=e.slice(r,t+1)}else n+=e[t];return n}return i.jsxParser=e,t.exports=e,t.exports})(),e["/lib/build-content/index.js"]=(()=>{var t={exports:{}};let n=l("/lib/build-content/jsx/jsx-parser.js"),r=l("/lib/build-content/build-component/index.js"),s=l("/lib/build-content/remove-comments.js");return t.exports=function(t,e){return e=e.split("/").pop().replace(/\.js$/,""),t=n(s(t)),r(t,e)},t.exports})(),e["/lib/build.js"]=(()=>{var t={exports:{}};let s=l("/lib/build-content/index.js"),i=l("/lib/context.js");return t.exports=function(t,e="context"){var n,r=new i;for(n in t.contents)t.contents[n]=s(t.contents[n],n);return{resultFn:t.build({},r,e),context:r}},t.exports})(),e["/lib/browser.js"]=(()=>{var t={exports:{}};let s=l("/lib/build.js");return t.exports=async function(t,e="body",n={},r){await(t=new Require(t)).getContent();var{resultFn:t,context:r}=s(t,r);return e&&(e=document.querySelector(e))&&(e.innerHTML=t(n).trim(),r.runActions()),r},t.exports})(),e["/lib/browser.js"]}{var e;let r=new Function("return "+"{}")();(function t(e){for(var n in e)"function"==typeof e[n]&&e[n].name===Obj.recursiveName?e[n]=e[n](r):null!==e[n]&&"object"==typeof e[n]&&t(e[n])})(r),r}try{t({})}catch(n){{var r=n;var o={"/lib/context.js":{from:4,to:62},"/lib/build-content/remove-comments.js":{from:63,to:74},"/lib/build-content/build-component/get-function.js":{from:75,to:106},"/lib/build-content/build-component/index.js":{from:107,to:140},"/lib/build-content/jsx/outer.js":{from:141,to:163},"/lib/build-content/jsx/breckets.js":{from:164,to:188},"/lib/build-content/jsx/attributes/build-action.js":{from:189,to:205},"/lib/build-content/jsx/attributes/build-prop.js":{from:206,to:225},"/lib/build-content/jsx/attributes/get-attributes.js":{from:226,to:297},"/lib/build-content/jsx/element.js":{from:298,to:360},"/lib/build-content/jsx/jsx-parser.js":{from:361,to:388},"/lib/build-content/index.js":{from:389,to:405},"/lib/build.js":{from:406,to:423},"/lib/browser.js":{from:424,to:446}};var l=446;let[t,...e]=r.stack.split("\n");throw e=e.map(t=>{var e=t.match(/<anonymous>:(\d*):(\d*)\)$/);if(e){let n=Number(e[1]);if(n+1!==l){var r,s,e=Number(e[2]),i=Object.entries(o).filter(([,{from:t,to:e}])=>n>=t&&n<=e);if(0!==i.length)return[i,{from:r,to:s}]=i[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${i} (${n-r-2}:${e})`}}}).filter(Boolean),r.stack=t+"\n"+e.join("\n"),r;return}}})();
+   `)},t.exports})(),e["/lib/build-content/jsx/outer.js"]=((s={exports:{}}).exports=function(t){let{tagName:e,selfClosed:n,attributes:s,props:r,isComponent:i,rest:o,inner:l}=t,u="";return i?(r="{"+r.map(([t,e])=>t+":"+e).join(",")+(o?","+o:"")+"}",u="${"+`${e}(${r},${JSON.stringify(s)},\`${l}\`)`+"}"):(r=r.map(([t,e])=>[t,"${"+e+"}"]),t=[...s,...r].map(([t,e])=>e?t+`="${e}"`:t).join(" "),u=`<${e}${t.length?" "+t:""}>`,n||(u+=l+`</${e}>`)),u},s.exports),e["/lib/build-content/jsx/breckets.js"]=((s={exports:{}}).exports=function(t,e){let n=0,s=null;for(;t<e.length;)if(t++,null===s&&/["'`]/.test(e[t]))s=e[t];else if(s)e[t]===s&&"\\"!==e[t-1]&&(s=null);else if("{"===e[t])n++;else if("}"===e[t]){if(!(0<n))break;n--}return++t},s.exports),e["/lib/build-content/jsx/attributes/build-action.js"]=((s={exports:{}}).exports=function(t,e){var[t,n]=t,t=t.split("on")[1].toLowerCase(),s=n,n="${context.counter++}";e.attributes.push([t,n+="$"+`{context.actions.push({name:this.name,selector:\`${`[${t}="\${context.counter-1}"]`}\`,event:'${t}',fn:${s}}) ? '' : ''}`])},s.exports),e["/lib/build-content/jsx/attributes/build-prop.js"]=(()=>{var t={exports:{}};let i=["checked","disabled","selected"],o=n("/lib/build-content/jsx/attributes/build-action.js");return t.exports=function(n,s,r){if(n){let[t,e]=n;"className"===t&&(t="class"),i.includes(t)?(t=`\${${e} ? '${t}' : ''}`,e=void 0,r.attributes.push([t])):"props"===s&&t.startsWith("on")?o(n,r):r[s].push([t,e])}},t.exports})(),e["/lib/build-content/jsx/attributes/get-attributes.js"]=(()=>{var t={exports:{}};let p=n("/lib/build-content/jsx/attributes/build-prop.js");return t.exports=function(t,e,s,r){let i="",o="",l=!0,u=!1,c,n=0;function a(t,e,n="attributes"){for(p(e,n,s),l=!0,u=!1,i="",o="",c=null;0===r[t].trim().length;)t++;return t}for(;">"!==t&&!(e>=r.length);){if(l)if("{"===t){for(;e<r.length&&"}"!==(t=r[++e]);)s.rest+=t;a(e)}else if("="===t||0===t.trim().length)0<i.length&&(l=!1,u=!0);else{if(">"===r[e+1]){"/"===t?s.selfClosed=!0:""!==i&&s.attributes.push([i+t]),e++;break}i+=t}else u&&(c?"{"===c?(o+=t,"{"===t?n++:"}"===t&&(0<n?n--:e=a(e,[i,o.slice(0,-1)],"props"))):"\\"!==r[e-1]&&t===c?e=a(e,[i,o]):o+=t:/["'`{]/.test(t)?c=t:/[a-zA-Z]/.test(t)&&(""!==i&&s.attributes.push([i]),l=!0,u=!1,i=t));">"===(t=r[++e])&&u&&(o+=t,t=r[++e])}return++e},t.exports})(),e["/lib/build-content/jsx/element.js"]=(()=>{var t={exports:{}};let s=n("/lib/build-content/jsx/attributes/get-attributes.js"),r=n("/lib/build-content/jsx/breckets.js"),e=n("/lib/build-content/jsx/outer.js");class i{tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(t,e,n){if(">"===t[e+1])this.isComponent=!0,this.tagName="",this.i=e+2;else{for(this.isComponent=/[A-Z]/.test(t[e+1]);e<t.length&&!1!==/[A-Za-z0-9.]/.test(t[++e]);)this.tagName+=t[e];n&&this.attributes.push(["component",`\${'${n}'+ (props.key !== undefined ? props.key : '')}`]),this.i=s(t[e],e,this,t)}!1===this.selfClosed&&this.getInner(t)}get outer(){return e(this)}getInner(t){var e=`</${this.tagName}>`;let n=0;for(var s="</>"==e?"<>":"<"+this.tagName;this.i<t.length;){if(this.inner+=t[this.i],this.inner.endsWith(s)&&n++,this.inner.endsWith(e)){if(!(0<n)){this.inner=this.inner.slice(0,-e.length).trim();break}n--}this.i++}this.buildInner()}buildInner(){let e="";if(!(this.inner.trim().length<2)&&(this.inner.includes("<")||this.inner.includes("{"))){for(let t=0;t<this.inner.length;t++){var n,s;"<"===this.inner[t]?(n=new i(this.inner,t),e+=n.outer,t=n.i):"{"===this.inner[t]?(n=t,t=r(t,this.inner),s=this.inner.slice(n,t),e+="$"+i.jsxParser(s)):e+=this.inner[t]}this.inner=e}}}return t.exports=i,t.exports})(),e["/lib/build-content/jsx/jsx-parser.js"]=(()=>{var t={exports:{}};let o=n("/lib/build-content/jsx/element.js");function e(e,n){let s="";for(let t=0;t<e.length;t++)if("("===e[t]){var r=t;for(t++;0===e[t].trim().length;)t++;if("<"===e[t]){var i=new o(e,t,n);for(t=i.i,s+="`"+i.outer+"`";")"!==e[t];)t++}else s+=e.slice(r,t+1)}else s+=e[t];return s}return o.jsxParser=e,t.exports=e,t.exports})(),e["/lib/build-content/index.js"]=(()=>{var t={exports:{}};let s=n("/lib/build-content/jsx/jsx-parser.js"),r=n("/lib/build-content/build-component/index.js"),i=n("/lib/build-content/remove-comments.js");return t.exports=function(t,e){var n=e.split("/").pop().replace(/\.js$/,""),e=`context.currentPath = '${e}';
+`+s(i(t),n);return r(e,n)},t.exports})(),e["/lib/build.js"]=(()=>{var t={exports:{}};let r=n("/lib/build-content/index.js"),i=n("/lib/context.js");return t.exports=function(t,e="context"){var n,s=new i;for(n in t.contents)t.contents[n]=r(t.contents[n],n);return{resultFn:t.build({},s,e),context:s}},t.exports})(),e["/lib/browser.js"]=(()=>{var t={exports:{}};let r=n("/lib/build.js");return t.exports=async function(t,e="body",n={},s){await(t=new Require(t)).getContent();var{resultFn:t,context:s}=r(t,s);return e&&(e=document.querySelector(e))&&(e.innerHTML=t(n).trim(),s.runActions()),s},t.exports})(),e["/lib/browser.js"]}{var e;let s=new Function("return "+"{}")();(function t(e){for(var n in e)"function"==typeof e[n]&&e[n].name===Obj.recursiveName?e[n]=e[n](s):null!==e[n]&&"object"==typeof e[n]&&t(e[n])})(s),s}try{t({})}catch(n){{var s=n;var o={"/lib/context.js":{from:4,to:152},"/lib/build-content/remove-comments.js":{from:153,to:164},"/lib/build-content/build-component/get-function.js":{from:165,to:196},"/lib/build-content/build-component/index.js":{from:197,to:220},"/lib/build-content/jsx/outer.js":{from:221,to:243},"/lib/build-content/jsx/breckets.js":{from:244,to:268},"/lib/build-content/jsx/attributes/build-action.js":{from:269,to:285},"/lib/build-content/jsx/attributes/build-prop.js":{from:286,to:305},"/lib/build-content/jsx/attributes/get-attributes.js":{from:306,to:377},"/lib/build-content/jsx/element.js":{from:378,to:450},"/lib/build-content/jsx/jsx-parser.js":{from:451,to:478},"/lib/build-content/index.js":{from:479,to:495},"/lib/build.js":{from:496,to:513},"/lib/browser.js":{from:514,to:536}};var l=536;let[t,...e]=s.stack.split("\n");throw e=e.map(t=>{var e=t.match(/<anonymous>:(\d*):(\d*)\)$/);if(e){let n=Number(e[1]);if(n+1!==l){var s,r,e=Number(e[2]),i=Object.entries(o).filter(([,{from:t,to:e}])=>n>=t&&n<=e);if(0!==i.length)return[i,{from:s,to:r}]=i[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${i} (${n-s-2}:${e})`}}}).filter(Boolean),s.stack=t+"\n"+e.join("\n"),s;return}}})();

tests/build-action.test.js

@@ -13,4 +13,3 @@ const { describe, it } = require('node:test');
       
-      assert.deepStrictEqual(element.attributes, [['click', '${context.counter++}${context.actions.push({selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}']]);
-
+      assert.deepStrictEqual(element.attributes, [['click', '${context.counter++}${context.actions.push({name:this.name,selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}']]);
       const fn = new Function('context', 'handleClick', 'return `' + element.attributes[0][1] + '`');
@@ -21,3 +20,3 @@ const handleClick = () => {};
       assert.strictEqual(result, '1');
-      const expected = { selector: '[click="1"]', event: 'click', fn: handleClick };
+      const expected = { name:'',selector: '[click="1"]', event: 'click', fn: handleClick };
       assert.deepStrictEqual(context.actions[0], expected);
@@ -33,3 +32,3 @@ });
 
-      assert.deepStrictEqual(element.attributes, [['mouseover', '${context.counter++}${context.actions.push({selector:`[mouseover="${context.counter-1}"]`,event:\'mouseover\',fn:handleMouseOver}) ? \'\' : \'\'}']]);
+      assert.deepStrictEqual(element.attributes, [['mouseover', '${context.counter++}${context.actions.push({name:this.name,selector:`[mouseover="${context.counter-1}"]`,event:\'mouseover\',fn:handleMouseOver}) ? \'\' : \'\'}']]);
 
@@ -41,3 +40,3 @@ const fn = new Function('context', 'handleMouseOver', 'return `' + element.attributes[0][1] + '`');
       assert.strictEqual(result, '5');
-      const expected = { selector: '[mouseover="5"]', event: 'mouseover', fn: handleMouseOver };
+      const expected = { name:'', selector: '[mouseover="5"]', event: 'mouseover', fn: handleMouseOver };
       assert.deepStrictEqual(context.actions[0], expected);
@@ -56,4 +55,4 @@ });
       assert.deepStrictEqual(element.attributes, [
-         ['click', '${context.counter++}${context.actions.push({selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}'],
-         ['mouseover', '${context.counter++}${context.actions.push({selector:`[mouseover="${context.counter-1}"]`,event:\'mouseover\',fn:handleMouseOver}) ? \'\' : \'\'}']
+         ['click', '${context.counter++}${context.actions.push({name:this.name,selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}'],
+         ['mouseover', '${context.counter++}${context.actions.push({name:this.name,selector:`[mouseover="${context.counter-1}"]`,event:\'mouseover\',fn:handleMouseOver}) ? \'\' : \'\'}']
       ]);
@@ -74,4 +73,4 @@
       const expectedActions = [
-         { selector: '[click="1"]', event: 'click', fn: handleClick },
-         { selector: '[mouseover="2"]', event: 'mouseover', fn: handleMouseOver }
+         { name:'',selector: '[click="1"]', event: 'click', fn: handleClick },
+         { name:'',selector: '[mouseover="2"]', event: 'mouseover', fn: handleMouseOver }
       ];
@@ -90,3 +89,3 @@
 
-      assert.deepStrictEqual(element.attributes, [['click', '${context.counter++}${context.actions.push({selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}']]);
+      assert.deepStrictEqual(element.attributes, [['click', '${context.counter++}${context.actions.push({name:this.name,selector:`[click="${context.counter-1}"]`,event:\'click\',fn:handleClick}) ? \'\' : \'\'}']]);
 
@@ -98,5 +97,5 @@ const fn = new Function('context', 'handleClick', 'return `' + element.attributes[0][1] + '`');
       assert.strictEqual(result, '1');
-      const expected = { selector: '[click="1"]', event: 'click', fn: handleClick };
+      const expected = { name:'',selector: '[click="1"]', event: 'click', fn: handleClick };
       assert.deepStrictEqual(context.actions[0], expected);
    });
 });

tests/build-prop.test.js

@@ -11,4 +11,3 @@ const { describe, it } = require('node:test');
       buildProp(toAdd, 'attributes', element);
-
-      assert.deepStrictEqual(element.attributes, [['${true ? checked : \'\'}']]);
+      assert.deepStrictEqual(element.attributes, [["${true ? 'checked' : ''}"]]);
    });
@@ -15,0 +14,0 @@

tests/get-attributes.test.js

@@ -45,3 +45,3 @@ const { describe, it } = require('node:test');
       assert(element.attributes[0][0] === 'click')
-      const expected = { selector: '[click="1"]', event: 'click', fn: handleClick };
+      const expected = { name:'',selector: '[click="1"]', event: 'click', fn: handleClick };
       assert.deepStrictEqual(context.actions[0], expected);
@@ -48,0 +48,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95922

increased by21.39%

Number of package files

38

increased by18.75%

Lines of code

1687

increased by14.14%

Number of lines in readme file

145

increased by23.93%

Number of medium supply chain risk alerts

12

decreased by-14.29%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

No dependency changes