Performance enhancements galore! New themining system
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
This commit is contained in:
@@ -1,17 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
import { type Grammar } from 'shiki';
|
||||
import { hashSync } from '~/utils/hash';
|
||||
const props = defineProps<{ code: string; lang: string }>();
|
||||
const props = defineProps<{ code: string; language: string }>();
|
||||
|
||||
const renderId = hashSync(props.code + props.lang);
|
||||
const codeBlockRef = ref<HTMLDivElement | null>(null);
|
||||
const codeHeight: Ref<string | number> = ref('auto');
|
||||
const start = Date.now();
|
||||
|
||||
const renderId = `${useId()}-${hashSync(props.code + props.language)}`;
|
||||
const copied = ref(false);
|
||||
const collapsed = ref(false);
|
||||
|
||||
const { data: parsed } = useAsyncData(`shiki-${renderId}`, async () => {
|
||||
const { html, displayLang } = await parseCode();
|
||||
return { html, displayLang };
|
||||
});
|
||||
const { $shiki } = useNuxtApp();
|
||||
|
||||
const { data: parsed, clear } = await useAsyncData(`shiki-${renderId}`,
|
||||
() => parseCode(props.code, props.language.toLowerCase()),
|
||||
{
|
||||
watch: [() => props.code],
|
||||
dedupe: 'defer'
|
||||
}
|
||||
);
|
||||
|
||||
const lineNumberWidth = computed(() => {
|
||||
if (!parsed.value?.html) return 1;
|
||||
// Count newlines in the generated HTML or the source code
|
||||
@@ -19,25 +26,18 @@ const lineNumberWidth = computed(() => {
|
||||
return props.code.split('\n').length.toString().length;
|
||||
});
|
||||
|
||||
watch(() => props.code, async () => {
|
||||
|
||||
const { html: codeHtml } = await parseCode();
|
||||
parsed.value = { html: codeHtml, displayLang: parsed.value!.displayLang };
|
||||
});
|
||||
|
||||
async function parseCode() {
|
||||
const shiki = await getShikiHighlighter();
|
||||
let lang = props.lang.toLowerCase();
|
||||
async function parseCode(code: string, lang: string) {
|
||||
let displayLang = lang;
|
||||
|
||||
try {
|
||||
const shikiLang = shiki.getLanguage(lang);
|
||||
displayLang = shikiLang.name;
|
||||
let shikiLang = await $shiki.getLanguage(lang);
|
||||
|
||||
displayLang = (shikiLang as unknown as Grammar).name;
|
||||
} catch {
|
||||
lang = 'text';
|
||||
}
|
||||
|
||||
const html = shiki.codeToHtml(props.code.trim(), {
|
||||
let html = await $shiki.codeToHtml(code.trim(), {
|
||||
lang,
|
||||
themes: { dark: 'vitesse-dark', light: 'vitesse-light' },
|
||||
});
|
||||
@@ -57,81 +57,47 @@ function copyCode() {
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function collapseCode() {
|
||||
if (!codeBlockRef.value) return;
|
||||
|
||||
collapsed.value = !collapsed.value;
|
||||
if (collapsed.value) {
|
||||
codeHeight.value = codeBlockRef.value.scrollHeight;
|
||||
nextTick(() => {
|
||||
// since we are changing the height of an element, even though its
|
||||
// to its own height, we are triggering a reflow, which means that
|
||||
// if we didnt use requestAnimationFrame, the height would be set
|
||||
// to 0 before the reflow is complete, which would cause the reflow
|
||||
// to be ignored, and another one to be triggered with the new height
|
||||
// of zero, causing the codeblock to snap shut immediately rather than
|
||||
// animating. Not requestAnimationFrame because it doesnt work
|
||||
// on firefox, but setTimeout works on both chrome and firefox
|
||||
setTimeout(() => {
|
||||
codeHeight.value = 0;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
codeBlockRef.value!.addEventListener('transitionend', () => {
|
||||
if (collapsed.value) return;
|
||||
codeHeight.value = 'auto';
|
||||
}, { once: true })
|
||||
|
||||
const targetHeight = codeBlockRef.value.scrollHeight;
|
||||
codeHeight.value = targetHeight;
|
||||
}
|
||||
}
|
||||
|
||||
const codeStyle = computed(() => {
|
||||
if (typeof codeHeight.value === 'number') {
|
||||
return `height: ${codeHeight.value}px;`;
|
||||
} else {
|
||||
return `height: ${codeHeight.value};`;
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (copyTimeout) clearTimeout(copyTimeout);
|
||||
clear();
|
||||
});
|
||||
|
||||
console.log("shiki codeblock rendered in", Date.now() - start);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col my-2 rounded-xl overflow-hidden">
|
||||
<div class="flex items-center pl-3 pr-1.5 py-1.5 text-sm font-sans bg-[var(--color-highlight)] justify-between">
|
||||
<div class="flex items-center pl-3 pr-1.5 py-1.5 text-sm font-sans bg-[var(--color-hover)] justify-between">
|
||||
<div class="capitalize">
|
||||
{{ parsed?.displayLang }}
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="copyCode()"
|
||||
class="flex items-center px-1 gap-0.5 rounded-md hover:bg-[var(--color-highlight)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
class="flex items-center px-1 gap-0.5 rounded-md hover:bg-[var(--color-hover)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
Copy
|
||||
<Icon v-if="!copied" name="mynaui:copy" class="text-4 text-[var(--color-text-subtle)]" />
|
||||
<Icon v-if="!copied" name="mynaui:copy" class="text-4 text-[var(--text-secondary)]" />
|
||||
<Icon v-else name="mynaui:check" class="text-4 text-emerald-500" />
|
||||
</button>
|
||||
|
||||
<button @click="collapseCode()"
|
||||
class="flex items-center justify-center h-5.5 w-5.5 rounded-md hover:bg-[var(--color-highlight)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<button @click="collapsed = !collapsed"
|
||||
class="flex items-center justify-center h-5.5 w-5.5 rounded-md hover:bg-[var(--color-hover)] transition-colors duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:chevron-down"
|
||||
:class="['text-4 h-4 w-4 text-[var(--color-text-subtle)] transition-transform duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', collapsed ? '-rotate-90' : '']" />
|
||||
:class="['text-4 h-4 w-4 text-[var(--text-secondary)] transition-transform duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', collapsed ? '-rotate-90' : '']" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="codeBlockRef"
|
||||
class="font-mono overflow-hidden code-container transition-height duration-300 ease-in-out"
|
||||
:style="`--line-number-width: ${lineNumberWidth}ch; ${codeStyle}`" :id="`code-${renderId}`"
|
||||
v-html="parsed?.html">
|
||||
<div class="grid transition-all duration-350 ease-in-out"
|
||||
:class="collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]'"
|
||||
:style="`--line-number-width: ${lineNumberWidth}ch;`" :id="`code-${renderId}`">
|
||||
<div class="overflow-hidden code-container" v-html="parsed?.html"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.code-container>pre {
|
||||
overflow-x: auto;
|
||||
overflow: auto hidden;
|
||||
min-height: 0;
|
||||
scrollbar-width: thin;
|
||||
padding: 1rem;
|
||||
line-height: 0;
|
||||
|
||||
Reference in New Issue
Block a user