als-render - npm Package Compare versions

Comparing version 0.9.2 to 0.9.3

docs/03-features.md

@@ -29,2 +29,3 @@ ## ALS-Render Features Overview
 * **updating** - Each component has `this.update(props,inner)`
+* **parentComponent** - Each component has `this.parentComponent` - the access to parent component
 
@@ -36,1 +37,2 @@ * **context.link** - by using `context.link(href)` you can add link stylesheet to html
 * **context.data** - includes data passed in render function
+* **component(name)** - returns component object (name = componentName+key)

lib/build-component/index.js

@@ -8,8 +8,10 @@ const getFunction = require('./get-function')
    const isAsync = originalFn.startsWith('async')
-   const newFunction = /*js*/`${isAsync ? 'async ' : ''}function ${componentName}(props={},inner) {
+   const newFunction = /*js*/`${isAsync ? 'async ' : ''}function ${componentName}(props={},inner,parentComponent) {
       let originalFn = ${originalFn}
-      const component = context.component('${componentName}',props,inner)
+      const component = context.getComponent('${componentName}',props,inner)
+      component.parentComponent = parentComponent
       originalFn = originalFn.bind(component)
-      const result = ${isAsync ? 'await ' : ''}originalFn(props,inner)
-      return component.add(result)
+      const result = ${isAsync ? 'await ' : ''}originalFn(props,inner,this)
+      component.addToUpdated()
+      return result
    }
@@ -16,0 +18,0 @@ context.addComponentFn('${componentName}',${componentName})

lib/context/component.js

 class Component {
-   static fns = {}
-   static components = {}
-   static componentsToUpdate = {}
-   static 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
-   }
+   static context; // added on context initiation - instance of Context
+   static fns = {};
+   static components = {};
+   static componentsToUpdate = {};
 
    constructor(componentName, props = {},inner) {
-      const { key = '' } = props
-      const name = componentName + key 
-      if (Component.components[name]) {
-         const component = Component.components[name]
-         component.init(props,inner)
-         return component
-      }
-      Component.components[name] = this
-      this.mounted = false
-      this.name = name
-      this.selector = `[component=${this.name}]`
-      this.fn = Component.fns[componentName]
-      this.hash
-      this.init()
+      const { key = '' } = props;
+      const name = componentName + key ;
+      const component = Component.components[name];
+      if (component) return component.init(props,inner);
+      Component.components[name] = this;
+      this.mounted = false;
+      this.name = name;
+      this.selector = `[component=${this.name}]`;
+      this.fn = Component.fns[componentName];
+      this.init();
    }
-   
+
+   addToUpdated() { Component.componentsToUpdate[this.name] = this }
+
    init(props,inner) {
-      this.actions = []
+      this.actions = [];
       this.counter = 0;
-      this.props = props      
-      this.inner = inner
-      this.hooks = { mount: [() => this.mounted = true], unmount: [] }
+      this.props = props;
+      this.inner = inner;
+      this.hooks = { mount: [() => this.mounted = true], unmount: [] };
+      return this;
    }
 
    addAction(event, fn) {
-      const id = this.name + this.counter++
-      this.actions.push({ event, id, fn })
-      return id
+      const id = this.name + this.counter++;
+      this.actions.push({ event, id, fn });
+      return id;
    }
 
    on(event, fn) {
-      if (!this.hooks[event]) return
-      this.hooks[event].push(fn)
+      if (!this.hooks[event]) return;
+      this.hooks[event].push(fn);
    }
-  
-   update(props=this.props,inner=this.inner) {
-      this.props = props
-      this.inner = inner
-      const element = document.querySelector(this.selector)
-      if(!element || !this.fn) return
-      const newHtml = this.fn(props, inner, this)
-      if(this.hash === this.oldHash) return
-      element.outerHTML = newHtml
-      Component.context.runActions()
-   }
 
    update(props=this.props,inner=this.inner) {
-      this.props = props
-      this.inner = inner
-      const element = document.querySelector(this.selector)
-      if(!element || !this.fn) return
-      const newHtml = this.fn(props, inner, this)
-      if(newHtml instanceof Promise) newHtml.then(html => this.publish(element,html))
-      else this.publish(element,newHtml)
+      Component.componentsToUpdate = {};
+      this.init(props,inner);
+      const element = document.querySelector(this.selector);
+      if(!element || !this.fn) return;
+      const newHtml = this.fn.apply(this, [props,inner,this]);
+      if(newHtml instanceof Promise) newHtml.then(html => this.publish(element,html));
+      else this.publish(element,newHtml);
    }
 
    publish(element,html) {
-      const hash = Component.genHash(html+this.name)
-      if(this.hash === hash) return
-      element.outerHTML = html
-      Component.context.runActions()
-      this.hash = hash
+      element.outerHTML = html;
+      this.addToUpdated();
+      Component.context.runActions();
    }
-
-   add(content) {
-      Component.componentsToUpdate[this.name] = this
-      return content
-   }
 }
 
 module.exports = Component

lib/context/context.js

@@ -1,13 +0,14 @@
-const Component = require('./component')
+const Component = require('./component');
 
 class Context {
-   links = []; styles = []; counter=0;
-   constructor(browser = true,ssr=false) {
+   links = []; styles = []; counter = 0;
+   constructor(browser = true, ssr = false) {
       Component.context = this;
-      this.browser = browser
-      this.ssr = ssr
+      this.browser = browser;
+      this.ssr = ssr;
    }
 
-   addComponentFn(name,fn) { Component.fns[name] = fn}
-   component(componentName, props, inner) { return new Component(componentName,props,inner) }
+   component(name) { return Component.components[name] }
+   addComponentFn(name, fn) { Component.fns[name] = fn } // used in build-component
+   getComponent(name, props, inner) { return new Component(name, props, inner) } // used in build-component
    style(styles) { this.styles.push(styles) }
@@ -17,24 +18,24 @@
       for (const name in Component.componentsToUpdate) {
-         const component = Component.componentsToUpdate[name]
-         const { actions, hooks, selector } = component
-         const element = document.querySelector(selector)
-         const parent = element || document
-         hooks.mount.forEach(fn => fn(element))
+         const component = Component.componentsToUpdate[name];
+         const { actions, hooks, selector } = component;
+         const element = document.querySelector(selector);
+         const parent = element || document;
+         hooks.mount.forEach(fn => fn(element));
          actions.forEach(({ event, fn, id }) => {
-            const elementForEvent = parent.querySelector(`[${event}="${id}"]`)
-            if (!elementForEvent) return
-            if (event === 'load') fn(elementForEvent)
-            else elementForEvent.addEventListener(event, fn)
+            const elementForEvent = parent.querySelector(`[${event}="${id}"]`);
+            if (!elementForEvent) return;
+            if (event === 'load') fn(elementForEvent);
+            else elementForEvent.addEventListener(event, fn);
          })
-         component.actions = []
-         hooks.mount = []
+         component.actions = [];
+         component.hooks.mount = [];
       }
 
-      for (const name in Component.components) {
+      for (const name in Component.components) { // check if there are element's components which removed
          const { selector, hooks } = Component.components[name]
-         if (document.querySelector(selector)) continue
+         if (document.querySelector(selector)) continue;
          hooks.unmount.forEach(fn => fn());
-         delete Component.components[name]
+         delete Component.components[name];
       }
-   
+
       Component.componentsToUpdate = {}
@@ -47,10 +48,9 @@ }
       link.split('/').forEach(part => {
-         if (part === '..') arr.pop()
-         else if (part !== '.') arr.push(part)
+         if (part === '..') arr.pop();
+         else if (part !== '.') arr.push(part);
       })
-      this.links.push(arr.join('/'))
+      this.links.push(arr.join('/'));
    }
-
 }
 
-module.exports = Context
+module.exports = Context;

lib/context/stringContext.js

@@ -1,3 +0,3 @@
-const Component = require('./component')
-const Context = require('./context')
+const Component = require('./component');
+const Context = require('./context');
 
@@ -4,0 +4,0 @@ const stringContext = /*js*/`

package.json

 {
   "name": "als-render",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "main": "index.js",
@@ -5,0 +5,0 @@ "scripts": {

readme.md

@@ -121,2 +121,3 @@ # ALS-Render
 * **updating** - Each component has `this.update(props,inner)`
+* **parentComponent** - Each component has `this.parentComponent` - the access to parent component
 
@@ -128,2 +129,3 @@ * **context.link** - by using `context.link(href)` you can add link stylesheet to html
 * **context.data** - includes data passed in render function
+* **component(name)** - returns component object (name = componentName+key)
 
@@ -130,0 +132,0 @@ ## Counter example

render.js

@@ -297,8 +297,10 @@ const Require = (function(){
    const isAsync = originalFn.startsWith('async')
-   const newFunction = /*js*/`${isAsync ? 'async ' : ''}function ${componentName}(props={},inner) {
+   const newFunction = /*js*/`${isAsync ? 'async ' : ''}function ${componentName}(props={},inner,parentComponent) {
       let originalFn = ${originalFn}
-      const component = context.component('${componentName}',props,inner)
+      const component = context.getComponent('${componentName}',props,inner)
+      component.parentComponent = parentComponent
       originalFn = originalFn.bind(component)
-      const result = ${isAsync ? 'await ' : ''}originalFn(props,inner)
-      return component.add(result)
+      const result = ${isAsync ? 'await ' : ''}originalFn(props,inner,this)
+      component.addToUpdated()
+      return result
    }
@@ -559,83 +561,57 @@ context.addComponentFn('${componentName}',${componentName})
 class Component {
-   static fns = {}
-   static components = {}
-   static componentsToUpdate = {}
-   static 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
-   }
+   static context; // added on context initiation - instance of Context
+   static fns = {};
+   static components = {};
+   static componentsToUpdate = {};
 
    constructor(componentName, props = {},inner) {
-      const { key = '' } = props
-      const name = componentName + key 
-      if (Component.components[name]) {
-         const component = Component.components[name]
-         component.init(props,inner)
-         return component
-      }
-      Component.components[name] = this
-      this.mounted = false
-      this.name = name
-      this.selector = `[component=${this.name}]`
-      this.fn = Component.fns[componentName]
-      this.hash
-      this.init()
+      const { key = '' } = props;
+      const name = componentName + key ;
+      const component = Component.components[name];
+      if (component) return component.init(props,inner);
+      Component.components[name] = this;
+      this.mounted = false;
+      this.name = name;
+      this.selector = `[component=${this.name}]`;
+      this.fn = Component.fns[componentName];
+      this.init();
    }
-   
+
+   addToUpdated() { Component.componentsToUpdate[this.name] = this }
+
    init(props,inner) {
-      this.actions = []
+      this.actions = [];
       this.counter = 0;
-      this.props = props      
-      this.inner = inner
-      this.hooks = { mount: [() => this.mounted = true], unmount: [] }
+      this.props = props;
+      this.inner = inner;
+      this.hooks = { mount: [() => this.mounted = true], unmount: [] };
+      return this;
    }
 
    addAction(event, fn) {
-      const id = this.name + this.counter++
-      this.actions.push({ event, id, fn })
-      return id
+      const id = this.name + this.counter++;
+      this.actions.push({ event, id, fn });
+      return id;
    }
 
    on(event, fn) {
-      if (!this.hooks[event]) return
-      this.hooks[event].push(fn)
+      if (!this.hooks[event]) return;
+      this.hooks[event].push(fn);
    }
-  
-   update(props=this.props,inner=this.inner) {
-      this.props = props
-      this.inner = inner
-      const element = document.querySelector(this.selector)
-      if(!element || !this.fn) return
-      const newHtml = this.fn(props, inner, this)
-      if(this.hash === this.oldHash) return
-      element.outerHTML = newHtml
-      Component.context.runActions()
-   }
 
    update(props=this.props,inner=this.inner) {
-      this.props = props
-      this.inner = inner
-      const element = document.querySelector(this.selector)
-      if(!element || !this.fn) return
-      const newHtml = this.fn(props, inner, this)
-      if(newHtml instanceof Promise) newHtml.then(html => this.publish(element,html))
-      else this.publish(element,newHtml)
+      Component.componentsToUpdate = {};
+      this.init(props,inner);
+      const element = document.querySelector(this.selector);
+      if(!element || !this.fn) return;
+      const newHtml = this.fn.apply(this, [props,inner,this]);
+      if(newHtml instanceof Promise) newHtml.then(html => this.publish(element,html));
+      else this.publish(element,newHtml);
    }
 
    publish(element,html) {
-      const hash = Component.genHash(html+this.name)
-      if(this.hash === hash) return
-      element.outerHTML = html
-      Component.context.runActions()
-      this.hash = hash
+      element.outerHTML = html;
+      this.addToUpdated();
+      Component.context.runActions();
    }
-
-   add(content) {
-      Component.componentsToUpdate[this.name] = this
-      return content
-   }
 }
@@ -649,14 +625,15 @@
 const exports = module.exports
-const Component = require('/lib/context/component.js')
+const Component = require('/lib/context/component.js');
 
 class Context {
-   links = []; styles = []; counter=0;
-   constructor(browser = true,ssr=false) {
+   links = []; styles = []; counter = 0;
+   constructor(browser = true, ssr = false) {
       Component.context = this;
-      this.browser = browser
-      this.ssr = ssr
+      this.browser = browser;
+      this.ssr = ssr;
    }
 
-   addComponentFn(name,fn) { Component.fns[name] = fn}
-   component(componentName, props, inner) { return new Component(componentName,props,inner) }
+   component(name) { return Component.components[name] }
+   addComponentFn(name, fn) { Component.fns[name] = fn } // used in build-component
+   getComponent(name, props, inner) { return new Component(name, props, inner) } // used in build-component
    style(styles) { this.styles.push(styles) }
@@ -666,24 +643,24 @@
       for (const name in Component.componentsToUpdate) {
-         const component = Component.componentsToUpdate[name]
-         const { actions, hooks, selector } = component
-         const element = document.querySelector(selector)
-         const parent = element || document
-         hooks.mount.forEach(fn => fn(element))
+         const component = Component.componentsToUpdate[name];
+         const { actions, hooks, selector } = component;
+         const element = document.querySelector(selector);
+         const parent = element || document;
+         hooks.mount.forEach(fn => fn(element));
          actions.forEach(({ event, fn, id }) => {
-            const elementForEvent = parent.querySelector(`[${event}="${id}"]`)
-            if (!elementForEvent) return
-            if (event === 'load') fn(elementForEvent)
-            else elementForEvent.addEventListener(event, fn)
+            const elementForEvent = parent.querySelector(`[${event}="${id}"]`);
+            if (!elementForEvent) return;
+            if (event === 'load') fn(elementForEvent);
+            else elementForEvent.addEventListener(event, fn);
          })
-         component.actions = []
-         hooks.mount = []
+         component.actions = [];
+         component.hooks.mount = [];
       }
 
-      for (const name in Component.components) {
+      for (const name in Component.components) { // check if there are element's components which removed
          const { selector, hooks } = Component.components[name]
-         if (document.querySelector(selector)) continue
+         if (document.querySelector(selector)) continue;
          hooks.unmount.forEach(fn => fn());
-         delete Component.components[name]
+         delete Component.components[name];
       }
-   
+
       Component.componentsToUpdate = {}
@@ -696,11 +673,10 @@ }
       link.split('/').forEach(part => {
-         if (part === '..') arr.pop()
-         else if (part !== '.') arr.push(part)
+         if (part === '..') arr.pop();
+         else if (part !== '.') arr.push(part);
       })
-      this.links.push(arr.join('/'))
+      this.links.push(arr.join('/'));
    }
-
 }
 
-module.exports = Context
+module.exports = Context;
 return module.exports;
@@ -775,4 +751,4 @@ })();
    } catch(error) {
-      parseError(error, {"/lib/utils/remove-comments.js":{"from":4,"to":20},"/lib/jsx/breckets.js":{"from":21,"to":56},"/lib/build-component/get-function.js":{"from":57,"to":75},"/lib/build-component/index.js":{"from":76,"to":100},"/lib/jsx/outer.js":{"from":101,"to":131},"/lib/jsx/attributes/build-action.js":{"from":132,"to":144},"/lib/jsx/attributes/build-prop.js":{"from":145,"to":164},"/lib/jsx/attributes/get-attributes.js":{"from":165,"to":241},"/lib/jsx/element.js":{"from":242,"to":314},"/lib/jsx/jsx-parser.js":{"from":315,"to":342},"/lib/context/component.js":{"from":343,"to":432},"/lib/context/context.js":{"from":433,"to":491},"/lib/build.js":{"from":492,"to":523},"/lib/browser.js":{"from":524,"to":550}}, 550)
+      parseError(error, {"/lib/utils/remove-comments.js":{"from":4,"to":20},"/lib/jsx/breckets.js":{"from":21,"to":56},"/lib/build-component/get-function.js":{"from":57,"to":75},"/lib/build-component/index.js":{"from":76,"to":102},"/lib/jsx/outer.js":{"from":103,"to":133},"/lib/jsx/attributes/build-action.js":{"from":134,"to":146},"/lib/jsx/attributes/build-prop.js":{"from":147,"to":166},"/lib/jsx/attributes/get-attributes.js":{"from":167,"to":243},"/lib/jsx/element.js":{"from":244,"to":316},"/lib/jsx/jsx-parser.js":{"from":317,"to":344},"/lib/context/component.js":{"from":345,"to":408},"/lib/context/context.js":{"from":409,"to":467},"/lib/build.js":{"from":468,"to":499},"/lib/browser.js":{"from":500,"to":526}}, 526)
    }
 })()

render.min.js

@@ -9,11 +9,13 @@ let Require=(()=>{let d={};function a(t,e){var n,t=t.split("/"),s=[];for(n of[...e.split("/").slice(0,-1),...t])".."===n?0<s.length&&".."!==s[s.length-1]?s.pop():s.push(n):"."!==n&&s.push(n);e=s.join("/");return e.endsWith(".js")?e:e+".js"}async function t({contents:n,fullPath:t},i){let s=async o=>{if(void 0===n[o]){if(!i.contents[o]){let t=await i.fetch(o),s=[],r=[];t=t.replace(/^(?!\/\/|\/\*.*\*\/).*require\(["'`](.*)["'`]\)/gm,(t,e)=>{var n;return e.startsWith(".")?(n=a(e,o),i.isCyclyc(n,o),s.push(n),t.replace(e,n)):(r.push({match:t,modulePath:e}),t)}),t=await(async(t,r,o,i)=>{if(0!==t.length)for(var{match:a,modulePath:c}of t){let n,t,e,s=c;c.includes("/")&&(l=c.split("/"),s=l.shift(),t=l.join("/"));var l=`/node_modules/${s}/package.json`,u=await fetch(l,{method:"HEAD"}),h=new RegExp(`require\\((["'\`])${c}["'\`]\\)`);!1===u.ok?(o=o.replace(h,"{}"),console.warn(`The module "${c}" can't be imported and will be replaced with {}`)):(e=d[l]||({main:u="index.js"}=await i.fetch(l,"json"),d[l]=u),(n=(n=t?((u=e.split("/")).pop(),`/node_modules/${s}/${u.join("/")}/`+t):`/node_modules/${s}/`+e).replace(/\/\.?\//g,"/")).endsWith(".js")||(n+=".js"),i.isCyclyc(n,c),r.push(n),o=o.replace(a,a.replace(h,(t,e)=>`require(${e}${n}${e})`)))}return o})(r,s,t,i),i.contents[o]={content:t,children:s}}let{content:t,children:e}=i.contents[o];n[o]=t,await Promise.all(e.map(t=>s(t)))}};await s(t)}class r{static contents={};static version;static isCyclyc(t,e){if(this.contents[t]&&this.contents[t].children.includes(e))throw`cyclic dependency between ${e} and `+t}static async fetch(t,e="text"){this.version&&(t+="?version="+this.version);t=await fetch(t);return t.ok||console.error("HTTP error! status: "+t.status),t[e]()}static async getModule(t,e,n,s){t=new r(t);return await t.getContent(),t.build(s,e,n)}constructor(t){this.contents={},this.path=t,this.fullPath=a(t,location.pathname),this.contentReady=!1}async getContent(){return this.contentReady||(await t(this,r),this.keys=((e,n)=>{let s=new Set,r=t=>{t.forEach(t=>{e[t]&&(r(n.contents[t].children),s.add(t))})};return r(Object.keys(e).reverse()),Array.from(s)})(this.contents,r),this.contentReady=!0),this}build(t={},e={},s="context"){var{fn:s,modulesLines:r,curLastLine:o}=((t="context",s)=>{let r={},o=3;var e=s.keys.map((t,e)=>{let n=`modules['${t}'] = (function (){
 `+e),modulesLines:r,curLastLine:o}})(s,this);try{return s(t,e)}catch(n){{s=n;var i=r;var a=o;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!==a){var s,r,e=Number(e[2]),o=Object.entries(i).filter(([,{from:t,to:e}])=>n>=t&&n<=e);if(0!==o.length)return[o,{from:s,to:r}]=o[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${o} (${n-s-2}:${e})`}}}).filter(Boolean),s.stack=t+"\n"+e.join("\n"),s;return}}}}return r})(),require=Require.getModule;
-const render = (()=>{function t(e,t){function s(t){return e[t]||null}var n;return e["/lib/utils/remove-comments.js"]=((n={exports:{}}).exports=function(t){let n=/`.*?\/\/.*?`|".*?\/\/.*?"|'.*?\/\/.*?'/;return t.replace(/^(.*)(\/\/.*)($|\n)/gm,(t,e,s)=>{s=(e+s).match(n);return s&&s.index<e.length?t:e}).replace(/\{?\/\*[\s\S]*?\*\/\}?/gm,"")},n.exports),e["/lib/jsx/breckets.js"]=((n={exports:{}}).exports=function(e,s){let t=0,n={'"':[],"'":[],"`":[]};for(s.replace(/["'`]/g,(t,e)=>{"\\"!==s[e-1]&&n[t].push(e)});e<s.length;){var r=s[++e];if(n[r]&&n[r].length){let t;for(var o of n[r])if(o>e){t=o;break}t&&(e=t,n[r]=n[r].filter(t=>e<t))}else if("{"===r)t++;else if("}"===r){if(!(0<t))break;t--}}return e+1},n.exports),e["/lib/build-component/get-function.js"]=(()=>{var t={exports:{}};let n=s("/lib/jsx/breckets.js");return t.exports=function(t,e){var s="[\\s\\S]*?",e=new RegExp(`^\\s*?(async\\s)?function\\s*?${e}\\s*?\\(${s}\\)${s}{`,"m");return(s=t.match(e))?(e=s.index+s[0].length,e=n(e,t),t.slice(s.index,e)):null},t.exports})(),e["/lib/build-component/index.js"]=(()=>{var t={exports:{}};let r=s("/lib/build-component/get-function.js");return t.exports=function(t,e){var s,n;return!1===/[A-Z]/.test(e[0])||null===(s=r(t,e))?t:(n=s.startsWith("async"),t.replace(s,`${n?"async ":""}function ${e}(props={},inner) {
-      let originalFn = ${s}
-      const component = context.component('${e}',props,inner)
+const render = (()=>{function t(e,t){function n(t){return e[t]||null}var s;return e["/lib/utils/remove-comments.js"]=((s={exports:{}}).exports=function(t){let s=/`.*?\/\/.*?`|".*?\/\/.*?"|'.*?\/\/.*?'/;return t.replace(/^(.*)(\/\/.*)($|\n)/gm,(t,e,n)=>{n=(e+n).match(s);return n&&n.index<e.length?t:e}).replace(/\{?\/\*[\s\S]*?\*\/\}?/gm,"")},s.exports),e["/lib/jsx/breckets.js"]=((s={exports:{}}).exports=function(e,n){let t=0,s={'"':[],"'":[],"`":[]};for(n.replace(/["'`]/g,(t,e)=>{"\\"!==n[e-1]&&s[t].push(e)});e<n.length;){var r=n[++e];if(s[r]&&s[r].length){let t;for(var o of s[r])if(o>e){t=o;break}t&&(e=t,s[r]=s[r].filter(t=>e<t))}else if("{"===r)t++;else if("}"===r){if(!(0<t))break;t--}}return e+1},s.exports),e["/lib/build-component/get-function.js"]=(()=>{var t={exports:{}};let s=n("/lib/jsx/breckets.js");return t.exports=function(t,e){var n="[\\s\\S]*?",e=new RegExp(`^\\s*?(async\\s)?function\\s*?${e}\\s*?\\(${n}\\)${n}{`,"m");return(n=t.match(e))?(e=n.index+n[0].length,e=s(e,t),t.slice(n.index,e)):null},t.exports})(),e["/lib/build-component/index.js"]=(()=>{var t={exports:{}};let r=n("/lib/build-component/get-function.js");return t.exports=function(t,e){var n,s;return!1===/[A-Z]/.test(e[0])||null===(n=r(t,e))?t:(s=n.startsWith("async"),t.replace(n,`${s?"async ":""}function ${e}(props={},inner,parentComponent) {
+      let originalFn = ${n}
+      const component = context.getComponent('${e}',props,inner)
+      component.parentComponent = parentComponent
       originalFn = originalFn.bind(component)
-      const result = ${n?"await ":""}originalFn(props,inner)
-      return component.add(result)
+      const result = ${s?"await ":""}originalFn(props,inner,this)
+      component.addToUpdated()
+      return result
    }
    context.addComponentFn('${e}',${e})
-   `))},t.exports})(),e["/lib/jsx/outer.js"]=((n={exports:{}}).exports=function(t){let{tagName:e,selfClosed:s,attributes:n,props:r,isComponent:o,rest:i,inner:l}=t,a="";if(o){t=[...r,...n.map(([t,e])=>[t,'"'+e+'"'])].map(([t,e])=>t+":"+e);i&&t.push(i),r="{"+t.join(",")+"}",a="${"+`${e}(${r},\`${l}\`)`+"}"}else{if(""===e)return l||"";r=r.map(([t,e])=>[t,"${"+e+"}"]);t=[...n,...r].map(([t,e])=>e?`${t}="${e.replace(/\"/g,'\\"')}"`:t).join(" ");a=`<${e}${t.length?" "+t:""}>`,s||(a+=l+`</${e}>`)}return a},n.exports),e["/lib/jsx/attributes/build-action.js"]=((n={exports:{}}).exports=function(t,e){var[t,s]=t,t=t.split("on")[1].toLowerCase();e.attributes.push([t,"$"+`{this.addAction('${t}',${s})}`])},n.exports),e["/lib/jsx/attributes/build-prop.js"]=(()=>{var t={exports:{}};let o=["disabled","checked","readonly","required","hidden","autofocus","multiple","selected","controls","loop","muted","open","spellcheck","draggable","contenteditable","novalidate"],i=s("/lib/jsx/attributes/build-action.js");return t.exports=function(s,n,r){if(s){let[t,e]=s;"className"===t&&(t="class"),o.includes(t)?(e&&(t=`\${${e} ? '${t}' : ''}`),r.attributes.push([t])):"props"===n&&t.startsWith("on")?i(s,r):r[n].push([t,e])}},t.exports})(),e["/lib/jsx/attributes/get-attributes.js"]=(()=>{var t={exports:{}};let p=s("/lib/jsx/attributes/build-prop.js");return t.exports=function(t,e,n,r){let o="",i="",l=!0,a=!1,u,s=0;function c(t,e,s="attributes"){for(p(e,s,n),l=!0,a=!1,o="",i="",u=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]);)n.rest+=t;c(e)}else if("="===t||0===t.trim().length)0<o.length&&(" "===t&&"="!==r[e+1]?(n.attributes.push([o]),o=""):(l=!1,a=!0));else{if(">"===r[e+1]){"/"===t?n.selfClosed=!0:""!==o&&n.attributes.push([o+t]),e++;break}o+=t}else a&&(u?"{"===u?(i+=t,"{"===t?s++:"}"===t&&(0<s?s--:e=c(e,[o,i.slice(0,-1)],"props"))):"\\"!==r[e-1]&&t===u?e=c(e,[o,i]):i+=t:/["'`{]/.test(t)?u=t:/[a-zA-Z]/.test(t)&&(""!==o&&n.attributes.push([o]),l=!0,a=!1,o=t));">"===(t=r[++e])&&a&&(i+=t,t=r[++e])}return++e},t.exports})(),e["/lib/jsx/element.js"]=(()=>{var t={exports:{}};let n=s("/lib/jsx/attributes/get-attributes.js"),r=s("/lib/jsx/breckets.js"),e=s("/lib/jsx/outer.js");class o{tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(t,e,s){if(">"===t[e+1])this.isComponent=!1,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];s&&this.attributes.push(["component","${this.name}"]),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 s=0;for(var n="</>"==e?"<>":"<"+this.tagName;this.i<t.length;){if(this.inner+=t[this.i],this.inner.endsWith(n)&&s++,this.inner.endsWith(e)){if(!(0<s)){this.inner=this.inner.slice(0,-e.length).trim();break}s--}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 s,n;"<"===this.inner[t]?(s=new o(this.inner,t),e+=s.outer,t=s.i):"{"===this.inner[t]?(s=t,t=r(t,this.inner),n=this.inner.slice(s,t+1),e+="$"+o.jsxParser(n)):e+=this.inner[t]}this.inner=e}}}return t.exports=o,t.exports})(),e["/lib/jsx/jsx-parser.js"]=(()=>{var t={exports:{}};let i=s("/lib/jsx/element.js");function e(e,s){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 o=new i(e,t,s);for(t=o.i,n+="`"+o.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/context/component.js"]=(()=>{var t={exports:{}};class o{static fns={};static components={};static componentsToUpdate={};static genHash(t){t=(new TextEncoder).encode(t);let e=0,s=0;var n,r=[t=>(e+=t,1),t=>(e-=t,0)];for(n of t)s=r[s](n);return e}constructor(t,e={},s){var n,{key:r=""}=e,r=t+r;if(o.components[r])return(n=o.components[r]).init(e,s),n;(o.components[r]=this).mounted=!1,this.name=r,this.selector=`[component=${this.name}]`,this.fn=o.fns[t],this.hash,this.init()}init(t,e){this.actions=[],this.counter=0,this.props=t,this.inner=e,this.hooks={mount:[()=>this.mounted=!0],unmount:[]}}addAction(t,e){var s=this.name+this.counter++;return this.actions.push({event:t,id:s,fn:e}),s}on(t,e){this.hooks[t]&&this.hooks[t].push(e)}update(t=this.props,e=this.inner){this.props=t,this.inner=e;var s=document.querySelector(this.selector);s&&this.fn&&(t=this.fn(t,e,this),this.hash!==this.oldHash)&&(s.outerHTML=t,o.context.runActions())}update(t=this.props,e=this.inner){this.props=t,this.inner=e;let s=document.querySelector(this.selector);s&&this.fn&&((t=this.fn(t,e,this))instanceof Promise?t.then(t=>this.publish(s,t)):this.publish(s,t))}publish(t,e){var s=o.genHash(e+this.name);this.hash!==s&&(t.outerHTML=e,o.context.runActions(),this.hash=s)}add(t){return o.componentsToUpdate[this.name]=this,t}}return t.exports=o,t.exports})(),e["/lib/context/context.js"]=(()=>{var t={exports:{}};let l=s("/lib/context/component.js");return t.exports=class{links=[];styles=[];counter=0;constructor(t=!0,e=!1){(l.context=this).browser=t,this.ssr=e}addComponentFn(t,e){l.fns[t]=e}component(t,e,s){return new l(t,e,s)}style(t){this.styles.push(t)}runActions(){for(var t in l.componentsToUpdate){var t=l.componentsToUpdate[t],{actions:s,hooks:r,selector:o}=t;let e=document.querySelector(o),n=e||document;r.mount.forEach(t=>t(e)),s.forEach(({event:t,fn:e,id:s})=>{s=n.querySelector(`[${t}="${s}"]`);s&&("load"===t?e(s):s.addEventListener(t,e))}),t.actions=[],r.mount=[]}for(var e in l.components){var{selector:n,hooks:i}=l.components[e];document.querySelector(n)||(i.unmount.forEach(t=>t()),delete l.components[e])}l.componentsToUpdate={}}link(t){let e=this.currentPath.split("/");e.pop(),t.split("/").forEach(t=>{".."===t?e.pop():"."!==t&&e.push(t)}),this.links.push(e.join("/"))}},t.exports})(),e["/lib/build.js"]=(()=>{var t={exports:{}};let p=s("/lib/context/context.js"),h=s("/lib/jsx/jsx-parser.js"),m=s("/lib/build-component/index.js"),b=s("/lib/utils/remove-comments.js");return t.exports=function(t,e="context",s,n){var r,o=new p(s,n);for(r in t.contents){var i=r.split("/").pop().replace(/\.js$/,""),l=`context.currentPath = '${r}';
-`+h(b(t.contents[r]),i);t.contents[r]=m(l,i)}let a="";var{links:u,styles:c}=o;return{resultFn:t.build({},o,e),context:o,add:a=n&&!s||!n&&s?[...u.map(t=>`<link rel="stylesheet" href="${t}">`),c.length?`<style>${c.join("\n")}</style>`:""].filter(Boolean).join("\n")+"\n":a}},t.exports})(),e["/lib/browser.js"]=(()=>{var t={exports:{}};let o=s("/lib/build.js");return t.exports=async function(t,e={},s={}){var{selector:s="body",contextName:n,version:r}=s;Require.version=r;await(r=new Require(t)).getContent();var{resultFn:t,context:r,add:n}=o(r,n,!0,!1);return r.data=e,s&&(s=document.querySelector(s))&&(t=await t(e),s.innerHTML=n+t.trim(),r.runActions()),r},t.exports})(),e["/lib/browser.js"]}{var e;let n=new Function("return "+"{}")();(function t(e){for(var s in e)"function"==typeof e[s]&&e[s].name===Obj.recursiveName?e[s]=e[s](n):null!==e[s]&&"object"==typeof e[s]&&t(e[s])})(n),n}try{t({})}catch(s){{var n=s;var i={"/lib/utils/remove-comments.js":{from:4,to:20},"/lib/jsx/breckets.js":{from:21,to:56},"/lib/build-component/get-function.js":{from:57,to:75},"/lib/build-component/index.js":{from:76,to:100},"/lib/jsx/outer.js":{from:101,to:131},"/lib/jsx/attributes/build-action.js":{from:132,to:144},"/lib/jsx/attributes/build-prop.js":{from:145,to:164},"/lib/jsx/attributes/get-attributes.js":{from:165,to:241},"/lib/jsx/element.js":{from:242,to:314},"/lib/jsx/jsx-parser.js":{from:315,to:342},"/lib/context/component.js":{from:343,to:432},"/lib/context/context.js":{from:433,to:491},"/lib/build.js":{from:492,to:523},"/lib/browser.js":{from:524,to:550}};var l=550;let[t,...e]=n.stack.split("\n");throw e=e.map(t=>{var e=t.match(/<anonymous>:(\d*):(\d*)\)$/);if(e){let s=Number(e[1]);if(s+1!==l){var n,r,e=Number(e[2]),o=Object.entries(i).filter(([,{from:t,to:e}])=>s>=t&&s<=e);if(0!==o.length)return[o,{from:n,to:r}]=o[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${o} (${s-n-2}:${e})`}}}).filter(Boolean),n.stack=t+"\n"+e.join("\n"),n;return}}})();
+   `))},t.exports})(),e["/lib/jsx/outer.js"]=((s={exports:{}}).exports=function(t){let{tagName:e,selfClosed:n,attributes:s,props:r,isComponent:o,rest:i,inner:l}=t,a="";if(o){t=[...r,...s.map(([t,e])=>[t,'"'+e+'"'])].map(([t,e])=>t+":"+e);i&&t.push(i),r="{"+t.join(",")+"}",a="${"+`${e}(${r},\`${l}\`)`+"}"}else{if(""===e)return l||"";r=r.map(([t,e])=>[t,"${"+e+"}"]);t=[...s,...r].map(([t,e])=>e?`${t}="${e.replace(/\"/g,'\\"')}"`:t).join(" ");a=`<${e}${t.length?" "+t:""}>`,n||(a+=l+`</${e}>`)}return a},s.exports),e["/lib/jsx/attributes/build-action.js"]=((s={exports:{}}).exports=function(t,e){var[t,n]=t,t=t.split("on")[1].toLowerCase();e.attributes.push([t,"$"+`{this.addAction('${t}',${n})}`])},s.exports),e["/lib/jsx/attributes/build-prop.js"]=(()=>{var t={exports:{}};let o=["disabled","checked","readonly","required","hidden","autofocus","multiple","selected","controls","loop","muted","open","spellcheck","draggable","contenteditable","novalidate"],i=n("/lib/jsx/attributes/build-action.js");return t.exports=function(n,s,r){if(n){let[t,e]=n;"className"===t&&(t="class"),o.includes(t)?(e&&(t=`\${${e} ? '${t}' : ''}`),r.attributes.push([t])):"props"===s&&t.startsWith("on")?i(n,r):r[s].push([t,e])}},t.exports})(),e["/lib/jsx/attributes/get-attributes.js"]=(()=>{var t={exports:{}};let p=n("/lib/jsx/attributes/build-prop.js");return t.exports=function(t,e,s,r){let o="",i="",l=!0,a=!1,u,n=0;function c(t,e,n="attributes"){for(p(e,n,s),l=!0,a=!1,o="",i="",u=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;c(e)}else if("="===t||0===t.trim().length)0<o.length&&(" "===t&&"="!==r[e+1]?(s.attributes.push([o]),o=""):(l=!1,a=!0));else{if(">"===r[e+1]){"/"===t?s.selfClosed=!0:""!==o&&s.attributes.push([o+t]),e++;break}o+=t}else a&&(u?"{"===u?(i+=t,"{"===t?n++:"}"===t&&(0<n?n--:e=c(e,[o,i.slice(0,-1)],"props"))):"\\"!==r[e-1]&&t===u?e=c(e,[o,i]):i+=t:/["'`{]/.test(t)?u=t:/[a-zA-Z]/.test(t)&&(""!==o&&s.attributes.push([o]),l=!0,a=!1,o=t));">"===(t=r[++e])&&a&&(i+=t,t=r[++e])}return++e},t.exports})(),e["/lib/jsx/element.js"]=(()=>{var t={exports:{}};let s=n("/lib/jsx/attributes/get-attributes.js"),r=n("/lib/jsx/breckets.js"),e=n("/lib/jsx/outer.js");class o{tagName="";rest="";inner="";attributes=[];props=[];selfClosed=!1;constructor(t,e,n){if(">"===t[e+1])this.isComponent=!1,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","${this.name}"]),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 o(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+1),e+="$"+o.jsxParser(s)):e+=this.inner[t]}this.inner=e}}}return t.exports=o,t.exports})(),e["/lib/jsx/jsx-parser.js"]=(()=>{var t={exports:{}};let i=n("/lib/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 o=new i(e,t,n);for(t=o.i,s+="`"+o.outer+"`";")"!==e[t];)t++}else s+=e.slice(r,t+1)}else s+=e[t];return s}return i.jsxParser=e,t.exports=e,t.exports})(),e["/lib/context/component.js"]=(()=>{var t={exports:{}};class o{static context;static fns={};static components={};static componentsToUpdate={};constructor(t,e={},n){var{key:s=""}=e,s=t+s,r=o.components[s];if(r)return r.init(e,n);(o.components[s]=this).mounted=!1,this.name=s,this.selector=`[component=${this.name}]`,this.fn=o.fns[t],this.init()}addToUpdated(){o.componentsToUpdate[this.name]=this}init(t,e){return this.actions=[],this.counter=0,this.props=t,this.inner=e,this.hooks={mount:[()=>this.mounted=!0],unmount:[]},this}addAction(t,e){var n=this.name+this.counter++;return this.actions.push({event:t,id:n,fn:e}),n}on(t,e){this.hooks[t]&&this.hooks[t].push(e)}update(t=this.props,e=this.inner){o.componentsToUpdate={},this.init(t,e);let n=document.querySelector(this.selector);n&&this.fn&&((t=this.fn.apply(this,[t,e,this]))instanceof Promise?t.then(t=>this.publish(n,t)):this.publish(n,t))}publish(t,e){t.outerHTML=e,this.addToUpdated(),o.context.runActions()}}return t.exports=o,t.exports})(),e["/lib/context/context.js"]=(()=>{var t={exports:{}};let l=n("/lib/context/component.js");return t.exports=class{links=[];styles=[];counter=0;constructor(t=!0,e=!1){(l.context=this).browser=t,this.ssr=e}component(t){return l.components[t]}addComponentFn(t,e){l.fns[t]=e}getComponent(t,e,n){return new l(t,e,n)}style(t){this.styles.push(t)}runActions(){for(var t in l.componentsToUpdate){var t=l.componentsToUpdate[t],{actions:n,hooks:r,selector:o}=t;let e=document.querySelector(o),s=e||document;r.mount.forEach(t=>t(e)),n.forEach(({event:t,fn:e,id:n})=>{n=s.querySelector(`[${t}="${n}"]`);n&&("load"===t?e(n):n.addEventListener(t,e))}),t.actions=[],t.hooks.mount=[]}for(var e in l.components){var{selector:s,hooks:i}=l.components[e];document.querySelector(s)||(i.unmount.forEach(t=>t()),delete l.components[e])}l.componentsToUpdate={}}link(t){let e=this.currentPath.split("/");e.pop(),t.split("/").forEach(t=>{".."===t?e.pop():"."!==t&&e.push(t)}),this.links.push(e.join("/"))}},t.exports})(),e["/lib/build.js"]=(()=>{var t={exports:{}};let p=n("/lib/context/context.js"),h=n("/lib/jsx/jsx-parser.js"),m=n("/lib/build-component/index.js"),b=n("/lib/utils/remove-comments.js");return t.exports=function(t,e="context",n,s){var r,o=new p(n,s);for(r in t.contents){var i=r.split("/").pop().replace(/\.js$/,""),l=`context.currentPath = '${r}';
+`+h(b(t.contents[r]),i);t.contents[r]=m(l,i)}let a="";var{links:u,styles:c}=o;return{resultFn:t.build({},o,e),context:o,add:a=s&&!n||!s&&n?[...u.map(t=>`<link rel="stylesheet" href="${t}">`),c.length?`<style>${c.join("\n")}</style>`:""].filter(Boolean).join("\n")+"\n":a}},t.exports})(),e["/lib/browser.js"]=(()=>{var t={exports:{}};let o=n("/lib/build.js");return t.exports=async function(t,e={},n={}){var{selector:n="body",contextName:s,version:r}=n;Require.version=r;await(r=new Require(t)).getContent();var{resultFn:t,context:r,add:s}=o(r,s,!0,!1);return r.data=e,n&&(n=document.querySelector(n))&&(t=await t(e),n.innerHTML=s+t.trim(),r.runActions()),r},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 i={"/lib/utils/remove-comments.js":{from:4,to:20},"/lib/jsx/breckets.js":{from:21,to:56},"/lib/build-component/get-function.js":{from:57,to:75},"/lib/build-component/index.js":{from:76,to:102},"/lib/jsx/outer.js":{from:103,to:133},"/lib/jsx/attributes/build-action.js":{from:134,to:146},"/lib/jsx/attributes/build-prop.js":{from:147,to:166},"/lib/jsx/attributes/get-attributes.js":{from:167,to:243},"/lib/jsx/element.js":{from:244,to:316},"/lib/jsx/jsx-parser.js":{from:317,to:344},"/lib/context/component.js":{from:345,to:408},"/lib/context/context.js":{from:409,to:467},"/lib/build.js":{from:468,to:499},"/lib/browser.js":{from:500,to:526}};var l=526;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]),o=Object.entries(i).filter(([,{from:t,to:e}])=>n>=t&&n<=e);if(0!==o.length)return[o,{from:s,to:r}]=o[0],`    at ${t.match(/at\s(.*?)\s/)[1]} ${o} (${n-s-2}:${e})`}}}).filter(Boolean),s.stack=t+"\n"+e.join("\n"),s;return}}})();

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

Improved metrics

Number of lines in readme file

154

increased by1.32%

Worsened metrics

Total package byte prevSize

131123

decreased by-1.52%

Number of package files

56

decreased by-1.75%

Lines of code

2134

decreased by-3.66%

No dependency changes