@react-motion-router/stack 2.0.0-beta.sha-bcb6b06 → 2.0.0-beta.sha-f93cbfb

package/build/Screen.d.ts

@@ -2,16 +2,16 @@ import { ScreenBase, PlainObject, ScreenBaseProps, ScreenBaseState, ScreenBaseCo
 import { Navigation } from './Navigation';
 import { RouteProp, SwipeDirection } from './common/types';
 import { Router } from './Router';
-export type ScreenComponentProps<T extends PlainObject> = ScreenBaseComponentProps<RouteProp<T>, Navigation>;
+export type ScreenComponentProps<T extends PlainObject = object> = ScreenBaseComponentProps<RouteProp<T>, Navigation>;
 export interface ScreenConfig extends ScreenBaseConfig<RouteProp> {
-    title?: string;
-    presentation?: 'default' | 'dialog' | 'modal';
-    keepAlive?: boolean;
-    gestureDirection?: SwipeDirection;
-    gestureAreaWidth?: number;
-    gestureMinFlingVelocity?: number;
-    gestureHysteresis?: number;
-    gestureDisabled?: boolean;
+    readonly title?: string;
+    readonly presentation?: 'default' | 'dialog' | 'modal';
+    readonly keepAlive?: boolean;
+    readonly gestureDirection?: SwipeDirection;
+    readonly gestureAreaWidth?: number;
+    readonly gestureMinFlingVelocity?: number;
+    readonly gestureHysteresis?: number;
+    readonly gestureDisabled?: boolean;
 }
 export interface ScreenProps extends ScreenBaseProps {
     config?: ScreenConfig;

package/build/__tests__/screen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/index.js

@@ -1,6 +1,6 @@
 import { NavigationBase as ht, resolveBaseURLFromPattern as dt, matchRoute as Y, ScreenBase as ft, RouterBase as vt, cloneAndInject as gt, includesRoute as pt, useNavigationBase as mt, useRouterBase as yt, useRouteBase as wt, useParamsBase as Et } from "@react-motion-router/core";
-import { createRef as Pt, startTransition as N, useDebugValue as j, useEffect as X, useState as St, useRef as $, useCallback as bt } from "react";
-import { GestureTimeline as _t, springToLinear as Lt, easingToLinear as A } from "web-animations-extension";
+import { createRef as Pt, startTransition as N, useDebugValue as j, useEffect as C, useState as St, useRef as $, useCallback as bt } from "react";
+import { GestureTimeline as Lt, springToLinear as _t, easingToLinear as A } from "web-animations-extension";
 import { jsx as ut } from "react/jsx-runtime";
 var g = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Tt = {}, T = {};
 Object.defineProperty(T, "__esModule", { value: !0 });
@@ -43,13 +43,13 @@ var q = {}, Ft = g && g.__importDefault || function(n) {
   return n && n.__esModule ? n : { default: n };
 };
 Object.defineProperty(q, "__esModule", { value: !0 });
-const Dt = Ft(T);
-class Ot extends Dt.default {
+const Ot = Ft(T);
+class Dt extends Ot.default {
   constructor(t) {
     super("tap", t), this.duration = 0;
   }
 }
-q.default = Ot;
+q.default = Dt;
 var G = {}, Kt = g && g.__importDefault || function(n) {
   return n && n.__esModule ? n : { default: n };
 };
@@ -66,12 +66,12 @@ var F = {}, Yt = g && g.__importDefault || function(n) {
 };
 Object.defineProperty(F, "__esModule", { value: !0 });
 F.SwipeEndEvent = F.SwipeStartEvent = void 0;
-const Xt = Yt(T);
+const Ct = Yt(T);
 var st;
 (function(n) {
   n[n.start = 0] = "start", n[n.end = 1] = "end";
 })(st || (st = {}));
-class z extends Xt.default {
+class z extends Ct.default {
   constructor(t, e, r) {
     let s;
     switch (r) {
@@ -87,30 +87,30 @@ class z extends Xt.default {
     super(s, t), this.velocity = e.velocity, this.direction = e.direction;
   }
 }
-class Ct extends z {
+class Xt extends z {
   constructor(t, e) {
     super(t, e);
   }
 }
-F.default = Ct;
+F.default = Xt;
 class jt extends z {
   constructor(t, e) {
     super(t, e, "start");
   }
 }
 F.SwipeStartEvent = jt;
-class Ht extends z {
+class Ut extends z {
   constructor(t, e) {
     super(t, e, "end");
   }
 }
-F.SwipeEndEvent = Ht;
-var D = {}, Ut = g && g.__importDefault || function(n) {
+F.SwipeEndEvent = Ut;
+var O = {}, Ht = g && g.__importDefault || function(n) {
   return n && n.__esModule ? n : { default: n };
 };
-Object.defineProperty(D, "__esModule", { value: !0 });
-D.PanEndEvent = D.PanStartEvent = void 0;
-const Nt = Ut(T);
+Object.defineProperty(O, "__esModule", { value: !0 });
+O.PanEndEvent = O.PanStartEvent = void 0;
+const Nt = Ht(T);
 var it;
 (function(n) {
   n[n.start = 0] = "start", n[n.end = 1] = "end";
@@ -143,24 +143,24 @@ class Vt extends Z {
     super(t, e);
   }
 }
-D.default = Vt;
+O.default = Vt;
 class $t extends Z {
   constructor(t, e) {
     super(t, e, "start");
   }
 }
-D.PanStartEvent = $t;
+O.PanStartEvent = $t;
 class At extends Z {
   constructor(t, e) {
     super(t, e, "end");
   }
 }
-D.PanEndEvent = At;
-var O = {}, Wt = g && g.__importDefault || function(n) {
+O.PanEndEvent = At;
+var D = {}, Wt = g && g.__importDefault || function(n) {
   return n && n.__esModule ? n : { default: n };
 };
-Object.defineProperty(O, "__esModule", { value: !0 });
-O.PinchEndEvent = O.PinchStartEvent = void 0;
+Object.defineProperty(D, "__esModule", { value: !0 });
+D.PinchEndEvent = D.PinchStartEvent = void 0;
 const qt = Wt(T);
 var at;
 (function(n) {
@@ -190,19 +190,19 @@ class Gt extends J {
     super(t, e);
   }
 }
-O.default = Gt;
+D.default = Gt;
 class zt extends J {
   constructor(t, e) {
     super(t, e, "start");
   }
 }
-O.PinchStartEvent = zt;
+D.PinchStartEvent = zt;
 class Zt extends J {
   constructor(t, e) {
     super(t, e, "end");
   }
 }
-O.PinchEndEvent = Zt;
+D.PinchEndEvent = Zt;
 var K = {}, Jt = g && g.__importDefault || function(n) {
   return n && n.__esModule ? n : { default: n };
 };
@@ -352,13 +352,13 @@ R.closest = ie;
   } }), Object.defineProperty(n, "SwipeStartEvent", { enumerable: !0, get: function() {
     return f.SwipeStartEvent;
   } });
-  const d = r(D);
+  const d = r(O);
   n.PanEvent = d.default, Object.defineProperty(n, "PanEndEvent", { enumerable: !0, get: function() {
     return d.PanEndEvent;
   } }), Object.defineProperty(n, "PanStartEvent", { enumerable: !0, get: function() {
     return d.PanStartEvent;
   } });
-  const P = r(O);
+  const P = r(D);
   n.PinchEvent = P.default, Object.defineProperty(n, "PinchEndEvent", { enumerable: !0, get: function() {
     return P.PinchEndEvent;
   } }), Object.defineProperty(n, "PinchStartEvent", { enumerable: !0, get: function() {
@@ -456,23 +456,23 @@ R.closest = ie;
       if (!this.shouldFire)
         return;
       if (this.touchMoved = !0, this.touchMove = a, a.touches.length > 1 && this.touchStart.touches.length > 1 && (a.touches[1].clientX !== this.touchStart.touches[1].clientX || a.touches[1].clientY !== this.touchStart.touches[1].clientY)) {
-        const _ = new v.Vec2(this.touchMove.touches[0].clientX, this.touchMove.touches[0].clientY), H = new v.Vec2(this.touchMove.touches[1].clientX, this.touchMove.touches[1].clientY), et = new v.Vec2(this.touchStart.touches[0].clientX, this.touchStart.touches[0].clientY), nt = _.substract(H);
+        const L = new v.Vec2(this.touchMove.touches[0].clientX, this.touchMove.touches[0].clientY), U = new v.Vec2(this.touchMove.touches[1].clientX, this.touchMove.touches[1].clientY), et = new v.Vec2(this.touchStart.touches[0].clientX, this.touchStart.touches[0].clientY), nt = L.substract(U);
         if (this.scaleBase && Math.abs(this.scaleBase - nt.magnitude) > 10) {
           const I = nt.magnitude / this.scaleBase;
           if (this.scale = I, this.isPinching) {
-            const U = new P.default(a, {
+            const H = new P.default(a, {
               scale: I
             });
-            this.dispatchEvent(U);
+            this.dispatchEvent(H);
           } else {
-            const U = new P.PinchStartEvent(a, {
+            const H = new P.PinchStartEvent(a, {
               scale: I
             });
-            this.dispatchEvent(U), this.isPinching = !0;
+            this.dispatchEvent(H), this.isPinching = !0;
           }
         }
-        this.anchor = _;
-        let B = Math.atan2(et.clientY - H.clientY, et.clientX - H.clientX);
+        this.anchor = L;
+        let B = Math.atan2(et.clientY - U.clientY, et.clientX - U.clientX);
         if (B < 0 ? B += 1.5708 : B -= 1.5708, this.rotation = B, this.rotationDeg = B * 180 / Math.PI, this.anchor = this.anchor, this.isRotating) {
           const I = new w.default(a, {
             anchor: this.anchor,
@@ -494,32 +494,32 @@ R.closest = ie;
         y: E.y / b
       }, S = Math.atan2(k.y, k.x);
       this.octant = Math.round(4 * S / (2 * Math.PI) + 4) % 4;
-      const C = (a.timeStamp - this.touchStart.timeStamp) / 1e3, M = E.magnitude / C;
+      const X = (a.timeStamp - this.touchStart.timeStamp) / 1e3, M = E.magnitude / X;
       if (this.isSwiping) {
-        const _ = new f.default(a, {
+        const L = new f.default(a, {
           direction: p[(0, v.closest)(this.octant, [0, 1, 2, 3])],
           velocity: M
         });
-        this.dispatchEvent(_);
+        this.dispatchEvent(L);
       } else {
-        const _ = new f.SwipeStartEvent(a, {
+        const L = new f.SwipeStartEvent(a, {
           direction: p[(0, v.closest)(this.octant, [0, 1, 2, 3])],
           velocity: M
         });
-        this.dispatchEvent(_), this.isSwiping = !0;
+        this.dispatchEvent(L), this.isSwiping = !0;
       }
       if (this.dxDy = E, this.velocity = M, this.isPanning) {
-        const _ = new d.default(a, {
+        const L = new d.default(a, {
           translation: E,
           velocity: M
         });
-        this.dispatchEvent(_);
+        this.dispatchEvent(L);
       } else {
-        const _ = new d.PanStartEvent(a, {
+        const L = new d.PanStartEvent(a, {
           translation: E,
           velocity: M
         });
-        this.dispatchEvent(_), this.isPanning = !0;
+        this.dispatchEvent(L), this.isPanning = !0;
       }
     }
     onTouchEnd(a) {
@@ -640,7 +640,8 @@ class fe extends ht {
     super(), this.router = t;
   }
   preload(t, e = {}, r = {}) {
-    return this.router.preload(t, e, r);
+    const { pathname: s } = new URL(t, this.baseURL);
+    return this.router.preload(s, e, r);
   }
   replace(t, e = {}, r = {}) {
     return this.navigate(t, e, { ...r, type: "replace" });
@@ -808,7 +809,26 @@ class Je extends ft {
     super.setParams(t), this.setHistoryState(({ params: e }) => ({ params: { ...e, ...t } }));
   }
   setConfig(t) {
-    super.setConfig(t), delete t.footer, delete t.header, delete t.onEnter, delete t.onEntered, delete t.onExit, delete t.onExited, delete t.animation, console.log(t), this.setHistoryState(({ config: e }) => ({ config: { ...e, ...t } }));
+    super.setConfig(t), this.setHistoryState(({ config: e }) => {
+      const r = /* @__PURE__ */ new Set([
+        "footer",
+        "header",
+        "onEnter",
+        "onEntered",
+        "onExit",
+        "onExited",
+        "onLoad",
+        "animation"
+      ]);
+      return {
+        config: {
+          ...e,
+          ...Object.fromEntries(
+            Object.entries(t).filter(([s]) => !r.has(s))
+          )
+        }
+      };
+    });
   }
   get router() {
     return this.context;
@@ -918,7 +938,7 @@ function Ee(n, { x: t, y: e }, r, s) {
 function Pe(n) {
   return n === "left" || n === "right" || n === "horizontal";
 }
-const L = {
+const _ = {
   gestureHysteresis: 0.5,
   gestureMinFlingVelocity: 400,
   gestureAreaWidth: 100,
@@ -949,11 +969,11 @@ class Qe extends vt {
   constructor(t, e) {
     super(t, e);
     const {
-      gestureAreaWidth: r = L.gestureAreaWidth,
-      gestureDirection: s = L.gestureDirection,
-      gestureDisabled: i = L.gestureDisabled,
-      gestureHysteresis: o = L.gestureHysteresis,
-      gestureMinFlingVelocity: c = L.gestureMinFlingVelocity
+      gestureAreaWidth: r = _.gestureAreaWidth,
+      gestureDirection: s = _.gestureDirection,
+      gestureDisabled: i = _.gestureDisabled,
+      gestureHysteresis: o = _.gestureHysteresis,
+      gestureMinFlingVelocity: c = _.gestureMinFlingVelocity
     } = t.config?.screenConfig ?? {};
     this.state = {
       screenStack: [],
@@ -974,11 +994,11 @@ class Qe extends vt {
       (s) => x(s.ref) && s.ref.current?.focused
     )?.props.config;
     return document.title = r?.title ?? document.title, {
-      gestureDirection: r?.gestureDirection ?? L.gestureDirection,
-      gestureAreaWidth: r?.gestureAreaWidth ?? L.gestureAreaWidth,
-      gestureMinFlingVelocity: r?.gestureMinFlingVelocity ?? L.gestureMinFlingVelocity,
-      gestureHysteresis: r?.gestureHysteresis ?? L.gestureHysteresis,
-      gestureDisabled: r?.gestureDisabled ?? L.gestureDisabled,
+      gestureDirection: r?.gestureDirection ?? _.gestureDirection,
+      gestureAreaWidth: r?.gestureAreaWidth ?? _.gestureAreaWidth,
+      gestureMinFlingVelocity: r?.gestureMinFlingVelocity ?? _.gestureMinFlingVelocity,
+      gestureHysteresis: r?.gestureHysteresis ?? _.gestureHysteresis,
+      gestureDisabled: r?.gestureDisabled ?? _.gestureDisabled,
       documentTitle: r?.title
     };
   }
@@ -1050,7 +1070,7 @@ class Qe extends vt {
         s = this.ref.current.clientHeight, i = 0;
         break;
     }
-    this.screenTransitionLayer.current.animation.timeline = new _t(
+    this.screenTransitionLayer.current.animation.timeline = new Lt(
       {
         source: this.ref.current,
         type: "swipe",
@@ -1357,7 +1377,7 @@ class Qe extends vt {
     }
   }
 }
-function _e() {
+function Le() {
   return j("Stack.Navigation"), mt();
 }
 function tn() {
@@ -1369,8 +1389,8 @@ function en() {
 function nn(n, t) {
   return j("Stack.Params"), Et(n, t);
 }
-function Le(n) {
-  const t = _e();
+function _e(n) {
+  const t = Le();
   return n ?? t;
 }
 function Te(n, t = {}) {
@@ -1382,7 +1402,7 @@ function Te(n, t = {}) {
     },
     [n]
   );
-  return X(() => {
+  return C(() => {
     const s = new IntersectionObserver(r, t), i = e.current;
     return i && s.observe(i), () => {
       i && s.unobserve(i);
@@ -1390,7 +1410,7 @@ function Te(n, t = {}) {
   }, [r, t]), e;
 }
 function ct(n, t, e, r) {
-  X(() => {
+  C(() => {
     const s = n.current;
     if (s)
       return s.addEventListener(t, e, r), () => {
@@ -1419,7 +1439,7 @@ function rn({
   children: l,
   ...f
 }) {
-  const d = Le(i), P = c?.type === "onsight", w = c?.type === "onhover", v = c?.type === "force", p = Te(
+  const d = _e(i), P = c?.type === "onsight", w = c?.type === "onhover", v = c?.type === "force", p = Te(
     (S) => {
       !S.isIntersecting || !n || d.preload(s, { params: e });
     },
@@ -1430,16 +1450,16 @@ function rn({
     },
     w ? c : {}
   );
-  X(() => {
+  C(() => {
     !n || !v || d.preload(s, { params: e });
   }, [n, s, d, v, e]);
   const [u, a] = St(void 0), h = d?.routerId, E = !u?.includes(window.location.origin) ? "noopener noreferrer" : t ? "prev" : "next";
-  X(() => {
+  C(() => {
     if (t && d.canGoBack())
       a(d.previous.url?.href);
     else if (s) {
-      const S = ge(e), C = new URL(s, d.baseURL);
-      C.search = S, a(C.href);
+      const S = ge(e), X = new URL(s, d.baseURL);
+      X.search = S, a(X.href);
     }
   }, [s, e, d, t]);
   const b = (S) => {
@@ -1532,7 +1552,7 @@ const sn = [
   {
     transform: "translateY(0vh)"
   }
-], De = [
+], Oe = [
   {
     transform: "translateY(100vh)"
   },
@@ -1592,7 +1612,7 @@ const sn = [
   {
     opacity: 0
   }
-], Oe = [
+], De = [
   {
     opacity: 0,
     transform: "translateY(calc(100vh * 0.08))"
@@ -1641,7 +1661,7 @@ const sn = [
   {
     transform: "translateY(-2vh)"
   }
-], Xe = [
+], Ce = [
   {
     transform: "scale(0.85)",
     opacity: 0
@@ -1658,7 +1678,7 @@ const sn = [
     transform: "scale(1)",
     opacity: 1
   }
-], Ce = [
+], Xe = [
   {
     transform: "scale(1)",
     opacity: 1
@@ -1685,14 +1705,14 @@ const sn = [
     opacity: 1
   }
 ];
-function He(n) {
+function Ue(n) {
   return (t) => 1 - n(1 - t);
 }
-function Ue(n) {
+function He(n) {
   return (t) => Math.pow(t, n);
 }
 const tt = {
-  ...Lt({
+  ..._t({
     mass: 3,
     stiffness: 1e3,
     damping: 500,
@@ -1701,7 +1721,7 @@ const tt = {
   })
 }, lt = {
   duration: 350,
-  easing: A(He(Ue(5)))
+  easing: A(Ue(He(5)))
 }, Ne = {
   duration: 150,
   easing: "linear"
@@ -1743,7 +1763,7 @@ function yn({ ref: n, direction: t, playbackRate: e, index: r }) {
   return t === "reverse" && (i = i.toReversed()), new KeyframeEffect(n, i, o);
 }
 function wn({ ref: n, direction: t, playbackRate: e }) {
-  let r = De;
+  let r = Oe;
   const s = {
     playbackRate: e,
     fill: "forwards",
@@ -1752,7 +1772,7 @@ function wn({ ref: n, direction: t, playbackRate: e }) {
   return t === "reverse" && (r = r.toReversed()), new KeyframeEffect(n, r, s);
 }
 function En({ ref: n, direction: t, playbackRate: e }) {
-  let r = Oe;
+  let r = De;
   const s = {
     playbackRate: e,
     fill: "forwards",
@@ -1797,10 +1817,10 @@ function bn({ ref: n, direction: t, index: e, playbackRate: r }) {
   };
   return t === "reverse" && (o = o.toReversed()), new KeyframeEffect(n, o, c);
 }
-function _n({ ref: n, direction: t, index: e, playbackRate: r }) {
+function Ln({ ref: n, direction: t, index: e, playbackRate: r }) {
   const i = [
-    Ce,
-    Xe
+    Xe,
+    Ce
   ][e], o = {
     direction: t,
     playbackRate: r,
@@ -1809,9 +1829,9 @@ function _n({ ref: n, direction: t, index: e, playbackRate: r }) {
   };
   return new KeyframeEffect(n, i, o);
 }
-function Ln({ disabled: n, children: t, ...e }) {
+function _n({ disabled: n, children: t, ...e }) {
   const r = $(null);
-  return X(() => {
+  return C(() => {
     if (n)
       return;
     const s = (i) => {
@@ -1836,7 +1856,7 @@ export {
   rn as Anchor,
   gn as FadeInKeyframes,
   pn as FadeOutKeyframes,
-  Ln as GestureRegion,
+  _n as GestureRegion,
   de as HistoryEntry,
   fe as Navigation,
   Qe as Router,
@@ -1855,7 +1875,7 @@ export {
   We as androidBottomSheetSlideOutOptions,
   Ye as androidConcealToBottomKeyframes,
   En as androidFadeInFromBottom,
-  Oe as androidFadeInFromBottomKeyframes,
+  De as androidFadeInFromBottomKeyframes,
   lt as androidFadeInFromBottomOptions,
   Pn as androidFadeInFromBottomSheet,
   je as androidFadeInFromBottomSheetKeyframes,
@@ -1866,20 +1886,20 @@ export {
   Sn as androidRevealFromBottom,
   Be as androidRevealFromBottomKeyframes,
   Ve as androidRevealFromBottomOptions,
-  _n as androidScaleFromCentre,
-  Xe as androidScaleFromCentreKeyframes,
+  Ln as androidScaleFromCentre,
+  Ce as androidScaleFromCentreKeyframes,
   $e as androidScaleFromCentreOptions,
-  Ce as androidScaleToCentreKeyframes,
+  Xe as androidScaleToCentreKeyframes,
   tt as iOSKeyframeOptions,
   wn as iOSSlideInFromBottom,
-  De as iOSSlideInFromBottomKeyframes,
+  Oe as iOSSlideInFromBottomKeyframes,
   yn as iOSSlideInFromLeft,
   xe as iOSSlideInFromLeftKeyframes,
   mn as iOSSlideInFromRight,
   ke as iOSSlideInFromRightKeyframes,
   Ie as iOSSlideOutToLeftKeyframes,
   Fe as iOSSlideOutToRightKeyframes,
-  _e as useNavigation,
+  Le as useNavigation,
   nn as useParams,
   en as useRoute,
   tn as useRouter