From e4441804cd9346475d5c70eebffc1ce7c5e0e18d Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Mon, 29 Jan 2024 08:47:57 -0500 Subject: [PATCH] chore: improve playground (#19) Co-authored-by: Anthony Fu --- playground/index.html | 5 ++--- playground/src/App.vue | 29 +++++++++++++++++++++-------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/playground/index.html b/playground/index.html index 8719d99..8c6779e 100644 --- a/playground/index.html +++ b/playground/index.html @@ -3,9 +3,8 @@ - - Vitesse Lite - + TextMate Playground +
diff --git a/playground/src/App.vue b/playground/src/App.vue index 0b0731d..269676d 100644 --- a/playground/src/App.vue +++ b/playground/src/App.vue @@ -3,7 +3,7 @@ import { getHighlighterCore } from 'shiki/core' import { themes } from '../../packages/tm-themes/index' import { grammars } from '../../packages/tm-grammars/index' -useDark() +const isDark = useDark() const theme = useStorage('tm-theme', 'vitesse-dark') const grammar = useStorage('tm-grammar', 'javascript') @@ -13,6 +13,9 @@ const error = ref(null) const input = ref('console.log("Hello World")') const output = ref('') +const grammarObject = computed(() => grammars.find(g => g.name === grammar.value)) +const themeObject = computed(() => themes.find(t => t.name === theme.value)) + async function run() { error.value = null try { @@ -76,6 +79,8 @@ function random() { watch([theme, grammar], run, { immediate: true }) +useTitle(() => `${grammarObject.value?.displayName || grammar.value} - ${themeObject.value?.displayName || theme.value} - TextMate Playground`) + if (import.meta.hot) { import.meta.hot.accept(() => { run() @@ -84,8 +89,8 @@ if (import.meta.hot) {