monaco-json doesn't work well with the ESM

[fabiospampinato]

monaco-editor version: 0.20.0
Browser: Electron's Chrome 80-something
OS: macOS 10.14.0

I just spent the better part of the afternoon trying to get the JSON language to work with Monaco, now the thing kind of works, but it depends on how I load the JSON language contribution, which in and of itself seems like a problem to me.

First of all for some context I'm creating a separate bundle for Monaco using this Webpack configuration:

/* IMPORT */

const fs = require ( 'fs' ),
      path = require ( 'path' ),
      {BundleAnalyzerPlugin} = require ( 'webpack-bundle-analyzer' ),
      MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ),
      MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ),
      webpack = require ( 'webpack' );

/* VARIABLES */

const ROOT = process.cwd (),
      INPUT = path.join ( ROOT, 'src', 'apps', 'core', 'lib', 'monaco', 'entry.ts' ),
      STATIC = path.join ( ROOT, 'dist', 'static' ),
      OUTPUT = path.join ( STATIC, 'monaco' );

/* CONFIG */

const config = {
  mode: 'production',
  entry: {
    monaco: INPUT
  },
  output: {
    globalObject: 'self',
    library: 'monaco',
    libraryTarget: 'umd',
    path: OUTPUT
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        }]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.ttf$/,
        use: {
          loader: 'url-loader',
          options: {
            esModule: false
          }
        }
      }
    ]
  },
  plugins: [
    new BundleAnalyzerPlugin ({
      analyzerMode: 'static',
      defaultSizes: 'stat',
      reportFilename: path.join ( ROOT, 'report.monaco.html' ),
      openAnalyzer: false,
      logLevel: 'silent'
    }),
    new MiniCssExtractPlugin ({
      filename: 'monaco.css',
    }),
    new MonacoWebpackPlugin ({
      filename: 'monaco.worker.js',
      languages: [],
      features: [ //TODO
        '!accessibilityHelp',
        '!bracketMatching',
        '!caretOperations',
        '!clipboard',
        '!codeAction',
        '!codelens',
        '!colorDetector',
        '!comment',
        '!contextmenu',
        '!coreCommands',
        '!cursorUndo',
        '!dnd',
        '!find',
        '!folding',
        '!fontZoom',
        '!format',
        '!gotoError',
        '!gotoLine',
        '!gotoSymbol',
        '!hover',
        '!inPlaceReplace',
        '!inspectTokens',
        '!iPadShowKeyboard',
        '!linesOperations',
        '!links',
        '!multicursor',
        '!parameterHints',
        '!quickCommand',
        '!quickOutline',
        '!referenceSearch',
        '!rename',
        '!smartSelect',
        '!snippets',
        '!suggest',
        '!toggleHighContrast',
        '!toggleTabFocusMode',
        '!transpose',
        '!wordHighlighter',
        '!wordOperations',
        '!wordPartOperations'
      ]
    }),
    new webpack.optimize.LimitChunkCountPlugin ({
      maxChunks: 1
    }),
    {
      apply: compiler => {
        compiler.hooks.afterEmit.tap ( 'AfterEmitPlugin', () => {
          fs.copyFileSync ( path.join ( OUTPUT, 'monaco.worker.js' ), path.join ( STATIC, 'monaco.worker.js' ) );
        });
      }
    }
  ]
};

/* EXPORT */

module.exports = config;

The potentially interesting bit of that is the following:

    library: 'monaco',
    libraryTarget: 'umd',

Without these lines Monaco doesn't work at all for me, I don't remember why I added those lines to the configuration, as they don't seem to be mentioned in the sample configurations provided.

Those lines of configurations I think may assign Monaco to "window.monaco".

Getting to the JSON language:

Dynamic import

I'm loading all languages dynamically in order to minimize startup time.

Given that I'm loading the Monaco bundle like so: import * as Monaco from '/path/to/monaco.bundle.js';, before I load the JSON language dynamically the following is true: Monaco.languages === window.monaco.languages, after I load the JSON language contribution, 'monaco-editor/esm/vs/language/json/monaco.contribution' that equality doesn't hold anymore, so it looks like the language contribution is doing something funny with it.

Also after loading the language this way creating a JSON editor from the Monaco variable doesn't really work, the text is not highlighted at all, if I instead create a JSON editor from the window.monaco variable it works, but then the theme is revered back to the default one for some reason.

This is the content of that contribution file:

import '../../editor/editor.api.js';
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
'use strict';
var Emitter = monaco.Emitter;
// --- JSON configuration and defaults ---------
var LanguageServiceDefaultsImpl = /** @class */ (function () {
    function LanguageServiceDefaultsImpl(languageId, diagnosticsOptions, modeConfiguration) {
        this._onDidChange = new Emitter();
        this._languageId = languageId;
        this.setDiagnosticsOptions(diagnosticsOptions);
        this.setModeConfiguration(modeConfiguration);
    }
    Object.defineProperty(LanguageServiceDefaultsImpl.prototype, "onDidChange", {
        get: function () {
            return this._onDidChange.event;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(LanguageServiceDefaultsImpl.prototype, "languageId", {
        get: function () {
            return this._languageId;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(LanguageServiceDefaultsImpl.prototype, "modeConfiguration", {
        get: function () {
            return this._modeConfiguration;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(LanguageServiceDefaultsImpl.prototype, "diagnosticsOptions", {
        get: function () {
            return this._diagnosticsOptions;
        },
        enumerable: true,
        configurable: true
    });
    LanguageServiceDefaultsImpl.prototype.setDiagnosticsOptions = function (options) {
        this._diagnosticsOptions = options || Object.create(null);
        this._onDidChange.fire(this);
    };
    LanguageServiceDefaultsImpl.prototype.setModeConfiguration = function (modeConfiguration) {
        this._modeConfiguration = modeConfiguration || Object.create(null);
        this._onDidChange.fire(this);
    };
    ;
    return LanguageServiceDefaultsImpl;
}());
export { LanguageServiceDefaultsImpl };
var diagnosticDefault = {
    validate: true,
    allowComments: true,
    schemas: [],
    enableSchemaRequest: false
};
var modeConfigurationDefault = {
    documentFormattingEdits: true,
    documentRangeFormattingEdits: true,
    completionItems: true,
    hovers: true,
    documentSymbols: true,
    tokens: true,
    colors: true,
    foldingRanges: true,
    diagnostics: true,
    selectionRanges: true
};
var jsonDefaults = new LanguageServiceDefaultsImpl('json', diagnosticDefault, modeConfigurationDefault);
// Export API
function createAPI() {
    return {
        jsonDefaults: jsonDefaults
    };
}
monaco.languages.json = createAPI();
// --- Registration to monaco editor ---
function getMode() {
    return import('./jsonMode.js');
}
monaco.languages.register({
    id: 'json',
    extensions: ['.json', '.bowerrc', '.jshintrc', '.jscsrc', '.eslintrc', '.babelrc', '.har'],
    aliases: ['JSON', 'json'],
    mimetypes: ['application/json'],
});
monaco.languages.onLanguage('json', function () {
    getMode().then(function (mode) { return mode.setupMode(jsonDefaults); });
});

And it doesn't look right to me, it references a monaco variable without importing it, so perhaps that's part of the problem here.

Basically I couldn't get the JSON language to work at all when dynamically importing it.

Static import

If I load the JSON language contribution directly in my bundled Monaco entrypoint instead it works, and Monaco.languages remains equal to monaco.languages 🤷‍♂️

TL;DR: I think monaco-json basically doesn't work that well when using ESM.

[alexdima]

I agree, the esm variants were using the global monaco. I have refactored the projects to avoid doing this.

[fabiospampinato]

@alexdima I'm still unable to load the JSON language on demand, the issue seems to be that the language definition and related files directly try to load other parts of Monaco themselves, while I have a separate bundle for it, which I just can't make those files use in any reasonable way. This is in contrast to the basic languages provided which just offer some exports that can be easily integrated with my Monaco bundle.

Should I perhaps patch monaco-json and use that directly? What would be the best way to load the advanced JSON contributions on demand?

[fabiospampinato]

This is in contrast to the basic languages provided which just offer some exports that can be easily integrated with my Monaco bundle.

Actually since v0.21 some languages are loading large portions of the editor's code just to fetch an enum, e.g. languages.IndentAction.Indent, IMHO that enum should be defined somewhere and imported directly instead.

[fabiospampinato]

For posterity:

This webpack plugin made it so that a single instance of Monaco is loaded in my bundles:

    new webpack.NormalModuleReplacementPlugin (
      /\/fillers\/monaco-editor-core\.js$/,
      '/Users/fabio/Projects/notable/src/apps/core/lib/monaco/core.ts'
    )

The content of that core.ts file just exports the APIs those files expect to find.

That would work for the JSON contributions too, but there's this problematic statement at the start of that file:

import '../../editor/editor.api.js';

That would need to be redirected too or patched.

[alexdima]

@fabiospampinato I can take another look, what steps should I try?

The idea of these languages is that they are loaded after the editor core has been loaded. So **/monaco.contribution.ts would be loaded at start-up, but after the monaco editor core (since that piece of code uses editor api to register a language and then register a listener for when the language is needed).

When a model with that particular language id is instantiated, the editor will fire the onLanguage event listener, which would then load the needed jsonMode bundle. The jsonMode bundle would always load on a page where the editor core has been loaded, so any module bundler should exclude editor.api from bundling inside jsonMode.

When I use a webpack config like this one, I can see in the output that the editor.api is not repeated in each and every file, it is only bundled once in app.js.