@tanstack/react-router 1.133.8 → 1.133.12
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 +4 -6
- package/dist/cjs/Asset.cjs.map +1 -1
- package/dist/cjs/HeadContent.cjs +23 -7
- package/dist/cjs/HeadContent.cjs.map +1 -1
- package/dist/cjs/Scripts.cjs +5 -10
- package/dist/cjs/Scripts.cjs.map +1 -1
- package/dist/esm/Asset.js +4 -6
- package/dist/esm/Asset.js.map +1 -1
- package/dist/esm/HeadContent.js +23 -7
- package/dist/esm/HeadContent.js.map +1 -1
- package/dist/esm/Scripts.js +5 -10
- package/dist/esm/Scripts.js.map +1 -1
- package/dist/llms/rules/api.d.ts +1 -1
- package/dist/llms/rules/api.js +22 -4
- package/package.json +2 -2
- package/src/Asset.tsx +2 -9
- package/src/HeadContent.tsx +17 -2
- package/src/Scripts.tsx +4 -7
package/dist/cjs/Asset.cjs
CHANGED
|
@@ -43,15 +43,14 @@ function Asset({
|
|
|
43
43
|
}
|
|
44
44
|
);
|
|
45
45
|
case "script":
|
|
46
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Script, { attrs,
|
|
46
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Script, { attrs, children });
|
|
47
47
|
default:
|
|
48
48
|
return null;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
function Script({
|
|
52
52
|
attrs,
|
|
53
|
-
children
|
|
54
|
-
nonce
|
|
53
|
+
children
|
|
55
54
|
}) {
|
|
56
55
|
const router = useRouter.useRouter();
|
|
57
56
|
React__namespace.useEffect(() => {
|
|
@@ -125,7 +124,7 @@ function Script({
|
|
|
125
124
|
return null;
|
|
126
125
|
}
|
|
127
126
|
if (attrs?.src && typeof attrs.src === "string") {
|
|
128
|
-
return /* @__PURE__ */ jsxRuntime.jsx("script", { ...attrs, suppressHydrationWarning: true
|
|
127
|
+
return /* @__PURE__ */ jsxRuntime.jsx("script", { ...attrs, suppressHydrationWarning: true });
|
|
129
128
|
}
|
|
130
129
|
if (typeof children === "string") {
|
|
131
130
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -133,8 +132,7 @@ function Script({
|
|
|
133
132
|
{
|
|
134
133
|
...attrs,
|
|
135
134
|
dangerouslySetInnerHTML: { __html: children },
|
|
136
|
-
suppressHydrationWarning: true
|
|
137
|
-
nonce
|
|
135
|
+
suppressHydrationWarning: true
|
|
138
136
|
}
|
|
139
137
|
);
|
|
140
138
|
}
|
package/dist/cjs/Asset.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Asset.cjs","sources":["../../src/Asset.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\ninterface ScriptAttrs {\n [key: string]: string | boolean | undefined\n src?: string\n suppressHydrationWarning?: boolean\n}\n\nexport function Asset({\n tag,\n attrs,\n children,\n nonce,\n}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {\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} nonce={nonce} suppressHydrationWarning />\n case 'style':\n return (\n <style\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children as string }}\n nonce={nonce}\n />\n )\n case 'script':\n return
|
|
1
|
+
{"version":3,"file":"Asset.cjs","sources":["../../src/Asset.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\ninterface ScriptAttrs {\n [key: string]: string | boolean | undefined\n src?: string\n suppressHydrationWarning?: boolean\n}\n\nexport function Asset({\n tag,\n attrs,\n children,\n nonce,\n}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {\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} nonce={nonce} suppressHydrationWarning />\n case 'style':\n return (\n <style\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children as string }}\n nonce={nonce}\n />\n )\n case 'script':\n return <Script attrs={attrs}>{children}</Script>\n default:\n return null\n }\n}\n\nfunction Script({\n attrs,\n children,\n}: {\n attrs?: ScriptAttrs\n children?: string\n}) {\n const router = useRouter()\n\n React.useEffect(() => {\n if (attrs?.src) {\n const normSrc = (() => {\n try {\n const base = document.baseURI || window.location.href\n return new URL(attrs.src, base).href\n } catch {\n return attrs.src\n }\n })()\n const existingScript = Array.from(\n document.querySelectorAll('script[src]'),\n ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n if (existingScript) {\n return\n }\n\n const script = document.createElement('script')\n\n for (const [key, value] of Object.entries(attrs)) {\n if (\n key !== 'suppressHydrationWarning' &&\n value !== undefined &&\n value !== false\n ) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n\n document.head.appendChild(script)\n\n return () => {\n if (script.parentNode) {\n script.parentNode.removeChild(script)\n }\n }\n }\n\n if (typeof children === 'string') {\n const typeAttr =\n typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n const nonceAttr =\n typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n const existingScript = Array.from(\n document.querySelectorAll('script:not([src])'),\n ).find((el) => {\n if (!(el instanceof HTMLScriptElement)) return false\n const sType = el.getAttribute('type') ?? 'text/javascript'\n const sNonce = el.getAttribute('nonce') ?? undefined\n return (\n el.textContent === children &&\n sType === typeAttr &&\n sNonce === nonceAttr\n )\n })\n\n if (existingScript) {\n return\n }\n\n const script = document.createElement('script')\n script.textContent = children\n\n if (attrs) {\n for (const [key, value] of Object.entries(attrs)) {\n if (\n key !== 'suppressHydrationWarning' &&\n value !== undefined &&\n value !== false\n ) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n }\n\n document.head.appendChild(script)\n\n return () => {\n if (script.parentNode) {\n script.parentNode.removeChild(script)\n }\n }\n }\n\n return undefined\n }, [attrs, children])\n\n if (!router.isServer) {\n return null\n }\n\n if (attrs?.src && typeof attrs.src === 'string') {\n return <script {...attrs} suppressHydrationWarning />\n }\n\n if (typeof children === 'string') {\n return (\n <script\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children }}\n suppressHydrationWarning\n />\n )\n }\n\n return null\n}\n"],"names":["jsx","useRouter","React"],"mappings":"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"}
|
package/dist/cjs/HeadContent.cjs
CHANGED
|
@@ -23,6 +23,7 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
24
24
|
const useTags = () => {
|
|
25
25
|
const router = useRouter.useRouter();
|
|
26
|
+
const nonce = router.options.ssr?.nonce;
|
|
26
27
|
const routeMeta = useRouterState.useRouterState({
|
|
27
28
|
select: (state) => {
|
|
28
29
|
return state.matches.map((match) => match.meta).filter(Boolean);
|
|
@@ -56,7 +57,8 @@ const useTags = () => {
|
|
|
56
57
|
resultMeta.push({
|
|
57
58
|
tag: "meta",
|
|
58
59
|
attrs: {
|
|
59
|
-
...m
|
|
60
|
+
...m,
|
|
61
|
+
nonce
|
|
60
62
|
}
|
|
61
63
|
});
|
|
62
64
|
}
|
|
@@ -65,15 +67,25 @@ const useTags = () => {
|
|
|
65
67
|
if (title) {
|
|
66
68
|
resultMeta.push(title);
|
|
67
69
|
}
|
|
70
|
+
if (nonce) {
|
|
71
|
+
resultMeta.push({
|
|
72
|
+
tag: "meta",
|
|
73
|
+
attrs: {
|
|
74
|
+
property: "csp-nonce",
|
|
75
|
+
content: nonce
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
68
79
|
resultMeta.reverse();
|
|
69
80
|
return resultMeta;
|
|
70
|
-
}, [routeMeta]);
|
|
81
|
+
}, [routeMeta, nonce]);
|
|
71
82
|
const links = useRouterState.useRouterState({
|
|
72
83
|
select: (state) => {
|
|
73
84
|
const constructed = state.matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
|
|
74
85
|
tag: "link",
|
|
75
86
|
attrs: {
|
|
76
|
-
...link
|
|
87
|
+
...link,
|
|
88
|
+
nonce
|
|
77
89
|
}
|
|
78
90
|
}));
|
|
79
91
|
const manifest = router.ssr?.manifest;
|
|
@@ -82,7 +94,8 @@ const useTags = () => {
|
|
|
82
94
|
tag: "link",
|
|
83
95
|
attrs: {
|
|
84
96
|
...asset.attrs,
|
|
85
|
-
suppressHydrationWarning: true
|
|
97
|
+
suppressHydrationWarning: true,
|
|
98
|
+
nonce
|
|
86
99
|
}
|
|
87
100
|
})
|
|
88
101
|
);
|
|
@@ -99,7 +112,8 @@ const useTags = () => {
|
|
|
99
112
|
tag: "link",
|
|
100
113
|
attrs: {
|
|
101
114
|
rel: "modulepreload",
|
|
102
|
-
href: preload
|
|
115
|
+
href: preload,
|
|
116
|
+
nonce
|
|
103
117
|
}
|
|
104
118
|
});
|
|
105
119
|
})
|
|
@@ -112,7 +126,8 @@ const useTags = () => {
|
|
|
112
126
|
select: (state) => state.matches.map((match) => match.styles).flat(1).filter(Boolean).map(({ children, ...attrs }) => ({
|
|
113
127
|
tag: "style",
|
|
114
128
|
attrs,
|
|
115
|
-
children
|
|
129
|
+
children,
|
|
130
|
+
nonce
|
|
116
131
|
})),
|
|
117
132
|
structuralSharing: true
|
|
118
133
|
});
|
|
@@ -120,7 +135,8 @@ const useTags = () => {
|
|
|
120
135
|
select: (state) => state.matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
|
|
121
136
|
tag: "script",
|
|
122
137
|
attrs: {
|
|
123
|
-
...script
|
|
138
|
+
...script,
|
|
139
|
+
nonce
|
|
124
140
|
},
|
|
125
141
|
children
|
|
126
142
|
})),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadContent.cjs","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 for (let i = routeMeta.length - 1; i >= 0; i--) {\n const metas = routeMeta[i]!\n for (let j = metas.length - 1; j >= 0; j--) {\n const m = metas[j]\n if (!m) continue\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 continue\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 const constructed = 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 })) satisfies Array<RouterManagedTag>\n\n const manifest = router.ssr?.manifest\n\n // These are the assets extracted from the ViteManifest\n // using the `startManifestPlugin`\n const assets = state.matches\n .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n .filter(Boolean)\n .flat(1)\n .filter((asset) => asset.tag === 'link')\n .map(\n (asset) =>\n ({\n tag: 'link',\n attrs: {\n ...asset.attrs,\n suppressHydrationWarning: true,\n },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\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 styles = useRouterState({\n select: (state) =>\n (\n state.matches\n .map((match) => match.styles!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...attrs }) => ({\n tag: 'style',\n attrs,\n children,\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 ...styles,\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 const router = useRouter()\n const nonce = router.options.ssr?.nonce\n return tags.map((tag) => (\n <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\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":["useRouter","useRouterState","React","preloadMeta","createElement","Asset"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,UAAU,MAAM;AAC3B,QAAM,SAASA,UAAAA,UAAA;
|
|
1
|
+
{"version":3,"file":"HeadContent.cjs","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 const nonce = router.options.ssr?.nonce\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 for (let i = routeMeta.length - 1; i >= 0; i--) {\n const metas = routeMeta[i]!\n for (let j = metas.length - 1; j >= 0; j--) {\n const m = metas[j]\n if (!m) continue\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 continue\n } else {\n metaByAttribute[attribute] = true\n }\n }\n\n resultMeta.push({\n tag: 'meta',\n attrs: {\n ...m,\n nonce,\n },\n })\n }\n }\n }\n\n if (title) {\n resultMeta.push(title)\n }\n\n if (nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n }, [routeMeta, nonce])\n\n const links = useRouterState({\n select: (state) => {\n const constructed = state.matches\n .map((match) => match.links!)\n .filter(Boolean)\n .flat(1)\n .map((link) => ({\n tag: 'link',\n attrs: {\n ...link,\n nonce,\n },\n })) satisfies Array<RouterManagedTag>\n\n const manifest = router.ssr?.manifest\n\n // These are the assets extracted from the ViteManifest\n // using the `startManifestPlugin`\n const assets = state.matches\n .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n .filter(Boolean)\n .flat(1)\n .filter((asset) => asset.tag === 'link')\n .map(\n (asset) =>\n ({\n tag: 'link',\n attrs: {\n ...asset.attrs,\n suppressHydrationWarning: true,\n nonce,\n },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\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 nonce,\n },\n })\n }),\n )\n\n return preloadMeta\n },\n structuralSharing: true as any,\n })\n\n const styles = useRouterState({\n select: (state) =>\n (\n state.matches\n .map((match) => match.styles!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...attrs }) => ({\n tag: 'style',\n attrs,\n children,\n nonce,\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 nonce,\n },\n children,\n })),\n structuralSharing: true as any,\n })\n\n return uniqBy(\n [\n ...meta,\n ...preloadMeta,\n ...links,\n ...styles,\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 const router = useRouter()\n const nonce = router.options.ssr?.nonce\n return tags.map((tag) => (\n <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\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":["useRouter","useRouterState","React","preloadMeta","createElement","Asset"],"mappings":"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"}
|
package/dist/cjs/Scripts.cjs
CHANGED
|
@@ -7,6 +7,7 @@ const useRouterState = require("./useRouterState.cjs");
|
|
|
7
7
|
const useRouter = require("./useRouter.cjs");
|
|
8
8
|
const Scripts = () => {
|
|
9
9
|
const router = useRouter.useRouter();
|
|
10
|
+
const nonce = router.options.ssr?.nonce;
|
|
10
11
|
const assetScripts = useRouterState.useRouterState({
|
|
11
12
|
select: (state) => {
|
|
12
13
|
const assetScripts2 = [];
|
|
@@ -18,7 +19,7 @@ const Scripts = () => {
|
|
|
18
19
|
(route) => manifest.routes[route.id]?.assets?.filter((d) => d.tag === "script").forEach((asset) => {
|
|
19
20
|
assetScripts2.push({
|
|
20
21
|
tag: "script",
|
|
21
|
-
attrs: asset.attrs,
|
|
22
|
+
attrs: { ...asset.attrs, nonce },
|
|
22
23
|
children: asset.children
|
|
23
24
|
});
|
|
24
25
|
})
|
|
@@ -33,7 +34,8 @@ const Scripts = () => {
|
|
|
33
34
|
tag: "script",
|
|
34
35
|
attrs: {
|
|
35
36
|
...script,
|
|
36
|
-
suppressHydrationWarning: true
|
|
37
|
+
suppressHydrationWarning: true,
|
|
38
|
+
nonce
|
|
37
39
|
},
|
|
38
40
|
children
|
|
39
41
|
}))
|
|
@@ -41,14 +43,7 @@ const Scripts = () => {
|
|
|
41
43
|
structuralSharing: true
|
|
42
44
|
});
|
|
43
45
|
const allScripts = [...scripts, ...assetScripts];
|
|
44
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allScripts.map((asset, i) => /* @__PURE__ */ React.createElement(
|
|
45
|
-
Asset.Asset,
|
|
46
|
-
{
|
|
47
|
-
...asset,
|
|
48
|
-
key: `tsr-scripts-${asset.tag}-${i}`,
|
|
49
|
-
nonce: router.options.ssr?.nonce
|
|
50
|
-
}
|
|
51
|
-
)) });
|
|
46
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allScripts.map((asset, i) => /* @__PURE__ */ React.createElement(Asset.Asset, { ...asset, key: `tsr-scripts-${asset.tag}-${i}` })) });
|
|
52
47
|
};
|
|
53
48
|
exports.Scripts = Scripts;
|
|
54
49
|
//# sourceMappingURL=Scripts.cjs.map
|
package/dist/cjs/Scripts.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scripts.cjs","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 structuralSharing: true as any,\n })\n\n const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>\n\n return (\n <>\n {allScripts.map((asset, i) => (\n <Asset
|
|
1
|
+
{"version":3,"file":"Scripts.cjs","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 const nonce = router.options.ssr?.nonce\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, nonce },\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 nonce,\n },\n children,\n })),\n }),\n structuralSharing: true as any,\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":["useRouter","useRouterState","assetScripts","Asset"],"mappings":";;;;;;;AAKO,MAAM,UAAU,MAAM;AAC3B,QAAM,SAASA,UAAAA,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,QAAM,eAAeC,eAAAA,eAAe;AAAA,IAClC,QAAQ,CAAC,UAAU;AACjB,YAAMC,gBAAwC,CAAA;AAC9C,YAAM,WAAW,OAAO,KAAK;AAE7B,UAAI,CAAC,UAAU;AACb,eAAO,CAAA;AAAA,MACT;AAEA,YAAM,QACH,IAAI,CAAC,UAAU,OAAO,gBAAgB,MAAM,OAAO,CAAE,EACrD;AAAA,QAAQ,CAAC,UACR,SAAS,OAAO,MAAM,EAAE,GAAG,QACvB,OAAO,CAAC,MAAM,EAAE,QAAQ,QAAQ,EACjC,QAAQ,CAAC,UAAU;AAClBA,wBAAa,KAAK;AAAA,YAChB,KAAK;AAAA,YACL,OAAO,EAAE,GAAG,MAAM,OAAO,MAAA;AAAA,YACzB,UAAU,MAAM;AAAA,UAAA,CACV;AAAA,QACV,CAAC;AAAA,MAAA;AAGP,aAAOA;AAAAA,IACT;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,EAAE,QAAA,IAAYD,8BAAe;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,UAC1B;AAAA,QAAA;AAAA,QAEF;AAAA,MAAA,EACA;AAAA,IAAA;AAAA,IAEJ,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,aAAa,CAAC,GAAG,SAAS,GAAG,YAAY;AAE/C,+DAEK,UAAA,WAAW,IAAI,CAAC,OAAO,0CACrBE,MAAAA,OAAA,EAAO,GAAG,OAAO,KAAK,eAAe,MAAM,GAAG,IAAI,CAAC,IAAI,CACzD,GACH;AAEJ;;"}
|
package/dist/esm/Asset.js
CHANGED
|
@@ -24,15 +24,14 @@ function Asset({
|
|
|
24
24
|
}
|
|
25
25
|
);
|
|
26
26
|
case "script":
|
|
27
|
-
return /* @__PURE__ */ jsx(Script, { attrs,
|
|
27
|
+
return /* @__PURE__ */ jsx(Script, { attrs, children });
|
|
28
28
|
default:
|
|
29
29
|
return null;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
function Script({
|
|
33
33
|
attrs,
|
|
34
|
-
children
|
|
35
|
-
nonce
|
|
34
|
+
children
|
|
36
35
|
}) {
|
|
37
36
|
const router = useRouter();
|
|
38
37
|
React.useEffect(() => {
|
|
@@ -106,7 +105,7 @@ function Script({
|
|
|
106
105
|
return null;
|
|
107
106
|
}
|
|
108
107
|
if (attrs?.src && typeof attrs.src === "string") {
|
|
109
|
-
return /* @__PURE__ */ jsx("script", { ...attrs, suppressHydrationWarning: true
|
|
108
|
+
return /* @__PURE__ */ jsx("script", { ...attrs, suppressHydrationWarning: true });
|
|
110
109
|
}
|
|
111
110
|
if (typeof children === "string") {
|
|
112
111
|
return /* @__PURE__ */ jsx(
|
|
@@ -114,8 +113,7 @@ function Script({
|
|
|
114
113
|
{
|
|
115
114
|
...attrs,
|
|
116
115
|
dangerouslySetInnerHTML: { __html: children },
|
|
117
|
-
suppressHydrationWarning: true
|
|
118
|
-
nonce
|
|
116
|
+
suppressHydrationWarning: true
|
|
119
117
|
}
|
|
120
118
|
);
|
|
121
119
|
}
|
package/dist/esm/Asset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\ninterface ScriptAttrs {\n [key: string]: string | boolean | undefined\n src?: string\n suppressHydrationWarning?: boolean\n}\n\nexport function Asset({\n tag,\n attrs,\n children,\n nonce,\n}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {\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} nonce={nonce} suppressHydrationWarning />\n case 'style':\n return (\n <style\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children as string }}\n nonce={nonce}\n />\n )\n case 'script':\n return
|
|
1
|
+
{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\ninterface ScriptAttrs {\n [key: string]: string | boolean | undefined\n src?: string\n suppressHydrationWarning?: boolean\n}\n\nexport function Asset({\n tag,\n attrs,\n children,\n nonce,\n}: RouterManagedTag & { nonce?: string }): React.ReactElement | null {\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} nonce={nonce} suppressHydrationWarning />\n case 'style':\n return (\n <style\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children as string }}\n nonce={nonce}\n />\n )\n case 'script':\n return <Script attrs={attrs}>{children}</Script>\n default:\n return null\n }\n}\n\nfunction Script({\n attrs,\n children,\n}: {\n attrs?: ScriptAttrs\n children?: string\n}) {\n const router = useRouter()\n\n React.useEffect(() => {\n if (attrs?.src) {\n const normSrc = (() => {\n try {\n const base = document.baseURI || window.location.href\n return new URL(attrs.src, base).href\n } catch {\n return attrs.src\n }\n })()\n const existingScript = Array.from(\n document.querySelectorAll('script[src]'),\n ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n if (existingScript) {\n return\n }\n\n const script = document.createElement('script')\n\n for (const [key, value] of Object.entries(attrs)) {\n if (\n key !== 'suppressHydrationWarning' &&\n value !== undefined &&\n value !== false\n ) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n\n document.head.appendChild(script)\n\n return () => {\n if (script.parentNode) {\n script.parentNode.removeChild(script)\n }\n }\n }\n\n if (typeof children === 'string') {\n const typeAttr =\n typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n const nonceAttr =\n typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n const existingScript = Array.from(\n document.querySelectorAll('script:not([src])'),\n ).find((el) => {\n if (!(el instanceof HTMLScriptElement)) return false\n const sType = el.getAttribute('type') ?? 'text/javascript'\n const sNonce = el.getAttribute('nonce') ?? undefined\n return (\n el.textContent === children &&\n sType === typeAttr &&\n sNonce === nonceAttr\n )\n })\n\n if (existingScript) {\n return\n }\n\n const script = document.createElement('script')\n script.textContent = children\n\n if (attrs) {\n for (const [key, value] of Object.entries(attrs)) {\n if (\n key !== 'suppressHydrationWarning' &&\n value !== undefined &&\n value !== false\n ) {\n script.setAttribute(\n key,\n typeof value === 'boolean' ? '' : String(value),\n )\n }\n }\n }\n\n document.head.appendChild(script)\n\n return () => {\n if (script.parentNode) {\n script.parentNode.removeChild(script)\n }\n }\n }\n\n return undefined\n }, [attrs, children])\n\n if (!router.isServer) {\n return null\n }\n\n if (attrs?.src && typeof attrs.src === 'string') {\n return <script {...attrs} suppressHydrationWarning />\n }\n\n if (typeof children === 'string') {\n return (\n <script\n {...attrs}\n dangerouslySetInnerHTML={{ __html: children }}\n suppressHydrationWarning\n />\n )\n }\n\n return null\n}\n"],"names":[],"mappings":"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"}
|
package/dist/esm/HeadContent.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useRouter } from "./useRouter.js";
|
|
|
5
5
|
import { useRouterState } from "./useRouterState.js";
|
|
6
6
|
const useTags = () => {
|
|
7
7
|
const router = useRouter();
|
|
8
|
+
const nonce = router.options.ssr?.nonce;
|
|
8
9
|
const routeMeta = useRouterState({
|
|
9
10
|
select: (state) => {
|
|
10
11
|
return state.matches.map((match) => match.meta).filter(Boolean);
|
|
@@ -38,7 +39,8 @@ const useTags = () => {
|
|
|
38
39
|
resultMeta.push({
|
|
39
40
|
tag: "meta",
|
|
40
41
|
attrs: {
|
|
41
|
-
...m
|
|
42
|
+
...m,
|
|
43
|
+
nonce
|
|
42
44
|
}
|
|
43
45
|
});
|
|
44
46
|
}
|
|
@@ -47,15 +49,25 @@ const useTags = () => {
|
|
|
47
49
|
if (title) {
|
|
48
50
|
resultMeta.push(title);
|
|
49
51
|
}
|
|
52
|
+
if (nonce) {
|
|
53
|
+
resultMeta.push({
|
|
54
|
+
tag: "meta",
|
|
55
|
+
attrs: {
|
|
56
|
+
property: "csp-nonce",
|
|
57
|
+
content: nonce
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
}
|
|
50
61
|
resultMeta.reverse();
|
|
51
62
|
return resultMeta;
|
|
52
|
-
}, [routeMeta]);
|
|
63
|
+
}, [routeMeta, nonce]);
|
|
53
64
|
const links = useRouterState({
|
|
54
65
|
select: (state) => {
|
|
55
66
|
const constructed = state.matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
|
|
56
67
|
tag: "link",
|
|
57
68
|
attrs: {
|
|
58
|
-
...link
|
|
69
|
+
...link,
|
|
70
|
+
nonce
|
|
59
71
|
}
|
|
60
72
|
}));
|
|
61
73
|
const manifest = router.ssr?.manifest;
|
|
@@ -64,7 +76,8 @@ const useTags = () => {
|
|
|
64
76
|
tag: "link",
|
|
65
77
|
attrs: {
|
|
66
78
|
...asset.attrs,
|
|
67
|
-
suppressHydrationWarning: true
|
|
79
|
+
suppressHydrationWarning: true,
|
|
80
|
+
nonce
|
|
68
81
|
}
|
|
69
82
|
})
|
|
70
83
|
);
|
|
@@ -81,7 +94,8 @@ const useTags = () => {
|
|
|
81
94
|
tag: "link",
|
|
82
95
|
attrs: {
|
|
83
96
|
rel: "modulepreload",
|
|
84
|
-
href: preload
|
|
97
|
+
href: preload,
|
|
98
|
+
nonce
|
|
85
99
|
}
|
|
86
100
|
});
|
|
87
101
|
})
|
|
@@ -94,7 +108,8 @@ const useTags = () => {
|
|
|
94
108
|
select: (state) => state.matches.map((match) => match.styles).flat(1).filter(Boolean).map(({ children, ...attrs }) => ({
|
|
95
109
|
tag: "style",
|
|
96
110
|
attrs,
|
|
97
|
-
children
|
|
111
|
+
children,
|
|
112
|
+
nonce
|
|
98
113
|
})),
|
|
99
114
|
structuralSharing: true
|
|
100
115
|
});
|
|
@@ -102,7 +117,8 @@ const useTags = () => {
|
|
|
102
117
|
select: (state) => state.matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
|
|
103
118
|
tag: "script",
|
|
104
119
|
attrs: {
|
|
105
|
-
...script
|
|
120
|
+
...script,
|
|
121
|
+
nonce
|
|
106
122
|
},
|
|
107
123
|
children
|
|
108
124
|
})),
|
|
@@ -1 +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 for (let i = routeMeta.length - 1; i >= 0; i--) {\n const metas = routeMeta[i]!\n for (let j = metas.length - 1; j >= 0; j--) {\n const m = metas[j]\n if (!m) continue\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 continue\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 const constructed = 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 })) satisfies Array<RouterManagedTag>\n\n const manifest = router.ssr?.manifest\n\n // These are the assets extracted from the ViteManifest\n // using the `startManifestPlugin`\n const assets = state.matches\n .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n .filter(Boolean)\n .flat(1)\n .filter((asset) => asset.tag === 'link')\n .map(\n (asset) =>\n ({\n tag: 'link',\n attrs: {\n ...asset.attrs,\n suppressHydrationWarning: true,\n },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\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 styles = useRouterState({\n select: (state) =>\n (\n state.matches\n .map((match) => match.styles!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...attrs }) => ({\n tag: 'style',\n attrs,\n children,\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 ...styles,\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 const router = useRouter()\n const nonce = router.options.ssr?.nonce\n return tags.map((tag) => (\n <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\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":";;;;;AAMO,MAAM,UAAU,MAAM;AAC3B,QAAM,SAAS,UAAA;
|
|
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 const nonce = router.options.ssr?.nonce\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 for (let i = routeMeta.length - 1; i >= 0; i--) {\n const metas = routeMeta[i]!\n for (let j = metas.length - 1; j >= 0; j--) {\n const m = metas[j]\n if (!m) continue\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 continue\n } else {\n metaByAttribute[attribute] = true\n }\n }\n\n resultMeta.push({\n tag: 'meta',\n attrs: {\n ...m,\n nonce,\n },\n })\n }\n }\n }\n\n if (title) {\n resultMeta.push(title)\n }\n\n if (nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n }, [routeMeta, nonce])\n\n const links = useRouterState({\n select: (state) => {\n const constructed = state.matches\n .map((match) => match.links!)\n .filter(Boolean)\n .flat(1)\n .map((link) => ({\n tag: 'link',\n attrs: {\n ...link,\n nonce,\n },\n })) satisfies Array<RouterManagedTag>\n\n const manifest = router.ssr?.manifest\n\n // These are the assets extracted from the ViteManifest\n // using the `startManifestPlugin`\n const assets = state.matches\n .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n .filter(Boolean)\n .flat(1)\n .filter((asset) => asset.tag === 'link')\n .map(\n (asset) =>\n ({\n tag: 'link',\n attrs: {\n ...asset.attrs,\n suppressHydrationWarning: true,\n nonce,\n },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\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 nonce,\n },\n })\n }),\n )\n\n return preloadMeta\n },\n structuralSharing: true as any,\n })\n\n const styles = useRouterState({\n select: (state) =>\n (\n state.matches\n .map((match) => match.styles!)\n .flat(1)\n .filter(Boolean) as Array<RouterManagedTag>\n ).map(({ children, ...attrs }) => ({\n tag: 'style',\n attrs,\n children,\n nonce,\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 nonce,\n },\n children,\n })),\n structuralSharing: true as any,\n })\n\n return uniqBy(\n [\n ...meta,\n ...preloadMeta,\n ...links,\n ...styles,\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 const router = useRouter()\n const nonce = router.options.ssr?.nonce\n return tags.map((tag) => (\n <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\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/Scripts.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useRouterState } from "./useRouterState.js";
|
|
|
5
5
|
import { useRouter } from "./useRouter.js";
|
|
6
6
|
const Scripts = () => {
|
|
7
7
|
const router = useRouter();
|
|
8
|
+
const nonce = router.options.ssr?.nonce;
|
|
8
9
|
const assetScripts = useRouterState({
|
|
9
10
|
select: (state) => {
|
|
10
11
|
const assetScripts2 = [];
|
|
@@ -16,7 +17,7 @@ const Scripts = () => {
|
|
|
16
17
|
(route) => manifest.routes[route.id]?.assets?.filter((d) => d.tag === "script").forEach((asset) => {
|
|
17
18
|
assetScripts2.push({
|
|
18
19
|
tag: "script",
|
|
19
|
-
attrs: asset.attrs,
|
|
20
|
+
attrs: { ...asset.attrs, nonce },
|
|
20
21
|
children: asset.children
|
|
21
22
|
});
|
|
22
23
|
})
|
|
@@ -31,7 +32,8 @@ const Scripts = () => {
|
|
|
31
32
|
tag: "script",
|
|
32
33
|
attrs: {
|
|
33
34
|
...script,
|
|
34
|
-
suppressHydrationWarning: true
|
|
35
|
+
suppressHydrationWarning: true,
|
|
36
|
+
nonce
|
|
35
37
|
},
|
|
36
38
|
children
|
|
37
39
|
}))
|
|
@@ -39,14 +41,7 @@ const Scripts = () => {
|
|
|
39
41
|
structuralSharing: true
|
|
40
42
|
});
|
|
41
43
|
const allScripts = [...scripts, ...assetScripts];
|
|
42
|
-
return /* @__PURE__ */ jsx(Fragment, { children: allScripts.map((asset, i) => /* @__PURE__ */ createElement(
|
|
43
|
-
Asset,
|
|
44
|
-
{
|
|
45
|
-
...asset,
|
|
46
|
-
key: `tsr-scripts-${asset.tag}-${i}`,
|
|
47
|
-
nonce: router.options.ssr?.nonce
|
|
48
|
-
}
|
|
49
|
-
)) });
|
|
44
|
+
return /* @__PURE__ */ jsx(Fragment, { children: allScripts.map((asset, i) => /* @__PURE__ */ createElement(Asset, { ...asset, key: `tsr-scripts-${asset.tag}-${i}` })) });
|
|
50
45
|
};
|
|
51
46
|
export {
|
|
52
47
|
Scripts
|
package/dist/esm/Scripts.js.map
CHANGED
|
@@ -1 +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 structuralSharing: true as any,\n })\n\n const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>\n\n return (\n <>\n {allScripts.map((asset, i) => (\n <Asset
|
|
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 const nonce = router.options.ssr?.nonce\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, nonce },\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 nonce,\n },\n children,\n })),\n }),\n structuralSharing: true as any,\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"],"mappings":";;;;;AAKO,MAAM,UAAU,MAAM;AAC3B,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,QAAM,eAAe,eAAe;AAAA,IAClC,QAAQ,CAAC,UAAU;AACjB,YAAMA,gBAAwC,CAAA;AAC9C,YAAM,WAAW,OAAO,KAAK;AAE7B,UAAI,CAAC,UAAU;AACb,eAAO,CAAA;AAAA,MACT;AAEA,YAAM,QACH,IAAI,CAAC,UAAU,OAAO,gBAAgB,MAAM,OAAO,CAAE,EACrD;AAAA,QAAQ,CAAC,UACR,SAAS,OAAO,MAAM,EAAE,GAAG,QACvB,OAAO,CAAC,MAAM,EAAE,QAAQ,QAAQ,EACjC,QAAQ,CAAC,UAAU;AAClBA,wBAAa,KAAK;AAAA,YAChB,KAAK;AAAA,YACL,OAAO,EAAE,GAAG,MAAM,OAAO,MAAA;AAAA,YACzB,UAAU,MAAM;AAAA,UAAA,CACV;AAAA,QACV,CAAC;AAAA,MAAA;AAGP,aAAOA;AAAAA,IACT;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,EAAE,QAAA,IAAY,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,UAC1B;AAAA,QAAA;AAAA,QAEF;AAAA,MAAA,EACA;AAAA,IAAA;AAAA,IAEJ,mBAAmB;AAAA,EAAA,CACpB;AAED,QAAM,aAAa,CAAC,GAAG,SAAS,GAAG,YAAY;AAE/C,yCAEK,UAAA,WAAW,IAAI,CAAC,OAAO,oCACrB,OAAA,EAAO,GAAG,OAAO,KAAK,eAAe,MAAM,GAAG,IAAI,CAAC,IAAI,CACzD,GACH;AAEJ;"}
|