@forge-kit/plugin-source-map-prase 0.0.2 → 0.0.4

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.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,9 +23,10 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@forge-kit/bridge-client": "workspace:*",
     "@forge-kit/component": "workspace:*",
     "@forge-kit/icons": "workspace:*",
-    "@forge-kit/types": "workspace:*",
+    "@forge-kit/helper": "workspace:*",
     "classnames": "^2.5.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/App.less

@@ -16,46 +16,55 @@ html, body, #root {
     overflow: hidden;
     min-height: 0;
 
-
     .top-cards {
       flex: 1;
       min-height: 0;
+
+      .top-trace-card {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .top-input-card {
+        flex: 1;
+        min-height: 0;
+      }
     }
 
     .result-panel-card {
       flex: 1;
       min-height: 0;
       display: flex;
-    }
 
-    .result-panel-content {
-      flex: 1;
-      min-height: 0;
-      width: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
+      .result-panel-content {
+        flex: 1;
+        min-height: 0;
+        width: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-    .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;
-    }
+        .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;
+        }
 
-    .code-scroll-wrap {
-      width: 100%;
-      max-width: 100%;
-      min-width: 0;
-      overflow-x: auto;
-      overflow-y: hidden;
+        .code-scroll-wrap {
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          overflow: auto;
 
-      .code-highlight-view {
-        width: max-content;
+          .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 {applyNodeMethod, canIUse} from "@forge-kit/bridge-client";
+import type {
+    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,7 +46,7 @@ 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(() => {
@@ -47,16 +54,23 @@ export const App: React.FC<AppProps> = (props) => {
     }, [outputState.traceData])
 
     const applyChainSlots = (slots: ChainMapSlot[]) => {
-        setChainState(SourceMapUtils.buildChainStateFromSlots(slots))
+        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,50 @@ 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 mapFilePaths = chainState.chainMapSlots
+            .map((slot) => slot.mapFilePath)
+            .filter((path): path is string => Boolean(path))
+
+        if (!canIUse('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<ResolveTraceMetaOutput>('resolveTrace', JSON.stringify(payload))
+            setOutputState((prev) => ({
+                ...prev,
+                traceData: nextOutput.traceData || [],
+                resolvedSourceMeta: nextOutput.resolvedSourceMeta || null,
+                traceCode: nextOutput.message || prev.traceCode,
+                traceHighlightLines: [],
+            }))
+            if (nextOutput?.resolvedSourceMeta) {
+                try {
+                    const snippet = await applyNodeMethod<ResolveTraceSnippetOutput>('getSourceSnippet', JSON.stringify(payload))
+                    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 (
@@ -93,6 +139,7 @@ export const App: React.FC<AppProps> = (props) => {
             <Flex className="forge-kit-plugin-source-map-prase-content" direction="column" gap="3">
                 <Flex className="top-cards" gap="3" align="stretch">
                     <TraceChain
+                        className="top-trace-card"
                         slots={chainState.chainMapSlots.map((slot) => ({
                             id: slot.id,
                             mapFileName: slot.mapFileName,
@@ -101,16 +148,16 @@ export const App: React.FC<AppProps> = (props) => {
                         data={traceChainDisplayData}
                         onReorder={handleReorderChainSlots}
                         onDelete={handleRemoveChainSlot}
-                        className="trace-chain-root"
                     />
 
                     <MapInputPanel
+                        className="top-input-card"
                         chainDepth={chainState.chainMapSlots.length}
                         entryFileName={chainState.entryFileName}
                         inputConfig={inputState}
                         onInputConfigChange={setInputState}
                         onResolve={handleResolveTrace}
-                        onAppendMapFile={handleAppendChainFile}
+                        onAppendMapFilePath={handleAppendMapFilePath}
                     />
                 </Flex>
 

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

@@ -1,94 +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;
-      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;
+        }
+      }
+    }
   }
-
 }

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

@@ -1,22 +1,20 @@
 import * as React from "react";
 import {Box, Button, Flex, Text, TextField} from "@forge-kit/component";
+import {canIUse, openFileDialog} from "@forge-kit/bridge-client";
 import {PanelCard} from "@/components/panel-card";
+import type {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 +43,26 @@ 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 () => {
+        if (!canIUse('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,7 +70,7 @@ export const MapInputPanel: React.FC<MapInputPanelProps> = (props) => {
     }
 
     return (
-        <PanelCard title="MAP INPUT" className="input-panel-card">
+        <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">

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

@@ -1,18 +1,21 @@
+.panel-card {
+  display: flex !important;
 
-.panel-shell {
-  overflow: hidden;
-  width: 100%;
+  .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;
+    .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

@@ -5,7 +5,7 @@ import './index.less'
 
 interface PanelCardProps {
     title: string
-    className: string
+    className?: string
     children?: React.ReactNode
 }
 
@@ -13,7 +13,7 @@ export const PanelCard: React.FC<PanelCardProps> = (props) => {
     const {title, className, children} = props
 
     return (
-        <Card className={classNames('panel-card', className)}>
+        <Card className={classNames('panel-card', className)} >
             <Flex className="panel-shell" direction="column">
                 <Text className="panel-title">{title}</Text>
                 <>{children}</>