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

package/src/components/map-input-panel/index.tsx

@@ -1,22 +1,19 @@
 import * as React from "react";
 import {Box, Button, Flex, Text, TextField} from "@forge-kit/component";
 import {PanelCard} from "@/components/panel-card";
+import type {ForgeKitBridge, MapInputConfig} from "@/types";
 import {noop} from "@/utils";
+import classNames from "classnames";
 import "./index.less";
 
-interface MapInputConfig {
-    entryLine: string
-    entryColumn: string
-    contextLineRadius: string
-}
-
 interface MapInputPanelProps {
+    className?: string
     chainDepth: number
     entryFileName: string
     inputConfig: MapInputConfig
     onInputConfigChange: (next: MapInputConfig) => void
     onResolve: () => void
-    onAppendMapFile: (file: File) => void
+    onAppendMapFilePath: (filePath: string) => void
 }
 
 interface MapInputFieldProps {
@@ -45,25 +42,27 @@ const MapInputField: React.FC<MapInputFieldProps> = (props) => {
 
 export const MapInputPanel: React.FC<MapInputPanelProps> = (props) => {
     const {
+        className,
         chainDepth,
         entryFileName,
         inputConfig,
         onInputConfigChange,
         onResolve,
-        onAppendMapFile,
+        onAppendMapFilePath,
     } = props
 
-    const openFilePicker = () => {
-        const fileInput = document.createElement("input")
-        fileInput.type = "file"
-        fileInput.accept = ".map,application/json"
-        fileInput.onchange = () => {
-            const file = fileInput.files?.[0]
-            if (file) {
-                onAppendMapFile(file)
-            }
-        }
-        fileInput.click()
+    const openFilePicker = async () => {
+        const openFileDialog = (window as Window & {forgeKit?: ForgeKitBridge}).forgeKit?.openFileDialog
+        if (!openFileDialog) return
+
+        const selected = await openFileDialog({
+            multiple: true,
+            filters: [{name: "Source Map", extensions: ["map", "json"]}],
+        })
+        const paths = Array.isArray(selected) ? selected : (selected ? [selected] : [])
+        paths.forEach((filePath) => {
+            if (typeof filePath === "string") onAppendMapFilePath(filePath)
+        })
     }
 
     const handleInputConfigChange = (field: keyof MapInputConfig, value: string) => {
@@ -71,58 +70,55 @@ export const MapInputPanel: React.FC<MapInputPanelProps> = (props) => {
     }
 
     return (
-        <PanelCard
-            title="MAP INPUT"
-            cardClassName="input-panel-card"
-            contentClassName="input-panel-content"
-            contentProps={{direction: "column", gap: "3"}}
-        >
-            <Box className="input-summary-grid">
-                <Box className="input-summary-item">
-                    <Text className="input-summary-label">入口 Map</Text>
-                    <Text className="input-summary-value">{entryFileName || "-"}</Text>
-                </Box>
-                <Box className="input-summary-item">
-                    <Text className="input-summary-label">链路层数</Text>
-                    <Text className="input-summary-value">{`${chainDepth} 层`}</Text>
-                </Box>
-            </Box>
+        <PanelCard title="MAP INPUT" className={classNames("input-panel-card", className)}>
+           <Flex className="input-panel-content" direction='column' gap="3">
+               <Box className="input-summary-grid">
+                   <Box className="input-summary-item">
+                       <Text className="input-summary-label">入口 Map</Text>
+                       <Text className="input-summary-value">{entryFileName || "-"}</Text>
+                   </Box>
+                   <Box className="input-summary-item">
+                       <Text className="input-summary-label">链路层数</Text>
+                       <Text className="input-summary-value">{`${chainDepth} 层`}</Text>
+                   </Box>
+               </Box>
 
-            <Box className="input-hints">
-                <Text className="input-hints-title">使用说明</Text>
-                <Text className="input-hints-item">1. 按解析链路顺序添加 map 文件。</Text>
-                <Text className="input-hints-item">2. 入口 Map 会自动取第一层的 output file。</Text>
-                <Text className="input-hints-item">3. TRACE CHAIN 支持拖动序号来切换 map 顺序。</Text>
-            </Box>
+               <Box className="input-hints">
+                   <Text className="input-hints-title">使用说明</Text>
+                   <Text className="input-hints-item">1. 按解析链路顺序添加 map 文件。</Text>
+                   <Text className="input-hints-item">2. 入口 Map 会自动取第一层的 output file。</Text>
+                   <Text className="input-hints-item">3. TRACE CHAIN 支持拖动序号来切换 map 顺序。</Text>
+               </Box>
 
-            <Box className="input-footer">
-                <Flex gap="2" className="entry-row" align="end" wrap="wrap">
-                    <MapInputField
-                        title="入口行号"
-                        min={1}
-                        value={inputConfig.entryLine}
-                        onChange={(value) => handleInputConfigChange("entryLine", value)}
-                    />
-                    <MapInputField
-                        title="入口列号"
-                        min={0}
-                        value={inputConfig.entryColumn}
-                        onChange={(value) => handleInputConfigChange("entryColumn", value)}
-                    />
-                    <MapInputField
-                        title="上下文行数"
-                        min={0}
-                        value={inputConfig.contextLineRadius}
-                        onChange={(value) => handleInputConfigChange("contextLineRadius", value)}
-                    />
-                </Flex>
-                <Flex className="entry-actions" direction="column" justify="center" align="center" gap="2">
-                    <Flex className="entry-action-row" gap="2" wrap="wrap" justify="center" align="center">
-                        <Button size="2" radius="large" onClick={onResolve}>解析链路</Button>
-                        <Button size="2" radius="large" variant="outline" onClick={openFilePicker}>添加 map 文件</Button>
-                    </Flex>
-                </Flex>
-            </Box>
+               <Box className="input-footer">
+                   <Flex gap="2" className="entry-row" align="end" wrap="wrap">
+                       <MapInputField
+                           title="入口行号"
+                           min={1}
+                           value={inputConfig.entryLine}
+                           onChange={(value) => handleInputConfigChange("entryLine", value)}
+                       />
+                       <MapInputField
+                           title="入口列号"
+                           min={0}
+                           value={inputConfig.entryColumn}
+                           onChange={(value) => handleInputConfigChange("entryColumn", value)}
+                       />
+                       <MapInputField
+                           title="上下文行数"
+                           min={0}
+                           value={inputConfig.contextLineRadius}
+                           onChange={(value) => handleInputConfigChange("contextLineRadius", value)}
+                       />
+                   </Flex>
+                   <Flex className="entry-actions" direction="column" justify="center" align="center" gap="2">
+                       <Flex className="entry-action-row" gap="2" wrap="wrap" justify="center" align="center">
+                           <Button size="2" radius="large" onClick={onResolve}>解析链路</Button>
+                           <Button size="2" radius="large" variant="outline" onClick={openFilePicker}>添加 map 文件</Button>
+                       </Flex>
+                   </Flex>
+               </Box>
+           </Flex>
         </PanelCard>
     )
 }

package/src/components/panel-card/index.less

@@ -0,0 +1,21 @@
+.panel-card {
+  display: flex !important;
+
+  .panel-shell {
+    overflow: hidden;
+    flex: 1;
+
+    .panel-title {
+      display: block;
+      padding: 0 0 var(--space-3);
+      margin-bottom: var(--space-3);
+      border-bottom: solid 1px var(--gray-5);
+      font-size: 12px;
+      letter-spacing: 0.1em;
+      color: var(--gray-11);
+      text-transform: uppercase;
+    }
+  }
+
+}
+

package/src/components/panel-card/index.tsx

@@ -1,24 +1,22 @@
 import * as React from "react";
 import {Card, Flex, Text} from "@forge-kit/component";
+import classNames from 'classnames'
+import './index.less'
 
 interface PanelCardProps {
     title: string
-    cardClassName: string
-    contentClassName: string
-    contentProps?: Omit<React.ComponentProps<typeof Flex>, "className" | "children">
+    className?: string
     children?: React.ReactNode
 }
 
 export const PanelCard: React.FC<PanelCardProps> = (props) => {
-    const {title, cardClassName, contentClassName, contentProps, children} = props
+    const {title, className, children} = props
 
     return (
-        <Card className={cardClassName}>
+        <Card className={classNames('panel-card', className)} >
             <Flex className="panel-shell" direction="column">
                 <Text className="panel-title">{title}</Text>
-                <Flex className={contentClassName} {...contentProps}>
-                    {children}
-                </Flex>
+                <>{children}</>
             </Flex>
         </Card>
     )

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

@@ -1,128 +1,129 @@
-.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-panel-card {
+  .trace-panel-content {
+    flex: 1;
+    overflow: auto;
+
+    .trace-chain-root {
+      flex: 1;
+      min-height: 0;
+      height: 100%;
+      overflow: auto;
+      padding: 4px;
+
+      .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-item {
+        margin-bottom: 10px;
+
+        &[data-dragging="true"] {
+          opacity: 0.85;
+        }
+
+        .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-header {
+              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-row {
+              display: grid;
+              grid-template-columns: 34px minmax(0, 1fr);
+              gap: 6px;
+              padding: 2px 0;
+
+              &[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-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);
+            }
+          }
+        }
+      }
     }
   }
-
-  .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

@@ -3,7 +3,9 @@ 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 {PanelCard} from "@/components/panel-card";
 import "./index.less";
+import classNames from "classnames";
 
 interface TraceChainNode {
     fileName: string
@@ -73,7 +75,8 @@ const SortableTraceChainItem: React.FC<SortableTraceChainItemProps> = (props) =>
     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-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>
@@ -113,14 +116,6 @@ 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
@@ -132,20 +127,26 @@ export const TraceChain: React.FC<TraceChainProps> = (props) => {
     }
 
     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>
+        <PanelCard title="TRACE CHAIN" className={classNames('trace-panel-card', className)}>
+            <Flex className="trace-panel-content">
+                {Boolean(!slots.length) && (
+                    <Box className="trace-chain-root">
+                        <Flex className="trace-chain-empty" align="center" justify="center">暂无解析链路，上传 map 并点击“解析链路”。</Flex>
+                    </Box>
+                )}
+                {Boolean(slots.length) && (
+                    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                        <SortableContext items={slots.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+                            <Box className="trace-chain-root">
+                                {slots.map((slot, index) => {
+                                    return <SortableTraceChainItem key={slot.id} slot={slot} hop={data[index]}
+                                                                   index={index} onDelete={onDelete}/>
+                                })}
+                            </Box>
+                        </SortableContext>
+                    </DndContext>
+                )}
+            </Flex>
+        </PanelCard>
     )
 }

package/src/main.tsx

@@ -1,6 +1,6 @@
 import {StrictMode} from 'react'
 import ReactDOM from "react-dom/client";
-import {definePlugin} from '@forge-kit/types'
+import {definePlugin} from '@forge-kit/helper'
 import {App} from '@/App.tsx'
 
 let rootInstance: ReturnType<typeof ReactDOM.createRoot> | null = null;

package/src/node/index.ts

@@ -0,0 +1,6 @@
+import {defineInvokeMethod, registerInvokeMethod} from "@forge-kit/node-sdk";
+import {getSourceSnippet, profileResolveTracePhases, resolveTrace} from "./trace/resolve";
+
+const invokeMethod = defineInvokeMethod({resolveTrace, getSourceSnippet, profileResolveTracePhases})
+
+registerInvokeMethod(invokeMethod)

package/src/{utils/source-map → node/trace/core}/base/registry.ts

@@ -1,19 +1,23 @@
 import type {SourceMapRecord, SourceMapRegistry} from "./types";
 import {getBaseName, normalizePath} from "./path";
 
-export const registerSourceMap = (registry: SourceMapRegistry, key: string, sourceMapRecord: SourceMapRecord) => {
+interface RegisterSourceMapInput {
+    registry: SourceMapRegistry
+    key: string
+    sourceMapRecord: SourceMapRecord
+}
+
+export const registerSourceMap = (input: RegisterSourceMapInput) => {
+    const {registry, key, sourceMapRecord} = input
     const normalized = normalizePath(key)
+
     if (!normalized) return registry
 
-    const nextRegistry: SourceMapRegistry = {
-        ...registry,
-        [normalized]: sourceMapRecord,
-    }
+    const nextRegistry: SourceMapRegistry = {...registry, [normalized]: sourceMapRecord}
 
     const baseName = getBaseName(normalized)
-    if (!nextRegistry[baseName]) {
-        nextRegistry[baseName] = sourceMapRecord
-    }
+
+    if (!nextRegistry[baseName]) nextRegistry[baseName] = sourceMapRecord
 
     return nextRegistry
 }
@@ -21,9 +25,8 @@ export const registerSourceMap = (registry: SourceMapRegistry, key: string, sour
 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)
-        }
+        if (map.has(record.mapFileName)) return
+        map.set(record.mapFileName, record)
     })
     return Array.from(map.values())
 }

package/src/{utils/source-map → node/trace/core}/base/types.ts

@@ -30,6 +30,7 @@ export interface ResolvedSourceMeta {
 export interface ChainMapSlot {
     id: string
     mapFileName: string
+    mapFilePath?: string
     sourceMapRecord?: SourceMapRecord
     error?: string
 }

package/src/node/trace/core/domain/chain-slots.ts

@@ -0,0 +1,33 @@
+import {normalizePath, stripMapExt} from "../base/path";
+import {registerSourceMap} from "../base/registry";
+import type {ChainMapSlot, SourceMapRegistry} from "../base/types";
+
+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, key: record.mapFileName, sourceMapRecord: record})
+        registry = registerSourceMap({registry, key: stripMapExt(record.mapFileName), sourceMapRecord: record})
+
+        if (record.rawSourceMap.file) {
+            registry = registerSourceMap({registry, key: record.rawSourceMap.file, sourceMapRecord: 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)
+}