Add es6 module support for addons/modes


#1

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 :+1:


#2

See my response here (and in general, please don’t cross-post the same thing through multiple channels).