Runtime Environment

[curran]

As a user editing JavaScript front-end code, I want to be able to see my running code update live as I edit code.

Levels / Phases:

• PoC: run VZCode to edit a Vite project that supports hot reloading
• Initial hack: load Vite Dev Server in an iframe and put it next to the code
• Actual solution: build a browser-based runtime environment that can skip the round trip to the file system for hot reloading
• Test that it works with interactive code widgets Interactive Code Widgets #74

[curran]

Related things:

• https://github.com/codesandbox/nodebox-runtime/tree/main
• Support running in a browser sass/dart-sass#25 (comment)
• esbuild online repl site evanw/esbuild#797
• VizHub v2 runtime environment https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/presenters/src/getComputedIndexHtml.js

[curran]

Whoah Vue playground is a thing

https://play.vuejs.org/#eNp9UsFu1DAQ/RVjDr10s0DRCoVQqUV7gAMgytEXJ57NpnU8lj1Zgqr9d8bOJt1KVZVLZt6bmfee/ChvvC8OA8hSVrEJnScRgQZ/rVzXewwkbiwEusVR7AL24qJYz400dqFctZ7meIILgt5bTZAqqmYqV0IousMeaN+5VtTaiL32HhyYIlOXtcyt1ssaeSnP7yWZZyeEqEx3EI3VMX5RUifmqsZRyQwyHCmga6+3IWB4w1Kn8gTWYb3wLJKYqmrNO5+ryNYi/bMgYoMeDHeK5Zp4TGMNWgyleLvZbD6nusZggBvv/Sgi2s6IAOYMWQVtuiGW4qMfc9trYzibUnx4d+rUunloAw7OrObtu0/pY/SYI3WToaRA0YmTziRPmZMss+yUI7F0t+va4j6i4yCzaiUb7H3HVn566tBFJcvJT8K0tfj3e+5RGOBy7jd7aB5e6N9Hjr7kn18BIoQDKLlgpEMLNMHbux8w8v8C9mgGy+xXwN/AKQ5J40S75VhY9hkvq/2WXy3n+CduRwIXZ1NJaGIeM19Jfk1fX7H+JPequMpznKc8/gcUqRGL

[curran]

Closing as I think it makes sense to delegate this part to Vite.

Working demo: vizhub-core/vite-export-template#4