Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite. vitest.dev
test testing-tools vite
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<script setup lang="ts">import { client } from '~/composables/client'
const props = defineProps<{ id: string }>()const emit = defineEmits<{ (e: 'close'): void }>()
const result = asyncComputed(() => client.rpc.getTransformResult(props.id))const ext = computed(() => props.id?.split(/\./g).pop() || 'js')
const source = computed(() => result.value?.source?.trim() || '')const code = computed(() => result.value?.code?.replace(/\/\/# sourceMappingURL=.*\n/, '').trim() || '')const sourceMap = computed(() => ({ mappings: result.value?.map?.mappings ?? '', version: result.value?.map?.version,}))
onKeyStroke('Escape', () => { emit('close')})// TODO: sourcemap https://evanw.github.io/source-map-visualization/</script>
<template> <div w-350 max-w-screen h-full flex flex-col> <div p-4 relative> <p>Module Info</p> <p op50 font-mono text-sm> {{ id }} </p> <IconButton icon="i-carbon-close" absolute top-5px right-5px text-2xl @click="emit('close')" /> </div> <div v-if="!result" p-5> No transform result found for this module. </div> <template v-else> <div grid="~ cols-2 rows-[min-content_auto]" overflow-hidden flex-auto> <div p="x3 y-1" bg-overlay border="base b t r"> Source </div> <div p="x3 y-1" bg-overlay border="base b t"> Transformed </div> <CodeMirror h-full :model-value="source" read-only v-bind="{ lineNumbers: true }" :mode="ext" /> <CodeMirror h-full :model-value="code" read-only v-bind="{ lineNumbers: true }" :mode="ext" /> </div> <div v-if="sourceMap.mappings !== ''"> <div p="x3 y-1" bg-overlay border="base b t"> Source map (v{{ sourceMap.version }}) </div> <CodeMirror :model-value="sourceMap.mappings" read-only v-bind="{ lineNumbers: true }" :mode="ext" /> </div> </template> </div></template>