import type * as webpack from 'webpack'; import * as path from 'path'; import * as loaderUtils from 'loader-utils'; import * as fs from 'fs'; import { AddWorkerEntryPointPlugin } from './plugins/AddWorkerEntryPointPlugin'; import { IFeatureDefinition } from './types'; import { ILoaderOptions } from './loaders/include'; import { EditorLanguage, EditorFeature, NegatedEditorFeature } from 'monaco-editor/esm/metadata'; const INCLUDE_LOADER_PATH = require.resolve('./loaders/include'); const EDITOR_MODULE: IFeatureDefinition = { label: 'editorWorkerService', entry: undefined, worker: { id: 'vs/editor/editor', entry: 'vs/editor/editor.worker' } }; /** * Return a resolved path for a given Monaco file. */ function resolveMonacoPath(filePath: string, monacoEditorPath: string | undefined): string { if (monacoEditorPath) { return require.resolve(path.join(monacoEditorPath, 'esm', filePath)); } try { return require.resolve(path.join('monaco-editor/esm', filePath)); } catch (err) {} try { return require.resolve(path.join(process.cwd(), 'node_modules/monaco-editor/esm', filePath)); } catch (err) {} return require.resolve(filePath); } /** * Return the interpolated final filename for a worker, respecting the file name template. */ function getWorkerFilename( filename: string, entry: string, monacoEditorPath: string | undefined ): string { return loaderUtils.interpolateName({ resourcePath: entry }, filename, { content: fs.readFileSync(resolveMonacoPath(entry, monacoEditorPath)) }); } interface EditorMetadata { features: IFeatureDefinition[]; languages: IFeatureDefinition[]; } function getEditorMetadata(monacoEditorPath: string | undefined): EditorMetadata { const metadataPath = resolveMonacoPath('metadata.js', monacoEditorPath); return require(metadataPath); } function resolveDesiredFeatures( metadata: EditorMetadata, userFeatures: (EditorFeature | NegatedEditorFeature)[] | undefined ): IFeatureDefinition[] { const featuresById: { [feature: string]: IFeatureDefinition } = {}; metadata.features.forEach((feature) => (featuresById[feature.label] = feature)); function notContainedIn(arr: string[]) { return (element: string) => arr.indexOf(element) === -1; } let featuresIds: string[]; if (userFeatures && userFeatures.length) { const excludedFeatures = userFeatures.filter((f) => f[0] === '!').map((f) => f.slice(1)); if (excludedFeatures.length) { featuresIds = Object.keys(featuresById).filter(notContainedIn(excludedFeatures)); } else { featuresIds = userFeatures; } } else { featuresIds = Object.keys(featuresById); } return coalesce(featuresIds.map((id) => featuresById[id])); } function resolveDesiredLanguages( metadata: EditorMetadata, userLanguages: EditorLanguage[] | undefined, userCustomLanguages: IFeatureDefinition[] | undefined ): IFeatureDefinition[] { const languagesById: { [language: string]: IFeatureDefinition } = {}; metadata.languages.forEach((language) => (languagesById[language.label] = language)); const languages = userLanguages || Object.keys(languagesById); return coalesce(languages.map((id) => languagesById[id])).concat(userCustomLanguages || []); } declare namespace MonacoEditorWebpackPlugin { interface IMonacoEditorWebpackPluginOpts { /** * Include only a subset of the languages supported. */ languages?: EditorLanguage[]; /** * Custom languages (outside of the ones shipped with the `monaco-editor`). */ customLanguages?: IFeatureDefinition[]; /** * Include only a subset of the editor features. * Use e.g. '!contextmenu' to exclude a certain feature. */ features?: (EditorFeature | NegatedEditorFeature)[]; /** * Specify a filename template to use for generated files. * Use e.g. '[name].worker.[contenthash].js' to include content-based hashes. */ filename?: string; /** * The absolute file system path to the monaco-editor npm module. * Use e.g. `C:\projects\my-project\node-modules\monaco-editor` */ monacoEditorPath?: string; /** * Override 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. */ publicPath?: string; /** * 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](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)). */ globalAPI?: boolean; } } interface IInternalMonacoEditorWebpackPluginOpts { languages: IFeatureDefinition[]; features: IFeatureDefinition[]; filename: string; monacoEditorPath: string | undefined; publicPath: string; globalAPI: boolean; } class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance { private readonly options: IInternalMonacoEditorWebpackPluginOpts; constructor(options: MonacoEditorWebpackPlugin.IMonacoEditorWebpackPluginOpts = {}) { const monacoEditorPath = options.monacoEditorPath; const metadata = getEditorMetadata(monacoEditorPath); const languages = resolveDesiredLanguages(metadata, options.languages, options.customLanguages); const features = resolveDesiredFeatures(metadata, options.features); this.options = { languages, features, filename: options.filename || '[name].worker.js', monacoEditorPath, publicPath: options.publicPath || '', globalAPI: options.globalAPI || false }; } apply(compiler: webpack.Compiler): void { const { languages, features, filename, monacoEditorPath, publicPath, globalAPI } = this.options; const compilationPublicPath = getCompilationPublicPath(compiler); const modules = [EDITOR_MODULE].concat(languages).concat(features); const workers: ILabeledWorkerDefinition[] = []; modules.forEach((module) => { if (module.worker) { workers.push({ label: module.label, id: module.worker.id, entry: module.worker.entry }); } }); const rules = createLoaderRules( languages, features, workers, filename, monacoEditorPath, publicPath, compilationPublicPath, globalAPI ); const plugins = createPlugins(compiler, workers, filename, monacoEditorPath); addCompilerRules(compiler, rules); addCompilerPlugins(compiler, plugins); } } interface ILabeledWorkerDefinition { label: string; id: string; entry: string; } function addCompilerRules(compiler: webpack.Compiler, rules: webpack.RuleSetRule[]): void { const compilerOptions = compiler.options; if (!compilerOptions.module) { compilerOptions.module = { rules: rules }; } else { const moduleOptions = compilerOptions.module; moduleOptions.rules = (moduleOptions.rules || []).concat(rules); } } function addCompilerPlugins(compiler: webpack.Compiler, plugins: webpack.WebpackPluginInstance[]) { plugins.forEach((plugin) => plugin.apply(compiler)); } function getCompilationPublicPath(compiler: webpack.Compiler): string { if (compiler.options.output && compiler.options.output.publicPath) { if (typeof compiler.options.output.publicPath === 'string') { return compiler.options.output.publicPath; } else { console.warn(`Cannot handle options.publicPath (expected a string)`); } } return ''; } function createLoaderRules( languages: IFeatureDefinition[], features: IFeatureDefinition[], workers: ILabeledWorkerDefinition[], filename: string, monacoEditorPath: string | undefined, pluginPublicPath: string, compilationPublicPath: string, globalAPI: boolean ): webpack.RuleSetRule[] { if (!languages.length && !features.length) { return []; } const languagePaths = flatArr(coalesce(languages.map((language) => language.entry))); const featurePaths = flatArr(coalesce(features.map((feature) => feature.entry))); const workerPaths = fromPairs( workers.map(({ label, entry }) => [label, getWorkerFilename(filename, entry, monacoEditorPath)]) ); if (workerPaths['typescript']) { // javascript shares the same worker workerPaths['javascript'] = workerPaths['typescript']; } if (workerPaths['css']) { // scss and less share the same worker workerPaths['less'] = workerPaths['css']; workerPaths['scss'] = workerPaths['css']; } if (workerPaths['html']) { // handlebars, razor and html share the same worker workerPaths['handlebars'] = workerPaths['html']; workerPaths['razor'] = workerPaths['html']; } // Determine the public path from which to load worker JS files. In order of precedence: // 1. Plugin-specific public path. // 2. Dynamic runtime public path. // 3. Compilation public path. const pathPrefix = Boolean(pluginPublicPath) ? JSON.stringify(pluginPublicPath) : `typeof __webpack_public_path__ === 'string' ` + `? __webpack_public_path__ ` + `: ${JSON.stringify(compilationPublicPath)}`; const globals = { MonacoEnvironment: `(function (paths) { function stripTrailingSlash(str) { return str.replace(/\\/$/, ''); } return { globalAPI: ${globalAPI}, getWorkerUrl: function (moduleId, label) { var pathPrefix = ${pathPrefix}; var result = (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label]; if (/^((http:)|(https:)|(file:)|(\\/\\/))/.test(result)) { var currentUrl = String(window.location); var currentOrigin = currentUrl.substr(0, currentUrl.length - window.location.hash.length - window.location.search.length - window.location.pathname.length); if (result.substring(0, currentOrigin.length) !== currentOrigin) { if(/^(\\/\\/)/.test(result)) { result = window.location.protocol + result } var js = '/*' + label + '*/importScripts("' + result + '");'; var blob = new Blob([js], { type: 'application/javascript' }); return URL.createObjectURL(blob); } } return result; } }; })(${JSON.stringify(workerPaths, null, 2)})` }; const options: ILoaderOptions = { globals, pre: featurePaths.map((importPath) => resolveMonacoPath(importPath, monacoEditorPath)), post: languagePaths.map((importPath) => resolveMonacoPath(importPath, monacoEditorPath)) }; return [ { test: /esm[/\\]vs[/\\]editor[/\\]editor.(api|main).js/, use: [ { loader: INCLUDE_LOADER_PATH, options } ] } ]; } function createPlugins( compiler: webpack.Compiler, workers: ILabeledWorkerDefinition[], filename: string, monacoEditorPath: string | undefined ): AddWorkerEntryPointPlugin[] { const webpack = compiler.webpack ?? require('webpack'); return ([]).concat( workers.map( ({ id, entry }) => new AddWorkerEntryPointPlugin({ id, entry: resolveMonacoPath(entry, monacoEditorPath), filename: getWorkerFilename(filename, entry, monacoEditorPath), plugins: [new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })] }) ) ); } function flatArr(items: (T | T[])[]): T[] { return items.reduce((acc: T[], item: T | T[]) => { if (Array.isArray(item)) { return ([]).concat(acc).concat(item); } return ([]).concat(acc).concat([item]); }, []); } function fromPairs(values: [string, T][]): { [key: string]: T } { return values.reduce( (acc, [key, value]) => Object.assign(acc, { [key]: value }), <{ [key: string]: T }>{} ); } function coalesce(array: ReadonlyArray): T[] { return array.filter(Boolean); } export = MonacoEditorWebpackPlugin;