From 9666c3d03472f3395938c6fd7b3d3169d960aa8a Mon Sep 17 00:00:00 2001 From: natxocc Date: Mon, 6 Apr 2026 19:05:13 +0200 Subject: [PATCH] Router transition --- dist/sigpro.esm.js | 2 +- dist/sigpro.esm.min.js | 2 +- dist/sigpro.js | 2 +- dist/sigpro.min.js | 2 +- docs/api/router.md | 8 ++++---- docs/sigpro.js | 2 +- sigpro.js | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/dist/sigpro.esm.js b/dist/sigpro.esm.js index bb5f67a..e1a2cbf 100644 --- a/dist/sigpro.esm.js +++ b/dist/sigpro.esm.js @@ -365,7 +365,7 @@ var For = (source, renderFn, keyFn, tag = "div", props = { style: "display:conte var Router = (routes) => { const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); - const outlet = Tag("div", { class: "router-outlet" }); + const outlet = Tag("div", { class: "router-transition" }); let currentView = null; Watch([currentPath], async () => { const path = currentPath(); diff --git a/dist/sigpro.esm.min.js b/dist/sigpro.esm.min.js index 4cc9925..da7601a 100644 --- a/dist/sigpro.esm.min.js +++ b/dist/sigpro.esm.min.js @@ -1 +1 @@ -var w=null,m=null,b=new Set,C=!1,R=new WeakMap,O=document,S=Array.isArray,M=Object.assign,j=(t)=>O.createElement(t),v=(t)=>O.createTextNode(String(t??"")),h=(t)=>typeof t==="function",P=(t)=>typeof t==="object"&&t!==null,T=(t,s)=>{let c=w;w=t;try{return s()}finally{w=c}},A=(t)=>{if(t._cleanups)t._cleanups.forEach((s)=>s()),t._cleanups.clear();t.childNodes?.forEach(A)},U=()=>{if(C)return;C=!0;while(b.size>0){let t=Array.from(b).sort((s,c)=>(s.depth||0)-(c.depth||0));b.clear();for(let s of t)if(!s._deleted)s()}C=!1},B=(t)=>{if(w&&!w._deleted)t.add(w),w._deps.add(t)},k=(t)=>{if(t.forEach((s)=>{if(s===w||s._deleted)return;if(s._isComputed){if(s.markDirty(),s._subs)k(s._subs)}else b.add(s)}),!C)queueMicrotask(U)},N=(t)=>{let s=new Set,c=m,i=j("div");i.style.display="contents",m={cleanups:s};let n=(e)=>{if(!e)return;if(e._isRuntime)s.add(e.destroy),i.appendChild(e.container);else if(S(e))e.forEach(n);else i.appendChild(e instanceof Node?e:v(e))};try{n(t({onCleanup:(e)=>s.add(e)}))}finally{m=c}return{_isRuntime:!0,container:i,destroy:()=>{s.forEach((e)=>e()),A(i),i.remove()}}},W=(t,s=null)=>{let c=new Set;if(h(t)){let n,e=!0,r=()=>{if(r._deleted)return;r._deps.forEach((a)=>a.delete(r)),r._deps.clear(),T(r,()=>{let a=t();if(!Object.is(n,a)||e)n=a,e=!1,k(c)})};if(M(r,{_deps:new Set,_isComputed:!0,_subs:c,_deleted:!1,markDirty:()=>e=!0,stop:()=>{r._deleted=!0,r._deps.forEach((a)=>a.delete(r)),c.clear()}}),m)m.cleanups.add(r.stop);return()=>{if(e)r();return B(c),n}}let i=t;if(s)try{let n=localStorage.getItem(s);if(n!==null)i=JSON.parse(n)}catch(n){console.warn("SigPro Storage Lock",n)}return(...n)=>{if(n.length){let e=h(n[0])?n[0](i):n[0];if(!Object.is(i,e)){if(i=e,s)localStorage.setItem(s,JSON.stringify(i));k(c)}}return B(c),i}},D=(t,s=new WeakMap)=>{if(!P(t))return t;if(s.has(t))return s.get(t);let c={},i=new Proxy(t,{get(n,e){if(w)B(c[e]??=new Set);let r=Reflect.get(n,e);return P(r)?D(r,s):r},set(n,e,r){if(Object.is(n[e],r))return!0;let a=Reflect.set(n,e,r);if(c[e])k(c[e]);return a}});return s.set(t,i),i},E=(t,s)=>{let c=S(t),i=c?s:t;if(!h(i))return()=>{};let n=m,e=()=>{if(e._deleted)return;e._deps.forEach((a)=>a.delete(e)),e._deps.clear(),e._cleanups.forEach((a)=>a()),e._cleanups.clear();let r=m;e.depth=w?w.depth+1:0,T(e,()=>{if(m={cleanups:e._cleanups},c)T(null,i),t.forEach((a)=>h(a)&&a());else i();m=r})};if(M(e,{_deps:new Set,_cleanups:new Set,_deleted:!1,stop:()=>{if(e._deleted)return;if(e._deleted=!0,b.delete(e),e._deps.forEach((r)=>r.delete(e)),e._cleanups.forEach((r)=>r()),n)n.cleanups.delete(e.stop)}}),n)n.cleanups.add(e.stop);return e(),e.stop},y=(t,s={},c=[])=>{if(s instanceof Node||S(s)||!P(s))c=s,s={};let n=/^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(t)?O.createElementNS("http://www.w3.org/2000/svg",t):j(t);n._cleanups=new Set,n.onUnmount=(o)=>n._cleanups.add(o);let e=["disabled","checked","required","readonly","selected","multiple","autofocus"],r=(o,l)=>{let d=(o==="src"||o==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;if(e.includes(o))n[o]=!!d,d?n.setAttribute(o,""):n.removeAttribute(o);else d==null?n.removeAttribute(o):n.setAttribute(o,d)};for(let[o,l]of Object.entries(s)){if(o==="ref"){h(l)?l(n):l.current=n;continue}let d=h(l);if(o.startsWith("on")){let p=o.slice(2).toLowerCase().split(".")[0];n.addEventListener(p,l),n._cleanups.add(()=>n.removeEventListener(p,l))}else if(d){if(n._cleanups.add(E(()=>{let p=l();o==="class"?n.className=p||"":r(o,p)})),["INPUT","TEXTAREA","SELECT"].includes(n.tagName)&&(o==="value"||o==="checked")){let p=o==="checked"?"change":"input",f=(u)=>l(u.target[o]);n.addEventListener(p,f),n._cleanups.add(()=>n.removeEventListener(p,f))}}else r(o,l)}let a=(o)=>{if(S(o))return o.forEach(a);if(h(o)){let l=v("");n.appendChild(l);let d=[];n._cleanups.add(E(()=>{let p=o(),f=(S(p)?p:[p]).map((u)=>u?._isRuntime?u.container:u instanceof Node?u:v(u));d.forEach((u)=>{A(u),u.remove()}),f.forEach((u)=>l.parentNode?.insertBefore(u,l)),d=f}))}else n.appendChild(o instanceof Node?o:v(o))};return a(c),n},q=(t,s,c=null,i=null)=>{let n=v(""),e=y("div",{style:"display:contents"},[n]),r=null,a=null;return E(()=>{let o=!!(h(t)?t():t);if(o===a)return;a=o;let l=()=>{if(r)r.destroy();r=null};if(r&&!o&&i?.out)i.out(r.container,l);else l();let d=o?s:c;if(d){if(r=N(()=>h(d)?d():d),e.insertBefore(r.container,n),o&&i?.in)i.in(r.container)}}),e},I=(t,s,c,i="div",n={style:"display:contents"})=>{let e=v(""),r=y(i,n,[e]),a=new Map;return E(()=>{let o=(h(t)?t():t)||[],l=new Map,d=[];for(let f=0;f{A(g),g.remove()}}:N(()=>g)}a.delete(x),l.set(x,L),d.push(x)}a.forEach((f)=>f.destroy());let p=e;for(let f=d.length-1;f>=0;f--){let u=l.get(d[f]);if(u.container.nextSibling!==p)r.insertBefore(u.container,p);p=u.container}a=l}),r},_=(t)=>{let s=W(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>s(window.location.hash.replace(/^#/,"")||"/"));let c=y("div",{class:"router-outlet"}),i=null;return E([s],async()=>{let n=s(),e=t.find((r)=>{let a=r.path.split("/").filter(Boolean),o=n.split("/").filter(Boolean);return a.length===o.length&&a.every((l,d)=>l.startsWith(":")||l===o[d])})||t.find((r)=>r.path==="*");if(e){let r=e.component;if(h(r)&&r.toString().includes("import"))r=(await r()).default||await r();let a={};if(e.path.split("/").filter(Boolean).forEach((o,l)=>{if(o.startsWith(":"))a[o.slice(1)]=n.split("/").filter(Boolean)[l]}),i)i.destroy();if(_.params)_.params(a);i=N(()=>{try{return h(r)?r(a):r}catch(o){return y("div",{class:"p-4 text-error"},"Error loading view")}}),c.appendChild(i.container)}}),c};_.params=W({});_.to=(t)=>window.location.hash=t.replace(/^#?\/?/,"#/");_.back=()=>window.history.back();_.path=()=>window.location.hash.replace(/^#/,"")||"/";var $=(t,s)=>{let c=typeof s==="string"?O.querySelector(s):s;if(!c)return;if(R.has(c))R.get(c).destroy();let i=N(h(t)?t:()=>t);return c.replaceChildren(i.container),R.set(c,i),i},V={$:W,$$:D,Render:N,Watch:E,Tag:y,If:q,For:I,Router:_,Mount:$};if(typeof window<"u")M(window,V),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(" ").forEach((s)=>{let c=s[0].toUpperCase()+s.slice(1);if(!(c in window))window[c]=(i,n)=>y(s,i,n)}),window.SigPro=Object.freeze(V);export{E as Watch,y as Tag,_ as Router,N as Render,$ as Mount,q as If,I as For,D as $$,W as $}; +var w=null,m=null,b=new Set,C=!1,R=new WeakMap,O=document,S=Array.isArray,M=Object.assign,j=(t)=>O.createElement(t),v=(t)=>O.createTextNode(String(t??"")),h=(t)=>typeof t==="function",P=(t)=>typeof t==="object"&&t!==null,T=(t,s)=>{let c=w;w=t;try{return s()}finally{w=c}},A=(t)=>{if(t._cleanups)t._cleanups.forEach((s)=>s()),t._cleanups.clear();t.childNodes?.forEach(A)},U=()=>{if(C)return;C=!0;while(b.size>0){let t=Array.from(b).sort((s,c)=>(s.depth||0)-(c.depth||0));b.clear();for(let s of t)if(!s._deleted)s()}C=!1},B=(t)=>{if(w&&!w._deleted)t.add(w),w._deps.add(t)},k=(t)=>{if(t.forEach((s)=>{if(s===w||s._deleted)return;if(s._isComputed){if(s.markDirty(),s._subs)k(s._subs)}else b.add(s)}),!C)queueMicrotask(U)},N=(t)=>{let s=new Set,c=m,i=j("div");i.style.display="contents",m={cleanups:s};let n=(e)=>{if(!e)return;if(e._isRuntime)s.add(e.destroy),i.appendChild(e.container);else if(S(e))e.forEach(n);else i.appendChild(e instanceof Node?e:v(e))};try{n(t({onCleanup:(e)=>s.add(e)}))}finally{m=c}return{_isRuntime:!0,container:i,destroy:()=>{s.forEach((e)=>e()),A(i),i.remove()}}},W=(t,s=null)=>{let c=new Set;if(h(t)){let n,e=!0,r=()=>{if(r._deleted)return;r._deps.forEach((a)=>a.delete(r)),r._deps.clear(),T(r,()=>{let a=t();if(!Object.is(n,a)||e)n=a,e=!1,k(c)})};if(M(r,{_deps:new Set,_isComputed:!0,_subs:c,_deleted:!1,markDirty:()=>e=!0,stop:()=>{r._deleted=!0,r._deps.forEach((a)=>a.delete(r)),c.clear()}}),m)m.cleanups.add(r.stop);return()=>{if(e)r();return B(c),n}}let i=t;if(s)try{let n=localStorage.getItem(s);if(n!==null)i=JSON.parse(n)}catch(n){console.warn("SigPro Storage Lock",n)}return(...n)=>{if(n.length){let e=h(n[0])?n[0](i):n[0];if(!Object.is(i,e)){if(i=e,s)localStorage.setItem(s,JSON.stringify(i));k(c)}}return B(c),i}},D=(t,s=new WeakMap)=>{if(!P(t))return t;if(s.has(t))return s.get(t);let c={},i=new Proxy(t,{get(n,e){if(w)B(c[e]??=new Set);let r=Reflect.get(n,e);return P(r)?D(r,s):r},set(n,e,r){if(Object.is(n[e],r))return!0;let a=Reflect.set(n,e,r);if(c[e])k(c[e]);return a}});return s.set(t,i),i},E=(t,s)=>{let c=S(t),i=c?s:t;if(!h(i))return()=>{};let n=m,e=()=>{if(e._deleted)return;e._deps.forEach((a)=>a.delete(e)),e._deps.clear(),e._cleanups.forEach((a)=>a()),e._cleanups.clear();let r=m;e.depth=w?w.depth+1:0,T(e,()=>{if(m={cleanups:e._cleanups},c)T(null,i),t.forEach((a)=>h(a)&&a());else i();m=r})};if(M(e,{_deps:new Set,_cleanups:new Set,_deleted:!1,stop:()=>{if(e._deleted)return;if(e._deleted=!0,b.delete(e),e._deps.forEach((r)=>r.delete(e)),e._cleanups.forEach((r)=>r()),n)n.cleanups.delete(e.stop)}}),n)n.cleanups.add(e.stop);return e(),e.stop},y=(t,s={},c=[])=>{if(s instanceof Node||S(s)||!P(s))c=s,s={};let n=/^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(t)?O.createElementNS("http://www.w3.org/2000/svg",t):j(t);n._cleanups=new Set,n.onUnmount=(o)=>n._cleanups.add(o);let e=["disabled","checked","required","readonly","selected","multiple","autofocus"],r=(o,l)=>{let d=(o==="src"||o==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;if(e.includes(o))n[o]=!!d,d?n.setAttribute(o,""):n.removeAttribute(o);else d==null?n.removeAttribute(o):n.setAttribute(o,d)};for(let[o,l]of Object.entries(s)){if(o==="ref"){h(l)?l(n):l.current=n;continue}let d=h(l);if(o.startsWith("on")){let p=o.slice(2).toLowerCase().split(".")[0];n.addEventListener(p,l),n._cleanups.add(()=>n.removeEventListener(p,l))}else if(d){if(n._cleanups.add(E(()=>{let p=l();o==="class"?n.className=p||"":r(o,p)})),["INPUT","TEXTAREA","SELECT"].includes(n.tagName)&&(o==="value"||o==="checked")){let p=o==="checked"?"change":"input",f=(u)=>l(u.target[o]);n.addEventListener(p,f),n._cleanups.add(()=>n.removeEventListener(p,f))}}else r(o,l)}let a=(o)=>{if(S(o))return o.forEach(a);if(h(o)){let l=v("");n.appendChild(l);let d=[];n._cleanups.add(E(()=>{let p=o(),f=(S(p)?p:[p]).map((u)=>u?._isRuntime?u.container:u instanceof Node?u:v(u));d.forEach((u)=>{A(u),u.remove()}),f.forEach((u)=>l.parentNode?.insertBefore(u,l)),d=f}))}else n.appendChild(o instanceof Node?o:v(o))};return a(c),n},q=(t,s,c=null,i=null)=>{let n=v(""),e=y("div",{style:"display:contents"},[n]),r=null,a=null;return E(()=>{let o=!!(h(t)?t():t);if(o===a)return;a=o;let l=()=>{if(r)r.destroy();r=null};if(r&&!o&&i?.out)i.out(r.container,l);else l();let d=o?s:c;if(d){if(r=N(()=>h(d)?d():d),e.insertBefore(r.container,n),o&&i?.in)i.in(r.container)}}),e},I=(t,s,c,i="div",n={style:"display:contents"})=>{let e=v(""),r=y(i,n,[e]),a=new Map;return E(()=>{let o=(h(t)?t():t)||[],l=new Map,d=[];for(let f=0;f{A(g),g.remove()}}:N(()=>g)}a.delete(x),l.set(x,L),d.push(x)}a.forEach((f)=>f.destroy());let p=e;for(let f=d.length-1;f>=0;f--){let u=l.get(d[f]);if(u.container.nextSibling!==p)r.insertBefore(u.container,p);p=u.container}a=l}),r},_=(t)=>{let s=W(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>s(window.location.hash.replace(/^#/,"")||"/"));let c=y("div",{class:"router-transition"}),i=null;return E([s],async()=>{let n=s(),e=t.find((r)=>{let a=r.path.split("/").filter(Boolean),o=n.split("/").filter(Boolean);return a.length===o.length&&a.every((l,d)=>l.startsWith(":")||l===o[d])})||t.find((r)=>r.path==="*");if(e){let r=e.component;if(h(r)&&r.toString().includes("import"))r=(await r()).default||await r();let a={};if(e.path.split("/").filter(Boolean).forEach((o,l)=>{if(o.startsWith(":"))a[o.slice(1)]=n.split("/").filter(Boolean)[l]}),i)i.destroy();if(_.params)_.params(a);i=N(()=>{try{return h(r)?r(a):r}catch(o){return y("div",{class:"p-4 text-error"},"Error loading view")}}),c.appendChild(i.container)}}),c};_.params=W({});_.to=(t)=>window.location.hash=t.replace(/^#?\/?/,"#/");_.back=()=>window.history.back();_.path=()=>window.location.hash.replace(/^#/,"")||"/";var $=(t,s)=>{let c=typeof s==="string"?O.querySelector(s):s;if(!c)return;if(R.has(c))R.get(c).destroy();let i=N(h(t)?t:()=>t);return c.replaceChildren(i.container),R.set(c,i),i},V={$:W,$$:D,Render:N,Watch:E,Tag:y,If:q,For:I,Router:_,Mount:$};if(typeof window<"u")M(window,V),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(" ").forEach((s)=>{let c=s[0].toUpperCase()+s.slice(1);if(!(c in window))window[c]=(i,n)=>y(s,i,n)}),window.SigPro=Object.freeze(V);export{E as Watch,y as Tag,_ as Router,N as Render,$ as Mount,q as If,I as For,D as $$,W as $}; diff --git a/dist/sigpro.js b/dist/sigpro.js index 70f8da7..d7b2776 100644 --- a/dist/sigpro.js +++ b/dist/sigpro.js @@ -408,7 +408,7 @@ var Router = (routes) => { const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); - const outlet = Tag("div", { class: "router-outlet" }); + const outlet = Tag("div", { class: "router-transition" }); let currentView = null; Watch([currentPath], async () => { const path = currentPath(); diff --git a/dist/sigpro.min.js b/dist/sigpro.min.js index fdee9a4..c5918ba 100644 --- a/dist/sigpro.min.js +++ b/dist/sigpro.min.js @@ -1 +1 @@ -(()=>{var{defineProperty:P,getOwnPropertyNames:F,getOwnPropertyDescriptor:G}=Object,J=Object.prototype.hasOwnProperty;var D=new WeakMap,Q=(e)=>{var t=D.get(e),o;if(t)return t;if(t=P({},"__esModule",{value:!0}),e&&typeof e==="object"||typeof e==="function")F(e).map((c)=>!J.call(t,c)&&P(t,c,{get:()=>e[c],enumerable:!(o=G(e,c))||o.enumerable}));return D.set(e,t),t};var X=(e,t)=>{for(var o in t)P(e,o,{get:t[o],enumerable:!0,configurable:!0,set:(c)=>t[o]=()=>c})};var Y={};X(Y,{Watch:()=>v,Tag:()=>E,Router:()=>_,Render:()=>g,Mount:()=>z,If:()=>I,For:()=>$,$$:()=>j,$:()=>L});var w=null,m=null,S=new Set,C=!1,T=new WeakMap,O=document,N=Array.isArray,V=Object.assign,q=(e)=>O.createElement(e),y=(e)=>O.createTextNode(String(e??"")),h=(e)=>typeof e==="function",B=(e)=>typeof e==="object"&&e!==null,M=(e,t)=>{let o=w;w=e;try{return t()}finally{w=o}},A=(e)=>{if(e._cleanups)e._cleanups.forEach((t)=>t()),e._cleanups.clear();e.childNodes?.forEach(A)},H=()=>{if(C)return;C=!0;while(S.size>0){let e=Array.from(S).sort((t,o)=>(t.depth||0)-(o.depth||0));S.clear();for(let t of e)if(!t._deleted)t()}C=!1},W=(e)=>{if(w&&!w._deleted)e.add(w),w._deps.add(e)},k=(e)=>{if(e.forEach((t)=>{if(t===w||t._deleted)return;if(t._isComputed){if(t.markDirty(),t._subs)k(t._subs)}else S.add(t)}),!C)queueMicrotask(H)},g=(e)=>{let t=new Set,o=m,c=q("div");c.style.display="contents",m={cleanups:t};let s=(n)=>{if(!n)return;if(n._isRuntime)t.add(n.destroy),c.appendChild(n.container);else if(N(n))n.forEach(s);else c.appendChild(n instanceof Node?n:y(n))};try{s(e({onCleanup:(n)=>t.add(n)}))}finally{m=o}return{_isRuntime:!0,container:c,destroy:()=>{t.forEach((n)=>n()),A(c),c.remove()}}},L=(e,t=null)=>{let o=new Set;if(h(e)){let s,n=!0,r=()=>{if(r._deleted)return;r._deps.forEach((a)=>a.delete(r)),r._deps.clear(),M(r,()=>{let a=e();if(!Object.is(s,a)||n)s=a,n=!1,k(o)})};if(V(r,{_deps:new Set,_isComputed:!0,_subs:o,_deleted:!1,markDirty:()=>n=!0,stop:()=>{r._deleted=!0,r._deps.forEach((a)=>a.delete(r)),o.clear()}}),m)m.cleanups.add(r.stop);return()=>{if(n)r();return W(o),s}}let c=e;if(t)try{let s=localStorage.getItem(t);if(s!==null)c=JSON.parse(s)}catch(s){console.warn("SigPro Storage Lock",s)}return(...s)=>{if(s.length){let n=h(s[0])?s[0](c):s[0];if(!Object.is(c,n)){if(c=n,t)localStorage.setItem(t,JSON.stringify(c));k(o)}}return W(o),c}},j=(e,t=new WeakMap)=>{if(!B(e))return e;if(t.has(e))return t.get(e);let o={},c=new Proxy(e,{get(s,n){if(w)W(o[n]??=new Set);let r=Reflect.get(s,n);return B(r)?j(r,t):r},set(s,n,r){if(Object.is(s[n],r))return!0;let a=Reflect.set(s,n,r);if(o[n])k(o[n]);return a}});return t.set(e,c),c},v=(e,t)=>{let o=N(e),c=o?t:e;if(!h(c))return()=>{};let s=m,n=()=>{if(n._deleted)return;n._deps.forEach((a)=>a.delete(n)),n._deps.clear(),n._cleanups.forEach((a)=>a()),n._cleanups.clear();let r=m;n.depth=w?w.depth+1:0,M(n,()=>{if(m={cleanups:n._cleanups},o)M(null,c),e.forEach((a)=>h(a)&&a());else c();m=r})};if(V(n,{_deps:new Set,_cleanups:new Set,_deleted:!1,stop:()=>{if(n._deleted)return;if(n._deleted=!0,S.delete(n),n._deps.forEach((r)=>r.delete(n)),n._cleanups.forEach((r)=>r()),s)s.cleanups.delete(n.stop)}}),s)s.cleanups.add(n.stop);return n(),n.stop},E=(e,t={},o=[])=>{if(t instanceof Node||N(t)||!B(t))o=t,t={};let s=/^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(e)?O.createElementNS("http://www.w3.org/2000/svg",e):q(e);s._cleanups=new Set,s.onUnmount=(i)=>s._cleanups.add(i);let n=["disabled","checked","required","readonly","selected","multiple","autofocus"],r=(i,l)=>{let d=(i==="src"||i==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;if(n.includes(i))s[i]=!!d,d?s.setAttribute(i,""):s.removeAttribute(i);else d==null?s.removeAttribute(i):s.setAttribute(i,d)};for(let[i,l]of Object.entries(t)){if(i==="ref"){h(l)?l(s):l.current=s;continue}let d=h(l);if(i.startsWith("on")){let p=i.slice(2).toLowerCase().split(".")[0];s.addEventListener(p,l),s._cleanups.add(()=>s.removeEventListener(p,l))}else if(d){if(s._cleanups.add(v(()=>{let p=l();i==="class"?s.className=p||"":r(i,p)})),["INPUT","TEXTAREA","SELECT"].includes(s.tagName)&&(i==="value"||i==="checked")){let p=i==="checked"?"change":"input",f=(u)=>l(u.target[i]);s.addEventListener(p,f),s._cleanups.add(()=>s.removeEventListener(p,f))}}else r(i,l)}let a=(i)=>{if(N(i))return i.forEach(a);if(h(i)){let l=y("");s.appendChild(l);let d=[];s._cleanups.add(v(()=>{let p=i(),f=(N(p)?p:[p]).map((u)=>u?._isRuntime?u.container:u instanceof Node?u:y(u));d.forEach((u)=>{A(u),u.remove()}),f.forEach((u)=>l.parentNode?.insertBefore(u,l)),d=f}))}else s.appendChild(i instanceof Node?i:y(i))};return a(o),s},I=(e,t,o=null,c=null)=>{let s=y(""),n=E("div",{style:"display:contents"},[s]),r=null,a=null;return v(()=>{let i=!!(h(e)?e():e);if(i===a)return;a=i;let l=()=>{if(r)r.destroy();r=null};if(r&&!i&&c?.out)c.out(r.container,l);else l();let d=i?t:o;if(d){if(r=g(()=>h(d)?d():d),n.insertBefore(r.container,s),i&&c?.in)c.in(r.container)}}),n},$=(e,t,o,c="div",s={style:"display:contents"})=>{let n=y(""),r=E(c,s,[n]),a=new Map;return v(()=>{let i=(h(e)?e():e)||[],l=new Map,d=[];for(let f=0;f{A(b),b.remove()}}:g(()=>b)}a.delete(x),l.set(x,R),d.push(x)}a.forEach((f)=>f.destroy());let p=n;for(let f=d.length-1;f>=0;f--){let u=l.get(d[f]);if(u.container.nextSibling!==p)r.insertBefore(u.container,p);p=u.container}a=l}),r},_=(e)=>{let t=L(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>t(window.location.hash.replace(/^#/,"")||"/"));let o=E("div",{class:"router-outlet"}),c=null;return v([t],async()=>{let s=t(),n=e.find((r)=>{let a=r.path.split("/").filter(Boolean),i=s.split("/").filter(Boolean);return a.length===i.length&&a.every((l,d)=>l.startsWith(":")||l===i[d])})||e.find((r)=>r.path==="*");if(n){let r=n.component;if(h(r)&&r.toString().includes("import"))r=(await r()).default||await r();let a={};if(n.path.split("/").filter(Boolean).forEach((i,l)=>{if(i.startsWith(":"))a[i.slice(1)]=s.split("/").filter(Boolean)[l]}),c)c.destroy();if(_.params)_.params(a);c=g(()=>{try{return h(r)?r(a):r}catch(i){return E("div",{class:"p-4 text-error"},"Error loading view")}}),o.appendChild(c.container)}}),o};_.params=L({});_.to=(e)=>window.location.hash=e.replace(/^#?\/?/,"#/");_.back=()=>window.history.back();_.path=()=>window.location.hash.replace(/^#/,"")||"/";var z=(e,t)=>{let o=typeof t==="string"?O.querySelector(t):t;if(!o)return;if(T.has(o))T.get(o).destroy();let c=g(h(e)?e:()=>e);return o.replaceChildren(c.container),T.set(o,c),c},U={$:L,$$:j,Render:g,Watch:v,Tag:E,If:I,For:$,Router:_,Mount:z};if(typeof window<"u")V(window,U),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(" ").forEach((t)=>{let o=t[0].toUpperCase()+t.slice(1);if(!(o in window))window[o]=(c,s)=>E(t,c,s)}),window.SigPro=Object.freeze(U);})(); +(()=>{var{defineProperty:P,getOwnPropertyNames:F,getOwnPropertyDescriptor:G}=Object,J=Object.prototype.hasOwnProperty;var D=new WeakMap,Q=(e)=>{var t=D.get(e),o;if(t)return t;if(t=P({},"__esModule",{value:!0}),e&&typeof e==="object"||typeof e==="function")F(e).map((c)=>!J.call(t,c)&&P(t,c,{get:()=>e[c],enumerable:!(o=G(e,c))||o.enumerable}));return D.set(e,t),t};var X=(e,t)=>{for(var o in t)P(e,o,{get:t[o],enumerable:!0,configurable:!0,set:(c)=>t[o]=()=>c})};var Y={};X(Y,{Watch:()=>v,Tag:()=>E,Router:()=>_,Render:()=>g,Mount:()=>z,If:()=>I,For:()=>$,$$:()=>j,$:()=>L});var w=null,m=null,S=new Set,C=!1,T=new WeakMap,O=document,N=Array.isArray,V=Object.assign,q=(e)=>O.createElement(e),y=(e)=>O.createTextNode(String(e??"")),h=(e)=>typeof e==="function",B=(e)=>typeof e==="object"&&e!==null,M=(e,t)=>{let o=w;w=e;try{return t()}finally{w=o}},A=(e)=>{if(e._cleanups)e._cleanups.forEach((t)=>t()),e._cleanups.clear();e.childNodes?.forEach(A)},H=()=>{if(C)return;C=!0;while(S.size>0){let e=Array.from(S).sort((t,o)=>(t.depth||0)-(o.depth||0));S.clear();for(let t of e)if(!t._deleted)t()}C=!1},W=(e)=>{if(w&&!w._deleted)e.add(w),w._deps.add(e)},k=(e)=>{if(e.forEach((t)=>{if(t===w||t._deleted)return;if(t._isComputed){if(t.markDirty(),t._subs)k(t._subs)}else S.add(t)}),!C)queueMicrotask(H)},g=(e)=>{let t=new Set,o=m,c=q("div");c.style.display="contents",m={cleanups:t};let s=(n)=>{if(!n)return;if(n._isRuntime)t.add(n.destroy),c.appendChild(n.container);else if(N(n))n.forEach(s);else c.appendChild(n instanceof Node?n:y(n))};try{s(e({onCleanup:(n)=>t.add(n)}))}finally{m=o}return{_isRuntime:!0,container:c,destroy:()=>{t.forEach((n)=>n()),A(c),c.remove()}}},L=(e,t=null)=>{let o=new Set;if(h(e)){let s,n=!0,r=()=>{if(r._deleted)return;r._deps.forEach((a)=>a.delete(r)),r._deps.clear(),M(r,()=>{let a=e();if(!Object.is(s,a)||n)s=a,n=!1,k(o)})};if(V(r,{_deps:new Set,_isComputed:!0,_subs:o,_deleted:!1,markDirty:()=>n=!0,stop:()=>{r._deleted=!0,r._deps.forEach((a)=>a.delete(r)),o.clear()}}),m)m.cleanups.add(r.stop);return()=>{if(n)r();return W(o),s}}let c=e;if(t)try{let s=localStorage.getItem(t);if(s!==null)c=JSON.parse(s)}catch(s){console.warn("SigPro Storage Lock",s)}return(...s)=>{if(s.length){let n=h(s[0])?s[0](c):s[0];if(!Object.is(c,n)){if(c=n,t)localStorage.setItem(t,JSON.stringify(c));k(o)}}return W(o),c}},j=(e,t=new WeakMap)=>{if(!B(e))return e;if(t.has(e))return t.get(e);let o={},c=new Proxy(e,{get(s,n){if(w)W(o[n]??=new Set);let r=Reflect.get(s,n);return B(r)?j(r,t):r},set(s,n,r){if(Object.is(s[n],r))return!0;let a=Reflect.set(s,n,r);if(o[n])k(o[n]);return a}});return t.set(e,c),c},v=(e,t)=>{let o=N(e),c=o?t:e;if(!h(c))return()=>{};let s=m,n=()=>{if(n._deleted)return;n._deps.forEach((a)=>a.delete(n)),n._deps.clear(),n._cleanups.forEach((a)=>a()),n._cleanups.clear();let r=m;n.depth=w?w.depth+1:0,M(n,()=>{if(m={cleanups:n._cleanups},o)M(null,c),e.forEach((a)=>h(a)&&a());else c();m=r})};if(V(n,{_deps:new Set,_cleanups:new Set,_deleted:!1,stop:()=>{if(n._deleted)return;if(n._deleted=!0,S.delete(n),n._deps.forEach((r)=>r.delete(n)),n._cleanups.forEach((r)=>r()),s)s.cleanups.delete(n.stop)}}),s)s.cleanups.add(n.stop);return n(),n.stop},E=(e,t={},o=[])=>{if(t instanceof Node||N(t)||!B(t))o=t,t={};let s=/^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(e)?O.createElementNS("http://www.w3.org/2000/svg",e):q(e);s._cleanups=new Set,s.onUnmount=(i)=>s._cleanups.add(i);let n=["disabled","checked","required","readonly","selected","multiple","autofocus"],r=(i,l)=>{let d=(i==="src"||i==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;if(n.includes(i))s[i]=!!d,d?s.setAttribute(i,""):s.removeAttribute(i);else d==null?s.removeAttribute(i):s.setAttribute(i,d)};for(let[i,l]of Object.entries(t)){if(i==="ref"){h(l)?l(s):l.current=s;continue}let d=h(l);if(i.startsWith("on")){let p=i.slice(2).toLowerCase().split(".")[0];s.addEventListener(p,l),s._cleanups.add(()=>s.removeEventListener(p,l))}else if(d){if(s._cleanups.add(v(()=>{let p=l();i==="class"?s.className=p||"":r(i,p)})),["INPUT","TEXTAREA","SELECT"].includes(s.tagName)&&(i==="value"||i==="checked")){let p=i==="checked"?"change":"input",f=(u)=>l(u.target[i]);s.addEventListener(p,f),s._cleanups.add(()=>s.removeEventListener(p,f))}}else r(i,l)}let a=(i)=>{if(N(i))return i.forEach(a);if(h(i)){let l=y("");s.appendChild(l);let d=[];s._cleanups.add(v(()=>{let p=i(),f=(N(p)?p:[p]).map((u)=>u?._isRuntime?u.container:u instanceof Node?u:y(u));d.forEach((u)=>{A(u),u.remove()}),f.forEach((u)=>l.parentNode?.insertBefore(u,l)),d=f}))}else s.appendChild(i instanceof Node?i:y(i))};return a(o),s},I=(e,t,o=null,c=null)=>{let s=y(""),n=E("div",{style:"display:contents"},[s]),r=null,a=null;return v(()=>{let i=!!(h(e)?e():e);if(i===a)return;a=i;let l=()=>{if(r)r.destroy();r=null};if(r&&!i&&c?.out)c.out(r.container,l);else l();let d=i?t:o;if(d){if(r=g(()=>h(d)?d():d),n.insertBefore(r.container,s),i&&c?.in)c.in(r.container)}}),n},$=(e,t,o,c="div",s={style:"display:contents"})=>{let n=y(""),r=E(c,s,[n]),a=new Map;return v(()=>{let i=(h(e)?e():e)||[],l=new Map,d=[];for(let f=0;f{A(b),b.remove()}}:g(()=>b)}a.delete(x),l.set(x,R),d.push(x)}a.forEach((f)=>f.destroy());let p=n;for(let f=d.length-1;f>=0;f--){let u=l.get(d[f]);if(u.container.nextSibling!==p)r.insertBefore(u.container,p);p=u.container}a=l}),r},_=(e)=>{let t=L(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>t(window.location.hash.replace(/^#/,"")||"/"));let o=E("div",{class:"router-transition"}),c=null;return v([t],async()=>{let s=t(),n=e.find((r)=>{let a=r.path.split("/").filter(Boolean),i=s.split("/").filter(Boolean);return a.length===i.length&&a.every((l,d)=>l.startsWith(":")||l===i[d])})||e.find((r)=>r.path==="*");if(n){let r=n.component;if(h(r)&&r.toString().includes("import"))r=(await r()).default||await r();let a={};if(n.path.split("/").filter(Boolean).forEach((i,l)=>{if(i.startsWith(":"))a[i.slice(1)]=s.split("/").filter(Boolean)[l]}),c)c.destroy();if(_.params)_.params(a);c=g(()=>{try{return h(r)?r(a):r}catch(i){return E("div",{class:"p-4 text-error"},"Error loading view")}}),o.appendChild(c.container)}}),o};_.params=L({});_.to=(e)=>window.location.hash=e.replace(/^#?\/?/,"#/");_.back=()=>window.history.back();_.path=()=>window.location.hash.replace(/^#/,"")||"/";var z=(e,t)=>{let o=typeof t==="string"?O.querySelector(t):t;if(!o)return;if(T.has(o))T.get(o).destroy();let c=g(h(e)?e:()=>e);return o.replaceChildren(c.container),T.set(o,c),c},U={$:L,$$:j,Render:g,Watch:v,Tag:E,If:I,For:$,Router:_,Mount:z};if(typeof window<"u")V(window,U),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(" ").forEach((t)=>{let o=t[0].toUpperCase()+t.slice(1);if(!(o in window))window[o]=(c,s)=>E(t,c,s)}),window.SigPro=Object.freeze(U);})(); diff --git a/docs/api/router.md b/docs/api/router.md index 80d6cf5..fa72242 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -19,7 +19,7 @@ Router(routes: Route[]): HTMLElement ## Usage Patterns ### 1. Defining Routes -The `Router` returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container. +The `Router` returns a `div` element with the class `.router-transition`. When the hash changes, the router destroys the previous view and mounts the new one inside this container. ```javascript const App = () => Div({ class: "app-layout" }, [ @@ -79,11 +79,11 @@ Watch(() => { --- -## Styling the Outlet -The router returns a standard `div` with the `.router-outlet` class. You can easily style it or add transitions: +## Styling the transition of Router +The router returns a standard `div` with the `.router-transition` class. You can easily style it or add transitions: ```css -.router-outlet { +.router-transition { display: block; min-height: 100vh; animation: fadeIn 0.3s ease; diff --git a/docs/sigpro.js b/docs/sigpro.js index 70f8da7..d7b2776 100644 --- a/docs/sigpro.js +++ b/docs/sigpro.js @@ -408,7 +408,7 @@ var Router = (routes) => { const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); - const outlet = Tag("div", { class: "router-outlet" }); + const outlet = Tag("div", { class: "router-transition" }); let currentView = null; Watch([currentPath], async () => { const path = currentPath(); diff --git a/sigpro.js b/sigpro.js index 87f192e..f794b52 100644 --- a/sigpro.js +++ b/sigpro.js @@ -370,7 +370,7 @@ const For = (source, renderFn, keyFn, tag = "div", props = { style: "display:con const Router = (routes) => { const currentPath = $(window.location.hash.replace(/^#/, "") || "/"); window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/")); - const outlet = Tag("div", { class: "router-outlet" }); + const outlet = Tag("div", { class: "router-transition" }); let currentView = null; Watch([currentPath], async () => {