Comparing version 3.2.0 to 3.2.1
@@ -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 @@ |
@@ -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 |
@@ -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; |
@@ -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 {}; |
{ | ||
"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<jeswinpk@agilehead.com>", |
@@ -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 @@ |
@@ -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] | ||
>; | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1115
282062
3587