@hep-code-runner/react 3.3.0 → 3.3.3

package/README.md

@@ -1,188 +1,103 @@
 # @hep-code-runner/react
 
-React 代码运行器组件，支持多种编程语言在线执行。
-
-## 功能特性
-
-- 支持多种编程语言（JavaScript、Python、Go、Java、C、Rust 等）
-- 多版本语言支持（如 Python 2、Python 3）
-- 代码语法高亮（PrismJS）
-- 亮色/暗色主题切换
-- 可拖拽调整编辑器宽度
-- 支持自定义 Piston API 地址
-- 完整的事件回调
+React 代码运行器组件，基于 Piston API 支持多种编程语言在线执行。
 
 ## 安装
 
 ```bash
 npm install @hep-code-runner/react
-# 或
-pnpm add @hep-code-runner/react
 ```
 
-## 基础用法
+## 引入
 
 ```jsx
 import { CodeRunner } from "@hep-code-runner/react";
-
-function App() {
-  return <CodeRunner />;
-}
-```
-
-## Props 属性
-
-| 属性                 | 类型                     | 默认值        | 说明                |
-| -------------------- | ------------------------ | ------------- | ------------------- |
-| pistonUrl            | string                   | '/api/piston' | Piston API 地址     |
-| language             | string                   | 'javascript'  | 当前语言（受控）    |
-| code                 | string                   | ''            | 当前代码（受控）    |
-| theme                | 'light' \| 'dark'        | 'light'       | 主题                |
-| themeColor           | string                   | -             | 自定义主题色       |
-| showLanguageSelector | boolean                  | true          | 显示语言选择器      |
-| showEditor           | boolean                  | true          | 显示代码编辑器      |
-| editable             | boolean                  | true          | 是否可编辑          |
-| executorLabel        | string                   | '运行'        | 运行按钮文字        |
-| onExecuteStart       | () => void               | -             | 代码开始执行回调   |
-| onExecuteEnd         | (result) => void         | -             | 代码执行完成回调   |
-| onLanguageChange     | (language, code) => void | -             | 语言切换回调        |
-| onLanguageUpdate     | (language: string) => void | -           | 语言更新回调        |
-| onCodeUpdate         | (code: string) => void   | -             | 代码更新回调        |
-| onChange             | (code: string) => void   | -             | 代码变化回调（实时）|
-
-## 主题切换
-
-```jsx
-<CodeRunner theme="dark" />
 ```
 
-点击组件右上角的月亮/太阳按钮可切换主题。
+---
 
-## 自定义主题色
+## CodeRunner
 
-支持通过 `themeColor` 属性自定义主题色，组件会自动根据颜色亮度调整文字颜色，确保可读性。
+### 用法
 
 ```jsx
-// 浅色主题
-<CodeRunner themeColor="#4fc3f7" theme="light" />
-
-// 深色主题
-<CodeRunner themeColor="#9c27b0" theme="dark" />
-
-// 动态切换主题色
-<CodeRunner themeColor={currentColor} />
-```
-
-## 自定义 Piston API
-
-```jsx
-<CodeRunner pistonUrl="https://your-piston-api.com/api" />
-```
-
-## 示例
-
-### 默认配置
+import { CodeRunner } from "@hep-code-runner/react";
 
-```jsx
-<CodeRunner />
+function App() {
+  return <CodeRunner />;
+}
 ```
 
-### 深色主题
+### Props
 
-```jsx
-<CodeRunner theme="dark" language="python" />
-```
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| pistonUrl | string | '/api/piston' | Piston API 地址 |
+| language | string | 'javascript' | 当前语言 |
+| code | string | '' | 当前代码 |
+| theme | 'light' \| 'dark' | 'light' | 主题 |
+| themeColor | string | - | 自定义主题色 |
+| showLanguageSelector | boolean | true | 显示语言选择器 |
+| showEditor | boolean | true | 显示代码编辑器 |
+| editable | boolean | true | 是否可编辑 |
+| executorLabel | string | '运行' | 运行按钮文字 |
 
 ### 受控模式
 
-组件完全受控，父组件通过 props + 回调控制 language 和 code：
-
 ```jsx
-import { useState } from 'react';
+import { useState } from "react";
 import { CodeRunner } from "@hep-code-runner/react";
 
 function App() {
-  const [currentLanguage, setCurrentLanguage] = useState('javascript');
-  const [currentCode, setCurrentCode] = useState('console.log("hello")');
-
-  return (
-    <CodeRunner
-      language={currentLanguage}
-      code={currentCode}
-      onLanguageUpdate={setCurrentLanguage}
-      onCodeUpdate={setCurrentCode}
-    />
-  );
-}
-```
-
-### 监听事件
-
-```jsx
-function App() {
-  const [eventLog, setEventLog] = useState([]);
-
-  const handleStart = () => {
-    console.log("开始执行");
-  };
-
-  const handleEnd = (result) => {
-    console.log("执行完成", result);
-  };
-
-  const handleLanguageChange = (language, code) => {
-    console.log("语言切换", language);
-  };
+  const [language, setLanguage] = useState("javascript");
+  const [code, setCode] = useState('console.log("hello")');
 
   return (
     <CodeRunner
-      onExecuteStart={handleStart}
-      onExecuteEnd={handleEnd}
-      onLanguageChange={handleLanguageChange}
+      language={language}
+      code={code}
+      onLanguageUpdate={setLanguage}
+      onCodeUpdate={setCode}
     />
   );
 }
 ```
 
-## 依赖
-
-- react: ^16.8.0 || ^17.0.0 || ^18.0.0
-- react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-- prismjs: ^1.30.0
+### 回调函数
 
-## CodeRunnerDialog 弹窗组件
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| onLanguageUpdate | (language: string) => void | 语言变化 |
+| onCodeUpdate | (code: string) => void | 代码变化 |
+| onExecuteStart | () => void | 代码开始执行 |
+| onExecuteEnd | (result) => void | 代码执行完成 |
+| onLanguageChange | (language, code) => void | 语言切换 |
+| onChange | (code: string) => void | 代码变化（防抖） |
 
-提供弹窗模式的代码执行器，支持受控和非受控模式。
+---
 
-### 引入
-
-```jsx
-import { CodeRunnerDialog } from "@hep-code-runner/react";
-```
+## CodeRunnerDialog
 
-### 受控模式
+### 用法
 
 ```jsx
-import { useState } from "react";
+import { useRef } from "react";
 import { CodeRunnerDialog } from "@hep-code-runner/react";
 
 function App() {
-  const [visible, setVisible] = useState(false);
+  const dialogRef = useRef(null);
 
   return (
     <>
-      <button onClick={() => setVisible(true)}>打开弹窗</button>
+      <button onClick={() => dialogRef.current?.open()}>打开</button>
 
       <CodeRunnerDialog
-        open={visible}
-        onClose={() => setVisible(false)}
+        ref={dialogRef}
         title="代码执行器"
-        width={800}
         footer={
           <>
-            <button onClick={() => setVisible(false)}>取消</button>
+            <button onClick={() => dialogRef.current?.close()}>取消</button>
             <button onClick={handleSave}>保存</button>
-            <button onClick={handleInsert}>插入代码</button>
           </>
         }
       />
@@ -191,26 +106,28 @@ function App() {
 }
 ```
 
-### 非受控模式
+### 受控模式
 
 ```jsx
-import { useRef } from "react";
+import { useState } from "react";
 import { CodeRunnerDialog } from "@hep-code-runner/react";
 
 function App() {
-  const dialogRef = useRef(null);
+  const [visible, setVisible] = useState(false);
 
   return (
     <>
-      <button onClick={() => dialogRef.current?.open()}>打开弹窗</button>
+      <button onClick={() => setVisible(true)}>打开</button>
 
       <CodeRunnerDialog
-        ref={dialogRef}
+        open={visible}
+        onClose={() => setVisible(false)}
         title="代码执行器"
+        width={800}
         footer={
           <>
-            <button onClick={() => dialogRef.current?.close()}>取消</button>
-            <button onClick={handleInsert}>插入代码</button>
+            <button onClick={() => setVisible(false)}>取消</button>
+            <button onClick={handleSave}>保存</button>
           </>
         }
       />
@@ -219,23 +136,33 @@ function App() {
 }
 ```
 
-### Props 属性
+### Props
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| open | boolean | - | 控制显示隐藏（受控模式） |
-| defaultOpen | boolean | false | 初始显示状态（非受控模式） |
+| open | boolean | - | 控制显隐（受控模式） |
+| defaultOpen | boolean | false | 初始状态（非受控模式） |
 | title | string | '代码执行器' | 弹窗标题 |
 | width | string \| number | 800 | 弹窗宽度 |
 | onClose | () => void | - | 关闭回调 |
 | footer | ReactNode | - | 底部自定义内容 |
+| pistonUrl | string | '/api/piston' | Piston API 地址 |
+| language | string | 'javascript' | 当前语言 |
+| code | string | '' | 当前代码 |
 | theme | 'light' \| 'dark' | 'light' | 主题 |
+| themeColor | string | - | 自定义主题色 |
+| showLanguageSelector | boolean | true | 显示语言选择器 |
+| showEditor | boolean | true | 显示代码编辑器 |
+| editable | boolean | true | 是否可编辑 |
+| executorLabel | string | '运行' | 运行按钮文字 |
 
-其他 Props 会透传给内部 CodeRunner 组件。
-
-### Ref 方法
+### Ref Methods
 
 | 方法 | 说明 |
 |------|------|
-| open() | 打开弹窗 |
 | close() | 关闭弹窗 |
+
+## 依赖
+
+- react: ^16.8.0
+- prismjs: ^1.30.0