本文旨在详细介绍如何在 pyscript 的 `py-repl` 环境中捕获用户输入的 python 代码。我们将探讨两种主要方法：利用 `py-repl` 元素的内部 `getpysrc()` 方法获取当前会话的完整代码，以及通过 pyscript 插件机制中的 `beforepyreplexec()` 和 `afterpyreplexec()` 方法跟踪每次代码执行。通过这些技术，开发者可以有效地保存、分析或提交用户在交互式环境中编写的代码。
在构建基于 PyScript 的交互式应用，特别是需要收集用户在 py-repl 环境中输入代码的场景时（例如在线编程作业提交系统），如何准确捕获这些代码是一个关键问题。本教程将深入讲解两种行之有效的方法，帮助您实现这一目标。
方法一：使用 py-repl.getPySrc() 获取当前会话代码
py-repl 元素提供了一个内部方法 getPySrc()，可以直接获取当前 REPL 会话中所有已输入的 Python 代码内容。尽管这是一个实现细节，但它在 PyScript 的多个版本中表现稳定，并且社区已提出将其作为官方 API 功能的需求。这种方法适用于需要一次性获取用户在会话结束时所有代码的场景。
工作原理
当 getPySrc() 方法被调用时，它会返回一个字符串，其中包含 py-repl 界面中所有单元格的当前代码内容。您可以从 PyScript 内部或其他 JavaScript 代码中调用此方法。
示例代码
以下示例展示了如何在 PyScript 应用中通过一个按钮点击事件获取 py-repl 的代码内容并显示出来：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyScript REPL 代码捕获示例</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.3.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.3.1/core.js"></script>
</head>
<body>
<h1>PyScript REPL 代码捕获</h1>
<p>请在下方的 REPL 中输入一些 Python 代码：</p>
<py-repl id="my-repl" output-mode="append"></py-repl>
<button id="capture-button">捕获 REPL 代码</button>
<pre id="captured-code-output"></pre>
<py-script>
from pyweb import pydom
def capture_repl_code(*args, **kwargs):
"""
从 py-repl 元素中获取当前代码内容并显示。
"""
repl_element = pydom["#my-repl"][0] # 获取 py-repl 元素
current_code = repl_element.getPySrc() # 调用 getPySrc() 方法
output_element = pydom["#captured-code-output"][0]
output_element.html = f"捕获到的代码：\n{current_code}"
print("代码已捕获并显示。")
# 将 Python 函数绑定到按钮的点击事件
pydom["#capture-button"].onclick(capture_repl_code)
print("PyScript 应用已加载，请在 REPL 中输入代码。")
</py-script>
</body>
</html>说明：
- 我们通过 pydom["#my-repl"][0] 获取到 ID 为 my-repl 的 py-repl 元素。
- 调用 repl_element.getPySrc() 即可获取到 REPL 中所有输入的代码。
- 然后将获取到的代码内容显示在 <pre id="captured-code-output"></pre> 标签中。
方法二：利用 PyScript 插件方法跟踪代码执行
对于需要更精细控制，例如记录每次用户执行的代码单元、构建完整的会话历史，或者在代码执行前后进行特定操作的场景，PyScript 提供的插件机制是更强大的选择。从 PyScript 的新版本（例如 Release Candidate 2 及后续版本）开始，引入了 beforePyReplExec() 和 afterPyReplExec() 两个新的插件方法。
工作原理
这些插件方法在 py-repl 中的 Python 代码执行之前和之后被调用。它们接收一个 src 参数，其中包含了即将执行或刚刚执行的代码。通过注册自定义插件，您可以在这些生命周期钩子中捕获 src 内容，从而实现对每个代码单元的独立跟踪。
示例代码
首先，创建一个 Python 文件作为您的 PyScript 插件，例如 repl_tracker_plugin.py：
# repl_tracker_plugin.py
from pyscript import plugin
from pyweb import pydom
class ReplCodeTracker:
"""
一个 PyScript 插件，用于跟踪 py-repl 中执行的每一行代码。
"""
def __init__(self):
self.executed_history = []
print("REPL 代码跟踪插件已初始化。")
@plugin.before_py_repl_exec
def before_exec(self, repl, src):
"""
在 py-repl 中的代码执行前调用。
"""
print(f"插件：即将执行的代码 -> \n{src}")
# 您可以在此处对即将执行的代码进行预处理或记录
# self.executed_history.append(f"BEFORE: {src}")
@plugin.after_py_repl_exec
def after_exec(self, repl, src, result):
"""
在 py-repl 中的代码执行后调用。
"""
self.executed_history.append(src) # 记录已执行的代码
print(f"插件：已执行的代码 -> \n{src}")
print(f"插件：执行结果 -> {result}")
# 可以在这里将 self.executed_history 的内容发送到服务器或显示在页面上
self._update_display()
def _update_display(self):
"""更新页面上显示的代码历史。"""
history_output = pydom["#execution-history"][0]
if history_output:
history_html = "<h3>执行历史:</h3><ul>"
for i, code_block in enumerate(self.executed_history):
history_html += f"<li><strong>单元 {i+1}:</strong><pre>{code_block}</pre></li>"
history_html += "</ul>"
history_output.html = history_html
# 注册插件实例
plugin.register(ReplCodeTracker())然后，在您的 HTML 文件中配置 PyScript 以加载此插件，并添加一个显示历史记录的区域：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyScript REPL 插件跟踪示例</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.3.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.3.1/core.js"></script>
<!-- 确保您的插件文件与 HTML 文件在同一目录下，或提供正确路径 -->
<py-config>
plugins = ["./repl_tracker_plugin.py"]
</py-config>
</head>
<body>
<h1>PyScript REPL 插件跟踪</h1>
<p>在下方的 REPL 中输入并执行 Python 代码，观察插件如何跟踪：</p>
<py-repl id="my-repl" output-mode="append"></py-repl>
<div id="execution-history">
<!-- 插件将在此处显示执行历史 -->
</div>
</body>
</html>说明：
- 在 <py-config> 中通过 plugins = ["./repl_tracker_plugin.py"] 注册您的插件。
- ReplCodeTracker 类中的 before_exec 和 after_exec 方法会自动被 PyScript 调用，并传入 src 参数。
- after_exec 方法将每次执行的代码块 src 添加到 self.executed_history 列表中，并通过 _update_display 方法实时更新页面上的执行历史。
适用场景与注意事项
-
getPySrc() 适用场景：
- 当您只需要在用户完成所有输入后，一次性获取整个 REPL 会话的最终代码内容时。
- 例如，学生完成作业后，点击“提交”按钮，捕获其所有编写的代码。
- 注意事项： 这是一个内部方法，虽然目前稳定，但未来 PyScript 版本可能会有 API 变更。建议关注 PyScript 官方仓库的相关 Issue，以获取官方 API 的进展。
-
插件方法 beforePyReplExec() / afterPyReplExec() 适用场景：
- 需要跟踪每个单独的代码单元的执行，例如记录每个命令、构建详细的会话日志或实现代码审计功能。
- 需要在代码执行前或执行后进行自定义逻辑处理，如验证代码、修改上下文或收集性能数据。
- 注意事项： 这些方法在较新版本的 PyScript 中可用，请确保您的 PyScript 版本支持插件机制。插件的引入增加了代码的模块化和可维护性。
总结
无论是通过 py-repl 元素的 getPySrc() 方法获取当前代码快照，还是利用 PyScript 插件机制的 beforePyReplExec() 和 afterPyReplExec() 方法进行精细的执行跟踪，PyScript 都提供了灵活的途径来管理和捕获用户在交互式环境中输入的 Python 代码。根据您的具体需求，选择最适合的方法，可以有效地增强您的 PyScript 应用的功能性，尤其是在教育和开发工具领域。
