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

@windmill-labs/monaco-editor-wrapper

v5.5.2

Published

Wrapper for monaco-vscode-editor-api and monaco-languageclient

Downloads

2

Readme

Monaco Editor and Monaco Languageclient Wrapper

This packages provides a wrapped monaco-editor with or without language support (main package export). The monaco-languageclient can be activated to connect to a language server either via jsonrpc over a websocket to an external server process or via language server protocol for browser where the language server runs in a web worker.

CHANGELOG

All changes are noted in the CHANGELOG.

Getting Started

This is npm package is part of the monaco-languageclient mono repo. Please follow the main repositories instructions to get started with local development.

Configuration

With release >2.0.0, the configuration approach is completely revised.

The UserConfig now contains everything and is passed to the start function of the wrapper along with the HTML element monaco-editor is bound to.

@codingame/monaco-vscode-api implements the VSCode api and redirects calls to monaco-editor. It allows to add serivccs that are usually only available in VSCode and not with pure monaco-editor. UserConfig allows two possible configuration modes:

  • Classic: Configure monaco-editor as you would when using it directly, see
  • Extended: Configure monaco-editor like a VSCode extension, see

This is the list of services defined by @codingame/monaco-vscode-api. The following services are enabled by default in both editor modes:

  • layout
  • environment
  • extension
  • files
  • quickAccess
  • languages
  • model
  • configuration

Extended mode adds the following and thereby disables monarch grammars:

  • theme
  • textmate

If you want any further services than the ones initialized by default, you should use the extended mode as some service (like theme and textmate) are incompatible with the classic mode.

Monarch grammars and themes can only be used in classic mode and textmate grammars and themes can only be used in extended mode.

Usage

Monaco Editor with TypeScript language support in web worker and relying on classic mode:

import '@codingame/monaco-vscode-python-default-extension';
import { MonacoEditorLanguageClientWrapper, UserConfig } from 'monaco-editor-wrapper';

// no top-level await
const run = async () => {
  const wrapper = new MonacoEditorLanguageClientWrapper();
  const userConfig = {
    wrapperConfig: {
      editorAppConfig: {
        $type: 'extendend',
        codeResources: {
          main: {
            text: 'print("Hello, World!")',
            uri: '/workspace/hello.py'
          }
        }
      }
    }
  };

  const htmlElement = document.getElementById('monaco-editor-root');
  await wrapper.initAndStart(userConfig, htmlElement);
}

Examples

For a detailed list of examples please look at this section in the main repository.

License

MIT