@hep-code-runner/react 3.2.3 → 3.3.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 (5) hide show
  1. package/README.md +73 -121
  2. package/dist/index.d.ts +3 -2
  3. package/dist/index.js +13 -81
  4. package/dist/index.mjs +499 -574
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,163 +1,103 @@
1
1
  # @hep-code-runner/react
2
2
 
3
- React 代码运行器组件，支持多种编程语言在线执行。
4
-
5
- ## 功能特性
6
-
7
- - 支持多种编程语言（JavaScript、Python、Go、Java、C、Rust 等）
8
- - 多版本语言支持（如 Python 2、Python 3）
9
- - 代码语法高亮（PrismJS）
10
- - 亮色/暗色主题切换
11
- - 可拖拽调整编辑器宽度
12
- - 支持自定义 Piston API 地址
13
- - 完整的事件回调
3
+ React 代码运行器组件，基于 Piston API 支持多种编程语言在线执行。
14
4
 
15
5
  ## 安装
16
6
 
17
7
  ```bash
18
8
  npm install @hep-code-runner/react
19
- # 或
20
- pnpm add @hep-code-runner/react
21
9
  ```
22
10
 
23
- ## 基础用法
11
+ ## 引入
24
12
 
25
13
  ```jsx
26
14
  import { CodeRunner } from "@hep-code-runner/react";
27
-
28
- function App() {
29
- return <CodeRunner />;
30
- }
31
- ```
32
-
33
- ## Props 属性
34
-
35
- | 属性 | 类型 | 默认值 | 说明 |
36
- | -------------------- | ------------------------ | ------------- | ------------------- |
37
- | pistonUrl | string | '/api/piston' | Piston API 地址 |
38
- | language | string | 'javascript' | 默认语言 |
39
- | theme | 'light' \| 'dark' | 'light' | 主题 |
40
- | themeColor | string | - | 自定义主题色 |
41
- | showLanguageSelector | boolean | true | 显示语言选择器 |
42
- | showEditor | boolean | true | 显示代码编辑器 |
43
- | editable | boolean | true | 是否可编辑 |
44
- | defaultCode | string | '' | 默认代码 |
45
- | executorLabel | string | '运行' | 运行按钮文字 |
46
- | onExecuteStart | () => void | - | 代码开始执行回调 |
47
- | onExecuteEnd | (result) => void | - | 代码执行完成回调 |
48
- | onLanguageChange | (language, code) => void | - | 语言切换回调 |
49
- | onChange | (code: string) => void | - | 代码变化回调（防抖）|
50
-
51
- ## 主题切换
52
-
53
- ```jsx
54
- <CodeRunner theme="dark" />
55
15
  ```
56
16
 
57
- 点击组件右上角的月亮/太阳按钮可切换主题。
17
+ ---
58
18
 
59
- ## 自定义主题色
19
+ ## CodeRunner
60
20
 
61
- 支持通过 `themeColor` 属性自定义主题色，组件会自动根据颜色亮度调整文字颜色，确保可读性。
21
+ ### 用法
62
22
 
63
23
  ```jsx
64
- // 浅色主题
65
- <CodeRunner themeColor="#4fc3f7" theme="light" />
66
-
67
- // 深色主题
68
- <CodeRunner themeColor="#9c27b0" theme="dark" />
69
-
70
- // 动态切换主题色
71
- <CodeRunner themeColor={currentColor} />
72
- ```
73
-
74
- ## 自定义 Piston API
24
+ import { CodeRunner } from "@hep-code-runner/react";
75
25
 
76
- ```jsx
77
- <CodeRunner pistonUrl="https://your-piston-api.com/api" />
26
+ function App() {
27
+ return <CodeRunner />;
28
+ }
78
29
  ```
79
30
 
80
- ## 示例
81
-
82
- ### 默认配置
31
+ ### Props
83
32
 
84
- ```jsx
85
- <CodeRunner />
86
- ```
33
+ | 属性 | 类型 | 默认值 | 说明 |
34
+ |------|------|--------|------|
35
+ | pistonUrl | string | '/api/piston' | Piston API 地址 |
36
+ | language | string | 'javascript' | 当前语言 |
37
+ | code | string | '' | 当前代码 |
38
+ | theme | 'light' \| 'dark' | 'light' | 主题 |
39
+ | themeColor | string | - | 自定义主题色 |
40
+ | showLanguageSelector | boolean | true | 显示语言选择器 |
41
+ | showEditor | boolean | true | 显示代码编辑器 |
42
+ | editable | boolean | true | 是否可编辑 |
43
+ | executorLabel | string | '运行' | 运行按钮文字 |
87
44
 
88
- ### 深色主题
45
+ ### 受控模式
89
46
 
90
47
  ```jsx
91
- <CodeRunner theme="dark" language="python" />
92
- ```
93
-
94
- ### 监听事件
48
+ import { useState } from "react";
49
+ import { CodeRunner } from "@hep-code-runner/react";
95
50
 
96
- ```jsx
97
51
  function App() {
98
- const [eventLog, setEventLog] = useState([]);
99
-
100
- const handleStart = () => {
101
- console.log("开始执行");
102
- };
103
-
104
- const handleEnd = (result) => {
105
- console.log("执行完成", result);
106
- };
107
-
108
- const handleLanguageChange = (language, code) => {
109
- console.log("语言切换", language);
110
- };
52
+ const [language, setLanguage] = useState("javascript");
53
+ const [code, setCode] = useState('console.log("hello")');
111
54
 
112
55
  return (
113
56
  <CodeRunner
114
- onExecuteStart={handleStart}
115
- onExecuteEnd={handleEnd}
116
- onLanguageChange={handleLanguageChange}
57
+ language={language}
58
+ code={code}
59
+ onLanguageUpdate={setLanguage}
60
+ onCodeUpdate={setCode}
117
61
  />
118
62
  );
119
63
  }
120
64
  ```
121
65
 
122
- ## 依赖
66
+ ### 回调函数
123
67
 
124
- - react: ^16.8.0 || ^17.0.0 || ^18.0.0
125
- - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
126
- - prismjs: ^1.30.0
68
+ | 属性 | 类型 | 说明 |
69
+ |------|------|------|
70
+ | onLanguageUpdate | (language: string) => void | 语言变化 |
71
+ | onCodeUpdate | (code: string) => void | 代码变化 |
72
+ | onExecuteStart | () => void | 代码开始执行 |
73
+ | onExecuteEnd | (result) => void | 代码执行完成 |
74
+ | onLanguageChange | (language, code) => void | 语言切换 |
75
+ | onChange | (code: string) => void | 代码变化（防抖） |
127
76
 
128
- ## CodeRunnerDialog 弹窗组件
77
+ ---
129
78
 
130
- 提供弹窗模式的代码执行器，支持受控和非受控模式。
79
+ ## CodeRunnerDialog
131
80
 
132
- ### 引入
81
+ ### 用法
133
82
 
134
83
  ```jsx
135
- import { CodeRunnerDialog } from "@hep-code-runner/react";
136
- ```
137
-
138
- ### 受控模式
139
-
140
- ```jsx
141
- import { useState } from "react";
84
+ import { useRef } from "react";
142
85
  import { CodeRunnerDialog } from "@hep-code-runner/react";
143
86
 
144
87
  function App() {
145
- const [visible, setVisible] = useState(false);
88
+ const dialogRef = useRef(null);
146
89
 
147
90
  return (
148
91
  <>
149
- <button onClick={() => setVisible(true)}>打开弹窗</button>
92
+ <button onClick={() => dialogRef.current?.open()}>打开</button>
150
93
 
151
94
  <CodeRunnerDialog
152
- open={visible}
153
- onClose={() => setVisible(false)}
95
+ ref={dialogRef}
154
96
  title="代码执行器"
155
- width={800}
156
97
  footer={
157
98
  <>
158
- <button onClick={() => setVisible(false)}>取消</button>
99
+ <button onClick={() => dialogRef.current?.close()}>取消</button>
159
100
  <button onClick={handleSave}>保存</button>
160
- <button onClick={handleInsert}>插入代码</button>
161
101
  </>
162
102
  }
163
103
  />
@@ -166,26 +106,28 @@ function App() {
166
106
  }
167
107
  ```
168
108
 
169
- ### 非受控模式
109
+ ### 受控模式
170
110
 
171
111
  ```jsx
172
- import { useRef } from "react";
112
+ import { useState } from "react";
173
113
  import { CodeRunnerDialog } from "@hep-code-runner/react";
174
114
 
175
115
  function App() {
176
- const dialogRef = useRef(null);
116
+ const [visible, setVisible] = useState(false);
177
117
 
178
118
  return (
179
119
  <>
180
- <button onClick={() => dialogRef.current?.open()}>打开弹窗</button>
120
+ <button onClick={() => setVisible(true)}>打开</button>
181
121
 
182
122
  <CodeRunnerDialog
183
- ref={dialogRef}
123
+ open={visible}
124
+ onClose={() => setVisible(false)}
184
125
  title="代码执行器"
126
+ width={800}
185
127
  footer={
186
128
  <>
187
- <button onClick={() => dialogRef.current?.close()}>取消</button>
188
- <button onClick={handleInsert}>插入代码</button>
129
+ <button onClick={() => setVisible(false)}>取消</button>
130
+ <button onClick={handleSave}>保存</button>
189
131
  </>
190
132
  }
191
133
  />
@@ -194,23 +136,33 @@ function App() {
194
136
  }
195
137
  ```
196
138
 
197
- ### Props 属性
139
+ ### Props
198
140
 
199
141
  | 属性 | 类型 | 默认值 | 说明 |
200
142
  |------|------|--------|------|
201
- | open | boolean | - | 控制显示隐藏（受控模式） |
202
- | defaultOpen | boolean | false | 初始显示状态（非受控模式） |
143
+ | open | boolean | - | 控制显隐（受控模式） |
144
+ | defaultOpen | boolean | false | 初始状态（非受控模式） |
203
145
  | title | string | '代码执行器' | 弹窗标题 |
204
146
  | width | string \| number | 800 | 弹窗宽度 |
205
147
  | onClose | () => void | - | 关闭回调 |
206
148
  | footer | ReactNode | - | 底部自定义内容 |
149
+ | pistonUrl | string | '/api/piston' | Piston API 地址 |
150
+ | language | string | 'javascript' | 当前语言 |
151
+ | code | string | '' | 当前代码 |
207
152
  | theme | 'light' \| 'dark' | 'light' | 主题 |
153
+ | themeColor | string | - | 自定义主题色 |
154
+ | showLanguageSelector | boolean | true | 显示语言选择器 |
155
+ | showEditor | boolean | true | 显示代码编辑器 |
156
+ | editable | boolean | true | 是否可编辑 |
157
+ | executorLabel | string | '运行' | 运行按钮文字 |
208
158
 
209
- 其他 Props 会透传给内部 CodeRunner 组件。
210
-
211
- ### Ref 方法
159
+ ### Ref Methods
212
160
 
213
161
  | 方法 | 说明 |
214
162
  |------|------|
215
- | open() | 打开弹窗 |
216
163
  | close() | 关闭弹窗 |
164
+
165
+ ## 依赖
166
+
167
+ - react: ^16.8.0
168
+ - prismjs: ^1.30.0
package/dist/index.d.ts CHANGED
@@ -25,17 +25,18 @@ export declare interface CodeRunnerDialogRef {
25
25
  export declare interface CodeRunnerProps {
26
26
  pistonUrl?: string;
27
27
  language?: string;
28
- defaultLanguage?: string;
28
+ code?: string;
29
29
  theme?: "light" | "dark";
30
30
  themeColor?: string;
31
31
  showLanguageSelector?: boolean;
32
32
  showEditor?: boolean;
33
33
  editable?: boolean;
34
- defaultCode?: string;
35
34
  executorLabel?: string;
36
35
  onExecuteStart?: () => void;
37
36
  onExecuteEnd?: (result: ExecuteResult) => void;
38
37
  onLanguageChange?: (language: string, code: string) => void;
38
+ onLanguageUpdate?: (language: string) => void;
39
+ onCodeUpdate?: (code: string) => void;
39
40
  onChange?: (code: string) => void;
40
41
  }
41
42