Refactor to use a child text node instead of a prop
This commit is contained in:
+1
-1
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user