First approach

.cjsescache

@@ -0,0 +1,22 @@
+[
+  "node_modules/codemirror/addon/comment/comment.js",
+  "node_modules/codemirror/addon/dialog/dialog.js",
+  "node_modules/codemirror/addon/edit/closebrackets.js",
+  "node_modules/codemirror/addon/edit/matchbrackets.js",
+  "node_modules/codemirror/addon/fold/brace-fold.js",
+  "node_modules/codemirror/addon/fold/comment-fold.js",
+  "node_modules/codemirror/addon/fold/foldcode.js",
+  "node_modules/codemirror/addon/fold/foldgutter.js",
+  "node_modules/codemirror/addon/fold/indent-fold.js",
+  "node_modules/codemirror/addon/hint/css-hint.js",
+  "node_modules/codemirror/addon/hint/show-hint.js",
+  "node_modules/codemirror/addon/lint/lint.js",
+  "node_modules/codemirror/addon/scroll/annotatescrollbar.js",
+  "node_modules/codemirror/addon/search/matchesonscrollbar.js",
+  "node_modules/codemirror/addon/search/searchcursor.js",
+  "node_modules/codemirror/addon/selection/active-line.js",
+  "node_modules/codemirror/keymap/sublime.js",
+  "node_modules/codemirror/lib/codemirror.js",
+  "node_modules/codemirror/mode/css/css.js",
+  "node_modules/codemirror/mode/stylus/stylus.js"
+]

.eslintrc.yml

@@ -238,3 +238,7 @@ overrides:
   - files: ["**/*worker*.js"]
     env:
       worker: true
+
+  - files: ["**/*.mjs"]
+    parserOptions:
+      sourceType: module

.tx/config

@@ -2,9 +2,9 @@
 host = https://www.transifex.com
 
 [Stylus.messages]
-file_filter = _locales/<lang>/messages.json
+file_filter = dist/_locales/<lang>/messages.json
 minimum_perc = 0
-source_file = _locales/en/messages.json
+source_file = dist/_locales/en/messages.json
 source_lang = en_US
 type = CHROME
 

dist/edit.html

@@ -21,26 +21,7 @@
     <script src="edit/codemirror-themes.js"></script> <!-- must precede base.js -->
     <script src="edit/base.js"></script>
 
-    <script src="vendor/codemirror/lib/codemirror.js"></script>
+<script src="chunks/annotatescrollbar-ee1d33fa.js"></script><script src="codemirror/edit.js"></script> <!-- codemirror-edit -->
-    <script src="vendor/codemirror/mode/css/css.js"></script>
-    <script src="vendor/codemirror/mode/stylus/stylus.js"></script>
-    <script src="vendor/codemirror/addon/dialog/dialog.js"></script>
-    <script src="vendor/codemirror/addon/edit/closebrackets.js"></script>
-    <script src="vendor/codemirror/addon/scroll/annotatescrollbar.js"></script>
-    <script src="vendor/codemirror/addon/search/searchcursor.js"></script>
-    <script src="vendor/codemirror/addon/search/matchesonscrollbar.js"></script>
-    <script src="vendor/codemirror/addon/comment/comment.js"></script>
-    <script src="vendor/codemirror/addon/selection/active-line.js"></script>
-    <script src="vendor/codemirror/addon/edit/matchbrackets.js"></script>
-    <script src="vendor/codemirror/addon/fold/foldcode.js"></script>
-    <script src="vendor/codemirror/addon/fold/foldgutter.js"></script>
-    <script src="vendor/codemirror/addon/fold/brace-fold.js"></script>
-    <script src="vendor/codemirror/addon/fold/indent-fold.js"></script>
-    <script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
-    <script src="vendor/codemirror/addon/lint/lint.js"></script>
-    <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
-    <script src="vendor/codemirror/addon/hint/css-hint.js"></script>
-    <script src="vendor/codemirror/keymap/sublime.js"></script>
     <script src="vendor-overwrites/codemirror-addon/match-highlighter.js"></script>
     <script src="vendor/lz-string-unsafe/lz-string-unsafe.min.js"></script>
 

dist/install-usercss/install-usercss.js

@@ -37,19 +37,12 @@ setTimeout(() => !cm && showSpinner($('#header')), 200);
   if (theme !== 'default') {
     require([`/vendor/codemirror/theme/${theme}.css`]); // not awaiting as it may be absent
   }
-  const scriptsReady = require([
+  const scriptsReady = requireOrdered(
-    '/vendor/codemirror/lib/codemirror', /* global CodeMirror */
+    /* global CodeMirror */
-  ]).then(() => require([
+["/chunks/annotatescrollbar-ee1d33fa.js","/codemirror/base.js"] // codemirror-base
-    '/vendor/codemirror/keymap/sublime',
+  ).then(() => require([
     '/vendor/codemirror/keymap/emacs',
     '/vendor/codemirror/keymap/vim', // TODO: load conditionally
-    '/vendor/codemirror/mode/css/css',
-    '/vendor/codemirror/addon/search/searchcursor',
-    '/vendor/codemirror/addon/fold/foldcode',
-    '/vendor/codemirror/addon/fold/foldgutter',
-    '/vendor/codemirror/addon/fold/brace-fold',
-    '/vendor/codemirror/addon/fold/indent-fold',
-    '/vendor/codemirror/addon/selection/active-line',
     '/vendor/codemirror/lib/codemirror.css',
     '/vendor/codemirror/addon/fold/foldgutter.css',
     '/js/cmpver', /* global compareVersion */

dist/js/polyfill.js

@@ -100,6 +100,12 @@
     return all[0];
   };
 
+  window.requireOrdered = async ids => {
+    for (const id of ids) {
+      await require([id]);
+    }
+  };
+
   if (!(new URLSearchParams({foo: 1})).get('foo')) {
     // TODO: remove when minimum_chrome_version >= 61
     window.URLSearchParams = class extends URLSearchParams {

package.json

@@ -20,20 +20,29 @@
     "webext-launch-web-auth-flow": "^0.1.1"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "archiver": "^4.0.1",
     "endent": "^1.4.0",
+    "escape-string-regexp": "^5.0.0",
     "eslint": "^7.20.0",
     "fs-extra": "^9.0.0",
     "make-fetch-happen": "^8.0.7",
+    "rollup": "^2.61.1",
+    "rollup-plugin-cjs-es": "^1.0.1",
+    "rollup-plugin-iife": "^0.5.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-write-output": "^0.1.1",
     "sync-version": "^1.0.1",
     "tiny-glob": "^0.2.6",
     "web-ext": "^6.5.0"
   },
   "scripts": {
-    "lint": "eslint \"**/*.js\" --cache",
+    "lint": "eslint . --ext .js,.mjs --cache",
+    "lint-fix": "eslint . --ext .js,.mjs --fix",
     "test": "node tools/test.js && npm run lint",
     "update-locales": "tx pull --all && node tools/fix-transifex.js",
     "update-transifex": "tx push -s",
+    "build": "rollup -c",
     "build-vendor": "node tools/build-vendor",
     "zip": "npm test && node tools/zip.js",
     "start": "web-ext run",
@@ -44,5 +53,8 @@
   },
   "engines": {
     "node": ">=10.0.0"
+  },
+  "webExt": {
+    "sourceDir": "dist"
   }
 }

rollup.config.mjs

@@ -0,0 +1,49 @@
+import cjs from "rollup-plugin-cjs-es";
+import resolve from "@rollup/plugin-node-resolve";
+import iife from "rollup-plugin-iife";
+import { terser } from "rollup-plugin-terser";
+import output from "rollup-plugin-write-output";
+
+import escapeRe from 'escape-string-regexp';
+
+export default {
+  input: {
+    "codemirror/base": "src/codemirror/base.mjs",
+    "codemirror/edit": "src/codemirror/edit.mjs"
+  },
+  output: {
+    dir: "dist",
+    chunkFileNames: 'chunks/[name]-[hash].js'
+  },
+  plugins: [
+    resolve(),
+    cjs({nested: true}),
+    iife(),
+    terser({module: false}),
+    output([
+      {
+        test: /codemirror\/edit\.js/,
+        target: 'dist/edit.html',
+        handle: (content, {htmlScripts}) => replaceLine(content, '<!-- codemirror-edit -->', htmlScripts)
+      },
+      {
+        test: /codemirror\/base\.js/,
+        target: 'dist/install-usercss/install-usercss.js',
+        handle: (content, {scripts}) => replaceLine(content, '// codemirror-base',
+          JSON.stringify(scripts.map(resolvePath('/install-usercss/install-usercss.js'))))
+      }
+    ])
+  ]
+};
+
+function resolvePath(base) {
+  return id => {
+    const isAbs = base.startsWith('/');
+    const u = new URL(id, `http://dummy${isAbs ? '' : '/'}${base}`);
+    return isAbs ? u.pathname : u.pathname.slice(1);
+  };
+}
+
+function replaceLine(content, marker, repl) {
+  return content.replace(new RegExp(`.*${escapeRe(marker)}`), `${repl} ${marker}`);
+}

src/codemirror/base.mjs

@@ -0,0 +1,14 @@
+import CodeMirror from "codemirror/lib/codemirror.js";
+import "codemirror/mode/css/css.js";
+import "codemirror/keymap/sublime.js";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import "codemirror/addon/selection/active-line.js";
+
+window.CodeMirror = CodeMirror;
+

src/codemirror/edit.mjs

@@ -0,0 +1,9 @@
+import "codemirror/mode/stylus/stylus.js";
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/comment/comment.js";
+import "codemirror/addon/edit/closebrackets.js";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/lint/lint.js";
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/hint/css-hint.js";

tools/build-vendor.js

@@ -65,22 +65,22 @@ const files = {
 main().catch(console.error);
 
 async function main() {
-  fse.emptyDirSync('vendor');
+  fse.emptyDirSync('dist/vendor');
   for (const pkg in files) {
     console.log('\x1b[32m%s\x1b[0m', `Building ${pkg}...`);
     // other files
     const [fetched, copied] = await buildFiles(pkg, files[pkg]);
     // README
-    await fse.outputFile(`vendor/${pkg}/README.md`, generateReadme(pkg, fetched, copied));
+    await fse.outputFile(`dist/vendor/${pkg}/README.md`, generateReadme(pkg, fetched, copied));
     // LICENSE
     await copyLicense(pkg);
   }
   console.log('\x1b[32m%s\x1b[0m', 'updating codemirror themes list...');
-  await fse.outputFile('edit/codemirror-themes.js', await generateThemeList());
+  await fse.outputFile('dist/edit/codemirror-themes.js', await generateThemeList());
 }
 
 async function generateThemeList() {
-  const themes = (await fse.readdir('vendor/codemirror/theme'))
+  const themes = (await fse.readdir('dist/vendor/codemirror/theme'))
     .filter(name => name.endsWith('.css'))
     .map(name => name.replace('.css', ''))
     .sort();
@@ -98,13 +98,13 @@ async function generateThemeList() {
 
 async function copyLicense(pkg) {
   try {
-    await fse.access(`vendor/${pkg}/LICENSE`);
+    await fse.access(`dist/vendor/${pkg}/LICENSE`);
     return;
   } catch (err) {
     // pass
   }
   for (const file of await glob(`node_modules/${pkg}/LICEN[SC]E*`)) {
-    await fse.copy(file, `vendor/${pkg}/LICENSE`);
+    await fse.copy(file, `dist/vendor/${pkg}/LICENSE`);
     return;
   }
   throw new Error(`cannot find license file for ${pkg}`);
@@ -118,15 +118,15 @@ async function buildFiles(pkg, patterns) {
     const [src, dest] = pattern.split(/\s*→\s*/);
     if (src.startsWith('http')) {
       const content = await (await fetch(src)).text();
-      await fse.outputFile(`vendor/${pkg}/${dest}`, content);
+      await fse.outputFile(`dist/vendor/${pkg}/${dest}`, content);
       fetchedFiles.push([src, dest]);
     } else {
       let dirty = false;
       for (const file of await glob(`node_modules/${pkg}/${src}`)) {
         if (dest) {
-          await fse.copy(file, `vendor/${pkg}/${dest}`);
+          await fse.copy(file, `dist/vendor/${pkg}/${dest}`);
         } else {
-          await fse.copy(file, path.join('vendor', path.relative('node_modules', file)));
+          await fse.copy(file, path.join('dist/vendor', path.relative('node_modules', file)));
         }
         copiedFiles.push([path.relative(`node_modules/${pkg}`, file), dest]);
         dirty = true;

tools/chrome-api-no-cb.js

@@ -5,7 +5,7 @@
 */
 'use strict';
 
-const manifest = require('../manifest.json');
+const manifest = require('../dist/manifest.json');
 const fetch = require('make-fetch-happen');
 
 (async () => {

tools/fix-transifex.js

@@ -3,7 +3,7 @@
 const fs = require('fs');
 const fse = require('fs-extra');
 
-const DIR = '_locales/';
+const DIR = 'dist/_locales/';
 const RX_LNG_CODE = /^\w\w(_\w{2,3})?$/; // like `en` or `en_GB`
 
 const makeFileName = lng => `${DIR}${lng}/messages.json`;

tools/test.js

@@ -5,7 +5,7 @@ const fs = require('fs');
 testGlobalCss();
 
 function testGlobalCss() {
-  const css = fs.readFileSync('global.css', {encoding: 'utf8'});
+  const css = fs.readFileSync('dist/global.css', {encoding: 'utf8'});
   const ERR = 'global.css: missing the transition suppressor rule';
   const RX_SUPPRESSOR = /[^{}]+#\\1\s?transition-suppressor[^{}]+{\s*transition:\s*none\s*!\s*important/i;
   const RX_COMMENT = /\/\*([^*]|\*(?!\/))*(\*\/|$)/g;

tools/zip.js

@@ -37,7 +37,7 @@ function createZip() {
     });
 
     archive.pipe(file);
-    archive.glob('**', {ignore});
+    archive.glob('dist/**', {ignore});
     archive.finalize();
   });
 }