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

package/package.json

@@ -6,11 +6,12 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "manifest.json"
   ],
   "author": "yu.pan <panyupy@vip.qq.com>",
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +25,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@forge-kit/component": "workspace:*",
     "@forge-kit/icons": "workspace:*",
-    "@forge-kit/types": "workspace:*",
+    "@forge-kit/helper": "workspace:*",
+    "@forge-kit/node-sdk": "workspace:*",
     "classnames": "^2.5.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/App.less

@@ -1,5 +1,4 @@
 html, body, #root {
-  -webkit-app-region: drag;
   background-color: transparent;
   margin: 0;
   height: 100%;
@@ -16,86 +15,56 @@ html, body, #root {
     height: 100%;
     overflow: hidden;
     min-height: 0;
-  }
-
-  .top-cards {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .trace-panel-card,
-  .input-panel-card,
-  .result-panel-card {
-
-    -webkit-app-region: no-drag;
-    border: 1px solid color-mix(in srgb, var(--gray-6) 75%, transparent);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--gray-2) 88%, transparent), color-mix(in srgb, var(--gray-1) 86%, transparent));
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.04),
-      0 10px 24px rgba(0, 0, 0, 0.16);
-  }
-
-  .input-panel-card,
-  .trace-panel-card {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .trace-panel-card {
-    display: flex;
-  }
 
-  .result-panel-card {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-  }
+    .top-cards {
+      flex: 1;
+      min-height: 0;
 
-  .panel-shell {
-    flex: 1;
-    min-height: 0;
-  }
+      .top-trace-card {
+        flex: 1;
+        min-height: 0;
+      }
 
-  .panel-title {
-    display: block;
-    padding: 0 0 var(--space-3);
-    margin-bottom: var(--space-2);
-    border-bottom: solid 1px var(--gray-5);
-    font-size: 12px;
-    letter-spacing: 0.1em;
-    color: var(--gray-11);
-    text-transform: uppercase;
-  }
+      .top-input-card {
+        flex: 1;
+        min-height: 0;
+      }
+    }
 
-  .trace-panel-content,
-  .result-panel-content {
-    padding-top: var(--space-3);
-    flex: 1;
-    min-height: 0;
-  }
+    .result-panel-card {
+      flex: 1;
+      min-height: 0;
+      display: flex;
 
-  .trace-panel-content {
-    overflow: hidden;
-  }
+      .result-panel-content {
+        flex: 1;
+        min-height: 0;
+        width: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-  .result-panel-content {
-    overflow: auto;
-  }
+        .output-meta {
+          margin-bottom: var(--space-2);
+          color: var(--gray-11);
+          font-size: 12px;
+          border: 1px solid var(--gray-6);
+          border-radius: 999px;
+          padding: 2px 10px;
+        }
 
-  .trace-chain-root {
-    height: 100%;
-  }
+        .code-scroll-wrap {
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          overflow: auto;
 
-  .output-meta {
-    display: inline-block;
-    margin-bottom: var(--space-2);
-    color: var(--gray-11);
-    font-size: 12px;
-    border: 1px solid var(--gray-6);
-    border-radius: 999px;
-    padding: 2px 10px;
-    background: color-mix(in srgb, var(--gray-3) 75%, transparent);
-    -webkit-app-region: no-drag;
+          .code-highlight-view {
+            width: max-content;
+            min-width: 100%;
+            box-sizing: border-box;
+          }
+        }
+      }
+    }
   }
 }

package/src/App.tsx

@@ -4,12 +4,18 @@ import {CodeHighlight} from "@/components/code-highlight";
 import {MapInputPanel} from "@/components/map-input-panel";
 import {PanelCard} from "@/components/panel-card";
 import {TraceChain} from "@/components/trace-chain";
+import type {
+    ForgeKitBridge,
+    MapInputConfig,
+    ResolveTraceMetaOutput,
+    ResolveTraceSnippetOutput,
+} from "@/types";
 import {
     SourceMapUtils,
     type ChainMapSlot,
     type SourceMapChainState,
     type TraceOutputState,
-} from "@/utils/source-map";
+} from "@/utils/trace-ui";
 import '@forge-kit/component/style.css'
 import './App.less'
 
@@ -17,20 +23,21 @@ interface AppProps {
     themeProps?: React.ComponentProps<typeof Theme>
 }
 
-interface InputState {
-    entryLine: string
-    entryColumn: string
-    contextLineRadius: string
+const DEFAULT_MAX_SNIPPET_PAYLOAD_BYTES = String(32 * 1024)
+
+const stripMapExt = (fileName: string) => fileName.replace(/\.map$/i, "")
+const getMapFileNameFromPath = (filePath: string) => {
+    const normalized = filePath.replace(/\\/g, "/")
+    const segments = normalized.split("/")
+    return segments[segments.length - 1] || filePath
 }
 
 const initialChainState: SourceMapChainState = {
-    sourceMaps: {},
-    sourceMapFileNames: [],
     chainMapSlots: [],
     entryFileName: "",
 }
 
-const initialInputState: InputState = {
+const initialInputState: MapInputConfig = {
     entryLine: "",
     entryColumn: "",
     contextLineRadius: String(SourceMapUtils.DEFAULT_CONTEXT_LINE_RADIUS),
@@ -39,24 +46,31 @@ const initialInputState: InputState = {
 export const App: React.FC<AppProps> = (props) => {
     const {themeProps} = props
     const [chainState, setChainState] = React.useState<SourceMapChainState>(initialChainState)
-    const [inputState, setInputState] = React.useState<InputState>(initialInputState)
+    const [inputState, setInputState] = React.useState<MapInputConfig>(initialInputState)
     const [outputState, setOutputState] = React.useState<TraceOutputState>(SourceMapUtils.createInitialOutputState())
 
     const traceChainDisplayData = React.useMemo(() => {
         return SourceMapUtils.mapTraceForDisplay(outputState.traceData)
     }, [outputState.traceData])
 
-    const applyChainSlots =(slots: ChainMapSlot[]) => {
-        setChainState(SourceMapUtils.buildChainStateFromSlots(slots))
+    const applyChainSlots = (slots: ChainMapSlot[]) => {
+        setChainState({
+            chainMapSlots: slots,
+            entryFileName: slots.length ? stripMapExt(slots[0].mapFileName) : "",
+        })
     }
 
     const setOutputMessage = (message: string) => {
         setOutputState((prev) => SourceMapUtils.patchOutputMessage(prev, message))
     }
 
-    const handleAppendChainFile = async (file: File) => {
-        const slotFromFile = await SourceMapUtils.createChainSlotFromFile(file)
-        applyChainSlots([...chainState.chainMapSlots, slotFromFile])
+    const handleAppendMapFilePath = (filePath: string) => {
+        const slot: ChainMapSlot = {
+            id: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+            mapFileName: getMapFileNameFromPath(filePath),
+            mapFilePath: filePath,
+        }
+        applyChainSlots([...chainState.chainMapSlots, slot])
     }
 
     const handleRemoveChainSlot = (slotId: string) => {
@@ -73,18 +87,52 @@ export const App: React.FC<AppProps> = (props) => {
             entryLine: inputState.entryLine,
             entryColumn: inputState.entryColumn,
             contextLineRadius: inputState.contextLineRadius,
-            mapCount: chainState.sourceMapFileNames.length,
+            mapCount: chainState.chainMapSlots.length,
         })
 
         if (!validated.ok) return setOutputMessage(validated.message)
 
-        const nextOutput = await SourceMapUtils.resolveTraceOutput({
-            entry: validated.entry,
-            contextLineRadius: validated.contextLineRadius,
-            sourceMaps: chainState.sourceMaps,
-            sourceMapFileNames: chainState.sourceMapFileNames,
-        })
-        setOutputState(nextOutput)
+        const applyNodeMethod = (window as Window & { forgeKit?: ForgeKitBridge }).forgeKit?.applyNodeMethod
+
+        const mapFilePaths = chainState.chainMapSlots
+            .map((slot) => slot.mapFilePath)
+            .filter((path): path is string => Boolean(path))
+
+        if (!applyNodeMethod) return setOutputMessage("Node bridge 不可用，无法执行解析。")
+
+        if (mapFilePaths.length === 0) return setOutputMessage("未提供 map 文件路径，无法在 Node 侧解析。")
+
+        const payload = {
+            mapFilePaths,
+            entryFileName: validated.entry.fileName,
+            entryLine: String(validated.entry.lineNumber),
+            entryColumn: String(validated.entry.columnNumber),
+            contextLineRadius: String(validated.contextLineRadius),
+            maxSnippetPayloadBytes: DEFAULT_MAX_SNIPPET_PAYLOAD_BYTES,
+        }
+
+        try {
+            const nextOutput = await applyNodeMethod('resolveTrace', JSON.stringify(payload)) as ResolveTraceMetaOutput
+            setOutputState((prev) => ({
+                ...prev,
+                traceData: nextOutput.traceData || [],
+                resolvedSourceMeta: nextOutput.resolvedSourceMeta || null,
+                traceCode: nextOutput.message || prev.traceCode,
+                traceHighlightLines: [],
+            }))
+            if (nextOutput?.resolvedSourceMeta) {
+                try {
+                    const snippet = await applyNodeMethod('getSourceSnippet', JSON.stringify(payload)) as ResolveTraceSnippetOutput
+                    setOutputState((prev) => ({...prev, ...snippet}))
+                } catch (error) {
+                    const message = error instanceof Error ? error.message : String(error)
+                    setOutputState((prev) => SourceMapUtils.patchOutputMessage(prev, `源码片段加载失败: ${message}`))
+                }
+            }
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error)
+            setOutputMessage(`Node resolve failed: ${message}`)
+        }
     }
 
     return (
@@ -92,48 +140,44 @@ export const App: React.FC<AppProps> = (props) => {
                radius="full" panelBackground="translucent" {...themeProps}>
             <Flex className="forge-kit-plugin-source-map-prase-content" direction="column" gap="3">
                 <Flex className="top-cards" gap="3" align="stretch">
-                    <PanelCard title="TRACE CHAIN" cardClassName="trace-panel-card" contentClassName="trace-panel-content">
-                        <TraceChain
-                            slots={chainState.chainMapSlots.map((slot) => ({
-                                id: slot.id,
-                                mapFileName: slot.mapFileName,
-                                error: slot.error,
-                            }))}
-                            data={traceChainDisplayData}
-                            onReorder={handleReorderChainSlots}
-                            onDelete={handleRemoveChainSlot}
-                            className="trace-chain-root"
-                        />
-                    </PanelCard>
+                    <TraceChain
+                        className="top-trace-card"
+                        slots={chainState.chainMapSlots.map((slot) => ({
+                            id: slot.id,
+                            mapFileName: slot.mapFileName,
+                            error: slot.error,
+                        }))}
+                        data={traceChainDisplayData}
+                        onReorder={handleReorderChainSlots}
+                        onDelete={handleRemoveChainSlot}
+                    />
 
                     <MapInputPanel
+                        className="top-input-card"
                         chainDepth={chainState.chainMapSlots.length}
                         entryFileName={chainState.entryFileName}
                         inputConfig={inputState}
                         onInputConfigChange={setInputState}
                         onResolve={handleResolveTrace}
-                        onAppendMapFile={handleAppendChainFile}
+                        onAppendMapFilePath={handleAppendMapFilePath}
                     />
                 </Flex>
 
-                <PanelCard
-                    title="TRACE OUTPUT"
-                    cardClassName="result-panel-card"
-                    contentClassName="result-panel-content"
-                    contentProps={{direction: "column"}}
-                >
-                    {outputState.resolvedSourceMeta && (
-                        <Text className="output-meta">
-                            {`目标位置: ${outputState.resolvedSourceMeta.sourceFile}:${outputState.resolvedSourceMeta.lineNumber}:${outputState.resolvedSourceMeta.columnNumber}`}
-                        </Text>
-                    )}
-                    <Box>
-                        <CodeHighlight
-                            code={outputState.traceCode}
-                            highlightLines={outputState.traceHighlightLines}
-                            className="code-highlight-view"
-                        />
-                    </Box>
+                <PanelCard title="TRACE OUTPUT" className="result-panel-card">
+                    <Flex className="result-panel-content" direction="column">
+                        {outputState.resolvedSourceMeta && (
+                            <Text className="output-meta">
+                                {`目标位置: ${outputState.resolvedSourceMeta.sourceFile}:${outputState.resolvedSourceMeta.lineNumber}:${outputState.resolvedSourceMeta.columnNumber}`}
+                            </Text>
+                        )}
+                        <Box className="code-scroll-wrap">
+                            <CodeHighlight
+                                code={outputState.traceCode}
+                                highlightLines={outputState.traceHighlightLines}
+                                className="code-highlight-view"
+                            />
+                        </Box>
+                    </Flex>
                 </PanelCard>
             </Flex>
         </Theme>

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

@@ -1,95 +1,87 @@
-.forge-kit-plugin-source-map-prase {
-  .input-panel-card {
-    flex: 1;
-    display: flex;
+.input-panel-card {
+  .input-panel-content {
+    overflow: auto;
+    gap: 10px;
 
-    .input-panel-content {
-      flex: 1;
-      padding-top: var(--space-3);
-      overflow: auto;
-      gap: 10px;
-    }
-
-    .input-footer {
+    .input-summary-grid {
       display: grid;
-      grid-template-rows: auto minmax(0, 1fr);
-      row-gap: 10px;
-      border-top: 1px solid var(--gray-5);
-      padding-top: 10px;
-      flex: 1;
-    }
-  }
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
 
-  .input-summary-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
+      .input-summary-item {
+        border: 1px solid var(--gray-5);
+        border-radius: var(--radius-3);
+        padding: 8px 10px;
+        background: var(--gray-2);
 
-  .input-summary-item {
-    border: 1px solid var(--gray-5);
-    border-radius: var(--radius-3);
-    padding: 8px 10px;
-    background: var(--gray-2);
-  }
+        .input-summary-label {
+          display: block;
+          color: var(--gray-10);
+          font-size: 12px;
+          margin-bottom: 4px;
+        }
 
-  .input-summary-label {
-    display: block;
-    color: var(--gray-10);
-    font-size: 12px;
-    margin-bottom: 4px;
-  }
+        .input-summary-value {
+          display: block;
+          color: var(--gray-12);
+          font-size: 13px;
+          font-weight: 600;
+          word-break: break-all;
+        }
+      }
+    }
 
-  .input-summary-value {
-    display: block;
-    color: var(--gray-12);
-    font-size: 13px;
-    font-weight: 600;
-    word-break: break-all;
-  }
+    .input-hints {
+      border: 1px dashed var(--gray-6);
+      border-radius: var(--radius-3);
+      padding: 8px 10px;
+      background: color-mix(in srgb, var(--gray-2) 70%, transparent);
 
-  .input-hints {
-    border: 1px dashed var(--gray-6);
-    border-radius: var(--radius-3);
-    padding: 8px 10px;
-    background: color-mix(in srgb, var(--gray-2) 70%, transparent);
-  }
+      .input-hints-title {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--gray-11);
+        margin-bottom: 6px;
+      }
 
-  .input-hints-title {
-    display: block;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--gray-11);
-    margin-bottom: 6px;
-  }
+      .input-hints-item {
+        display: block;
+        font-size: 12px;
+        line-height: 1.6;
+        color: var(--gray-11);
+      }
+    }
 
-  .input-hints-item {
-    display: block;
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--gray-11);
-  }
+    .input-footer {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      row-gap: 10px;
+      border-top: 1px solid var(--gray-5);
+      padding-top: 10px;
 
-  .field-row-compact {
-    flex: 1;
-  }
+      .entry-row {
+        .field-row-compact {
+          flex: 1;
 
-  .entry-actions {
-    display: flex;
-    flex: 1;
-  }
+          .field-label {
+            color: var(--gray-11);
+            font-size: 12px;
+          }
 
-  .entry-action-row {
-    width: auto;
-  }
+          .rt-TextFieldRoot {
+            border-radius: 6px;
+          }
+        }
+      }
 
-  .field-label {
-    color: var(--gray-11);
-    font-size: 12px;
-  }
+      .entry-actions {
+        display: flex;
 
-  .rt-TextFieldRoot {
-    border-radius: 6px;
+        .entry-action-row {
+          width: auto;
+        }
+      }
+    }
   }
-
 }