Refactor to use a child text node instead of a prop

This commit is contained in:
2023-01-26 22:50:24 -06:00
parent de3bac0084
commit b602ae703f
3 changed files with 23 additions and 7 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
require('esbuild').build({
entryPoints: ['src/app.js', 'src/snippet_emulator_demo.js'],
entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'],
bundle: true,
outdir: 'build',
format: 'esm',
+13 -5
View File
@@ -2,9 +2,13 @@ import './snippet_emulator.css'
import React, {useState, useCallback, useEffect} from 'react'
import { WasmCPU, assemble_snippet, source_map } from '../pkg/vweb.js'
export default function({ snippet }) {
export default function({ children }) {
if (React.Children.count(children) !== 1) {
throw 'Expects a single text node as a child'
}
const [editing, setEditing] = useState(false) // Whether we're editing the snippet or running it
const [src, setSrc] = useState(snippet) // The source code currently set
const [src, setSrc] = useState('') // The source code currently set
const [message, setMessage] = useState('') // A status / error message
const onChangeSrc = useCallback((e) => setSrc(e.target.value), []) // Callback for the textarea
const [binary, setBinary] = useState(null) // The assembled binary
@@ -18,15 +22,19 @@ export default function({ snippet }) {
setBinary(bin)
setSourceMap(sm)
setMessage(`Assembled ${bin.length} bytes`)
console.log(sm.Ok)
return true
} catch(e) {
setMessage(e.message)
}
}, [])
// On load, build the stuff
useEffect(() => { rebuild(snippet) }, [snippet])
// On load, clean the source and build the stuff
useEffect(() => {
const lines = React.Children.toArray(children)[0].split('\n')
const cleaned = lines.map(l => l.trim()).join('\n')
setSrc(cleaned)
rebuild(cleaned)
}, [rebuild, children])
if (editing) {
return (
@@ -5,5 +5,13 @@ import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js'
init().then(async () => {
createRoot(document.getElementsByClassName('react-root')[0])
.render(React.createElement(SnippetEmulator, {snippet: 'push 0'}))
.render(
<SnippetEmulator>
{`.org 0x400
push 2
add 3
mul 4
hlt`}
</SnippetEmulator>
)
})