Add es6 module support for addons/modes

[alangdm]

Edit: I found out about the discussion forum a tad to late, feel free to ignore this here 😓

Hi, I've been trying to use CodeMirror inside a WebComponent made with LitElement (demo here)and I somehow managed to make it work but there's a couple of things I hoped you could evaluate adding to make life easier for people developing on es6 modules like me.

Since the CodeMirror core src folder is on npm and it's already in modules it can be used just fine like that in other modules, but there's a bit of a problem when trying to use any of the addons/modes provided here;

As far as I can tell, all addons/modes all asume that if you're not using CommonJS/AMD you must be using a global script, but since es6 modules have local environments trying to import the addons/modes as they are right now in an es6 module ends up with a CodeMirror is not defined error, e.g.:

import CodeMirror from "codemirror/src/codemirror.js"; // works fine
import "codemirror/mode/javascript/javascript.js"; //  throws CodeMirror is not defined

For now, I've gotten this to work by using a function which fetches the addon/mode and then evals it in the module's context but that is far from ideal thinking of the risks and debugging troubles using eval brings, so I was hoping you could release an es6 modules version of the addons/modes, it could be something as simple as changing:

// from this
(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {
// addon/mode content
})

// to this
exports function addonOrModeName(CodeMirror){
// addon/mode content
}

// so that you can do this
import CodeMirror from "codemirror/src/codemirror.js"; 
import { addModeJavascript } from "codemirror/mode/javascript/javascript-module.js"; // or any name you like, maybe use .mjs?

addModeJavascript(CodeMirror);

If you like this way of doing things I can make a PR for this kind of behavior.

Now that Firefox joined every other major modern browser in supporting es6 modules I think it could be a great time to add this 👍

[marijnh]

We're planning a modernization of the codebase in the near future, but until then I'd prefer to keep things stable and not add further complexity and indirection, so this isn't something that's welcome right now.

[justinfagnani]

@alangdm there's a workaround for some modes at least. You can define a module that imports CodeMirror then writes it to a global, and import that before any mode:

codemirror-global.js:

import CodeMirror from "codemirror/src/codemirror.js";
window.CodeMirror = CodeMirror;

app.js:

import './codemirror-global.js';
import CodeMirror from "codemirror/src/codemirror.js";
import "codemirror/mode/javascript/javascript.js";

@marijnh

further complexity and indirection

Wouldn't this reduce complexity and indirection by directly using the web native module system, rather than relying on user-land loaders?

We're getting a lot of demand for libraries like CodeMirror to be loadable as modules. What can we do to help?

[Enrique199413]

any update? @justinfagnani

[NullVoxPopuli]

is there an up to date guide on how to use CodeMirror in an ES modules environment?

[marijnh]

No. But the gist of it would be to run something like rollup on lib/codemirror.js to create a module, and use that in your system. Or use CodeMirror 6.

[NullVoxPopuli]

Ye, I had totally missed codemirror 6. This makes way more sense

[richRemer]

If you're having trouble with the global CodeMirror workaround, try using the import function. In my case, import was happening before the execution of the module, so the global wasn't yet available.

import CodeMirror from "codemirror/src/codemirror.js";
window.CodeMirror = CodeMirror;
import("codemirror/mode/javascript/javascript.js").then(() => {
  console.log("imported CodeMirror 'javascript' mode");
});