@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
40 lines (39 loc) • 1.57 kB
JavaScript
import { useHydrated } from "./ClientOnly.js";
import { Asset } from "./Asset.js";
import { useTags } from "./headContentUtils.js";
import { createComponent } from "solid-js/web";
import { For, createEffect, createMemo } from "solid-js";
import { MetaProvider } from "@solidjs/meta";
//#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() {
const tags = useTags();
const hydrated = useHydrated();
createEffect(() => {
if (hydrated()) document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
});
const filteredTags = createMemo(() => {
if (hydrated()) return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]);
return tags();
});
return createComponent(MetaProvider, { get children() {
return createComponent(For, {
get each() {
return filteredTags();
},
children: (tag) => createComponent(Asset, tag)
});
} });
}
//#endregion
export { HeadContent };
//# sourceMappingURL=HeadContent.dev.js.map