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

@theia/monaco

v1.49.1

Published

Theia - Monaco Extension

Downloads

19,520

Readme

Description

The @theia/monaco extension contributes the integration of the monaco-editor.
This includes:

  • full-feature code editor
  • diff-editor
  • code snippets
  • textmate grammars (theme registry, service)

Monaco Uplifts

This package is intended to be the interface between the @theia/monaco-editor-core package, the project's bundling of the monaco-editor-core package published by the VSCode team, and the rest of the application. When we uplift to a new version of monaco-editor-core, this package will need to be checked particularly thoroughly. To facilitate that process, the steps for undertaking a Monaco uplift are outlined here.

Setting up the VSCode side

  1. Clone the VSCode repo and make sure you have the following remotes:
  • https://github.com/microsoft/vscode.git - the official VSCode repo.
  • https://github.com/theia-ide/vscode.git - Theia's fork.
  1. Find the latest release tag in the official VSCode repo, and the most recent uplift branch in the Theia fork.

At the time of this writing the latest release tag is 1.67.2, and the uplift branch is monaco-uplift-2022-6

  1. Check out the release tag, cherry pick the tip of the uplift branch, and resolve any conflicts.

As you resolve conflicts and make changes to the VSCode repo, make sure you end up with a single commit on the uplift branch to make it easier for the next person to rebase.

  1. Try to build. At the moment, this means running yarn and yarn run gulp editor-distro.
  2. Fix any build errors that arise.
  3. Change the version in build/monaco/package.json

Current State

  • build/gulpfile.editor.js: various changes to modify the treeshaking and output destinations.
  • build/lib/standalone.js/ts: changes to output sourcemaps etc. One small change to fix a build error due to having a directory named model and a file named model.ts in the same folder.
  • src/vs/base/browser/dompurify/dompurify.js changes for CommonJS rather than ESM
  • src/vs/base/common/marked/marked.js changes for CommonJS rather than ESM

Setting up the Theia side

For initial testing, it's easier to point dependencies to your local VSCode.

  1. Having built monaco-editor-core using the steps above.
  2. Find all references to @theia/monaco-editor-core in package.jsons and replace their version with "link:<path to your local build of monaco-editor-core>".

Using link: means that if you subsequently make changes on the VSCode side, you only need to rebuild VSCode and then rebuild Theia to see the effects.

  1. Delete your node_modules and yarn and build Theia.
  2. Fix any build errors.
  3. Uncomment the bindMonacoPreferenceExtractor function in examples/api-samples/src/browser/monaco-editor-preferences/monaco-editor-preference-extractor.ts and run the commands there. Fix the EditorGeneratedPreferenceSchema as necessary, and add or remove validations from the MonacoFrontendApplicationContribution as appropriate.
  4. Look for comments that indicate forced types or other code smells that would prevent a build error from being thrown where it should be thrown and check that the assertion still applies.

If you add these, mark them with @monaco-uplift - that'll make them easier to find in the future. Better: if you can remove them, do! Typically, the cause is mixing imports from private API and public API. Often public API fails to satisfy private declarations.

  1. Test the application thoroughly - make sure everything's still working.

It may also be necessary to update our various vscode dependencies to match the current state of VSCode. It may not be necessary to upgrade all (or any) of these to successfully adopt a new Monaco version, but if something is misbehaving inexplicably, checking dependencies is a reasonable place to start. Check on:

  • vscode-debugprotocol
  • vscode-languageserver-protocol
  • vscode-oniguruma
  • vscode-proxy-agent
  • vscode-ripgrep
  • vscode-textmate
  • vscode-uri

Publishing for testing

Once you believe that everything is in working order, you'll need to publish the new @theia/monaco-editor-core for testing. The instructions for doing so are here. Once the package is published, point your package.jsons at the testing version and make sure everything still works, then make a PR.

Additional Information

License

Trademark

"Theia" is a trademark of the Eclipse Foundation https://www.eclipse.org/theia

Theia - Monaco Extension

See here for a detailed documentation.

License