Skip to content

feat(vite): show detailed info for all module flow node types #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adriandarian wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(vite): show detailed info for all module flow node types #152

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1277a3c
feat(vite): show detailed info for all module flow node types
adriandarian Dec 31, 2025
13862f8
Merge branch 'main' into feat/module-flow-details-panel
adriandarian Dec 31, 2025
f24b46d
Merge branch 'main' into feat/module-flow-details-panel
adriandarian Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 102 additions & 2 deletions packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
import type { RolldownChunkInfo, RolldownModuleFlowNode, RolldownResolveInfo, SessionContext } from '~~/shared/types'
import { computed } from 'vue'
import { settings } from '~~/app/state/settings'
import PluginName from '../display/PluginName.vue'
Expand Down Expand Up @@ -37,6 +37,20 @@ const codeDisplay = computed(() => {
return null
})

const resolveInfo = computed<RolldownResolveInfo | null>(() => {
if (!props.selected || !('type' in props.selected))
return null
if (props.selected.type === 'resolve')
return props.selected
return null
})

const importerModule = computed(() => {
if (!resolveInfo.value?.importer)
return undefined
return props.session.modulesList.find(m => m.id === resolveInfo.value!.importer)
})

function handleClose() {
emit('close')
}
Expand Down Expand Up @@ -87,7 +101,93 @@ function handleClose() {
:one-column="false"
/>
</template>
<!-- TODO: show more info with selected node -->
<!-- Resolve info panel -->
<template v-else-if="resolveInfo">
<div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
<PluginName :name="resolveInfo.plugin_name" />
<span op50 text-xs>Resolve</span>
<div flex-auto />
<DisplayCloseButton @click.stop="handleClose" />
</div>
<div p4 h-full of-auto flex="~ col gap-3" style="overscroll-behavior: contain">
<div flex="~ col gap-1">
<span op50 text-xs uppercase tracking-wide>Resolved ID</span>
<DisplayModuleId
v-if="resolveInfo.resolved_id"
:id="resolveInfo.resolved_id"
:session="session"
link
font-mono text-sm
/>
<span v-else op50 italic text-sm>null (not resolved)</span>
</div>
<div flex="~ col gap-1">
<span op50 text-xs uppercase tracking-wide>Module Request</span>
<code font-mono text-sm bg-active px2 py1 rounded>{{ resolveInfo.module_request }}</code>
</div>
<div v-if="resolveInfo.importer" flex="~ col gap-1">
<span op50 text-xs uppercase tracking-wide>Importer</span>
<DisplayModuleId
:id="resolveInfo.importer"
:session="session"
:link="!!importerModule"
font-mono text-sm
/>
</div>
<div flex="~ gap-6">
<div flex="~ col gap-1">
<span op50 text-xs uppercase tracking-wide>Import Kind</span>
<code font-mono text-sm>{{ resolveInfo.import_kind }}</code>
</div>
<div flex="~ col gap-1">
<span op50 text-xs uppercase tracking-wide>Duration</span>
<DisplayDuration :duration="resolveInfo.duration" :color="true" :factor="5" />
</div>
</div>
</div>
</template>
<!-- Transform/Load with no content changes -->
<template v-else-if="selected && 'type' in selected && (selected.type === 'transform' || selected.type === 'load')">
<div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
<PluginName :name="selected.plugin_name" />
<span op50 text-xs>{{ selected.type === 'load' ? 'Load' : 'Transform' }}</span>
<div flex-auto />
<DisplayCloseButton @click.stop="handleClose" />
</div>
<div p4 flex="~ col gap-3 items-center justify-center" h-full>
<div i-ph-empty-duotone text-4xl op30 />
<span op50 text-sm>
{{ selected.type === 'load' ? 'No content loaded' : 'No changes made' }}
</span>
<div flex="~ gap-4 items-center">
<DisplayDuration :duration="selected.duration" :color="true" :factor="5" />
<template v-if="selected.type === 'transform'">
<div font-mono text-xs flex="~ gap-1 items-center">
<span text-green>+{{ selected.diff_added }}</span>
<span text-red>-{{ selected.diff_removed }}</span>
</div>
</template>
</div>
</div>
</template>
<!-- Collapsed no-changes summary -->
<template v-else-if="selected && 'type' in selected && (selected.type === 'no_changes_collapsed' || selected.type === 'no_changes_hide')">
<div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
<span text-sm>Collapsed Plugins</span>
<div flex-auto />
<DisplayCloseButton @click.stop="handleClose" />
</div>
<div p4 flex="~ col gap-3 items-center justify-center" h-full>
<div i-ph-stack-duotone text-4xl op30 />
<span op50 text-sm text-center>
{{ selected.count }} plugins did not change the content
</span>
<div flex="~ gap-2 items-center">
<span op50 text-xs>Total duration:</span>
<DisplayDuration :duration="selected.duration" :color="true" :factor="5" />
</div>
</div>
</template>
<span v-else op50 italic ma>
No data
</span>
Expand Down