@tanstack/solid-router/dist/esm/Asset.js

Modern and scalable routing for Solid applications

import { useRouter } from "./useRouter.js";
import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
import { createEffect, onCleanup, onSettled } from "solid-js";
import { isServer } from "@tanstack/router-core/isServer";
//#region src/Asset.tsx
var _tmpl$ = /* @__PURE__ */ template(`<style>`);
var _tmpl$2 = /* @__PURE__ */ template(`<meta>`);
var _tmpl$3 = /* @__PURE__ */ template(`<link>`);
var _tmpl$4 = /* @__PURE__ */ template(`<title>`);
var _tmpl$5 = /* @__PURE__ */ template(`<script>`);
var INLINE_CSS_HYDRATION_ATTR = "data-tsr-inline-css";
function Asset(asset) {
	const { tag, attrs, children } = asset;
	switch (tag) {
		case "title": return createComponent(Title, {
			attrs,
			children
		});
		case "meta": return createComponent(HeadElement, {
			tag: "meta",
			attrs
		});
		case "link": return createComponent(HeadElement, {
			tag: "link",
			attrs
		});
		case "style":
			if (asset.inlineCss && (process.env.TSS_INLINE_CSS_ENABLED === "true" || process.env.TSS_INLINE_CSS_ENABLED === void 0 && isServer)) return createComponent(InlineCssStyle, {
				attrs,
				children
			});
			return createComponent(HeadElement, {
				tag: "style",
				attrs,
				children
			});
		case "script": return createComponent(Script, {
			attrs,
			children
		});
		default: return null;
	}
}
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 }) {
	return createComponent(HeadElement, {
		tag: "style",
		get attrs() {
			return {
				...attrs,
				[INLINE_CSS_HYDRATION_ATTR]: ""
			};
		},
		children: children === void 0 ? typeof document === "undefined" ? "" : document.querySelector(`style[${INLINE_CSS_HYDRATION_ATTR}]`)?.textContent ?? "" : children ?? ""
	});
}
function HeadElement(props) {
	let element;
	switch (props.tag) {
		case "style": {
			const attrs = {
				...props.attrs,
				innerHTML: typeof props.children === "string" ? props.children : void 0
			};
			element = (() => {
				var _el$ = _tmpl$();
				spread(_el$, attrs, false);
				return _el$;
			})();
			break;
		}
		case "meta":
			element = (() => {
				var _el$2 = _tmpl$2();
				spread(_el$2, mergeProps(() => {
					return props.attrs;
				}), false);
				return _el$2;
			})();
			break;
		default: element = (() => {
			var _el$3 = _tmpl$3();
			spread(_el$3, mergeProps(() => {
				return props.attrs;
			}), false);
			return _el$3;
		})();
	}
	useRelocateToHead(() => element);
	return element;
}
function Title(props) {
	let el;
	useRelocateToHead(() => el);
	createEffect(() => props.children, (titleText) => {
		document.title = typeof titleText === "string" ? titleText : "";
	});
	var _el$4 = _tmpl$4();
	ref(() => {
		return (e) => el = e;
	}, _el$4);
	spread(_el$4, mergeProps(() => {
		return props.attrs;
	}), true);
	insert(_el$4, () => {
		return props.children;
	});
	return _el$4;
}
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";
	if (isServer ?? router.isServer) {
		if (attrs?.src) {
			var _el$5 = _tmpl$5();
			spread(_el$5, attrs, false);
			return _el$5;
		}
		if (typeof children === "string") {
			var _el$6 = _tmpl$5();
			spread(_el$6, mergeProps(attrs, { innerHTML: children }), false);
			return _el$6;
		}
		return null;
	}
	if (dataScript && typeof children === "string") {
		var _el$7 = _tmpl$5();
		spread(_el$7, mergeProps(attrs, { innerHTML: children }), false);
		return _el$7;
	}
	createEffect(() => ({
		attrs,
		children,
		dataScript
	}), ({ attrs, children, dataScript }) => {
		if (dataScript) return;
		let script;
		if (attrs?.src) {
			const normSrc = (() => {
				try {
					const base = document.baseURI || window.location.href;
					return new URL(attrs.src, base).href;
				} catch {
					return attrs.src;
				}
			})();
			if (Array.from(document.querySelectorAll("script[src]")).find((el) => el.src === normSrc)) return;
			script = document.createElement("script");
			for (const [key, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
			document.head.appendChild(script);
		} else if (typeof children === "string") {
			const typeAttr = typeof attrs?.type === "string" ? attrs.type : "text/javascript";
			const nonceAttr = typeof attrs?.nonce === "string" ? attrs.nonce : void 0;
			if (Array.from(document.querySelectorAll("script:not([src])")).find((el) => {
				if (!(el instanceof HTMLScriptElement)) return false;
				const sType = el.getAttribute("type") ?? "text/javascript";
				const sNonce = el.getAttribute("nonce") ?? void 0;
				return el.textContent === children && sType === typeAttr && sNonce === nonceAttr;
			})) return;
			script = document.createElement("script");
			script.textContent = children;
			if (attrs) {
				for (const [key, value] of Object.entries(attrs)) if (value !== void 0 && value !== false) script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
			}
			document.head.appendChild(script);
		}
		return () => {
			if (script?.parentNode) script.parentNode.removeChild(script);
		};
	});
	return null;
}
//#endregion
export { Asset };

//# sourceMappingURL=Asset.js.map