react-repl-plus
Version:
React component for editing React components, it is similar to vue repl
76 lines (68 loc) • 2.16 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="importmap">
<!--IMPORT_MAP-->
</script>
</head>
<body>
<div id="root"></div>
<script type="module">
window.__export__ = (mod, key, get) => {
Object.defineProperty(mod, key, {
enumerable: true,
configurable: true,
get,
})
}
async function handle_message(e) {
const send_message = (payload) =>
parent.postMessage({ ...payload }, e.origin)
const send_reply = (payload) => send_message({ ...payload })
const send_ok = () => send_reply({ action: 'cmd_ok' })
let { action } = e.data
if (action === 'eval') {
try {
const { script: scripts } = e.data.args
for (const script of scripts) {
const scriptEl = document.createElement("script");
const done = new Promise((resolve) => {
window.__next__ = resolve
})
scriptEl.innerHTML = script + `\nwindow.__next__()`
scriptEl.type = "module";
document.body.appendChild(scriptEl);
await done
}
send_ok()
} catch (error) {
}
}
}
// 渲染编译完成之后的代码
window.addEventListener("message", handle_message);
// 预览代码在运行时错误捕获，抛出提示
window.onerror = function (msg, url, lineNo, columnNo, error) {
// ignore errors from import map polyfill - these are necessary for
// it to detect browser support
if (msg.includes('module specifier “vue”')) {
// firefox only error, ignore
return false
}
if (msg.includes("Module specifier, 'vue")) {
// Safari only
return false
}
try {
parent.postMessage({ action: 'error', value: error }, '*')
} catch (e) {
parent.postMessage({ action: 'error', value: msg }, '*')
}
}
</script>
</body>
</html>