@real-router/react 0.18.0 → 0.20.0
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/README.md +15 -3
- package/dist/cjs/{Link-DQaD7Qrc.js → Link-CFGcNhCQ.js} +2 -2
- package/dist/cjs/Link-CFGcNhCQ.js.map +1 -0
- package/dist/cjs/RouterProvider-BFSblUxR.d.ts +26 -0
- package/dist/cjs/RouterProvider-BFSblUxR.d.ts.map +1 -0
- package/dist/cjs/RouterProvider-BOWw6Z_i.js +2 -0
- package/dist/cjs/RouterProvider-BOWw6Z_i.js.map +1 -0
- package/dist/cjs/index.d.ts +19 -3
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/ink.js +1 -1
- package/dist/cjs/ink.js.map +1 -1
- package/dist/cjs/legacy.d.ts +1 -1
- package/dist/cjs/legacy.js +1 -1
- package/dist/esm/{Link-yrIwhFgp.mjs → Link-coFvvMgW.mjs} +2 -2
- package/dist/esm/Link-coFvvMgW.mjs.map +1 -0
- package/dist/esm/RouterProvider-Cx0t2IIF.mjs +2 -0
- package/dist/esm/RouterProvider-Cx0t2IIF.mjs.map +1 -0
- package/dist/esm/RouterProvider-EtbwzAgd.d.mts +26 -0
- package/dist/esm/RouterProvider-EtbwzAgd.d.mts.map +1 -0
- package/dist/esm/index.d.mts +19 -3
- package/dist/esm/index.d.mts.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/ink.mjs +1 -1
- package/dist/esm/ink.mjs.map +1 -1
- package/dist/esm/legacy.d.mts +1 -1
- package/dist/esm/legacy.mjs +1 -1
- package/package.json +3 -3
- package/src/RouterProvider.tsx +31 -1
- package/src/components/InkLink.tsx +1 -1
- package/src/components/Link.tsx +1 -1
- package/src/components/modern/RouteView/RouteView.tsx +7 -2
- package/src/components/modern/RouteView/components.tsx +7 -1
- package/src/components/modern/RouteView/helpers.tsx +141 -52
- package/src/components/modern/RouteView/index.ts +1 -0
- package/src/components/modern/RouteView/types.ts +13 -1
- package/src/index.ts +1 -0
- package/dist/cjs/Link-DQaD7Qrc.js.map +0 -1
- package/dist/cjs/RouterProvider-BOdfon42.js +0 -2
- package/dist/cjs/RouterProvider-BOdfon42.js.map +0 -1
- package/dist/cjs/RouterProvider-njdco5Ra.d.ts +0 -17
- package/dist/cjs/RouterProvider-njdco5Ra.d.ts.map +0 -1
- package/dist/esm/Link-yrIwhFgp.mjs.map +0 -1
- package/dist/esm/RouterProvider-CiPZI0V5.mjs +0 -2
- package/dist/esm/RouterProvider-CiPZI0V5.mjs.map +0 -1
- package/dist/esm/RouterProvider-DgB4lIQr.d.mts +0 -17
- package/dist/esm/RouterProvider-DgB4lIQr.d.mts.map +0 -1
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-
|
|
1
|
+
import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-Cx0t2IIF.mjs";import{t as c}from"./Link-coFvvMgW.mjs";import{Activity as l,Children as u,Fragment as d,Suspense as f,isValidElement as p,useMemo as m,useRef as h}from"react";import{UNKNOWN_ROUTE as g}from"@real-router/core";import{startsWithSegment as _}from"@real-router/route-utils";import{Fragment as v,jsx as y}from"react/jsx-runtime";function b(e){return null}b.displayName=`RouteView.Match`;function x(e){return null}x.displayName=`RouteView.Self`;function S(e){return null}S.displayName=`RouteView.NotFound`;function C(e,t,n){return t===``?!1:n?e===t:_(e,t)}function w(e,t){for(let n of u.toArray(e))p(n)&&(n.type===b||n.type===x||n.type===S?t.push(n):w(n.props.children,t))}function T(e,t,n,r,i){let a=i===void 0?e:y(f,{fallback:i,children:e});return n?y(l,{mode:r,children:a},t):y(d,{children:a},t)}function E(e,t){return e.type===S?(t.notFoundChildren=e.props.children,!0):e.type===x?(t.selfFound||=(t.selfChildren=e.props.children,t.selfFallback=e.props.fallback,!0),!0):!1}function D(e,t,n,r,i){let{segment:a,exact:o=!1,keepAlive:s=!1,fallback:c}=e.props,l=n?`${n}.${a}`:a;return!i&&C(t,l,o)?(r.add(l),{rendered:T(e.props.children,l,s,`visible`,c),matched:!0}):s&&r.has(l)?{rendered:T(e.props.children,l,s,`hidden`,c),matched:!1}:{rendered:null,matched:!1}}function O(e,t,n,r){if(r.selfFound&&t===n){e.push(T(r.selfChildren,`__route-view-self__`,!1,`visible`,r.selfFallback));return}t===g&&r.notFoundChildren!==null&&e.push(y(d,{children:r.notFoundChildren},`__route-view-not-found__`))}function k(e,t,n,r){let i={selfChildren:null,selfFallback:void 0,selfFound:!1,notFoundChildren:null},a=!1,o=[];for(let s of e){if(E(s,i))continue;let e=D(s,t,n,r,a);e.matched&&(a=!0),e.rendered!==null&&o.push(e.rendered)}return a||O(o,t,n,i),{rendered:o,activeMatchFound:a}}function A({nodeName:e,children:t}){let{route:n}=r(e),i=h(null);i.current??=new Set;let a=m(()=>{let e=[];return w(t,e),e},[t]);if(!n)return null;let{rendered:o}=k(a,n.name,e,i.current);return o.length>0?y(v,{children:o}):null}A.displayName=`RouteView`;const j=Object.assign(A,{Match:b,Self:x,NotFound:S});export{c as Link,j as RouteView,a as RouterErrorBoundary,s as RouterProvider,e as useNavigator,o as useRoute,r as useRouteNode,n as useRouteUtils,t as useRouter,i as useRouterTransition};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function NotFound(_props: NotFoundProps): null {\n return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound } from \"./components\";\n\nimport type { MatchProps, NotFoundProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nfunction isSegmentMatch(\n routeName: string,\n fullSegmentName: string,\n exact: boolean,\n): boolean {\n if (fullSegmentName === \"\") {\n return false;\n }\n\n if (exact) {\n return routeName === fullSegmentName;\n }\n\n return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n children: ReactNode,\n result: ReactElement[],\n): void {\n // eslint-disable-next-line @eslint-react/no-children-to-array\n for (const child of Children.toArray(children)) {\n if (!isValidElement(child)) {\n continue;\n }\n\n if (child.type === Match
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/modern/RouteView/components.tsx","../../src/components/modern/RouteView/helpers.tsx","../../src/components/modern/RouteView/RouteView.tsx"],"sourcesContent":["import type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\n\nexport function Match(_props: MatchProps): null {\n return null;\n}\n\nMatch.displayName = \"RouteView.Match\";\n\nexport function Self(_props: SelfProps): null {\n return null;\n}\n\nSelf.displayName = \"RouteView.Self\";\n\nexport function NotFound(_props: NotFoundProps): null {\n return null;\n}\n\nNotFound.displayName = \"RouteView.NotFound\";\n","import { UNKNOWN_ROUTE } from \"@real-router/core\";\nimport { startsWithSegment } from \"@real-router/route-utils\";\nimport { Activity, Children, Fragment, Suspense, isValidElement } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\n\nimport type { MatchProps, NotFoundProps, SelfProps } from \"./types\";\nimport type { ReactElement, ReactNode } from \"react\";\n\ninterface FallbackSlots {\n selfChildren: ReactNode;\n selfFallback: ReactNode | undefined;\n selfFound: boolean;\n notFoundChildren: ReactNode;\n}\n\nfunction isSegmentMatch(\n routeName: string,\n fullSegmentName: string,\n exact: boolean,\n): boolean {\n if (fullSegmentName === \"\") {\n return false;\n }\n\n if (exact) {\n return routeName === fullSegmentName;\n }\n\n return startsWithSegment(routeName, fullSegmentName);\n}\n\nexport function collectElements(\n children: ReactNode,\n result: ReactElement[],\n): void {\n // eslint-disable-next-line @eslint-react/no-children-to-array\n for (const child of Children.toArray(children)) {\n if (!isValidElement(child)) {\n continue;\n }\n\n if (\n child.type === Match ||\n child.type === Self ||\n child.type === NotFound\n ) {\n result.push(child);\n } else {\n collectElements(\n (child.props as { readonly children: ReactNode }).children,\n result,\n );\n }\n }\n}\n\nfunction renderSlotElement(\n slotChildren: ReactNode,\n key: string,\n keepAlive: boolean,\n mode: \"visible\" | \"hidden\",\n fallback?: ReactNode,\n): ReactElement {\n const content =\n fallback === undefined ? (\n slotChildren\n ) : (\n <Suspense fallback={fallback}>{slotChildren}</Suspense>\n );\n\n if (keepAlive) {\n return (\n <Activity mode={mode} key={key}>\n {content}\n </Activity>\n );\n }\n\n return <Fragment key={key}>{content}</Fragment>;\n}\n\nfunction recordFallback(child: ReactElement, slots: FallbackSlots): boolean {\n if (child.type === NotFound) {\n slots.notFoundChildren = (child.props as NotFoundProps).children;\n\n return true;\n }\n\n if (child.type === Self) {\n // First-wins: subsequent <Self> elements are ignored, mirroring NotFound.\n if (!slots.selfFound) {\n slots.selfChildren = (child.props as SelfProps).children;\n slots.selfFallback = (child.props as SelfProps).fallback;\n slots.selfFound = true;\n }\n\n return true;\n }\n\n return false;\n}\n\nfunction processMatch(\n child: ReactElement,\n routeName: string,\n nodeName: string,\n hasBeenActivated: Set<string>,\n alreadyActive: boolean,\n): { rendered: ReactElement | null; matched: boolean } {\n const {\n segment,\n exact = false,\n keepAlive = false,\n fallback,\n } = child.props as MatchProps;\n const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;\n const isActive =\n !alreadyActive && isSegmentMatch(routeName, fullSegmentName, exact);\n\n if (isActive) {\n hasBeenActivated.add(fullSegmentName);\n\n return {\n rendered: renderSlotElement(\n (child.props as MatchProps).children,\n fullSegmentName,\n keepAlive,\n \"visible\",\n fallback,\n ),\n matched: true,\n };\n }\n\n if (keepAlive && hasBeenActivated.has(fullSegmentName)) {\n return {\n rendered: renderSlotElement(\n (child.props as MatchProps).children,\n fullSegmentName,\n keepAlive,\n \"hidden\",\n fallback,\n ),\n matched: false,\n };\n }\n\n return { rendered: null, matched: false };\n}\n\nfunction appendFallback(\n rendered: ReactElement[],\n routeName: string,\n nodeName: string,\n slots: FallbackSlots,\n): void {\n if (slots.selfFound && routeName === nodeName) {\n rendered.push(\n renderSlotElement(\n slots.selfChildren,\n \"__route-view-self__\",\n false,\n \"visible\",\n slots.selfFallback,\n ),\n );\n\n return;\n }\n\n if (routeName === UNKNOWN_ROUTE && slots.notFoundChildren !== null) {\n rendered.push(\n <Fragment key=\"__route-view-not-found__\">\n {slots.notFoundChildren}\n </Fragment>,\n );\n }\n}\n\nexport function buildRenderList(\n elements: ReactElement[],\n routeName: string,\n nodeName: string,\n hasBeenActivated: Set<string>,\n): { rendered: ReactElement[]; activeMatchFound: boolean } {\n const slots: FallbackSlots = {\n selfChildren: null,\n selfFallback: undefined,\n selfFound: false,\n notFoundChildren: null,\n };\n let activeMatchFound = false;\n const rendered: ReactElement[] = [];\n\n for (const child of elements) {\n if (recordFallback(child, slots)) {\n continue;\n }\n\n const result = processMatch(\n child,\n routeName,\n nodeName,\n hasBeenActivated,\n activeMatchFound,\n );\n\n if (result.matched) {\n activeMatchFound = true;\n }\n\n if (result.rendered !== null) {\n rendered.push(result.rendered);\n }\n }\n\n if (!activeMatchFound) {\n appendFallback(rendered, routeName, nodeName, slots);\n }\n\n return { rendered, activeMatchFound };\n}\n","import { useMemo, useRef } from \"react\";\n\nimport { Match, NotFound, Self } from \"./components\";\nimport { buildRenderList, collectElements } from \"./helpers\";\nimport { useRouteNode } from \"../../../hooks/useRouteNode\";\n\nimport type { RouteViewProps } from \"./types\";\nimport type { ReactElement } from \"react\";\n\nfunction RouteViewRoot({\n nodeName,\n children,\n}: Readonly<RouteViewProps>): ReactElement | null {\n const { route } = useRouteNode(nodeName);\n const hasBeenActivatedRef = useRef<Set<string> | null>(null);\n\n // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render\n hasBeenActivatedRef.current ??= new Set();\n\n // Skip the Children.toArray + collectElements traversal when children\n // reference is unchanged. children only changes when the parent re-renders\n // with a new ReactNode, so this caches the steady-state.\n const elements = useMemo(() => {\n const collected: ReactElement[] = [];\n\n collectElements(children, collected);\n\n return collected;\n }, [children]);\n\n if (!route) {\n return null;\n }\n\n const { rendered } = buildRenderList(\n elements,\n route.name,\n nodeName,\n // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)\n hasBeenActivatedRef.current,\n );\n\n if (rendered.length > 0) {\n return <>{rendered}</>;\n }\n\n return null;\n}\n\nRouteViewRoot.displayName = \"RouteView\";\n\nexport const RouteView = Object.assign(RouteViewRoot, {\n Match,\n Self,\n NotFound,\n});\n\nexport type {\n RouteViewProps,\n MatchProps as RouteViewMatchProps,\n SelfProps as RouteViewSelfProps,\n NotFoundProps as RouteViewNotFoundProps,\n} from \"./types\";\n"],"mappings":"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"}
|
package/dist/esm/ink.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e,f as t,h as n,i as r,m as i,n as a,o,p as s,r as c,s as l,t as u,u as d}from"./RouterProvider-
|
|
1
|
+
import{a as e,f as t,h as n,i as r,m as i,n as a,o,p as s,r as c,s as l,t as u,u as d}from"./RouterProvider-Cx0t2IIF.mjs";import{memo as f,useCallback as p}from"react";import{jsx as m}from"react/jsx-runtime";import{Text as h,useFocus as g,useInput as _}from"ink";function v(e,t){return e.routeName===t.routeName&&e.activeStrict===t.activeStrict&&e.ignoreQueryParams===t.ignoreQueryParams&&e.color===t.color&&e.activeColor===t.activeColor&&e.focusColor===t.focusColor&&e.inverse===t.inverse&&e.activeInverse===t.activeInverse&&e.focusInverse===t.focusInverse&&e.id===t.id&&e.autoFocus===t.autoFocus&&e.onSelect===t.onSelect&&e.children===t.children&&d(e.routeParams,t.routeParams)&&d(e.routeOptions,t.routeOptions)}const y=f(({routeName:e,routeParams:r=s,routeOptions:i=t,activeStrict:a=!1,ignoreQueryParams:o=!0,color:c,activeColor:u,focusColor:d,inverse:f,activeInverse:v,focusInverse:y,id:b,autoFocus:x,onSelect:S,children:C})=>{let w=n(),{isFocused:T}=g({...b!==void 0&&{id:b},...x!==void 0&&{autoFocus:x}}),E=l(e,r,a,o),D=p(()=>{S?.(),w.navigate(e,r,i).catch(()=>{})},[S,w,e,r,i]);_((e,t)=>{t.return&&D()},{isActive:T});let O=c;T?O=d??u??c:E&&(O=u??c);let k=f;T?k=y??v??f:E&&(k=v??f);let A={};return O!==void 0&&(A.color=O),k!==void 0&&(A.inverse=k),m(h,{...A,children:C})},v);y.displayName=`InkLink`;const b=({router:e,children:t})=>m(u,{router:e,children:t});export{y as InkLink,b as InkRouterProvider,o as RouterErrorBoundary,e as useNavigator,c as useRoute,i as useRouteNode,r as useRouteUtils,n as useRouter,a as useRouterTransition};
|
|
2
2
|
//# sourceMappingURL=ink.mjs.map
|
package/dist/esm/ink.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ink.mjs","names":[],"sources":["../../src/components/InkLink.tsx","../../src/components/InkRouterProvider.tsx"],"sourcesContent":["import { Text, useFocus, useInput } from \"ink\";\nimport { memo, useCallback } from \"react\";\n\nimport { EMPTY_OPTIONS, EMPTY_PARAMS } from \"../constants\";\nimport { shallowEqual } from \"../dom-utils
|
|
1
|
+
{"version":3,"file":"ink.mjs","names":[],"sources":["../../src/components/InkLink.tsx","../../src/components/InkRouterProvider.tsx"],"sourcesContent":["import { Text, useFocus, useInput } from \"ink\";\nimport { memo, useCallback } from \"react\";\n\nimport { EMPTY_OPTIONS, EMPTY_PARAMS } from \"../constants\";\nimport { shallowEqual } from \"../dom-utils\";\nimport { useIsActiveRoute } from \"../hooks/useIsActiveRoute\";\nimport { useRouter } from \"../hooks/useRouter\";\n\nimport type { InkLinkProps } from \"../ink-types\";\nimport type { FC } from \"react\";\n\nfunction areInkLinkPropsEqual(\n prev: Readonly<InkLinkProps>,\n next: Readonly<InkLinkProps>,\n): boolean {\n return (\n prev.routeName === next.routeName &&\n prev.activeStrict === next.activeStrict &&\n prev.ignoreQueryParams === next.ignoreQueryParams &&\n prev.color === next.color &&\n prev.activeColor === next.activeColor &&\n prev.focusColor === next.focusColor &&\n prev.inverse === next.inverse &&\n prev.activeInverse === next.activeInverse &&\n prev.focusInverse === next.focusInverse &&\n prev.id === next.id &&\n prev.autoFocus === next.autoFocus &&\n prev.onSelect === next.onSelect &&\n prev.children === next.children &&\n shallowEqual(prev.routeParams, next.routeParams) &&\n shallowEqual(prev.routeOptions, next.routeOptions)\n );\n}\n\nconst InkLinkImpl: FC<InkLinkProps> = ({\n routeName,\n routeParams = EMPTY_PARAMS,\n routeOptions = EMPTY_OPTIONS,\n activeStrict = false,\n ignoreQueryParams = true,\n color,\n activeColor,\n focusColor,\n inverse,\n activeInverse,\n focusInverse,\n id,\n autoFocus,\n onSelect,\n children,\n}) => {\n const router = useRouter();\n const { isFocused } = useFocus({\n ...(id !== undefined && { id }),\n ...(autoFocus !== undefined && { autoFocus }),\n });\n const isRouteActive = useIsActiveRoute(\n routeName,\n routeParams,\n activeStrict,\n ignoreQueryParams,\n );\n\n const activate = useCallback(() => {\n onSelect?.();\n router.navigate(routeName, routeParams, routeOptions).catch(() => {});\n }, [onSelect, router, routeName, routeParams, routeOptions]);\n\n useInput(\n (_input, key) => {\n if (key.return) {\n activate();\n }\n },\n { isActive: isFocused },\n );\n\n let finalColor = color;\n\n if (isFocused) {\n finalColor = focusColor ?? activeColor ?? color;\n } else if (isRouteActive) {\n finalColor = activeColor ?? color;\n }\n\n let finalInverse = inverse;\n\n if (isFocused) {\n finalInverse = focusInverse ?? activeInverse ?? inverse;\n } else if (isRouteActive) {\n finalInverse = activeInverse ?? inverse;\n }\n\n const textProps: { color?: string; inverse?: boolean } = {};\n\n if (finalColor !== undefined) {\n textProps.color = finalColor;\n }\n\n if (finalInverse !== undefined) {\n textProps.inverse = finalInverse;\n }\n\n return <Text {...textProps}>{children}</Text>;\n};\n\nexport const InkLink: FC<InkLinkProps> = memo(\n InkLinkImpl,\n areInkLinkPropsEqual,\n);\n\nInkLink.displayName = \"InkLink\";\n","import { RouterProvider } from \"../RouterProvider\";\n\nimport type { InkRouterProviderProps } from \"../ink-types\";\nimport type { FC } from \"react\";\n\nexport const InkRouterProvider: FC<InkRouterProviderProps> = ({\n router,\n children,\n}) => <RouterProvider router={router}>{children}</RouterProvider>;\n"],"mappings":"uQAWA,SAAS,EACP,EACA,EACS,CACT,OACE,EAAK,YAAc,EAAK,WACxB,EAAK,eAAiB,EAAK,cAC3B,EAAK,oBAAsB,EAAK,mBAChC,EAAK,QAAU,EAAK,OACpB,EAAK,cAAgB,EAAK,aAC1B,EAAK,aAAe,EAAK,YACzB,EAAK,UAAY,EAAK,SACtB,EAAK,gBAAkB,EAAK,eAC5B,EAAK,eAAiB,EAAK,cAC3B,EAAK,KAAO,EAAK,IACjB,EAAK,YAAc,EAAK,WACxB,EAAK,WAAa,EAAK,UACvB,EAAK,WAAa,EAAK,UACvB,EAAa,EAAK,YAAa,EAAK,YAAY,EAChD,EAAa,EAAK,aAAc,EAAK,aAAa,CA4EtD,MAAa,EAA4B,GAxEF,CACrC,YACA,cAAc,EACd,eAAe,EACf,eAAe,GACf,oBAAoB,GACpB,QACA,cACA,aACA,UACA,gBACA,eACA,KACA,YACA,WACA,cACI,CACJ,IAAM,EAAS,GAAW,CACpB,CAAE,aAAc,EAAS,CAC7B,GAAI,IAAO,IAAA,IAAa,CAAE,KAAI,CAC9B,GAAI,IAAc,IAAA,IAAa,CAAE,YAAW,CAC7C,CAAC,CACI,EAAgB,EACpB,EACA,EACA,EACA,EACD,CAEK,EAAW,MAAkB,CACjC,KAAY,CACZ,EAAO,SAAS,EAAW,EAAa,EAAa,CAAC,UAAY,GAAG,EACpE,CAAC,EAAU,EAAQ,EAAW,EAAa,EAAa,CAAC,CAE5D,GACG,EAAQ,IAAQ,CACX,EAAI,QACN,GAAU,EAGd,CAAE,SAAU,EAAW,CACxB,CAED,IAAI,EAAa,EAEb,EACF,EAAa,GAAc,GAAe,EACjC,IACT,EAAa,GAAe,GAG9B,IAAI,EAAe,EAEf,EACF,EAAe,GAAgB,GAAiB,EACvC,IACT,EAAe,GAAiB,GAGlC,IAAM,EAAmD,EAAE,CAU3D,OARI,IAAe,IAAA,KACjB,EAAU,MAAQ,GAGhB,IAAiB,IAAA,KACnB,EAAU,QAAU,GAGf,EAAC,EAAD,CAAM,GAAI,EAAY,WAAgB,CAAA,EAK7C,EACD,CAED,EAAQ,YAAc,UC1GtB,MAAa,GAAiD,CAC5D,SACA,cACI,EAAC,EAAD,CAAwB,SAAS,WAA0B,CAAA"}
|
package/dist/esm/legacy.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as useNavigator, c as RouterErrorBoundaryProps, i as useRouteUtils, l as LinkProps, n as useRouteNode, o as useRouter, r as useRoute, s as RouterErrorBoundary, t as useRouterTransition } from "./useRouterTransition-CFlgAEy7.mjs";
|
|
2
|
-
import { n as Link, t as RouterProvider } from "./RouterProvider-
|
|
2
|
+
import { n as Link, t as RouterProvider } from "./RouterProvider-EtbwzAgd.mjs";
|
|
3
3
|
import { Navigator } from "@real-router/core";
|
|
4
4
|
import { RouterTransitionSnapshot } from "@real-router/sources";
|
|
5
5
|
export { Link, type LinkProps, type Navigator, RouterErrorBoundary, type RouterErrorBoundaryProps, RouterProvider, type RouterTransitionSnapshot, useNavigator, useRoute, useRouteNode, useRouteUtils, useRouter, useRouterTransition };
|
package/dist/esm/legacy.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-
|
|
1
|
+
import{a as e,h as t,i as n,m as r,n as i,o as a,r as o,t as s}from"./RouterProvider-Cx0t2IIF.mjs";import{t as c}from"./Link-coFvvMgW.mjs";export{c as Link,a as RouterErrorBoundary,s as RouterProvider,e as useNavigator,o as useRoute,r as useRouteNode,n as useRouteUtils,t as useRouter,i as useRouterTransition};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@real-router/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"description": "React integration for Real-Router",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"license": "MIT",
|
|
77
77
|
"sideEffects": false,
|
|
78
78
|
"dependencies": {
|
|
79
|
-
"@real-router/core": "^0.50.
|
|
79
|
+
"@real-router/core": "^0.50.1",
|
|
80
80
|
"@real-router/route-utils": "^0.2.1",
|
|
81
81
|
"@real-router/sources": "^0.7.2"
|
|
82
82
|
},
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"ink": "7.0.1",
|
|
89
89
|
"ink-testing-library": "4.0.0",
|
|
90
90
|
"vitest-react-profiler": "1.12.0",
|
|
91
|
-
"@real-router/browser-plugin": "^0.
|
|
91
|
+
"@real-router/browser-plugin": "^0.15.1"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
94
|
"@types/react": ">=18.0.0",
|
package/src/RouterProvider.tsx
CHANGED
|
@@ -3,8 +3,9 @@ import { createRouteSource } from "@real-router/sources";
|
|
|
3
3
|
import { useEffect, useMemo, useSyncExternalStore } from "react";
|
|
4
4
|
|
|
5
5
|
import { NavigatorContext, RouteContext, RouterContext } from "./context";
|
|
6
|
-
import { createRouteAnnouncer } from "./dom-utils
|
|
6
|
+
import { createRouteAnnouncer, createScrollRestoration } from "./dom-utils";
|
|
7
7
|
|
|
8
|
+
import type { ScrollRestorationOptions } from "./dom-utils";
|
|
8
9
|
import type { Router } from "@real-router/core";
|
|
9
10
|
import type { FC, ReactNode } from "react";
|
|
10
11
|
|
|
@@ -12,12 +13,14 @@ export interface RouteProviderProps {
|
|
|
12
13
|
router: Router;
|
|
13
14
|
children: ReactNode;
|
|
14
15
|
announceNavigation?: boolean;
|
|
16
|
+
scrollRestoration?: ScrollRestorationOptions;
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
export const RouterProvider: FC<RouteProviderProps> = ({
|
|
18
20
|
router,
|
|
19
21
|
children,
|
|
20
22
|
announceNavigation,
|
|
23
|
+
scrollRestoration,
|
|
21
24
|
}) => {
|
|
22
25
|
useEffect(() => {
|
|
23
26
|
if (!announceNavigation) {
|
|
@@ -31,6 +34,33 @@ export const RouterProvider: FC<RouteProviderProps> = ({
|
|
|
31
34
|
};
|
|
32
35
|
}, [announceNavigation, router]);
|
|
33
36
|
|
|
37
|
+
// Primitive deps so inline `{ mode: "restore" }` doesn't thrash on every
|
|
38
|
+
// render. scrollContainer is a getter invoked lazily on every event inside
|
|
39
|
+
// the utility — swapping its reference doesn't change the resolved element,
|
|
40
|
+
// so we intentionally omit it from deps to keep inline getters stable.
|
|
41
|
+
const srMode = scrollRestoration?.mode;
|
|
42
|
+
const srAnchor = scrollRestoration?.anchorScrolling;
|
|
43
|
+
const srEnabled = scrollRestoration !== undefined;
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (!srEnabled) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const sr = createScrollRestoration(router, {
|
|
51
|
+
mode: srMode,
|
|
52
|
+
anchorScrolling: srAnchor,
|
|
53
|
+
// srEnabled check above guarantees scrollRestoration is defined.
|
|
54
|
+
scrollContainer: scrollRestoration.scrollContainer,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
return () => {
|
|
58
|
+
sr.destroy();
|
|
59
|
+
};
|
|
60
|
+
// scrollRestoration (for scrollContainer) omitted — see comment above.
|
|
61
|
+
// eslint-disable-next-line @eslint-react/exhaustive-deps
|
|
62
|
+
}, [router, srEnabled, srMode, srAnchor]);
|
|
63
|
+
|
|
34
64
|
const navigator = useMemo(() => getNavigator(router), [router]);
|
|
35
65
|
|
|
36
66
|
// useSyncExternalStore manages the router subscription lifecycle:
|
|
@@ -2,7 +2,7 @@ import { Text, useFocus, useInput } from "ink";
|
|
|
2
2
|
import { memo, useCallback } from "react";
|
|
3
3
|
|
|
4
4
|
import { EMPTY_OPTIONS, EMPTY_PARAMS } from "../constants";
|
|
5
|
-
import { shallowEqual } from "../dom-utils
|
|
5
|
+
import { shallowEqual } from "../dom-utils";
|
|
6
6
|
import { useIsActiveRoute } from "../hooks/useIsActiveRoute";
|
|
7
7
|
import { useRouter } from "../hooks/useRouter";
|
|
8
8
|
|
package/src/components/Link.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo, useRef } from "react";
|
|
2
2
|
|
|
3
|
-
import { Match, NotFound } from "./components";
|
|
3
|
+
import { Match, NotFound, Self } from "./components";
|
|
4
4
|
import { buildRenderList, collectElements } from "./helpers";
|
|
5
5
|
import { useRouteNode } from "../../../hooks/useRouteNode";
|
|
6
6
|
|
|
@@ -49,10 +49,15 @@ function RouteViewRoot({
|
|
|
49
49
|
|
|
50
50
|
RouteViewRoot.displayName = "RouteView";
|
|
51
51
|
|
|
52
|
-
export const RouteView = Object.assign(RouteViewRoot, {
|
|
52
|
+
export const RouteView = Object.assign(RouteViewRoot, {
|
|
53
|
+
Match,
|
|
54
|
+
Self,
|
|
55
|
+
NotFound,
|
|
56
|
+
});
|
|
53
57
|
|
|
54
58
|
export type {
|
|
55
59
|
RouteViewProps,
|
|
56
60
|
MatchProps as RouteViewMatchProps,
|
|
61
|
+
SelfProps as RouteViewSelfProps,
|
|
57
62
|
NotFoundProps as RouteViewNotFoundProps,
|
|
58
63
|
} from "./types";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { MatchProps, NotFoundProps } from "./types";
|
|
1
|
+
import type { MatchProps, NotFoundProps, SelfProps } from "./types";
|
|
2
2
|
|
|
3
3
|
export function Match(_props: MatchProps): null {
|
|
4
4
|
return null;
|
|
@@ -6,6 +6,12 @@ export function Match(_props: MatchProps): null {
|
|
|
6
6
|
|
|
7
7
|
Match.displayName = "RouteView.Match";
|
|
8
8
|
|
|
9
|
+
export function Self(_props: SelfProps): null {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
Self.displayName = "RouteView.Self";
|
|
14
|
+
|
|
9
15
|
export function NotFound(_props: NotFoundProps): null {
|
|
10
16
|
return null;
|
|
11
17
|
}
|
|
@@ -2,11 +2,18 @@ import { UNKNOWN_ROUTE } from "@real-router/core";
|
|
|
2
2
|
import { startsWithSegment } from "@real-router/route-utils";
|
|
3
3
|
import { Activity, Children, Fragment, Suspense, isValidElement } from "react";
|
|
4
4
|
|
|
5
|
-
import { Match, NotFound } from "./components";
|
|
5
|
+
import { Match, NotFound, Self } from "./components";
|
|
6
6
|
|
|
7
|
-
import type { MatchProps, NotFoundProps } from "./types";
|
|
7
|
+
import type { MatchProps, NotFoundProps, SelfProps } from "./types";
|
|
8
8
|
import type { ReactElement, ReactNode } from "react";
|
|
9
9
|
|
|
10
|
+
interface FallbackSlots {
|
|
11
|
+
selfChildren: ReactNode;
|
|
12
|
+
selfFallback: ReactNode | undefined;
|
|
13
|
+
selfFound: boolean;
|
|
14
|
+
notFoundChildren: ReactNode;
|
|
15
|
+
}
|
|
16
|
+
|
|
10
17
|
function isSegmentMatch(
|
|
11
18
|
routeName: string,
|
|
12
19
|
fullSegmentName: string,
|
|
@@ -33,7 +40,11 @@ export function collectElements(
|
|
|
33
40
|
continue;
|
|
34
41
|
}
|
|
35
42
|
|
|
36
|
-
if (
|
|
43
|
+
if (
|
|
44
|
+
child.type === Match ||
|
|
45
|
+
child.type === Self ||
|
|
46
|
+
child.type === NotFound
|
|
47
|
+
) {
|
|
37
48
|
result.push(child);
|
|
38
49
|
} else {
|
|
39
50
|
collectElements(
|
|
@@ -44,29 +55,127 @@ export function collectElements(
|
|
|
44
55
|
}
|
|
45
56
|
}
|
|
46
57
|
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
function renderSlotElement(
|
|
59
|
+
slotChildren: ReactNode,
|
|
60
|
+
key: string,
|
|
50
61
|
keepAlive: boolean,
|
|
51
62
|
mode: "visible" | "hidden",
|
|
52
63
|
fallback?: ReactNode,
|
|
53
64
|
): ReactElement {
|
|
54
65
|
const content =
|
|
55
66
|
fallback === undefined ? (
|
|
56
|
-
|
|
67
|
+
slotChildren
|
|
57
68
|
) : (
|
|
58
|
-
<Suspense fallback={fallback}>{
|
|
69
|
+
<Suspense fallback={fallback}>{slotChildren}</Suspense>
|
|
59
70
|
);
|
|
60
71
|
|
|
61
72
|
if (keepAlive) {
|
|
62
73
|
return (
|
|
63
|
-
<Activity mode={mode} key={
|
|
74
|
+
<Activity mode={mode} key={key}>
|
|
64
75
|
{content}
|
|
65
76
|
</Activity>
|
|
66
77
|
);
|
|
67
78
|
}
|
|
68
79
|
|
|
69
|
-
return <Fragment key={
|
|
80
|
+
return <Fragment key={key}>{content}</Fragment>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function recordFallback(child: ReactElement, slots: FallbackSlots): boolean {
|
|
84
|
+
if (child.type === NotFound) {
|
|
85
|
+
slots.notFoundChildren = (child.props as NotFoundProps).children;
|
|
86
|
+
|
|
87
|
+
return true;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (child.type === Self) {
|
|
91
|
+
// First-wins: subsequent <Self> elements are ignored, mirroring NotFound.
|
|
92
|
+
if (!slots.selfFound) {
|
|
93
|
+
slots.selfChildren = (child.props as SelfProps).children;
|
|
94
|
+
slots.selfFallback = (child.props as SelfProps).fallback;
|
|
95
|
+
slots.selfFound = true;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
return true;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return false;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
function processMatch(
|
|
105
|
+
child: ReactElement,
|
|
106
|
+
routeName: string,
|
|
107
|
+
nodeName: string,
|
|
108
|
+
hasBeenActivated: Set<string>,
|
|
109
|
+
alreadyActive: boolean,
|
|
110
|
+
): { rendered: ReactElement | null; matched: boolean } {
|
|
111
|
+
const {
|
|
112
|
+
segment,
|
|
113
|
+
exact = false,
|
|
114
|
+
keepAlive = false,
|
|
115
|
+
fallback,
|
|
116
|
+
} = child.props as MatchProps;
|
|
117
|
+
const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
|
|
118
|
+
const isActive =
|
|
119
|
+
!alreadyActive && isSegmentMatch(routeName, fullSegmentName, exact);
|
|
120
|
+
|
|
121
|
+
if (isActive) {
|
|
122
|
+
hasBeenActivated.add(fullSegmentName);
|
|
123
|
+
|
|
124
|
+
return {
|
|
125
|
+
rendered: renderSlotElement(
|
|
126
|
+
(child.props as MatchProps).children,
|
|
127
|
+
fullSegmentName,
|
|
128
|
+
keepAlive,
|
|
129
|
+
"visible",
|
|
130
|
+
fallback,
|
|
131
|
+
),
|
|
132
|
+
matched: true,
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
if (keepAlive && hasBeenActivated.has(fullSegmentName)) {
|
|
137
|
+
return {
|
|
138
|
+
rendered: renderSlotElement(
|
|
139
|
+
(child.props as MatchProps).children,
|
|
140
|
+
fullSegmentName,
|
|
141
|
+
keepAlive,
|
|
142
|
+
"hidden",
|
|
143
|
+
fallback,
|
|
144
|
+
),
|
|
145
|
+
matched: false,
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
return { rendered: null, matched: false };
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
function appendFallback(
|
|
153
|
+
rendered: ReactElement[],
|
|
154
|
+
routeName: string,
|
|
155
|
+
nodeName: string,
|
|
156
|
+
slots: FallbackSlots,
|
|
157
|
+
): void {
|
|
158
|
+
if (slots.selfFound && routeName === nodeName) {
|
|
159
|
+
rendered.push(
|
|
160
|
+
renderSlotElement(
|
|
161
|
+
slots.selfChildren,
|
|
162
|
+
"__route-view-self__",
|
|
163
|
+
false,
|
|
164
|
+
"visible",
|
|
165
|
+
slots.selfFallback,
|
|
166
|
+
),
|
|
167
|
+
);
|
|
168
|
+
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
if (routeName === UNKNOWN_ROUTE && slots.notFoundChildren !== null) {
|
|
173
|
+
rendered.push(
|
|
174
|
+
<Fragment key="__route-view-not-found__">
|
|
175
|
+
{slots.notFoundChildren}
|
|
176
|
+
</Fragment>,
|
|
177
|
+
);
|
|
178
|
+
}
|
|
70
179
|
}
|
|
71
180
|
|
|
72
181
|
export function buildRenderList(
|
|
@@ -75,59 +184,39 @@ export function buildRenderList(
|
|
|
75
184
|
nodeName: string,
|
|
76
185
|
hasBeenActivated: Set<string>,
|
|
77
186
|
): { rendered: ReactElement[]; activeMatchFound: boolean } {
|
|
78
|
-
|
|
187
|
+
const slots: FallbackSlots = {
|
|
188
|
+
selfChildren: null,
|
|
189
|
+
selfFallback: undefined,
|
|
190
|
+
selfFound: false,
|
|
191
|
+
notFoundChildren: null,
|
|
192
|
+
};
|
|
79
193
|
let activeMatchFound = false;
|
|
80
194
|
const rendered: ReactElement[] = [];
|
|
81
195
|
|
|
82
196
|
for (const child of elements) {
|
|
83
|
-
if (child
|
|
84
|
-
notFoundChildren = (child.props as NotFoundProps).children;
|
|
197
|
+
if (recordFallback(child, slots)) {
|
|
85
198
|
continue;
|
|
86
199
|
}
|
|
87
200
|
|
|
88
|
-
const
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
if (isActive) {
|
|
201
|
+
const result = processMatch(
|
|
202
|
+
child,
|
|
203
|
+
routeName,
|
|
204
|
+
nodeName,
|
|
205
|
+
hasBeenActivated,
|
|
206
|
+
activeMatchFound,
|
|
207
|
+
);
|
|
208
|
+
|
|
209
|
+
if (result.matched) {
|
|
99
210
|
activeMatchFound = true;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
fullSegmentName,
|
|
105
|
-
keepAlive,
|
|
106
|
-
"visible",
|
|
107
|
-
fallback,
|
|
108
|
-
),
|
|
109
|
-
);
|
|
110
|
-
} else if (keepAlive && hasBeenActivated.has(fullSegmentName)) {
|
|
111
|
-
rendered.push(
|
|
112
|
-
renderMatchElement(
|
|
113
|
-
(child.props as MatchProps).children,
|
|
114
|
-
fullSegmentName,
|
|
115
|
-
keepAlive,
|
|
116
|
-
"hidden",
|
|
117
|
-
fallback,
|
|
118
|
-
),
|
|
119
|
-
);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
if (result.rendered !== null) {
|
|
214
|
+
rendered.push(result.rendered);
|
|
120
215
|
}
|
|
121
216
|
}
|
|
122
217
|
|
|
123
|
-
if (
|
|
124
|
-
|
|
125
|
-
routeName === UNKNOWN_ROUTE &&
|
|
126
|
-
notFoundChildren !== null
|
|
127
|
-
) {
|
|
128
|
-
rendered.push(
|
|
129
|
-
<Fragment key="__route-view-not-found__">{notFoundChildren}</Fragment>,
|
|
130
|
-
);
|
|
218
|
+
if (!activeMatchFound) {
|
|
219
|
+
appendFallback(rendered, routeName, nodeName, slots);
|
|
131
220
|
}
|
|
132
221
|
|
|
133
222
|
return { rendered, activeMatchFound };
|
|
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
|
|
|
3
3
|
export interface RouteViewProps {
|
|
4
4
|
/** Route tree node name to subscribe to. "" for root. */
|
|
5
5
|
readonly nodeName: string;
|
|
6
|
-
/** <RouteView.Match
|
|
6
|
+
/** <RouteView.Match>, <RouteView.Self>, and <RouteView.NotFound> elements. */
|
|
7
7
|
readonly children: ReactNode;
|
|
8
8
|
}
|
|
9
9
|
|
|
@@ -20,6 +20,18 @@ export interface MatchProps {
|
|
|
20
20
|
readonly children: ReactNode;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
export interface SelfProps {
|
|
24
|
+
/**
|
|
25
|
+
* Fallback content to show while children are suspended.
|
|
26
|
+
*
|
|
27
|
+
* Symmetric with `<RouteView.Match fallback>` — wraps children in
|
|
28
|
+
* `<Suspense>` when defined.
|
|
29
|
+
*/
|
|
30
|
+
readonly fallback?: ReactNode;
|
|
31
|
+
/** Content to render when the active route name equals the parent RouteView's nodeName. */
|
|
32
|
+
readonly children: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
|
|
23
35
|
export interface NotFoundProps {
|
|
24
36
|
/** Content to render on UNKNOWN_ROUTE. */
|
|
25
37
|
readonly children: ReactNode;
|
package/src/index.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Link-DQaD7Qrc.js","names":["shallowEqual","EMPTY_PARAMS","EMPTY_OPTIONS","useRouter","useIsActiveRoute","buildHref","shouldNavigate","buildActiveClassName"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\n\nimport { EMPTY_PARAMS, EMPTY_OPTIONS } from \"../constants\";\nimport {\n shouldNavigate,\n buildHref,\n buildActiveClassName,\n shallowEqual,\n} from \"../dom-utils/index.js\";\nimport { useIsActiveRoute } from \"../hooks/useIsActiveRoute\";\nimport { useRouter } from \"../hooks/useRouter\";\n\nimport type { LinkProps } from \"../types\";\nimport type { FC, MouseEvent } from \"react\";\n\nfunction areLinkPropsEqual(\n prev: Readonly<LinkProps>,\n next: Readonly<LinkProps>,\n): boolean {\n return (\n prev.routeName === next.routeName &&\n prev.className === next.className &&\n prev.activeClassName === next.activeClassName &&\n prev.activeStrict === next.activeStrict &&\n prev.ignoreQueryParams === next.ignoreQueryParams &&\n prev.onClick === next.onClick &&\n prev.target === next.target &&\n prev.style === next.style &&\n prev.children === next.children &&\n shallowEqual(prev.routeParams, next.routeParams) &&\n shallowEqual(prev.routeOptions, next.routeOptions)\n );\n}\n\nconst LinkImpl: FC<LinkProps> = ({\n routeName,\n routeParams = EMPTY_PARAMS,\n routeOptions = EMPTY_OPTIONS,\n className,\n activeClassName = \"active\",\n activeStrict = false,\n ignoreQueryParams = true,\n onClick,\n target,\n children,\n ...props\n}) => {\n // memo + areLinkPropsEqual guarantees that on bail-out the component does\n // not render; on render, routeParams/routeOptions either changed reference\n // (true change) or comparator failed (e.g., BigInt fallback to identity),\n // so they're safe to use directly in hook deps.\n\n const router = useRouter();\n\n const isActive = useIsActiveRoute(\n routeName,\n routeParams,\n activeStrict,\n ignoreQueryParams,\n );\n\n const href = useMemo(\n () => buildHref(router, routeName, routeParams),\n [router, routeName, routeParams],\n );\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLAnchorElement>) => {\n if (onClick) {\n onClick(evt);\n\n if (evt.defaultPrevented) {\n return;\n }\n }\n\n if (!shouldNavigate(evt.nativeEvent) || target === \"_blank\") {\n return;\n }\n\n evt.preventDefault();\n router.navigate(routeName, routeParams, routeOptions).catch(() => {});\n },\n [onClick, target, router, routeName, routeParams, routeOptions],\n );\n\n const finalClassName = buildActiveClassName(\n isActive,\n activeClassName,\n className,\n );\n\n return (\n <a {...props} href={href} className={finalClassName} onClick={handleClick}>\n {children}\n </a>\n );\n};\n\nexport const Link: FC<LinkProps> = memo(LinkImpl, areLinkPropsEqual);\n\nLink.displayName = \"Link\";\n"],"mappings":"sGAeA,SAAS,EACP,EACA,EACS,CACT,OACE,EAAK,YAAc,EAAK,WACxB,EAAK,YAAc,EAAK,WACxB,EAAK,kBAAoB,EAAK,iBAC9B,EAAK,eAAiB,EAAK,cAC3B,EAAK,oBAAsB,EAAK,mBAChC,EAAK,UAAY,EAAK,SACtB,EAAK,SAAW,EAAK,QACrB,EAAK,QAAU,EAAK,OACpB,EAAK,WAAa,EAAK,UACvBA,EAAAA,EAAa,EAAK,YAAa,EAAK,YAAY,EAChDA,EAAAA,EAAa,EAAK,aAAc,EAAK,aAAa,CAqEtD,MAAa,GAAA,EAAA,EAAA,OAjEoB,CAC/B,YACA,cAAcC,EAAAA,EACd,eAAeC,EAAAA,EACf,YACA,kBAAkB,SAClB,eAAe,GACf,oBAAoB,GACpB,UACA,SACA,WACA,GAAG,KACC,CAMJ,IAAM,EAASC,EAAAA,GAAW,CAEpB,EAAWC,EAAAA,EACf,EACA,EACA,EACA,EACD,CAEK,GAAA,EAAA,EAAA,aACEC,EAAAA,EAAU,EAAQ,EAAW,EAAY,CAC/C,CAAC,EAAQ,EAAW,EAAY,CACjC,CAEK,GAAA,EAAA,EAAA,aACH,GAAuC,CAClC,IACF,EAAQ,EAAI,CAER,EAAI,mBAKN,CAACC,EAAAA,EAAe,EAAI,YAAY,EAAI,IAAW,WAInD,EAAI,gBAAgB,CACpB,EAAO,SAAS,EAAW,EAAa,EAAa,CAAC,UAAY,GAAG,GAEvE,CAAC,EAAS,EAAQ,EAAQ,EAAW,EAAa,EAAa,CAChE,CAEK,EAAiBC,EAAAA,EACrB,EACA,EACA,EACD,CAED,OACE,EAAA,EAAA,KAAC,IAAD,CAAG,GAAI,EAAa,OAAM,UAAW,EAAgB,QAAS,EAC3D,WACC,CAAA,EAI0C,EAAkB,CAEpE,EAAK,YAAc"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
let e=require(`react`),t=require(`@real-router/core`),n=require(`@real-router/route-utils`),r=require(`react/jsx-runtime`),i=require(`@real-router/sources`),a=require(`@real-router/core/api`);const o=(0,e.createContext)(null),s=(0,e.createContext)(null),c=(0,e.createContext)(null),l=()=>{let t=(0,e.useContext)(s);if(!t)throw Error(`useRouter must be used within a RouterProvider`);return t};function u(n){let r=l(),a=(0,e.useMemo)(()=>(0,i.createRouteNodeSource)(r,n),[r,n]),o=(0,e.useSyncExternalStore)(a.subscribe,a.getSnapshot,a.getSnapshot),s=(0,t.getNavigator)(r);return(0,e.useMemo)(()=>({navigator:s,route:o.route,previousRoute:o.previousRoute}),[s,o])}const d=Object.freeze({}),f=Object.freeze({}),p=`data-real-router-announcer`;function m(e,t){let n=t?.prefix??`Navigated to `,r=t?.getAnnouncementText,i=!0,a=!1,o=!1,s=``,c=null,l,u=h(),d=(e,t)=>{s=e,clearTimeout(l),u.textContent=e,l=setTimeout(()=>{u.textContent=``,s=``},7e3),v(t)},f=setTimeout(()=>{if(a=!0,c!==null&&!o){let e=c;c=null,d(e,document.querySelector(`h1`))}},100),p=e.subscribe(({route:e})=>{if(i){i=!1;return}requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(o)return;let t=document.querySelector(`h1`),i=_(e,n,r,t);if(!(!i||i===s)){if(!a){c=i;return}d(i,t)}})})});return{destroy(){o=!0,p(),clearTimeout(l),clearTimeout(f),g()}}}function h(){let e=document.querySelector(`[${p}]`);if(e)return e;let t=document.createElement(`div`);return t.setAttribute(`style`,`position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0`),t.setAttribute(`aria-live`,`assertive`),t.setAttribute(`aria-atomic`,`true`),t.setAttribute(p,``),document.body.prepend(t),t}function g(){document.querySelector(`[${p}]`)?.remove()}function _(e,t,n,r){if(n)return n(e);let i=r?.textContent.trim()??``,a=e.name.startsWith(`@@`)?``:e.name;return`${t}${i||document.title||a||globalThis.location.pathname}`}function v(e){e&&(e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`-1`),e.focus({preventScroll:!0}))}function y(e){return e.button===0&&!e.metaKey&&!e.altKey&&!e.ctrlKey&&!e.shiftKey}function b(e,t,n){try{let r=e.buildUrl;if(r){let e=r(t,n);if(e!==void 0)return e}return e.buildPath(t,n)}catch{console.error(`[real-router] Route "${t}" is not defined. The element will render without an href attribute.`);return}}function x(e){return e?e.match(/\S+/g)??[]:[]}function S(e,t,n){if(e&&t){let e=x(t);if(e.length===0)return n??void 0;if(!n)return e.join(` `);let r=x(n),i=new Set(r);for(let t of e)i.has(t)||(i.add(t),r.push(t));return r.join(` `)}return n??void 0}function C(e,t){if(Object.is(e,t))return!0;if(!e||!t)return!1;let n=Object.keys(e);if(n.length!==Object.keys(t).length)return!1;let r=e,i=t;for(let e of n)if(!Object.is(r[e],i[e]))return!1;return!0}function w(t,n,r=!1,a=!0){let o=(0,i.createActiveRouteSource)(l(),t,n,{strict:r,ignoreQueryParams:a});return(0,e.useSyncExternalStore)(o.subscribe,o.getSnapshot,o.getSnapshot)}function T({children:t,fallback:n,onError:a}){let o=(0,i.createDismissableError)(l()),s=(0,e.useSyncExternalStore)(o.subscribe,o.getSnapshot,o.getSnapshot),c=(0,e.useRef)(a);return c.current=a,(0,e.useEffect)(()=>{s.error&&c.current?.(s.error,s.toRoute,s.fromRoute)},[s.version]),(0,r.jsxs)(r.Fragment,{children:[t,s.error?n(s.error,s.resetError):null]})}const E=()=>{let t=(0,e.useContext)(c);if(!t)throw Error(`useNavigator must be used within a RouterProvider`);return t},D=()=>(0,n.getRouteUtils)((0,a.getPluginApi)(l()).getTree()),O=()=>{let t=(0,e.useContext)(o);if(!t)throw Error(`useRoute must be used within a RouteProvider`);return t};function k(){let t=(0,i.getTransitionSource)(l());return(0,e.useSyncExternalStore)(t.subscribe,t.getSnapshot,t.getSnapshot)}const A=({router:n,children:a,announceNavigation:l})=>{(0,e.useEffect)(()=>{if(!l)return;let e=m(n);return()=>{e.destroy()}},[l,n]);let u=(0,e.useMemo)(()=>(0,t.getNavigator)(n),[n]),d=(0,e.useMemo)(()=>(0,i.createRouteSource)(n),[n]),f=(0,e.useSyncExternalStore)(d.subscribe,d.getSnapshot,d.getSnapshot),p=(0,e.useMemo)(()=>({navigator:u,route:f.route,previousRoute:f.previousRoute}),[u,f]);return(0,r.jsx)(s.Provider,{value:n,children:(0,r.jsx)(c.Provider,{value:u,children:(0,r.jsx)(o.Provider,{value:p,children:a})})})};Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`h`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`m`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return C}});
|
|
2
|
-
//# sourceMappingURL=RouterProvider-BOdfon42.js.map
|