|
|
|
|
@ -0,0 +1,56 @@
|
|
|
|
|
import"wkit";var c=Symbol("router"),d=Symbol("router-view"),m=Symbol("store"),g=new Set,f=new Map,$=new Set,I=class extends WeakMap{broadcast(){for(let t of g){if(t.removed){this.deassign(t);continue}t.$requestUpdate()}}assign(t){g.add(t)}deassign(t){g.delete(t)}},H=new I;Object.defineProperty(window,"wkitd",{get(){return H},set(t){console.error("Can not set readonly property wkitd of window")},enumerable:!1});import{html as x,css as M,Component as j}from"wkit";var z=encodeURIComponent,A=decodeURIComponent;function w(){}function L(t,r,e){Object.defineProperty(t,r,{get(){return e}})}function b(t,r,e){var o;if(Array.isArray(r))r.forEach(function(n,s){o=t?`${t}[${Array.isArray(n)?s:""}]`:s,typeof n=="object"?b(o,n,e):e(o,n)});else for(let n in r)o=t?`${t}[${n}]`:n,typeof r[n]=="object"?b(o,r[n],e):e(o,r[n])}function v(t=""){let r=new URLSearchParams(t),e=Object.create(null);for(let[o,n]of r.entries()){let s=A(o),i=A(n),a=0;if(/(\w+)\[(\w*?)\]/.test(s)){let l=RegExp.$1,p=RegExp.$2;s=l,!p||+p==+p?(i=[i],a|=2):(a|=1,i={[p]:i})}e[s]?a&2?e[s]=e[s].concat(i):a&1?Object.assign(e[s],i):(Array.isArray(e[i])||(e[s]=[e[s]]),e[s].push(i)):e[s]=i}return e}function k(t={}){if(t===null)return"";if(typeof t=="string"||typeof t=="number"||typeof t=="boolean")return t;let r=[];return typeof t=="object"&&b("",t,function(e,o){r.push(e+"="+z(o))}),r.join("&")}import{Component as q}from"wkit";import{bind as X}from"wkit";var Z=/^(#!|#)[\/]+?/,_=/(\/[^/]*)(:[\$@~\\!A-Za-z0-9_=\-]+)(\?)?/g,y="hash",N="history",S=class{type=y;#t=new Map;#r=new Set;#o=!1;#e=Object.create(null);#s=null;#i;constructor(t=y){this.type=t,X(window,"popstate",this.#a.bind(this))}get route(){return this.#e}get views(){return Array.from(this.#r)}#a(t){this.#o&&this.#p()}#l(t){if(t.path==="!")t.regexp=null;else{let r=[],e;if(t.path.includes("?")&&t.path.at(-1)!=="?")throw new SyntaxError(`The exp "?" can only be used in the last.
|
|
|
|
|
|
|
|
|
|
${JSON.stringify(t)}
|
|
|
|
|
`);e=t.path.replace(_,function(o,n,s,i=""){return r.push(s.slice(1)),n==="/"&&(n="/?"),n+"([\\$\\!@~A-Za-z0-9_=\\-]+)"+i}),e="^"+e+"$",t.regexp=new RegExp(e),t.vars=r}return t}#h(t){if(t.path!=="!"&&t.path[0]!=="/"){console.error('route path must start with "/"');return}t.path=t.path.replace(/^[\/]+|[\/]+$|\s+/g,"/"),this.#t.set(t.path,this.#l(t)),this.#r.add(t.name)}#p(){let t=this.type===y,r=window.wkitd.get(d),e=location.hash||"#/",o=t?e:location.href.replace(location.origin,"").replace(e,""),n="";if(o.includes("?")&&([o,n]=o.split("?")),o=o.replace(Z,"/"),o==="/index.html"&&(o="/"),!r||o===this.#e.path)return n!==k(this.#e.query)?(this.#e.query=v(n),this.#c()):void 0;for(let[s,i]of this.#t){let a=o.match(i.regexp);if(a){let l=Object.create(null);for(let u=1;u<a.length;u++)l[[i.vars[u-1]]]=a[u];let p={path:o,name:i.name,params:l,query:v(n)};return Object.defineProperty(p,"raw",{value:i.path}),this.#i?this.#i(this.route,p,()=>{this.#n(p)}):this.#n(p)}}if(this.#t.get("!")){let s=this.#t.get("!");r.current=s.name,this.#e={path:o,name:s.name,params:{},query:{}},this.#n(this.#e)}else this.#s&&(this.#n(this.#s),this.#s=null)}#n(t){let r=window.wkitd.get(d),e=this.#t.get(t.raw);r.current=t.name,this.#e=t,e&&typeof e.component=="function"&&(customElements.get(t.name)||(e.component(),delete e.component)),this.#c()}#c(){if(this.#o)for(let t of $)t(this.route)}init(){this.#o=!0,this.#a()}beforeEach(t=w){this.#i=t}addRoute(t){Array.isArray(t)?t.forEach(r=>{this.#h(r)}):this.#h(t),this.#o&&this.#a()}go(t=0){history.go(t)}back(){this.go(-1)}forward(){this.go(1)}push(t={path:"",query:{}},r=!1){let e="",o="";typeof t=="string"?e=t.trim():(o=k(t.query||""),e=t.path+(o?`?${o}`:"")),!(!e&&e===location.hash.slice(1))&&(this.#s=t,this.type===y?r?location.replace(e.replace(/^\//,"#/")):location.hash=e:(r?window.history.replaceState({path:e},null,e+o):window.history.pushState({path:e},null,e+o),this.#p()))}replace(t={path:"",query:{}}){this.push(t,!0)}};function O(){return()=>new S}function T(){return()=>new S(N)}import{Component as R,html as B,css as E,raw as C}from"wkit";import{Component as U}from"wkit";function P(t,r=["$store"]){return t===null?t:new Proxy(t,{get(e,o,n){let s=Reflect.get(e,o,n);return typeof s=="object"?P(s,r.concat(o)):s},set(e,o,n,s){let i=r.concat(o).join(".");return e[o]===n||(Reflect.set(e,o,n,s),f.get(i)&&f.get(i).forEach(a=>{a(n)}),window.wkitd.broadcast()),!0}})}function W(t,r=w){if(t.startsWith("$store.")){let e=f.get(t);e?e.add(r):(e=new Set,e.add(r),f.set(t,e))}else if(t.startsWith("$route"))$.add(r),r(window.wkitd.get(c).route);else return console.error("watch() only work on $store and $route")}function D(t={}){let r=!1;return function(){Object.defineProperty(U.prototype,"$store",{get(){return window.wkitd.assign(this),window.wkitd.get(m)},set(e){if(r)return console.error("Can not set readonly property $store of Component");window.wkitd.set(m,P(e)),r=!0}}),U.prototype.$store=t}}var G=class extends R{static props={transition:!1};static styles=E`
|
|
|
|
|
:host {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
`;get current(){return this.#t}set current(t){let r=this.#t,e=this.$refs;if(this.#t=t,this.keepAlive){if(r){let o=e[r];o?(o.removed=!0,o.deactivated(),o.remove()):this.$requestUpdate()}else this.$requestUpdate();if(t){let o=e[t];o?(this.root.appendChild(o),o.$requestUpdate(),this.transition&&o.$animate(),o.removed=!1,o.activated()):this.$requestUpdate()}}else this.$requestUpdate()}#t="";#r=[];created(){window.wkitd.set(d,this)}sync(t){this.#r=t}render(){let t={immediate:!0,custom:[{transform:"translateX(-32px)",opacity:0},{transform:"translateX(0)",opacity:1}]},r=this.current;if(r)return this.transition?C(`<${r} ref="${r}" ${this.keepAlive?"keep-alive":""} #animation="%s"></${r}>`,[t]):C(`<${r} ref="${r}" ${this.keepAlive?"keep-alive":""}></${r}>`)}},J=class extends R{static props={to:{type:null},disabled:!1};static styles=E`
|
|
|
|
|
:host {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: var(--router-link-gap, 0);
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:host([disabled]) a {
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
`;#t={path:""};#r="";#o(){let t=this.$router.type;this.disabled||(t==="hash"?location.hash=this.#r:this.$router.push(this.#t))}#e(){let t,r,e;if(typeof this.to=="string"){let o=this.to.split("?");t=o[0],e=o[1]||"",r=v(e)}else t=this.to.path||"",r=this.to.query||{},e=typeof r=="string"?r.replaceAll("?",""):k(r);t="/"+t.replace(/^\/+/,""),this.#t={path:t,query:r},e&&(t+="?"+e),this.#r=t}activated(){this.mounted()}deactivated(){this.unmounted()}mounted(){W("$route",t=>{this.removed||this.classList.toggle("active",t.path===this.#t.path)})}unmounted(){$.delete(this)}render(){return this.#e(),B`<a title=${this.#r} @click=${this.#o}
|
|
|
|
|
><slot></slot
|
|
|
|
|
></a>`}};G.reg("view","router"),J.reg("link","router");function K({history:t=O(),routes:r=[]}={}){let e=t();window.wkitd.set(c,e),e.addRoute(r);function o(){Object.defineProperty(q.prototype,"$router",{get(){return e}}),Object.defineProperty(q.prototype,"$route",{get(){return e.route}})}return o.beforeEach=e.beforeEach.bind(e),o}var h=class extends j{};function V({data:t={},styles:r=[],methods:e={},mounted:o=w,render:n}={}){return new function(){h.props=t,h.styles=r,Object.assign(h.prototype,e,{mounted:o,created(){L(j.prototype,"$app",this)}}),this.use=function(s=w,...i){return s.apply(h.prototype,i),this},this.mount=function(){let s=window.wkitd.get(c);n?h.prototype.render=n:s?h.prototype.render=function(){return x`<router-view></router-view>`}:(h.styles=M`
|
|
|
|
|
:host {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
color: #647889;
|
|
|
|
|
}
|
|
|
|
|
.code {
|
|
|
|
|
margin: 16px 0;
|
|
|
|
|
background: #f7f8fb;
|
|
|
|
|
}
|
|
|
|
|
`,h.prototype.render=function(){return x`
|
|
|
|
|
<h1>It works!!!</h1>
|
|
|
|
|
<cite>
|
|
|
|
|
If you don't use router, you may define the
|
|
|
|
|
<b>render</b> property.
|
|
|
|
|
</cite>
|
|
|
|
|
<div class="code">
|
|
|
|
|
<pre><code> createApp({</code></pre>
|
|
|
|
|
<pre><code> render() {</code></pre>
|
|
|
|
|
<pre><code> return html\`<wc-home></wc-home>\`</code></pre>
|
|
|
|
|
<pre><code> }</code></pre>
|
|
|
|
|
<pre><code> })</code></pre>
|
|
|
|
|
<pre><code> .mount()</code></pre>
|
|
|
|
|
</div>
|
|
|
|
|
`}),s&&(h.prototype.mounted=function(...i){let a=window.wkitd.get(d);if(a)a.sync(s.views),s.init(),o.call(this,...i);else throw new Error('<router-view /> not found, "Router" works Unexpected.')}),h.reg("app","v")}}}function F(){return window.wkitd.get(m)}function Q(){return window.wkitd.get(c)}function Y(){return window.wkitd.get(c)?.route}export{V as createApp,K as createRouter,D as createStore,O as createWebHashHistory,T as createWebHistory,Y as getCurrentPage,Q as getRouter,F as getStore,W as watch};
|
