mirror of
https://github.com/LukeHagar/ui-development-kit.git
synced 2025-12-09 21:07:48 +00:00
103 lines
4.4 KiB
JavaScript
103 lines
4.4 KiB
JavaScript
import { c as create_ssr_component, a as subscribe, l as createEventDispatcher, e as escape, g as getContext } from './ssr-pGtI3Kui.js';
|
|
import { w as writable } from './index2-CcAcUxny.js';
|
|
import './client-CQ5E_ugM.js';
|
|
|
|
const storeHighlightJs = writable(void 0);
|
|
const cBase = "overflow-hidden shadow";
|
|
const cHeader = "text-xs text-white/50 uppercase flex justify-between items-center p-2 pl-4";
|
|
const cPre = "whitespace-pre-wrap break-all p-4 pt-1";
|
|
function languageFormatter(lang) {
|
|
if (lang === "js")
|
|
return "javascript";
|
|
if (lang === "ts")
|
|
return "typescript";
|
|
if (lang === "shell")
|
|
return "terminal";
|
|
return lang;
|
|
}
|
|
const CodeBlock = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
let classesBase;
|
|
let $storeHighlightJs, $$unsubscribe_storeHighlightJs;
|
|
$$unsubscribe_storeHighlightJs = subscribe(storeHighlightJs, (value) => $storeHighlightJs = value);
|
|
createEventDispatcher();
|
|
let { language = "plaintext" } = $$props;
|
|
let { code = "" } = $$props;
|
|
let { lineNumbers = false } = $$props;
|
|
let { background = "bg-neutral-900/90" } = $$props;
|
|
let { blur = "" } = $$props;
|
|
let { text = "text-sm" } = $$props;
|
|
let { color = "text-white" } = $$props;
|
|
let { rounded = "rounded-container-token" } = $$props;
|
|
let { shadow = "shadow" } = $$props;
|
|
let { button = "btn btn-sm variant-soft !text-white" } = $$props;
|
|
let { buttonLabel = "Copy" } = $$props;
|
|
let { buttonCopied = "👍" } = $$props;
|
|
let formatted = false;
|
|
let displayCode = code;
|
|
if ($$props.language === void 0 && $$bindings.language && language !== void 0)
|
|
$$bindings.language(language);
|
|
if ($$props.code === void 0 && $$bindings.code && code !== void 0)
|
|
$$bindings.code(code);
|
|
if ($$props.lineNumbers === void 0 && $$bindings.lineNumbers && lineNumbers !== void 0)
|
|
$$bindings.lineNumbers(lineNumbers);
|
|
if ($$props.background === void 0 && $$bindings.background && background !== void 0)
|
|
$$bindings.background(background);
|
|
if ($$props.blur === void 0 && $$bindings.blur && blur !== void 0)
|
|
$$bindings.blur(blur);
|
|
if ($$props.text === void 0 && $$bindings.text && text !== void 0)
|
|
$$bindings.text(text);
|
|
if ($$props.color === void 0 && $$bindings.color && color !== void 0)
|
|
$$bindings.color(color);
|
|
if ($$props.rounded === void 0 && $$bindings.rounded && rounded !== void 0)
|
|
$$bindings.rounded(rounded);
|
|
if ($$props.shadow === void 0 && $$bindings.shadow && shadow !== void 0)
|
|
$$bindings.shadow(shadow);
|
|
if ($$props.button === void 0 && $$bindings.button && button !== void 0)
|
|
$$bindings.button(button);
|
|
if ($$props.buttonLabel === void 0 && $$bindings.buttonLabel && buttonLabel !== void 0)
|
|
$$bindings.buttonLabel(buttonLabel);
|
|
if ($$props.buttonCopied === void 0 && $$bindings.buttonCopied && buttonCopied !== void 0)
|
|
$$bindings.buttonCopied(buttonCopied);
|
|
{
|
|
if ($storeHighlightJs !== void 0) {
|
|
displayCode = $storeHighlightJs.highlight(code, { language }).value.trim();
|
|
formatted = true;
|
|
}
|
|
}
|
|
{
|
|
if (lineNumbers) {
|
|
displayCode = displayCode.replace(/^/gm, () => {
|
|
return '<span class="line"></span> ';
|
|
});
|
|
formatted = true;
|
|
}
|
|
}
|
|
classesBase = `${cBase} ${background} ${blur} ${text} ${color} ${rounded} ${shadow} ${$$props.class ?? ""}`;
|
|
$$unsubscribe_storeHighlightJs();
|
|
return ` ${language && code ? `<div class="${"codeblock " + escape(classesBase, true)}" data-testid="codeblock"> <header class="${"codeblock-header " + escape(cHeader, true)}"> <span class="codeblock-language">${escape(languageFormatter(language))}</span> <button type="button" class="${"codeblock-btn " + escape(button, true)}">${escape(buttonLabel)}</button></header> <pre class="${"codeblock-pre " + escape(cPre, true)}"><code class="${"codeblock-code language-" + escape(language, true) + " lineNumbers"}">${formatted ? `<!-- HTML_TAG_START -->${displayCode}<!-- HTML_TAG_END -->` : `${escape(code.trim())}`}</code></pre></div>` : ``}`;
|
|
});
|
|
const getStores = () => {
|
|
const stores = getContext("__svelte__");
|
|
return {
|
|
/** @type {typeof page} */
|
|
page: {
|
|
subscribe: stores.page.subscribe
|
|
},
|
|
/** @type {typeof navigating} */
|
|
navigating: {
|
|
subscribe: stores.navigating.subscribe
|
|
},
|
|
/** @type {typeof updated} */
|
|
updated: stores.updated
|
|
};
|
|
};
|
|
const page = {
|
|
subscribe(fn) {
|
|
const store = getStores().page;
|
|
return store.subscribe(fn);
|
|
}
|
|
};
|
|
|
|
export { CodeBlock as C, page as p, storeHighlightJs as s };
|
|
//# sourceMappingURL=stores-CEBzDsQs.js.map
|