From 118c0d57832c93cf752aa6897e7ffc6215e6520f Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Mon, 9 Apr 2018 16:53:49 +0200 Subject: [PATCH] Improve README, webpack consumption --- .gitignore | 1 + README.md | 48 +++++++++++++++++++++++++++- index.js | 21 ++++++------ package.json | 5 ++- plugins/AddWorkerEntryPointPlugin.js | 6 ++-- 5 files changed, 65 insertions(+), 16 deletions(-) diff --git a/.gitignore b/.gitignore index e69de29b..2ccbe465 100644 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1 @@ +/node_modules/ diff --git a/README.md b/README.md index 72f1506a..b43a0dae 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,51 @@ +# Monaco Editor Webpack Loader Plugin -# Contributing +A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [webpack](https://webpack.js.org/) contributed by [Tim Kendrik](https://github.com/timkendrick). + +## Installing +```sh +npm install monaco-editor-webpack-plugin +``` + +## Using +* `webpack.config.js`: +```js +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); + +module.exports = { + entry: './index.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'app.js' + }, + plugins: [ + new MonacoWebpackPlugin() + ] +}; +``` + +* `index.js`: +```js +import * as monaco from 'monaco-editor'; + +monaco.editor.create(document.getElementById('container'), { + value: 'console.log("Hello, world")', + language: 'javascript' +}); +``` + +## 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: + +* `output` (`string`) - append a certain string to all generated files. + * default value: `''`. +* `languages` (`string[]`) - include only a subset of the languages supported. + * default value: `['bat', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'pgsql', 'php', 'postiats', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'sb', 'scss', 'solidity', 'sql', 'swift', 'typescript', 'vb', 'xml', 'yaml']`. +* `features` (`string[]`) - include only a subset of the editor features. + * default value: `['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'format', 'gotoDeclarationCommands', 'gotoDeclarationMouse', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'iPadShowKeyboard', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickFixCommands', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'wordHighlighter', 'wordOperations']`. + +## 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 diff --git a/index.js b/index.js index 52bf519e..b667e6bd 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,5 @@ const path = require('path'); +const webpack = require('webpack'); const AddWorkerEntryPointPlugin = require('./plugins/AddWorkerEntryPointPlugin'); const INCLUDE_LOADER_PATH = require.resolve('./loaders/include'); @@ -42,11 +43,10 @@ const languagesById = fromPairs( const featuresById = mapValues(FEATURES, (feature, key) => ({ label: key, ...feature })) class MonacoWebpackPlugin { - constructor(webpack, options = {}) { + constructor(options = {}) { const languages = options.languages || Object.keys(languagesById); const features = options.features || Object.keys(featuresById); const output = options.output || ''; - this.webpack = webpack; this.options = { languages: languages.map((id) => languagesById[id]).filter(Boolean), features: features.map(id => featuresById[id]).filter(Boolean), @@ -55,7 +55,6 @@ class MonacoWebpackPlugin { } apply(compiler) { - const webpack = this.webpack; const { languages, features, output } = this.options; const publicPath = getPublicPath(compiler); const modules = [EDITOR_MODULE, ...languages, ...features]; @@ -63,7 +62,7 @@ class MonacoWebpackPlugin { ({ label, alias, worker }) => worker && ({ label, alias, ...worker }) ).filter(Boolean); const rules = createLoaderRules(languages, features, workers, publicPath); - const plugins = createPlugins(webpack, workers, output); + const plugins = createPlugins(workers, output); addCompilerRules(compiler, rules); addCompilerPlugins(compiler, plugins); } @@ -117,30 +116,30 @@ function createLoaderRules(languages, features, workers, publicPath) { ]; } -function createPlugins(webpack, workers, outputPath) { +function createPlugins(workers, outputPath) { const workerFallbacks = workers.reduce((acc, { id, fallback }) => (fallback ? Object.assign(acc, { [id]: resolveMonacoPath(fallback) }) : acc), {}); return [ ...Object.keys(IGNORED_IMPORTS).map((id) => - createIgnoreImportsPlugin(webpack, id, IGNORED_IMPORTS[id]) + createIgnoreImportsPlugin(id, IGNORED_IMPORTS[id]) ), ...uniqBy(workers, ({ id }) => id).map(({ id, entry, output }) => - new AddWorkerEntryPointPlugin(webpack, { + new AddWorkerEntryPointPlugin({ id, entry: resolveMonacoPath(entry), filename: path.join(outputPath, output), plugins: [ - createContextPlugin(webpack, WORKER_LOADER_PATH, {}), + createContextPlugin(WORKER_LOADER_PATH, {}), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), ], }) ), - ...(workerFallbacks ? [createContextPlugin(webpack, WORKER_LOADER_PATH, workerFallbacks)] : []), + ...(workerFallbacks ? [createContextPlugin(WORKER_LOADER_PATH, workerFallbacks)] : []), ]; } -function createContextPlugin(webpack, filePath, contextPaths) { +function createContextPlugin(filePath, contextPaths) { return new webpack.ContextReplacementPlugin( new RegExp(`^${path.dirname(filePath)}$`), '', @@ -148,7 +147,7 @@ function createContextPlugin(webpack, filePath, contextPaths) { ); } -function createIgnoreImportsPlugin(webpack, targetPath, ignoredModules) { +function createIgnoreImportsPlugin(targetPath, ignoredModules) { return new webpack.IgnorePlugin( new RegExp(`^(${ignoredModules.map((id) => `(${id})`).join('|')})$`), new RegExp(`^${path.dirname(targetPath)}$`) diff --git a/package.json b/package.json index d5e3f509..0dcc0d10 100644 --- a/package.json +++ b/package.json @@ -21,5 +21,8 @@ "bugs": { "url": "https://github.com/Microsoft/monaco-editor-webpack-plugin/issues" }, - "homepage": "https://github.com/Microsoft/monaco-editor-webpack-plugin#readme" + "homepage": "https://github.com/Microsoft/monaco-editor-webpack-plugin#readme", + "dependencies": { + "webpack": "^4.5.0" + } } diff --git a/plugins/AddWorkerEntryPointPlugin.js b/plugins/AddWorkerEntryPointPlugin.js index 04f2ab9d..306c3d1b 100644 --- a/plugins/AddWorkerEntryPointPlugin.js +++ b/plugins/AddWorkerEntryPointPlugin.js @@ -1,17 +1,17 @@ +const webpack = require('webpack'); + class AddWorkerEntryPointPlugin { - constructor(webpack, { + constructor({ id, entry, filename, chunkFilename = undefined, plugins = undefined, }) { - this.webpack = webpack; this.options = { id, entry, filename, chunkFilename, plugins }; } apply(compiler) { - const webpack = this.webpack; const { id, entry, filename, chunkFilename, plugins } = this.options; compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', (compilation, callback) => { const outputOptions = {