npmpackage.info

monaco-editor-webpack-plugin-esm

A browser based code editor

7.1.1

40,923

MIT

JavaScript

23.91 kB

18 7.8

Installations

npm install monaco-editor-webpack-plugin-esm

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.19.0

NPM Version

10.2.3 Pull Requests

Open

43

Total

632

Closed

128

Merged

461

Issues

Open

589

Total

3,720

Closed

3,131

Releases

v0.52.2

Published on 09 Dec 2024

v0.52.0

Published on 19 Sept 2024

v0.52.0-rc2

Published on 18 Sept 2024

v0.51.0

Published on 23 Aug 2024

v0.51.0-rc3

Published on 22 Aug 2024

v0.51.0-rc2

Published on 21 Aug 2024

View all 91 releases

Contributors

295

View all 295 contributors

Languages

JavaScript

TypeScript

HTML

CSS

Shell

SCSS

JavaScript (61.25%)

TypeScript (37.2%)

HTML (1.49%)

CSS (0.04%)

Shell (0.02%)

SCSS (0.01%)

Developer

microsoft

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

40,923 Stars

3,430 Commits

3,618 Forks

526 Watching

23 Branches

295 Contributors

Maintainers

Package Meta Information

Latest Version

7.1.1

Package Id

monaco-editor-webpack-plugin-esm@7.1.1

Unpacked Size

23.91 kB

Size

7.62 kB

File Count

NPM Version

10.2.3

Node Version

18.19.0

Publised On

04 Dec 2024

Total Downloads

Cumulative downloads

Total Downloads

18

Last day

Compared to previous day

Last week

Compared to previous week

Last month

Compared to previous month

Last year

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Monaco Editor Webpack Loader Plugin

A plugin to simplify loading the Monaco Editor with webpack.

Note: This is a fork of monaco-webpack-plugin to add support for module workers (microsoft/monaco-editor#4741). This package will be deprecated when/if the original package is fixed (see this PR).

Installing

1npm install monaco-editor-webpack-plugin-esm

Using

webpack.config.js:

1const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin-esm');
2const path = require('path');
3
4module.exports = {
5	entry: './index.js',
6	output: {
7		path: path.resolve(__dirname, 'dist'),
8		filename: 'app.js'
9	},
10	module: {
11		rules: [
12			{
13				test: /\.css$/,
14				use: ['style-loader', 'css-loader']
15			},
16			{
17				test: /\.ttf$/,
18				type: 'asset/resource'
19			}
20		]
21	},
22	plugins: [new MonacoWebpackPlugin()]
23};

If using Webpack 4 or lower, it is necessary to use the file-loader instead of Asset Modules like the code below:

1{
2	test: /\.ttf$/,
3	use: ['file-loader']
4}

index.js:

1import * as monaco from 'monaco-editor';
2// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
3// if shipping only a subset of the features & languages is desired
4
5monaco.editor.create(document.getElementById('container'), {
6	value: 'console.log("Hello, world")',
7	language: 'javascript'
8});

Options

Options can be passed in to MonacoWebpackPlugin. They can be used to generate a smaller editor bundle by selecting only certain languages or only certain editor features:

filename (string) - custom filename template for worker scripts, respects the same options as loader-utils' interpolateName. Useful for adding content-based hashes so that files can be served with long-lived caching headers.
- default value: '[name].worker.js'.
publicPath (string) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin..
- default value: ''.
languages (string[]) - include only a subset of the languages supported. By default, all languages shipped with the monaco-editor will be included.

Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:

Language Instantiator
javascript typescript
handlebars html
scss, less css

To view a list of all available languages, you can run import metadata from 'monaco-editor/esm/metadata'; console.log(metadata.languages);.
features (string[]) - include only a subset of the editor features. By default, all features shipped with the monaco-editor will be included. Instead of enumerating included features, it is also possible to exclude certain default features prefixing them with an exclamation mark '!'.

To view a list of all available features, you can run import metadata from 'monaco-editor/esm/metadata'; console.log(metadata.features);.
globalAPI (boolean) - specify whether the editor API should be exposed through a global monaco object or not. This option is applicable to 0.22.0 and newer version of monaco-editor. Since 0.22.0, the ESM version of the monaco editor does no longer define a global monaco object unless global.MonacoEnvironment = { globalAPI: true } is set (change log).
- default value: false.

Language	Instantiator
javascript	typescript
handlebars	html
scss, less	css

Version Matrix

`monaco-editor-webpack-plugin`	`monaco-editor`
`7..`	`>= 0.31.0`
`6..`	`0.30.*`
`5..`	`0.29.*`
`4..`	`0.25.`, `0.26.`, `0.27.`, `0.28.`
`3..`	`0.22.`, `0.23.`, `0.24.*`
`2..`	`0.21.*`
`1.9.*`	`0.20.*`
`1.8.*`	`0.19.*`
`1.7.*`	`0.18.*`

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

7

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 7

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/locker.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/locker.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/needs-more-info-closer.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/needs-more-info-closer.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-chat.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/pr-chat.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/website.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/website.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/kamil1b/git-taxbreak/website.yml/master?enable=pin
Warn: containerImage not pinned by hash: website/index/samples/sample.dockerfile.txt:1: pin your Docker image by updating mono to mono@sha256:b6bd136c233c60037a45d15b37d593a4a40d822ebe35090d492144b997476dff
Warn: npmCommand not pinned by hash: .github/workflows/locker.yml:21
Warn: npmCommand not pinned by hash: .github/workflows/needs-more-info-closer.yml:21
Warn: npmCommand not pinned by hash: .github/workflows/pr-chat.yml:19
Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:177
Info: Third-party GitHubActions are pinned
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.8

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to monaco-editor-webpack-plugin-esm

monaco-editor-esm-webpack-plugin

2.1.0

The webpack's plugin for monaco editor to compile the worker and handle with localization

monaco-editor-webpack-plugin-esm

Installations

Developer Guide

No

CommonJS

18.19.0

10.2.3

Pull Requests

43

632

128

461

Issues

589

3,720

3,131

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

18

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Monaco Editor Webpack Loader Plugin

Installing

Using

Options

Version Matrix

Contributing

10

10

10

10

10

10

10

10

8

7

0

0

0

7.8

/10

Other packages similar to monaco-editor-webpack-plugin-esm