Migrate to CodeMirror v6

[caugner]

## Background

So far, we have been bundling CodeMirror v5 ourselves by concatenating and minifiying several CodeMirror source files:

bob/lib/bundler.js

Lines 70 to 86 in 1669f37

	/**
	* For the current bundle, concatenate, minify, and write the final
	* result to file
	* @param {String} type - The type of source i.e. css or js
	* @param {String} fileName - The output file name
	* @param {Array} bundle - The individual files to bundle
	*/
	function buildBundle(type, fileName, bundle) {
	let resolvedPaths = getFullPaths(bundle);
	// ensure the target dir exists
	utils.ensureDir(config.destCssDir);
	utils.ensureDir(config.destJsDir);
	let result = concatSync(resolvedPaths);
	minifyAndWriteFile(type, result, fileName);
	}

We have been building to bundles:

1. codeMirror (a.k.a. codemirror-5-50-2):
   

   bob/bundles.json

   Lines 4 to 13 in 1669f37

   	"javascript": [
   	"/node_modules/codemirror/lib/codemirror.js",
   	"/node_modules/codemirror/mode/javascript/javascript.js",
   	"/node_modules/codemirror/addon/mode/simple.js",
   	"/node_modules/codemirror/mode/wast/wast.js"
   	],
   	"css": [
   	"/node_modules/codemirror/lib/codemirror.css",
   	"../editor/css/editor-libs/codemirror-override.css"
   	],

2. codeMirrorTabbed (a.k.a. codemirror-tabbed-5-50-2)
   

   bob/bundles.json

   Lines 17 to 28 in 1669f37

   	"javascript": [
   	"/node_modules/codemirror/lib/codemirror.js",
   	"/node_modules/codemirror/addon/display/autorefresh.js",
   	"/node_modules/codemirror/mode/javascript/javascript.js",
   	"/node_modules/codemirror/mode/xml/xml.js",
   	"/node_modules/codemirror/mode/css/css.js",
   	"/node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
   	],
   	"css": [
   	"/node_modules/codemirror/lib/codemirror.css",
   	"../editor/css/editor-libs/codemirror-override.css"
   	],

Problem

In CodeMirror v6, this is no longer possible as node_modules/codemirror and node_modules/@codemirror/* no longer contain sources, but only a dist/ folder with a single ESM (index.js) and CommonJS (index.cjs) entrypoint.

[queengooborg]

From what it looks like, CodeMirror v6 contains a complete architectural rewrite that heavily depends on bundlers, as each individual component has been separated into its own package (ex. JS language support, et. al.). The main codemirror package has now been replaced with a completely barebones setup.

I think Browserify is powerful enough to handle this, but we may want to research other options like Rollup or Vite as our dependency count scales up.

[caugner]

@queengooborg Thank you! Are you aware of any pros/cons of staying with browserify vs moving to Rollup or Vite?

[queengooborg]

Some pros I know of for Rollup and Webpack are much faster build times and ESM module support. Vite, I'm not quite as familiar with as I've only heard the name, but I've heard good things about it!

[caugner]

If you tackle this, you can go with whatever of these three tools you prefer. I have also heard good things about Vite (almost instant builds?), we're currently using Webpack in yari, and Florian had a good impression of Rollup when experimenting with it in yari (not committed). 👍