import { isServer } from '@tanstack/router-core/isServer';
import { createEffect, onCleanup, onSettled } from 'solid-js';
import { useRouter } from './useRouter';
const INLINE_CSS_HYDRATION_ATTR = 'data-tsr-inline-css';
export function Asset(asset) {
const { tag, attrs, children } = asset;
switch (tag) {
case 'title':
return ;
case 'meta':
return <HeadElement tag="meta" attrs={attrs}/>;
case 'link':
return <HeadElement tag="link" attrs={attrs}/>;
case 'style':
if (asset.inlineCss &&
(process.env.TSS_INLINE_CSS_ENABLED === 'true' ||
(process.env.TSS_INLINE_CSS_ENABLED === undefined && isServer))) {
return <InlineCssStyle attrs={attrs}>{children}</InlineCssStyle>;
}
return <HeadElement tag="style" attrs={attrs} children={children}/>;
case 'script':
return <Script attrs={attrs} children={children}/>;
default:
return null;
}
}
// On the client, relocate a rendered head element into document.head so head
// tags end up in the right place even when <HeadContent /> is rendered in
// <body>. The *same* node that Solid rendered/hydrated is moved — never
// recreated — so the server-rendered node stays claimed (its hydration id is
// preserved) and stylesheets/scripts are not refetched or re-executed.
//
// When <HeadContent /> is placed in <head> (the SSR/hydration case), the node
// is already in document.head, so this is a no-op and the element is left
// exactly where Solid hydrated it.
function useRelocateToHead(getEl) {
onSettled(() => {
const el = getEl();
if (el && el.parentNode !== document.head) {
document.head.appendChild(el);
}
});
onCleanup(() => {
const el = getEl();
if (el?.parentNode) {
el.parentNode.removeChild(el);
}
});
}
function InlineCssStyle({ attrs, children, }) {
const isInlineCssPlaceholder = children === undefined;
const html = isInlineCssPlaceholder
? typeof document === 'undefined'
? ''
: (document.querySelector(`style[${INLINE_CSS_HYDRATION_ATTR}]`)?.textContent ?? '')
: (children ?? '');
return (<HeadElement tag="style" attrs={{ ...attrs, [INLINE_CSS_HYDRATION_ATTR]: '' }} children={html}/>);
}
function HeadElement(props) {
// Each branch must live in its own `case` block so the Solid compiler emits
// exactly ONE getNextElement() per invocation. Sequential `if ... return`
// statements compile to multiple getNextElement() calls that all execute,
// desyncing the hydration key counter (causing "expected <style>" mismatches
// and unclaimed nodes).
//
// We capture the element via the JSX return value (a real DOM node in Solid)
// rather than a `ref` attribute: a `ref` compiles to a _$ref() call that
// interferes with attribute spreading on hydration-claimed nodes (wiping the
// SSR attributes).
let element;
switch (props.tag) {
case 'style': {
const attrs = {
...props.attrs,
innerHTML: typeof props.children === 'string' ? props.children : undefined,
};
element = (<style {...attrs}/>);
break;
}
case 'meta':
element = (<meta {...props.attrs}/>);
break;
default:
element = (<link {...props.attrs}/>);
}
// Move the rendered/hydrated element into <head> when <HeadContent /> is
// placed in <body>. No-op when already in <head>. Called unconditionally so
// server and client register the same primitives (see Title).
useRelocateToHead(() => element);
return element;
}
function Title(props) {
let el;
// IMPORTANT: call these hooks UNCONDITIONALLY (do not guard with isServer).
// Solid's hydration relies on the component body registering the same
// reactive primitives in the same order on the server and the client. An
// `if (!isServer)` guard would skip them on the server but run them on the
// client, desyncing the hydration owner tree and causing the server <title>
// to be left unclaimed (and a duplicate appended). These hooks are no-ops
// during SSR anyway.
// Move the rendered/hydrated <title> into <head> when <HeadContent /> is
// placed in <body>. No-op when already in <head>.
useRelocateToHead(() => el);
// Keep document.title in sync during client-side navigation.
createEffect(() => props.children, (titleText) => {
document.title = typeof titleText === 'string' ? titleText : '';
});
return (<title ref={(e) => (el = e)} {...props.attrs}>
{props.children}
);
}
function Script(props) {
const router = useRouter();
const attrs = props.attrs;
const children = props.children;
const dataScript = typeof attrs?.type === 'string' &&
attrs.type !== '' &&
attrs.type !== 'text/javascript' &&
attrs.type !== 'module';
// --- Server rendering ---
if (isServer ?? router.isServer) {
if (attrs?.src) {
return ;
}
if (typeof children === 'string') {
return