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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/app.js +3 -3
  2. package/package.json +1 -1
  3. package/src/App.less +39 -79
  4. package/src/App.tsx +27 -32
  5. package/src/components/map-input-panel/index.less +0 -1
  6. package/src/components/map-input-panel/index.tsx +47 -50
  7. package/src/components/panel-card/index.less +18 -0
  8. package/src/components/panel-card/index.tsx +6 -8
  9. package/src/components/trace-chain/index.less +108 -106
  10. package/src/components/trace-chain/index.tsx +22 -23
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  ],
11
11
  "author": "yu.pan <panyupy@vip.qq.com>",
12
12
  "license": "MIT",
13
- "version": "0.0.1",
13
+ "version": "0.0.2",
14
14
  "type": "module",
15
15
  "scripts": {
16
16
  "dev": "vite",
package/src/App.less CHANGED
@@ -1,5 +1,4 @@
1
1
  html, body, #root {
2
- -webkit-app-region: drag;
3
2
  background-color: transparent;
4
3
  margin: 0;
5
4
  height: 100%;
@@ -16,86 +15,47 @@ html, body, #root {
16
15
  height: 100%;
17
16
  overflow: hidden;
18
17
  min-height: 0;
19
- }
20
-
21
- .top-cards {
22
- flex: 1;
23
- min-height: 0;
24
- }
25
18
 
26
- .trace-panel-card,
27
- .input-panel-card,
28
- .result-panel-card {
29
19
 
30
- -webkit-app-region: no-drag;
31
- border: 1px solid color-mix(in srgb, var(--gray-6) 75%, transparent);
32
- background:
33
- linear-gradient(180deg, color-mix(in srgb, var(--gray-2) 88%, transparent), color-mix(in srgb, var(--gray-1) 86%, transparent));
34
- box-shadow:
35
- inset 0 1px 0 rgba(255, 255, 255, 0.04),
36
- 0 10px 24px rgba(0, 0, 0, 0.16);
37
- }
38
-
39
- .input-panel-card,
40
- .trace-panel-card {
41
- flex: 1;
42
- min-height: 0;
43
- }
44
-
45
- .trace-panel-card {
46
- display: flex;
47
- }
48
-
49
- .result-panel-card {
50
- flex: 1;
51
- min-height: 0;
52
- display: flex;
53
- }
54
-
55
- .panel-shell {
56
- flex: 1;
57
- min-height: 0;
20
+ .top-cards {
21
+ flex: 1;
22
+ min-height: 0;
23
+ }
24
+
25
+ .result-panel-card {
26
+ flex: 1;
27
+ min-height: 0;
28
+ display: flex;
29
+ }
30
+
31
+ .result-panel-content {
32
+ flex: 1;
33
+ min-height: 0;
34
+ width: 100%;
35
+ overflow-y: auto;
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ .output-meta {
40
+ margin-bottom: var(--space-2);
41
+ color: var(--gray-11);
42
+ font-size: 12px;
43
+ border: 1px solid var(--gray-6);
44
+ border-radius: 999px;
45
+ padding: 2px 10px;
46
+ }
47
+
48
+ .code-scroll-wrap {
49
+ width: 100%;
50
+ max-width: 100%;
51
+ min-width: 0;
52
+ overflow-x: auto;
53
+ overflow-y: hidden;
54
+
55
+ .code-highlight-view {
56
+ width: max-content;
57
+ }
58
+ }
58
59
  }
59
60
 
60
- .panel-title {
61
- display: block;
62
- padding: 0 0 var(--space-3);
63
- margin-bottom: var(--space-2);
64
- border-bottom: solid 1px var(--gray-5);
65
- font-size: 12px;
66
- letter-spacing: 0.1em;
67
- color: var(--gray-11);
68
- text-transform: uppercase;
69
- }
70
-
71
- .trace-panel-content,
72
- .result-panel-content {
73
- padding-top: var(--space-3);
74
- flex: 1;
75
- min-height: 0;
76
- }
77
-
78
- .trace-panel-content {
79
- overflow: hidden;
80
- }
81
-
82
- .result-panel-content {
83
- overflow: auto;
84
- }
85
-
86
- .trace-chain-root {
87
- height: 100%;
88
- }
89
-
90
- .output-meta {
91
- display: inline-block;
92
- margin-bottom: var(--space-2);
93
- color: var(--gray-11);
94
- font-size: 12px;
95
- border: 1px solid var(--gray-6);
96
- border-radius: 999px;
97
- padding: 2px 10px;
98
- background: color-mix(in srgb, var(--gray-3) 75%, transparent);
99
- -webkit-app-region: no-drag;
100
- }
101
61
  }
package/src/App.tsx CHANGED
@@ -46,7 +46,7 @@ export const App: React.FC<AppProps> = (props) => {
46
46
  return SourceMapUtils.mapTraceForDisplay(outputState.traceData)
47
47
  }, [outputState.traceData])
48
48
 
49
- const applyChainSlots =(slots: ChainMapSlot[]) => {
49
+ const applyChainSlots = (slots: ChainMapSlot[]) => {
50
50
  setChainState(SourceMapUtils.buildChainStateFromSlots(slots))
51
51
  }
52
52
 
@@ -92,19 +92,17 @@ export const App: React.FC<AppProps> = (props) => {
92
92
  radius="full" panelBackground="translucent" {...themeProps}>
93
93
  <Flex className="forge-kit-plugin-source-map-prase-content" direction="column" gap="3">
94
94
  <Flex className="top-cards" gap="3" align="stretch">
95
- <PanelCard title="TRACE CHAIN" cardClassName="trace-panel-card" contentClassName="trace-panel-content">
96
- <TraceChain
97
- slots={chainState.chainMapSlots.map((slot) => ({
98
- id: slot.id,
99
- mapFileName: slot.mapFileName,
100
- error: slot.error,
101
- }))}
102
- data={traceChainDisplayData}
103
- onReorder={handleReorderChainSlots}
104
- onDelete={handleRemoveChainSlot}
105
- className="trace-chain-root"
106
- />
107
- </PanelCard>
95
+ <TraceChain
96
+ slots={chainState.chainMapSlots.map((slot) => ({
97
+ id: slot.id,
98
+ mapFileName: slot.mapFileName,
99
+ error: slot.error,
100
+ }))}
101
+ data={traceChainDisplayData}
102
+ onReorder={handleReorderChainSlots}
103
+ onDelete={handleRemoveChainSlot}
104
+ className="trace-chain-root"
105
+ />
108
106
 
109
107
  <MapInputPanel
110
108
  chainDepth={chainState.chainMapSlots.length}
@@ -116,24 +114,21 @@ export const App: React.FC<AppProps> = (props) => {
116
114
  />
117
115
  </Flex>
118
116
 
119
- <PanelCard
120
- title="TRACE OUTPUT"
121
- cardClassName="result-panel-card"
122
- contentClassName="result-panel-content"
123
- contentProps={{direction: "column"}}
124
- >
125
- {outputState.resolvedSourceMeta && (
126
- <Text className="output-meta">
127
- {`目标位置: ${outputState.resolvedSourceMeta.sourceFile}:${outputState.resolvedSourceMeta.lineNumber}:${outputState.resolvedSourceMeta.columnNumber}`}
128
- </Text>
129
- )}
130
- <Box>
131
- <CodeHighlight
132
- code={outputState.traceCode}
133
- highlightLines={outputState.traceHighlightLines}
134
- className="code-highlight-view"
135
- />
136
- </Box>
117
+ <PanelCard title="TRACE OUTPUT" className="result-panel-card">
118
+ <Flex className="result-panel-content" direction="column">
119
+ {outputState.resolvedSourceMeta && (
120
+ <Text className="output-meta">
121
+ {`目标位置: ${outputState.resolvedSourceMeta.sourceFile}:${outputState.resolvedSourceMeta.lineNumber}:${outputState.resolvedSourceMeta.columnNumber}`}
122
+ </Text>
123
+ )}
124
+ <Box className="code-scroll-wrap">
125
+ <CodeHighlight
126
+ code={outputState.traceCode}
127
+ highlightLines={outputState.traceHighlightLines}
128
+ className="code-highlight-view"
129
+ />
130
+ </Box>
131
+ </Flex>
137
132
  </PanelCard>
138
133
  </Flex>
139
134
  </Theme>
package/src/components/map-input-panel/index.less CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  .input-panel-content {
7
7
  flex: 1;
8
- padding-top: var(--space-3);
9
8
  overflow: auto;
10
9
  gap: 10px;
11
10
  }
package/src/components/map-input-panel/index.tsx CHANGED
@@ -71,58 +71,55 @@ export const MapInputPanel: React.FC<MapInputPanelProps> = (props) => {
71
71
  }
72
72
 
73
73
  return (
74
- <PanelCard
75
- title="MAP INPUT"
76
- cardClassName="input-panel-card"
77
- contentClassName="input-panel-content"
78
- contentProps={{direction: "column", gap: "3"}}
79
- >
80
- <Box className="input-summary-grid">
81
- <Box className="input-summary-item">
82
- <Text className="input-summary-label">入口 Map</Text>
83
- <Text className="input-summary-value">{entryFileName || "-"}</Text>
84
- </Box>
85
- <Box className="input-summary-item">
86
- <Text className="input-summary-label">链路层数</Text>
87
- <Text className="input-summary-value">{`${chainDepth} 层`}</Text>
88
- </Box>
89
- </Box>
74
+ <PanelCard title="MAP INPUT" className="input-panel-card">
75
+ <Flex className="input-panel-content" direction='column' gap="3">
76
+ <Box className="input-summary-grid">
77
+ <Box className="input-summary-item">
78
+ <Text className="input-summary-label">入口 Map</Text>
79
+ <Text className="input-summary-value">{entryFileName || "-"}</Text>
80
+ </Box>
81
+ <Box className="input-summary-item">
82
+ <Text className="input-summary-label">链路层数</Text>
83
+ <Text className="input-summary-value">{`${chainDepth} 层`}</Text>
84
+ </Box>
85
+ </Box>
90
86
 
91
- <Box className="input-hints">
92
- <Text className="input-hints-title">使用说明</Text>
93
- <Text className="input-hints-item">1. 按解析链路顺序添加 map 文件。</Text>
94
- <Text className="input-hints-item">2. 入口 Map 会自动取第一层的 output file。</Text>
95
- <Text className="input-hints-item">3. TRACE CHAIN 支持拖动序号来切换 map 顺序。</Text>
96
- </Box>
87
+ <Box className="input-hints">
88
+ <Text className="input-hints-title">使用说明</Text>
89
+ <Text className="input-hints-item">1. 按解析链路顺序添加 map 文件。</Text>
90
+ <Text className="input-hints-item">2. 入口 Map 会自动取第一层的 output file。</Text>
91
+ <Text className="input-hints-item">3. TRACE CHAIN 支持拖动序号来切换 map 顺序。</Text>
92
+ </Box>
97
93
 
98
- <Box className="input-footer">
99
- <Flex gap="2" className="entry-row" align="end" wrap="wrap">
100
- <MapInputField
101
- title="入口行号"
102
- min={1}
103
- value={inputConfig.entryLine}
104
- onChange={(value) => handleInputConfigChange("entryLine", value)}
105
- />
106
- <MapInputField
107
- title="入口列号"
108
- min={0}
109
- value={inputConfig.entryColumn}
110
- onChange={(value) => handleInputConfigChange("entryColumn", value)}
111
- />
112
- <MapInputField
113
- title="上下文行数"
114
- min={0}
115
- value={inputConfig.contextLineRadius}
116
- onChange={(value) => handleInputConfigChange("contextLineRadius", value)}
117
- />
118
- </Flex>
119
- <Flex className="entry-actions" direction="column" justify="center" align="center" gap="2">
120
- <Flex className="entry-action-row" gap="2" wrap="wrap" justify="center" align="center">
121
- <Button size="2" radius="large" onClick={onResolve}>解析链路</Button>
122
- <Button size="2" radius="large" variant="outline" onClick={openFilePicker}>添加 map 文件</Button>
123
- </Flex>
124
- </Flex>
125
- </Box>
94
+ <Box className="input-footer">
95
+ <Flex gap="2" className="entry-row" align="end" wrap="wrap">
96
+ <MapInputField
97
+ title="入口行号"
98
+ min={1}
99
+ value={inputConfig.entryLine}
100
+ onChange={(value) => handleInputConfigChange("entryLine", value)}
101
+ />
102
+ <MapInputField
103
+ title="入口列号"
104
+ min={0}
105
+ value={inputConfig.entryColumn}
106
+ onChange={(value) => handleInputConfigChange("entryColumn", value)}
107
+ />
108
+ <MapInputField
109
+ title="上下文行数"
110
+ min={0}
111
+ value={inputConfig.contextLineRadius}
112
+ onChange={(value) => handleInputConfigChange("contextLineRadius", value)}
113
+ />
114
+ </Flex>
115
+ <Flex className="entry-actions" direction="column" justify="center" align="center" gap="2">
116
+ <Flex className="entry-action-row" gap="2" wrap="wrap" justify="center" align="center">
117
+ <Button size="2" radius="large" onClick={onResolve}>解析链路</Button>
118
+ <Button size="2" radius="large" variant="outline" onClick={openFilePicker}>添加 map 文件</Button>
119
+ </Flex>
120
+ </Flex>
121
+ </Box>
122
+ </Flex>
126
123
  </PanelCard>
127
124
  )
128
125
  }
package/src/components/panel-card/index.less ADDED
@@ -0,0 +1,18 @@
1
+
2
+ .panel-shell {
3
+ overflow: hidden;
4
+ width: 100%;
5
+
6
+ .panel-title {
7
+ display: block;
8
+ padding: 0 0 var(--space-3);
9
+ margin-bottom: var(--space-3);
10
+ border-bottom: solid 1px var(--gray-5);
11
+ font-size: 12px;
12
+ letter-spacing: 0.1em;
13
+ color: var(--gray-11);
14
+ text-transform: uppercase;
15
+ }
16
+ }
17
+
18
+
package/src/components/panel-card/index.tsx CHANGED
@@ -1,24 +1,22 @@
1
1
  import * as React from "react";
2
2
  import {Card, Flex, Text} from "@forge-kit/component";
3
+ import classNames from 'classnames'
4
+ import './index.less'
3
5
 
4
6
  interface PanelCardProps {
5
7
  title: string
6
- cardClassName: string
7
- contentClassName: string
8
- contentProps?: Omit<React.ComponentProps<typeof Flex>, "className" | "children">
8
+ className: string
9
9
  children?: React.ReactNode
10
10
  }
11
11
 
12
12
  export const PanelCard: React.FC<PanelCardProps> = (props) => {
13
- const {title, cardClassName, contentClassName, contentProps, children} = props
13
+ const {title, className, children} = props
14
14
 
15
15
  return (
16
- <Card className={cardClassName}>
16
+ <Card className={classNames('panel-card', className)}>
17
17
  <Flex className="panel-shell" direction="column">
18
18
  <Text className="panel-title">{title}</Text>
19
- <Flex className={contentClassName} {...contentProps}>
20
- {children}
21
- </Flex>
19
+ <>{children}</>
22
20
  </Flex>
23
21
  </Card>
24
22
  )
package/src/components/trace-chain/index.less CHANGED
@@ -1,128 +1,130 @@
1
- .trace-chain-root {
1
+ .trace-panel-card {
2
2
  flex: 1;
3
- min-height: 0;
4
- height: 100%;
5
- overflow: auto;
6
- padding: 4px;
7
- -webkit-app-region: no-drag;
8
3
 
9
- .trace-chain-item {
10
- margin-bottom: 10px;
4
+ .trace-chain-root {
5
+ flex: 1;
6
+ min-height: 0;
7
+ height: 100%;
8
+ overflow: auto;
9
+ padding: 4px;
11
10
 
12
- &[data-dragging="true"] {
13
- opacity: 0.85;
11
+ .trace-chain-item {
12
+ margin-bottom: 10px;
13
+
14
+ &[data-dragging="true"] {
15
+ opacity: 0.85;
16
+ }
14
17
  }
15
- }
16
18
 
17
- .trace-chain-empty {
18
- min-height: 180px;
19
- border: 1px dashed var(--gray-6);
20
- border-radius: var(--radius-3);
21
- color: var(--gray-11);
22
- font-size: 13px;
23
- }
19
+ .trace-chain-empty {
20
+ min-height: 180px;
21
+ border: 1px dashed var(--gray-6);
22
+ border-radius: var(--radius-3);
23
+ color: var(--gray-11);
24
+ font-size: 13px;
25
+ }
24
26
 
25
- .trace-chain-node {
26
- padding: 10px;
27
- border-radius: var(--radius-3);
28
- border: 1px solid var(--gray-6);
29
- background:
30
- linear-gradient(160deg, color-mix(in srgb, var(--gray-3) 90%, transparent), color-mix(in srgb, var(--gray-2) 90%, transparent));
31
- }
27
+ .trace-chain-node {
28
+ padding: 10px;
29
+ border-radius: var(--radius-3);
30
+ border: 1px solid var(--gray-6);
31
+ background: linear-gradient(160deg, color-mix(in srgb, var(--gray-3) 90%, transparent), color-mix(in srgb, var(--gray-2) 90%, transparent));
32
+ }
32
33
 
33
- .trace-chain-drag-handle {
34
- min-width: 46px;
35
- height: 24px;
36
- border-radius: 999px;
37
- border: 1px solid var(--gray-7);
38
- background: var(--gray-4);
39
- color: var(--gray-12);
40
- font-size: 12px;
41
- font-weight: 600;
42
- user-select: none;
43
- cursor: grab;
44
-
45
- &:active {
46
- cursor: grabbing;
34
+ .trace-chain-drag-handle {
35
+ min-width: 46px;
36
+ height: 24px;
37
+ border-radius: 999px;
38
+ border: 1px solid var(--gray-7);
39
+ background: var(--gray-4);
40
+ color: var(--gray-12);
41
+ font-size: 12px;
42
+ font-weight: 600;
43
+ user-select: none;
44
+ cursor: grab;
45
+
46
+ &:active {
47
+ cursor: grabbing;
48
+ }
47
49
  }
48
- }
49
50
 
50
- .trace-chain-content {
51
- overflow: hidden;
52
- width: 100%;
53
- }
51
+ .trace-chain-content {
52
+ overflow: hidden;
53
+ width: 100%;
54
+ }
54
55
 
55
- .trace-chain-main-title {
56
- display: block;
57
- font-size: 13px;
58
- font-weight: 700;
59
- color: var(--gray-12);
60
- line-height: 1.35;
61
- word-break: break-all;
62
- user-select: text;
63
- cursor: text;
64
- }
56
+ .trace-chain-main-title {
57
+ display: block;
58
+ font-size: 13px;
59
+ font-weight: 700;
60
+ color: var(--gray-12);
61
+ line-height: 1.35;
62
+ word-break: break-all;
63
+ user-select: text;
64
+ cursor: text;
65
+ }
65
66
 
66
- .trace-chain-header {
67
- width: 100%;
68
- }
67
+ .trace-chain-header {
68
+ width: 100%;
69
+ }
69
70
 
70
- .trace-chain-row {
71
- display: grid;
72
- grid-template-columns: 34px minmax(0, 1fr);
73
- gap: 6px;
74
- padding: 2px 0;
75
- }
71
+ .trace-chain-row {
72
+ display: grid;
73
+ grid-template-columns: 34px minmax(0, 1fr);
74
+ gap: 6px;
75
+ padding: 2px 0;
76
+ }
76
77
 
77
- .trace-chain-row[data-row-type="output"] {
78
- margin-top: 2px;
79
- padding-top: 8px;
80
- border-top: 1px dashed color-mix(in srgb, var(--gray-6) 78%, transparent);
81
- }
78
+ .trace-chain-row[data-row-type="output"] {
79
+ margin-top: 2px;
80
+ padding-top: 8px;
81
+ border-top: 1px dashed color-mix(in srgb, var(--gray-6) 78%, transparent);
82
+ }
82
83
 
83
- .trace-chain-label {
84
- min-width: 30px;
85
- font-size: 12px;
86
- color: var(--gray-10);
87
- user-select: none;
88
- margin-top: 1px;
89
- }
84
+ .trace-chain-label {
85
+ min-width: 30px;
86
+ font-size: 12px;
87
+ color: var(--gray-10);
88
+ user-select: none;
89
+ margin-top: 1px;
90
+ }
90
91
 
91
- .trace-chain-detail {
92
- min-width: 0;
93
- }
92
+ .trace-chain-detail {
93
+ min-width: 0;
94
+ }
94
95
 
95
- .trace-chain-output-head {
96
- }
96
+ .trace-chain-output-head {
97
+ }
97
98
 
98
- .trace-chain-file {
99
- font-size: 13px;
100
- font-weight: 600;
101
- color: var(--gray-12);
102
- white-space: normal;
103
- overflow-wrap: anywhere;
104
- word-break: break-all;
105
- user-select: text;
106
- cursor: text;
107
- }
99
+ .trace-chain-file {
100
+ font-size: 13px;
101
+ font-weight: 600;
102
+ color: var(--gray-12);
103
+ white-space: normal;
104
+ overflow-wrap: anywhere;
105
+ word-break: break-all;
106
+ user-select: text;
107
+ cursor: text;
108
+ }
108
109
 
109
- .trace-chain-position {
110
- font-size: 12px;
111
- color: var(--gray-11);
112
- white-space: normal;
113
- overflow-wrap: anywhere;
114
- user-select: text;
115
- cursor: text;
116
- }
110
+ .trace-chain-position {
111
+ font-size: 12px;
112
+ color: var(--gray-11);
113
+ white-space: normal;
114
+ overflow-wrap: anywhere;
115
+ user-select: text;
116
+ cursor: text;
117
+ }
117
118
 
118
- .trace-chain-error {
119
- font-size: 12px;
120
- color: #ff7b7b;
121
- }
119
+ .trace-chain-error {
120
+ font-size: 12px;
121
+ color: #ff7b7b;
122
+ }
122
123
 
123
- .trace-chain-pending {
124
- font-size: 12px;
125
- color: var(--gray-10);
126
- }
124
+ .trace-chain-pending {
125
+ font-size: 12px;
126
+ color: var(--gray-10);
127
+ }
127
128
 
129
+ }
128
130
  }