@lazycatcloud/vue-router-stack 0.0.3 → 0.0.5

package/README.md

@@ -101,7 +101,7 @@ stackRouter.popTo("/album/detail");
 stackRouter.resetRoot("/");
 ```
 
-单次导航可以控制方向、动画、时长和缓动：
+单次导航可以控制页面复用、方向、动画、时长和缓动：
 
 ```ts
 stackRouter.push("/search/result", {
@@ -112,6 +112,11 @@ stackRouter.push("/timeline", {
   direction: "none",
 });
 
+stackRouter.push("/album", {
+  reuse: true,
+  transition: "fade",
+});
+
 stackRouter.push("/detail", {
   transition: "sheet",
   duration: 300,
@@ -119,7 +124,9 @@ stackRouter.push("/detail", {
 });
 ```
 
-`direction: "none"` 和 `direction: "root"` 会强制不播放转场，适合 tab 切换和清栈回首页。
+`direction: "none"` 保持原有语义：重复进入相同 `fullPath` 时会复用已有页面实例，并强制不播放转场，适合无需动画的 tab 切换。`direction: "root"` 也会强制关闭转场。
+
+`reuse: true` 可以让普通的 `forward` 导航在重复进入相同 `fullPath` 时复用已有页面实例，并且不会关闭转场。PC tab 可以将它与 `transition: "fade"` 组合使用。
 
 ## 转场动画
 

package/dist/components/RouterOutlet.d.ts

@@ -3,7 +3,8 @@ import type { RouteLocationMatched } from "vue-router";
 import type { RouteInfo } from "../router/types";
 interface ViewItem {
     id: string;
-    stackEntryId: string;
+    routeKey: string;
+    routeIds: Set<string>;
     routeInfo: RouteInfo;
     matchedRoute: RouteLocationMatched;
     component: Component;

package/dist/router/types.d.ts

@@ -38,6 +38,7 @@ export type StackTransitionFactory = (context: StackTransitionContext) => StackT
 export type StackTransitionRegistry = Record<string, StackTransitionFactory>;
 export interface StackNavigationOptions {
     direction?: RouteDirection;
+    reuse?: boolean;
     transition?: StackTransitionName;
     duration?: number;
     easing?: string;
@@ -51,6 +52,7 @@ export interface RouteInfo {
     query: RouteLocationNormalizedLoaded["query"];
     action: RouteAction;
     direction: RouteDirection;
+    reuse?: boolean;
     source: StackNavigationSource;
     entryDirection: RouteDirection;
     lastPathname?: string;
@@ -76,6 +78,7 @@ export interface PendingNavigation {
     direction: RouteDirection;
     source: StackNavigationSource;
     delta?: number;
+    reuse?: boolean;
     transition?: StackTransitionName;
     duration?: number;
     easing?: string;

package/dist/vue-router-stack.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),b=require("vue-router"),J={};function U(e="route"){const r=(J[e]??0)+1;return J[e]=r,`${e}-${r}`}const v="slide",re="cubic-bezier(0.3, 0, 0.66, 1)";function oe(e){return e}const ne=({direction:e})=>e==="back"?{leaving:[{transform:"translateX(0)"},{transform:"translateX(100%)"}]}:{entering:[{transform:"translateX(100%)"},{transform:"translateX(0)"}]},ae=()=>({entering:[{opacity:0},{opacity:1}],leaving:[{opacity:1},{opacity:0}]}),ce=({direction:e})=>{const r=e==="back";return{entering:r?[{transform:"scale(0.98)",opacity:0},{transform:"scale(1)",opacity:1}]:[{transform:"scale(1.04)",opacity:0},{transform:"scale(1)",opacity:1}],leaving:r?[{transform:"scale(1)",opacity:1},{transform:"scale(1.04)",opacity:0}]:[{transform:"scale(1)",opacity:1},{transform:"scale(0.98)",opacity:0}]}},ie=()=>({}),se={slide:ne,fade:ae,scale:ce,none:ie};function ue(e,r){const n=r[e];return n||r[v]}function Q(e,r,n){if(!r||!e.animate||Number(n.duration)<=0)return Promise.resolve();const l=e.animate(r,n);return l.finished.then(()=>l.cancel())}async function le(e,r){const n=e(r),l={duration:r.duration,easing:r.easing,fill:"both",...n.options};await Promise.all([Q(r.enteringElement,n.entering,l),Q(r.leavingElement,n.leaving,l)])}const C=Symbol("stack-router");function de(){const e=window.history.state;return typeof(e==null?void 0:e.position)=="number"?e.position:window.history.length}function q(e,r){return r||(e==="pop"?"back":e==="replace"?"none":"forward")}function fe(e){const r=b.createRouter(e),n=[],l=i.shallowRef(),d=e.transitionDuration??210,T=e.transitionEasing??re,S=e.transition??v,R={...se,...e.transitions},E=e.maxStackSize??30;let h=-1,s,g=!1;const P=(c,a,u,f,y=!1,w="stack")=>{s={action:c,direction:q(c,a),source:w,delta:u,transition:f==null?void 0:f.transition,duration:f==null?void 0:f.duration,easing:f==null?void 0:f.easing,resetRoot:y}},W=(c,a)=>{const u=(s==null?void 0:s.action)??"push",f=q(u,s==null?void 0:s.direction),y=l.value,w=u==="push"&&f==="forward",te=L(c);return{id:U("route"),key:c.fullPath,fullPath:c.fullPath,pathname:c.path,params:c.params,query:c.query,action:u,direction:f,source:(s==null?void 0:s.source)??"stack",entryDirection:f,lastPathname:(y==null?void 0:y.pathname)||(a.name?a.path:void 0),pushedByRoute:w?y==null?void 0:y.pathname:y==null?void 0:y.pushedByRoute,position:de(),delta:s==null?void 0:s.delta,transition:(s==null?void 0:s.transition)??S,transitionDuration:(s==null?void 0:s.duration)??d,transitionEasing:(s==null?void 0:s.easing)??T,cache:te}},L=c=>{const a=c.meta.stack;return c.meta.stackCache!==!1&&(a==null?void 0:a.cache)!==!1},x=()=>{if(E<=0||n.length<=E)return;const c=n.length-E;n.splice(0,c),h=Math.max(0,h-c)},G=c=>{if(c.action==="pop"){let a=-1;if(c.direction==="forward"||(c.delta??0)>0){for(let u=h+1;u<n.length;u++)if(n[u].key===c.key){a=u;break}}else for(let u=h-1;u>=0;u--)if(n[u].key===c.key){a=u;break}if(a>=0){const u=n[a];n[a]={...u,...c,id:u.id,source:c.source,entryDirection:u.entryDirection,transition:u.transition,transitionDuration:u.transitionDuration,transitionEasing:u.transitionEasing},h=a}else n.push({...c,direction:"none",entryDirection:"none",transition:"none",isStackFallback:!0}),h=n.length-1}else if(c.action==="replace"){if(s!=null&&s.resetRoot){n.splice(0,n.length,c),h=0,l.value=n[h];return}h>=0?n[h]=c:(n.push(c),h=0)}else h<n.length-1&&n.splice(h+1),n.push(c),h=n.length-1;x(),l.value=n[h]};e.history.listen((c,a,u)=>{const f="delta"in u?u.delta:void 0,y=u.direction==="back"?"back":u.direction==="forward"?"forward":void 0;s?(s.delta=f,s.direction=q(s.action,s.direction??y)):P(u.type==="pop"?"pop":u.type,y,f,void 0,!1,"external")}),r.beforeEach(c=>!((s==null?void 0:s.action)==="pop"&&g&&!n.some(a=>a.fullPath===c.fullPath))),r.afterEach((c,a,u)=>{if(u){s=void 0;return}G(W(c,a)),s=void 0});const A=r.push.bind(r),j=r.replace.bind(r),V=r.back.bind(r),$=r.forward.bind(r),K=r.go.bind(r),_=(c,a)=>(P("push",(a==null?void 0:a.direction)??"forward",void 0,a),A(c)),H=(c,a)=>(P("replace",(a==null?void 0:a.direction)??"root",void 0,a),j(c)),M=(c,a)=>{const u=r.resolve(c).fullPath;let f=-1;for(let w=h;w>=0;w--)if(n[w].fullPath===u){f=w;break}if(f<0)return!1;const y=f-h;return y===0||(P("pop",(a==null?void 0:a.direction)??"back",y,a),K(y)),!0},t=(c,a)=>{const u=r.resolve(c).fullPath;if(h>=0&&r.currentRoute.value.fullPath===u){const f=n[h],y={...f,id:U("route"),action:"replace",direction:(a==null?void 0:a.direction)??"root",source:"stack",entryDirection:(a==null?void 0:a.direction)??"root",delta:void 0,transition:(a==null?void 0:a.transition)??f.transition,transitionDuration:(a==null?void 0:a.duration)??f.transitionDuration,transitionEasing:(a==null?void 0:a.easing)??f.transitionEasing,cache:!0,isStackFallback:!1};return n.splice(0,n.length,y),h=0,g=!0,l.value=y,Promise.resolve(void 0)}return P("replace",(a==null?void 0:a.direction)??"root",void 0,a,!0),g=!0,j(c)},o=()=>{P("pop","back",-1),V()},m=()=>{P("pop","forward",1),$()},k=r;k.push=_,k.replace=H,k.popTo=M,k.resetRoot=t,k.back=o,k.forward=m;const p={router:k,transitionDuration:d,transitionEasing:T,transition:S,transitions:R,maxStackSize:E,shouldTransition:e.shouldTransition,current:l,get history(){return n},canGoBack:(c=1)=>h-c>=0,push:_,replace:H,popTo:M,resetRoot:t,back:o,forward:m},B=r.install.bind(r);return r.install=c=>{c.provide(C,p),B(c)},k}const Y="onPageWillEnter",X="onPageDidEnter",Z="onPageWillLeave",N="onPageDidLeave";function he(e,r,n){if(!n)throw new Error(`${e} must be called inside setup().`);const l=n.proxy,d=l[e]??[];d.push(()=>{n.isUnmounted||r()}),l[e]=d,n.exposed&&(n.exposed[e]=d)}function F(e){return(r,n=i.getCurrentInstance())=>he(e,r,n)}const me=F(Y),ye=F(X),ke=F(Z),pe=F(N);function Re(){const e=i.inject(C);if(!e)throw new Error("useStackRouter must be used after createStackRouter().");return{router:e.router,canGoBack:e.canGoBack,push:e.push,replace:e.replace,popTo:e.popTo,resetRoot:e.resetRoot,back:e.back,forward:e.forward}}function O(){const e=i.inject(C);if(!e)throw new Error("RouterOutlet must be used with createStackRouter().");return e}function I(e,r){const n=e.value;if(!n)return;const l=n[r];Array.isArray(l)?l.forEach(d=>d()):typeof l=="function"&&l.call(n)}function D(e){e.classList.remove("rs-page-hidden","rs-page-invisible"),e.removeAttribute("aria-hidden")}function z(e){e.classList.add("rs-page-hidden"),e.setAttribute("aria-hidden","true")}function ee(e){var r;return(r=e.components)==null?void 0:r.default}function be(e){const r=ee(e);return r!==void 0&&typeof r=="object"&&"name"in r&&r.name==="RouterView"}const Pe=i.defineComponent({name:"RouterOutlet",setup(){const e=O(),r=b.useRoute(),n=i.inject(b.routeLocationKey),l=i.inject(b.matchedRouteKey,void 0),d=i.computed(()=>{const t=l==null?void 0:l.value;if(!t)return 0;const o=r.matched.findIndex(m=>m===t);return o>=0?o+1:0}),T=i.computed(()=>r.matched[d.value]),S=i.computed(()=>{for(let t=d.value;t<r.matched.length;t++){const o=r.matched[t];if(!be(o))return o}return T.value}),R=i.shallowRef([]),E=i.ref("");let h=0;i.provide(b.matchedRouteKey,S);const s=t=>R.value.find(o=>o.stackEntryId===t),g=t=>{R.value.forEach(o=>{o.pageElement&&(o===t?D(o.pageElement):z(o.pageElement))})},P=t=>{const o=R.value.findIndex(m=>m===t);o>=0&&(R.value=R.value.slice(0,o+1))},W=t=>{R.value=R.value.filter(o=>o!==t)},L=t=>{const o=new Set(e.history.map(m=>m.id));R.value=R.value.filter(m=>m===t||m.routeInfo.cache&&o.has(m.stackEntryId))},x=t=>{var m;const o=t.props.default;return o?o===!0?((m=e.current.value)==null?void 0:m.params)??{}:typeof o=="function"?o(n):o:{}},G=(t,o)=>t.routeInfo.action==="pop"?o.routeInfo.transition??t.routeInfo.transition??e.transition:t.routeInfo.transition??e.transition,A=t=>t.entryDirection==="none"||t.entryDirection==="root"||t.transition==="none",j=(t,o)=>!(t.routeInfo.isStackFallback||t.routeInfo.direction==="none"||t.routeInfo.direction==="root"||t.routeInfo.action==="pop"&&(A(t.routeInfo)||A(o.routeInfo))),V=(t,o)=>{var k;const m=j(t,o);return((k=e.shouldTransition)==null?void 0:k.call(e,{action:t.routeInfo.action,direction:t.routeInfo.direction,source:t.routeInfo.source,entering:t.routeInfo,leaving:o.routeInfo,defaultResult:m}))??m},$=(t,o)=>t.routeInfo.action==="pop"?o.routeInfo.transitionDuration??t.routeInfo.transitionDuration??e.transitionDuration:t.routeInfo.transitionDuration??e.transitionDuration,K=(t,o)=>t.routeInfo.action==="pop"?o.routeInfo.transitionEasing??t.routeInfo.transitionEasing??e.transitionEasing:t.routeInfo.transitionEasing??e.transitionEasing,_=async(t,o)=>{const m=++h;await i.nextTick();const k=t.pageElement;if(!k)return;if(I(t.componentRef,Y),!o||o===t||!o.pageElement){D(k),I(t.componentRef,X),L(t),g(t);return}const p=o.pageElement,B=V(t,o),c=B?G(t,o):"none",a=B?$(t,o):0,u=K(t,o),f=ue(c||v,e.transitions);I(o.componentRef,Z),D(k),D(p),await le(f,{direction:t.routeInfo.direction,action:t.routeInfo.action,routeInfo:t.routeInfo,enteringElement:k,leavingElement:p,duration:a,easing:u}),m===h&&(z(p),I(o.componentRef,N),I(t.componentRef,X),t.routeInfo.action==="pop"?P(t):t.routeInfo.action==="replace"&&W(o),L(t),g(t))},H=async()=>{const t=S.value,o=e.current.value;if(!t||!o)return;const m=ee(t);if(!m)return;const k=s(E.value);let p=s(o.id);p?(p.routeInfo=o,p.matchedRoute=t,p.component=m,p.props=x(t),p.mounted=!0):(p={id:U("view"),stackEntryId:o.id,routeInfo:o,matchedRoute:t,component:m,props:x(t),componentRef:i.ref(),mounted:!0},R.value=[...R.value,p]),E.value=p.stackEntryId,await _(p,k)};return i.watch(()=>{var t;return[(t=e.current.value)==null?void 0:t.id,S.value]},()=>{H()},{immediate:!0}),i.onUnmounted(()=>{h++,R.value=[]}),{injectedRoute:n,viewItems:R,registerStackPage:(t,o)=>{t.pageElement=o,t.stackEntryId===E.value?D(o):z(o)}}},render(){return i.h("div",{class:"rs-outlet"},this.viewItems.filter(e=>e.mounted).map(e=>i.h(e.component,{key:e.id,ref:e.componentRef,...e.props,registerStackPage:r=>this.registerStackPage(e,r)})))}}),Ee=i.defineComponent({name:"RouterPage",props:{registerStackPage:{type:Function,default:void 0}},setup(e,{attrs:r,slots:n}){const l=i.ref();return i.onMounted(()=>{var d;l.value&&((d=e.registerStackPage)==null||d.call(e,l.value))}),()=>{var d;return i.h("section",{...r,ref:l,class:["rs-page",r.class]},(d=n.default)==null?void 0:d.call(n))}}}),we=i.defineComponent({name:"StackRouterDebugPanel",props:{initialOpen:{type:Boolean,default:!1}},setup(e){const r=O(),n=i.ref(e.initialOpen);return()=>{const l=r.current.value;return i.h("aside",{class:"rs-debug-panel"},[i.h("button",{class:"rs-debug-toggle",type:"button",onClick:()=>{n.value=!n.value}},n.value?"Stack x":"Stack"),n.value?i.h("section",{class:"rs-debug-body"},[i.h("header",[i.h("strong","Router Stack"),i.h("span",`${r.history.length} pages`)]),i.h("dl",[i.h("dt","current"),i.h("dd",(l==null?void 0:l.fullPath)??"-"),i.h("dt","canGoBack"),i.h("dd",String(r.canGoBack()))]),i.h("ol",r.history.map(d=>i.h("li",{key:d.id,class:{"rs-debug-active":d.id===(l==null?void 0:l.id),"rs-debug-no-cache":!d.cache}},[i.h("code",d.fullPath),i.h("span",[`${d.action}/${d.direction}`,` source:${d.source}`,` entry:${d.entryDirection}`,` cache:${d.cache?"yes":"no"}`,` transition:${d.transition??"-"}`])])))]):void 0])}}});Object.defineProperty(exports,"RouterLink",{enumerable:!0,get:()=>b.RouterLink});Object.defineProperty(exports,"RouterView",{enumerable:!0,get:()=>b.RouterView});Object.defineProperty(exports,"createMemoryHistory",{enumerable:!0,get:()=>b.createMemoryHistory});Object.defineProperty(exports,"createWebHashHistory",{enumerable:!0,get:()=>b.createWebHashHistory});Object.defineProperty(exports,"createWebHistory",{enumerable:!0,get:()=>b.createWebHistory});Object.defineProperty(exports,"useRoute",{enumerable:!0,get:()=>b.useRoute});Object.defineProperty(exports,"useRouter",{enumerable:!0,get:()=>b.useRouter});exports.RouterOutlet=Pe;exports.RouterPage=Ee;exports.StackRouterDebugPanel=we;exports.createStackRouter=fe;exports.defineStackTransition=oe;exports.onPageDidEnter=ye;exports.onPageDidLeave=pe;exports.onPageWillEnter=me;exports.onPageWillLeave=ke;exports.stackRouterKey=C;exports.useStackRouter=Re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),R=require("vue-router"),Y={};function X(t="route"){const n=(Y[t]??0)+1;return Y[t]=n,`${t}-${n}`}const Q="slide",re="cubic-bezier(0.3, 0, 0.66, 1)";function oe(t){return t}const ne=({direction:t})=>t==="back"?{leaving:[{transform:"translateX(0)"},{transform:"translateX(100%)"}]}:{entering:[{transform:"translateX(100%)"},{transform:"translateX(0)"}]},ae=()=>({entering:[{opacity:0},{opacity:1}],leaving:[{opacity:1},{opacity:0}]}),ce=({direction:t})=>{const n=t==="back";return{entering:n?[{transform:"scale(0.98)",opacity:0},{transform:"scale(1)",opacity:1}]:[{transform:"scale(1.04)",opacity:0},{transform:"scale(1)",opacity:1}],leaving:n?[{transform:"scale(1)",opacity:1},{transform:"scale(1.04)",opacity:0}]:[{transform:"scale(1)",opacity:1},{transform:"scale(0.98)",opacity:0}]}},ie=()=>({}),se={slide:ne,fade:ae,scale:ce,none:ie};function ue(t,n){const c=n[t];return c||n[Q]}function Z(t,n,c){if(!n||!t.animate||Number(c.duration)<=0)return Promise.resolve();const l=t.animate(n,c);return l.finished.then(()=>l.cancel())}async function le(t,n){const c=t(n),l={duration:n.duration,easing:n.easing,fill:"both",...c.options};await Promise.all([Z(n.enteringElement,c.entering,l),Z(n.leavingElement,c.leaving,l)])}const H=Symbol("stack-router");function de(){const t=window.history.state;return typeof(t==null?void 0:t.position)=="number"?t.position:window.history.length}function q(t,n){return n||(t==="pop"?"back":t==="replace"?"none":"forward")}function fe(t){const n=R.createRouter(t),c=[],l=s.shallowRef(),f=t.transitionDuration??210,g=t.transitionEasing??re,w=t.transition??Q,k={...se,...t.transitions},P=t.maxStackSize??30;let m=-1,i,E=!1;const p=(a,r,u,d,y=!1,b="stack")=>{i={action:a,direction:q(a,r),source:b,delta:u,reuse:d==null?void 0:d.reuse,transition:d==null?void 0:d.transition,duration:d==null?void 0:d.duration,easing:d==null?void 0:d.easing,resetRoot:y}},F=(a,r)=>{const u=(i==null?void 0:i.action)??"push",d=q(u,i==null?void 0:i.direction),y=l.value,b=u==="push"&&d==="forward",M=T(a);return{id:X("route"),key:a.fullPath,fullPath:a.fullPath,pathname:a.path,params:a.params,query:a.query,action:u,direction:d,reuse:(i==null?void 0:i.reuse)??!1,source:(i==null?void 0:i.source)??"stack",entryDirection:d,lastPathname:(y==null?void 0:y.pathname)||(r.name?r.path:void 0),pushedByRoute:b?y==null?void 0:y.pathname:y==null?void 0:y.pushedByRoute,position:de(),delta:i==null?void 0:i.delta,transition:(i==null?void 0:i.transition)??w,transitionDuration:(i==null?void 0:i.duration)??f,transitionEasing:(i==null?void 0:i.easing)??g,cache:M}},T=a=>{const r=a.meta.stack;return a.meta.stackCache!==!1&&(r==null?void 0:r.cache)!==!1},K=()=>{if(P<=0||c.length<=P)return;const a=c.length-P;c.splice(0,a),m=Math.max(0,m-a)},W=a=>{if(a.action==="pop"){let r=-1;if(a.direction==="forward"||(a.delta??0)>0){for(let u=m+1;u<c.length;u++)if(c[u].key===a.key){r=u;break}}else for(let u=m-1;u>=0;u--)if(c[u].key===a.key){r=u;break}if(r>=0){const u=c[r];c[r]={...u,...a,id:u.id,reuse:u.reuse,source:a.source,entryDirection:u.entryDirection,transition:u.transition,transitionDuration:u.transitionDuration,transitionEasing:u.transitionEasing},m=r}else c.push({...a,direction:"none",entryDirection:"none",transition:"none",isStackFallback:!0}),m=c.length-1}else if(a.action==="replace"){if(i!=null&&i.resetRoot){c.splice(0,c.length,a),m=0,l.value=c[m];return}m>=0?c[m]=a:(c.push(a),m=0)}else m<c.length-1&&c.splice(m+1),c.push(a),m=c.length-1;K(),l.value=c[m]};t.history.listen((a,r,u)=>{const d="delta"in u?u.delta:void 0,y=u.direction==="back"?"back":u.direction==="forward"?"forward":void 0;i?(i.delta=d,i.direction=q(i.action,i.direction??y)):p(u.type==="pop"?"pop":u.type,y,d,void 0,!1,"external")}),n.beforeEach(a=>!((i==null?void 0:i.action)==="pop"&&E&&!c.some(r=>r.fullPath===a.fullPath))),n.afterEach((a,r,u)=>{if(u){i=void 0;return}W(F(a,r)),i=void 0});const L=n.push.bind(n),I=n.replace.bind(n),G=n.back.bind(n),x=n.forward.bind(n),$=n.go.bind(n),A=(a,r)=>(p("push",(r==null?void 0:r.direction)??"forward",void 0,r),L(a)),j=(a,r)=>(p("replace",(r==null?void 0:r.direction)??"root",void 0,r),I(a)),B=(a,r)=>{const u=n.resolve(a).fullPath;let d=-1;for(let b=m;b>=0;b--)if(c[b].fullPath===u){d=b;break}if(d<0)return!1;const y=d-m;return y===0||(p("pop",(r==null?void 0:r.direction)??"back",y,r),$(y)),!0},V=(a,r)=>{const u=n.resolve(a).fullPath;if(m>=0&&n.currentRoute.value.fullPath===u){const d=c[m],y={...d,id:X("route"),action:"replace",direction:(r==null?void 0:r.direction)??"root",source:"stack",entryDirection:(r==null?void 0:r.direction)??"root",delta:void 0,reuse:(r==null?void 0:r.reuse)??d.reuse,transition:(r==null?void 0:r.transition)??d.transition,transitionDuration:(r==null?void 0:r.duration)??d.transitionDuration,transitionEasing:(r==null?void 0:r.easing)??d.transitionEasing,cache:!0,isStackFallback:!1};return c.splice(0,c.length,y),m=0,E=!0,l.value=y,Promise.resolve(void 0)}return p("replace",(r==null?void 0:r.direction)??"root",void 0,r,!0),E=!0,I(a)},_=()=>{p("pop","back",-1),G()},z=()=>{p("pop","forward",1),x()},e=n;e.push=A,e.replace=j,e.popTo=B,e.resetRoot=V,e.back=_,e.forward=z;const o={router:e,transitionDuration:f,transitionEasing:g,transition:w,transitions:k,maxStackSize:P,shouldTransition:t.shouldTransition,current:l,get history(){return c},canGoBack:(a=1)=>m-a>=0,push:A,replace:j,popTo:B,resetRoot:V,back:_,forward:z},h=n.install.bind(n);return n.install=a=>{a.provide(H,o),h(a)},e}const v="onPageWillEnter",J="onPageDidEnter",N="onPageWillLeave",O="onPageDidLeave";function he(t,n,c){if(!c)throw new Error(`${t} must be called inside setup().`);const l=c.proxy,f=l[t]??[];f.push(()=>{c.isUnmounted||n()}),l[t]=f,c.exposed&&(c.exposed[t]=f)}function C(t){return(n,c=s.getCurrentInstance())=>he(t,n,c)}const me=C(v),ye=C(J),ke=C(N),Re=C(O);function be(){const t=s.inject(H);if(!t)throw new Error("useStackRouter must be used after createStackRouter().");return{router:t.router,canGoBack:t.canGoBack,push:t.push,replace:t.replace,popTo:t.popTo,resetRoot:t.resetRoot,back:t.back,forward:t.forward}}function ee(){const t=s.inject(H);if(!t)throw new Error("RouterOutlet must be used with createStackRouter().");return t}function S(t,n){const c=t.value;if(!c)return;const l=c[n];Array.isArray(l)?l.forEach(f=>f()):typeof l=="function"&&l.call(c)}function D(t){t.classList.remove("rs-page-hidden","rs-page-invisible"),t.removeAttribute("aria-hidden")}function U(t){t.classList.add("rs-page-hidden"),t.setAttribute("aria-hidden","true")}function te(t){var n;return(n=t.components)==null?void 0:n.default}function pe(t){const n=te(t);return n!==void 0&&typeof n=="object"&&"name"in n&&n.name==="RouterView"}const Pe=s.defineComponent({name:"RouterOutlet",setup(){const t=ee(),n=R.useRoute(),c=s.inject(R.routeLocationKey),l=s.inject(R.matchedRouteKey,void 0),f=s.computed(()=>{const e=l==null?void 0:l.value;if(!e)return 0;const o=n.matched.findIndex(h=>h===e);return o>=0?o+1:0}),g=s.computed(()=>n.matched[f.value]),w=s.computed(()=>{for(let e=f.value;e<n.matched.length;e++){const o=n.matched[e];if(!pe(o))return o}return g.value}),k=s.shallowRef([]),P=s.ref("");let m=0;s.provide(R.matchedRouteKey,w);const i=e=>k.value.find(o=>o.id===e),E=e=>k.value.find(o=>o.routeIds.has(e)),p=e=>k.value.find(o=>o.routeKey===e),F=e=>e.action==="push"&&e.direction==="forward"&&!e.reuse&&k.value.some(o=>o.routeKey===e.key),T=e=>{k.value.forEach(o=>{o.pageElement&&(o===e?D(o.pageElement):U(o.pageElement))})},K=e=>{const o=t.history.findIndex(a=>a.id===e.routeInfo.id);if(o<0)return;const h=new Set(t.history.slice(0,o+1).map(a=>a.id));k.value.forEach(a=>{a.routeIds=new Set([...a.routeIds].filter(r=>h.has(r)))}),k.value=k.value.filter(a=>a===e||a.routeIds.size>0)},W=e=>{k.value=k.value.filter(o=>o!==e)},L=e=>{const o=new Set(t.history.map(h=>h.id));k.value.forEach(h=>{h.routeIds=new Set([...h.routeIds].filter(a=>o.has(a)))}),k.value=k.value.filter(h=>h===e||h.routeInfo.cache&&h.routeIds.size>0)},I=e=>{var h;const o=e.props.default;return o?o===!0?((h=t.current.value)==null?void 0:h.params)??{}:typeof o=="function"?o(c):o:{}},G=(e,o)=>e.routeInfo.action==="pop"?o.routeInfo.transition??e.routeInfo.transition??t.transition:e.routeInfo.transition??t.transition,x=e=>e.entryDirection==="none"||e.entryDirection==="root"||e.transition==="none",$=(e,o)=>!(e.routeInfo.isStackFallback||e.routeInfo.direction==="none"||e.routeInfo.direction==="root"||e.routeInfo.action==="pop"&&(x(e.routeInfo)||x(o.routeInfo))),A=(e,o)=>{var a;const h=$(e,o);return((a=t.shouldTransition)==null?void 0:a.call(t,{action:e.routeInfo.action,direction:e.routeInfo.direction,source:e.routeInfo.source,entering:e.routeInfo,leaving:o.routeInfo,defaultResult:h}))??h},j=(e,o)=>e.routeInfo.action==="pop"?o.routeInfo.transitionDuration??e.routeInfo.transitionDuration??t.transitionDuration:e.routeInfo.transitionDuration??t.transitionDuration,B=(e,o)=>e.routeInfo.action==="pop"?o.routeInfo.transitionEasing??e.routeInfo.transitionEasing??t.transitionEasing:e.routeInfo.transitionEasing??t.transitionEasing,V=async(e,o)=>{const h=++m;await s.nextTick();const a=e.pageElement;if(!a)return;if(S(e.componentRef,v),!o||o===e||!o.pageElement){D(a),S(e.componentRef,J),L(e),T(e);return}const r=o.pageElement,u=A(e,o),d=u?G(e,o):"none",y=u?j(e,o):0,b=B(e,o),M=ue(d||Q,t.transitions);S(o.componentRef,N),D(a),D(r),await le(M,{direction:e.routeInfo.direction,action:e.routeInfo.action,routeInfo:e.routeInfo,enteringElement:a,leavingElement:r,duration:y,easing:b}),h===m&&(U(r),S(o.componentRef,O),S(e.componentRef,J),e.routeInfo.action==="pop"?K(e):e.routeInfo.action==="replace"&&W(o),L(e),T(e))},_=async()=>{const e=w.value,o=t.current.value;if(!e||!o)return;const h=te(e);if(!h)return;const a=i(P.value);let r=E(o.id);!r&&!F(o)&&(r=p(o.key)),r?(r.routeIds.add(o.id),r.routeKey=o.key,r.routeInfo=o,r.matchedRoute=e,r.component=h,r.props=I(e),r.mounted=!0):(r={id:X("view"),routeKey:o.key,routeIds:new Set([o.id]),routeInfo:o,matchedRoute:e,component:h,props:I(e),componentRef:s.ref(),mounted:!0},k.value=[...k.value,r]),P.value=r.id,await V(r,a)};return s.watch(()=>{var e;return[(e=t.current.value)==null?void 0:e.id,w.value]},()=>{_()},{immediate:!0}),s.onUnmounted(()=>{m++,k.value=[]}),{injectedRoute:c,viewItems:k,registerStackPage:(e,o)=>{e.pageElement=o,e.id===P.value?D(o):U(o)}}},render(){return s.h("div",{class:"rs-outlet"},this.viewItems.filter(t=>t.mounted).map(t=>s.h(t.component,{key:t.id,ref:t.componentRef,...t.props,registerStackPage:n=>this.registerStackPage(t,n)})))}}),we=s.defineComponent({name:"RouterPage",props:{registerStackPage:{type:Function,default:void 0}},setup(t,{attrs:n,slots:c}){const l=s.ref();return s.onMounted(()=>{var f;l.value&&((f=t.registerStackPage)==null||f.call(t,l.value))}),()=>{var f;return s.h("section",{...n,ref:l,class:["rs-page",n.class]},(f=c.default)==null?void 0:f.call(c))}}}),Ee=s.defineComponent({name:"StackRouterDebugPanel",props:{initialOpen:{type:Boolean,default:!1}},setup(t){const n=ee(),c=s.ref(t.initialOpen);return()=>{const l=n.current.value;return s.h("aside",{class:"rs-debug-panel"},[s.h("button",{class:"rs-debug-toggle",type:"button",onClick:()=>{c.value=!c.value}},c.value?"Stack x":"Stack"),c.value?s.h("section",{class:"rs-debug-body"},[s.h("header",[s.h("strong","Router Stack"),s.h("span",`${n.history.length} pages`)]),s.h("dl",[s.h("dt","current"),s.h("dd",(l==null?void 0:l.fullPath)??"-"),s.h("dt","canGoBack"),s.h("dd",String(n.canGoBack()))]),s.h("ol",n.history.map(f=>s.h("li",{key:f.id,class:{"rs-debug-active":f.id===(l==null?void 0:l.id),"rs-debug-no-cache":!f.cache}},[s.h("code",f.fullPath),s.h("span",[`${f.action}/${f.direction}`,` source:${f.source}`,` entry:${f.entryDirection}`,` cache:${f.cache?"yes":"no"}`,` transition:${f.transition??"-"}`])])))]):void 0])}}});Object.defineProperty(exports,"RouterLink",{enumerable:!0,get:()=>R.RouterLink});Object.defineProperty(exports,"RouterView",{enumerable:!0,get:()=>R.RouterView});Object.defineProperty(exports,"createMemoryHistory",{enumerable:!0,get:()=>R.createMemoryHistory});Object.defineProperty(exports,"createWebHashHistory",{enumerable:!0,get:()=>R.createWebHashHistory});Object.defineProperty(exports,"createWebHistory",{enumerable:!0,get:()=>R.createWebHistory});Object.defineProperty(exports,"useRoute",{enumerable:!0,get:()=>R.useRoute});Object.defineProperty(exports,"useRouter",{enumerable:!0,get:()=>R.useRouter});exports.RouterOutlet=Pe;exports.RouterPage=we;exports.StackRouterDebugPanel=Ee;exports.createStackRouter=fe;exports.defineStackTransition=oe;exports.onPageDidEnter=ye;exports.onPageDidLeave=Re;exports.onPageWillEnter=me;exports.onPageWillLeave=ke;exports.stackRouterKey=H;exports.useStackRouter=be;

package/dist/vue-router-stack.js

@@ -1,16 +1,16 @@
-import { shallowRef as tt, getCurrentInstance as it, inject as G, defineComponent as Q, h as y, computed as U, ref as C, provide as st, watch as ut, onUnmounted as lt, nextTick as dt, onMounted as ft } from "vue";
-import { createRouter as ht, useRoute as mt, routeLocationKey as kt, matchedRouteKey as v } from "vue-router";
-import { RouterLink as jt, RouterView as zt, createMemoryHistory as Ut, createWebHashHistory as Xt, createWebHistory as Mt, useRoute as qt, useRouter as Jt } from "vue-router";
-const N = {};
-function q(t = "route") {
-  const r = (N[t] ?? 0) + 1;
-  return N[t] = r, `${t}-${r}`;
+import { shallowRef as te, getCurrentInstance as se, inject as F, defineComponent as Y, h as k, computed as X, ref as C, provide as ie, watch as ue, onUnmounted as le, nextTick as de, onMounted as fe } from "vue";
+import { createRouter as he, useRoute as me, routeLocationKey as ye, matchedRouteKey as v } from "vue-router";
+import { RouterLink as ze, RouterView as je, createMemoryHistory as Ue, createWebHashHistory as Xe, createWebHistory as Me, useRoute as qe, useRouter as Je } from "vue-router";
+const O = {};
+function J(t = "route") {
+  const n = (O[t] ?? 0) + 1;
+  return O[t] = n, `${t}-${n}`;
 }
-const Y = "slide", yt = "cubic-bezier(0.3, 0, 0.66, 1)";
-function Lt(t) {
+const Z = "slide", ke = "cubic-bezier(0.3, 0, 0.66, 1)";
+function Le(t) {
   return t;
 }
-const pt = ({ direction: t }) => t === "back" ? {
+const Re = ({ direction: t }) => t === "back" ? {
   leaving: [
     { transform: "translateX(0)" },
     { transform: "translateX(100%)" }
@@ -20,20 +20,20 @@ const pt = ({ direction: t }) => t === "back" ? {
     { transform: "translateX(100%)" },
     { transform: "translateX(0)" }
   ]
-}, Rt = () => ({
+}, pe = () => ({
   entering: [{ opacity: 0 }, { opacity: 1 }],
   leaving: [{ opacity: 1 }, { opacity: 0 }]
-}), Et = ({ direction: t }) => {
-  const r = t === "back";
+}), we = ({ direction: t }) => {
+  const n = t === "back";
   return {
-    entering: r ? [
+    entering: n ? [
       { transform: "scale(0.98)", opacity: 0 },
       { transform: "scale(1)", opacity: 1 }
     ] : [
       { transform: "scale(1.04)", opacity: 0 },
       { transform: "scale(1)", opacity: 1 }
     ],
-    leaving: r ? [
+    leaving: n ? [
       { transform: "scale(1)", opacity: 1 },
       { transform: "scale(1.04)", opacity: 0 }
     ] : [
@@ -41,250 +41,254 @@ const pt = ({ direction: t }) => t === "back" ? {
       { transform: "scale(0.98)", opacity: 0 }
     ]
   };
-}, bt = () => ({}), Pt = {
-  slide: pt,
-  fade: Rt,
-  scale: Et,
-  none: bt
+}, Ee = () => ({}), be = {
+  slide: Re,
+  fade: pe,
+  scale: we,
+  none: Ee
 };
-function wt(t, r) {
-  const n = r[t];
-  return n || r[Y];
+function Ie(t, n) {
+  const c = n[t];
+  return c || n[Z];
 }
-function O(t, r, n) {
-  if (!r || !t.animate || Number(n.duration) <= 0)
+function ee(t, n, c) {
+  if (!n || !t.animate || Number(c.duration) <= 0)
     return Promise.resolve();
-  const u = t.animate(r, n);
+  const u = t.animate(n, c);
   return u.finished.then(() => u.cancel());
 }
-async function It(t, r) {
-  const n = t(r), u = {
-    duration: r.duration,
-    easing: r.easing,
+async function Pe(t, n) {
+  const c = t(n), u = {
+    duration: n.duration,
+    easing: n.easing,
     fill: "both",
-    ...n.options
+    ...c.options
   };
   await Promise.all([
-    O(r.enteringElement, n.entering, u),
-    O(r.leavingElement, n.leaving, u)
+    ee(n.enteringElement, c.entering, u),
+    ee(n.leavingElement, c.leaving, u)
   ]);
 }
-const Z = Symbol("stack-router");
-function St() {
+const N = Symbol("stack-router");
+function Se() {
   const t = window.history.state;
   return typeof (t == null ? void 0 : t.position) == "number" ? t.position : window.history.length;
 }
-function X(t, r) {
-  return r || (t === "pop" ? "back" : t === "replace" ? "none" : "forward");
+function M(t, n) {
+  return n || (t === "pop" ? "back" : t === "replace" ? "none" : "forward");
 }
-function At(t) {
-  const r = ht(t), n = [], u = tt(), l = t.transitionDuration ?? 210, T = t.transitionEasing ?? yt, w = t.transition ?? Y, R = {
-    ...Pt,
+function Ae(t) {
+  const n = he(t), c = [], u = te(), d = t.transitionDuration ?? 210, D = t.transitionEasing ?? ke, E = t.transition ?? Z, y = {
+    ...be,
     ...t.transitions
-  }, b = t.maxStackSize ?? 30;
-  let f = -1, i, I = !1;
-  const E = (c, a, s, d, m = !1, P = "stack") => {
-    i = {
-      action: c,
-      direction: X(c, a),
-      source: P,
-      delta: s,
-      transition: d == null ? void 0 : d.transition,
-      duration: d == null ? void 0 : d.duration,
-      easing: d == null ? void 0 : d.easing,
+  }, w = t.maxStackSize ?? 30;
+  let h = -1, s, b = !1;
+  const p = (a, r, i, l, m = !1, R = "stack") => {
+    s = {
+      action: a,
+      direction: M(a, r),
+      source: R,
+      delta: i,
+      reuse: l == null ? void 0 : l.reuse,
+      transition: l == null ? void 0 : l.transition,
+      duration: l == null ? void 0 : l.duration,
+      easing: l == null ? void 0 : l.easing,
       resetRoot: m
     };
-  }, V = (c, a) => {
-    const s = (i == null ? void 0 : i.action) ?? "push", d = X(s, i == null ? void 0 : i.direction), m = u.value, P = s === "push" && d === "forward", ct = g(c);
+  }, H = (a, r) => {
+    const i = (s == null ? void 0 : s.action) ?? "push", l = M(i, s == null ? void 0 : s.direction), m = u.value, R = i === "push" && l === "forward", U = T(a);
     return {
-      id: q("route"),
-      key: c.fullPath,
-      fullPath: c.fullPath,
-      pathname: c.path,
-      params: c.params,
-      query: c.query,
-      action: s,
-      direction: d,
-      source: (i == null ? void 0 : i.source) ?? "stack",
-      entryDirection: d,
-      lastPathname: (m == null ? void 0 : m.pathname) || (a.name ? a.path : void 0),
-      pushedByRoute: P ? m == null ? void 0 : m.pathname : m == null ? void 0 : m.pushedByRoute,
-      position: St(),
-      delta: i == null ? void 0 : i.delta,
-      transition: (i == null ? void 0 : i.transition) ?? w,
-      transitionDuration: (i == null ? void 0 : i.duration) ?? l,
-      transitionEasing: (i == null ? void 0 : i.easing) ?? T,
-      cache: ct
+      id: J("route"),
+      key: a.fullPath,
+      fullPath: a.fullPath,
+      pathname: a.path,
+      params: a.params,
+      query: a.query,
+      action: i,
+      direction: l,
+      reuse: (s == null ? void 0 : s.reuse) ?? !1,
+      source: (s == null ? void 0 : s.source) ?? "stack",
+      entryDirection: l,
+      lastPathname: (m == null ? void 0 : m.pathname) || (r.name ? r.path : void 0),
+      pushedByRoute: R ? m == null ? void 0 : m.pathname : m == null ? void 0 : m.pushedByRoute,
+      position: Se(),
+      delta: s == null ? void 0 : s.delta,
+      transition: (s == null ? void 0 : s.transition) ?? E,
+      transitionDuration: (s == null ? void 0 : s.duration) ?? d,
+      transitionEasing: (s == null ? void 0 : s.easing) ?? D,
+      cache: U
     };
-  }, g = (c) => {
-    const a = c.meta.stack;
-    return c.meta.stackCache !== !1 && (a == null ? void 0 : a.cache) !== !1;
-  }, x = () => {
-    if (b <= 0 || n.length <= b) return;
-    const c = n.length - b;
-    n.splice(0, c), f = Math.max(0, f - c);
-  }, $ = (c) => {
-    if (c.action === "pop") {
-      let a = -1;
-      if (c.direction === "forward" || (c.delta ?? 0) > 0) {
-        for (let s = f + 1; s < n.length; s++)
-          if (n[s].key === c.key) {
-            a = s;
+  }, T = (a) => {
+    const r = a.meta.stack;
+    return a.meta.stackCache !== !1 && (r == null ? void 0 : r.cache) !== !1;
+  }, K = () => {
+    if (w <= 0 || c.length <= w) return;
+    const a = c.length - w;
+    c.splice(0, a), h = Math.max(0, h - a);
+  }, $ = (a) => {
+    if (a.action === "pop") {
+      let r = -1;
+      if (a.direction === "forward" || (a.delta ?? 0) > 0) {
+        for (let i = h + 1; i < c.length; i++)
+          if (c[i].key === a.key) {
+            r = i;
             break;
           }
       } else
-        for (let s = f - 1; s >= 0; s--)
-          if (n[s].key === c.key) {
-            a = s;
+        for (let i = h - 1; i >= 0; i--)
+          if (c[i].key === a.key) {
+            r = i;
             break;
           }
-      if (a >= 0) {
-        const s = n[a];
-        n[a] = {
-          ...s,
-          ...c,
-          id: s.id,
-          source: c.source,
-          entryDirection: s.entryDirection,
-          transition: s.transition,
-          transitionDuration: s.transitionDuration,
-          transitionEasing: s.transitionEasing
-        }, f = a;
+      if (r >= 0) {
+        const i = c[r];
+        c[r] = {
+          ...i,
+          ...a,
+          id: i.id,
+          reuse: i.reuse,
+          source: a.source,
+          entryDirection: i.entryDirection,
+          transition: i.transition,
+          transitionDuration: i.transitionDuration,
+          transitionEasing: i.transitionEasing
+        }, h = r;
       } else
-        n.push({
-          ...c,
+        c.push({
+          ...a,
           direction: "none",
           entryDirection: "none",
           transition: "none",
           isStackFallback: !0
-        }), f = n.length - 1;
-    } else if (c.action === "replace") {
-      if (i != null && i.resetRoot) {
-        n.splice(0, n.length, c), f = 0, u.value = n[f];
+        }), h = c.length - 1;
+    } else if (a.action === "replace") {
+      if (s != null && s.resetRoot) {
+        c.splice(0, c.length, a), h = 0, u.value = c[h];
         return;
       }
-      f >= 0 ? n[f] = c : (n.push(c), f = 0);
+      h >= 0 ? c[h] = a : (c.push(a), h = 0);
     } else
-      f < n.length - 1 && n.splice(f + 1), n.push(c), f = n.length - 1;
-    x(), u.value = n[f];
+      h < c.length - 1 && c.splice(h + 1), c.push(a), h = c.length - 1;
+    K(), u.value = c[h];
   };
-  t.history.listen((c, a, s) => {
-    const d = "delta" in s ? s.delta : void 0, m = s.direction === "back" ? "back" : s.direction === "forward" ? "forward" : void 0;
-    i ? (i.delta = d, i.direction = X(
-      i.action,
-      i.direction ?? m
-    )) : E(
-      s.type === "pop" ? "pop" : s.type,
+  t.history.listen((a, r, i) => {
+    const l = "delta" in i ? i.delta : void 0, m = i.direction === "back" ? "back" : i.direction === "forward" ? "forward" : void 0;
+    s ? (s.delta = l, s.direction = M(
+      s.action,
+      s.direction ?? m
+    )) : p(
+      i.type === "pop" ? "pop" : i.type,
       m,
-      d,
+      l,
       void 0,
       !1,
       "external"
     );
-  }), r.beforeEach((c) => !((i == null ? void 0 : i.action) === "pop" && I && !n.some((a) => a.fullPath === c.fullPath))), r.afterEach((c, a, s) => {
-    if (s) {
-      i = void 0;
+  }), n.beforeEach((a) => !((s == null ? void 0 : s.action) === "pop" && b && !c.some((r) => r.fullPath === a.fullPath))), n.afterEach((a, r, i) => {
+    if (i) {
+      s = void 0;
       return;
     }
-    $(V(c, a)), i = void 0;
+    $(H(a, r)), s = void 0;
   });
-  const L = r.push.bind(r), A = r.replace.bind(r), W = r.back.bind(r), K = r.forward.bind(r), j = r.go.bind(r), _ = (c, a) => (E(
+  const g = n.push.bind(n), I = n.replace.bind(n), W = n.back.bind(n), x = n.forward.bind(n), z = n.go.bind(n), L = (a, r) => (p(
     "push",
-    (a == null ? void 0 : a.direction) ?? "forward",
+    (r == null ? void 0 : r.direction) ?? "forward",
     void 0,
-    a
-  ), L(c)), B = (c, a) => (E(
+    r
+  ), g(a)), A = (a, r) => (p(
     "replace",
-    (a == null ? void 0 : a.direction) ?? "root",
+    (r == null ? void 0 : r.direction) ?? "root",
     void 0,
-    a
-  ), A(c)), z = (c, a) => {
-    const s = r.resolve(c).fullPath;
-    let d = -1;
-    for (let P = f; P >= 0; P--)
-      if (n[P].fullPath === s) {
-        d = P;
+    r
+  ), I(a)), B = (a, r) => {
+    const i = n.resolve(a).fullPath;
+    let l = -1;
+    for (let R = h; R >= 0; R--)
+      if (c[R].fullPath === i) {
+        l = R;
         break;
       }
-    if (d < 0) return !1;
-    const m = d - f;
-    return m === 0 || (E(
+    if (l < 0) return !1;
+    const m = l - h;
+    return m === 0 || (p(
       "pop",
-      (a == null ? void 0 : a.direction) ?? "back",
+      (r == null ? void 0 : r.direction) ?? "back",
       m,
-      a
-    ), j(m)), !0;
-  }, e = (c, a) => {
-    const s = r.resolve(c).fullPath;
-    if (f >= 0 && r.currentRoute.value.fullPath === s) {
-      const d = n[f], m = {
-        ...d,
-        id: q("route"),
+      r
+    ), z(m)), !0;
+  }, _ = (a, r) => {
+    const i = n.resolve(a).fullPath;
+    if (h >= 0 && n.currentRoute.value.fullPath === i) {
+      const l = c[h], m = {
+        ...l,
+        id: J("route"),
         action: "replace",
-        direction: (a == null ? void 0 : a.direction) ?? "root",
+        direction: (r == null ? void 0 : r.direction) ?? "root",
         source: "stack",
-        entryDirection: (a == null ? void 0 : a.direction) ?? "root",
+        entryDirection: (r == null ? void 0 : r.direction) ?? "root",
         delta: void 0,
-        transition: (a == null ? void 0 : a.transition) ?? d.transition,
-        transitionDuration: (a == null ? void 0 : a.duration) ?? d.transitionDuration,
-        transitionEasing: (a == null ? void 0 : a.easing) ?? d.transitionEasing,
+        reuse: (r == null ? void 0 : r.reuse) ?? l.reuse,
+        transition: (r == null ? void 0 : r.transition) ?? l.transition,
+        transitionDuration: (r == null ? void 0 : r.duration) ?? l.transitionDuration,
+        transitionEasing: (r == null ? void 0 : r.easing) ?? l.transitionEasing,
         cache: !0,
         isStackFallback: !1
       };
-      return n.splice(0, n.length, m), f = 0, I = !0, u.value = m, Promise.resolve(void 0);
+      return c.splice(0, c.length, m), h = 0, b = !0, u.value = m, Promise.resolve(void 0);
     }
-    return E(
+    return p(
       "replace",
-      (a == null ? void 0 : a.direction) ?? "root",
+      (r == null ? void 0 : r.direction) ?? "root",
       void 0,
-      a,
+      r,
       !0
-    ), I = !0, A(c);
-  }, o = () => {
-    E("pop", "back", -1), W();
-  }, h = () => {
-    E("pop", "forward", 1), K();
-  }, k = r;
-  k.push = _, k.replace = B, k.popTo = z, k.resetRoot = e, k.back = o, k.forward = h;
-  const p = {
-    router: k,
-    transitionDuration: l,
-    transitionEasing: T,
-    transition: w,
-    transitions: R,
-    maxStackSize: b,
+    ), b = !0, I(a);
+  }, V = () => {
+    p("pop", "back", -1), W();
+  }, j = () => {
+    p("pop", "forward", 1), x();
+  }, e = n;
+  e.push = L, e.replace = A, e.popTo = B, e.resetRoot = _, e.back = V, e.forward = j;
+  const o = {
+    router: e,
+    transitionDuration: d,
+    transitionEasing: D,
+    transition: E,
+    transitions: y,
+    maxStackSize: w,
     shouldTransition: t.shouldTransition,
     current: u,
     get history() {
-      return n;
+      return c;
     },
-    canGoBack: (c = 1) => f - c >= 0,
-    push: _,
-    replace: B,
-    popTo: z,
-    resetRoot: e,
-    back: o,
-    forward: h
-  }, F = r.install.bind(r);
-  return r.install = (c) => {
-    c.provide(Z, p), F(c);
-  }, k;
+    canGoBack: (a = 1) => h - a >= 0,
+    push: L,
+    replace: A,
+    popTo: B,
+    resetRoot: _,
+    back: V,
+    forward: j
+  }, f = n.install.bind(n);
+  return n.install = (a) => {
+    a.provide(N, o), f(a);
+  }, e;
 }
-const et = "onPageWillEnter", J = "onPageDidEnter", rt = "onPageWillLeave", ot = "onPageDidLeave";
-function Dt(t, r, n) {
-  if (!n)
+const re = "onPageWillEnter", Q = "onPageDidEnter", oe = "onPageWillLeave", ne = "onPageDidLeave";
+function De(t, n, c) {
+  if (!c)
     throw new Error(`${t} must be called inside setup().`);
-  const u = n.proxy, l = u[t] ?? [];
-  l.push(() => {
-    n.isUnmounted || r();
-  }), u[t] = l, n.exposed && (n.exposed[t] = l);
+  const u = c.proxy, d = u[t] ?? [];
+  d.push(() => {
+    c.isUnmounted || n();
+  }), u[t] = d, c.exposed && (c.exposed[t] = d);
 }
-function H(t) {
-  return (r, n = it()) => Dt(t, r, n);
+function G(t) {
+  return (n, c = se()) => De(t, n, c);
 }
-const _t = H(et), Bt = H(J), Ft = H(rt), Gt = H(ot);
-function Ct() {
-  const t = G(Z);
+const Be = G(re), _e = G(Q), Ve = G(oe), Fe = G(ne);
+function Ce() {
+  const t = F(N);
   if (!t)
     throw new Error("useStackRouter must be used after createStackRouter().");
   return {
@@ -298,157 +302,174 @@ function Ct() {
     forward: t.forward
   };
 }
-function nt() {
-  const t = G(Z);
+function ae() {
+  const t = F(N);
   if (!t)
     throw new Error("RouterOutlet must be used with createStackRouter().");
   return t;
 }
-function S(t, r) {
-  const n = t.value;
-  if (!n) return;
-  const u = n[r];
-  Array.isArray(u) ? u.forEach((l) => l()) : typeof u == "function" && u.call(n);
+function P(t, n) {
+  const c = t.value;
+  if (!c) return;
+  const u = c[n];
+  Array.isArray(u) ? u.forEach((d) => d()) : typeof u == "function" && u.call(c);
 }
-function D(t) {
+function S(t) {
   t.classList.remove("rs-page-hidden", "rs-page-invisible"), t.removeAttribute("aria-hidden");
 }
-function M(t) {
+function q(t) {
   t.classList.add("rs-page-hidden"), t.setAttribute("aria-hidden", "true");
 }
-function at(t) {
-  var r;
-  return (r = t.components) == null ? void 0 : r.default;
+function ce(t) {
+  var n;
+  return (n = t.components) == null ? void 0 : n.default;
 }
-function Tt(t) {
-  const r = at(t);
-  return r !== void 0 && typeof r == "object" && "name" in r && r.name === "RouterView";
+function Te(t) {
+  const n = ce(t);
+  return n !== void 0 && typeof n == "object" && "name" in n && n.name === "RouterView";
 }
-const Ht = Q({
+const Ge = Y({
   name: "RouterOutlet",
   setup() {
-    const t = nt(), r = mt(), n = G(kt), u = G(v, void 0), l = U(() => {
+    const t = ae(), n = me(), c = F(ye), u = F(v, void 0), d = X(() => {
       const e = u == null ? void 0 : u.value;
       if (!e) return 0;
-      const o = r.matched.findIndex(
-        (h) => h === e
+      const o = n.matched.findIndex(
+        (f) => f === e
       );
       return o >= 0 ? o + 1 : 0;
-    }), T = U(() => r.matched[l.value]), w = U(() => {
-      for (let e = l.value; e < r.matched.length; e++) {
-        const o = r.matched[e];
-        if (!Tt(o))
+    }), D = X(() => n.matched[d.value]), E = X(() => {
+      for (let e = d.value; e < n.matched.length; e++) {
+        const o = n.matched[e];
+        if (!Te(o))
           return o;
       }
-      return T.value;
-    }), R = tt([]), b = C("");
-    let f = 0;
-    st(v, w);
-    const i = (e) => R.value.find((o) => o.stackEntryId === e), I = (e) => {
-      R.value.forEach((o) => {
-        o.pageElement && (o === e ? D(o.pageElement) : M(o.pageElement));
+      return D.value;
+    }), y = te([]), w = C("");
+    let h = 0;
+    ie(v, E);
+    const s = (e) => y.value.find((o) => o.id === e), b = (e) => y.value.find((o) => o.routeIds.has(e)), p = (e) => y.value.find((o) => o.routeKey === e), H = (e) => e.action === "push" && e.direction === "forward" && !e.reuse && y.value.some((o) => o.routeKey === e.key), T = (e) => {
+      y.value.forEach((o) => {
+        o.pageElement && (o === e ? S(o.pageElement) : q(o.pageElement));
       });
-    }, E = (e) => {
-      const o = R.value.findIndex((h) => h === e);
-      o >= 0 && (R.value = R.value.slice(0, o + 1));
-    }, V = (e) => {
-      R.value = R.value.filter((o) => o !== e);
+    }, K = (e) => {
+      const o = t.history.findIndex(
+        (a) => a.id === e.routeInfo.id
+      );
+      if (o < 0) return;
+      const f = new Set(
+        t.history.slice(0, o + 1).map((a) => a.id)
+      );
+      y.value.forEach((a) => {
+        a.routeIds = new Set(
+          [...a.routeIds].filter((r) => f.has(r))
+        );
+      }), y.value = y.value.filter(
+        (a) => a === e || a.routeIds.size > 0
+      );
+    }, $ = (e) => {
+      y.value = y.value.filter((o) => o !== e);
     }, g = (e) => {
       const o = new Set(
-        t.history.map((h) => h.id)
+        t.history.map((f) => f.id)
       );
-      R.value = R.value.filter(
-        (h) => h === e || h.routeInfo.cache && o.has(h.stackEntryId)
+      y.value.forEach((f) => {
+        f.routeIds = new Set(
+          [...f.routeIds].filter((a) => o.has(a))
+        );
+      }), y.value = y.value.filter(
+        (f) => f === e || f.routeInfo.cache && f.routeIds.size > 0
       );
-    }, x = (e) => {
-      var h;
+    }, I = (e) => {
+      var f;
       const o = e.props.default;
-      return o ? o === !0 ? ((h = t.current.value) == null ? void 0 : h.params) ?? {} : typeof o == "function" ? o(n) : o : {};
-    }, $ = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transition ?? e.routeInfo.transition ?? t.transition : e.routeInfo.transition ?? t.transition, L = (e) => e.entryDirection === "none" || e.entryDirection === "root" || e.transition === "none", A = (e, o) => !(e.routeInfo.isStackFallback || e.routeInfo.direction === "none" || e.routeInfo.direction === "root" || e.routeInfo.action === "pop" && (L(e.routeInfo) || L(o.routeInfo))), W = (e, o) => {
-      var k;
-      const h = A(e, o);
-      return ((k = t.shouldTransition) == null ? void 0 : k.call(t, {
+      return o ? o === !0 ? ((f = t.current.value) == null ? void 0 : f.params) ?? {} : typeof o == "function" ? o(c) : o : {};
+    }, W = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transition ?? e.routeInfo.transition ?? t.transition : e.routeInfo.transition ?? t.transition, x = (e) => e.entryDirection === "none" || e.entryDirection === "root" || e.transition === "none", z = (e, o) => !(e.routeInfo.isStackFallback || e.routeInfo.direction === "none" || e.routeInfo.direction === "root" || e.routeInfo.action === "pop" && (x(e.routeInfo) || x(o.routeInfo))), L = (e, o) => {
+      var a;
+      const f = z(e, o);
+      return ((a = t.shouldTransition) == null ? void 0 : a.call(t, {
         action: e.routeInfo.action,
         direction: e.routeInfo.direction,
         source: e.routeInfo.source,
         entering: e.routeInfo,
         leaving: o.routeInfo,
-        defaultResult: h
-      })) ?? h;
-    }, K = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transitionDuration ?? e.routeInfo.transitionDuration ?? t.transitionDuration : e.routeInfo.transitionDuration ?? t.transitionDuration, j = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transitionEasing ?? e.routeInfo.transitionEasing ?? t.transitionEasing : e.routeInfo.transitionEasing ?? t.transitionEasing, _ = async (e, o) => {
-      const h = ++f;
-      await dt();
-      const k = e.pageElement;
-      if (!k) return;
-      if (S(e.componentRef, et), !o || o === e || !o.pageElement) {
-        D(k), S(e.componentRef, J), g(e), I(e);
+        defaultResult: f
+      })) ?? f;
+    }, A = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transitionDuration ?? e.routeInfo.transitionDuration ?? t.transitionDuration : e.routeInfo.transitionDuration ?? t.transitionDuration, B = (e, o) => e.routeInfo.action === "pop" ? o.routeInfo.transitionEasing ?? e.routeInfo.transitionEasing ?? t.transitionEasing : e.routeInfo.transitionEasing ?? t.transitionEasing, _ = async (e, o) => {
+      const f = ++h;
+      await de();
+      const a = e.pageElement;
+      if (!a) return;
+      if (P(e.componentRef, re), !o || o === e || !o.pageElement) {
+        S(a), P(e.componentRef, Q), g(e), T(e);
         return;
       }
-      const p = o.pageElement, F = W(e, o), c = F ? $(e, o) : "none", a = F ? K(e, o) : 0, s = j(e, o), d = wt(
-        c || Y,
+      const r = o.pageElement, i = L(e, o), l = i ? W(e, o) : "none", m = i ? A(e, o) : 0, R = B(e, o), U = Ie(
+        l || Z,
         t.transitions
       );
-      S(o.componentRef, rt), D(k), D(p), await It(d, {
+      P(o.componentRef, oe), S(a), S(r), await Pe(U, {
         direction: e.routeInfo.direction,
         action: e.routeInfo.action,
         routeInfo: e.routeInfo,
-        enteringElement: k,
-        leavingElement: p,
-        duration: a,
-        easing: s
-      }), h === f && (M(p), S(o.componentRef, ot), S(e.componentRef, J), e.routeInfo.action === "pop" ? E(e) : e.routeInfo.action === "replace" && V(o), g(e), I(e));
-    }, B = async () => {
-      const e = w.value, o = t.current.value;
+        enteringElement: a,
+        leavingElement: r,
+        duration: m,
+        easing: R
+      }), f === h && (q(r), P(o.componentRef, ne), P(e.componentRef, Q), e.routeInfo.action === "pop" ? K(e) : e.routeInfo.action === "replace" && $(o), g(e), T(e));
+    }, V = async () => {
+      const e = E.value, o = t.current.value;
       if (!e || !o) return;
-      const h = at(e);
-      if (!h) return;
-      const k = i(b.value);
-      let p = i(o.id);
-      p ? (p.routeInfo = o, p.matchedRoute = e, p.component = h, p.props = x(e), p.mounted = !0) : (p = {
-        id: q("view"),
-        stackEntryId: o.id,
+      const f = ce(e);
+      if (!f) return;
+      const a = s(w.value);
+      let r = b(o.id);
+      !r && !H(o) && (r = p(o.key)), r ? (r.routeIds.add(o.id), r.routeKey = o.key, r.routeInfo = o, r.matchedRoute = e, r.component = f, r.props = I(e), r.mounted = !0) : (r = {
+        id: J("view"),
+        routeKey: o.key,
+        routeIds: /* @__PURE__ */ new Set([o.id]),
         routeInfo: o,
         matchedRoute: e,
-        component: h,
-        props: x(e),
+        component: f,
+        props: I(e),
         componentRef: C(),
         mounted: !0
-      }, R.value = [...R.value, p]), b.value = p.stackEntryId, await _(p, k);
+      }, y.value = [...y.value, r]), w.value = r.id, await _(r, a);
     };
-    return ut(
+    return ue(
       () => {
         var e;
-        return [(e = t.current.value) == null ? void 0 : e.id, w.value];
+        return [(e = t.current.value) == null ? void 0 : e.id, E.value];
       },
       () => {
-        B();
+        V();
       },
       { immediate: !0 }
-    ), lt(() => {
-      f++, R.value = [];
+    ), le(() => {
+      h++, y.value = [];
     }), {
-      injectedRoute: n,
-      viewItems: R,
+      injectedRoute: c,
+      viewItems: y,
       registerStackPage: (e, o) => {
-        e.pageElement = o, e.stackEntryId === b.value ? D(o) : M(o);
+        e.pageElement = o, e.id === w.value ? S(o) : q(o);
       }
     };
   },
   render() {
-    return y(
+    return k(
       "div",
       { class: "rs-outlet" },
       this.viewItems.filter((t) => t.mounted).map(
-        (t) => y(t.component, {
+        (t) => k(t.component, {
           key: t.id,
           ref: t.componentRef,
           ...t.props,
-          registerStackPage: (r) => this.registerStackPage(t, r)
+          registerStackPage: (n) => this.registerStackPage(t, n)
         })
       )
     );
   }
-}), Vt = Q({
+}), He = Y({
   name: "RouterPage",
   props: {
     registerStackPage: {
@@ -456,25 +477,25 @@ const Ht = Q({
       default: void 0
     }
   },
-  setup(t, { attrs: r, slots: n }) {
+  setup(t, { attrs: n, slots: c }) {
     const u = C();
-    return ft(() => {
-      var l;
-      u.value && ((l = t.registerStackPage) == null || l.call(t, u.value));
+    return fe(() => {
+      var d;
+      u.value && ((d = t.registerStackPage) == null || d.call(t, u.value));
     }), () => {
-      var l;
-      return y(
+      var d;
+      return k(
         "section",
         {
-          ...r,
+          ...n,
           ref: u,
-          class: ["rs-page", r.class]
+          class: ["rs-page", n.class]
         },
-        (l = n.default) == null ? void 0 : l.call(n)
+        (d = c.default) == null ? void 0 : d.call(c)
       );
     };
   }
-}), $t = Q({
+}), Ke = Y({
   name: "StackRouterDebugPanel",
   props: {
     initialOpen: {
@@ -483,52 +504,52 @@ const Ht = Q({
     }
   },
   setup(t) {
-    const r = nt(), n = C(t.initialOpen);
+    const n = ae(), c = C(t.initialOpen);
     return () => {
-      const u = r.current.value;
-      return y("aside", { class: "rs-debug-panel" }, [
-        y(
+      const u = n.current.value;
+      return k("aside", { class: "rs-debug-panel" }, [
+        k(
           "button",
           {
             class: "rs-debug-toggle",
             type: "button",
             onClick: () => {
-              n.value = !n.value;
+              c.value = !c.value;
             }
           },
-          n.value ? "Stack x" : "Stack"
+          c.value ? "Stack x" : "Stack"
         ),
-        n.value ? y("section", { class: "rs-debug-body" }, [
-          y("header", [
-            y("strong", "Router Stack"),
-            y("span", `${r.history.length} pages`)
+        c.value ? k("section", { class: "rs-debug-body" }, [
+          k("header", [
+            k("strong", "Router Stack"),
+            k("span", `${n.history.length} pages`)
           ]),
-          y("dl", [
-            y("dt", "current"),
-            y("dd", (u == null ? void 0 : u.fullPath) ?? "-"),
-            y("dt", "canGoBack"),
-            y("dd", String(r.canGoBack()))
+          k("dl", [
+            k("dt", "current"),
+            k("dd", (u == null ? void 0 : u.fullPath) ?? "-"),
+            k("dt", "canGoBack"),
+            k("dd", String(n.canGoBack()))
           ]),
-          y(
+          k(
             "ol",
-            r.history.map(
-              (l) => y(
+            n.history.map(
+              (d) => k(
                 "li",
                 {
-                  key: l.id,
+                  key: d.id,
                   class: {
-                    "rs-debug-active": l.id === (u == null ? void 0 : u.id),
-                    "rs-debug-no-cache": !l.cache
+                    "rs-debug-active": d.id === (u == null ? void 0 : u.id),
+                    "rs-debug-no-cache": !d.cache
                   }
                 },
                 [
-                  y("code", l.fullPath),
-                  y("span", [
-                    `${l.action}/${l.direction}`,
-                    ` source:${l.source}`,
-                    ` entry:${l.entryDirection}`,
-                    ` cache:${l.cache ? "yes" : "no"}`,
-                    ` transition:${l.transition ?? "-"}`
+                  k("code", d.fullPath),
+                  k("span", [
+                    `${d.action}/${d.direction}`,
+                    ` source:${d.source}`,
+                    ` entry:${d.entryDirection}`,
+                    ` cache:${d.cache ? "yes" : "no"}`,
+                    ` transition:${d.transition ?? "-"}`
                   ])
                 ]
               )
@@ -540,22 +561,22 @@ const Ht = Q({
   }
 });
 export {
-  jt as RouterLink,
-  Ht as RouterOutlet,
-  Vt as RouterPage,
-  zt as RouterView,
-  $t as StackRouterDebugPanel,
-  Ut as createMemoryHistory,
-  At as createStackRouter,
-  Xt as createWebHashHistory,
-  Mt as createWebHistory,
-  Lt as defineStackTransition,
-  Bt as onPageDidEnter,
-  Gt as onPageDidLeave,
-  _t as onPageWillEnter,
-  Ft as onPageWillLeave,
-  Z as stackRouterKey,
-  qt as useRoute,
-  Jt as useRouter,
-  Ct as useStackRouter
+  ze as RouterLink,
+  Ge as RouterOutlet,
+  He as RouterPage,
+  je as RouterView,
+  Ke as StackRouterDebugPanel,
+  Ue as createMemoryHistory,
+  Ae as createStackRouter,
+  Xe as createWebHashHistory,
+  Me as createWebHistory,
+  Le as defineStackTransition,
+  _e as onPageDidEnter,
+  Fe as onPageDidLeave,
+  Be as onPageWillEnter,
+  Ve as onPageWillLeave,
+  N as stackRouterKey,
+  qe as useRoute,
+  Je as useRouter,
+  Ce as useStackRouter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazycatcloud/vue-router-stack",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Page stack, caching, transitions, and lifecycle utilities built on vue-router.",
   "private": false,
   "type": "module",