#15: Console integration #33
Conversation
Modifying the vue-repl based on vuejs/repl#333
ackzell
added
the
REPL
|
We have a console! Though it for some reason is printing twice on load. 
|
This enables elements to be rendered, for example.
|
Different kinds of logs supported. Dark and Light mode (reactive changes for modes are not great, gotta polish that) 
|
…horizontally/vertically within the preview
For some reason I had to rename LunaConsole.vue to luna-console.vue or vite would lose my luna-console.css and break the built component (not the build process, but the dist files got messed up and yv would not load it).
|
Included changes for #28 and modified the vue-repl package to allow for different layouts inside the preview itself. I figured an "extended" menu for the layout was a good idea. Not sure if it will stay this way. layout.controls.GH.mp4 |
ackzell
removed
the
REPL
…ator It was driving me mad.
Abstracting the layout menu into its own component
…yout even after building the package
| v-show="editorOptions?.showErrorText !== false || editorOptions?.autoSaveText !== false" | ||
| class="editor-floating" |
There was a problem hiding this comment.
little square would just hang in there because there wasn't any switches present, so removing if no options are provided during repl instantiation
There was a problem hiding this comment.
I think this rename from LunaConsole.vue into luna-console.vue was because Vite wasn't happy with using PascalCase for the dep once I built the css for it. Renaming was the easiest way to move forward.
| } | ||
| // maybe make this configurable, but don't do it by default | ||
| // watch(() => store.value.activeFile.code, clearLunaConsole) |
There was a problem hiding this comment.
Copilot added this part, where the console was cleared on every file change. I added the comment because that might be something we want later on.
| /** | ||
| * Lossless deserialization: | ||
| * - Recreates primitives as-is | ||
| * - Returns enriched objects for complex types (with __type metadata) | ||
| * - Keeps outerHTML, function source, accessor info, etc. | ||
| */ |
There was a problem hiding this comment.
Maybe we only needed to de-serialize the dom output. The rest of the logs were handled fine. But to keep consistency I left it like this.
There was a problem hiding this comment.
Brand new component that does not care about responsiveness. This only determines whether the container is in vertical or horizontal mode and provides resize draggers for either case.
ackzell
left a comment
ackzell
left a comment
There was a problem hiding this comment.
Added some comments to hopefully leave more traces of what happenede here.
Welp,
I started by modifying the vue-repl based on the changes from vuejs/repl#333