@forge-kit/plugin-source-map-prase 0.0.1

package/src/components/trace-chain/index.less

@@ -0,0 +1,128 @@
+.trace-chain-root {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  padding: 4px;
+  -webkit-app-region: no-drag;
+
+  .trace-chain-item {
+    margin-bottom: 10px;
+
+    &[data-dragging="true"] {
+      opacity: 0.85;
+    }
+  }
+
+  .trace-chain-empty {
+    min-height: 180px;
+    border: 1px dashed var(--gray-6);
+    border-radius: var(--radius-3);
+    color: var(--gray-11);
+    font-size: 13px;
+  }
+
+  .trace-chain-node {
+    padding: 10px;
+    border-radius: var(--radius-3);
+    border: 1px solid var(--gray-6);
+    background:
+      linear-gradient(160deg, color-mix(in srgb, var(--gray-3) 90%, transparent), color-mix(in srgb, var(--gray-2) 90%, transparent));
+  }
+
+  .trace-chain-drag-handle {
+    min-width: 46px;
+    height: 24px;
+    border-radius: 999px;
+    border: 1px solid var(--gray-7);
+    background: var(--gray-4);
+    color: var(--gray-12);
+    font-size: 12px;
+    font-weight: 600;
+    user-select: none;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .trace-chain-content {
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .trace-chain-main-title {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--gray-12);
+    line-height: 1.35;
+    word-break: break-all;
+    user-select: text;
+    cursor: text;
+  }
+
+  .trace-chain-header {
+    width: 100%;
+  }
+
+  .trace-chain-row {
+    display: grid;
+    grid-template-columns: 34px minmax(0, 1fr);
+    gap: 6px;
+    padding: 2px 0;
+  }
+
+  .trace-chain-row[data-row-type="output"] {
+    margin-top: 2px;
+    padding-top: 8px;
+    border-top: 1px dashed color-mix(in srgb, var(--gray-6) 78%, transparent);
+  }
+
+  .trace-chain-label {
+    min-width: 30px;
+    font-size: 12px;
+    color: var(--gray-10);
+    user-select: none;
+    margin-top: 1px;
+  }
+
+  .trace-chain-detail {
+    min-width: 0;
+  }
+
+  .trace-chain-output-head {
+  }
+
+  .trace-chain-file {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--gray-12);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-all;
+    user-select: text;
+    cursor: text;
+  }
+
+  .trace-chain-position {
+    font-size: 12px;
+    color: var(--gray-11);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    user-select: text;
+    cursor: text;
+  }
+
+  .trace-chain-error {
+    font-size: 12px;
+    color: #ff7b7b;
+  }
+
+  .trace-chain-pending {
+    font-size: 12px;
+    color: var(--gray-10);
+  }
+
+}

package/src/components/trace-chain/index.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import {Box, Button, Flex, Text} from "@forge-kit/component";
+import {DndContext, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent} from "@dnd-kit/core";
+import {SortableContext, arrayMove, useSortable, verticalListSortingStrategy} from "@dnd-kit/sortable";
+import {CSS} from "@dnd-kit/utilities";
+import "./index.less";
+
+interface TraceChainNode {
+    fileName: string
+    lineNumber: number
+    columnNumber: number
+}
+
+interface TraceChainHop {
+    input: TraceChainNode
+    output?: TraceChainNode
+    mapFileName?: string
+}
+
+
+interface TraceChainHopRowProps {
+    type: "input" | "output"
+    node?: TraceChainNode
+}
+
+const TraceChainHopRow: React.FC<TraceChainHopRowProps> = (props) => {
+    const {type, node} = props
+    const isInput = type === "input"
+    const label = isInput ? "输入" : "输出"
+    const fileName = node?.fileName || (isInput ? "-" : "未命中映射")
+    const position = node
+        ? `line ${node.lineNumber}, column ${node.columnNumber}`
+        : "line -, column -"
+
+    return (
+        <Box className="trace-chain-row" data-row-type={type}>
+            <Box className="trace-chain-label">{label}</Box>
+            <Flex className="trace-chain-detail" direction="column" gap="1">
+                <Flex className="trace-chain-output-head" align="start" justify="start" gap="2">
+                    <Box className="trace-chain-file">{fileName}</Box>
+                </Flex>
+                <Box className="trace-chain-position">{position}</Box>
+            </Flex>
+        </Box>
+    )
+}
+
+interface SortableTraceChainItemProps {
+    slot: TraceChainSlot
+    hop?: TraceChainHop
+    index: number
+    onDelete?: (slotId: string) => void
+}
+
+const SortableTraceChainItem: React.FC<SortableTraceChainItemProps> = (props) => {
+    const {slot, hop, index, onDelete} = props
+    const {id, error} = slot
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({id})
+
+    const style: React.CSSProperties = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }
+
+    return (
+        <Box ref={setNodeRef} style={style} className="trace-chain-item" data-dragging={isDragging ? "true" : "false"}>
+            <Flex className="trace-chain-node" gap="2">
+                <Flex className="trace-chain-drag-handle" align="center" justify="center" {...attributes} {...listeners}>#{index + 1}</Flex>
+                <Flex className="trace-chain-content" direction="column" gap="2">
+                    <Flex className="trace-chain-header" justify="between" align="start" gap="2">
+                        <Text className="trace-chain-main-title">{slot.mapFileName || "(未命名 map 文件)"}</Text>
+                        <Button size="1" variant="outline" onClick={() => onDelete?.(id)}>删除</Button>
+                    </Flex>
+                    {error && <Text className="trace-chain-error">{error}</Text>}
+                    {hop && (
+                        <React.Fragment>
+                            <TraceChainHopRow type="input" node={hop.input}/>
+                            <TraceChainHopRow type="output" node={hop.output}/>
+                        </React.Fragment>
+                    )}
+                    {!hop && <Text className="trace-chain-pending">等待解析结果</Text>}
+                </Flex>
+            </Flex>
+        </Box>
+    )
+}
+
+
+interface TraceChainSlot {
+    id: string
+    mapFileName: string
+    error?: string
+}
+
+interface TraceChainProps {
+    slots?: TraceChainSlot[]
+    data?: TraceChainHop[]
+    onReorder?: (nextIds: string[]) => void
+    onDelete?: (slotId: string) => void
+    className?: string
+}
+
+
+export const TraceChain: React.FC<TraceChainProps> = (props) => {
+    const {slots = [], data = [], onReorder, onDelete, className} = props
+    const sensors = useSensors(useSensor(PointerSensor, {activationConstraint: {distance: 6}}))
+
+    if (slots.length === 0) {
+        return (
+            <Box className={className || "trace-chain-root"}>
+                <Flex className="trace-chain-empty" align="center" justify="center">暂无解析链路，上传 map 并点击“解析链路”。</Flex>
+            </Box>
+        )
+    }
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const {active, over} = event
+        if (!over || active.id === over.id) return
+        const oldIndex = slots.findIndex((item) => item.id === String(active.id))
+        const newIndex = slots.findIndex((item) => item.id === String(over.id))
+        if (oldIndex < 0 || newIndex < 0) return
+        const nextSlots = arrayMove(slots, oldIndex, newIndex)
+        onReorder?.(nextSlots.map((item) => item.id))
+    }
+
+    return (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={slots.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+                <Box className={className || "trace-chain-root"}>
+                    {slots.map((slot, index) => (
+                        <SortableTraceChainItem
+                            key={slot.id}
+                            slot={slot}
+                            hop={data[index]}
+                            index={index}
+                            onDelete={onDelete}
+                        />
+                    ))}
+                </Box>
+            </SortableContext>
+        </DndContext>
+    )
+}

package/src/main.tsx

@@ -0,0 +1,29 @@
+import {StrictMode} from 'react'
+import ReactDOM from "react-dom/client";
+import {definePlugin} from '@forge-kit/types'
+import {App} from '@/App.tsx'
+
+let rootInstance: ReturnType<typeof ReactDOM.createRoot> | null = null;
+
+const plugin = definePlugin({
+    bundleId: "com.forge-kit.plugin.source-map-prase",
+    name: 'Source Map 解析工具',
+    icon: `${import.meta.env.BASE_URL}icon.svg`,
+    description: "Source Map 解析工具",
+    mount: (container) => {
+        rootInstance = ReactDOM.createRoot(container);
+        rootInstance.render(
+            <StrictMode>
+                <App/>
+            </StrictMode>,
+        )
+    },
+    unmount: () => {
+        if (!rootInstance) return
+        rootInstance.unmount();
+        rootInstance = null;
+    }
+});
+if (import.meta.env.DEV) plugin.mount(document.getElementById('root')!)
+
+export default plugin

package/src/utils/index.ts

@@ -0,0 +1 @@
+export const noop = ()=>{}

package/src/utils/source-map/base/constants.ts

@@ -0,0 +1,2 @@
+export const MAX_TRACE_DEPTH = 20
+export const DEFAULT_CONTEXT_LINE_RADIUS = 3

package/src/utils/source-map/base/path.ts

@@ -0,0 +1,17 @@
+export const normalizePath = (input: string) => input.replace(/\\/g, "/").trim()
+
+export const getBaseName = (input: string) => {
+    const normalized = normalizePath(input)
+    const tokens = normalized.split("/")
+    return tokens[tokens.length - 1] || normalized
+}
+
+export const stripMapExt = (input: string) => input.endsWith(".map") ? input.slice(0, -4) : input
+
+export const joinPath = (...parts: string[]) => {
+    return parts
+        .map((part) => normalizePath(part))
+        .filter(Boolean)
+        .join("/")
+        .replace(/\/{2,}/g, "/")
+}

package/src/utils/source-map/base/registry.ts

@@ -0,0 +1,38 @@
+import type {SourceMapRecord, SourceMapRegistry} from "./types";
+import {getBaseName, normalizePath} from "./path";
+
+export const registerSourceMap = (registry: SourceMapRegistry, key: string, sourceMapRecord: SourceMapRecord) => {
+    const normalized = normalizePath(key)
+    if (!normalized) return registry
+
+    const nextRegistry: SourceMapRegistry = {
+        ...registry,
+        [normalized]: sourceMapRecord,
+    }
+
+    const baseName = getBaseName(normalized)
+    if (!nextRegistry[baseName]) {
+        nextRegistry[baseName] = sourceMapRecord
+    }
+
+    return nextRegistry
+}
+
+export const listSourceMapRecords = (sourceMaps: SourceMapRegistry): SourceMapRecord[] => {
+    const map = new Map<string, SourceMapRecord>()
+    Object.values(sourceMaps).forEach((record) => {
+        if (!map.has(record.mapFileName)) {
+            map.set(record.mapFileName, record)
+        }
+    })
+    return Array.from(map.values())
+}
+
+export const getSourceMapByFileName = (sourceMaps: SourceMapRegistry, fileName: string) => {
+    const normalized = normalizePath(fileName)
+    return sourceMaps[normalized] ?? sourceMaps[getBaseName(normalized)]
+}
+
+export const getSourceMapByMapFileName = (sourceMaps: SourceMapRegistry, mapFileName: string) => {
+    return listSourceMapRecords(sourceMaps).find((item) => item.mapFileName === mapFileName)
+}

package/src/utils/source-map/base/types.ts

@@ -0,0 +1,37 @@
+import type {RawSourceMap} from "source-map-js";
+
+export interface TraceLocation {
+    fileName: string
+    lineNumber: number
+    columnNumber: number
+}
+
+export interface ResolveTraceOptions {
+    maxDepth?: number
+}
+
+export interface TraceHop {
+    input: TraceLocation
+    output?: TraceLocation
+    mapFileName?: string
+}
+
+export interface SourceMapRecord {
+    rawSourceMap: RawSourceMap
+    mapFileName: string
+}
+
+export interface ResolvedSourceMeta {
+    sourceFile: string
+    lineNumber: number
+    columnNumber: number
+}
+
+export interface ChainMapSlot {
+    id: string
+    mapFileName: string
+    sourceMapRecord?: SourceMapRecord
+    error?: string
+}
+
+export type SourceMapRegistry = Record<string, SourceMapRecord>

package/src/utils/source-map/domain/chain-slots.ts

@@ -0,0 +1,59 @@
+import {normalizePath, stripMapExt} from "../base/path";
+import {registerSourceMap} from "../base/registry";
+import type {ChainMapSlot, SourceMapRegistry} from "../base/types";
+
+export const createChainSlotFromFile = async (file: File): Promise<ChainMapSlot> => {
+    const slotId = `${file.name}-${Math.random().toString(36).slice(2, 8)}`
+
+    try {
+        const fileText = await file.text()
+        const rawSourceMap = JSON.parse(fileText)
+
+        if (!rawSourceMap || typeof rawSourceMap !== "object" || typeof rawSourceMap.mappings !== "string") {
+            throw new Error("invalid source-map json")
+        }
+
+        return {
+            id: slotId,
+            mapFileName: file.name,
+            sourceMapRecord: {rawSourceMap, mapFileName: file.name},
+        }
+    } catch (error) {
+        const message = error instanceof Error ? error.message : "unknown error"
+        return {
+            id: slotId,
+            mapFileName: file.name,
+            error: `${file.name}: ${message}`,
+        }
+    }
+}
+
+export const buildRegistryFromChainSlots = (slots: ChainMapSlot[]) => {
+    let registry: SourceMapRegistry = {}
+    const orderedMapFileNames: string[] = []
+
+    slots.forEach((slot) => {
+        const {sourceMapRecord: record} = slot
+        if (!record) return
+
+        orderedMapFileNames.push(record.mapFileName)
+        registry = registerSourceMap(registry, record.mapFileName, record)
+        registry = registerSourceMap(registry, stripMapExt(record.mapFileName), record)
+
+        if (record.rawSourceMap.file) {
+            registry = registerSourceMap(registry, record.rawSourceMap.file, record)
+        }
+    })
+
+    return {registry, orderedMapFileNames}
+}
+
+export const getAutoEntryFileNameFromSlots = (slots: ChainMapSlot[]) => {
+    const firstValidSlot = slots.find((slot) => slot.sourceMapRecord)
+    if (!firstValidSlot?.sourceMapRecord) return ""
+
+    const mappedFile = firstValidSlot.sourceMapRecord.rawSourceMap.file
+    if (mappedFile) return normalizePath(mappedFile)
+
+    return stripMapExt(firstValidSlot.sourceMapRecord.mapFileName)
+}

package/src/utils/source-map/domain/source-content.ts

@@ -0,0 +1,75 @@
+import {getBaseName, joinPath, normalizePath} from "../base/path";
+import {listSourceMapRecords} from "../base/registry";
+import {toDisplayLocation} from "./view-model";
+import type {SourceMapRecord, SourceMapRegistry, TraceHop, TraceLocation} from "../base/types";
+
+interface SourceCodeMatch {
+    code: string
+    sourceFile: string
+    location: TraceLocation
+}
+
+const findSourceCodeMatch = (hop: TraceHop, sourceMapRecord: SourceMapRecord): SourceCodeMatch | null => {
+    if (!hop.output) return null
+
+    const {sources = [], sourcesContent = [], sourceRoot = ""} = sourceMapRecord.rawSourceMap
+    const outputFile = normalizePath(hop.output.fileName)
+    const outputBaseName = getBaseName(outputFile)
+
+    const sourceIndex = sources.findIndex((source) => {
+        const normalizedSource = normalizePath(source)
+        const sourceWithRoot = joinPath(sourceRoot, normalizedSource)
+
+        return (
+            normalizedSource === outputFile
+            || sourceWithRoot === outputFile
+            || outputFile.endsWith(`/${normalizedSource}`)
+            || outputFile.endsWith(`/${sourceWithRoot}`)
+            || getBaseName(normalizedSource) === outputBaseName
+            || getBaseName(sourceWithRoot) === outputBaseName
+        )
+    })
+
+    if (sourceIndex < 0) return null
+
+    const code = sourcesContent[sourceIndex]
+    if (!code) return null
+
+    return {
+        code,
+        sourceFile: sources[sourceIndex],
+        location: toDisplayLocation(hop.output),
+    }
+}
+
+export const resolveSourceCodeFromTrace = (traceHops: TraceHop[], sourceMaps: SourceMapRegistry) => {
+    const sourceMapRecords = listSourceMapRecords(sourceMaps)
+
+    for (let index = traceHops.length - 1; index >= 0; index--) {
+        const hop = traceHops[index]
+        if (!hop.output || !hop.mapFileName) continue
+
+        const sourceMapRecord = sourceMapRecords.find((item) => item.mapFileName === hop.mapFileName)
+        if (!sourceMapRecord) continue
+
+        const match = findSourceCodeMatch(hop, sourceMapRecord)
+        if (!match) continue
+
+        return {
+            code: match.code,
+            sourceFile: match.sourceFile,
+            lineNumber: match.location.lineNumber,
+            columnNumber: match.location.columnNumber,
+        }
+    }
+
+    return null
+}
+
+export const getLastResolvedOutput = (traceHops: TraceHop[]) => {
+    for (let index = traceHops.length - 1; index >= 0; index--) {
+        const output = traceHops[index].output
+        if (output) return output
+    }
+    return null
+}