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

package/dist/icon.svg

@@ -0,0 +1,3 @@
+<svg width="204" height="204" viewBox="0 0 204 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M178.275 203.725H25.475C11.4 203.725 0 192.325 0 178.25V25.475C0 11.4 11.4 0 25.475 0H178.275C192.35 0 203.75 11.4 203.75 25.475V178.275C203.725 192.35 192.35 203.725 178.275 203.725ZM191.15 24.3C191.15 17.85 185.45 12.6 178.4 12.6H25.35C18.3 12.6 12.6 17.85 12.6 24.3V38.325H191.15V24.3ZM191.15 50.95H12.6V178.175C12.6 185.35 18.3 191.15 25.35 191.15H178.4C185.45 191.15 191.15 185.35 191.15 178.175V50.95ZM149.275 154.4C147.125 156.525 143.675 156.525 141.525 154.4C140.5 153.4 139.925 152.025 139.925 150.575C139.925 149.15 140.5 147.775 141.525 146.75L169.725 123.725L141.525 100.7C140.5 99.7 139.925 98.325 139.925 96.875C139.925 95.425 140.5 94.05 141.525 93.05C143.675 90.95 147.15 90.95 149.275 93.05L181.825 119.625C182.975 120.75 183.45 122.225 183.375 123.7C183.45 125.175 182.975 126.675 181.825 127.775L149.275 154.4ZM94.125 170.7C92.625 173.25 90.225 173.7 86.7 172.65C83.825 171.8 83.2 167.875 84.725 165.3L111.9 73.925C111.9 73.925 116.725 70.475 119.3 71.975C120.55 72.675 121.45 73.85 121.825 75.225C122.2 76.6 122 78.075 121.3 79.3L94.125 170.7ZM62.225 154.4C60.075 156.525 56.625 156.525 54.475 154.4L21.925 127.85C20.775 126.725 20.3 125.225 20.375 123.775C20.3 122.3 20.775 120.8 21.925 119.7L54.475 93.125C56.625 91.025 60.075 91.025 62.225 93.125C63.25 94.125 63.85 95.5 63.85 96.95C63.85 98.4 63.275 99.775 62.225 100.775L34.025 123.8L62.225 146.825C63.25 147.825 63.85 149.2 63.85 150.65C63.85 152.1 63.25 153.4 62.225 154.4Z" fill=""/>
+</svg>

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@forge-kit/plugin-source-map-prase",
+  "entry": "./dist/app.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "yu.pan <panyupy@vip.qq.com>",
+  "license": "MIT",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@forge-kit/component": "workspace:*",
+    "@forge-kit/icons": "workspace:*",
+    "@forge-kit/types": "workspace:*",
+    "classnames": "^2.5.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "source-map": "^0.7.6",
+    "source-map-js": "^1.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@forge-kit/vite-plugin-forge-kit": "workspace:*",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/src/App.less

@@ -0,0 +1,101 @@
+html, body, #root {
+  -webkit-app-region: drag;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.forge-kit-plugin-source-map-prase {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &-content {
+    width: 100%;
+    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;
+  }
+
+  .panel-shell {
+    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;
+  }
+
+  .trace-panel-content,
+  .result-panel-content {
+    padding-top: var(--space-3);
+    flex: 1;
+    min-height: 0;
+  }
+
+  .trace-panel-content {
+    overflow: hidden;
+  }
+
+  .result-panel-content {
+    overflow: auto;
+  }
+
+  .trace-chain-root {
+    height: 100%;
+  }
+
+  .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;
+  }
+}

package/src/App.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import {Box, Flex, Text, Theme} from "@forge-kit/component";
+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 {
+    SourceMapUtils,
+    type ChainMapSlot,
+    type SourceMapChainState,
+    type TraceOutputState,
+} from "@/utils/source-map";
+import '@forge-kit/component/style.css'
+import './App.less'
+
+interface AppProps {
+    themeProps?: React.ComponentProps<typeof Theme>
+}
+
+interface InputState {
+    entryLine: string
+    entryColumn: string
+    contextLineRadius: string
+}
+
+const initialChainState: SourceMapChainState = {
+    sourceMaps: {},
+    sourceMapFileNames: [],
+    chainMapSlots: [],
+    entryFileName: "",
+}
+
+const initialInputState: InputState = {
+    entryLine: "",
+    entryColumn: "",
+    contextLineRadius: String(SourceMapUtils.DEFAULT_CONTEXT_LINE_RADIUS),
+}
+
+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 [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 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 handleRemoveChainSlot = (slotId: string) => {
+        applyChainSlots(SourceMapUtils.removeChainSlot(chainState.chainMapSlots, slotId))
+    }
+
+    const handleReorderChainSlots = (nextIds: string[]) => {
+        applyChainSlots(SourceMapUtils.reorderChainSlots(chainState.chainMapSlots, nextIds))
+    }
+
+    const handleResolveTrace = async () => {
+        const validated = SourceMapUtils.validateResolveInput({
+            entryFileName: chainState.entryFileName,
+            entryLine: inputState.entryLine,
+            entryColumn: inputState.entryColumn,
+            contextLineRadius: inputState.contextLineRadius,
+            mapCount: chainState.sourceMapFileNames.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)
+    }
+
+    return (
+        <Theme className="forge-kit-plugin-source-map-prase" accentColor="gray" appearance="dark" grayColor="slate"
+               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>
+
+                    <MapInputPanel
+                        chainDepth={chainState.chainMapSlots.length}
+                        entryFileName={chainState.entryFileName}
+                        inputConfig={inputState}
+                        onInputConfigChange={setInputState}
+                        onResolve={handleResolveTrace}
+                        onAppendMapFile={handleAppendChainFile}
+                    />
+                </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>
+            </Flex>
+        </Theme>
+    )
+}

package/src/components/code-highlight/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
+import {oneDark} from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface CodeHighlightProps {
+    code?: string
+    className?: string
+    highlightLines?: number[]
+}
+
+export const CodeHighlight: React.FC<CodeHighlightProps> = (props) => {
+    const {code = "", className, highlightLines = []} = props
+
+    const baseLineStyle = {
+        backgroundColor: 'var(--color-background)',
+        display: 'block',
+    }
+
+    const highlightLineStyle = {
+        backgroundColor: 'color-mix(in srgb, var(--color-background) 55%, var(--gray-8) 45%)',
+        display: 'block',
+    }
+
+    const generateLineProps = (lineNum: number) => {
+        return highlightLines.includes(lineNum) ? {style: highlightLineStyle} : {style: baseLineStyle}
+    }
+
+    return (
+        <SyntaxHighlighter
+            wrapLines
+            showLineNumbers
+            style={oneDark}
+            language="javascript"
+            className={className}
+            lineProps={generateLineProps}
+            customStyle={{background: "var(--color-background)"}}
+        >
+            {code}
+        </SyntaxHighlighter>
+    )
+}

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

@@ -0,0 +1,95 @@
+.forge-kit-plugin-source-map-prase {
+  .input-panel-card {
+    flex: 1;
+    display: flex;
+
+    .input-panel-content {
+      flex: 1;
+      padding-top: var(--space-3);
+      overflow: auto;
+      gap: 10px;
+    }
+
+    .input-footer {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      row-gap: 10px;
+      border-top: 1px solid var(--gray-5);
+      padding-top: 10px;
+      flex: 1;
+    }
+  }
+
+  .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-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-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-item {
+    display: block;
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--gray-11);
+  }
+
+  .field-row-compact {
+    flex: 1;
+  }
+
+  .entry-actions {
+    display: flex;
+    flex: 1;
+  }
+
+  .entry-action-row {
+    width: auto;
+  }
+
+  .field-label {
+    color: var(--gray-11);
+    font-size: 12px;
+  }
+
+  .rt-TextFieldRoot {
+    border-radius: 6px;
+  }
+
+}

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

@@ -0,0 +1,128 @@
+import * as React from "react";
+import {Box, Button, Flex, Text, TextField} from "@forge-kit/component";
+import {PanelCard} from "@/components/panel-card";
+import {noop} from "@/utils";
+import "./index.less";
+
+interface MapInputConfig {
+    entryLine: string
+    entryColumn: string
+    contextLineRadius: string
+}
+
+interface MapInputPanelProps {
+    chainDepth: number
+    entryFileName: string
+    inputConfig: MapInputConfig
+    onInputConfigChange: (next: MapInputConfig) => void
+    onResolve: () => void
+    onAppendMapFile: (file: File) => void
+}
+
+interface MapInputFieldProps {
+    title?: string
+    value?: string
+    min?: number
+    placeholder?: string
+    onChange?: (value: string) => void
+}
+
+const MapInputField: React.FC<MapInputFieldProps> = (props) => {
+    const {title, value, min, placeholder, onChange = noop} = props
+    return (
+        <Flex className="field-row-compact" direction="column" gap="1">
+            <Text className="field-label">{title}</Text>
+            <TextField.Root
+                type="number"
+                min={min}
+                value={value}
+                onChange={(event) => onChange(event.target.value)}
+                placeholder={placeholder}
+            />
+        </Flex>
+    )
+}
+
+export const MapInputPanel: React.FC<MapInputPanelProps> = (props) => {
+    const {
+        chainDepth,
+        entryFileName,
+        inputConfig,
+        onInputConfigChange,
+        onResolve,
+        onAppendMapFile,
+    } = 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 handleInputConfigChange = (field: keyof MapInputConfig, value: string) => {
+        onInputConfigChange({...inputConfig, [field]: value})
+    }
+
+    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>
+
+            <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>
+        </PanelCard>
+    )
+}

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

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