@tanstack/solid-router 1.146.2 → 1.147.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/HeadContent.cjs +24 -2
- package/dist/cjs/HeadContent.cjs.map +1 -1
- package/dist/esm/HeadContent.js +26 -4
- package/dist/esm/HeadContent.js.map +1 -1
- package/dist/source/HeadContent.jsx +24 -1
- package/dist/source/HeadContent.jsx.map +1 -1
- package/package.json +1 -1
- package/src/HeadContent.tsx +29 -1
package/dist/cjs/HeadContent.cjs
CHANGED
|
@@ -24,6 +24,7 @@ function _interopNamespaceDefault(e) {
|
|
|
24
24
|
return Object.freeze(n);
|
|
25
25
|
}
|
|
26
26
|
const Solid__namespace = /* @__PURE__ */ _interopNamespaceDefault(Solid$1);
|
|
27
|
+
var _tmpl$ = /* @__PURE__ */ Solid.template(`<link rel=stylesheet data-tanstack-start-dev-styles>`);
|
|
27
28
|
const useTags = () => {
|
|
28
29
|
const router = useRouter.useRouter();
|
|
29
30
|
const nonce = router.options.ssr?.nonce;
|
|
@@ -161,16 +162,37 @@ const useTags = () => {
|
|
|
161
162
|
return JSON.stringify(d);
|
|
162
163
|
});
|
|
163
164
|
};
|
|
165
|
+
function DevStylesLink() {
|
|
166
|
+
const routeIds = useRouterState.useRouterState({
|
|
167
|
+
select: (state) => state.matches.map((match) => match.routeId)
|
|
168
|
+
});
|
|
169
|
+
Solid$1.onMount(() => {
|
|
170
|
+
document.querySelectorAll("[data-tanstack-start-dev-styles]").forEach((el) => el.remove());
|
|
171
|
+
});
|
|
172
|
+
const href = () => `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(","))}`;
|
|
173
|
+
return (() => {
|
|
174
|
+
var _el$ = _tmpl$();
|
|
175
|
+
Solid.effect(() => Solid.setAttribute(_el$, "href", href()));
|
|
176
|
+
return _el$;
|
|
177
|
+
})();
|
|
178
|
+
}
|
|
164
179
|
function HeadContent() {
|
|
165
180
|
const tags = useTags();
|
|
166
181
|
return Solid.createComponent(meta.MetaProvider, {
|
|
167
182
|
get children() {
|
|
168
|
-
return Solid.createComponent(Solid$1.
|
|
183
|
+
return [Solid.createComponent(Solid$1.Show, {
|
|
184
|
+
get when() {
|
|
185
|
+
return process.env.NODE_ENV !== "production";
|
|
186
|
+
},
|
|
187
|
+
get children() {
|
|
188
|
+
return Solid.createComponent(DevStylesLink, {});
|
|
189
|
+
}
|
|
190
|
+
}), Solid.createComponent(Solid$1.For, {
|
|
169
191
|
get each() {
|
|
170
192
|
return tags();
|
|
171
193
|
},
|
|
172
194
|
children: (tag) => Solid.createComponent(Asset.Asset, tag)
|
|
173
|
-
});
|
|
195
|
+
})];
|
|
174
196
|
}
|
|
175
197
|
});
|
|
176
198
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadContent.cjs","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { MetaProvider } from '@solidjs/meta'\nimport { For } from 'solid-js'\nimport { escapeHtml } from '@tanstack/router-core'\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: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {\n const resultMeta: Array<RouterManagedTag> = []\n const metaByAttribute: Record<string, true> = {}\n let title: RouterManagedTag | undefined\n const routeMetasArray = routeMeta()\n for (let i = routeMetasArray.length - 1; i >= 0; i--) {\n const metas = routeMetasArray[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 if ('script:ld+json' in m) {\n // Handle JSON-LD structured data\n // Content is HTML-escaped to prevent XSS when injected via innerHTML\n try {\n const json = JSON.stringify(m['script:ld+json'])\n resultMeta.push({\n tag: 'script',\n attrs: {\n type: 'application/ld+json',\n },\n children: escapeHtml(json),\n })\n } catch {\n // Skip invalid JSON-LD objects\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 (router.options.ssr?.nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: router.options.ssr.nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n })\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: { ...asset.attrs, nonce },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\n })\n\n const preloadLinks = useRouterState({\n select: (state) => {\n const preloadLinks: 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 preloadLinks.push({\n tag: 'link',\n attrs: {\n rel: 'modulepreload',\n href: preload,\n nonce,\n },\n })\n }),\n )\n\n return preloadLinks\n },\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, ...style }) => ({\n tag: 'style',\n attrs: {\n ...style,\n nonce,\n },\n children,\n })),\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 })\n\n return () =>\n uniqBy(\n [\n ...meta(),\n ...preloadLinks(),\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 * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n */\nexport function HeadContent() {\n const tags = useTags()\n\n return (\n <MetaProvider>\n <For each={tags()}>{(tag) => <Asset {...tag} />}</For>\n </MetaProvider>\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":["useTags","router","useRouter","nonce","options","ssr","routeMeta","useRouterState","select","state","matches","map","match","meta","filter","Boolean","Solid","createMemo","resultMeta","metaByAttribute","title","routeMetasArray","i","length","metas","j","m","tag","children","json","JSON","stringify","push","attrs","type","escapeHtml","attribute","name","property","content","reverse","links","constructed","flat","link","manifest","assets","routes","routeId","asset","preloadLinks","looseRoutesById","forEach","route","id","preloads","preload","rel","href","styles","style","headScripts","script","uniqBy","d","HeadContent","tags","_$createComponent","MetaProvider","For","each","Asset","arr","fn","seen","Set","item","key","has","add"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HeadContent.cjs","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { MetaProvider } from '@solidjs/meta'\nimport { For, Show, onMount } from 'solid-js'\nimport { escapeHtml } from '@tanstack/router-core'\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: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {\n const resultMeta: Array<RouterManagedTag> = []\n const metaByAttribute: Record<string, true> = {}\n let title: RouterManagedTag | undefined\n const routeMetasArray = routeMeta()\n for (let i = routeMetasArray.length - 1; i >= 0; i--) {\n const metas = routeMetasArray[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 if ('script:ld+json' in m) {\n // Handle JSON-LD structured data\n // Content is HTML-escaped to prevent XSS when injected via innerHTML\n try {\n const json = JSON.stringify(m['script:ld+json'])\n resultMeta.push({\n tag: 'script',\n attrs: {\n type: 'application/ld+json',\n },\n children: escapeHtml(json),\n })\n } catch {\n // Skip invalid JSON-LD objects\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 (router.options.ssr?.nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: router.options.ssr.nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n })\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: { ...asset.attrs, nonce },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\n })\n\n const preloadLinks = useRouterState({\n select: (state) => {\n const preloadLinks: 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 preloadLinks.push({\n tag: 'link',\n attrs: {\n rel: 'modulepreload',\n href: preload,\n nonce,\n },\n })\n }),\n )\n\n return preloadLinks\n },\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, ...style }) => ({\n tag: 'style',\n attrs: {\n ...style,\n nonce,\n },\n children,\n })),\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 })\n\n return () =>\n uniqBy(\n [\n ...meta(),\n ...preloadLinks(),\n ...links(),\n ...styles(),\n ...headScripts(),\n ] as Array<RouterManagedTag>,\n (d) => {\n return JSON.stringify(d)\n },\n )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n const routeIds = useRouterState({\n select: (state) => state.matches.map((match) => match.routeId),\n })\n\n onMount(() => {\n // After hydration, remove the SSR-rendered dev styles link\n document\n .querySelectorAll('[data-tanstack-start-dev-styles]')\n .forEach((el) => el.remove())\n })\n\n // Build the same href on both server and client for hydration match\n const href = () =>\n `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(','))}`\n\n return <link rel=\"stylesheet\" href={href()} data-tanstack-start-dev-styles />\n}\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n */\nexport function HeadContent() {\n const tags = useTags()\n\n return (\n <MetaProvider>\n <Show when={process.env.NODE_ENV !== 'production'}>\n <DevStylesLink />\n </Show>\n <For each={tags()}>{(tag) => <Asset {...tag} />}</For>\n </MetaProvider>\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":["useTags","router","useRouter","nonce","options","ssr","routeMeta","useRouterState","select","state","matches","map","match","meta","filter","Boolean","Solid","createMemo","resultMeta","metaByAttribute","title","routeMetasArray","i","length","metas","j","m","tag","children","json","JSON","stringify","push","attrs","type","escapeHtml","attribute","name","property","content","reverse","links","constructed","flat","link","manifest","assets","routes","routeId","asset","preloadLinks","looseRoutesById","forEach","route","id","preloads","preload","rel","href","styles","style","headScripts","script","uniqBy","d","DevStylesLink","routeIds","onMount","document","querySelectorAll","el","remove","encodeURIComponent","join","_el$","_tmpl$","_$effect","_$setAttribute","HeadContent","tags","_$createComponent","MetaProvider","Show","when","process","env","NODE_ENV","For","each","Asset","arr","fn","seen","Set","item","key","has","add"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,UAAUA,MAAM;AAC3B,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAMC,QAAQF,OAAOG,QAAQC,KAAKF;AAClC,QAAMG,YAAYC,eAAAA,eAAe;AAAA,IAC/BC,QAASC,CAAAA,UAAU;AACjB,aAAOA,MAAMC,QAAQC,IAAKC,CAAAA,UAAUA,MAAMC,IAAK,EAAEC,OAAOC,OAAO;AAAA,IACjE;AAAA,EAAA,CACD;AAED,QAAMF,QAAgDG,iBAAMC,WAAW,MAAM;AAC3E,UAAMC,aAAsC,CAAA;AAC5C,UAAMC,kBAAwC,CAAA;AAC9C,QAAIC;AACJ,UAAMC,kBAAkBf,UAAAA;AACxB,aAASgB,IAAID,gBAAgBE,SAAS,GAAGD,KAAK,GAAGA,KAAK;AACpD,YAAME,QAAQH,gBAAgBC,CAAC;AAC/B,eAASG,IAAID,MAAMD,SAAS,GAAGE,KAAK,GAAGA,KAAK;AAC1C,cAAMC,IAAIF,MAAMC,CAAC;AACjB,YAAI,CAACC,EAAG;AAER,YAAIA,EAAEN,OAAO;AACX,cAAI,CAACA,OAAO;AACVA,oBAAQ;AAAA,cACNO,KAAK;AAAA,cACLC,UAAUF,EAAEN;AAAAA,YAAAA;AAAAA,UAEhB;AAAA,QACF,WAAW,oBAAoBM,GAAG;AAGhC,cAAI;AACF,kBAAMG,OAAOC,KAAKC,UAAUL,EAAE,gBAAgB,CAAC;AAC/CR,uBAAWc,KAAK;AAAA,cACdL,KAAK;AAAA,cACLM,OAAO;AAAA,gBACLC,MAAM;AAAA,cAAA;AAAA,cAERN,UAAUO,WAAAA,WAAWN,IAAI;AAAA,YAAA,CAC1B;AAAA,UACH,QAAQ;AAAA,UACN;AAAA,QAEJ,OAAO;AACL,gBAAMO,YAAYV,EAAEW,QAAQX,EAAEY;AAC9B,cAAIF,WAAW;AACb,gBAAIjB,gBAAgBiB,SAAS,GAAG;AAC9B;AAAA,YACF,OAAO;AACLjB,8BAAgBiB,SAAS,IAAI;AAAA,YAC/B;AAAA,UACF;AAEAlB,qBAAWc,KAAK;AAAA,YACdL,KAAK;AAAA,YACLM,OAAO;AAAA,cACL,GAAGP;AAAAA,cACHvB;AAAAA,YAAAA;AAAAA,UACF,CACD;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,QAAIiB,OAAO;AACTF,iBAAWc,KAAKZ,KAAK;AAAA,IACvB;AAEA,QAAInB,OAAOG,QAAQC,KAAKF,OAAO;AAC7Be,iBAAWc,KAAK;AAAA,QACdL,KAAK;AAAA,QACLM,OAAO;AAAA,UACLK,UAAU;AAAA,UACVC,SAAStC,OAAOG,QAAQC,IAAIF;AAAAA,QAAAA;AAAAA,MAC9B,CACD;AAAA,IACH;AACAe,eAAWsB,QAAAA;AAEX,WAAOtB;AAAAA,EACT,CAAC;AAED,QAAMuB,QAAQlC,eAAAA,eAAe;AAAA,IAC3BC,QAASC,CAAAA,UAAU;AACjB,YAAMiC,cAAcjC,MAAMC,QACvBC,IAAKC,WAAUA,MAAM6B,KAAM,EAC3B3B,OAAOC,OAAO,EACd4B,KAAK,CAAC,EACNhC,IAAKiC,CAAAA,UAAU;AAAA,QACdjB,KAAK;AAAA,QACLM,OAAO;AAAA,UACL,GAAGW;AAAAA,UACHzC;AAAAA,QAAAA;AAAAA,MACF,EACA;AAEJ,YAAM0C,WAAW5C,OAAOI,KAAKwC;AAI7B,YAAMC,SAASrC,MAAMC,QAClBC,IAAKC,CAAAA,UAAUiC,UAAUE,OAAOnC,MAAMoC,OAAO,GAAGF,UAAU,CAAA,CAAE,EAC5DhC,OAAOC,OAAO,EACd4B,KAAK,CAAC,EACN7B,OAAQmC,CAAAA,UAAUA,MAAMtB,QAAQ,MAAM,EACtChB,IACEsC,CAAAA,WACE;AAAA,QACCtB,KAAK;AAAA,QACLM,OAAO;AAAA,UAAE,GAAGgB,MAAMhB;AAAAA,UAAO9B;AAAAA,QAAAA;AAAAA,MAAM,EAErC;AAEF,aAAO,CAAC,GAAGuC,aAAa,GAAGI,MAAM;AAAA,IACnC;AAAA,EAAA,CACD;AAED,QAAMI,eAAe3C,eAAAA,eAAe;AAAA,IAClCC,QAASC,CAAAA,UAAU;AACjB,YAAMyC,gBAAwC,CAAA;AAE9CzC,YAAMC,QACHC,IAAKC,CAAAA,UAAUX,OAAOkD,gBAAgBvC,MAAMoC,OAAO,CAAE,EACrDI,QAASC,CAAAA,UACRpD,OAAOI,KAAKwC,UAAUE,OAAOM,MAAMC,EAAE,GAAGC,UACpCzC,OAAOC,OAAO,EACfqC,QAASI,CAAAA,YAAY;AACpBN,sBAAalB,KAAK;AAAA,UAChBL,KAAK;AAAA,UACLM,OAAO;AAAA,YACLwB,KAAK;AAAA,YACLC,MAAMF;AAAAA,YACNrD;AAAAA,UAAAA;AAAAA,QACF,CACD;AAAA,MACH,CAAC,CACL;AAEF,aAAO+C;AAAAA,IACT;AAAA,EAAA,CACD;AAED,QAAMS,SAASpD,eAAAA,eAAe;AAAA,IAC5BC,QAASC,CAAAA,UAELA,MAAMC,QACHC,IAAKC,WAAUA,MAAM+C,MAAO,EAC5BhB,KAAK,CAAC,EACN7B,OAAOC,OAAO,EACjBJ,IAAI,CAAC;AAAA,MAAEiB;AAAAA,MAAU,GAAGgC;AAAAA,IAAAA,OAAa;AAAA,MACjCjC,KAAK;AAAA,MACLM,OAAO;AAAA,QACL,GAAG2B;AAAAA,QACHzD;AAAAA,MAAAA;AAAAA,MAEFyB;AAAAA,IAAAA,EACA;AAAA,EAAA,CACL;AAED,QAAMiC,cAActD,eAAAA,eAAe;AAAA,IACjCC,QAASC,CAAAA,UAELA,MAAMC,QACHC,IAAKC,WAAUA,MAAMiD,WAAY,EACjClB,KAAK,CAAC,EACN7B,OAAOC,OAAO,EACjBJ,IAAI,CAAC;AAAA,MAAEiB;AAAAA,MAAU,GAAGkC;AAAAA,IAAAA,OAAc;AAAA,MAClCnC,KAAK;AAAA,MACLM,OAAO;AAAA,QACL,GAAG6B;AAAAA,QACH3D;AAAAA,MAAAA;AAAAA,MAEFyB;AAAAA,IAAAA,EACA;AAAA,EAAA,CACL;AAED,SAAO,MACLmC,OACE,CACE,GAAGlD,MAAAA,GACH,GAAGqC,aAAAA,GACH,GAAGT,MAAAA,GACH,GAAGkB,OAAAA,GACH,GAAGE,YAAAA,CAAa,GAEjBG,CAAAA,MAAM;AACL,WAAOlC,KAAKC,UAAUiC,CAAC;AAAA,EACzB,CACF;AACJ;AAQA,SAASC,gBAAgB;AACvB,QAAMC,WAAW3D,eAAAA,eAAe;AAAA,IAC9BC,QAASC,CAAAA,UAAUA,MAAMC,QAAQC,IAAKC,CAAAA,UAAUA,MAAMoC,OAAO;AAAA,EAAA,CAC9D;AAEDmB,UAAAA,QAAQ,MAAM;AAEZC,aACGC,iBAAiB,kCAAkC,EACnDjB,QAASkB,CAAAA,OAAOA,GAAGC,QAAQ;AAAA,EAChC,CAAC;AAGD,QAAMb,OAAOA,MACX,sCAAsCc,mBAAmBN,WAAWO,KAAK,GAAG,CAAC,CAAC;AAEhF,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,UAAAA,aAAAC,MAAAA,aAAAH,MAAA,QAAoChB,KAAAA,CAAM,CAAA;AAAA,WAAAgB;AAAAA,EAAA,GAAA;AAC5C;AAQO,SAASI,cAAc;AAC5B,QAAMC,OAAO/E,QAAAA;AAEb,SAAAgF,MAAAA,gBACGC,KAAAA,cAAY;AAAA,IAAA,IAAArD,WAAA;AAAA,aAAA,CAAAoD,MAAAA,gBACVE,cAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,QAAQC,IAAIC,aAAa;AAAA,QAAY;AAAA,QAAA,IAAA1D,WAAA;AAAA,iBAAAoD,MAAAA,gBAC9Cf,eAAa,EAAA;AAAA,QAAA;AAAA,MAAA,CAAA,GAAAe,MAAAA,gBAEfO,aAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAET,KAAAA;AAAAA,QAAM;AAAA,QAAAnD,UAAID,CAAAA,QAAGqD,MAAAA,gBAAMS,MAAAA,OAAU9D,GAAG;AAAA,MAAA,CAAI,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAGrD;AAEA,SAASoC,OAAU2B,KAAeC,IAAyB;AACzD,QAAMC,2BAAWC,IAAAA;AACjB,SAAOH,IAAI5E,OAAQgF,CAAAA,SAAS;AAC1B,UAAMC,MAAMJ,GAAGG,IAAI;AACnB,QAAIF,KAAKI,IAAID,GAAG,GAAG;AACjB,aAAO;AAAA,IACT;AACAH,SAAKK,IAAIF,GAAG;AACZ,WAAO;AAAA,EACT,CAAC;AACH;;;"}
|
package/dist/esm/HeadContent.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { createComponent } from "solid-js/web";
|
|
1
|
+
import { createComponent, template, effect, setAttribute } from "solid-js/web";
|
|
2
2
|
import * as Solid from "solid-js";
|
|
3
|
-
import { For } from "solid-js";
|
|
3
|
+
import { Show, For, onMount } from "solid-js";
|
|
4
4
|
import { MetaProvider } from "@solidjs/meta";
|
|
5
5
|
import { escapeHtml } from "@tanstack/router-core";
|
|
6
6
|
import { Asset } from "./Asset.js";
|
|
7
7
|
import { useRouter } from "./useRouter.js";
|
|
8
8
|
import { useRouterState } from "./useRouterState.js";
|
|
9
|
+
var _tmpl$ = /* @__PURE__ */ template(`<link rel=stylesheet data-tanstack-start-dev-styles>`);
|
|
9
10
|
const useTags = () => {
|
|
10
11
|
const router = useRouter();
|
|
11
12
|
const nonce = router.options.ssr?.nonce;
|
|
@@ -143,16 +144,37 @@ const useTags = () => {
|
|
|
143
144
|
return JSON.stringify(d);
|
|
144
145
|
});
|
|
145
146
|
};
|
|
147
|
+
function DevStylesLink() {
|
|
148
|
+
const routeIds = useRouterState({
|
|
149
|
+
select: (state) => state.matches.map((match) => match.routeId)
|
|
150
|
+
});
|
|
151
|
+
onMount(() => {
|
|
152
|
+
document.querySelectorAll("[data-tanstack-start-dev-styles]").forEach((el) => el.remove());
|
|
153
|
+
});
|
|
154
|
+
const href = () => `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(","))}`;
|
|
155
|
+
return (() => {
|
|
156
|
+
var _el$ = _tmpl$();
|
|
157
|
+
effect(() => setAttribute(_el$, "href", href()));
|
|
158
|
+
return _el$;
|
|
159
|
+
})();
|
|
160
|
+
}
|
|
146
161
|
function HeadContent() {
|
|
147
162
|
const tags = useTags();
|
|
148
163
|
return createComponent(MetaProvider, {
|
|
149
164
|
get children() {
|
|
150
|
-
return createComponent(
|
|
165
|
+
return [createComponent(Show, {
|
|
166
|
+
get when() {
|
|
167
|
+
return process.env.NODE_ENV !== "production";
|
|
168
|
+
},
|
|
169
|
+
get children() {
|
|
170
|
+
return createComponent(DevStylesLink, {});
|
|
171
|
+
}
|
|
172
|
+
}), createComponent(For, {
|
|
151
173
|
get each() {
|
|
152
174
|
return tags();
|
|
153
175
|
},
|
|
154
176
|
children: (tag) => createComponent(Asset, tag)
|
|
155
|
-
});
|
|
177
|
+
})];
|
|
156
178
|
}
|
|
157
179
|
});
|
|
158
180
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { MetaProvider } from '@solidjs/meta'\nimport { For } from 'solid-js'\nimport { escapeHtml } from '@tanstack/router-core'\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: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {\n const resultMeta: Array<RouterManagedTag> = []\n const metaByAttribute: Record<string, true> = {}\n let title: RouterManagedTag | undefined\n const routeMetasArray = routeMeta()\n for (let i = routeMetasArray.length - 1; i >= 0; i--) {\n const metas = routeMetasArray[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 if ('script:ld+json' in m) {\n // Handle JSON-LD structured data\n // Content is HTML-escaped to prevent XSS when injected via innerHTML\n try {\n const json = JSON.stringify(m['script:ld+json'])\n resultMeta.push({\n tag: 'script',\n attrs: {\n type: 'application/ld+json',\n },\n children: escapeHtml(json),\n })\n } catch {\n // Skip invalid JSON-LD objects\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 (router.options.ssr?.nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: router.options.ssr.nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n })\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: { ...asset.attrs, nonce },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\n })\n\n const preloadLinks = useRouterState({\n select: (state) => {\n const preloadLinks: 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 preloadLinks.push({\n tag: 'link',\n attrs: {\n rel: 'modulepreload',\n href: preload,\n nonce,\n },\n })\n }),\n )\n\n return preloadLinks\n },\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, ...style }) => ({\n tag: 'style',\n attrs: {\n ...style,\n nonce,\n },\n children,\n })),\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 })\n\n return () =>\n uniqBy(\n [\n ...meta(),\n ...preloadLinks(),\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 * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n */\nexport function HeadContent() {\n const tags = useTags()\n\n return (\n <MetaProvider>\n <For each={tags()}>{(tag) => <Asset {...tag} />}</For>\n </MetaProvider>\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":["useTags","router","useRouter","nonce","options","ssr","routeMeta","useRouterState","select","state","matches","map","match","meta","filter","Boolean","Solid","createMemo","resultMeta","metaByAttribute","title","routeMetasArray","i","length","metas","j","m","tag","children","json","JSON","stringify","push","attrs","type","escapeHtml","attribute","name","property","content","reverse","links","constructed","flat","link","manifest","assets","routes","routeId","asset","preloadLinks","looseRoutesById","forEach","route","id","preloads","preload","rel","href","styles","style","headScripts","script","uniqBy","d","HeadContent","tags","_$createComponent","MetaProvider","For","each","Asset","arr","fn","seen","Set","item","key","has","add"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { MetaProvider } from '@solidjs/meta'\nimport { For, Show, onMount } from 'solid-js'\nimport { escapeHtml } from '@tanstack/router-core'\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: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {\n const resultMeta: Array<RouterManagedTag> = []\n const metaByAttribute: Record<string, true> = {}\n let title: RouterManagedTag | undefined\n const routeMetasArray = routeMeta()\n for (let i = routeMetasArray.length - 1; i >= 0; i--) {\n const metas = routeMetasArray[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 if ('script:ld+json' in m) {\n // Handle JSON-LD structured data\n // Content is HTML-escaped to prevent XSS when injected via innerHTML\n try {\n const json = JSON.stringify(m['script:ld+json'])\n resultMeta.push({\n tag: 'script',\n attrs: {\n type: 'application/ld+json',\n },\n children: escapeHtml(json),\n })\n } catch {\n // Skip invalid JSON-LD objects\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 (router.options.ssr?.nonce) {\n resultMeta.push({\n tag: 'meta',\n attrs: {\n property: 'csp-nonce',\n content: router.options.ssr.nonce,\n },\n })\n }\n resultMeta.reverse()\n\n return resultMeta\n })\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: { ...asset.attrs, nonce },\n }) satisfies RouterManagedTag,\n )\n\n return [...constructed, ...assets]\n },\n })\n\n const preloadLinks = useRouterState({\n select: (state) => {\n const preloadLinks: 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 preloadLinks.push({\n tag: 'link',\n attrs: {\n rel: 'modulepreload',\n href: preload,\n nonce,\n },\n })\n }),\n )\n\n return preloadLinks\n },\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, ...style }) => ({\n tag: 'style',\n attrs: {\n ...style,\n nonce,\n },\n children,\n })),\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 })\n\n return () =>\n uniqBy(\n [\n ...meta(),\n ...preloadLinks(),\n ...links(),\n ...styles(),\n ...headScripts(),\n ] as Array<RouterManagedTag>,\n (d) => {\n return JSON.stringify(d)\n },\n )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n const routeIds = useRouterState({\n select: (state) => state.matches.map((match) => match.routeId),\n })\n\n onMount(() => {\n // After hydration, remove the SSR-rendered dev styles link\n document\n .querySelectorAll('[data-tanstack-start-dev-styles]')\n .forEach((el) => el.remove())\n })\n\n // Build the same href on both server and client for hydration match\n const href = () =>\n `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(','))}`\n\n return <link rel=\"stylesheet\" href={href()} data-tanstack-start-dev-styles />\n}\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n */\nexport function HeadContent() {\n const tags = useTags()\n\n return (\n <MetaProvider>\n <Show when={process.env.NODE_ENV !== 'production'}>\n <DevStylesLink />\n </Show>\n <For each={tags()}>{(tag) => <Asset {...tag} />}</For>\n </MetaProvider>\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":["useTags","router","useRouter","nonce","options","ssr","routeMeta","useRouterState","select","state","matches","map","match","meta","filter","Boolean","Solid","createMemo","resultMeta","metaByAttribute","title","routeMetasArray","i","length","metas","j","m","tag","children","json","JSON","stringify","push","attrs","type","escapeHtml","attribute","name","property","content","reverse","links","constructed","flat","link","manifest","assets","routes","routeId","asset","preloadLinks","looseRoutesById","forEach","route","id","preloads","preload","rel","href","styles","style","headScripts","script","uniqBy","d","DevStylesLink","routeIds","onMount","document","querySelectorAll","el","remove","encodeURIComponent","join","_el$","_tmpl$","_$effect","_$setAttribute","HeadContent","tags","_$createComponent","MetaProvider","Show","when","process","env","NODE_ENV","For","each","Asset","arr","fn","seen","Set","item","key","has","add"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as Solid from 'solid-js';
|
|
2
2
|
import { MetaProvider } from '@solidjs/meta';
|
|
3
|
-
import { For } from 'solid-js';
|
|
3
|
+
import { For, Show, onMount } from 'solid-js';
|
|
4
4
|
import { escapeHtml } from '@tanstack/router-core';
|
|
5
5
|
import { Asset } from './Asset';
|
|
6
6
|
import { useRouter } from './useRouter';
|
|
@@ -168,6 +168,26 @@ export const useTags = () => {
|
|
|
168
168
|
return JSON.stringify(d);
|
|
169
169
|
});
|
|
170
170
|
};
|
|
171
|
+
/**
|
|
172
|
+
* Renders a stylesheet link for dev mode CSS collection.
|
|
173
|
+
* On the server, renders the full link with route-scoped CSS URL.
|
|
174
|
+
* On the client, renders the same link to avoid hydration mismatch,
|
|
175
|
+
* then removes it after hydration since Vite's HMR handles CSS updates.
|
|
176
|
+
*/
|
|
177
|
+
function DevStylesLink() {
|
|
178
|
+
const routeIds = useRouterState({
|
|
179
|
+
select: (state) => state.matches.map((match) => match.routeId),
|
|
180
|
+
});
|
|
181
|
+
onMount(() => {
|
|
182
|
+
// After hydration, remove the SSR-rendered dev styles link
|
|
183
|
+
document
|
|
184
|
+
.querySelectorAll('[data-tanstack-start-dev-styles]')
|
|
185
|
+
.forEach((el) => el.remove());
|
|
186
|
+
});
|
|
187
|
+
// Build the same href on both server and client for hydration match
|
|
188
|
+
const href = () => `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(','))}`;
|
|
189
|
+
return <link rel="stylesheet" href={href()} data-tanstack-start-dev-styles/>;
|
|
190
|
+
}
|
|
171
191
|
/**
|
|
172
192
|
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
|
|
173
193
|
* When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`
|
|
@@ -177,6 +197,9 @@ export const useTags = () => {
|
|
|
177
197
|
export function HeadContent() {
|
|
178
198
|
const tags = useTags();
|
|
179
199
|
return (<MetaProvider>
|
|
200
|
+
<Show when={process.env.NODE_ENV !== 'production'}>
|
|
201
|
+
<DevStylesLink />
|
|
202
|
+
</Show>
|
|
180
203
|
<For each={tags()}>{(tag) => <Asset {...tag}/>}</For>
|
|
181
204
|
</MetaProvider>);
|
|
182
205
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadContent.jsx","sourceRoot":"","sources":["../../src/HeadContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"HeadContent.jsx","sourceRoot":"","sources":["../../src/HeadContent.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/HeadContent.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as Solid from 'solid-js'
|
|
2
2
|
import { MetaProvider } from '@solidjs/meta'
|
|
3
|
-
import { For } from 'solid-js'
|
|
3
|
+
import { For, Show, onMount } from 'solid-js'
|
|
4
4
|
import { escapeHtml } from '@tanstack/router-core'
|
|
5
5
|
import { Asset } from './Asset'
|
|
6
6
|
import { useRouter } from './useRouter'
|
|
@@ -197,6 +197,31 @@ export const useTags = () => {
|
|
|
197
197
|
)
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
+
/**
|
|
201
|
+
* Renders a stylesheet link for dev mode CSS collection.
|
|
202
|
+
* On the server, renders the full link with route-scoped CSS URL.
|
|
203
|
+
* On the client, renders the same link to avoid hydration mismatch,
|
|
204
|
+
* then removes it after hydration since Vite's HMR handles CSS updates.
|
|
205
|
+
*/
|
|
206
|
+
function DevStylesLink() {
|
|
207
|
+
const routeIds = useRouterState({
|
|
208
|
+
select: (state) => state.matches.map((match) => match.routeId),
|
|
209
|
+
})
|
|
210
|
+
|
|
211
|
+
onMount(() => {
|
|
212
|
+
// After hydration, remove the SSR-rendered dev styles link
|
|
213
|
+
document
|
|
214
|
+
.querySelectorAll('[data-tanstack-start-dev-styles]')
|
|
215
|
+
.forEach((el) => el.remove())
|
|
216
|
+
})
|
|
217
|
+
|
|
218
|
+
// Build the same href on both server and client for hydration match
|
|
219
|
+
const href = () =>
|
|
220
|
+
`/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds().join(','))}`
|
|
221
|
+
|
|
222
|
+
return <link rel="stylesheet" href={href()} data-tanstack-start-dev-styles />
|
|
223
|
+
}
|
|
224
|
+
|
|
200
225
|
/**
|
|
201
226
|
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
|
|
202
227
|
* When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`
|
|
@@ -208,6 +233,9 @@ export function HeadContent() {
|
|
|
208
233
|
|
|
209
234
|
return (
|
|
210
235
|
<MetaProvider>
|
|
236
|
+
<Show when={process.env.NODE_ENV !== 'production'}>
|
|
237
|
+
<DevStylesLink />
|
|
238
|
+
</Show>
|
|
211
239
|
<For each={tags()}>{(tag) => <Asset {...tag} />}</For>
|
|
212
240
|
</MetaProvider>
|
|
213
241
|
)
|