WIP webpack (done splitting common chunk) v2

openstyles · tophf · Sep 30, 2024 · Sep 29, 2024 · Oct 1, 2024 · Oct 1, 2024
commit 6e272f1c478f2e441dbc17d7e3d0a37549e7bcc8
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -46,8 +46,8 @@ const PLUGINS = [
   alias({
     entries: [
       {find: /^\//, replacement: path.resolve('src') + '/'},
-      {find: './fs-drive', replacement: SHIM + 'empty.js'},
-      {find: 'fs', replacement: SHIM + 'empty.js'},
+      {find: './fs-drive', replacement: SHIM + 'null.js'},
+      {find: 'fs', replacement: SHIM + 'null.js'},
       {find: 'path', replacement: SHIM + 'path.js'},
       {find: 'url', replacement: SHIM + 'url.js'},
     ],

diff --git a/src/edit/linter-dialogs.js b/src/edit/linter-dialogs.js
@@ -24,6 +24,7 @@ async function showLintConfig() {
   if (!linter) {
     return;
   }
+  // TODO: replace with JSON.parse()
   await import('/js/jsonlint-bundle');
   const config = await chromeSync.getLZValue(chromeSync.LZ_KEY[linter]);
   const title = t('linterConfigPopupTitle', isStylelint ? 'Stylelint' : 'CSSLint');

diff --git a/src/install-usercss/index.js b/src/install-usercss/index.js
@@ -1,8 +1,9 @@
 import {CodeMirror} from '/edit/codemirror-default';
 import CODEMIRROR_THEMES from '/edit/codemirror-themes';
 import compareVersion from '/js/cmpver';
-import {configDialog, messageBox} from '/js/dlg';
-import {$, $$, $$remove, $create, $createLink, showSpinner} from '/js/dom';
+import {
+  $, $$, $$remove, $create, $createLink, configDialog, messageBox, showSpinner,
+} from '/js/dom';
 import {t} from '/js/localization';
 import {API} from '/js/msg';
 import * as prefs from '/js/prefs';

diff --git a/src/js/dlg/config-dialog.js b/src/js/dlg/config-dialog.js
@@ -1,15 +1,13 @@
 import ColorPicker from '/js/color/color-picker';
-import {$, $create, $createLink, $remove, important, setupLivePrefs} from '/js/dom';
+import {$, $create, $createLink, $remove, important, messageBox, setupLivePrefs} from '/js/dom';
 import {t} from '/js/localization';
 import {API} from '/js/msg';
 import * as prefs from '/js/prefs';
 import {clamp, debounce, deepCopy, UA, UCD} from '/js/toolbox';
-import '/js/color/color-converter';
-import {messageBox} from './message-box';
 import './config-dialog.css';
 import '/options/onoffswitch.css';
 
-export function configDialog(style) {
+export default function configDialog(style) {
   const AUTOSAVE_DELAY = 400;
   let saving = false;
   let bodyStyle;

diff --git a/src/js/dlg/index.js b/src/js/dlg/index.js
diff --git a/src/js/dlg/message-box.js b/src/js/dlg/message-box.js
@@ -4,13 +4,14 @@ import {clamp} from '/js/toolbox';
 import './message-box.css';
 
 // TODO: convert this singleton mess so we can show many boxes at once
-export const messageBox = {
+const messageBox = {
   element: null,
   listeners: null,
   _blockScroll: null,
   _originalFocus: null,
   _resolve: null,
 };
+export default messageBox;
 
 messageBox.close = async isAnimated => {
   window.off('keydown', messageBox.listeners.key, true);

diff --git a/src/js/dom-util.js b/src/js/dom-util.js
@@ -2,9 +2,13 @@ import {$, $$, $create, focusA11y, toggleDataset} from './dom-base';
 import * as prefs from './prefs';
 import '/css/spinner.css';
 
+export let configDialog = async (...args) => (
+  configDialog = (await import('/js/dlg/config-dialog')).default
+)(...args);
+
 export let messageBox = new Proxy({}, {
   get: (_, key) => async (...args) => (
-    messageBox = (await import('/js/dlg')).messageBox
+    messageBox = (await import('/js/dlg/message-box')).default
   )[key](...args),
 });
 

diff --git a/src/manage/events.js b/src/manage/events.js
@@ -1,4 +1,4 @@
-import {messageBox} from '/js/dom';
+import {configDialog, messageBox} from '/js/dom';
 /* global sorter */
 import {t} from '/js/localization';
 import {API} from '/js/msg';
@@ -41,8 +41,8 @@ const Events = {
     checkUpdate(entry, {single: true});
   },
 
-  async config(event, {styleMeta}) {
-    (await import('/js/dlg')).configDialog(styleMeta);
+  config(event, {styleMeta}) {
+    configDialog(styleMeta);
   },
 
   async delete(event, entry) {

diff --git a/src/popup/events.js b/src/popup/events.js
@@ -1,4 +1,4 @@
-import {$, $$, $remove, getEventKeyName, moveFocus} from '/js/dom';
+import {$, $$, $remove, configDialog, getEventKeyName, moveFocus} from '/js/dom';
 import {t} from '/js/localization';
 import {API} from '/js/msg';
 import {getActiveTab} from '/js/toolbox';
@@ -10,8 +10,7 @@ const menuExclusions = [];
 
 export function configure(event, entry) {
   if (!this.target) {
-    const styleP = API.styles.get(entry.styleId);
-    hotkeys.pause(async () => (await import('/js/dlg')).configDialog(await styleP));
+    hotkeys.pause(async () => configDialog(await API.styles.get(entry.styleId)));
   } else {
     openURLandHide.call(this, event);
   }

diff --git a/tools/shim/empty.js b/tools/shim/empty.js
diff --git a/tools/shim/null-loader.js b/tools/shim/null-loader.js
@@ -0,0 +1,3 @@
+export default function () {
+  return 'module.exports = null';
+}
diff --git a/tools/shim/null.js b/tools/shim/null.js
@@ -0,0 +1 @@
+export default null;
diff --git a/tools/util.js b/tools/util.js
@@ -38,11 +38,11 @@ function listCodeMirrorThemes() {
     .filter(Boolean);
 }
 
-function stripSourceMap(isDev, buf, from) {
+function stripSourceMap(buf, from) {
   const str = buf.toString();
   const map = from + '.map';
   const res = str.replace(/(\r?\n\/\/# sourceMappingURL=).+/,
-    !isDev || !fs.existsSync(map) ? '' :
+    process.env.NODE_ENV !== 'DEV' || !fs.existsSync(map) ? '' :
       '$1data:application/json;charset=utf-8;base64,' +
       fs.readFileSync(map).toString('base64'));
   return Buffer.from(res);

diff --git a/webpack.config.js b/webpack.config.js
@@ -45,8 +45,7 @@ const CFG = {
       '/': SRC,
     },
     fallback: {
-      './fs-drive': SHIM + 'empty.js',
-      'fs': SHIM + 'empty.js',
+      'fs': SHIM + 'null.js',
       'path': SHIM + 'path.js',
       'url': SHIM + 'url.js',
     },
@@ -91,6 +90,10 @@ const CFG = {
         use: {loader: 'babel-loader'},
         resolve: {fullySpecified: false},
       },
+      {
+        test: require.resolve('db-to-cloud/lib/drive/fs-drive'),
+        use: [{loader: SHIM + 'null-loader.js'}],
+      },
     ],
   },
   node: false,
@@ -114,7 +117,8 @@ const CFG = {
         ].map(([npm, to]) => ({
           from: require.resolve(npm),
           to: DST + JS + to,
-          transform: stripSourceMap.bind(null, DEV),
+          info: {minimized: true},
+          transform: stripSourceMap,
         })),
       ],
     }),
@@ -200,7 +204,6 @@ module.exports = [
             name: 'codemirror',
           },
           ...Object.fromEntries([
-            [2, 'common-ui2', `^${SRC}js/(color|dlg)/`],
             [2, 'common-ui', `^${SRC}(content/|js/(dom|localization|themer))`],
             [1, 'common', `^${SRC}js/|/lz-string(-unsafe)?/`],
           ].map(([priority, name, test]) => [name, {
@@ -240,6 +243,12 @@ module.exports = [
         reportFilename: DST + '.report.html',
       }),
     ],
+    resolve: {
+      modules: [
+        SHIM,
+        'node_modules',
+      ],
+    },
   }),
   // makeLibrary('/content/apply.js'),
   // makeLibrary([