@flemo/react 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { jsx as N, jsxs as Ht, Fragment as fe } from "react/jsx-runtime";
-import Pt, { useEffect as dt, createContext as Gt, useContext as Yt, useReducer as me, Children as te, useInsertionEffect as ye, useRef as L, useImperativeHandle as he, useState as bt, useLayoutEffect as xt } from "react";
+import xt, { useEffect as ht, createContext as Gt, useContext as Yt, useReducer as me, Children as te, useInsertionEffect as ye, useRef as L, useImperativeHandle as he, useState as bt, useLayoutEffect as ft } from "react";
 import { consumeSelfInducedPop as ge, TaskManger as G, useNavigateStore as W, useHistoryStore as O, getMatchedPathPattern as we, transitionMap as ct, decoratorMap as yt, isServer as Mt, compileTransitionStyles as Se, useTransitionStore as Ot, getParams as ve, markSelfInducedPop as ee, targetToDecls as Te, easingToCss as Ee, variantHasAnimation as Pe, animationName as xe, findScrollable as qt, collectAnimatedProperties as be } from "@flemo/core";
 import { createDecorator as tn, createRawDecorator as en, createRawTransition as nn, createTransition as rn } from "@flemo/core";
 function Ie() {
-  return dt(() => {
+  return ht(() => {
     const n = async (e) => {
       if (ge())
         return;
@@ -47,7 +47,7 @@ function Ie() {
 var j = {}, zt;
 function Re() {
   if (zt) return j;
-  zt = 1, Object.defineProperty(j, "__esModule", { value: !0 }), j.PathError = j.TokenData = void 0, j.parse = m, j.compile = x, j.match = $, j.pathToRegexp = C, j.stringify = gt;
+  zt = 1, Object.defineProperty(j, "__esModule", { value: !0 }), j.PathError = j.TokenData = void 0, j.parse = m, j.compile = x, j.match = $, j.pathToRegexp = C, j.stringify = wt;
   const n = "/", e = (o) => o, r = /^[$_\p{ID_Start}]$/u, a = /^[$\u200c\u200d\p{ID_Continue}]$/u, u = /^[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*$/u;
   function i(o) {
     return o.replace(/[{}()\[\]+?!:*\\]/g, "\\$&");
@@ -295,7 +295,7 @@ function Re() {
     }
     return y;
   }
-  function gt(o) {
+  function wt(o) {
     return Y(o.tokens, 0);
   }
   function B(o, c) {
@@ -317,7 +317,7 @@ const ne = Gt({
   layoutId: null,
   routePath: ""
 });
-function ht() {
+function gt() {
   return Yt(ne);
 }
 const re = Gt({}), oe = Gt(() => {
@@ -326,8 +326,8 @@ function De(n, e) {
   return e.type === "SET" ? e.params : n;
 }
 function Le({ children: n }) {
-  const { isActive: e, params: r } = ht(), [a, u] = me(De, r);
-  return dt(() => {
+  const { isActive: e, params: r } = gt(), [a, u] = me(De, r);
+  return ht(() => {
     const i = async (s) => {
       s.state?.step && await G.addTask(async () => {
         u({ type: "SET", params: s.state?.params || {} });
@@ -413,7 +413,7 @@ function Fe({
         layoutId: null
       }
     ]
-  }), $e(a, u), dt(() => {
+  }), $e(a, u), ht(() => {
     window.history.state?.index || window.history.replaceState(
       {
         id: "root",
@@ -547,7 +547,7 @@ function ze() {
   };
 }
 function Ke() {
-  const { routePath: n } = ht(), e = Yt(oe);
+  const { routePath: n } = gt(), e = Yt(oe);
   return {
     pushStep: async (i) => {
       (await G.addTask(async () => {
@@ -641,7 +641,7 @@ function Ce({ freeze: n, children: e }) {
   );
 }
 function He({ ref: n, style: e, ...r }) {
-  const { isActive: a, transitionName: u } = ht(), i = L(null);
+  const { isActive: a, transitionName: u } = gt(), i = L(null);
   he(n, () => i.current);
   const s = W((x) => x.status), T = ct.get(u) ?? ct.get("none"), { decoratorName: E } = T, m = yt.get(E);
   return m ? /* @__PURE__ */ N(
@@ -678,12 +678,12 @@ const Jt = (n) => {
   return T;
 }, Me = ((n) => n ? Jt(n) : Jt), Oe = (n) => n;
 function Be(n, e = Oe) {
-  const r = Pt.useSyncExternalStore(
+  const r = xt.useSyncExternalStore(
     n.subscribe,
-    Pt.useCallback(() => e(n.getState()), [n, e]),
-    Pt.useCallback(() => e(n.getInitialState()), [n, e])
+    xt.useCallback(() => e(n.getState()), [n, e]),
+    xt.useCallback(() => e(n.getInitialState()), [n, e])
   );
-  return Pt.useDebugValue(r), r;
+  return xt.useDebugValue(r), r;
 }
 const Qt = (n) => {
   const e = Me(n), r = (a) => Be(e, a);
@@ -703,7 +703,7 @@ const Qt = (n) => {
 let Ct = 0;
 function Ge() {
   const [n, e] = bt(0), [r, a] = bt(0);
-  return dt(() => {
+  return ht(() => {
     let u = 0;
     const i = () => {
       cancelAnimationFrame(u), u = requestAnimationFrame(() => {
@@ -772,14 +772,14 @@ function Ve({
   contentScrollable: R = !0,
   ...$
 }) {
-  const { id: C, isActive: D, isRoot: q, zIndex: M, transitionName: Y, prevTransitionName: gt } = ht(), B = pt((t) => t.status), o = Q((t) => t.dragStatus), c = Q.getState().setDragStatus, y = Q.getState().setReplaceTransitionStatus, p = O((t) => t.index), l = ct.get(Y) ?? ct.get("none"), { initial: g, swipeDirection: d, decoratorName: P } = l, w = yt.get(P), { viewportScrollHeight: I } = Ge(), b = I > 0, [U, S] = bt(0), [H, _] = bt(0), Vt = L(null), V = L(null), Z = L(null), z = L(null), ut = L(null), J = L({
+  const { id: C, isActive: D, isRoot: q, zIndex: M, transitionName: Y, prevTransitionName: wt } = gt(), B = pt((t) => t.status), o = Q((t) => t.dragStatus), c = Q.getState().setDragStatus, y = Q.getState().setReplaceTransitionStatus, p = O((t) => t.index), l = ct.get(Y) ?? ct.get("none"), { initial: g, swipeDirection: d, decoratorName: P } = l, w = yt.get(P), { viewportScrollHeight: I } = Ge(), b = I > 0, [U, S] = bt(0), [H, _] = bt(0), Vt = L(null), V = L(null), Z = L(null), z = L(null), ut = L(null), J = L({
     current: [],
     prev: []
-  }), tt = L(!1), ft = L(!1), rt = L(!1), ae = L(0), Rt = L({ x: 0, y: 0 }), wt = L({ x: 0, y: 0 }), Dt = L(0), Lt = L({ x: 0, y: 0 }), et = L({
+  }), tt = L(!1), dt = L(!1), rt = L(!1), ae = L(0), Rt = L({ x: 0, y: 0 }), St = L({ x: 0, y: 0 }), Dt = L(0), Lt = L({ x: 0, y: 0 }), et = L({
     element: null,
     hasMarker: !1
   }), ot = L({ element: null, hasMarker: !1 }), Nt = L(0), $t = L(0), at = L(null), it = L(null), At = (t) => {
-    const f = wt.current;
+    const f = St.current;
     return {
       point: { x: t.clientX, y: t.clientY },
       offset: {
@@ -790,11 +790,11 @@ function Ve({
       velocity: Lt.current
     };
   }, ie = (t) => {
-    const f = t.timeStamp, v = Math.max(1, f - Dt.current), k = wt.current;
+    const f = t.timeStamp, v = Math.max(1, f - Dt.current), k = St.current;
     Lt.current = {
       x: (t.clientX - k.x) / v * 1e3,
       y: (t.clientY - k.y) / v * 1e3
-    }, wt.current = { x: t.clientX, y: t.clientY }, Dt.current = f;
+    }, St.current = { x: t.clientX, y: t.clientY }, Dt.current = f;
   }, kt = (t, f, v) => {
     const k = lt(t, f, v);
     if (t === V.current)
@@ -806,29 +806,29 @@ function Ve({
     return k;
   }, se = (t) => {
     const f = D ? O.getState().histories[p - 1]?.id : O.getState().histories[p]?.id, v = f ? Q.getState().sharedBars[f] : void 0, k = [], A = at.current, st = it.current;
-    A && vt && !v?.appBar && k.push(A), st && Tt && !v?.navigationBar && k.push(st);
+    A && Tt && !v?.appBar && k.push(A), st && Et && !v?.navigationBar && k.push(st);
     const X = [];
     if (t) {
       const nt = t.querySelector('[data-flemo-bar="app"]'), Ft = t.querySelector('[data-flemo-bar="nav"]');
-      nt && !vt && X.push(nt), Ft && !Tt && X.push(Ft);
+      nt && !Tt && X.push(nt), Ft && !Et && X.push(Ft);
     }
     J.current = { current: k, prev: X };
-    const Et = be(l).join(", ");
-    for (const nt of k) nt.style.willChange = Et;
-    for (const nt of X) nt.style.willChange = Et;
+    const Pt = be(l).join(", ");
+    for (const nt of k) nt.style.willChange = Pt;
+    for (const nt of X) nt.style.willChange = Pt;
   }, _t = () => {
     for (const t of J.current.current)
       F(t), t.style.removeProperty("will-change");
     for (const t of J.current.prev)
       F(t), t.style.removeProperty("will-change");
     J.current = { current: [], prev: [] };
-  }, St = async (t) => {
+  }, vt = async (t) => {
     if (!d || I > 10) return;
     const f = V.current;
     if (!f) return;
     const v = Vt.current?.parentElement?.previousElementSibling;
     if (Z.current = v?.querySelector("[data-flemo-screen]") ?? null, ut.current = v?.querySelector("[data-flemo-decorator]") ?? null, !Z.current) return;
-    rt.current = !0, ae.current = t.timeStamp, Rt.current = { x: t.clientX, y: t.clientY }, wt.current = { x: t.clientX, y: t.clientY }, Dt.current = t.timeStamp, Lt.current = { x: 0, y: 0 }, f.setPointerCapture(t.pointerId), se(v), await l?.onSwipeStart(t, At(t), {
+    rt.current = !0, ae.current = t.timeStamp, Rt.current = { x: t.clientX, y: t.clientY }, St.current = { x: t.clientX, y: t.clientY }, Dt.current = t.timeStamp, Lt.current = { x: 0, y: 0 }, f.setPointerCapture(t.pointerId), se(v), await l?.onSwipeStart(t, At(t), {
       animate: kt,
       currentScreen: f,
       prevScreen: Z.current,
@@ -892,30 +892,30 @@ function Ve({
     }
     const f = !et.current.element && !ot.current.element;
     if (tt.current && f) {
-      tt.current = !1, ft.current = !0;
+      tt.current = !1, dt.current = !0;
       const v = t.clientY - $t.current, k = t.clientX - Nt.current;
-      (d === "y" && v > 0 || d === "x" && k > 0) && St(t.nativeEvent);
+      (d === "y" && v > 0 || d === "x" && k > 0) && vt(t.nativeEvent);
     } else if (tt.current && !f) {
       const v = t.clientX - Nt.current, k = t.clientY - $t.current, A = ot.current.element && ot.current.element.scrollTop <= 0, st = et.current.element && et.current.element.scrollLeft <= 0 && et.current.hasMarker;
-      (d === "y" && (A || et.current.element) && k > 0 && Math.abs(v) < 2 || d === "x" && (st || ot.current.element) && v > 0 && Math.abs(k) < 2) && (tt.current = !1, ft.current = !0, St(t.nativeEvent));
+      (d === "y" && (A || et.current.element) && k > 0 && Math.abs(v) < 2 || d === "x" && (st || ot.current.element) && v > 0 && Math.abs(k) < 2) && (tt.current = !1, dt.current = !0, vt(t.nativeEvent));
     }
   }, jt = (t) => {
-    tt.current = !1, ft.current = !1, rt.current && ue(t.nativeEvent);
+    tt.current = !1, dt.current = !1, rt.current && ue(t.nativeEvent);
   };
-  dt(() => {
+  ht(() => {
     const t = V.current;
     if (!t) return;
     const f = (v) => {
-      ft.current && v.preventDefault(), v.target?.dataset.swipeAtEdgeBar === "true" && v.preventDefault();
+      dt.current && v.preventDefault(), v.target?.dataset.swipeAtEdgeBar === "true" && v.preventDefault();
     };
     return t.addEventListener("touchmove", f, {
       passive: !1
     }), () => {
       t.removeEventListener("touchmove", f);
     };
-  }, []), dt(() => {
+  }, []), ft(() => {
     if (!D) {
-      B === "REPLACING" && gt !== Y && y("PENDING");
+      B === "REPLACING" && wt !== Y && y("PENDING");
       return;
     }
     if (B === "COMPLETED") {
@@ -943,12 +943,12 @@ function Ve({
     B,
     D,
     C,
-    gt,
+    wt,
     Y,
     l,
     c,
     y
-  ]), xt(() => {
+  ]), ft(() => {
     const t = at.current;
     if (!t) {
       S(0);
@@ -961,7 +961,7 @@ function Ve({
     return f.observe(t), () => {
       f.disconnect();
     };
-  }, [i]), xt(() => {
+  }, [i]), ft(() => {
     const t = it.current;
     if (!t) {
       _(0);
@@ -974,15 +974,15 @@ function Ve({
     return f.observe(t), () => {
       f.disconnect();
     };
-  }, [s]), xt(() => {
+  }, [s]), ft(() => {
     const { registerSharedBars: t, unregisterSharedBars: f } = Q.getState();
     return t(C, {
       appBar: !!i,
       navigationBar: !!s
     }), () => f(C);
   }, [C, i, s]);
-  const Xt = D || M === p - 1, vt = !!i, Tt = !!s;
-  xt(() => {
+  const Xt = D || M === p - 1, Tt = !!i, Et = !!s;
+  ft(() => {
     const t = at.current, f = it.current;
     if (!t && !f) return;
     const v = () => {
@@ -990,15 +990,15 @@ function Ve({
         t?.removeAttribute("data-flemo-bar-riding"), f?.removeAttribute("data-flemo-bar-riding");
         return;
       }
-      const X = D ? O.getState().histories[p - 1]?.id : O.getState().histories[p]?.id, K = X ? Q.getState().sharedBars[X] : void 0, Et = vt && !K?.appBar, nt = Tt && !K?.navigationBar;
-      t && t.setAttribute("data-flemo-bar-riding", Et ? "true" : "false"), f && f.setAttribute("data-flemo-bar-riding", nt ? "true" : "false");
+      const X = D ? O.getState().histories[p - 1]?.id : O.getState().histories[p]?.id, K = X ? Q.getState().sharedBars[X] : void 0, Pt = Tt && !K?.appBar, nt = Et && !K?.navigationBar;
+      t && t.setAttribute("data-flemo-bar-riding", Pt ? "true" : "false"), f && f.setAttribute("data-flemo-bar-riding", nt ? "true" : "false");
     };
     v();
     const k = Q.subscribe(v), A = pt.subscribe(v);
     return () => {
       k(), A(), t?.removeAttribute("data-flemo-bar-riding"), f?.removeAttribute("data-flemo-bar-riding");
     };
-  }, [Xt, D, p, vt, Tt]);
+  }, [Xt, D, p, Tt, Et]);
   const de = (() => {
     if (!D) return {};
     if (B !== "PUSHING" && B !== "REPLACING") return {};
@@ -1190,7 +1190,7 @@ function Ve({
   );
 }
 function Je({ children: n, ...e }) {
-  const { isActive: r, isPrev: a, zIndex: u } = ht(), i = O((h) => h.index), s = W((h) => h.status), T = Q((h) => h.dragStatus), E = Q((h) => h.replaceTransitionStatus), x = !r && (s === "COMPLETED" && T === "IDLE") || a && i - 2 <= u && E === "IDLE" || a && i - 2 > u;
+  const { isActive: r, isPrev: a, zIndex: u } = gt(), i = O((h) => h.index), s = W((h) => h.status), T = Q((h) => h.dragStatus), E = Q((h) => h.replaceTransitionStatus), x = !r && (s === "COMPLETED" && T === "IDLE") || a && i - 2 <= u && E === "IDLE" || a && i - 2 > u;
   return /* @__PURE__ */ N(Ce, { freeze: x, children: /* @__PURE__ */ N(Ve, { ...e, children: n }) });
 }
 export {
@@ -1207,7 +1207,7 @@ export {
   rn as createTransition,
   ze as useNavigate,
   We as useParams,
-  ht as useScreen,
+  gt as useScreen,
   Q as useScreenStore,
   Ke as useStep,
   Ge as useViewportScrollHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "React bindings for flemo — Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.2.0",
     "zustand": "^5.0.11",
-    "@flemo/core": "1.1.0"
+    "@flemo/core": "1.1.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",