forgo - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

CHANGELOG.md

@@ -1,4 +0,17 @@
-# Unreleased
-- #59: The legacy component syntax has been deprecated, and will be removed in v4.0.
-For more details, please see the deprecation notice on https://forgojs.org.
+# 3.2.1
+
+- Fix #50: Components that returned a fragment saw their `mount` lifecycle
+  method called after the first child element had been created instead of after
+  the render had completed. 
+- Fix a bug where calling `component.update()` during a mount lifecycle handler
+  resulted in the component recursively mounting ad infinitum.
+- Fix #75: ESLint plugin `eslint-plugin-import` could not resolve imports of Forgo
+- Add TSX support for custom element tag names. Non-string attributes are not
+  yet supported
+
+# 3.2.0
+
+- #59: Forgo's legacy component syntax (component syntax used through v3.1.1)
+  has been deprecated, and will be removed in v4.0. For more details, please see
+  the deprecation notice on https://forgojs.org.
 - Fix #62: ensure that a child component's `mount()` lifecycle method is only
@@ -10,5 +23,7 @@ called after its parent has completely finished rendering
 # 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)
@@ -15,0 +30,0 @@

dist/forgo.min.js

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

dist/index.d.ts

@@ -119,2 +119,3 @@ export declare type ForgoRef<T> = {
     nodes: ChildNode[];
+    pendingMounts: (() => void)[];
 };
@@ -211,2 +212,3 @@ export declare type DeletedNode = {
     mount: (forgoNode: ForgoNode, container: Element | string | null) => RenderResult;
+    unmount: (container: Element | string | null) => void;
     render: (forgoNode: ForgoNode) => {
@@ -219,3 +221,11 @@ node: ChildNode;
 export declare function setCustomEnv(customEnv: any): void;
+/**
+ * Attach a new Forgo application to a DOM element
+ */
 export declare function mount(forgoNode: ForgoNode, container: Element | string | null): RenderResult;
+/**
+ * Unmount a Forgo application from outside.
+ * @param container The root element that the Forgo app was mounted onto
+ */
+export declare function unmount(container: Element | string | null): void;
 export declare function render(forgoNode: ForgoNode): {
@@ -222,0 +232,0 @@ node: ChildNode;

dist/jsxTypes.d.ts

@@ -542,164 +542,7 @@ import type { ForgoDOMElementProps } from "./index.js";
 }
-export interface IntrinsicElements {
-    a: HTMLAttributes<HTMLAnchorElement>;
-    abbr: HTMLAttributes<HTMLElement>;
-    address: HTMLAttributes<HTMLElement>;
-    area: HTMLAttributes<HTMLAreaElement>;
-    article: HTMLAttributes<HTMLElement>;
-    aside: HTMLAttributes<HTMLElement>;
-    audio: HTMLAttributes<HTMLAudioElement>;
-    b: HTMLAttributes<HTMLElement>;
-    base: HTMLAttributes<HTMLBaseElement>;
-    bdi: HTMLAttributes<HTMLElement>;
-    bdo: HTMLAttributes<HTMLElement>;
-    big: HTMLAttributes<HTMLElement>;
-    blockquote: HTMLAttributes<HTMLQuoteElement>;
-    body: HTMLAttributes<HTMLBodyElement>;
-    br: HTMLAttributes<HTMLBRElement>;
-    button: HTMLAttributes<HTMLButtonElement>;
-    canvas: HTMLAttributes<HTMLCanvasElement>;
-    caption: HTMLAttributes<HTMLTableCaptionElement>;
-    cite: HTMLAttributes<HTMLElement>;
-    code: HTMLAttributes<HTMLElement>;
-    col: HTMLAttributes<HTMLTableColElement>;
-    colgroup: HTMLAttributes<HTMLTableColElement>;
-    data: HTMLAttributes<HTMLDataElement>;
-    datalist: HTMLAttributes<HTMLDataListElement>;
-    dd: HTMLAttributes<HTMLElement>;
-    del: HTMLAttributes<HTMLModElement>;
-    details: HTMLAttributes<HTMLDetailsElement>;
-    dfn: HTMLAttributes<HTMLElement>;
-    dialog: HTMLAttributes<HTMLDialogElement>;
-    div: HTMLAttributes<HTMLDivElement>;
-    dl: HTMLAttributes<HTMLDListElement>;
-    dt: HTMLAttributes<HTMLElement>;
-    em: HTMLAttributes<HTMLElement>;
-    embed: HTMLAttributes<HTMLEmbedElement>;
-    fieldset: HTMLAttributes<HTMLFieldSetElement>;
-    figcaption: HTMLAttributes<HTMLElement>;
-    figure: HTMLAttributes<HTMLElement>;
-    footer: HTMLAttributes<HTMLElement>;
-    form: HTMLAttributes<HTMLFormElement>;
-    h1: HTMLAttributes<HTMLHeadingElement>;
-    h2: HTMLAttributes<HTMLHeadingElement>;
-    h3: HTMLAttributes<HTMLHeadingElement>;
-    h4: HTMLAttributes<HTMLHeadingElement>;
-    h5: HTMLAttributes<HTMLHeadingElement>;
-    h6: HTMLAttributes<HTMLHeadingElement>;
-    head: HTMLAttributes<HTMLHeadElement>;
-    header: HTMLAttributes<HTMLElement>;
-    hgroup: HTMLAttributes<HTMLElement>;
-    hr: HTMLAttributes<HTMLHRElement>;
-    html: HTMLAttributes<HTMLHtmlElement>;
-    i: HTMLAttributes<HTMLElement>;
-    iframe: HTMLAttributes<HTMLIFrameElement>;
-    img: HTMLAttributes<HTMLImageElement>;
-    input: HTMLAttributes<HTMLInputElement>;
-    ins: HTMLAttributes<HTMLModElement>;
-    kbd: HTMLAttributes<HTMLElement>;
-    keygen: HTMLAttributes<HTMLUnknownElement>;
-    label: HTMLAttributes<HTMLLabelElement>;
-    legend: HTMLAttributes<HTMLLegendElement>;
-    li: HTMLAttributes<HTMLLIElement>;
-    link: HTMLAttributes<HTMLLinkElement>;
-    main: HTMLAttributes<HTMLElement>;
-    map: HTMLAttributes<HTMLMapElement>;
-    mark: HTMLAttributes<HTMLElement>;
-    marquee: HTMLAttributes<HTMLMarqueeElement>;
-    menu: HTMLAttributes<HTMLMenuElement>;
-    menuitem: HTMLAttributes<HTMLUnknownElement>;
-    meta: HTMLAttributes<HTMLMetaElement>;
-    meter: HTMLAttributes<HTMLMeterElement>;
-    nav: HTMLAttributes<HTMLElement>;
-    noscript: HTMLAttributes<HTMLElement>;
-    object: HTMLAttributes<HTMLObjectElement>;
-    ol: HTMLAttributes<HTMLOListElement>;
-    optgroup: HTMLAttributes<HTMLOptGroupElement>;
-    option: HTMLAttributes<HTMLOptionElement>;
-    output: HTMLAttributes<HTMLOutputElement>;
-    p: HTMLAttributes<HTMLParagraphElement>;
-    param: HTMLAttributes<HTMLParamElement>;
-    picture: HTMLAttributes<HTMLPictureElement>;
-    pre: HTMLAttributes<HTMLPreElement>;
-    progress: HTMLAttributes<HTMLProgressElement>;
-    q: HTMLAttributes<HTMLQuoteElement>;
-    rp: HTMLAttributes<HTMLElement>;
-    rt: HTMLAttributes<HTMLElement>;
-    ruby: HTMLAttributes<HTMLElement>;
-    s: HTMLAttributes<HTMLElement>;
-    samp: HTMLAttributes<HTMLElement>;
-    script: HTMLAttributes<HTMLScriptElement>;
-    section: HTMLAttributes<HTMLElement>;
-    select: HTMLAttributes<HTMLSelectElement>;
-    slot: HTMLAttributes<HTMLSlotElement>;
-    small: HTMLAttributes<HTMLElement>;
-    source: HTMLAttributes<HTMLSourceElement>;
-    span: HTMLAttributes<HTMLSpanElement>;
-    strong: HTMLAttributes<HTMLElement>;
-    style: HTMLAttributes<HTMLStyleElement>;
-    sub: HTMLAttributes<HTMLElement>;
-    summary: HTMLAttributes<HTMLElement>;
-    sup: HTMLAttributes<HTMLElement>;
-    table: HTMLAttributes<HTMLTableElement>;
-    tbody: HTMLAttributes<HTMLTableSectionElement>;
-    td: HTMLAttributes<HTMLTableCellElement>;
-    textarea: HTMLAttributes<HTMLTextAreaElement>;
-    tfoot: HTMLAttributes<HTMLTableSectionElement>;
-    th: HTMLAttributes<HTMLTableCellElement>;
-    thead: HTMLAttributes<HTMLTableSectionElement>;
-    time: HTMLAttributes<HTMLTimeElement>;
-    title: HTMLAttributes<HTMLTitleElement>;
-    tr: HTMLAttributes<HTMLTableRowElement>;
-    track: HTMLAttributes<HTMLTrackElement>;
-    u: HTMLAttributes<HTMLElement>;
-    ul: HTMLAttributes<HTMLUListElement>;
-    var: HTMLAttributes<HTMLElement>;
-    video: HTMLAttributes<HTMLVideoElement>;
-    wbr: HTMLAttributes<HTMLElement>;
-    svg: SVGAttributes<SVGSVGElement>;
-    animate: SVGAttributes<SVGAnimateElement>;
-    circle: SVGAttributes<SVGCircleElement>;
-    animateTransform: SVGAttributes<SVGAnimateElement>;
-    clipPath: SVGAttributes<SVGClipPathElement>;
-    defs: SVGAttributes<SVGDefsElement>;
-    desc: SVGAttributes<SVGDescElement>;
-    ellipse: SVGAttributes<SVGEllipseElement>;
-    feBlend: SVGAttributes<SVGFEBlendElement>;
-    feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
-    feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
-    feComposite: SVGAttributes<SVGFECompositeElement>;
-    feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
-    feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
-    feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
-    feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
-    feFlood: SVGAttributes<SVGFEFloodElement>;
-    feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
-    feImage: SVGAttributes<SVGFEImageElement>;
-    feMerge: SVGAttributes<SVGFEMergeElement>;
-    feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
-    feMorphology: SVGAttributes<SVGFEMorphologyElement>;
-    feOffset: SVGAttributes<SVGFEOffsetElement>;
-    feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
-    feTile: SVGAttributes<SVGFETileElement>;
-    feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
-    filter: SVGAttributes<SVGFilterElement>;
-    foreignObject: SVGAttributes<SVGForeignObjectElement>;
-    g: SVGAttributes<SVGGElement>;
-    image: SVGAttributes<SVGImageElement>;
-    line: SVGAttributes<SVGLineElement>;
-    linearGradient: SVGAttributes<SVGLinearGradientElement>;
-    marker: SVGAttributes<SVGMarkerElement>;
-    mask: SVGAttributes<SVGMaskElement>;
-    path: SVGAttributes<SVGPathElement>;
-    pattern: SVGAttributes<SVGPatternElement>;
-    polygon: SVGAttributes<SVGPolygonElement>;
-    polyline: SVGAttributes<SVGPolylineElement>;
-    radialGradient: SVGAttributes<SVGRadialGradientElement>;
-    rect: SVGAttributes<SVGRectElement>;
-    stop: SVGAttributes<SVGStopElement>;
-    symbol: SVGAttributes<SVGSymbolElement>;
-    text: SVGAttributes<SVGTextElement>;
-    tspan: SVGAttributes<SVGTSpanElement>;
-    use: SVGAttributes<SVGUseElement>;
-}
+export declare type IntrinsicElements = {
+    [el in keyof Omit<SVGElementTagNameMap, "a">]: HTMLAttributes<SVGElementTagNameMap[el]>;
+} & {
+    [el in keyof HTMLElementTagNameMap]: HTMLAttributes<HTMLElementTagNameMap[el]>;
+};
 export {};

package.json

 {
   "name": "forgo",
-  "version": "3.2.0",
-  "main": "./dist/index.js",
+  "version": "3.2.1",
+  "main": "./dist/forgo.min.js",
   "type": "module",
@@ -6,0 +6,0 @@ "author": "Jeswin Kumar<[e-mail]>",

README.md

@@ -164,2 +164,28 @@ # forgo
 
+If you assign the component to a variable (such as when adding lifecycle event
+handlers), you'll need to annotate the generic types on both the constructor and
+the component. 
+
+_If you're handy with TypeScript, [we'd love a PR to infer the types!](https://github.com/forgojs/forgo/issues/68)_
+
+```tsx
+import * as forgo from "forgo";
+import type { ForgoNewComponentCtor } from "forgo";
+
+interface HelloWorldProps {
+  name: string;
+}
+const HelloWorld: ForgoNewComponentCtor<HelloWorldProps> = () => {
+  const component = new forgo.Component<HelloWorldProps>({
+    render({ name }) {
+      return <p>Hello, {name}!</p>;
+    }
+  });
+
+  component.mount(() => console.log("Mounted!"));
+
+  return component;
+};
+```
+
 ## Launching your components when the page loads
@@ -166,0 +192,0 @@

src/jsxTypes.ts

@@ -703,166 +703,14 @@ import type { ForgoDOMElementProps } from "./index.js";
 
-export interface IntrinsicElements {
-  // HTML
-  a: HTMLAttributes<HTMLAnchorElement>;
-  abbr: HTMLAttributes<HTMLElement>;
-  address: HTMLAttributes<HTMLElement>;
-  area: HTMLAttributes<HTMLAreaElement>;
-  article: HTMLAttributes<HTMLElement>;
-  aside: HTMLAttributes<HTMLElement>;
-  audio: HTMLAttributes<HTMLAudioElement>;
-  b: HTMLAttributes<HTMLElement>;
-  base: HTMLAttributes<HTMLBaseElement>;
-  bdi: HTMLAttributes<HTMLElement>;
-  bdo: HTMLAttributes<HTMLElement>;
-  big: HTMLAttributes<HTMLElement>;
-  blockquote: HTMLAttributes<HTMLQuoteElement>;
-  body: HTMLAttributes<HTMLBodyElement>;
-  br: HTMLAttributes<HTMLBRElement>;
-  button: HTMLAttributes<HTMLButtonElement>;
-  canvas: HTMLAttributes<HTMLCanvasElement>;
-  caption: HTMLAttributes<HTMLTableCaptionElement>;
-  cite: HTMLAttributes<HTMLElement>;
-  code: HTMLAttributes<HTMLElement>;
-  col: HTMLAttributes<HTMLTableColElement>;
-  colgroup: HTMLAttributes<HTMLTableColElement>;
-  data: HTMLAttributes<HTMLDataElement>;
-  datalist: HTMLAttributes<HTMLDataListElement>;
-  dd: HTMLAttributes<HTMLElement>;
-  del: HTMLAttributes<HTMLModElement>;
-  details: HTMLAttributes<HTMLDetailsElement>;
-  dfn: HTMLAttributes<HTMLElement>;
-  dialog: HTMLAttributes<HTMLDialogElement>;
-  div: HTMLAttributes<HTMLDivElement>;
-  dl: HTMLAttributes<HTMLDListElement>;
-  dt: HTMLAttributes<HTMLElement>;
-  em: HTMLAttributes<HTMLElement>;
-  embed: HTMLAttributes<HTMLEmbedElement>;
-  fieldset: HTMLAttributes<HTMLFieldSetElement>;
-  figcaption: HTMLAttributes<HTMLElement>;
-  figure: HTMLAttributes<HTMLElement>;
-  footer: HTMLAttributes<HTMLElement>;
-  form: HTMLAttributes<HTMLFormElement>;
-  h1: HTMLAttributes<HTMLHeadingElement>;
-  h2: HTMLAttributes<HTMLHeadingElement>;
-  h3: HTMLAttributes<HTMLHeadingElement>;
-  h4: HTMLAttributes<HTMLHeadingElement>;
-  h5: HTMLAttributes<HTMLHeadingElement>;
-  h6: HTMLAttributes<HTMLHeadingElement>;
-  head: HTMLAttributes<HTMLHeadElement>;
-  header: HTMLAttributes<HTMLElement>;
-  hgroup: HTMLAttributes<HTMLElement>;
-  hr: HTMLAttributes<HTMLHRElement>;
-  html: HTMLAttributes<HTMLHtmlElement>;
-  i: HTMLAttributes<HTMLElement>;
-  iframe: HTMLAttributes<HTMLIFrameElement>;
-  img: HTMLAttributes<HTMLImageElement>;
-  input: HTMLAttributes<HTMLInputElement>;
-  ins: HTMLAttributes<HTMLModElement>;
-  kbd: HTMLAttributes<HTMLElement>;
-  keygen: HTMLAttributes<HTMLUnknownElement>;
-  label: HTMLAttributes<HTMLLabelElement>;
-  legend: HTMLAttributes<HTMLLegendElement>;
-  li: HTMLAttributes<HTMLLIElement>;
-  link: HTMLAttributes<HTMLLinkElement>;
-  main: HTMLAttributes<HTMLElement>;
-  map: HTMLAttributes<HTMLMapElement>;
-  mark: HTMLAttributes<HTMLElement>;
-  marquee: HTMLAttributes<HTMLMarqueeElement>;
-  menu: HTMLAttributes<HTMLMenuElement>;
-  menuitem: HTMLAttributes<HTMLUnknownElement>;
-  meta: HTMLAttributes<HTMLMetaElement>;
-  meter: HTMLAttributes<HTMLMeterElement>;
-  nav: HTMLAttributes<HTMLElement>;
-  noscript: HTMLAttributes<HTMLElement>;
-  object: HTMLAttributes<HTMLObjectElement>;
-  ol: HTMLAttributes<HTMLOListElement>;
-  optgroup: HTMLAttributes<HTMLOptGroupElement>;
-  option: HTMLAttributes<HTMLOptionElement>;
-  output: HTMLAttributes<HTMLOutputElement>;
-  p: HTMLAttributes<HTMLParagraphElement>;
-  param: HTMLAttributes<HTMLParamElement>;
-  picture: HTMLAttributes<HTMLPictureElement>;
-  pre: HTMLAttributes<HTMLPreElement>;
-  progress: HTMLAttributes<HTMLProgressElement>;
-  q: HTMLAttributes<HTMLQuoteElement>;
-  rp: HTMLAttributes<HTMLElement>;
-  rt: HTMLAttributes<HTMLElement>;
-  ruby: HTMLAttributes<HTMLElement>;
-  s: HTMLAttributes<HTMLElement>;
-  samp: HTMLAttributes<HTMLElement>;
-  script: HTMLAttributes<HTMLScriptElement>;
-  section: HTMLAttributes<HTMLElement>;
-  select: HTMLAttributes<HTMLSelectElement>;
-  slot: HTMLAttributes<HTMLSlotElement>;
-  small: HTMLAttributes<HTMLElement>;
-  source: HTMLAttributes<HTMLSourceElement>;
-  span: HTMLAttributes<HTMLSpanElement>;
-  strong: HTMLAttributes<HTMLElement>;
-  style: HTMLAttributes<HTMLStyleElement>;
-  sub: HTMLAttributes<HTMLElement>;
-  summary: HTMLAttributes<HTMLElement>;
-  sup: HTMLAttributes<HTMLElement>;
-  table: HTMLAttributes<HTMLTableElement>;
-  tbody: HTMLAttributes<HTMLTableSectionElement>;
-  td: HTMLAttributes<HTMLTableCellElement>;
-  textarea: HTMLAttributes<HTMLTextAreaElement>;
-  tfoot: HTMLAttributes<HTMLTableSectionElement>;
-  th: HTMLAttributes<HTMLTableCellElement>;
-  thead: HTMLAttributes<HTMLTableSectionElement>;
-  time: HTMLAttributes<HTMLTimeElement>;
-  title: HTMLAttributes<HTMLTitleElement>;
-  tr: HTMLAttributes<HTMLTableRowElement>;
-  track: HTMLAttributes<HTMLTrackElement>;
-  u: HTMLAttributes<HTMLElement>;
-  ul: HTMLAttributes<HTMLUListElement>;
-  var: HTMLAttributes<HTMLElement>;
-  video: HTMLAttributes<HTMLVideoElement>;
-  wbr: HTMLAttributes<HTMLElement>;
-
-  //SVG
-  svg: SVGAttributes<SVGSVGElement>;
-  animate: SVGAttributes<SVGAnimateElement>;
-  circle: SVGAttributes<SVGCircleElement>;
-  animateTransform: SVGAttributes<SVGAnimateElement>;
-  clipPath: SVGAttributes<SVGClipPathElement>;
-  defs: SVGAttributes<SVGDefsElement>;
-  desc: SVGAttributes<SVGDescElement>;
-  ellipse: SVGAttributes<SVGEllipseElement>;
-  feBlend: SVGAttributes<SVGFEBlendElement>;
-  feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
-  feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
-  feComposite: SVGAttributes<SVGFECompositeElement>;
-  feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
-  feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
-  feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
-  feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
-  feFlood: SVGAttributes<SVGFEFloodElement>;
-  feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
-  feImage: SVGAttributes<SVGFEImageElement>;
-  feMerge: SVGAttributes<SVGFEMergeElement>;
-  feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
-  feMorphology: SVGAttributes<SVGFEMorphologyElement>;
-  feOffset: SVGAttributes<SVGFEOffsetElement>;
-  feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
-  feTile: SVGAttributes<SVGFETileElement>;
-  feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
-  filter: SVGAttributes<SVGFilterElement>;
-  foreignObject: SVGAttributes<SVGForeignObjectElement>;
-  g: SVGAttributes<SVGGElement>;
-  image: SVGAttributes<SVGImageElement>;
-  line: SVGAttributes<SVGLineElement>;
-  linearGradient: SVGAttributes<SVGLinearGradientElement>;
-  marker: SVGAttributes<SVGMarkerElement>;
-  mask: SVGAttributes<SVGMaskElement>;
-  path: SVGAttributes<SVGPathElement>;
-  pattern: SVGAttributes<SVGPatternElement>;
-  polygon: SVGAttributes<SVGPolygonElement>;
-  polyline: SVGAttributes<SVGPolylineElement>;
-  radialGradient: SVGAttributes<SVGRadialGradientElement>;
-  rect: SVGAttributes<SVGRectElement>;
-  stop: SVGAttributes<SVGStopElement>;
-  symbol: SVGAttributes<SVGSymbolElement>;
-  text: SVGAttributes<SVGTextElement>;
-  tspan: SVGAttributes<SVGTSpanElement>;
-  use: SVGAttributes<SVGUseElement>;
-}
+export type IntrinsicElements = {
+  // We have to omit the SVG anchor element because both HTML and SVG have an
+  // 'a' tag, and TSX gets confused about which one you mean if you have onclick
+  // handlers. Sadly that means things get weird if you try to use the SVG
+  // anchor tag, but I don't know how to support both.
+  [el in keyof Omit<SVGElementTagNameMap, "a">]: HTMLAttributes<
+    SVGElementTagNameMap[el]
+  >;
+} & {
+  [el in keyof HTMLElementTagNameMap]: HTMLAttributes<
+    HTMLElementTagNameMap[el]
+  >;
+};

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

1115

increased by2.39%

Worsened metrics

Total package byte prevSize

282062

decreased by-5.03%

Lines of code

3587

decreased by-6.86%

No dependency changes