UNPKG

@dlightjs/components

Version:

DLight components library

2 lines 15.3 kB
"use strict";var C=Object.defineProperty;var rt=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var nt=Object.prototype.hasOwnProperty;var at=(o,t)=>{for(var e in t)C(o,e,{get:t[e],enumerable:!0})},dt=(o,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ot(t))!nt.call(o,s)&&s!==e&&C(o,s,{get:()=>t[s],enumerable:!(i=rt(t,s))||i.enumerable});return o};var ht=o=>dt(C({},"__esModule",{value:!0}),o);var pt={};at(pt,{HStack:()=>Q,Link:()=>K,Navigator:()=>g,Route:()=>z,RouteGroup:()=>W,Spacer:()=>et,VStack:()=>X,ZStack:()=>Y,lazy:()=>$t});module.exports=ht(pt);function N(){return location.hash.slice(2)}function T(){return location.pathname.slice(1)}function A(o,t){let e;if(o[0]==="/")e=o;else{o[0]!=="."&&(o="./"+o);let i=t==="history"?window.location.pathname:window.location.hash.replace(/^#/,""),s=o.split("/"),r=i.split("/").filter(a=>a),n=0;for(let a of s){if(![".",".."].includes(a))break;a===".."&&(r.length===0&&console.warn(`no ../ in ${o}`),r.pop()),n++}e="/"+[...r,...s.slice(n)].join("/")}return e}function _(o){return o.replace(/(^\/+)|(\/+$)/g,"")}function Z(o,t){return!o&&!t?!0:!o||!t||Object.keys(o).length!==Object.keys(t).length?!1:Object.keys(o).every(e=>t[e]===o[e])}function b(o){return!!o.prototype?.Body}var g=class{mode;constructor(t="history"){this.mode=t}hashTo(t){window.location.href="#"+A(t,this.mode)}historyTo(t){window.history.pushState({},"",A(t,this.mode))}to(t){if(this.mode==="hash"){this.hashTo(t);return}this.historyTo(t)}};var c=require("@dlightjs/dlight"),q=require("@dlightjs/dlight");var I=history.pushState,f=[],k=class extends q.View{constructor(){super(),this.homeUrl=this.homeUrl.bind(this),this.collectRoutes=this.collectRoutes.bind(this),this.updateRoute=this.updateRoute.bind(this),this.changePath=this.changePath.bind(this),this.historyChangeListen=this.historyChangeListen.bind(this),this.hashChangeListen=this.hashChangeListen.bind(this),this.willMount=this.willMount.bind(this),this.didMount=this.didMount.bind(this),this.willUnmount=this.willUnmount.bind(this)}$e$_dl_router_baseUrl;_dl_router_baseUrl="/";$$_dl_router_baseUrl=1;$p$mode;mode="history";$$mode=2;$s$mode=["currentPath"];$p$loading;loading;$p$guard;guard;$p$onPathUpdate;onPathUpdate;$p$afterEnter;afterEnter;$p$beforeLeave;beforeLeave;get routes(){return this._$children}routeMap={};hitPath=" NONE ";$$hitPath=256;prevInfo={path:""};currentPath;$$currentPath=1024;get $f$currentPath(){return this._$cache("currentPath",[this.mode])?this.currentPath:this.mode==="hash"?N():T()}viewHolder={propView:!0};$$viewHolder=2048;homeUrl(t){return t.replace(/^~/,this._dl_router_baseUrl)}loaded=!1;collectRoutes(t,e){this.routeMap[t]=e,this.loaded&&this.updateRoute(this.prevInfo.path)}async updateRoute(t){this.loaded||(this.loaded=!0);let e="/"+t;t=_(e.replace(new RegExp(`^${this._dl_router_baseUrl}`),""));for(let[i,{comp:s,children:r,loading:n,redirect:a,info:p}]of Object.entries(this.routeMap)){let u=this.homeUrl(i),st=u===""&&t==="",B=t.startsWith(u+"/"),L=null,v;if(B||(L=t.match(new RegExp(`^${u}$`)),L&&(v=L.groups)),!(st||B||!!L))continue;if(i===this.hitPath&&Z(v,this.viewHolder.params)&&(r||!b(s)||this.viewHolder.view===s))return;let R={...p,path:e};if(this.guard){let m=await this.guard(R,this.prevInfo,this._dl_router_baseUrl);if(m===!1){this.navigator.to(this.prevInfo.path);return}if(typeof m=="string"){this.navigator.to(this.homeUrl(m));return}}if(a){this.navigator.to(this.homeUrl(a));return}this.beforeLeave&&await this.beforeLeave(R,this.prevInfo,this._dl_router_baseUrl);let V=async()=>{this.afterEnter&&await this.afterEnter(R,this.prevInfo,this._dl_router_baseUrl)};if(r)this._$ud(this.viewHolder={view:r,propView:!0},"viewHolder"),V();else if(s)if(b(s))this._$ud(this.viewHolder={view:s,propView:!1,params:v},"viewHolder"),V();else{let m=n??this.loading;m&&this._$ud(this.viewHolder={view:m,propView:!!m.propViewFunc},"viewHolder"),s().then(it=>{this._$ud(this.viewHolder={view:it.default,propView:!1,params:v},"viewHolder"),V()})}this._$ud(this.hitPath=i,"hitPath"),this.prevInfo={path:e,...v};return}}navigator=new g;$$navigator=8192;changePath(t){t!==this.currentPath&&(this._$ud(this.currentPath=t,"currentPath"),this.onPathUpdate&&this.onPathUpdate(this.currentPath))}firstIn=!1;historyChangeListen(){let t=T();this.changePath(t),"/"+t!==this.prevInfo.path&&this.updateRoute(t)}hashChangeListen(){let t=N();this.changePath(t),"/"+t!==this.prevInfo.path&&this.updateRoute(t)}willMount(){this._$ud(this.navigator.mode=this.mode,"navigator"),Promise.resolve().then(()=>{this.mode==="hash"?this.hashChangeListen():this.historyChangeListen()})}didMount(){if(this.mode==="hash"){addEventListener("load",this.hashChangeListen),addEventListener("hashchange",this.hashChangeListen);return}addEventListener("load",this.historyChangeListen),addEventListener("popstate",this.historyChangeListen),f.push(this.historyChangeListen),history.pushState=new Proxy(I,{apply(t,e,i){let s=t.apply(e,i);return f.forEach(r=>r()),s}})}willUnmount(){if(this.mode==="hash"){removeEventListener("load",this.hashChangeListen),removeEventListener("hashchange",this.hashChangeListen);return}removeEventListener("load",this.historyChangeListen),removeEventListener("popstate",this.historyChangeListen),f=f.filter(t=>t!==this.historyChangeListen),f.length>0?history.pushState=new Proxy(I,{apply(t,e,i){let s=t.apply(e,i);return f.forEach(r=>r()),s}}):history.pushState=I}Body(){let t,e,i;return this._$update=s=>{s&257&&t&&t.updateEnv("_dl_router_baseUrl",()=>"/"+_(`${this._dl_router_baseUrl}/${this.hitPath}`),[this._dl_router_baseUrl,this.hitPath]),s&1026&&t&&t.updateEnv("path",()=>this.currentPath,[this.currentPath]),s&2048&&i&&i.updateCond(),s&8192&&t&&t.updateEnv("navigator",()=>this.navigator,[this.navigator]),i&&i.update(s)},t=new c.EnvNode({_dl_router_routesCollect:this.collectRoutes,_dl_router_baseUrl:"/"+_(`${this._dl_router_baseUrl}/${this.hitPath}`),path:this.currentPath,navigator:this.navigator},{_dl_router_routesCollect:[],_dl_router_baseUrl:[this._dl_router_baseUrl,this.hitPath],path:[this.currentPath],navigator:[this.navigator]}),e=new c.ExpNode(this.routes,[]),i=new c.CondNode(2048,s=>{if(this.viewHolder.propView){if(s.cond===0)return s.didntChange=!0,[];s.cond=0;let r;return s.updateFunc=n=>{n&2048&&r&&r.update(()=>this.viewHolder.view,[this.viewHolder?.view])},r=new c.ExpNode(this.viewHolder.view,[this.viewHolder?.view]),s.cond===0?[r]:s.updateCond()}else{if(s.cond===1)return s.didntChange=!0,[];s.cond=1;let r,n;return s.updateFunc=a=>{a&2048&&n&&n.update(()=>r,[this.viewHolder?.view]),r&&r.update(a)},r=new c.PropView(a=>{let p;return a(u=>{u&2048&&p&&p._$setProps(()=>this.viewHolder.params,[this.viewHolder?.params])}),p=new this.viewHolder.view,p._$init(null,null,null,null),[p]}),n=new c.ExpNode(r,[this.viewHolder?.view]),s.cond===1?[n]:s.updateCond()}}),t.initNodes([e,i]),[t]}},W=k;var E=require("@dlightjs/dlight"),D=class extends E.View{constructor(){super(),this.collectRoutes=this.collectRoutes.bind(this)}$e$_dl_router_routesCollect;_dl_router_routesCollect=E.required;$$_dl_router_routesCollect=1;$s$_dl_router_routesCollect=["collectRoutes"];$p$path;_$contentKey="path";path=".*";$$path=2;$s$path=["collectRoutes"];$p$comp;comp;$$comp=4;$s$comp=["collectRoutes"];get children(){return this._$children}$p$loading;loading;$$loading=8;$s$loading=["collectRoutes"];$p$redirect;redirect;$$redirect=16;$s$redirect=["collectRoutes"];$p$info;info;$$info=32;$s$info=["collectRoutes"];$w$collectRoutes;collectRoutes(){this._$cache("collectRoutes",[this._dl_router_routesCollect,this.path,this.comp,this.loading,this.redirect,this.info])||this._dl_router_routesCollect(this.path,{comp:this.comp,children:this.children,loading:this.loading,redirect:this.redirect,info:this.info})}},z=D;var d=require("@dlightjs/dlight"),y=require("@dlightjs/dlight");var U=class extends y.View{constructor(){super(),this.handleClick=this.handleClick.bind(this)}$p$content;_$contentKey="content";content=y.required;$$content=1;$p$to;to=y.required;$p$mode;mode="history";$$mode=4;$s$mode=["nav"];$p$style;style={};$$style=8;$p$class;class="";$$class=16;get children(){return this._$children}$e$navigator;navigator=y.required;$$navigator=32;$s$navigator=["nav"];nav;get $f$nav(){return this._$cache("nav",[this.navigator,this.mode])?this.nav:this.navigator??new g(this.mode)}handleClick(t){if(t.preventDefault(),this.to.startsWith("http"))return window.open(this.to,"_blank");if(this.to.startsWith("?")){let e=this.nav.mode==="history"?T():N();return this.nav.to(e+this.to)}this.nav.to(this.to)}Body(){let t,e;return this._$update=i=>{i&1&&e&&e.update(()=>this.children??this.content,[this.content]),i&8&&t&&(0,d.setStyle)(t,this.style),i&16&&t&&(0,d.setHTMLProp)(t,"className",()=>this.class,[this.class])},t=(0,d.createElement)("a"),(0,d.setStyle)(t,this.style),(0,d.setHTMLProp)(t,"className",()=>this.class,[this.class]),(0,d.delegateEvent)(t,"click",this.handleClick),e=new d.ExpNode(this.children??this.content,[this.content]),(0,d.insertNode)(t,e,0),t._$nodes=[e],[t]}},K=U;var w=require("@dlightjs/dlight"),J=require("@dlightjs/dlight");function $t(o,t){class e extends J.View{constructor(){super(),this.willMount=this.willMount.bind(this)}_$forwardProps;_$forwardPropsSet=new Set;_$forwardPropsId=[];ViewCls;$$ViewCls=8;willMount(){o().then(s=>{this._$ud(this.ViewCls=s.default,"ViewCls")})}Body(){let s;return this._$update=r=>{r&8&&s&&s.updateCond(),s&&s.update(r)},s=new w.CondNode(8,r=>{if(this.ViewCls){if(r.cond===0)return r.didntChange=!0,[];r.cond=0;let n,a;return r.updateFunc=p=>{p&8&&a&&a.update(()=>n,[this.ViewCls]),n&&n.update(p)},n=new w.PropView(p=>{let u;return u=new this.ViewCls,u._$init(null,null,null,this),[u]}),a=new w.ExpNode(n,[this.ViewCls]),r.cond===0?[a]:r.updateCond()}else if(t){if(r.cond===1)return r.didntChange=!0,[];r.cond=1;let n;return r.updateFunc=a=>{},n=new t,n._$init(null,null,null,null),r.cond===1?[n]:r.updateCond()}else return r.cond===2?(r.didntChange=!0,[]):(r.cond=2,r.updateFunc=n=>{},r.cond===2?[]:r.updateCond())}),[s]}}return e}var h=require("@dlightjs/dlight"),x=require("@dlightjs/dlight");function lt(o,t){let e=[...o].reverse();for(;e.length>0;){let i=e.pop();t(i),"_$dlNodeType"in i?i._$nodes&&e.push(...[...i._$nodes].reverse()):i._$nodes?e.push(...[...i._$nodes].reverse()):e.push(...[...i.childNodes].reverse())}}function P(o,t){let e=i=>{lt(i,s=>{if(s.initNewNodes){let r=s.initNewNodes;s.initNewNodes=function(n){r.call(this,n),t(n),e(n)}}})};e(o)}var F=class extends x.View{constructor(){super(),this.setStyles=this.setStyles.bind(this),this.didMount=this.didMount.bind(this)}$p$spacing;spacing=0;$$spacing=1;$p$alignment;alignment="top";$$alignment=2;$s$alignment=["margin"];$p$width;width="100%";$$width=4;$p$height;height="max-content";$$height=8;$p$style;style={};$$style=16;$p$class;class;$$class=32;get children(){return this._$children}margin;get $f$margin(){return this._$cache("margin",[this.alignment])?this.margin:{top:"0 0 auto 0",bottom:"auto 0 0 0",center:"auto 0"}[this.alignment]??"0 0 auto 0"}nodes=[];setStyles(t){x.View.loopShallowEls(t,e=>{e.style.flexShrink="0",e.style.margin=this.margin})}didMount(){this.setStyles(this.nodes),P(this.nodes,this.setStyles)}Body(){let t,e;return this._$update=i=>{i&29&&t&&(0,h.setStyle)(t,{...this.style,height:this.height,width:this.width,columnGap:`${this.spacing}px`,display:"flex",flexDirection:"row"}),i&32&&t&&(0,h.setHTMLProp)(t,"className",()=>this.class,[this.class])},t=(0,h.createElement)("div"),(0,h.setHTMLProp)(t,"className",()=>this.class,[this.class]),(0,h.setStyle)(t,{...this.style,height:this.height,width:this.width,columnGap:`${this.spacing}px`,display:"flex",flexDirection:"row"}),e=new h.ExpNode(this.children,[]),x.View.addDidMount(e,i=>{this.nodes=i._$nodes}),(0,h.insertNode)(t,e,0),t._$nodes=[e],[t]}},Q=F;var $=require("@dlightjs/dlight"),H=require("@dlightjs/dlight");var G=class extends H.View{constructor(){super(),this.setStyles=this.setStyles.bind(this),this.didMount=this.didMount.bind(this)}$p$spacing;spacing=0;$$spacing=1;$p$alignment;alignment="leading";$$alignment=2;$s$alignment=["margin"];$p$width;width="max-content";$$width=4;$p$height;height="100%";$$height=8;$p$style;style={};$$style=16;$p$class;class;$$class=32;get children(){return this._$children}margin;get $f$margin(){return this._$cache("margin",[this.alignment])?this.margin:{leading:"0 auto 0 0",tailing:"0 0 0 auto",center:"0 auto"}[this.alignment]??"0 auto 0 0"}nodes=[];setStyles(t){H.View.loopShallowEls(t,e=>{e.style.flexShrink="0",e.style.margin=this.margin})}didMount(){this.setStyles(this.nodes),P(this.nodes,this.setStyles)}Body(){let t,e;return this._$update=i=>{i&29&&t&&(0,$.setStyle)(t,{...this.style,height:this.height,width:this.width,rowGap:`${this.spacing}px`,display:"flex",flexDirection:"column"}),i&32&&t&&(0,$.setHTMLProp)(t,"className",()=>this.class,[this.class])},t=(0,$.createElement)("div"),(0,$.setHTMLProp)(t,"className",()=>this.class,[this.class]),(0,$.setStyle)(t,{...this.style,height:this.height,width:this.width,rowGap:`${this.spacing}px`,display:"flex",flexDirection:"column"}),e=new $.ExpNode(this.children,[]),H.View.addDidMount(e,i=>{this.nodes=i._$nodes}),(0,$.insertNode)(t,e,0),t._$nodes=[e],[t]}},X=G;var l=require("@dlightjs/dlight"),M=require("@dlightjs/dlight");var j=class extends M.View{constructor(){super(),this.setStyles=this.setStyles.bind(this),this.didMount=this.didMount.bind(this)}$p$hAlignment;hAlignment="center";$$hAlignment=1;$s$hAlignment=["justifyItems"];$p$vAlignment;vAlignment="center";$$vAlignment=2;$s$vAlignment=["alignItems"];$p$width;width="max-content";$$width=4;$p$height;height="max-content";$$height=8;$p$style;style={};$$style=16;$p$class;class;$$class=32;get children(){return this._$children}justifyItems;$$justifyItems=64;get $f$justifyItems(){return this._$cache("justifyItems",[this.hAlignment])?this.justifyItems:{leading:"flex-start",center:"center",tailing:"flex-end"}[this.hAlignment]??"center"}alignItems;$$alignItems=128;get $f$alignItems(){return this._$cache("alignItems",[this.vAlignment])?this.alignItems:{top:"flex-start",center:"center",bottom:"flex-end"}[this.vAlignment]??"center"}nodes=[];setStyles(t){M.View.loopShallowEls(t,e=>{e.style.position="absolute",e.style.gridArea="1 / 1/ 1 / 1"})}didMount(){this.setStyles(this.nodes),P(this.nodes,this.setStyles)}Body(){let t,e;return this._$update=i=>{i&32&&t&&(0,l.setHTMLProp)(t,"className",()=>this.class,[this.class]),i&223&&t&&(0,l.setStyle)(t,{...this.style,height:this.height,width:this.width,display:"grid",alignItems:this.alignItems,justifyItems:this.justifyItems})},t=(0,l.createElement)("div"),(0,l.setHTMLProp)(t,"className",()=>this.class,[this.class]),(0,l.setStyle)(t,{...this.style,height:this.height,width:this.width,display:"grid",alignItems:this.alignItems,justifyItems:this.justifyItems}),e=new l.ExpNode(this.children,[]),M.View.addDidMount(e,i=>{this.nodes=i._$nodes}),(0,l.insertNode)(t,e,0),t._$nodes=[e],[t]}},Y=j;var S=require("@dlightjs/dlight"),tt=require("@dlightjs/dlight"),O=class extends tt.View{isSpacer=!0;Body(){let t;return t=(0,S.createElement)("div"),(0,S.setStyle)(t,{flexGrow:1}),[t]}},et=O;0&&(module.exports={HStack,Link,Navigator,Route,RouteGroup,Spacer,VStack,ZStack,lazy}); //# sourceMappingURL=index.cjs.map