121$: create minimal Monaco editor

[strager]

Monaco is a browser-based code editing widget. In my experience, Monaco performs better than <textarea>, so I think we should use Monaco instead of <textarea> in the web demo (#164).

The problem with Monaco is that its bundle is huge (several megabytes). I want a small download.

Task: Fork Monaco and strip it down to just the features we need:

• diagnostic squigglies
• undo/redo
• search
• auto-indent (maybe)
  See this config for a stripped down Monaco: 27$: Web demo is slow (Firefox macOS) #164 (comment)

Goal: Under 100 KiB minified uncompressed bundle size.

Constraint: I want to be able to update Monaco from upstream occasionally.

[Erik-Daniel]

I will do this job

[ahmafi]

Hi, I would like to work on this.

[ahmafi]

I looked into monaco-editor, monaco-editor-core and vscode source codes, and I think just stripping down features from vscode which is the base for monaco-editor-core is not reasonable. Because it will become obsolete, and maintaining that stripped version becomes a huge task.

A more reasonable way would be an upstream feature that creates different bundles based on needed features, which will have a much better maintenance and even smaller bundles because of optimizations that we can get.

I doubt that if the vscode team wants to add this feature, and I would like to suggest looking for something else instead of monaco if the size is too important. Maybe even creating something from scratch similar to monaco-editor that integrates with quick-lint-js would be a better approach.

Another point is that 100 KiB might be too optimistic based on what I have seen so far from the monaco-editor-core source code.

I would also like to mention that the monaco-editor playground uses the dev bundles by default, which are not minified. The minified version is about 8x smaller. You can change the bundles used with the gear button on the playground.

[strager]

I think just stripping down features from vscode which is the base for monaco-editor-core is not reasonable. Because it will become obsolete

Can you give more detail?

I was imagining that a stripped-down Monaco would mostly be a red diff (deleted lines), mostly deleting imports. Is it more complicated than that?

Maybe even creating something from scratch similar to monaco-editor that integrates with quick-lint-js would be a better approach.

How does this compare to maintaining a stripped-down monaco-editor?

[ahmafi]

Yes, it will be a red diff, I didn't calculate exactly how much of the code we can strip down, but roughly looking at the code I don't think we can go beyond 50% optimization in size, without things getting complicated more than a simple red diff. And because of that, I don't think it's a good choice.

I there was any chance that VS Code team could do this internally and do something like tree-shaking based on needed features, that would be dope.

I also think that the already minified versions of the Moncao are good enough a website that are used mostly by developers.

I'm not an expert on this btw, maybe it's a good idea that we also wait for someone else to look into this.

[strager]

I don't think we can go beyond 50% optimization in size, without things getting complicated more than a simple red diff.

Okay, this makes sense.

I also think that the already minified versions of the Moncao are good enough a website that are used mostly by developers.

I don't think so. Performance matters even for developers. Improving load times gives a positive perception of "quick"ness.

[ahmafi]

Have you seen CodeMirror? It seems a decent alternative to Monaco, and It's separating its features into extensions, so the bundle size doesn't go up. Exactly what I meant about Monaco, that they don't do this kind of stuff. It seems to have a decent bundle size.

[strager]

@ahmafi I took a second look at CodeMirror. I think you're right; this might be the option we choose instead of Monaco.