@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
187 lines (186 loc) • 6.13 kB
JavaScript
const require_useRouter = require("./useRouter.cjs");
let _solidjs_web = require("@solidjs/web");
let solid_js = require("solid-js");
let _tanstack_router_core_isServer = require("@tanstack/router-core/isServer");
//#region src/Asset.tsx
var _tmpl$ = /* @__PURE__ */ (0, _solidjs_web.template)(`<style>`);
var _tmpl$2 = /* @__PURE__ */ (0, _solidjs_web.template)(`<meta>`);
var _tmpl$3 = /* @__PURE__ */ (0, _solidjs_web.template)(`<link>`);
var _tmpl$4 = /* @__PURE__ */ (0, _solidjs_web.template)(`<title>`);
var _tmpl$5 = /* @__PURE__ */ (0, _solidjs_web.template)(`<script>`);
var INLINE_CSS_HYDRATION_ATTR = "data-tsr-inline-css";
function Asset(asset) {
const { tag, attrs, children } = asset;
switch (tag) {
case "title": return (0, _solidjs_web.createComponent)(Title, {
attrs,
children
});
case "meta": return (0, _solidjs_web.createComponent)(HeadElement, {
tag: "meta",
attrs
});
case "link": return (0, _solidjs_web.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 && _tanstack_router_core_isServer.isServer)) return (0, _solidjs_web.createComponent)(InlineCssStyle, {
attrs,
children
});
return (0, _solidjs_web.createComponent)(HeadElement, {
tag: "style",
attrs,
children
});
case "script": return (0, _solidjs_web.createComponent)(Script, {
attrs,
children
});
default: return null;
}
}
function useRelocateToHead(getEl) {
(0, solid_js.onSettled)(() => {
const el = getEl();
if (el && el.parentNode !== document.head) document.head.appendChild(el);
});
(0, solid_js.onCleanup)(() => {
const el = getEl();
if (el?.parentNode) el.parentNode.removeChild(el);
});
}
function InlineCssStyle({ attrs, children }) {
return (0, _solidjs_web.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$();
(0, _solidjs_web.spread)(_el$, attrs, false);
return _el$;
})();
break;
}
case "meta":
element = (() => {
var _el$2 = _tmpl$2();
(0, _solidjs_web.spread)(_el$2, (0, _solidjs_web.mergeProps)(() => {
return props.attrs;
}), false);
return _el$2;
})();
break;
default: element = (() => {
var _el$3 = _tmpl$3();
(0, _solidjs_web.spread)(_el$3, (0, _solidjs_web.mergeProps)(() => {
return props.attrs;
}), false);
return _el$3;
})();
}
useRelocateToHead(() => element);
return element;
}
function Title(props) {
let el;
useRelocateToHead(() => el);
(0, solid_js.createEffect)(() => props.children, (titleText) => {
document.title = typeof titleText === "string" ? titleText : "";
});
var _el$4 = _tmpl$4();
(0, _solidjs_web.ref)(() => {
return (e) => el = e;
}, _el$4);
(0, _solidjs_web.spread)(_el$4, (0, _solidjs_web.mergeProps)(() => {
return props.attrs;
}), true);
(0, _solidjs_web.insert)(_el$4, () => {
return props.children;
});
return _el$4;
}
function Script(props) {
const router = require_useRouter.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 (_tanstack_router_core_isServer.isServer ?? router.isServer) {
if (attrs?.src) {
var _el$5 = _tmpl$5();
(0, _solidjs_web.spread)(_el$5, attrs, false);
return _el$5;
}
if (typeof children === "string") {
var _el$6 = _tmpl$5();
(0, _solidjs_web.spread)(_el$6, (0, _solidjs_web.mergeProps)(attrs, { innerHTML: children }), false);
return _el$6;
}
return null;
}
if (dataScript && typeof children === "string") {
var _el$7 = _tmpl$5();
(0, _solidjs_web.spread)(_el$7, (0, _solidjs_web.mergeProps)(attrs, { innerHTML: children }), false);
return _el$7;
}
(0, solid_js.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
exports.Asset = Asset;
//# sourceMappingURL=Asset.cjs.map