Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@codingame/monaco-vscode-api
Advanced tools
NPM module that implements the VSCode api and redirects calls to Monaco editor.
The VSCode api is composed of:
npm install vscode@npm:@codingame/monaco-vscode-api
npm install -D @types/vscode
⚠️ And add in your package.json ⚠️:
{
"scripts": {
"postinstall": "monaco-treemending",
}
}
Monaco-editor is a library that is constructed using code from vscode and goes through an intense treeshaking process.
However, due to the inclusion of additional code from VSCode in this library that utilizes internal modules bundled in monaco, this treeshaking is a problem here.
To tree-mend (to untreeshake it) monaco-editor, this library provides a script that will apply a patch on the local installation of monaco-editor, restoring all the code that was treeshaken during the monaco-editor build process
This library uses a lot the new URL('asset.extension', import.meta.url)
syntax which is supported by vite
While it works great in build
mode (because rollup is used), there is some issues in `watch`` mode:
There are workarounds for both:
import.meta.url
by the original module path (you need the --experimental-import-meta-resolve note option):{
...
optimizeDeps: {
esbuildOptions: {
plugins: [{
name: 'import.meta.url',
setup ({ onLoad }) {
// Help vite that bundles/move files in dev mode without touching `import.meta.url` which breaks asset urls
onLoad({ filter: /.*\.js/, namespace: 'file' }, async args => {
const code = fs.readFileSync(args.path, 'utf8')
const assetImportMetaUrlRE = /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*(?:,\s*)?\)/g
let i = 0
let newCode = ''
for (let match = assetImportMetaUrlRE.exec(code); match != null; match = assetImportMetaUrlRE.exec(code)) {
newCode += code.slice(i, match.index)
const path = match[1].slice(1, -1)
const resolved = await import.meta.resolve!(path, url.pathToFileURL(args.path))
newCode += `new URL(${JSON.stringify(url.fileURLToPath(resolved))}, import.meta.url)`
i = assetImportMetaUrlRE.lastIndex
}
newCode += code.slice(i)
return { contents: newCode }
})
}
}]
}
}
}
Not allowed to load local resource:
errorsThe short version: set up and use a custom webpack config file and add this under module
:
parser: {
javascript: {
url: true,
},
},
See this issue or this StackOverflow answer for more details, and this discussion for more context.
Also, monaco-editor use standalone
versions or the vscode services, which are much simpler.
You may want to provide your custom implementations of them. To do so, you can use the initialize
method from vscode/services
.
Also, monaco-editor doesn't provide good type for them, so this library does it.
Example:
import { StandaloneServices, INotificationService, initialize } from 'vscode/services'
class MyCustomNotificationService implements INotificationService { ... }
await initialize({
get [INotificationService.toString()] () {
return new MyCustomNotificationService(...)
}
})
Additionally, 25 packages that include the vscode version of some services (with some glue to make it work with monaco) are published:
@codingame/monaco-vscode-extensions-service-override
@codingame/monaco-vscode-file-service-override
file://
files, but also adds the support for lazy loaded extension files. It adds separate memory user files (e.g. config, keybindings), cache files and log files.@codingame/monaco-vscode-quickaccess-service-override
@codingame/monaco-vscode-notifications-service-override
@codingame/monaco-vscode-dialogs-service-override
@codingame/monaco-vscode-model-service-override
@codingame/monaco-vscode-editor-service-override
@codingame/monaco-vscode-views-service-override
editor
service. Do not use both services at the same time.@codingame/monaco-vscode-configuration-service-override
@codingame/monaco-vscode-keybindings-service-override
@codingame/monaco-vscode-languages-service-override
onLanguage:${language}
event (to load vscode extension listening to those events)@codingame/monaco-vscode-textmate-service-override
@codingame/monaco-vscode-theme-service-override
@codingame/monaco-vscode-snippets-service-override
@codingame/monaco-vscode-audio-cue-service-override
@codingame/monaco-vscode-debug-service-override
@codingame/monaco-vscode-preferences-service-override
@codingame/monaco-vscode-output-service-override
@codingame/monaco-vscode-terminal-service-override
@codingame/monaco-vscode-search-service-override
@codingame/monaco-vscode-markers-service-override
@codingame/monaco-vscode-language-detection-worker-service-override
@codingame/monaco-vscode-storage-service-override
@codingame/monaco-vscode-lifecycle-service-override
@codingame/monaco-vscode-remote-agent-service-override
vscode-ext-host-server
bin to start the remote agent@codingame/monaco-vscode-accessibility-service-override
@codingame/monaco-vscode-workspace-trust-service-override
import * as vscode from 'vscode'
import { initialize } from 'vscode/services'
import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override'
import getConfigurationServiceOverride, { updateUserConfiguration, configurationRegistry } from '@codingame/monaco-vscode-configuration-service-override'
await initialize({
...getModelEditorServiceOverride((model, input, sideBySide) => {
// Open a new editor here and return it
// It will be called when for instance the user ctrl+click on an import
}),
...getConfigurationServiceOverride(vscode.Uri.file('/tmp/'))
})
updateUserConfiguration(`{
"editor.fontSize": 12,
"[java]": {
"editor.fontSize": 15,
}
}`)
initialize
can only be called once ( and it should be called BEFORE creating your first editor).
The editors created using monaco.editor.create
don't use the configuration from the configurationService.
This library exposes functions to create editors binded on the configuration service:
before:
import * as monaco from 'monaco-editor'
const model = monaco.editor.createModel(...)
const editor = monaco.editor.create({ model, ... })
...
model.dispose()
editor.dispose()
after:
import { createConfiguredEditor, createModelReference } from 'vscode/monaco'
const modelRef = await createModelReference(...)
const editor = createConfiguredEditor({ model: modelRef.object.textEditorModel })
...
await modelRef.object.save()
...
modelRef.dispose()
editor.dispose()
createConfiguredEditor
returns a subclass of what is returned by monaco.editor.create
, the updateOptions
method can still be used.
The only difference is that is will use the configurationService
as a default configuration
createModelReference
return a reference to a model. The value is fetched from the memory filesystem (which is written if you provide the second argument).
The reference can then be disposed, the model will only be disposed if there is no remaining references.
You can just import it as if you were in a vscode extension:
import * as vscode from 'vscode'
import { initialize } from 'vscode/extensions'
await initialize()
const range = new vscode.Range(...)
vscode.languages.registerCompletionItemProvider(...)
The api will use the manifest of a default vscode extension, which can be overriden by providing it to the initialize
function.
You can also register a new extension from its manifest:
import { registerExtension, initialize } from 'vscode/extensions'
await initialize()
const { registerFile: registerExtensionFile, getApi } = registerExtension(defaultThemesExtensions)
registerExtensionFile('/file.json', async () => fileContent)
getApi().then(vscodeApi => vscodeApi.languages.registerCompletionItemProvider(...))
VSCode uses a bunch of default extensions. Most of them are used to load the default languages and grammars (see https://github.com/microsoft/vscode/tree/main/extensions).
This library bundles and publishes them and allows to import the ones you want:
import '@codingame/monaco-vscode-javascript-default-extension'
import '@codingame/monaco-vscode-json-default-extension'
...
VSCode extension are bundled as vsix files. This library publishes a rollup plugin (vite-compatible) that allows to load a vsix file.
import vsixPlugin from '@codingame/monaco-vscode-rollup-vsix-plugin'
...
plugins: [
...,
vsixPlugin()
]
import './extension.vsix'
Try it out on https://codingame.github.io/monaco-vscode-api/
There is a demo that showcases the service-override features. It allows to register contributions with the same syntaxes as in VSCode. It includes:
From CLI run:
cd demo
npm ci
npm start
# OR: for vite debug output
npm run start:debug
For the debug feature, also run:
npm run start:debugServer
To connect to a remote agent, run:
npm run start:extHostServer
Then go to http://localhost:5173/?remoteAuthority=localhost:8000
You can also go to http://localhost:5173/?remoteAuthority=localhost:8000&remotePath=/any/path/on/your/machine to open a directory on your machine as the current workspace
This project was mainly created to make the implementation of monaco-languageclient more robust and maintainable.
monaco-languageclient uses vscode-languageclient which was built to run inside a VSCode extension. VSCode extensions communicate with the editor via an API they can import into their code.
The VSCode api exports:
The first implementations of monaco-languageclient were using a fake VSCode api implementation. The vscode-languageclient was hacked so the VSCode<->protocol object converters were mainly bypassed, so the fake VSCode api was receiving Language Server Protocol objects. Then the objects were transformed using custom transformers into Monaco objects to communicate with the monaco api.
This approach has some disadvantages:
With this library, it would be possible to plug vscode-languageclient directly on top of monaco, monaco-languageclient still helps to do so by:
FAQs
VSCode public API plugged on the monaco editor
The npm package @codingame/monaco-vscode-api receives a total of 44,976 weekly downloads. As such, @codingame/monaco-vscode-api popularity was classified as popular.
We found that @codingame/monaco-vscode-api demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.