Improve look and feel of the demo page about luau HOT 22 CLOSED

Yeah the code editor definitely needs syntax highlighting and auto indentation. I'm not sure if Monaco is the best option or if there's a lighter weight alternative.

Wrt the output window we probably need to remove the timestamps, they make the output harder to copy; I'm not sure what else needs to change there though since it's presumably just text.

Tangential, but fun ideas for the future would be to integrate type checking and disassembly (like https://www.luac.nl/)

from luau.

I've been looking at CodeMirror as a lighter alternative to Monaco. I've tried it out and it works nicely:

The only thing that we would additionally need is a parser for luau so we can highlight (and potentially include autocompletion). I'm not sure if there are any more appealing options around.

Sidenote: It would probably be possible to add typechecking if we were to use CodeMirror and perhaps use another frame and package for disasm. I'll look into it a little bit.

from luau.

Maybe we can borrow code from https://codemirror.net/mode/lua/index.html ?

from luau.

Definitely: https://codemirror.net/mode/lua/lua.js.

from luau.

Nice! I was also wondering if it's possible to use the full remaining width of the page; I think right now the right side is taken by some higher level layout rules that expect a TOC (which is absent).

from luau.

I personally think that Monaco is the best option (at least for desktop) since it works out of the box with lua (with a few small changes for luau), has features like autocomplete, auto indentation and, auto closing brackets and quotes. A disadvantage of Monaco is that it doesn't work well on mobile (we could just switch back to what we have now or use something like CodeMirror). Monaco, I believe would also require less work on our side to implement.

from luau.

CodeMirror has the same features and is considerably lighter. I haven't been able to find any features that Monaco has which CodeMirror lacks. As for implementation difficulty, both require the same amount of work.

from luau.

There's now two PRs for this with CodeMirror and Monaco, so we will have to pick one to go forward with at least initially. To make this decision it would help if both were deployed via GitHub pages or any other alternative so that we can play with both and look at the features, performance, responsiveness and implementation.

from luau.

Perhaps we could add a new hidden page (maybe /demo2) which will run the alternative to what's running on demo?

from luau.

That would require merging both PRs; what I meant is that it should be easy for the origin repositories of both PRs to push the docs/ folder to GitHub pages (obviously not to luau-lang.org), so that there's a link that can be used to preview the resulting experience before merging.

from luau.

This is almost possible with raw.githack.com but not quite, as Monaco version breaks, presumably because it's structured to depend too much on the dependent .js file:

CodeMirror:
https://raw.githack.com/MathematicalDessert/luau/web-repl-improvements/docs/_includes/repl.html

Monaco:
https://raw.githack.com/MobiDev/luau/master/docs/_includes/repl.html

from luau.

I see. Seems like the CodeMirror one broke a little too for the exact reason you mentioned, reliance on a local js file.

The only solution I can think of is to host it using GitHub pages, which I've quickly done for mine: https://blog.pkamara.me/luau/demo.

from luau.

Thanks! This is perfect.

For CodeMirror solution, the soft-tab behavior seems to result in Backspace deleting spaces one by one. We might need to disable soft tab as it doesn't look like the "correct" behavior is implemented in CodeMirror based on https://discuss.codemirror.net/t/indentation-with-space-in-codemirror/1835/2

from luau.

I've published mine to github pages: https://mobidev.github.io/luau/demo

from luau.

After playing with this for a bit, pros & cons I found:

CodeMirror cons:

• No support for code search
• No support for quote or paren completion or match highlighting
• No highlighting of matching identifiers
• No code folding (although I don't think it's important)
• No autocomplete (although I don't think it's important atm as it's something we can add in the future)
• Soft tab doesn't work with backspace as mentioned above (will need to disable soft tab)

Monaco cons:

• No support for auto indentation (may be fixable?)
• Doesn't work as well as CodeMirror on mobile (but does work)
• Somewhat higher page load time (3.8s vs 3.4s, computed via webpagetest.org on 4G connection)
• Higher CPU consumption during load (60% vs 25%, computed via Safari locally on Apple M1)
• Higher memory consumption (160 MB with peak ~210 MB vs 110 MB for CodeMirror)
• Slightly longer typing latency
• Highlighting on a complex source file (bench/tests/chess.lua) is inconsistently displaced one or even two lines below the original source; I think the offset depends on the fold depth, presumably something's wrong with the layout w/folds.

Overall Monaco overhead is not as high as I feared it would be.

from luau.

@MobiusCraftFlip @MathematicalDessert any thoughts about the above? Would be cool to see if we can fix some of the problems in either solution and actually select the framework but right now both solutions come with issues so they can't be merged as is.

from luau.

Hey! Sorry, I've been caught up with University work.

I've taken a look at your cons list and it seems like Monaco is the more feature rich solution. CodeMirror would work to a satisfactory standard with a little more modification and would be all around lighter.

I'm not really sure which option is the best one to go for. Monaco has a UX advantage over CodeMirror, being used in VS Code (which many developers are familiar with). Using Monaco feels a little too heavy though. It's a demo and not a place to seriously run and edit your code. Unless of course, that's something to consider?

On the other hand, CodeMirror is lightweight and looks more well-placed on the demo page thanks to its simplicity (in my opinion).

If we can decide exactly what features are important to us we can probably narrow down the factors slowing down our decision-making. In the mean time, I'll fix the cons for CodeMirror sometime this week hopefully.

from luau.

@MathematicalDessert Thanks and no worries. I agree with you overall in that CodeMirror is more comfortable for a demo page due to a much smaller size. I took a brief look at the missing features and I actually think it might just be a matter of adding a few existing CodeMirror plugins. The biggest annoyance atm is the soft tab behavior but that hopefully is easy to fix.

And yeah I don't think we need to target full blown editing experience, but if we can get things to be nicer with not too much extra cost or time it would make sense to do so.

from luau.

@zeux I've fixed the soft-tab issue and made a few stylistic changes to the page. There are definitely other things we can add to make the editor feel more clean, but this seems to be sufficient.

I'm also thinking about the output box and how we can style it. Do you have any suggestions?

from luau.

My only gripe about the current output box is actually the timestamps since they make the output harder to copy. I feel like we could get by without extra styling for now.

from luau.

Alright, I've removed the timestamps and published my PR for review. If we're happy with CodeMirror and the output for the time being, that PR can close this issue.

from luau.

Fixed by #228

from luau.