fluxel/dist/browser/fluxel-reactive-router.min.js

An ultra-lightweight, high-performance library for efficient DOM building and dynamic web UIs

/**
 * fluxel-reactive-router v0.6.3
 * 
 * Copyright (c) 2025 mtripg6666tdr
 * 
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * 
 * @see https://github.com/mtripg6666tdr/fluxel
 * @license MIT
*/
"use strict";var __Fluxel_esm=(()=>{var W=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var se=Object.prototype.hasOwnProperty;var ie=(e,t)=>{for(var r in t)W(e,r,{get:t[r],enumerable:!0})},le=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of ae(t))!se.call(e,l)&&l!==r&&W(e,l,{get:()=>t[l],enumerable:!(o=oe(t,l))||o.enumerable});return e};var ce=e=>le(W({},"__esModule",{value:!0}),e);var we={};ie(we,{Link:()=>k,createRouter:()=>F,default:()=>ge,globalNavigate:()=>T,useRouter:()=>q});Object.defineProperty(window,"Fluxel",{get:()=>__Fluxel_esm.default,configurable:!0});var N=new WeakMap;function A(e){var t;(t=N.get(e))===null||t===void 0||t.forEach(r=>r()),N.delete(e),e.childNodes.forEach(r=>A(r))}function G(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var w=class K{get value(){return this._accessor.get()}set value(t){this._accessor.set(t)}derive(t){let r={get:()=>t(this.value),set:o=>{throw new TypeError("Cannot set value of derived dependency")}};return new K(r,this.addDependency)}constructor(t,r){G(this,"_accessor",void 0),G(this,"addDependency",void 0),this._accessor=t,this.addDependency=r}};var ue=["object","a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","menu","meta","meter","nav","noscript","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","script","search","section","select","slot","small","source","span","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"],Q=ue;function _(){return typeof window<"u"&&"fluxelH"in window?window.fluxelH:null}function C(e,t){if(typeof e!="string")throw new TypeError("Expected string for tagName, got ".concat(typeof e));let r=_(),o=r?r.getElementByEid("".concat(r.count++)):document.createElement(e);return Y(o,t)}function Y(e,t){let r=!!_(),o=null,l=null,i=null,v=!1,s=null;if(t)if(typeof t=="string"||Array.isArray(t)||t instanceof Node||t instanceof w){l=t;let n=M(t);i=n.children,v=n.variableChildrenLength,s=n.reactiveIndex}else{if(o=Object.assign(Object.create(null),t),"textContent"in o)throw new TypeError("textContent is not allowed");if("children"in o&&o.children!==null&&o.children!==void 0){l=o.children;let n=M(o.children);i=n.children,v=n.variableChildrenLength,s=n.reactiveIndex,delete o.children}}o=o||{},i=i||null;let c=new Map;for(let n in o)if(n.startsWith("on")&&o[n]){let a=n.slice(2).toLowerCase(),f=c.get(a)||[];c.set(a,f);let d=o[n];if(Array.isArray(d))d.forEach(p=>{if(typeof p=="function")f.push(p);else throw new TypeError("Expected function for event handler ".concat(n,", got ").concat(typeof p))});else if(typeof d=="function")f.push(d);else throw new TypeError("Expected function for event handler ".concat(n,", got ").concat(typeof d));delete o[n]}let u=Object.assign(Object.create(null),"style"in o?o.style:null);if(u&&typeof u=="object"&&!Array.isArray(u)){for(let n in u)if(u[n]instanceof w){let a=u[n];a.addDependency(e,()=>{n.startsWith("--")?e.style.setProperty(n,a.value):e.style[n]=a.value}),u[n]=a.value}}delete o.style;let m=new Set,b=n=>{if(!n)return;let a=n.trim();a&&m.add(a)};if(e.classList.forEach(n=>b(n)),o.classList){let n=d=>{if(typeof d=="string")b(d);else if("forEach"in d)d.forEach(p=>b(p));else if(d instanceof w){let p=d;p.addDependency(e,()=>{e.className="",m.clear(),n(p.value),m.forEach(y=>e.classList.add(y))}),n(p.value)}else throw new TypeError("Expected string or iterable for 'classList', got ".concat(typeof o.classList))},a=o.classList,f=Array.isArray(a)&&a.some(d=>d instanceof w)?new w({get:()=>a.map(d=>d instanceof w?d.value:d),set:()=>{throw new TypeError("Cannot set value of classList directly")}},(d,p)=>{a.forEach(y=>y instanceof w&&y.addDependency(d,p))}):o.classList;n(f),delete o.classList}"className"in o&&delete o.className;let x=o.dataset||null;if(x&&typeof x=="object"&&!Array.isArray(x)){for(let n in x)if(x[n]instanceof w){let a=x[n];a.addDependency(e,()=>{e.dataset[n]=a.value}),x[n]=a.value}}delete o.dataset;for(let n in o)if(o[n]instanceof w){let a=o[n];a.addDependency(e,()=>{e[n]=a.value}),r||(e[n]=a.value),delete o[n]}if(r||(Object.assign(e,o),e.style&&u&&(Object.assign(e.style,u),Object.keys(u).forEach(n=>{n.startsWith("--")&&e.style.setProperty(n,u[n])})),e.dataset&&x&&Object.assign(e.dataset,x),m.size>0&&m.forEach(n=>e.classList.add(n))),v&&l)l.addDependency(e,()=>{let n=pe(e.childNodes),a=M(l).children,f=X(n),d=X(a);if(n.length===a.length&&n.every((h,g)=>h.isSameNode(a[g])))return;let p=n.reduce((h,g,O)=>{var S;let R=(S=d.get(g))!==null&&S!==void 0?S:-1;if(R<0)return h;let E=new Set([O]),D=O;for(let z=R+1;z<a.length;z++){var V;let H=(V=f.get(a[z]))!==null&&V!==void 0?V:-1;H<D||(E.add(H),D=H)}return E.size>h.size?E:h},new Set),y=new Set;if(p.size!==n.length){for(let h=n.length-1;h>=0;h--)if(!p.has(h)){let g=n[h];e.removeChild(g),y.add(g)}}e.childNodes.length!==a.length&&(a.forEach((h,g)=>{y.delete(h),e.childNodes[g]?e.childNodes[g]!==h&&e.insertBefore(h,e.childNodes[g]):e.appendChild(h)}),y.forEach(h=>A(h)))});else if(s&&s.length>0&&l)for(let n of s){let a=l instanceof w?l:l[n];a instanceof w&&(a.addDependency(e,()=>{let f=M(a.value).children[0],d=e.childNodes[n];d!==f&&(e.replaceChild(f,d),A(d))}),i[n]=a.value)}return i&&(r?i.forEach((n,a)=>{n instanceof Text&&e.replaceChild(n,e.childNodes[a])}):e.append(...i)),c.forEach((n,a)=>{n.forEach(f=>{e.addEventListener(a,f)})}),e}function M(e){let t=!1,r=[],o=(l,i=0,v=-1)=>{if(i>1)throw new TypeError("Children cannot be nested more than one level deep");if(typeof l=="string")return[document.createTextNode(l)];if(Array.isArray(l)){l=l.flat(1/0);let s=l.length;return l.flatMap((u,m)=>o(u,i+(s===1?0:1),m))}else{if(l instanceof Node)return[l];if(l instanceof w){let s=l.value;if(Array.isArray(s))return i===0&&(t=!0),s.flat(1/0).flatMap((c,u)=>o(c,i+1,u));if(s instanceof Node)return i===0&&(t=!0),r.push(v),[s];{let c=document.createTextNode(s);return l.addDependency(c,()=>{c.textContent=String(l.value)}),[c]}}else return[]}};return{children:o(e),variableChildrenLength:t,reactiveIndex:r}}C.fragment=function(e,t){let r=M(e),o=r.children,l=r.variableChildrenLength,i=r.reactiveIndex,v=o;if(v.forEach(s=>{s instanceof HTMLElement&&Y(s,t)}),l)return e.derive(()=>o);if(i.length>0)for(let s of i)v[s]=e[s].derive(()=>o[s]);return v};function de(){let e=document.querySelector("style[data-fluxel]");if(e)return e;let t=document.createElement("style");return t.dataset.fluxel="true",document.head.appendChild(t),t}C.forwardStyle=function(e){_()||C.forwardStyleCache.includes(e)||(C.forwardStyleCache.push(e),typeof window<"u"&&(de().textContent+=e))};C.forwardStyleCache=[];function fe(){return"".concat(Date.now().toString(36)).concat(Math.random().toString(36).substring(2))}function pe(e){if(typeof Array.from=="function")return Array.from(e);let t=[];for(let r=0;r<e.length;r++)t.push(e[r]);return t}function X(e){let t=new Map;return e.forEach((r,o)=>{t.set(r,o)}),t}C.useUniqueString=function(e){let t=fe();return e(t)};C.createComponent=function(e){return(t={})=>e(t)};C.createElement=C;var Z=C;Q.forEach(e=>{Z[e]=t=>C(e,t)});var ee=Z;function he(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ve(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{},o=Object.keys(r);typeof Object.getOwnPropertySymbols=="function"&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(l){return Object.getOwnPropertyDescriptor(r,l).enumerable}))),o.forEach(function(l){he(e,l,r[l])})}return e}function me(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable})),r.push.apply(r,o)}return r}function ye(e,t){return t=t!=null?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):me(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}var I=ee,B=["render","use","useWithMemo","listenTarget"];I.reactive=function(e,t){let r=Object.create(null),o=ye(ve({},e),{render:(i,v=!1)=>{if(!v&&i&&o.listenTarget.dispatchEvent(new CustomEvent(i,{detail:{newValue:o[i]}})),i){var s;(s=r[i])===null||s===void 0||s.listeners.forEach(c=>c.call(null))}else for(let c in r)r[c].listeners.forEach(u=>u.call(null))},use:(i,v)=>{let s=-1,c=-1,u=[],m=new Map,b=new Map,x=(a,f,d=!1)=>{if(d){let p=JSON.stringify(f);if(b.has(p)){let h=b.get(p);return m.set(p,h),h}let y=a();return m.set(p,y),y}if(u[s]){if(u[s].deps.every((y,h)=>y===f[h]))return u[s++].memoValue;u[s].deps=f;let p=u[s].memoValue=a();return s++,p}else return u.push({deps:f,memoValue:a()}),u[s++].memoValue},n=v?a=>{s===-1&&c!==-1&&(c=s),s=0,m=new Map;let f=v(a,x);if(c!==-1&&c!==s)throw new TypeError("Memoization count mismatch");return b=m,f}:void 0;if(Array.isArray(i)){let a=i.map(f=>[f,o.use(f)]);return new w({get:()=>Object.fromEntries(a.map(f=>[f[0],f[1].value])),set:f=>{throw new TypeError("Invalid")}},(f,d)=>{let p=te(d);a.forEach(y=>y[1].addDependency(f,p))}).derive(n)}else{let a;return r[i]?a=r[i].dep:o[i]instanceof w?a=o[i]:(a=new w({get:()=>o[i],set:f=>{o[i]=f}},function(d,p){if(!r[i].listeners.includes(p)){r[i].listeners.push(p);let y=()=>{r[i].listeners=r[i].listeners.filter(h=>h!==p)};N.has(d)?N.get(d).add(y):N.set(d,new Set([y]))}}),r[i]={dep:a,listeners:[]}),n?a.derive(n):a}},useWithMemo:i=>{let v=null,s=o.use(i,(c,u)=>(v=u,c));return s.value,[s,v]},listenTarget:new EventTarget}),l=new Proxy(o,{set(i,v,s){if(B.includes(v))throw new TypeError("Cannot set the specified property: ".concat(String(v)));let c=i[v];return c===s||(i[v]=s,i.listenTarget.dispatchEvent(new CustomEvent(v,{detail:{oldValue:c,newValue:s}})),i.render(v)),!0}});return t(l)};I.schedule=function(e){typeof window<"u"&&setTimeout(e,0)};I.mergeDependencies=function(...e){return new w({get:()=>e.map(t=>t.value),set:t=>{throw new TypeError("Invalid operation")}},(t,r)=>{let o=te(r);e.forEach(l=>l.addDependency(t,o))})};function te(e){let t=!1;return()=>{t||(t=!0,window.setTimeout(()=>{t=!1,e()},0))}}var L=I;var U=L;U.createStatefulComponent=function(e,t){return(r={})=>U.reactive(typeof t=="function"?t(r):t||{},o=>e(r,o))};var re=U;var $=new EventTarget;typeof window<"u"&&(window.addEventListener("popstate",e=>{$.dispatchEvent(new CustomEvent("popstate",{detail:e}))}),window.addEventListener("hashchange",e=>{$.dispatchEvent(new CustomEvent("popstate",{detail:e}))}));var J=()=>L.div({dataset:{fluxelRouterFallback:"1"}}),j=[],ne=()=>{};function F(e,t={}){let r=t.basePath||"",o=t.mode||"history",l=[];Object.keys(e).forEach(u=>{let m=new RegExp("^".concat(u.replace(/\/\*?$/,"").replace(RegExp("(?<cap>:[^\\s/]+)\\?\\/","g"),"($<cap>/)?").replace(RegExp(":(?<name>[^\\s\\?/]+)","g"),"(?<$<name>>[^/]+)")).concat(u.endsWith("/*")?"(/.*)?":"/?","$"));l.push([m,u])});let i=u=>{let m=null;return L.reactive(u,b=>{m=b}),m},v=!1,s=null,c={basePath:r,pathname:"/",route:null,params:{},query:null,get mode(){return o},Provider(u){return L.reactive({children:null},m=>{let b=(n,a)=>{if(v=!0,s){Promise.all(s).then(()=>{(!n||c.route===n)&&(m.children=a),s=null});return}else m.children=a},x=()=>{let n=new URL(location.href),a=o==="history"?n.pathname.replace(r,""):n.hash.replace(/^#/,"").replace(r,""),f=new URLSearchParams(n.search);c.pathname=a;let d=l.find(h=>h[0].test(a));if(d){let h=d[0],g=d[1],O=h.exec(a).groups||{};if(c.route===g&&JSON.stringify(c.params)===JSON.stringify(O)){Object.keys(c.query).filter(E=>!f.has(E)&&!B.includes(E)).forEach(E=>{c.query[E]=void 0}),f.forEach((E,D)=>{c.query[D]=E});return}c.route=g,c.params=O;let S={};f.forEach((E,D)=>{S[D]=E}),c.query=i(S),j.push(c);let R=e[g]();if(j.pop(),R instanceof Promise){var p;R.then(E=>{e[g]=E,c.route===g&&(j.push(c),b(g,E()),j.pop())}),b(g,((p=t.fallback)===null||p===void 0?void 0:p.call(t))||J())}else b(g,R)}else{var y;c.route=null,c.params={};let h={};f.forEach((g,O)=>{h[O]=g}),c.query=i(h),b(null,((y=t.fallback)===null||y===void 0?void 0:y.call(t))||J())}};return $.addEventListener("popstate",()=>x()),x(),L.div({dataset:{fluxelRouter:"1"},classList:(u==null?void 0:u.classList)||[],children:m.use("children",n=>{var a;return n||((a=t.fallback)===null||a===void 0?void 0:a.call(t))||J()})})})},navigate(u,m={}){c.mode==="hash"&&(u="#".concat(c.basePath).concat(u)),T(u,m)},deferUpdate(u){v?(s=s||[],s.push(u().catch(ne))):u().catch(ne)}};return c}var q=e=>{let t=(e==null?void 0:e.optional)||!1,r=j[j.length-1];if(!r&&!t)throw new Error("No router instance found. Make sure the component is rendered within a Router Provider.");return r||null};function T(e,t={}){t.replace||!1?window.history.replaceState({},"",e):window.history.pushState({},"",e),$.dispatchEvent(new CustomEvent("popstate"))}var k=e=>{if(!e||!e.href)throw new Error("Link component requires a 'href' property.");let t=e.replace||!1,r=Object.assign({},e);delete r.replace;let o=r.href||"#",l=r.onclick?Array.isArray(r.onclick)?r.onclick:[r.onclick]:[];return l.push(i=>{i.preventDefault(),T(o,{replace:t||!1})}),r.onclick=l,L.a(r)};var P=re;P.createRouter=F;P.useRouter=q;P.globalNavigate=T;P.Link=k;var ge=P;return ce(we);})();