@tanstack/react-router 1.104.1 → 1.105.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/dist/cjs/Asset.cjs +41 -0
- package/dist/cjs/Asset.cjs.map +1 -0
- package/dist/cjs/Asset.d.cts +2 -0
- package/dist/cjs/HeadContent.cjs +138 -0
- package/dist/cjs/HeadContent.cjs.map +1 -0
- package/dist/cjs/HeadContent.d.cts +7 -0
- package/dist/cjs/Matches.cjs.map +1 -1
- package/dist/cjs/Matches.d.cts +1 -0
- package/dist/cjs/Scripts.cjs +50 -0
- package/dist/cjs/Scripts.cjs.map +1 -0
- package/dist/cjs/Scripts.d.cts +1 -0
- package/dist/cjs/index.cjs +6 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +3 -0
- package/dist/cjs/route.cjs.map +1 -1
- package/dist/cjs/route.d.cts +10 -7
- package/dist/cjs/router.cjs +19 -13
- package/dist/cjs/router.cjs.map +1 -1
- package/dist/esm/Asset.d.ts +2 -0
- package/dist/esm/Asset.js +41 -0
- package/dist/esm/Asset.js.map +1 -0
- package/dist/esm/HeadContent.d.ts +7 -0
- package/dist/esm/HeadContent.js +122 -0
- package/dist/esm/HeadContent.js.map +1 -0
- package/dist/esm/Matches.d.ts +1 -0
- package/dist/esm/Matches.js.map +1 -1
- package/dist/esm/Scripts.d.ts +1 -0
- package/dist/esm/Scripts.js +50 -0
- package/dist/esm/Scripts.js.map +1 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/route.d.ts +10 -7
- package/dist/esm/route.js.map +1 -1
- package/dist/esm/router.js +19 -13
- package/dist/esm/router.js.map +1 -1
- package/package.json +1 -1
- package/src/Asset.tsx +40 -0
- package/src/HeadContent.tsx +151 -0
- package/src/Matches.tsx +1 -0
- package/src/Scripts.tsx +64 -0
- package/src/index.tsx +4 -0
- package/src/route.ts +71 -32
- package/src/router.ts +14 -8
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
function Asset({ tag, attrs, children }) {
|
|
3
|
+
switch (tag) {
|
|
4
|
+
case "title":
|
|
5
|
+
return /* @__PURE__ */ jsx("title", { ...attrs, suppressHydrationWarning: true, children });
|
|
6
|
+
case "meta":
|
|
7
|
+
return /* @__PURE__ */ jsx("meta", { ...attrs, suppressHydrationWarning: true });
|
|
8
|
+
case "link":
|
|
9
|
+
return /* @__PURE__ */ jsx("link", { ...attrs, suppressHydrationWarning: true });
|
|
10
|
+
case "style":
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
"style",
|
|
13
|
+
{
|
|
14
|
+
...attrs,
|
|
15
|
+
dangerouslySetInnerHTML: { __html: children }
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
case "script":
|
|
19
|
+
if (attrs && attrs.src) {
|
|
20
|
+
return /* @__PURE__ */ jsx("script", { ...attrs, suppressHydrationWarning: true });
|
|
21
|
+
}
|
|
22
|
+
if (typeof children === "string")
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
"script",
|
|
25
|
+
{
|
|
26
|
+
...attrs,
|
|
27
|
+
dangerouslySetInnerHTML: {
|
|
28
|
+
__html: children
|
|
29
|
+
},
|
|
30
|
+
suppressHydrationWarning: true
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
return null;
|
|
34
|
+
default:
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
export {
|
|
39
|
+
Asset
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=Asset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import type { RouterManagedTag } from '@tanstack/router-core'\n\nexport function Asset({ tag, attrs, children }: RouterManagedTag): any {\n switch (tag) {\n case 'title':\n return (\n <title {...attrs} suppressHydrationWarning>\n {children}\n </title>\n )\n case 'meta':\n return <meta {...attrs} suppressHydrationWarning />\n case 'link':\n return <link {...attrs} suppressHydrationWarning />\n case 'style':\n return (\n <style\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children as any }}\n />\n )\n case 'script':\n if ((attrs as any) && (attrs as any).src) {\n return <script {...attrs} suppressHydrationWarning />\n }\n if (typeof children === 'string')\n return (\n <script\n {...attrs}\n dangerouslySetInnerHTML={{\n __html: children,\n }}\n suppressHydrationWarning\n />\n )\n return null\n default:\n return null\n }\n}\n"],"names":[],"mappings":";AAEO,SAAS,MAAM,EAAE,KAAK,OAAO,YAAmC;AACrE,UAAQ,KAAK;AAAA,IACX,KAAK;AACH,iCACG,SAAO,EAAA,GAAG,OAAO,0BAAwB,MACvC,UACH;AAAA,IAEJ,KAAK;AACH,aAAQ,oBAAA,QAAA,EAAM,GAAG,OAAO,0BAAwB,MAAC;AAAA,IACnD,KAAK;AACH,aAAQ,oBAAA,QAAA,EAAM,GAAG,OAAO,0BAAwB,MAAC;AAAA,IACnD,KAAK;AAED,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,yBAAyB,EAAE,QAAQ,SAAgB;AAAA,QAAA;AAAA,MACrD;AAAA,IAEJ,KAAK;AACE,UAAA,SAAkB,MAAc,KAAK;AACxC,eAAQ,oBAAA,UAAA,EAAQ,GAAG,OAAO,0BAAwB,MAAC;AAAA,MAAA;AAErD,UAAI,OAAO,aAAa;AAEpB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG;AAAA,YACJ,yBAAyB;AAAA,cACvB,QAAQ;AAAA,YACV;AAAA,YACA,0BAAwB;AAAA,UAAA;AAAA,QAC1B;AAEG,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EAAA;AAEb;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RouterManagedTag } from '@tanstack/router-core';
|
|
2
|
+
export declare const useTags: () => RouterManagedTag[];
|
|
3
|
+
/**
|
|
4
|
+
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
|
|
5
|
+
* It should be rendered in the `<head>` of your document.
|
|
6
|
+
*/
|
|
7
|
+
export declare function HeadContent(): import("react/jsx-runtime").JSX.Element[];
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
import { Asset } from "./Asset.js";
|
|
4
|
+
import { useRouter } from "./useRouter.js";
|
|
5
|
+
import { useRouterState } from "./useRouterState.js";
|
|
6
|
+
const useTags = () => {
|
|
7
|
+
const router = useRouter();
|
|
8
|
+
const routeMeta = useRouterState({
|
|
9
|
+
select: (state) => {
|
|
10
|
+
return state.matches.map((match) => match.meta).filter(Boolean);
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
const meta = React.useMemo(() => {
|
|
14
|
+
const resultMeta = [];
|
|
15
|
+
const metaByAttribute = {};
|
|
16
|
+
let title;
|
|
17
|
+
[...routeMeta].reverse().forEach((metas) => {
|
|
18
|
+
[...metas].reverse().forEach((m) => {
|
|
19
|
+
if (!m) return;
|
|
20
|
+
if (m.title) {
|
|
21
|
+
if (!title) {
|
|
22
|
+
title = {
|
|
23
|
+
tag: "title",
|
|
24
|
+
children: m.title
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
} else {
|
|
28
|
+
const attribute = m.name ?? m.property;
|
|
29
|
+
if (attribute) {
|
|
30
|
+
if (metaByAttribute[attribute]) {
|
|
31
|
+
return;
|
|
32
|
+
} else {
|
|
33
|
+
metaByAttribute[attribute] = true;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
resultMeta.push({
|
|
37
|
+
tag: "meta",
|
|
38
|
+
attrs: {
|
|
39
|
+
...m
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
if (title) {
|
|
46
|
+
resultMeta.push(title);
|
|
47
|
+
}
|
|
48
|
+
resultMeta.reverse();
|
|
49
|
+
return resultMeta;
|
|
50
|
+
}, [routeMeta]);
|
|
51
|
+
const links = useRouterState({
|
|
52
|
+
select: (state) => state.matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
|
|
53
|
+
tag: "link",
|
|
54
|
+
attrs: {
|
|
55
|
+
...link
|
|
56
|
+
}
|
|
57
|
+
})),
|
|
58
|
+
structuralSharing: true
|
|
59
|
+
});
|
|
60
|
+
const preloadMeta = useRouterState({
|
|
61
|
+
select: (state) => {
|
|
62
|
+
const preloadMeta2 = [];
|
|
63
|
+
state.matches.map((match) => router.looseRoutesById[match.routeId]).forEach(
|
|
64
|
+
(route) => {
|
|
65
|
+
var _a, _b, _c, _d;
|
|
66
|
+
return (_d = (_c = (_b = (_a = router.ssr) == null ? void 0 : _a.manifest) == null ? void 0 : _b.routes[route.id]) == null ? void 0 : _c.preloads) == null ? void 0 : _d.filter(Boolean).forEach((preload) => {
|
|
67
|
+
preloadMeta2.push({
|
|
68
|
+
tag: "link",
|
|
69
|
+
attrs: {
|
|
70
|
+
rel: "modulepreload",
|
|
71
|
+
href: preload
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
return preloadMeta2;
|
|
78
|
+
},
|
|
79
|
+
structuralSharing: true
|
|
80
|
+
});
|
|
81
|
+
const headScripts = useRouterState({
|
|
82
|
+
select: (state) => state.matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
|
|
83
|
+
tag: "script",
|
|
84
|
+
attrs: {
|
|
85
|
+
...script
|
|
86
|
+
},
|
|
87
|
+
children
|
|
88
|
+
})),
|
|
89
|
+
structuralSharing: true
|
|
90
|
+
});
|
|
91
|
+
return uniqBy(
|
|
92
|
+
[
|
|
93
|
+
...meta,
|
|
94
|
+
...preloadMeta,
|
|
95
|
+
...links,
|
|
96
|
+
...headScripts
|
|
97
|
+
],
|
|
98
|
+
(d) => {
|
|
99
|
+
return JSON.stringify(d);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
function HeadContent() {
|
|
104
|
+
const tags = useTags();
|
|
105
|
+
return tags.map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}` }));
|
|
106
|
+
}
|
|
107
|
+
function uniqBy(arr, fn) {
|
|
108
|
+
const seen = /* @__PURE__ */ new Set();
|
|
109
|
+
return arr.filter((item) => {
|
|
110
|
+
const key = fn(item);
|
|
111
|
+
if (seen.has(key)) {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
seen.add(key);
|
|
115
|
+
return true;
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
export {
|
|
119
|
+
HeadContent,
|
|
120
|
+
useTags
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=HeadContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\nexport const useTags = () => {\n const router = useRouter()\n\n const routeMeta = useRouterState({\n select: (state) => {\n return state.matches.map((match) => match.meta!).filter(Boolean)\n },\n })\n\n const meta: Array<RouterManagedTag> = React.useMemo(() => {\n const resultMeta: Array<RouterManagedTag> = []\n const metaByAttribute: Record<string, true> = {}\n let title: RouterManagedTag | undefined\n ;[...routeMeta].reverse().forEach((metas) => {\n ;[...metas].reverse().forEach((m) => {\n if (!m) return\n\n if (m.title) {\n if (!title) {\n title = {\n tag: 'title',\n children: m.title,\n }\n }\n } else {\n const attribute = m.name ?? m.property\n if (attribute) {\n if (metaByAttribute[attribute]) {\n return\n } else {\n metaByAttribute[attribute] = true\n }\n }\n\n resultMeta.push({\n tag: 'meta',\n attrs: {\n ...m,\n },\n })\n }\n })\n })\n\n if (title) {\n resultMeta.push(title)\n }\n\n resultMeta.reverse()\n\n return resultMeta\n }, [routeMeta])\n\n const links = useRouterState({\n select: (state) =>\n state.matches\n .map((match) => match.links!)\n .filter(Boolean)\n .flat(1)\n .map((link) => ({\n tag: 'link',\n attrs: {\n ...link,\n },\n })) as Array<RouterManagedTag>,\n structuralSharing: true as any,\n })\n\n const preloadMeta = useRouterState({\n select: (state) => {\n const preloadMeta: Array<RouterManagedTag> = []\n\n state.matches\n .map((match) => router.looseRoutesById[match.routeId]!)\n .forEach((route) =>\n router.ssr?.manifest?.routes[route.id]?.preloads\n ?.filter(Boolean)\n .forEach((preload) => {\n preloadMeta.push({\n tag: 'link',\n attrs: {\n rel: 'modulepreload',\n href: preload,\n },\n })\n }),\n )\n\n return preloadMeta\n },\n structuralSharing: true as any,\n })\n\n const headScripts = useRouterState({\n select: (state) =>\n (\n state.matches\n .map((match) => match.headScripts!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...script }) => ({\n tag: 'script',\n attrs: {\n ...script,\n },\n children,\n })),\n structuralSharing: true as any,\n })\n\n return uniqBy(\n [\n ...meta,\n ...preloadMeta,\n ...links,\n ...headScripts,\n ] as Array<RouterManagedTag>,\n (d) => {\n return JSON.stringify(d)\n },\n )\n}\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * It should be rendered in the `<head>` of your document.\n */\nexport function HeadContent() {\n const tags = useTags()\n return tags.map((tag) => (\n <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} />\n ))\n}\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n const seen = new Set<string>()\n return arr.filter((item) => {\n const key = fn(item)\n if (seen.has(key)) {\n return false\n }\n seen.add(key)\n return true\n })\n}\n"],"names":["preloadMeta"],"mappings":"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"}
|
package/dist/esm/Matches.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export interface RouteMatch<out TRouteId, out TFullPath, out TAllParams, out TFu
|
|
|
38
38
|
meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>;
|
|
39
39
|
links?: Array<React.JSX.IntrinsicElements['link'] | undefined>;
|
|
40
40
|
scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>;
|
|
41
|
+
headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>;
|
|
41
42
|
headers?: Record<string, string>;
|
|
42
43
|
globalNotFound?: boolean;
|
|
43
44
|
staticData: StaticDataRouteOption;
|
package/dist/esm/Matches.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { Transitioner } from './Transitioner'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type {\n StructuralSharingOption,\n ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRoute, ReactNode } from './route'\nimport type {\n ControlledPromise,\n DeepPartial,\n NoInfer,\n ResolveRelativePath,\n StaticDataRouteOption,\n} from '@tanstack/router-core'\nimport type { AnyRouter, RegisteredRouter, RouterState } from './router'\nimport type {\n MakeOptionalPathParams,\n MakeOptionalSearchParams,\n MaskOptions,\n ResolveRoute,\n ToSubOptionsProps,\n} from './link'\nimport type {\n AllContext,\n AllLoaderData,\n AllParams,\n FullSearchSchema,\n ParseRoute,\n RouteById,\n RouteByPath,\n RouteIds,\n} from './routeInfo'\n\nexport type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<\n TRoute['types']['id'],\n TRoute['types']['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n>\n\nexport interface RouteMatch<\n out TRouteId,\n out TFullPath,\n out TAllParams,\n out TFullSearchSchema,\n out TLoaderData,\n out TAllContext,\n out TLoaderDeps,\n> {\n id: string\n routeId: TRouteId\n fullPath: TFullPath\n index: number\n pathname: string\n params: TAllParams\n _strictParams: TAllParams\n status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n isFetching: false | 'beforeLoad' | 'loader'\n error: unknown\n paramsError: unknown\n searchError: unknown\n updatedAt: number\n loadPromise?: ControlledPromise<void>\n beforeLoadPromise?: ControlledPromise<void>\n loaderPromise?: ControlledPromise<void>\n loaderData?: TLoaderData\n __routeContext: Record<string, unknown>\n __beforeLoadContext: Record<string, unknown>\n context: TAllContext\n search: TFullSearchSchema\n _strictSearch: TFullSearchSchema\n fetchCount: number\n abortController: AbortController\n cause: 'preload' | 'enter' | 'stay'\n loaderDeps: TLoaderDeps\n preload: boolean\n invalid: boolean\n meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>\n links?: Array<React.JSX.IntrinsicElements['link'] | undefined>\n scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>\n headers?: Record<string, string>\n globalNotFound?: boolean\n staticData: StaticDataRouteOption\n minPendingPromise?: ControlledPromise<void>\n pendingTimeout?: ReturnType<typeof setTimeout>\n}\n\nexport type MakeRouteMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TRouteId = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n> = RouteMatch<\n TRouteId,\n RouteById<TRouteTree, TRouteId>['types']['fullPath'],\n TStrict extends false\n ? AllParams<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allParams'],\n TStrict extends false\n ? FullSearchSchema<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],\n TStrict extends false\n ? AllLoaderData<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['loaderData'],\n TStrict extends false\n ? AllContext<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allContext'],\n RouteById<TRouteTree, TRouteId>['types']['loaderDeps']\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n const router = useRouter()\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n // Do not render a root Suspense during SSR or hydrating from SSR\n const ResolvedSuspense =\n router.isServer || (typeof document !== 'undefined' && router.clientSsr)\n ? SafeFragment\n : React.Suspense\n\n const inner = (\n <ResolvedSuspense fallback={pendingElement}>\n <Transitioner />\n <MatchesInner />\n </ResolvedSuspense>\n )\n\n return router.options.InnerWrap ? (\n <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n ) : (\n inner\n )\n}\n\nfunction MatchesInner() {\n const matchId = useRouterState({\n select: (s) => {\n return s.matches[0]?.id\n },\n })\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n return (\n <matchContext.Provider value={matchId}>\n <CatchBoundary\n getResetKey={() => resetKey}\n errorComponent={ErrorComponent}\n onCatch={(error) => {\n warning(\n false,\n `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n )\n warning(false, error.message || error.toString())\n }}\n >\n {matchId ? <Match matchId={matchId} /> : null}\n </CatchBoundary>\n </matchContext.Provider>\n )\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = ToSubOptionsProps<TRouter, TFrom, TTo> &\n DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &\n DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &\n MaskOptions<TRouter, TMaskFrom, TMaskTo> &\n MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n const router = useRouter()\n\n useRouterState({\n select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],\n structuralSharing: true as any,\n })\n\n return React.useCallback(\n <\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n >(\n opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {\n const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n return router.matchRoute(rest as any, {\n pending,\n caseSensitive,\n fuzzy,\n includeSearch,\n })\n },\n [router],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | ((\n params?: RouteByPath<\n TRouter['routeTree'],\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n}\n\nexport function MatchRoute<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any) as boolean\n\n if (typeof props.children === 'function') {\n return (props.children as any)(params)\n }\n\n return params ? props.children : null\n}\n\nexport type MakeRouteMatchUnion<\n TRouter extends AnyRouter = RegisteredRouter,\n TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n ? RouteMatch<\n TRoute['id'],\n TRoute['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n >\n : never\n\nexport interface UseMatchesBaseOptions<\n TRouter extends AnyRouter,\n TSelected,\n TStructuralSharing,\n> {\n select?: (\n matches: Array<MakeRouteMatchUnion<TRouter>>,\n ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n}\n\nexport type UseMatchesResult<\n TRouter extends AnyRouter,\n TSelected,\n> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected\n\nexport function useMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n return useRouterState({\n select: (state: RouterState<TRouter['routeTree']>) => {\n const matches = state.matches\n return opts?.select\n ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)\n : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any) as UseMatchesResult<TRouter, TSelected>\n}\n\nexport function useParentMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n 0,\n matches.findIndex((d) => d.id === contextMatchId),\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n\nexport function useChildMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n matches.findIndex((d) => d.id === contextMatchId) + 1,\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Matches.js","sources":["../../src/Matches.tsx"],"sourcesContent":["import * as React from 'react'\nimport warning from 'tiny-warning'\nimport { CatchBoundary, ErrorComponent } from './CatchBoundary'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport { Transitioner } from './Transitioner'\nimport { matchContext } from './matchContext'\nimport { Match } from './Match'\nimport { SafeFragment } from './SafeFragment'\nimport type {\n StructuralSharingOption,\n ValidateSelected,\n} from './structuralSharing'\nimport type { AnyRoute, ReactNode } from './route'\nimport type {\n ControlledPromise,\n DeepPartial,\n NoInfer,\n ResolveRelativePath,\n StaticDataRouteOption,\n} from '@tanstack/router-core'\nimport type { AnyRouter, RegisteredRouter, RouterState } from './router'\nimport type {\n MakeOptionalPathParams,\n MakeOptionalSearchParams,\n MaskOptions,\n ResolveRoute,\n ToSubOptionsProps,\n} from './link'\nimport type {\n AllContext,\n AllLoaderData,\n AllParams,\n FullSearchSchema,\n ParseRoute,\n RouteById,\n RouteByPath,\n RouteIds,\n} from './routeInfo'\n\nexport type MakeRouteMatchFromRoute<TRoute extends AnyRoute> = RouteMatch<\n TRoute['types']['id'],\n TRoute['types']['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n>\n\nexport interface RouteMatch<\n out TRouteId,\n out TFullPath,\n out TAllParams,\n out TFullSearchSchema,\n out TLoaderData,\n out TAllContext,\n out TLoaderDeps,\n> {\n id: string\n routeId: TRouteId\n fullPath: TFullPath\n index: number\n pathname: string\n params: TAllParams\n _strictParams: TAllParams\n status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'\n isFetching: false | 'beforeLoad' | 'loader'\n error: unknown\n paramsError: unknown\n searchError: unknown\n updatedAt: number\n loadPromise?: ControlledPromise<void>\n beforeLoadPromise?: ControlledPromise<void>\n loaderPromise?: ControlledPromise<void>\n loaderData?: TLoaderData\n __routeContext: Record<string, unknown>\n __beforeLoadContext: Record<string, unknown>\n context: TAllContext\n search: TFullSearchSchema\n _strictSearch: TFullSearchSchema\n fetchCount: number\n abortController: AbortController\n cause: 'preload' | 'enter' | 'stay'\n loaderDeps: TLoaderDeps\n preload: boolean\n invalid: boolean\n meta?: Array<React.JSX.IntrinsicElements['meta'] | undefined>\n links?: Array<React.JSX.IntrinsicElements['link'] | undefined>\n scripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>\n headScripts?: Array<React.JSX.IntrinsicElements['script'] | undefined>\n headers?: Record<string, string>\n globalNotFound?: boolean\n staticData: StaticDataRouteOption\n minPendingPromise?: ControlledPromise<void>\n pendingTimeout?: ReturnType<typeof setTimeout>\n}\n\nexport type MakeRouteMatch<\n TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],\n TRouteId = RouteIds<TRouteTree>,\n TStrict extends boolean = true,\n> = RouteMatch<\n TRouteId,\n RouteById<TRouteTree, TRouteId>['types']['fullPath'],\n TStrict extends false\n ? AllParams<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allParams'],\n TStrict extends false\n ? FullSearchSchema<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema'],\n TStrict extends false\n ? AllLoaderData<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['loaderData'],\n TStrict extends false\n ? AllContext<TRouteTree>\n : RouteById<TRouteTree, TRouteId>['types']['allContext'],\n RouteById<TRouteTree, TRouteId>['types']['loaderDeps']\n>\n\nexport type AnyRouteMatch = RouteMatch<any, any, any, any, any, any, any>\n\nexport function Matches() {\n const router = useRouter()\n\n const pendingElement = router.options.defaultPendingComponent ? (\n <router.options.defaultPendingComponent />\n ) : null\n\n // Do not render a root Suspense during SSR or hydrating from SSR\n const ResolvedSuspense =\n router.isServer || (typeof document !== 'undefined' && router.clientSsr)\n ? SafeFragment\n : React.Suspense\n\n const inner = (\n <ResolvedSuspense fallback={pendingElement}>\n <Transitioner />\n <MatchesInner />\n </ResolvedSuspense>\n )\n\n return router.options.InnerWrap ? (\n <router.options.InnerWrap>{inner}</router.options.InnerWrap>\n ) : (\n inner\n )\n}\n\nfunction MatchesInner() {\n const matchId = useRouterState({\n select: (s) => {\n return s.matches[0]?.id\n },\n })\n\n const resetKey = useRouterState({\n select: (s) => s.loadedAt,\n })\n\n return (\n <matchContext.Provider value={matchId}>\n <CatchBoundary\n getResetKey={() => resetKey}\n errorComponent={ErrorComponent}\n onCatch={(error) => {\n warning(\n false,\n `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,\n )\n warning(false, error.message || error.toString())\n }}\n >\n {matchId ? <Match matchId={matchId} /> : null}\n </CatchBoundary>\n </matchContext.Provider>\n )\n}\n\nexport interface MatchRouteOptions {\n pending?: boolean\n caseSensitive?: boolean\n includeSearch?: boolean\n fuzzy?: boolean\n}\n\nexport type UseMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = ToSubOptionsProps<TRouter, TFrom, TTo> &\n DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &\n DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &\n MaskOptions<TRouter, TMaskFrom, TMaskTo> &\n MatchRouteOptions\n\nexport function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {\n const router = useRouter()\n\n useRouterState({\n select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],\n structuralSharing: true as any,\n })\n\n return React.useCallback(\n <\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n >(\n opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,\n ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {\n const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts\n\n return router.matchRoute(rest as any, {\n pending,\n caseSensitive,\n fuzzy,\n includeSearch,\n })\n },\n [router],\n )\n}\n\nexport type MakeMatchRouteOptions<\n TRouter extends AnyRouter = RegisteredRouter,\n TFrom extends string = string,\n TTo extends string | undefined = undefined,\n TMaskFrom extends string = TFrom,\n TMaskTo extends string = '',\n> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {\n // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns\n children?:\n | ((\n params?: RouteByPath<\n TRouter['routeTree'],\n ResolveRelativePath<TFrom, NoInfer<TTo>>\n >['types']['allParams'],\n ) => ReactNode)\n | React.ReactNode\n}\n\nexport function MatchRoute<\n TRouter extends AnyRouter = RegisteredRouter,\n const TFrom extends string = string,\n const TTo extends string | undefined = undefined,\n const TMaskFrom extends string = TFrom,\n const TMaskTo extends string = '',\n>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {\n const matchRoute = useMatchRoute()\n const params = matchRoute(props as any) as boolean\n\n if (typeof props.children === 'function') {\n return (props.children as any)(params)\n }\n\n return params ? props.children : null\n}\n\nexport type MakeRouteMatchUnion<\n TRouter extends AnyRouter = RegisteredRouter,\n TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,\n> = TRoute extends any\n ? RouteMatch<\n TRoute['id'],\n TRoute['fullPath'],\n TRoute['types']['allParams'],\n TRoute['types']['fullSearchSchema'],\n TRoute['types']['loaderData'],\n TRoute['types']['allContext'],\n TRoute['types']['loaderDeps']\n >\n : never\n\nexport interface UseMatchesBaseOptions<\n TRouter extends AnyRouter,\n TSelected,\n TStructuralSharing,\n> {\n select?: (\n matches: Array<MakeRouteMatchUnion<TRouter>>,\n ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>\n}\n\nexport type UseMatchesResult<\n TRouter extends AnyRouter,\n TSelected,\n> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected\n\nexport function useMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n return useRouterState({\n select: (state: RouterState<TRouter['routeTree']>) => {\n const matches = state.matches\n return opts?.select\n ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)\n : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any) as UseMatchesResult<TRouter, TSelected>\n}\n\nexport function useParentMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n 0,\n matches.findIndex((d) => d.id === contextMatchId),\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n\nexport function useChildMatches<\n TRouter extends AnyRouter = RegisteredRouter,\n TSelected = unknown,\n TStructuralSharing extends boolean = boolean,\n>(\n opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &\n StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,\n): UseMatchesResult<TRouter, TSelected> {\n const contextMatchId = React.useContext(matchContext)\n\n return useMatches({\n select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {\n matches = matches.slice(\n matches.findIndex((d) => d.id === contextMatchId) + 1,\n )\n return opts?.select ? opts.select(matches) : matches\n },\n structuralSharing: opts?.structuralSharing,\n } as any)\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Scripts: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
import { Asset } from "./Asset.js";
|
|
4
|
+
import { useRouterState } from "./useRouterState.js";
|
|
5
|
+
import { useRouter } from "./useRouter.js";
|
|
6
|
+
const Scripts = () => {
|
|
7
|
+
const router = useRouter();
|
|
8
|
+
const assetScripts = useRouterState({
|
|
9
|
+
select: (state) => {
|
|
10
|
+
var _a;
|
|
11
|
+
const assetScripts2 = [];
|
|
12
|
+
const manifest = (_a = router.ssr) == null ? void 0 : _a.manifest;
|
|
13
|
+
if (!manifest) {
|
|
14
|
+
return [];
|
|
15
|
+
}
|
|
16
|
+
state.matches.map((match) => router.looseRoutesById[match.routeId]).forEach(
|
|
17
|
+
(route) => {
|
|
18
|
+
var _a2, _b;
|
|
19
|
+
return (_b = (_a2 = manifest.routes[route.id]) == null ? void 0 : _a2.assets) == null ? void 0 : _b.filter((d) => d.tag === "script").forEach((asset) => {
|
|
20
|
+
assetScripts2.push({
|
|
21
|
+
tag: "script",
|
|
22
|
+
attrs: asset.attrs,
|
|
23
|
+
children: asset.children
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
return assetScripts2;
|
|
29
|
+
},
|
|
30
|
+
structuralSharing: true
|
|
31
|
+
});
|
|
32
|
+
const { scripts } = useRouterState({
|
|
33
|
+
select: (state) => ({
|
|
34
|
+
scripts: state.matches.map((match) => match.scripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
|
|
35
|
+
tag: "script",
|
|
36
|
+
attrs: {
|
|
37
|
+
...script,
|
|
38
|
+
suppressHydrationWarning: true
|
|
39
|
+
},
|
|
40
|
+
children
|
|
41
|
+
}))
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
const allScripts = [...scripts, ...assetScripts];
|
|
45
|
+
return /* @__PURE__ */ jsx(Fragment, { children: allScripts.map((asset, i) => /* @__PURE__ */ createElement(Asset, { ...asset, key: `tsr-scripts-${asset.tag}-${i}` })) });
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
Scripts
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=Scripts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scripts.js","sources":["../../src/Scripts.tsx"],"sourcesContent":["import { Asset } from './Asset'\nimport { useRouterState } from './useRouterState'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\nexport const Scripts = () => {\n const router = useRouter()\n\n const assetScripts = useRouterState({\n select: (state) => {\n const assetScripts: Array<RouterManagedTag> = []\n const manifest = router.ssr?.manifest\n\n if (!manifest) {\n return []\n }\n\n state.matches\n .map((match) => router.looseRoutesById[match.routeId]!)\n .forEach((route) =>\n manifest.routes[route.id]?.assets\n ?.filter((d) => d.tag === 'script')\n .forEach((asset) => {\n assetScripts.push({\n tag: 'script',\n attrs: asset.attrs,\n children: asset.children,\n } as any)\n }),\n )\n\n return assetScripts\n },\n structuralSharing: true as any,\n })\n\n const { scripts } = useRouterState({\n select: (state) => ({\n scripts: (\n state.matches\n .map((match) => match.scripts!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...script }) => ({\n tag: 'script',\n attrs: {\n ...script,\n suppressHydrationWarning: true,\n },\n children,\n })),\n }),\n })\n\n const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>\n\n return (\n <>\n {allScripts.map((asset, i) => (\n <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />\n ))}\n </>\n )\n}\n"],"names":["assetScripts","_a"],"mappings":";;;;;AAKO,MAAM,UAAU,MAAM;AAC3B,QAAM,SAAS,UAAU;AAEzB,QAAM,eAAe,eAAe;AAAA,IAClC,QAAQ,CAAC,UAAU;;AACjB,YAAMA,gBAAwC,CAAC;AACzC,YAAA,YAAW,YAAO,QAAP,mBAAY;AAE7B,UAAI,CAAC,UAAU;AACb,eAAO,CAAC;AAAA,MAAA;AAGJ,YAAA,QACH,IAAI,CAAC,UAAU,OAAO,gBAAgB,MAAM,OAAO,CAAE,EACrD;AAAA,QAAQ,CAAC,UACR;;AAAA,wBAAAC,MAAA,SAAS,OAAO,MAAM,EAAE,MAAxB,gBAAAA,IAA2B,WAA3B,mBACI,OAAO,CAAC,MAAM,EAAE,QAAQ,UACzB,QAAQ,CAAC,UAAU;AAClBD,0BAAa,KAAK;AAAA,cAChB,KAAK;AAAA,cACL,OAAO,MAAM;AAAA,cACb,UAAU,MAAM;AAAA,YAAA,CACV;AAAA,UACT;AAAA;AAAA,MACL;AAEKA,aAAAA;AAAAA,IACT;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAEK,QAAA,EAAE,QAAQ,IAAI,eAAe;AAAA,IACjC,QAAQ,CAAC,WAAW;AAAA,MAClB,SACE,MAAM,QACH,IAAI,CAAC,UAAU,MAAM,OAAQ,EAC7B,KAAK,CAAC,EACN,OAAO,OAAO,EACjB,IAAI,CAAC,EAAE,UAAU,GAAG,cAAc;AAAA,QAClC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,GAAG;AAAA,UACH,0BAA0B;AAAA,QAC5B;AAAA,QACA;AAAA,MAAA,EACA;AAAA,IACJ;AAAA,EAAA,CACD;AAED,QAAM,aAAa,CAAC,GAAG,SAAS,GAAG,YAAY;AAE/C,yCAEK,UAAW,WAAA,IAAI,CAAC,OAAO,oCACrB,OAAO,EAAA,GAAG,OAAO,KAAK,eAAe,MAAM,GAAG,IAAI,CAAC,IAAI,CACzD,GACH;AAEJ;"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -49,3 +49,6 @@ export { notFound, isNotFound, CatchNotFound, DefaultGlobalNotFound, } from './n
|
|
|
49
49
|
export type { NotFoundError } from './not-found.js';
|
|
50
50
|
export * from './typePrimitives.js';
|
|
51
51
|
export { ScriptOnce } from './ScriptOnce.js';
|
|
52
|
+
export { Asset } from './Asset.js';
|
|
53
|
+
export { HeadContent } from './HeadContent.js';
|
|
54
|
+
export { Scripts } from './Scripts.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -31,7 +31,11 @@ import { useCanGoBack } from "./useCanGoBack.js";
|
|
|
31
31
|
import { useLayoutEffect, useStableCallback } from "./utils.js";
|
|
32
32
|
import { CatchNotFound, DefaultGlobalNotFound, isNotFound, notFound } from "./not-found.js";
|
|
33
33
|
import { ScriptOnce } from "./ScriptOnce.js";
|
|
34
|
+
import { Asset } from "./Asset.js";
|
|
35
|
+
import { HeadContent } from "./HeadContent.js";
|
|
36
|
+
import { Scripts } from "./Scripts.js";
|
|
34
37
|
export {
|
|
38
|
+
Asset,
|
|
35
39
|
Await,
|
|
36
40
|
Block,
|
|
37
41
|
CatchBoundary,
|
|
@@ -40,6 +44,7 @@ export {
|
|
|
40
44
|
ErrorComponent,
|
|
41
45
|
FileRoute,
|
|
42
46
|
FileRouteLoader,
|
|
47
|
+
HeadContent,
|
|
43
48
|
LazyRoute,
|
|
44
49
|
Link,
|
|
45
50
|
Match,
|
|
@@ -56,6 +61,7 @@ export {
|
|
|
56
61
|
RouterContextProvider,
|
|
57
62
|
RouterProvider,
|
|
58
63
|
ScriptOnce,
|
|
64
|
+
Scripts,
|
|
59
65
|
ScrollRestoration,
|
|
60
66
|
SearchParamError,
|
|
61
67
|
TSR_DEFERRED_PROMISE,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/esm/route.d.ts
CHANGED
|
@@ -59,6 +59,12 @@ export type MakeRemountDepsOptionsUnion<TRouteTree extends AnyRoute = Registered
|
|
|
59
59
|
export interface BeforeLoadContextOptions<in out TParentRoute extends AnyRoute, in out TSearchValidator, in out TParams, in out TRouterContext, in out TRouteContextFn> extends ContextOptions<TParentRoute, TParams>, FullSearchSchemaOption<TParentRoute, TSearchValidator> {
|
|
60
60
|
context: Expand<BeforeLoadContextParameter<TParentRoute, TRouterContext, TRouteContextFn>>;
|
|
61
61
|
}
|
|
62
|
+
type AssetFnContextOptions<in out TRouteId, in out TFullPath, in out TParentRoute extends AnyRoute, in out TParams, in out TSearchValidator, in out TLoaderFn, in out TRouterContext, in out TRouteContextFn, in out TBeforeLoadFn, in out TLoaderDeps> = {
|
|
63
|
+
matches: Array<RouteMatch<TRouteId, TFullPath, ResolveAllParamsFromParent<TParentRoute, TParams>, ResolveFullSearchSchema<TParentRoute, TSearchValidator>, ResolveLoaderData<TLoaderFn>, ResolveAllContext<TParentRoute, TRouterContext, TRouteContextFn, TBeforeLoadFn>, TLoaderDeps>>;
|
|
64
|
+
match: RouteMatch<TRouteId, TFullPath, ResolveAllParamsFromParent<TParentRoute, TParams>, ResolveFullSearchSchema<TParentRoute, TSearchValidator>, ResolveLoaderData<TLoaderFn>, ResolveAllContext<TParentRoute, TRouterContext, TRouteContextFn, TBeforeLoadFn>, TLoaderDeps>;
|
|
65
|
+
params: ResolveAllParamsFromParent<TParentRoute, TParams>;
|
|
66
|
+
loaderData: ResolveLoaderData<TLoaderFn>;
|
|
67
|
+
};
|
|
62
68
|
export interface UpdatableRouteOptions<in out TParentRoute extends AnyRoute, in out TRouteId, in out TFullPath, in out TParams, in out TSearchValidator, in out TLoaderFn, in out TLoaderDeps, in out TRouterContext, in out TRouteContextFn, in out TBeforeLoadFn> extends UpdatableStaticRouteOption {
|
|
63
69
|
caseSensitive?: boolean;
|
|
64
70
|
wrapInSuspense?: boolean;
|
|
@@ -92,16 +98,12 @@ export interface UpdatableRouteOptions<in out TParentRoute extends AnyRoute, in
|
|
|
92
98
|
headers?: (ctx: {
|
|
93
99
|
loaderData: ResolveLoaderData<TLoaderFn>;
|
|
94
100
|
}) => Record<string, string>;
|
|
95
|
-
head?: (ctx: {
|
|
96
|
-
matches: Array<RouteMatch<TRouteId, TFullPath, ResolveAllParamsFromParent<TParentRoute, TParams>, ResolveFullSearchSchema<TParentRoute, TSearchValidator>, ResolveLoaderData<TLoaderFn>, ResolveAllContext<TParentRoute, TRouterContext, TRouteContextFn, TBeforeLoadFn>, TLoaderDeps>>;
|
|
97
|
-
match: RouteMatch<TRouteId, TFullPath, ResolveAllParamsFromParent<TParentRoute, TParams>, ResolveFullSearchSchema<TParentRoute, TSearchValidator>, ResolveLoaderData<TLoaderFn>, ResolveAllContext<TParentRoute, TRouterContext, TRouteContextFn, TBeforeLoadFn>, TLoaderDeps>;
|
|
98
|
-
params: ResolveAllParamsFromParent<TParentRoute, TParams>;
|
|
99
|
-
loaderData: ResolveLoaderData<TLoaderFn>;
|
|
100
|
-
}) => {
|
|
101
|
+
head?: (ctx: AssetFnContextOptions<TRouteId, TFullPath, TParentRoute, TParams, TSearchValidator, TLoaderFn, TRouterContext, TRouteContextFn, TBeforeLoadFn, TLoaderDeps>) => {
|
|
101
102
|
links?: AnyRouteMatch['links'];
|
|
102
|
-
scripts?: AnyRouteMatch['
|
|
103
|
+
scripts?: AnyRouteMatch['headScripts'];
|
|
103
104
|
meta?: AnyRouteMatch['meta'];
|
|
104
105
|
};
|
|
106
|
+
scripts?: (ctx: AssetFnContextOptions<TRouteId, TFullPath, TParentRoute, TParams, TSearchValidator, TLoaderFn, TRouterContext, TRouteContextFn, TBeforeLoadFn, TLoaderDeps>) => AnyRouteMatch['scripts'];
|
|
105
107
|
ssr?: boolean;
|
|
106
108
|
codeSplitGroupings?: Array<Array<'loader' | 'component' | 'pendingComponent' | 'notFoundComponent' | 'errorComponent'>>;
|
|
107
109
|
}
|
|
@@ -292,3 +294,4 @@ export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>;
|
|
|
292
294
|
export declare class NotFoundRoute<TParentRoute extends AnyRootRoute, TRouterContext = AnyContext, TRouteContextFn = AnyContext, TBeforeLoadFn = AnyContext, TSearchValidator = undefined, TLoaderDeps extends Record<string, any> = {}, TLoaderFn = undefined, TChildren = unknown> extends Route<TParentRoute, '/404', '/404', '404', '404', TSearchValidator, {}, TRouterContext, TRouteContextFn, TBeforeLoadFn, TLoaderDeps, TLoaderFn, TChildren> {
|
|
293
295
|
constructor(options: Omit<RouteOptions<TParentRoute, string, string, string, string, TSearchValidator, {}, TLoaderDeps, TLoaderFn, TRouterContext, TRouteContextFn, TBeforeLoadFn>, 'caseSensitive' | 'parseParams' | 'stringifyParams' | 'path' | 'id' | 'params'>);
|
|
294
296
|
}
|
|
297
|
+
export {};
|