@flemo/react 1.12.2 → 1.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +34 -34
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useInsertionEffect as u, useLayoutEffect as d, useReducer as f, useRef as p, useState as m, useSyncExternalStore as ee } from "react";
|
|
2
|
-
import { animHoldKey as te, appendParamsQuery as ne, buildRoutePath as re, computeBarRiding as ie, computeScreenFreeze as ae, computeScreenFreezeMode as oe, consumeSelfInducedPop as se, createAnimHoldCoordinator as h, createBrowserHistoryDriver as g, createBrowserHistoryDriver as _, createDecorator as v, createHistoryStore as y, createNavigateStore as ce, createNavigationController as b, createPartTransition as x, createRawDecorator as le, createRawPartTransition as S, createRawTransition as C, createRouterScope as w, createScreenSelector as T, createScreenStore as E, createStepController as D, createSwipeController as ue, createTransition as O, createTransitionEngine as de, createTransitionStore as k, decoratorMap as fe, detectBlinkEngine as A, eagerlyDecodeImages as pe, ensureGpuPipelinePrewarm as me, ensureImageDecodeOffloader as he, ensureScopeHistorySync as j, enteringInitialStyle as ge, getMatchedPathPattern as _e, governedCompiledActive as ve, holdCompositorWarm as M,
|
|
2
|
+
import { animHoldKey as te, appendParamsQuery as ne, buildRoutePath as re, computeBarRiding as ie, computeScreenFreeze as ae, computeScreenFreezeMode as oe, consumeSelfInducedPop as se, createAnimHoldCoordinator as h, createBrowserHistoryDriver as g, createBrowserHistoryDriver as _, createDecorator as v, createHistoryStore as y, createNavigateStore as ce, createNavigationController as b, createPartTransition as x, createRawDecorator as le, createRawPartTransition as S, createRawTransition as C, createRouterScope as w, createScreenSelector as T, createScreenStore as E, createStepController as D, createSwipeController as ue, createTransition as O, createTransitionEngine as de, createTransitionStore as k, decoratorMap as fe, detectBlinkEngine as A, eagerlyDecodeImages as pe, ensureGpuPipelinePrewarm as me, ensureImageDecodeOffloader as he, ensureScopeHistorySync as j, enteringInitialStyle as ge, getMatchedPathPattern as _e, governedCompiledActive as ve, holdCompositorWarm as M, isDesktopBlink as ye, isLegacyAndroidBlink as N, isOpaqueColor as be, isServer as xe, markSelfInducedPop as Se, matchesPathname as Ce, observeBarHeight as we, observeViewportScrollHeight as Te, partTransitionMap as Ee, readDeferReleaseCommitFlag as De, readDesktopReleaseFlipFlag as Oe, readImageOffloadOverride as ke, readLayerPromotionFlag as Ae, readPrerasterFlag as je, readSettleGateFlag as Me, readStepParams as Ne, registerTransitionDefinitions as Pe, releaseScopeHistorySync as Fe, resolveTransition as Ie, seedRouterEntry as Le, sharedBarsMatch as Re, subscribeStepParamsRestore as ze } from "@flemo/core";
|
|
3
3
|
import { jsx as P, jsxs as Be } from "react/jsx-runtime";
|
|
4
4
|
import { flushSync as Ve } from "react-dom";
|
|
5
5
|
//#region src/stores/StoreContext.ts
|
|
@@ -15,7 +15,7 @@ function I() {
|
|
|
15
15
|
//#region src/history/HistoryListener.tsx
|
|
16
16
|
function L() {
|
|
17
17
|
let e = I();
|
|
18
|
-
return s(() => (j(e), () =>
|
|
18
|
+
return s(() => (j(e), () => Fe(e)), [e]), null;
|
|
19
19
|
}
|
|
20
20
|
//#endregion
|
|
21
21
|
//#region src/screen/ScreenContext.ts
|
|
@@ -89,7 +89,7 @@ var Ke = r(null);
|
|
|
89
89
|
function qe({ children: e }) {
|
|
90
90
|
let t = H((e) => e.index), r = H((e) => e.histories), i = I(), a = o(R), s = o(Ke);
|
|
91
91
|
return T(r, t).map((t) => {
|
|
92
|
-
let [r] = n.toArray(e).filter((e) =>
|
|
92
|
+
let [r] = n.toArray(e).filter((e) => Ce(e.props.path, t.pathname));
|
|
93
93
|
return r ? /* @__PURE__ */ P(R.Provider, {
|
|
94
94
|
value: {
|
|
95
95
|
...t,
|
|
@@ -111,7 +111,7 @@ function Ye() {
|
|
|
111
111
|
//#endregion
|
|
112
112
|
//#region src/transition/styles.ts
|
|
113
113
|
function Xe(e, t, n = []) {
|
|
114
|
-
u(() =>
|
|
114
|
+
u(() => Pe(e, t, n), [
|
|
115
115
|
e,
|
|
116
116
|
t,
|
|
117
117
|
n
|
|
@@ -141,7 +141,7 @@ var et = r(0), U = r(null), W = [
|
|
|
141
141
|
return t;
|
|
142
142
|
};
|
|
143
143
|
function nt(e, t, n) {
|
|
144
|
-
return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ?
|
|
144
|
+
return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? Ce(e.routePaths, n) : !1;
|
|
145
145
|
}
|
|
146
146
|
function K(e) {
|
|
147
147
|
return G(e).map((e, t) => {
|
|
@@ -243,7 +243,7 @@ var J = typeof window > "u" ? s : d, st = typeof window > "u" ? s : u, Y = [], c
|
|
|
243
243
|
function pt({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", defaultTransitionName: l = "cupertino", transitions: u = Y, decorators: d = ct, partTransitions: f = lt, history: p = "browser", createDriver: ee, className: te, style: ne }) {
|
|
244
244
|
let re = o(et), ie = c(), [ae, oe] = m(!1);
|
|
245
245
|
s(() => oe(!0), []);
|
|
246
|
-
let se = ae ? ie : null, h = re > 0, g = p === "memory", v = c(), y = o(R), ce = o(F), b = h && y.id ? `_F_${ce?.routerKey ?? ""}${y.id}_` : v, x = ot(e), le = x !== null, S = (x ?? n.toArray(e).filter(i)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), C = h ? null : ce, T = C !== null, E = ee ?? _, [D] = m(() => g ? null : E(T ? void 0 : b)), ue = !h && !g && !
|
|
246
|
+
let se = ae ? ie : null, h = re > 0, g = p === "memory", v = c(), y = o(R), ce = o(F), b = h && y.id ? `_F_${ce?.routerKey ?? ""}${y.id}_` : v, x = ot(e), le = x !== null, S = (x ?? n.toArray(e).filter(i)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), C = h ? null : ce, T = C !== null, E = ee ?? _, [D] = m(() => g ? null : E(T ? void 0 : b)), ue = !h && !g && !xe(), O = ue && D ? D.readPathname() : a || "/", de = O.indexOf("?"), k = (de >= 0 ? O.slice(0, de) : O) || "/", fe = ue ? window.location.search : de >= 0 ? O.slice(de) : "", [A] = m(() => w({
|
|
247
247
|
routePaths: S,
|
|
248
248
|
pathname: k,
|
|
249
249
|
search: fe,
|
|
@@ -273,8 +273,8 @@ function pt({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", def
|
|
|
273
273
|
}, [j, t]), J(() => (A.life.alive = !0, () => {
|
|
274
274
|
A.life.alive = !1;
|
|
275
275
|
}), [A]), Xe(u, d, f), s(() => {
|
|
276
|
-
let e =
|
|
277
|
-
if (e !== "off") return e === "on" ||
|
|
276
|
+
let e = ke();
|
|
277
|
+
if (e !== "off") return e === "on" || N() ? he() : void 0;
|
|
278
278
|
}, []), s(() => me(), []), s(() => {
|
|
279
279
|
if (typeof document > "u") return;
|
|
280
280
|
let e = null, t = null, n = 0, r = () => {
|
|
@@ -298,7 +298,7 @@ function pt({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", def
|
|
|
298
298
|
t && clearTimeout(t), e?.();
|
|
299
299
|
};
|
|
300
300
|
}, []), s(() => {
|
|
301
|
-
g || !D ||
|
|
301
|
+
g || !D || Le({
|
|
302
302
|
driver: D,
|
|
303
303
|
routerKey: T ? null : b,
|
|
304
304
|
nested: h && !T,
|
|
@@ -411,7 +411,7 @@ function gt() {
|
|
|
411
411
|
function _t() {
|
|
412
412
|
let { routePath: e } = z(), t = I(), n = o(He), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
|
|
413
413
|
s(() => {
|
|
414
|
-
if (!e) return c(
|
|
414
|
+
if (!e) return c(Ne(r.readState())), r.subscribe((e) => c(Ne(e.state)));
|
|
415
415
|
}, [e, r]);
|
|
416
416
|
let l = D({
|
|
417
417
|
stores: t,
|
|
@@ -444,7 +444,7 @@ function bt({ freeze: e, children: n }) {
|
|
|
444
444
|
let [r, i] = m(e), a = p(null);
|
|
445
445
|
return !e && r && i(!1), s(() => {
|
|
446
446
|
if (!(!e || r)) {
|
|
447
|
-
if (!
|
|
447
|
+
if (!ye()) {
|
|
448
448
|
i(!0);
|
|
449
449
|
return;
|
|
450
450
|
}
|
|
@@ -476,7 +476,7 @@ function Ct(e) {
|
|
|
476
476
|
function wt({ ref: e, style: t, ...n }) {
|
|
477
477
|
let { isActive: r, isPrev: i, transitionName: a } = z(), o = p(null);
|
|
478
478
|
l(e, () => o.current);
|
|
479
|
-
let s = Ct((e) => i ? "COMPLETED" : e.status), { decoratorName: c } =
|
|
479
|
+
let s = Ct((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = Ie(a), u = fe.get(c);
|
|
480
480
|
return u ? /* @__PURE__ */ P("div", {
|
|
481
481
|
ref: o,
|
|
482
482
|
"data-flemo-decorator": !0,
|
|
@@ -500,7 +500,7 @@ function wt({ ref: e, style: t, ...n }) {
|
|
|
500
500
|
//#region src/screen/useViewportScrollHeight.ts
|
|
501
501
|
function Tt() {
|
|
502
502
|
let [e, t] = m(0), [n, r] = m(0);
|
|
503
|
-
return s(() =>
|
|
503
|
+
return s(() => Te((e, n) => {
|
|
504
504
|
r(n), t(e);
|
|
505
505
|
}), []), {
|
|
506
506
|
viewportScrollHeight: e,
|
|
@@ -527,15 +527,15 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
527
527
|
setDragStatus: j,
|
|
528
528
|
setReplaceTransitionStatus: _e
|
|
529
529
|
});
|
|
530
|
-
let
|
|
530
|
+
let Ce = Se.current, Te = p(null);
|
|
531
531
|
Te.current ||= St(w.navigate);
|
|
532
|
-
let
|
|
532
|
+
let Ee = Ie(x), { initial: ke, swipeDirection: Ne, decoratorName: Pe } = Ee, Fe = fe.get(Pe), { viewportScrollHeight: Le } = Tt(), ze = Le > 0, F = !!c, L = !!u, R = F ? `${typeof l}:${String(l)}` : null, B = L ? `${typeof f}:${String(f)}` : null, [He, Ue] = m({
|
|
533
533
|
key: R,
|
|
534
534
|
height: 0
|
|
535
535
|
}), [We, Ge] = m({
|
|
536
536
|
key: B,
|
|
537
537
|
height: 0
|
|
538
|
-
}), V = p(He), qe = p(We), Je = He.key === R ? He.height : 0, Xe = We.key === B ? We.height : 0, Ze =
|
|
538
|
+
}), V = p(He), qe = p(We), Je = He.key === R ? He.height : 0, Xe = We.key === B ? We.height : 0, Ze = Re(F ? { id: l } : void 0, N?.topBar) ? N?.topBar?.height ?? 0 : 0, Qe = Re(L ? { id: f } : void 0, N?.bottomBar) ? N?.bottomBar?.height ?? 0 : 0, $e = Je || Ze, et = Xe || Qe, U = p(null), W = p(null), tt = p(null), G = p(null), nt = p(null), K = p(null), q = p(null), rt = a((e) => {
|
|
539
539
|
e <= 0 || R === null || (G.current && (G.current.style.minHeight = `${e}px`), V.current = {
|
|
540
540
|
key: R,
|
|
541
541
|
height: e
|
|
@@ -564,13 +564,13 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
564
564
|
}, [rt]), ot = a((e) => {
|
|
565
565
|
q.current = e, e?.offsetHeight && it(e.offsetHeight);
|
|
566
566
|
}, [it]), J = p({
|
|
567
|
-
transition:
|
|
568
|
-
decorator:
|
|
567
|
+
transition: Ee,
|
|
568
|
+
decorator: Fe,
|
|
569
569
|
hasSharedTopBar: !!c,
|
|
570
570
|
hasSharedBottomBar: !!u,
|
|
571
571
|
sharedTopBarId: l,
|
|
572
572
|
sharedBottomBarId: f,
|
|
573
|
-
viewportScrollHeight:
|
|
573
|
+
viewportScrollHeight: Le,
|
|
574
574
|
isRoot: y,
|
|
575
575
|
isActive: v,
|
|
576
576
|
status: k,
|
|
@@ -578,13 +578,13 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
578
578
|
index: E
|
|
579
579
|
});
|
|
580
580
|
J.current = {
|
|
581
|
-
transition:
|
|
582
|
-
decorator:
|
|
581
|
+
transition: Ee,
|
|
582
|
+
decorator: Fe,
|
|
583
583
|
hasSharedTopBar: !!c,
|
|
584
584
|
hasSharedBottomBar: !!u,
|
|
585
585
|
sharedTopBarId: l,
|
|
586
586
|
sharedBottomBarId: f,
|
|
587
|
-
viewportScrollHeight:
|
|
587
|
+
viewportScrollHeight: Le,
|
|
588
588
|
isRoot: y,
|
|
589
589
|
isActive: v,
|
|
590
590
|
status: k,
|
|
@@ -662,10 +662,10 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
662
662
|
R
|
|
663
663
|
]), d(() => {
|
|
664
664
|
let e = K.current;
|
|
665
|
-
if (e) return
|
|
665
|
+
if (e) return we(e, rt);
|
|
666
666
|
}, [rt, c]), d(() => {
|
|
667
667
|
let e = q.current;
|
|
668
|
-
if (e) return
|
|
668
|
+
if (e) return we(e, it);
|
|
669
669
|
}, [it, u]), d(() => {
|
|
670
670
|
let e = W.current;
|
|
671
671
|
if (!e) return;
|
|
@@ -706,8 +706,8 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
706
706
|
key: X,
|
|
707
707
|
released: X === null
|
|
708
708
|
}), yt.current = null, vt.current = X !== null && _t.current), _t.current = gt;
|
|
709
|
-
let Z = X !== null && bt.key === X && !bt.released && yt.current !== X, Q = Z ? !v && xe?.opaqueBackground ? "park" : v && (k === "PUSHING" || k === "REPLACING") && xe?.opaqueBackground ?
|
|
710
|
-
d(() =>
|
|
709
|
+
let Z = X !== null && bt.key === X && !bt.released && yt.current !== X, Q = Z ? !v && xe?.opaqueBackground ? "park" : v && (k === "PUSHING" || k === "REPLACING") && xe?.opaqueBackground ? je() || ve() ? "park-over" : "park-under" : "true" : "false", Dt = Et(Ae);
|
|
710
|
+
d(() => Ce.driveScreenLifecycle({
|
|
711
711
|
getElements: () => ({
|
|
712
712
|
scope: W.current,
|
|
713
713
|
decorator: tt.current,
|
|
@@ -719,7 +719,7 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
719
719
|
isActive: v,
|
|
720
720
|
animHoldReleased: !Z
|
|
721
721
|
}), [
|
|
722
|
-
|
|
722
|
+
Ce,
|
|
723
723
|
k,
|
|
724
724
|
v,
|
|
725
725
|
le,
|
|
@@ -729,7 +729,7 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
729
729
|
if (!Z || X === null) return;
|
|
730
730
|
let e = X, t = w.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
|
|
731
731
|
return Te.current.join(n, () => {
|
|
732
|
-
let t = (J.current.transition.driver === "native" || ve() ||
|
|
732
|
+
let t = (J.current.transition.driver === "native" || ve() || Oe()) && !A();
|
|
733
733
|
if (t) {
|
|
734
734
|
for (let e of [
|
|
735
735
|
W.current,
|
|
@@ -744,12 +744,12 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
744
744
|
key: e,
|
|
745
745
|
released: !0
|
|
746
746
|
} : t);
|
|
747
|
-
t &&
|
|
747
|
+
t && De() && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => n()) : Ve(n);
|
|
748
748
|
}
|
|
749
749
|
}, {
|
|
750
750
|
scope: W.current,
|
|
751
751
|
decodeWait: vt.current,
|
|
752
|
-
contentSettle:
|
|
752
|
+
contentSettle: Me() && (v && k === "PUSHING" || k === "POPPING") ? {
|
|
753
753
|
firstWaitMs: 120,
|
|
754
754
|
capMs: 700,
|
|
755
755
|
graceMs: 60,
|
|
@@ -766,7 +766,7 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
766
766
|
w.navigate
|
|
767
767
|
]);
|
|
768
768
|
let Ot = Q === "park-under" || Q === "park-over" ? {} : ge({
|
|
769
|
-
initial:
|
|
769
|
+
initial: ke,
|
|
770
770
|
isActive: v,
|
|
771
771
|
status: k
|
|
772
772
|
});
|
|
@@ -906,7 +906,7 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
|
|
|
906
906
|
},
|
|
907
907
|
children: u
|
|
908
908
|
}),
|
|
909
|
-
|
|
909
|
+
Fe && /* @__PURE__ */ P(wt, {
|
|
910
910
|
ref: tt,
|
|
911
911
|
"data-flemo-anim-hold": Q
|
|
912
912
|
})
|
|
@@ -962,7 +962,7 @@ function jt({ children: e }) {
|
|
|
962
962
|
transition: k(),
|
|
963
963
|
screen: E(),
|
|
964
964
|
driver: _(),
|
|
965
|
-
markSelfInduced:
|
|
965
|
+
markSelfInduced: Se,
|
|
966
966
|
consume: se,
|
|
967
967
|
life: { alive: !0 }
|
|
968
968
|
}));
|
|
@@ -972,4 +972,4 @@ function jt({ children: e }) {
|
|
|
972
972
|
});
|
|
973
973
|
}
|
|
974
974
|
//#endregion
|
|
975
|
-
export { At as Part, mt as Route, pt as Router, jt as RouterScopeProvider, Ot as Screen, R as ScreenContext, wt as ScreenDecorator, bt as ScreenFreeze, Dt as ScreenMotion, at as Slot, g as createBrowserHistoryDriver, v as createDecorator, x as createPartTransition, le as createRawDecorator, S as createRawPartTransition, C as createRawTransition, O as createTransition,
|
|
975
|
+
export { At as Part, mt as Route, pt as Router, jt as RouterScopeProvider, Ot as Screen, R as ScreenContext, wt as ScreenDecorator, bt as ScreenFreeze, Dt as ScreenMotion, at as Slot, g as createBrowserHistoryDriver, v as createDecorator, x as createPartTransition, le as createRawDecorator, S as createRawPartTransition, C as createRawTransition, O as createTransition, Ee as partTransitionMap, H as useHistoryStore, X as useNavigate, Ct as useNavigateStore, vt as useParams, gt as usePathname, z as useScreen, $ as useScreenStore, _t as useStep, I as useStores, Tt as useViewportScrollHeight };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flemo/react",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.3",
|
|
4
4
|
"description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
|
|
5
5
|
"main": "./dist/index.mjs",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"path-to-regexp": "^8.4.2",
|
|
38
38
|
"zustand": "^5.0.14",
|
|
39
|
-
"@flemo/core": "1.
|
|
39
|
+
"@flemo/core": "1.27.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@testing-library/jest-dom": "^6.9.1",
|