@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
61 lines (60 loc) • 2.22 kB
JavaScript
require("./_virtual/_rolldown/runtime.cjs");
const require_ClientOnly = require("./ClientOnly.cjs");
const require_useRouter = require("./useRouter.cjs");
const require_Asset = require("./Asset.cjs");
const require_headContentUtils = require("./headContentUtils.cjs");
let _solidjs_web = require("@solidjs/web");
let solid_js = require("solid-js");
//#region src/HeadContent.dev.tsx
var DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
/**
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
* When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`
* to ensure it's part of the reactive tree and updates correctly during client-side navigation.
* The component uses portals internally to render content into the `<head>` element.
*
* Development version: filters out dev styles link after hydration and
* includes a fallback cleanup effect for hydration mismatch cases.
*/
function HeadContent(props) {
const tags = require_headContentUtils.useTags(props.assetCrossOrigin);
const hydrated = require_ClientOnly.useHydrated();
const router = require_useRouter.useRouter();
(0, solid_js.createEffect)(() => [hydrated()], ([hydrated]) => {
if (hydrated) document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
});
const filteredTags = (0, solid_js.createMemo)(() => {
if (hydrated()) return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]);
return tags();
});
const content = () => (0, _solidjs_web.createComponent)(solid_js.For, {
get each() {
return filteredTags();
},
children: (tag) => {
const t = tag();
return (0, _solidjs_web.createComponent)(require_Asset.Asset, {
get tag() {
return t.tag;
},
get attrs() {
return t.attrs;
},
get children() {
return t.children;
}
});
}
});
return _solidjs_web.isServer ?? router.isServer ? content() : (0, _solidjs_web.createComponent)(_solidjs_web.Portal, {
get mount() {
return document.head;
},
get children() {
return content();
}
});
}
//#endregion
exports.HeadContent = HeadContent;
//# sourceMappingURL=HeadContent.dev.cjs.map