@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
1 lines • 3.46 kB
Source Map (JSON)
{"version":3,"file":"HeadContent.dev.cjs","names":["For","createEffect","createMemo","Portal","isServer","Asset","useHydrated","useRouter","useTags","HeadContentProps","DEV_STYLES_ATTR","HeadContent","props","tags","assetCrossOrigin","hydrated","router","const","document","querySelectorAll","forEach","el","remove","filteredTags","filter","tag","attrs","content","_$createComponent","each","children","t","mount","head"],"sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import { For, createEffect, createMemo } from 'solid-js'\nimport { Portal, isServer } from '@solidjs/web'\nimport { Asset } from './Asset'\nimport { useHydrated } from './ClientOnly'\nimport { useRouter } from './useRouter'\nimport { useTags } from './headContentUtils'\nimport type { HeadContentProps } from './HeadContent'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\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 *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n */\nexport function HeadContent(props: HeadContentProps) {\n const tags = useTags(props.assetCrossOrigin)\n const hydrated = useHydrated()\n const router = useRouter()\n\n // Fallback cleanup for hydration mismatch cases\n // Runs when hydration completes to remove any orphaned dev styles links from DOM\n createEffect(\n () => [hydrated()] as const,\n ([hydrated]) => {\n if (hydrated) {\n document\n .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n .forEach((el) => el.remove())\n }\n },\n )\n\n // Filter out dev styles after hydration\n const filteredTags = createMemo(() => {\n if (hydrated()) {\n return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n }\n return tags()\n })\n\n const content = () => (\n <For each={filteredTags()}>\n {(tag) => {\n const t = tag() as any\n return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />\n }}\n </For>\n )\n\n return (isServer ?? router.isServer) ? (\n content()\n ) : (\n <Portal mount={document.head}>{content()}</Portal>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAMU,kBAAkB;;;;;;;;;;AAWxB,SAAgBC,YAAYC,OAAyB;CACnD,MAAMC,OAAOL,yBAAAA,QAAQI,MAAME,iBAAiB;CAC5C,MAAMC,WAAWT,mBAAAA,aAAa;CAC9B,MAAMU,SAAST,kBAAAA,WAAW;AAI1BN,EAAAA,GAAAA,SAAAA,oBACQ,CAACc,UAAU,CAAC,GACjB,CAACA,cAAc;AACd,MAAIA,SACFG,UACGC,iBAAiB,QAAQT,gBAAe,GAAI,CAC5CU,SAASC,OAAOA,GAAGC,QAAQ,CAAC;GAGpC;CAGD,MAAMC,gBAAAA,GAAAA,SAAAA,kBAAgC;AACpC,MAAIR,UAAU,CACZ,QAAOF,MAAM,CAACW,QAAQC,QAAQ,CAACA,IAAIC,QAAQhB,iBAAiB;AAE9D,SAAOG,MAAM;GACb;CAEF,MAAMc,iBAAAA,GAAAA,aAAAA,iBACH3B,SAAAA,KAAG;EAAA,IAAC6B,OAAI;AAAA,UAAEN,cAAc;;EAAAO,WACrBL,QAAQ;GACR,MAAMM,IAAIN,KAAK;AACf,WAAA,GAAA,aAAA,iBAAQpB,cAAAA,OAAK;IAAA,IAACoB,MAAG;AAAA,YAAEM,EAAEN;;IAAG,IAAEC,QAAK;AAAA,YAAEK,EAAEL;;IAAK,IAAEI,WAAQ;AAAA,YAAEC,EAAED;;IAAQ,CAAA;;EAC/D,CAEJ;AAED,QAAQ1B,aAAAA,YAAYY,OAAOZ,WACzBuB,SAAS,IAAA,GAAA,aAAA,iBAERxB,aAAAA,QAAM;EAAA,IAAC6B,QAAK;AAAA,UAAEd,SAASe;;EAAI,IAAAH,WAAA;AAAA,UAAGH,SAAS;;EAAA,CACzC"}