@hep-code-runner/react 3.2.2 → 3.3.0

package/README.md

@@ -35,18 +35,20 @@ function App() {
 | 属性                 | 类型                     | 默认值        | 说明                |
 | -------------------- | ------------------------ | ------------- | ------------------- |
 | pistonUrl            | string                   | '/api/piston' | Piston API 地址     |
-| language             | string                   | 'javascript'  | 默认语言            |
+| language             | string                   | 'javascript'  | 当前语言（受控）    |
+| code                 | string                   | ''            | 当前代码（受控）    |
 | theme                | 'light' \| 'dark'        | 'light'       | 主题                |
 | themeColor           | string                   | -             | 自定义主题色       |
 | showLanguageSelector | boolean                  | true          | 显示语言选择器      |
 | showEditor           | boolean                  | true          | 显示代码编辑器      |
 | editable             | boolean                  | true          | 是否可编辑          |
-| defaultCode          | string                   | ''            | 默认代码            |
 | executorLabel        | string                   | '运行'        | 运行按钮文字        |
 | onExecuteStart       | () => void               | -             | 代码开始执行回调   |
 | onExecuteEnd         | (result) => void         | -             | 代码执行完成回调   |
 | onLanguageChange     | (language, code) => void | -             | 语言切换回调        |
-| onChange            | (code: string) => void   | -             | 代码变化回调（防抖）|
+| onLanguageUpdate     | (language: string) => void | -           | 语言更新回调        |
+| onCodeUpdate         | (code: string) => void   | -             | 代码更新回调        |
+| onChange             | (code: string) => void   | -             | 代码变化回调（实时）|
 
 ## 主题切换
 
@@ -91,6 +93,29 @@ function App() {
 <CodeRunner theme="dark" language="python" />
 ```
 
+### 受控模式
+
+组件完全受控，父组件通过 props + 回调控制 language 和 code：
+
+```jsx
+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

package/dist/index.d.ts

@@ -25,16 +25,18 @@ export declare interface CodeRunnerDialogRef {
 export declare interface CodeRunnerProps {
     pistonUrl?: string;
     language?: string;
+    code?: string;
     theme?: "light" | "dark";
     themeColor?: string;
     showLanguageSelector?: boolean;
     showEditor?: boolean;
     editable?: boolean;
-    defaultCode?: string;
     executorLabel?: string;
     onExecuteStart?: () => void;
     onExecuteEnd?: (result: ExecuteResult) => void;
     onLanguageChange?: (language: string, code: string) => void;
+    onLanguageUpdate?: (language: string) => void;
+    onCodeUpdate?: (code: string) => void;
     onChange?: (code: string) => void;
 }