forgo - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0-alpha.0

CHANGELOG.md

@@ -0,4 +1,10 @@
+# 3.1.1
+- Fix: components that changed their root HTML tag were erroneously unmounted
+
+# 3.0.2
+- Fix: component teardown left old DOM elements in memory (#47)
+
 # 3.0.0
 
-- Allow the user to manually add DOM elements to a rendered component without modifying or removing them. This allows e.g., using charting libraries with Forgo. (#42)
+- Feature: Allow the user to manually add DOM elements to a rendered component without modifying or removing them. This allows e.g., using charting libraries with Forgo. (#42)
 - Fix: allow components & elements to receive falsey `key`s (`0`, `false`, `null`) (#45)

dist/forgo.min.js

@@ -1,2 +0,2 @@
-var me=Object.defineProperty,pe=Object.defineProperties;var ce=Object.getOwnPropertyDescriptors;var K=Object.getOwnPropertySymbols;var Te=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var Y=(s,l,p)=>l in s?me(s,l,{enumerable:!0,configurable:!0,writable:!0,value:p}):s[l]=p,M=(s,l)=>{for(var p in l||(l={}))Te.call(l,p)&&Y(s,p,l[p]);if(K)for(var p of K(l))be.call(l,p)&&Y(s,p,l[p]);return s},v=(s,l)=>pe(s,ce(l));var N={};var Ee=["ref","dangerouslySetInnerHTML"],fe=Symbol.for("FORGO_FRAGMENT");var He="http://www.w3.org/2000/svg",$=1;var _=3;function F(s,l){var h;l=l!=null?l:{},l.children=arguments.length>3?A(Array.from(arguments).slice(2)):arguments.length===3?A(arguments[2]):void 0;let p=(h=l.key)!=null?h:void 0;return{type:s,props:l,key:p,__is_forgo_element__:!0}}var Se=F;function he(s,l){return p=>{var h;if(!((h=s.__forgo)!=null&&h.deleted))return l(p)}}function ee(s){var X;let l=s;l.__internal=(X=l.__internal)!=null?X:{Text:l.window.Text,HTMLElement:l.window.HTMLElement};function p(t,e,r,a){return Array.isArray(t)?O(t,e,r,a):D(t)?Me(t)?L(t,e,r,a):U(t)?ne(t,e,r,a):te(t,e,r,a):t==null?h(t,e,r,a):P(t,e,r,a)}function h(t,e,r,a){return{nodes:[]}}function P(t,e,r,a){var m;let i=l.document.createTextNode(ye(t)),u;if(e.type==="search"){let o=e.parentElement.childNodes;if(e.length){let n=o[e.currentNodeIndex];if(n.nodeType===_)n.replaceWith(i),u=(m=H(n))==null?void 0:m.components;else{let d=o[e.currentNodeIndex];e.parentElement.insertBefore(i,d)}}else if(o.length===0||e.currentNodeIndex===0)e.parentElement.prepend(i);else{let n=o[e.currentNodeIndex];e.parentElement.insertBefore(i,n)}}return k(t,i,!0,r,u),{nodes:[i]}}function L(t,e,r,a){if(e.type==="detached")return m(void 0,null);{let o=e.parentElement.childNodes;if(e.length){let n=re(t,e.parentElement,e.currentNodeIndex,e.length);if(n.found)return u(n.index,o,e)}return m(e.parentElement,o[e.currentNodeIndex])}function i(o){if(t.props.dangerouslySetInnerHTML)o.innerHTML=t.props.dangerouslySetInnerHTML.__html;else{let n=A([t.props.children]).filter(c=>c!=null),d=Array.from(o.childNodes).findIndex(c=>H(c)),g=d===-1?0:d;for(let c of n){let{nodes:T}=p(c,{type:"search",parentElement:o,currentNodeIndex:g,length:o.childNodes.length-g},[],a);if(T.length){for(;o.childNodes[g]!==T[T.length-1];)g+=1;for(g+=1;g<o.childNodes.length&&!H(o.childNodes[g]);)g+=1}}x(o.childNodes,g,o.childNodes.length)}}function u(o,n,d){var T;x(n,d.currentNodeIndex,o);let g=n[d.currentNodeIndex],c=(T=H(g))==null?void 0:T.components;return i(g),j(g,r),k(t,g,!1,r,c),{nodes:[g]}}function m(o,n){let d=de(t,o);return o&&o.insertBefore(d,n),t.props.ref&&(t.props.ref.value=d),i(d),k(t,d,!0,r,void 0),{nodes:[d]}}}function te(t,e,r,a){let i=r.length;if(e.type!=="detached"&&e.length&&!a){let n=e.parentElement.childNodes,d=oe(t,e.parentElement,e.currentNodeIndex,e.length,r.length);if(d.found)return u(d.index,n,e)}return m();function u(n,d,g){let c=d[n],b=w(c).components[i];if(x(d,g.currentNodeIndex,n),!b.component.shouldUpdate||!b.component.shouldUpdate(t.props,b.props)){let E=v(M({},b),{props:t.props}),f=E.component.render(t.props,E.args),y=r.concat(E),V=b.args.element.node,le=E.component.error?E.component:void 0,ue=o(t.props,E.args,y,le,()=>{let ge={type:"search",currentNodeIndex:g.currentNodeIndex,length:E.nodes.length,parentElement:g.parentElement};return B(f,ge,y,E,a)});return E.component.afterRender&&E.component.afterRender(t.props,v(M({},E.args),{previousNode:V})),ue}else{let E=I(g.parentElement.childNodes,b.args.element.node);return{nodes:C(g.parentElement.childNodes,E,E+b.nodes.length)}}}function m(){let n={element:{componentIndex:i},update:E=>W(n.element,E)},d=t.type,g=d(t.props,{environment:l});Le(d,g);let c=g.error?g:void 0,T={key:t.key,ctor:d,component:g,props:t.props,args:n,nodes:[],isMounted:!1},b=r.concat(T);return o(t.props,n,b,c,()=>{let E=g.render(t.props,n),f=e.type==="detached"?e:{type:"search",currentNodeIndex:e.currentNodeIndex,length:a?e.length:0,parentElement:e.parentElement},y=p(E,f,b,a);return T.nodes=y.nodes,T.args.element.node=y.nodes[0],g.afterRender&&g.afterRender(t.props,n),y})}function o(n,d,g,c,T){try{return T()}catch(b){if(c&&c.error){let E=v(M({},d),{error:b}),f=c.error(n,E);return p(f,e,g,a)}else throw b}}}function B(t,e,r,a,i){let u=e.parentElement.childNodes.length,m=p(t,e,r,i),o=e.parentElement.childNodes.length,n=u+m.nodes.length-o,d=e.currentNodeIndex+m.nodes.length,g=x(e.parentElement.childNodes,d,d+a.nodes.length-n),c=m.nodes.length>0?r:[];for(let T of g){let b=H(T);if(b){let E=R(c,b.components);b.components=b.components.slice(E)}}return a.nodes=m.nodes,a.args.element.node=m.nodes[0],m}function O(t,e,r,a){let i=A(t);if(e.type==="detached")throw new Error("Arrays and fragments cannot be rendered at the top level.");{let u=[],m=e.currentNodeIndex,o=e.length;for(let n of i){let d=e.parentElement.childNodes.length,g=v(M({},e),{currentNodeIndex:m,length:o}),{nodes:c}=p(n,g,r,a);u=u.concat(c);let T=e.parentElement.childNodes.length,b=d+c.length-T;m+=c.length,o-=b}return{nodes:u}}}function ne(t,e,r,a){return O(A(t),e,r,a)}function k(t,e,r,a,i){if(se(t,e,r,a),i){let u=R(a,i);q(i,u),z(a,u)}else z(a,0)}function x(t,e,r){let a=[],i=C(t,e,r);if(i.length){let u=i[0].parentElement,m=S(u);for(let o of i)!H(o)||(o.remove(),a.push(o),m.push({node:o}))}return a}function j(t,e){let r=S(t);for(let{node:a}of r){let i=H(a);if(i){i.deleted=!0;let u=i.components,m=R(e,u);q(i.components,m)}}ve(t)}function R(t,e){let r=0;for(let a of t)if(e.length>r){if(e[r].component!==a.component)break;r++}else break;return r}function q(t,e){var a;let r=!1;for(let i=e;i<t.length;i++){let u=t[i],m=u.component;m.unmount&&(r||u.nodes.every(o=>{if(o.isConnected){let n=w(o);return!n.components[i]||n.components[i].component!==u.component}else return!0}))&&((a=m.__forgo)!=null&&a.unmounted||(m.unmount(u.props,u.args),m.__forgo||(m.__forgo={}),m.__forgo.unmounted=!0),r=!0)}}function z(t,e){for(let r=e;r<t.length;r++){let a=t[r];a.component.mount&&!a.isMounted&&(a.isMounted=!0,a.component.mount(a.props,a.args))}}function re(t,e,r,a){let i=e.childNodes;for(let u=r;u<r+a;u++){let m=i[u];if(Z(m)){let o=H(m);if(!o)continue;if(t.key!==void 0&&(o==null?void 0:o.key)===t.key)return{found:!0,index:u};if(m.tagName.toLowerCase()===t.type&&!(o!=null&&o.key))return{found:!0,index:u}}}if(t.key!==void 0){let u=S(e);for(let m=0;m<u.length;m++){let{node:o}=u[m],n=H(o);if((n==null?void 0:n.key)===t.key){u.splice(m,1);let d=i[r];return d?e.insertBefore(o,d):e.appendChild(o),{found:!0,index:r}}}}return{found:!1}}function oe(t,e,r,a,i){let u=e.childNodes;for(let o=r;o<r+a;o++){let n=u[o],d=H(n);if(d&&d.components.length>i){if(t.key!==void 0){if(d.components[i].ctor===t.type&&d.components[i].key===t.key)return{found:!0,index:o}}else if(d.components[i].ctor===t.type)return{found:!0,index:o}}}function m(o,n,d){let g=H(o);return!!(g&&g.components.length>d&&g.components[d].ctor===n.type&&g.components[d].key===n.key)}if(t.key!==void 0){let o=S(e);for(let n=0;n<o.length;n++){let{node:d}=o[n];if(m(d,t,i)){let g=[d];for(let T=n+1;T<o.length;T++){let{node:b}=o[T];m(b,t,i)&&g.push(b)}o.splice(n,g.length);let c=u[r];if(c)for(let T of g)e.insertBefore(T,c);else for(let T of g)e.appendChild(T);return{found:!0,index:r}}}}return{found:!1}}function se(t,e,r,a){var i;if(a.length>0&&(a[a.length-1].args.element.node=e),D(t)){let u=H(e);if(u&&u.props)for(let n in u.props)n in t.props||n!=="children"&&n!=="xmlns"&&(e.nodeType===_||e instanceof l.__internal.HTMLElement&&n in e?delete e[n]:e.removeAttribute(n));else if(!r&&Z(e)&&e.hasAttributes()){let n=Array.from(e.attributes);for(let d of n){let g=d.name;g in t.props||e.removeAttribute(g)}}let m=Object.entries(t.props);for(let[n,d]of m)if(!Ee.includes(n)&&((i=u==null?void 0:u.props)==null?void 0:i[n])!==d&&n!=="children"&&n!=="xmlns")if(e.nodeType===_)e[n]=d;else if(e instanceof l.__internal.HTMLElement)if(n==="style"){if(u===void 0||u.style===void 0||u.style!==t.props.style){let g=xe(t.props.style);e.style.cssText!==g&&(e.style.cssText=g)}}else n==="onblur"?e[n]=he(e,d):n in e?e[n]=d:e.setAttribute(n,d);else typeof d=="string"?e.setAttribute(n,d):e[n]=d;let o={key:t.key,props:t.props,components:a};Q(e,o)}else Q(e,{components:a})}function ie(t,e){let r=Ae(e)?l.document.querySelector(e):e;if(r)if(r.nodeType===$){let a=r.childNodes.length>0,i=p(t,{type:"search",currentNodeIndex:0,length:r.childNodes.length,parentElement:r},[],a);if(i.nodes.length<r.childNodes.length){let u=C(r.childNodes,i.nodes.length,r.childNodes.length);for(let m of u)m.remove()}return i}else throw new Error("The container argument to the mount() function should be an HTML element.");else throw new Error(`The mount() function was called on a non-element (${typeof e=="string"?e:e==null?void 0:e.tagName}).`)}function ae(t){let e=p(t,{type:"detached"},[],!1);return{node:e.nodes[0],nodes:e.nodes}}function W(t,e){if(t&&t.node){let r=t.node.parentElement;if(r!==null){let a=w(t.node),i=a.components[t.componentIndex],u=e!=null?e:i.props;if(!i.component.shouldUpdate||i.component.shouldUpdate(u,i.props)){let m=v(M({},i),{props:u}),o=a.components.slice(0,t.componentIndex),n=o.concat(m),d=i.args.element.node,g=i.component.render(u,i.args),c=I(r.childNodes,t.node),T={type:"search",currentNodeIndex:c,length:i.nodes.length,parentElement:r},b=B(g,T,n,m,!1);for(let E=0;E<o.length;E++){let f=o[E],y=f.nodes.findIndex(V=>V===i.nodes[0]);f.nodes=f.nodes.slice(0,y).concat(b.nodes).concat(f.nodes.slice(y+i.nodes.length)),f.nodes.length>0&&(f.args.element.node=f.nodes[0])}return j(r,b.nodes.length>0?n:[]),i.component.afterRender&&i.component.afterRender(u,v(M({},i.args),{previousNode:d})),b}else{let m=I(r.childNodes,t.node);return{nodes:C(r.childNodes,m,m+i.nodes.length)}}}else return{nodes:[]}}else throw new Error("Missing node information in rerender() argument.")}function de(t,e){var a;let r=((a=t.props.xmlns)!=null?a:t.type==="svg")?He:e&&e.namespaceURI;return t.props.is?r?l.document.createElementNS(r,t.type,{is:t.props.is}):l.document.createElement(t.type,{is:t.props.is}):r?l.document.createElementNS(r,t.type):l.document.createElement(t.type)}return{mount:ie,render:ae,rerender:W}}var J=globalThis||window,G=ee({window:J,document:J.document});function Ce(s){G=ee(s)}function Fe(s,l){return G.mount(s,l)}function Ge(s){return G.render(s)}function Pe(s,l){return G.rerender(s,l)}function A(s){function l(p,h=[]){let P=Array.isArray(p)?p:U(p)?Array.isArray(p.props.children)?p.props.children:p.props.children!==void 0&&p.props.children!==null?[p.props.children]:[]:[p];for(let L of P)Array.isArray(L)||U(L)?l(L,h):h.push(L);return h}return l(s,[])}function ye(s){return s.toString()}function D(s){return s!=null&&s.__is_forgo_element__===!0}function Me(s){return D(s)&&typeof s.type=="string"}function U(s){return s!=null&&s.type===fe}function H(s){return s.__forgo}function w(s){if(s.__forgo)return s.__forgo;throw new Error("Missing forgo state on node.")}function Q(s,l){s.__forgo=l}function S(s){return s.__forgo_deletedNodes||(s.__forgo_deletedNodes=[]),s.__forgo_deletedNodes}function ve(s){s.__forgo_deletedNodes&&(s.__forgo_deletedNodes=[])}function Le(s,l){if(!l.render)throw new Error(`${s.name||"Unnamed"} component constructor must return an object having a render() function.`)}function Ae(s){return typeof s=="string"}function Z(s){return s.nodeType===$}function xe(s){return typeof s=="string"?s:s==null?"":Object.keys(s).reduce((l,p)=>l+p.split(/(?=[A-Z])/).join("-").toLowerCase()+":"+s[p]+";","")}function C(s,l,p){return Array.from(s).slice(l,p)}function I(s,l){return l?Array.from(s).indexOf(l):-1}(l=>l.JSX=N)(F||(F={}));export{fe as Fragment,N as JSX,F as createElement,ee as createForgoInstance,H as getForgoState,Se as h,Fe as mount,Ge as render,Pe as rerender,Ce as setCustomEnv,Q as setForgoState};
+var ce=Object.defineProperty,be=Object.defineProperties;var Te=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var Ee=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var K=(n,s,p)=>s in n?ce(n,s,{enumerable:!0,configurable:!0,writable:!0,value:p}):n[s]=p,x=(n,s)=>{for(var p in s||(s={}))Ee.call(s,p)&&K(n,p,s[p]);if(X)for(var p of X(s))fe.call(s,p)&&K(n,p,s[p]);return n},N=(n,s)=>be(n,Te(s));var S={};var he=["ref","dangerouslySetInnerHTML"],He=Symbol.for("FORGO_FRAGMENT");var ye="http://www.w3.org/2000/svg",Q=1;var w=3,y={mount(n,s){n.__internal.eventListeners.mount.forEach(p=>p(s,n))},unmount(n,s){n.__internal.eventListeners.unmount.forEach(p=>p(s,n))},shouldUpdate(n,s,p){return n.__internal.eventListeners.shouldUpdate.length===0?!0:n.__internal.eventListeners.shouldUpdate.map(f=>f(s,p,n)).some(Boolean)},afterRender(n,s,p){n.__internal.eventListeners.afterRender.forEach(f=>f(s,p,n))}},Z=class{constructor(s){this.__internal={registeredMethods:s,unmounted:!1,eventListeners:{afterRender:[],mount:[],unmount:[],shouldUpdate:[]},element:{componentIndex:-1}}}update(s){ve(this.__internal.element,s)}addEventListener(s,p){if(!Object.keys(y).includes(s))throw new Error(`No such component lifecycle event: ${s}`);this.__internal.eventListeners[s].push(p)}};function F(n,s){var f;s=s!=null?s:{},s.children=arguments.length>3?L(Array.from(arguments).slice(2)):arguments.length===3?L(arguments[2]):void 0;let p=(f=s.key)!=null?f:void 0;return{type:n,props:s,key:p,__is_forgo_element__:!0}}var Fe=F;function Me(n,s){return p=>{var f;if(!((f=n.__forgo)!=null&&f.deleted))return s(p)}}function ee(n){var W;let s=n;s.__internal=(W=s.__internal)!=null?W:{Text:s.window.Text,HTMLElement:s.window.HTMLElement};function p(t,e,r,a){return Array.isArray(t)?j(t,e,r,a):B(t)?Ae(t)?M(t,e,r,a):U(t)?ne(t,e,r,a):te(t,e,r,a):t==null?f(t,e,r,a):_(t,e,r)}function f(t,e,r,a){return{nodes:[]}}function _(t,e,r){var u;let a=s.document.createTextNode(Le(t)),l;if(e.type==="search"){let m=e.parentElement.childNodes;if(e.length){let o=m[e.currentNodeIndex];if(o.nodeType===w)o.replaceWith(a),l=(u=H(o))==null?void 0:u.components;else{let i=m[e.currentNodeIndex];e.parentElement.insertBefore(a,i)}}else if(m.length===0||e.currentNodeIndex===0)e.parentElement.prepend(a);else{let o=m[e.currentNodeIndex];e.parentElement.insertBefore(a,o)}}return k(t,a,!0,r,l),{nodes:[a]}}function M(t,e,r,a){if(e.type==="detached")return m(void 0,null);{let o=e.parentElement.childNodes;if(e.length){let i=oe(t,e.parentElement,e.currentNodeIndex,e.length);if(i.found)return u(i.index,o,e)}return m(e.parentElement,o[e.currentNodeIndex])}function l(o){if(t.props.dangerouslySetInnerHTML)o.innerHTML=t.props.dangerouslySetInnerHTML.__html;else{let i=L([t.props.children]).filter(c=>c!=null),d=Array.from(o.childNodes).findIndex(c=>H(c)),g=d===-1?0:d;for(let c of i){let{nodes:b}=p(c,{type:"search",parentElement:o,currentNodeIndex:g,length:o.childNodes.length-g},[],a);if(b.length){for(;o.childNodes[g]!==b[b.length-1];)g+=1;for(g+=1;g<o.childNodes.length&&!H(o.childNodes[g]);)g+=1}}A(o.childNodes,g,o.childNodes.length)}}function u(o,i,d){var b;A(i,d.currentNodeIndex,o);let g=i[d.currentNodeIndex],c=(b=H(g))==null?void 0:b.components;return l(g),q(g,r),k(t,g,!1,r,c),{nodes:[g]}}function m(o,i){let d=ue(t,o);return o&&o.insertBefore(d,i),t.props.ref&&(t.props.ref.value=d),l(d),k(t,d,!0,r,void 0),{nodes:[d]}}}function te(t,e,r,a){let l=r.length;if(e.type!=="detached"&&e.length&&!a){let i=e.parentElement.childNodes,d=se(t,e.parentElement,e.currentNodeIndex,e.length,r.length);if(d.found)return u(d.index,i,e)}return m();function u(i,d,g){let c=d[i],T=I(c).components[l];if(A(d,g.currentNodeIndex,i),y.shouldUpdate(T.component,t.props,T.props)){let E=N(x({},T),{props:t.props}),h=E.component.__internal.registeredMethods.render(t.props,E.component),v=r.concat(E),V=T.component.__internal.element.node,ge=E.component.__internal.registeredMethods.error?E.component:void 0,me=o(t.props,v,ge,()=>{let pe={type:"search",currentNodeIndex:g.currentNodeIndex,length:E.nodes.length,parentElement:g.parentElement};return O(h,pe,v,E,a)});return y.afterRender(E.component,t.props,V),me}else{let E=D(g.parentElement.childNodes,T.component.__internal.element.node);return{nodes:P(g.parentElement.childNodes,E,E+T.nodes.length)}}}function m(){let i=t.type,d=i(t.props);Ne(i,d),d.__internal.element.componentIndex=l;let g=d.__internal.registeredMethods.error?d:void 0,c={key:t.key,ctor:i,component:d,props:t.props,nodes:[],isMounted:!1},b=r.concat(c);return o(t.props,b,g,()=>{let T=d.__internal.registeredMethods.render(t.props,d),E=e.type==="detached"?e:{type:"search",currentNodeIndex:e.currentNodeIndex,length:a?e.length:0,parentElement:e.parentElement},h=p(T,E,b,a);return c.nodes=h.nodes,c.component.__internal.element.node=h.nodes[0],y.afterRender(d,t.props,void 0),h})}function o(i,d,g,c){try{return c()}catch(b){if(g!=null&&g.__internal.registeredMethods.error){let T=g.__internal.registeredMethods.error(i,b,g);return p(T,e,d,a)}else throw b}}}function O(t,e,r,a,l){let u=e.parentElement.childNodes.length,m=p(t,e,r,l),o=e.parentElement.childNodes.length,i=u+m.nodes.length-o,d=e.currentNodeIndex+m.nodes.length,g=A(e.parentElement.childNodes,d,d+a.nodes.length-i),c=m.nodes.length>0?r:[];for(let b of g){let T=H(b);if(T){let E=R(c,T.components);T.components=T.components.slice(E)}}return a.nodes=m.nodes,a.component.__internal.element.node=m.nodes[0],m}function j(t,e,r,a){let l=L(t);if(e.type==="detached")throw new Error("Arrays and fragments cannot be rendered at the top level.");{let u=[],m=e.currentNodeIndex,o=e.length;for(let i of l){let d=e.parentElement.childNodes.length,g=N(x({},e),{currentNodeIndex:m,length:o}),{nodes:c}=p(i,g,r,a);u=u.concat(c);let b=e.parentElement.childNodes.length,T=d+c.length-b;m+=c.length,o-=T}return{nodes:u}}}function ne(t,e,r,a){return j(L(t),e,r,a)}function k(t,e,r,a,l){if(ie(t,e,r,a),l){let u=R(a,l);z(l,u)}re(a,0)}function A(t,e,r){let a=[],l=P(t,e,r);if(l.length){let u=l[0].parentElement,m=C(u);for(let o of l)!H(o)||(o.remove(),a.push(o),m.push({node:o}))}return a}function q(t,e){let r=C(t);for(let{node:a}of r){let l=H(a);if(l){l.deleted=!0;let u=l.components,m=R(e,u);z(l.components,m)}}xe(t)}function R(t,e){let r=0;for(let a of t)if(e.length>r){if(e[r].component!==a.component)break;r++}else break;return r}function z(t,e){let r=!1;for(let a=e;a<t.length;a++){let l=t[a],u=l.component;(r||l.nodes.every(m=>{if(m.isConnected){let o=I(m);return!o.components[a]||o.components[a].component!==l.component}else return!0}))&&(u.__internal.unmounted||(y.unmount(u,l.props),u.__internal.unmounted=!0),r=!0)}}function re(t,e){for(let r=e;r<t.length;r++){let a=t[r];a.isMounted||y.mount(a.component,a.props),a.isMounted=!0}}function oe(t,e,r,a){let l=e.childNodes;for(let u=r;u<r+a;u++){let m=l[u];if($(m)){let o=H(m);if(!o)continue;if(t.key!==void 0&&(o==null?void 0:o.key)===t.key)return{found:!0,index:u};if(m.tagName.toLowerCase()===t.type&&!(o!=null&&o.key))return{found:!0,index:u}}}if(t.key!==void 0){let u=C(e);for(let m=0;m<u.length;m++){let{node:o}=u[m],i=H(o);if((i==null?void 0:i.key)===t.key){u.splice(m,1);let d=l[r];return d?e.insertBefore(o,d):e.appendChild(o),{found:!0,index:r}}}}return{found:!1}}function se(t,e,r,a,l){let u=e.childNodes;for(let o=r;o<r+a;o++){let i=u[o],d=H(i);if(d&&d.components.length>l){if(t.key!==void 0){if(d.components[l].ctor===t.type&&d.components[l].key===t.key)return{found:!0,index:o}}else if(d.components[l].ctor===t.type)return{found:!0,index:o}}}function m(o,i,d){let g=H(o);return!!(g&&g.components.length>d&&g.components[d].ctor===i.type&&g.components[d].key===i.key)}if(t.key!==void 0){let o=C(e);for(let i=0;i<o.length;i++){let{node:d}=o[i];if(m(d,t,l)){let g=[d];for(let b=i+1;b<o.length;b++){let{node:T}=o[b];m(T,t,l)&&g.push(T)}o.splice(i,g.length);let c=u[r];if(c)for(let b of g)e.insertBefore(b,c);else for(let b of g)e.appendChild(b);return{found:!0,index:r}}}}return{found:!1}}function ie(t,e,r,a){var l;if(a.length>0&&(a[a.length-1].component.__internal.element.node=e),B(t)){let u=H(e);if(u&&u.props)for(let i in u.props)i in t.props||i!=="children"&&i!=="xmlns"&&(e.nodeType===w||e instanceof s.__internal.HTMLElement&&i in e?delete e[i]:e.removeAttribute(i));else if(!r&&$(e)&&e.hasAttributes()){let i=Array.from(e.attributes);for(let d of i){let g=d.name;g in t.props||e.removeAttribute(g)}}let m=Object.entries(t.props);for(let[i,d]of m)if(!he.includes(i)&&((l=u==null?void 0:u.props)==null?void 0:l[i])!==d&&i!=="children"&&i!=="xmlns")if(e.nodeType===w)e[i]=d;else if(e instanceof s.__internal.HTMLElement)if(i==="style"){if(u===void 0||u.style===void 0||u.style!==t.props.style){let g=Ce(t.props.style);e.style.cssText!==g&&(e.style.cssText=g)}}else i==="onblur"?e[i]=Me(e,d):i in e?e[i]=d:e.setAttribute(i,d);else typeof d=="string"?e.setAttribute(i,d):e[i]=d;let o={key:t.key,props:t.props,components:a};J(e,o)}else J(e,{components:a})}function ae(t,e){let r=Se(e)?s.document.querySelector(e):e;if(r)if(r.nodeType===Q){let a=r.childNodes.length>0,l=p(t,{type:"search",currentNodeIndex:0,length:r.childNodes.length,parentElement:r},[],a);if(l.nodes.length<r.childNodes.length){let u=P(r.childNodes,l.nodes.length,r.childNodes.length);for(let m of u)m.remove()}return l}else throw new Error("The container argument to the mount() function should be an HTML element.");else throw new Error(`The mount() function was called on a non-element (${typeof e=="string"?e:e==null?void 0:e.tagName}).`)}function de(t){let e=p(t,{type:"detached"},[],!1);return{node:e.nodes[0],nodes:e.nodes}}function le(t,e){if(t&&t.node){let r=t.node.parentElement;if(r!==null){let a=I(t.node),l=a.components[t.componentIndex],u=e!=null?e:l.props;if(y.shouldUpdate(l.component,u,l.props)){let m=N(x({},l),{props:u}),o=a.components.slice(0,t.componentIndex),i=o.concat(m),d=l.component.__internal.element.node,g=l.component.__internal.registeredMethods.render(u,l.component),c=D(r.childNodes,t.node),b={type:"search",currentNodeIndex:c,length:l.nodes.length,parentElement:r},T=O(g,b,i,m,!1);for(let E=0;E<o.length;E++){let h=o[E],v=h.nodes.findIndex(V=>V===l.nodes[0]);h.nodes=h.nodes.slice(0,v).concat(T.nodes).concat(h.nodes.slice(v+l.nodes.length)),h.nodes.length>0&&(h.component.__internal.element.node=h.nodes[0])}return q(r,T.nodes.length>0?i:[]),y.afterRender(l.component,u,d),T}else{let m=D(r.childNodes,t.node);return{nodes:P(r.childNodes,m,m+l.nodes.length)}}}else return{nodes:[]}}else throw new Error("Missing node information in rerender() argument.")}function ue(t,e){var a;let r=((a=t.props.xmlns)!=null?a:t.type==="svg")?ye:e&&e.namespaceURI;return t.props.is?r?s.document.createElementNS(r,t.type,{is:t.props.is}):s.document.createElement(t.type,{is:t.props.is}):r?s.document.createElementNS(r,t.type):s.document.createElement(t.type)}return{mount:ae,render:de,rerender:le}}var Y=globalThis||window,G=ee({window:Y,document:Y.document});function Ge(n){G=ee(n)}function _e(n,s){return G.mount(n,s)}function ke(n){return G.render(n)}function ve(n,s){return G.rerender(n,s)}function L(n){function s(p,f=[]){let _=Array.isArray(p)?p:U(p)?Array.isArray(p.props.children)?p.props.children:p.props.children!==void 0&&p.props.children!==null?[p.props.children]:[]:[p];for(let M of _)Array.isArray(M)||U(M)?s(M,f):f.push(M);return f}return s(n,[])}function Le(n){return n.toString()}function B(n){return n!=null&&n.__is_forgo_element__===!0}function Ae(n){return B(n)&&typeof n.type=="string"}function U(n){return n!=null&&n.type===He}function H(n){return n.__forgo}function I(n){if(n.__forgo)return n.__forgo;throw new Error("Missing forgo state on node.")}function J(n,s){n.__forgo=s}function C(n){return n.__forgo_deletedNodes||(n.__forgo_deletedNodes=[]),n.__forgo_deletedNodes}function xe(n){n.__forgo_deletedNodes&&(n.__forgo_deletedNodes=[])}function Ne(n,s){if(!(s instanceof Z))throw new Error(`${n.name||"Unnamed"} component constructor must return an instance of the Component class`)}function Se(n){return typeof n=="string"}function $(n){return n.nodeType===Q}function Ce(n){return typeof n=="string"?n:n==null?"":Object.keys(n).reduce((s,p)=>s+p.split(/(?=[A-Z])/).join("-").toLowerCase()+":"+n[p]+";","")}function P(n,s,p){return Array.from(n).slice(s,p)}function D(n,s){return s?Array.from(n).indexOf(s):-1}(s=>s.JSX=S)(F||(F={}));export{Z as Component,He as Fragment,S as JSX,F as createElement,ee as createForgoInstance,H as getForgoState,Fe as h,_e as mount,ke as render,ve as rerender,Ge as setCustomEnv,J as setForgoState};
 //# sourceMappingURL=forgo.min.js.map

dist/index.d.ts

@@ -14,7 +14,4 @@ export declare type ForgoRef<T> = {
 } & ForgoElementProps;
-export declare type ForgoComponentProps = {} & ForgoElementProps;
-export declare type ForgoCtorArgs = {
-    environment: ForgoEnvType;
-};
-export declare type ForgoComponentCtor<TProps extends ForgoComponentProps> = (props: TProps, args: ForgoCtorArgs) => ForgoComponent<TProps>;
+export declare type ForgoComponentProps = ForgoElementProps;
+export declare type ForgoComponentCtor<Props extends {} = {}> = (props: Props & ForgoComponentProps) => Component<Props>;
 export declare type ForgoElementArg = {
@@ -24,23 +21,2 @@ node?: ChildNode;
 };
-export declare type ForgoRenderArgs = {
-    element: ForgoElementArg;
-    update: (props?: any) => RenderResult;
-};
-export declare type ForgoErrorArgs = ForgoRenderArgs & {
-    error: any;
-};
-export declare type ForgoAfterRenderArgs = ForgoRenderArgs & {
-    previousNode?: ChildNode;
-};
-export declare type ForgoComponent<TProps extends ForgoComponentProps> = {
-    render: (props: TProps, args: ForgoRenderArgs) => ForgoNode | ForgoNode[];
-    afterRender?: (props: TProps, args: ForgoAfterRenderArgs) => void;
-    error?: (props: TProps, args: ForgoErrorArgs) => ForgoNode;
-    mount?: (props: TProps, args: ForgoRenderArgs) => void;
-    unmount?: (props: TProps, args: ForgoRenderArgs) => void;
-    shouldUpdate?: (newProps: TProps, oldProps: TProps) => boolean;
-    __forgo?: {
-        unmounted?: boolean;
-    };
-};
 export declare type ForgoElementBase<TProps extends ForgoElementProps> = {
@@ -75,5 +51,4 @@ key?: any;
     ctor: ForgoComponentCtor<TProps>;
-    component: ForgoComponent<TProps>;
+    component: Component<TProps>;
     props: TProps;
-    args: ForgoRenderArgs;
     nodes: ChildNode[];
@@ -157,2 +132,61 @@ isMounted: boolean;
 export declare const Fragment: unique symbol;
+/**
+ * These are methods that a component may implement. Every component is required
+ * to have a render method.
+ * 1. render() returns the actual DOM to render.
+ * 2. error() is called when this component, or one of its children, throws an
+ *    error.
+ */
+export interface ForgoComponentMethods<Props extends ForgoComponentProps> {
+    render: (props: Props & ForgoComponentProps, component: Component<Props>) => ForgoNode | ForgoNode[];
+    error?: (props: Props & ForgoComponentProps, error: unknown, component: Component<Props>) => ForgoNode;
+}
+/**
+ * This type gives us an exhaustive type check, guaranteeing that if we add a
+ * new lifecycle event to the array, any types that can be derived from that
+ * information will fail to typecheck until they handle the new event.
+ */
+declare type ComponentEventListenerBase = {
+    [event in keyof typeof lifecycleEmitters]: Array<Function>;
+};
+/**
+ * It'd be nice if we could just use ComponentEventListenerBase, but the
+ * shouldUpdate event gets processed differently, so we need a way to specify
+ * that some event listeners have non-void return types
+ */
+interface ComponentEventListeners<Props> extends ComponentEventListenerBase {
+    mount: Array<(props: Props & ForgoComponentProps, component: Component<Props>) => void>;
+    unmount: Array<(props: Props & ForgoComponentProps, component: Component<Props>) => void>;
+    afterRender: Array<(props: Props & ForgoComponentProps, previousNode: ChildNode | undefined, component: Component<Props>) => void>;
+    shouldUpdate: Array<(newProps: Props & ForgoComponentProps, oldProps: Props & ForgoComponentProps, component: Component<Props>) => boolean>;
+}
+interface ComponentInternal<Props> {
+    unmounted: boolean;
+    registeredMethods: ForgoComponentMethods<Props>;
+    eventListeners: ComponentEventListeners<Props>;
+    element: ForgoElementArg;
+}
+declare const lifecycleEmitters: {
+    mount<Props, Return = void>(component: Component<Props>, props: Props): void;
+    unmount<Props_1>(component: Component<Props_1>, props: Props_1): void;
+    shouldUpdate<Props_2>(component: Component<Props_2>, newProps: Props_2, oldProps: Props_2): boolean;
+    afterRender<Props_3>(component: Component<Props_3>, props: Props_3, previousNode: ChildNode | undefined): void;
+};
+/**
+ * This class represents your component. It holds lifecycle methods and event
+ * listeners. You may pass it around your application and to 3rd-party libraries
+ * to build reusable logic.
+ */
+export declare class Component<Props extends {} = {}> {
+    /** @internal */
+    __internal: ComponentInternal<Props>;
+    /**
+     * @params methods The render method is mandatory. It receives your current
+     * props and returns JSX that Forgo will render to the page. Other methods are
+     * optional. See the forgojs.org for more details.
+     */
+    constructor(registeredMethods: ForgoComponentMethods<Props>);
+    update(props?: Props): void;
+    addEventListener<Event extends keyof ComponentEventListeners<Props>>(event: Event, listener: ComponentEventListeners<Props>[Event][number]): void;
+}
 export declare function createElement<TProps extends ForgoElementProps & {
@@ -159,0 +193,0 @@ key?: any;

package.json

 {
   "name": "forgo",
-  "version": "3.1.1",
+  "version": "4.0.0-alpha.0",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "type": "module",

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

277165

decreased by-22.2%

Number of package files

13

decreased by-23.53%

Lines of code

3727

decreased by-21.93%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes