npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ligolang/monaco-editor

v0.18.1

Published

A browser based code editor

Downloads

5

Readme

Monaco Editor

Build Status

The Monaco Editor is the code editor which powers VS Code, with the features better described here.

Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module.

image

Try it out

Try the editor out on our website.

Installing

$ npm install monaco-editor

You will get:

  • inside esm: ESM version of the editor (compatible with e.g. webpack)
  • inside dev: AMD bundled, not minified
  • inside min: AMD bundled, and minified
  • inside min-maps: source maps for min
  • monaco.d.ts: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).

It is recommended to develop against the dev version, and in production to use the min version.

Documentation

Issues

Create issues in this repository for anything related to the Monaco Editor. Always mention the version of the editor when creating issues and the browser you're having trouble in. Please search for existing issues to avoid duplicates.

Known issues

In IE 11, the editor must be surrounded in the body element, otherwise the hit testing performed for mouse operations does not work. You can inspect this using F12 and click on the body element and confirm that visually it surrounds the editor.

FAQ

What is the relationship between VS Code and the Monaco Editor?

The Monaco Editor is generated straight from VS Code's sources with some shims around services the code needs to make it run in a web browser outside of its home.

What is the relationship between VS Code's version and the Monaco Editor's version?

None. The Monaco Editor is a library and it reflects directly the source code.

I've written an extension for VS Code, will it work on the Monaco Editor in a browser?

No.

Note: If the extension is fully based on the LSP and if the language server is authored in JavaScript, then it would be possible.

Why all these web workers and why should I care?

Language services create web workers to compute heavy stuff outside of the UI thread. They cost hardly anything in terms of resource overhead and you shouldn't worry too much about them, as long as you get them to work (see above the cross-domain case).

What is this loader.js? Can I use require.js?

It is an AMD loader that we use in VS Code. Yes.

I see the warning "Could not create web worker". What should I do?

HTML5 does not allow pages loaded on file:// to create web workers. Please load the editor with a web server on http:// or https:// schemes. Please also see the cross-domain case above.

Is the editor supported in mobile browsers or mobile web app frameworks?

No.

Why doesn't the editor support TextMate grammars?

  • All the regular expressions in TM grammars are based on oniguruma, a regular expression library written in C.
  • The only way to interpret the grammars and get anywhere near original fidelity is to use the exact same regular expression library (with its custom syntax constructs).
  • In VSCode, our runtime is node.js and we can use a node native module that exposes the library to JavaScript.
  • In Monaco, we are constrained to a browser environment where we cannot do anything similar.
  • We have experimented with Emscripten to compile the C library to asm.js, but performance was very poor even in Firefox (10x slower) and extremely poor in Chrome (100x slower).
  • We can revisit this once WebAssembly gets traction in the major browsers, but we will still need to consider the browser matrix we support, i.e. if we support IE11 and only Edge will add WebAssembly support, what will the experience be in IE11, etc.

Development setup

Please see CONTRIBUTING

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

License

Licensed under the MIT License.