Fix: output codemirror themes to a separated file (#538)

edit.html

@@ -92,6 +92,7 @@
     <script src="edit/beautify.js"></script>
     <script src="edit/show-keymap-help.js"></script>
     <script src="edit/refresh-on-view.js"></script>
+    <script src="edit/codemirror-themes.js"></script>
 
     <script src="edit/source-editor.js"></script>
     <script src="edit/sections-editor-section.js"></script>

edit/codemirror-themes.js

@@ -0,0 +1,61 @@
+/* exported CODEMIRROR_THEMES */
+// this file is generated by update-codemirror-themes.js
+'use strict';
+
+const CODEMIRROR_THEMES = [
+  '3024-day',
+  '3024-night',
+  'abcdef',
+  'ambiance',
+  'ambiance-mobile',
+  'base16-dark',
+  'base16-light',
+  'bespin',
+  'blackboard',
+  'cobalt',
+  'colorforth',
+  'darcula',
+  'dracula',
+  'duotone-dark',
+  'duotone-light',
+  'eclipse',
+  'elegant',
+  'erlang-dark',
+  'gruvbox-dark',
+  'hopscotch',
+  'icecoder',
+  'idea',
+  'isotope',
+  'lesser-dark',
+  'liquibyte',
+  'lucario',
+  'material',
+  'mbo',
+  'mdn-like',
+  'midnight',
+  'monokai',
+  'neat',
+  'neo',
+  'night',
+  'oceanic-next',
+  'panda-syntax',
+  'paraiso-dark',
+  'paraiso-light',
+  'pastel-on-dark',
+  'railscasts',
+  'rubyblue',
+  'seti',
+  'shadowfox',
+  'solarized',
+  'ssms',
+  'the-matrix',
+  'tomorrow-night-bright',
+  'tomorrow-night-eighties',
+  'ttcn',
+  'twilight',
+  'vibrant-ink',
+  'xq-dark',
+  'xq-light',
+  'yeti',
+  'zenburn'
+];

edit/edit.js

@@ -2,7 +2,7 @@
   createSourceEditor queryTabs sessionStorageHash getOwnTab FIREFOX API tryCatch
   closeCurrentTab messageBox debounce workerUtil
   beautify ignoreChromeError
-  moveFocus msg createSectionsEditor rerouteHotkeys */
+  moveFocus msg createSectionsEditor rerouteHotkeys CODEMIRROR_THEMES */
 /* exported showCodeMirrorPopup editorWorker toggleContextMenuDelete */
 'use strict';
 
@@ -46,63 +46,7 @@ preinit();
     if (!chrome.runtime.getPackageDirectoryEntry) {
       const themes = [
         chrome.i18n.getMessage('defaultTheme'),
-        /* populate-theme-start */
+        ...CODEMIRROR_THEMES
-        '3024-day',
-        '3024-night',
-        'abcdef',
-        'ambiance',
-        'ambiance-mobile',
-        'base16-dark',
-        'base16-light',
-        'bespin',
-        'blackboard',
-        'cobalt',
-        'colorforth',
-        'darcula',
-        'dracula',
-        'duotone-dark',
-        'duotone-light',
-        'eclipse',
-        'elegant',
-        'erlang-dark',
-        'gruvbox-dark',
-        'hopscotch',
-        'icecoder',
-        'idea',
-        'isotope',
-        'lesser-dark',
-        'liquibyte',
-        'lucario',
-        'material',
-        'mbo',
-        'mdn-like',
-        'midnight',
-        'monokai',
-        'neat',
-        'neo',
-        'night',
-        'oceanic-next',
-        'panda-syntax',
-        'paraiso-dark',
-        'paraiso-light',
-        'pastel-on-dark',
-        'railscasts',
-        'rubyblue',
-        'seti',
-        'shadowfox',
-        'solarized',
-        'ssms',
-        'the-matrix',
-        'tomorrow-night-bright',
-        'tomorrow-night-eighties',
-        'ttcn',
-        'twilight',
-        'vibrant-ink',
-        'xq-dark',
-        'xq-light',
-        'yeti',
-        'zenburn',
-        /* populate-theme-end */
       ];
       localStorage.codeMirrorThemes = themes.join(' ');
       return Promise.resolve(themes);

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "archiver": "^3.0.0",
     "codemirror": "^5.41.0",
+    "endent": "^1.2.0",
     "eslint": "^5.8.0",
     "fs-extra": "^7.0.0",
     "jsonlint": "^1.6.3",
@@ -18,8 +19,8 @@
     "stylelint-bundle": "^8.0.0",
     "stylus-lang-bundle": "^0.54.5",
     "updates": "^5.1.2",
-    "web-ext": "^2.9.1",
     "usercss-meta": "^0.8.1",
+    "web-ext": "^2.9.1",
     "webext-tx-fix": "^0.3.1"
   },
   "scripts": {

tools/update-codemirror-themes.js

@@ -3,6 +3,7 @@
 
 const fs = require('fs-extra');
 const path = require('path');
+const endent = require('endent');
 
 // Update theme names list in codemirror-editing-hook.js
 async function getThemes() {
@@ -14,21 +15,15 @@ async function getThemes() {
     .sort();
 }
 
-function replaceThemes(content, themes) {
-  const lineFeed = content.includes('\r\n') ? '\r\n' : '\n';
-  return content.replace(
-    /(\x20+)(\/\*\s*populate-theme-start\s*\*\/)[\s\S]+?(\/\*\s*populate-theme-end\s*\*\/)/,
-    (_, indent, intro, outro) =>
-      indent + intro + lineFeed +
-      themes.map(_ => `${indent}'${_}',`).join(lineFeed) + lineFeed +
-      indent + outro
-  );
-}
-
 async function updateHook(themes) {
-  const fileName = path.join(__dirname, '..', 'edit/codemirror-editing-hooks.js');
+  const fileName = path.join(__dirname, '..', 'edit/codemirror-themes.js');
-  const content = await fs.readFile(fileName, 'utf-8');
+  fs.writeFile(fileName, endent`
-  fs.writeFile(fileName, replaceThemes(content, themes));
+    /* exported CODEMIRROR_THEMES */
+    // this file is generated by update-codemirror-themes.js
+    'use strict';
+
+    const CODEMIRROR_THEMES = ${JSON.stringify(themes, null, 2)};
+  `.replace(/"/g, "'") + '\n');
 }
 
 function exit(err) {