diff --git a/vweb/esbuild.js b/vweb/esbuild.js index 2c8e2d0..2f408e8 100644 --- a/vweb/esbuild.js +++ b/vweb/esbuild.js @@ -1,6 +1,7 @@ require('esbuild').build({ entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'], bundle: true, + minify: true, outdir: 'build', format: 'esm', loader: { diff --git a/vweb/src/snippet_emulator.css b/vweb/src/snippet_emulator.css index 8cd43cc..a04bafb 100644 --- a/vweb/src/snippet_emulator.css +++ b/vweb/src/snippet_emulator.css @@ -1,13 +1,24 @@ body { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: 1fr 50% 1fr; grid-template-rows: 2em auto; background: #777777; } -.react-root { + +.main { grid-area: 2 / 2 / 3 / 3; } +.main .snippet { + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr auto 1fr; +} + +.snippet .snippetEmulator { + grid-area: 1 / 2 / 2 / 3; +} + .snippetEmulator { display: grid; grid-template-rows: 10em 1em 1em 2em; diff --git a/vweb/src/snippet_emulator_demo.html b/vweb/src/snippet_emulator_demo.html index 01cb815..06c9ccc 100644 --- a/vweb/src/snippet_emulator_demo.html +++ b/vweb/src/snippet_emulator_demo.html @@ -8,6 +8,40 @@ -
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu diam orci. Aliquam quis pharetra erat. + Nullam nec erat vehicula, consectetur est in, iaculis nisl. Vestibulum nec dignissim purus, nec pharetra neque. + Quisque tristique diam et purus sagittis, posuere pharetra orci egestas. Praesent imperdiet sapien vel fermentum + pulvinar. Nulla ac tortor laoreet, fringilla tellus nec, ullamcorper mi. +

+
+ 
+        .org 0x400
+        push 0
+        blah: add 1
+        jmp $-1
+        hlt
+
+
+

+ Nulla ullamcorper dui lacus. Vivamus sagittis elit non tellus sodales, tempus bibendum magna dapibus. Aliquam + erat volutpat. Aliquam erat volutpat. Proin finibus nibh quis neque accumsan, porttitor convallis leo elementum. + Mauris semper mi nulla, in cursus felis faucibus non. Vestibulum suscipit, ante eget porta vulputate, lacus ex + sodales quam, faucibus tincidunt augue dui ac velit. Etiam ultricies ligula eu est accumsan, eget lobortis massa + fermentum. Quisque mattis bibendum tortor quis porttitor. In lobortis diam a diam tincidunt, eu viverra odio + volutpat. Suspendisse sed elit mattis, pretium nunc et, ullamcorper mauris. Vivamus mattis tellus at magna + congue laoreet. Pellentesque varius porttitor sem, in consectetur libero auctor nec. +

+
+ 
+        .org 0x400
+        push 4
+        add 3
+        mul 2
+        hlt
+
+
+
\ No newline at end of file diff --git a/vweb/src/snippet_emulator_demo.jsx b/vweb/src/snippet_emulator_demo.jsx index daa4f89..f35b922 100644 --- a/vweb/src/snippet_emulator_demo.jsx +++ b/vweb/src/snippet_emulator_demo.jsx @@ -1,17 +1,12 @@ import { createRoot } from 'react-dom/client' -import React from "react"; -import SnippetEmulator from "./snippet_emulator"; +import React from 'react' +import SnippetEmulator from './snippet_emulator' import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js' -init().then(async () => { - createRoot(document.getElementsByClassName('react-root')[0]) - .render( - - {`.org 0x400 - push 2 - add 3 - mul 4 - hlt`} - - ) +document.addEventListener('DOMContentLoaded', () => { + init().then(() => { + document.querySelectorAll('.snippet').forEach((el) => { + createRoot(el).render(React.createElement(SnippetEmulator, { children: el.innerText })) + }) + }) }) \ No newline at end of file