Skip to content

Replace monaco-editor#1971

Merged
texodus merged 2 commits intomasterfrom
monaco-more-like-monano
Sep 25, 2022
Merged

Replace monaco-editor#1971
texodus merged 2 commits intomasterfrom
monaco-more-like-monano

Conversation

@texodus
Copy link
Member

@texodus texodus commented Sep 19, 2022

A new implementation of <perspective-viewer>'s Expression Editor component, which replaces monaco-editor. While monaco-editor has lots of enviable features, it also had some issues:

  • monaco-editor packages and imports it's own CSS, which causes issues when building with CSS-aware tools like webpack and required special consideration during installation, in general making the first-impression experience poor.
  • While lazy-loaded (not downloaded until the user clicked the New Column button), monaco-editor was 2.6mb, by far the largest component in the project, and parsed/loaded much slower than similarly-sized WASM assets as it is JavaScript. The non-lazy part still imparted a ~100k JS payload in the main bundle.
  • While the features we used were great, many features provided by monaco-editor are just not needed for the much smalled scope of an expression editor (e.g. "Rename Symbol" is probably not worth the code download and I doubt many users even knew it was there, hidden in the right-click or command-P menu).
  • It had an awkward API due to the Worker and language support, requiring importing some strangely structured modules and unclear-if-global options. The examples are complex and show a lot of diverse use cases, but the actual documentation beyond that is just the raw API docs themselves which are quite sparse. This all required a lot of gnarly Rust FFI code to integrate.

The new version has been implemented-from-scratch:

  • Weighs in at 35k in total (including the new Rust libraries added like nom). When accounting for the monaco-editor Rust FFI code removed, even the WASM asset is actually slightly smaller than in 1.6.7:

untitled (36)

  • Requires no special build accommodations at all.
  • Features:
    • Syntax Highlighting
    • Error indicator (though the UX has changed since the monaco-editor version as the message is now displayed in the status bar, rather than in a tooltip).
    • Autocomplete dropdown for functions (and added their descriptions inline).
    • Line numbers

There are still some missing features.. Given the developer-experience impact of this change, I think its worth merging even as-is, with an eye towards addressing these shortcomings in the next few releases:

  • No column name auto-complete
  • No ident-on-new-line
  • No paren-matching
  • Autocomplete doesn't handle keye vents correctly yet

Screen Shot 2022-09-24 at 3 12 52 PM

@texodus texodus force-pushed the monaco-more-like-monano branch 6 times, most recently from 93978c9 to 7c5bac6 Compare September 24, 2022 19:11
@texodus texodus added the enhancement Feature requests or improvements label Sep 24, 2022
@texodus texodus marked this pull request as ready for review September 24, 2022 19:43
@texodus texodus force-pushed the monaco-more-like-monano branch 3 times, most recently from f8087fa to ea0587d Compare September 25, 2022 19:21
@texodus texodus force-pushed the monaco-more-like-monano branch from ea0587d to e433682 Compare September 25, 2022 23:37
@texodus texodus merged commit d3933f2 into master Sep 25, 2022
@texodus texodus deleted the monaco-more-like-monano branch September 25, 2022 23:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Feature requests or improvements

Development

Successfully merging this pull request may close these issues.

1 participant