@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
47 lines (46 loc) • 1.35 kB
JavaScript
import { useRouter } from "./useRouter.js";
import { Asset } from "./Asset.js";
import { useTags } from "./headContentUtils.js";
import { Portal, createComponent, isServer } from "@solidjs/web";
import { For } from "solid-js";
//#region src/HeadContent.tsx
/**
* @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.
*/
function HeadContent(props) {
const tags = useTags(props.assetCrossOrigin);
const router = useRouter();
const content = () => createComponent(For, {
get each() {
return tags();
},
children: (tag) => {
const t = tag();
return createComponent(Asset, {
get tag() {
return t.tag;
},
get attrs() {
return t.attrs;
},
get children() {
return t.children;
}
});
}
});
return isServer ?? router.isServer ? content() : createComponent(Portal, {
get mount() {
return document.head;
},
get children() {
return content();
}
});
}
//#endregion
export { HeadContent };
//# sourceMappingURL=HeadContent.js.map