Merge pull request #302 from aminya/rollup

Rollup - improve loading time

.gitattributes

@@ -0,0 +1,5 @@
+* text=auto
+
+# don't diff machine generated files
+dist/ -diff
+package-lock.json -diff

.github/workflows/ci.yml

@@ -27,6 +27,8 @@ jobs:
       - name: Install APM dependencies
         run: |
           apm ci  # uses locked module. use `apm install` for non-locked
+      - name: Build
+        run: npm run build
       - name: Run tests 👩🏾‍💻
         run: npm run test
 

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 npm-debug.log
 node_modules
+dist

babel.config.js

@@ -0,0 +1,20 @@
+let presets = [
+    ["@babel/preset-env", {
+        targets: {
+            "electron": 5
+        }
+    }]
+];
+
+let plugins = ["@babel/plugin-proposal-optional-chaining"];
+
+if (process.env.BABEL_ENV === "development") {
+    plugins.push("@babel/plugin-transform-modules-commonjs");
+}
+
+module.exports = {
+    presets: presets,
+    plugins: plugins,
+    exclude: "node_modules/**",
+    sourceMaps: "inline"
+};

iconsets/rollup-iconsets.js

@@ -0,0 +1,7 @@
+// This file is the entry file for iconsets rollup
+import "./ionicons/ionicons.css";
+import "./font-awesome/font-awesome.css";
+import "./foundation/foundation-icons.css";
+import "./icomoon/icomoon.css";
+import "./devicon/devicon.css";
+import "./mdi/materialdesignicons.css";

lib/items/tool-bar-button-view.js

@@ -1,5 +1,5 @@
-const {CompositeDisposable} = require('atom');
-const { ToolBarItem } = require('./tool-bar-item');
+import {CompositeDisposable} from 'atom';
+import { ToolBarItem } from './tool-bar-item';
 
 /**
  * A button class with many options
@@ -12,9 +12,8 @@ const { ToolBarItem } = require('./tool-bar-item');
  * @property {boolean} enabled
  * @property {CompositeDisposable} subscriptions
  */
-class ToolBarButtonView extends ToolBarItem {
+export class ToolBarButtonView extends ToolBarItem {
   /**
-   *
    * @param {ButtonOptions} options
    * @param {string} group
    */
@@ -238,5 +237,3 @@ function getTooltipPlacement () {
   const toolbarPosition = atom.config.get('tool-bar.position');
   return tooltipPlacement[toolbarPosition] || null;
 }
-
-module.exports.ToolBarButtonView = ToolBarButtonView;

lib/items/tool-bar-item.js

@@ -5,7 +5,7 @@
  * @property {number} priority
  * @property {string} group
  */
-class ToolBarItem {
+export class ToolBarItem {
   /**
    * @param {ItemOptions} options
    * @param {string} group
@@ -24,5 +24,3 @@ class ToolBarItem {
     this.element = null;
   }
 }
-
-module.exports.ToolBarItem = ToolBarItem;

lib/items/tool-bar-spacer-view.js

@@ -1,6 +1,6 @@
-const { ToolBarItem } = require('./tool-bar-item');
+import { ToolBarItem } from './tool-bar-item';
 
-class ToolBarSpacerView extends ToolBarItem {
+export class ToolBarSpacerView extends ToolBarItem {
   constructor (options, group) {
     // first calling the super (ToolBarItem) constructor
     super({
@@ -15,5 +15,3 @@ class ToolBarSpacerView extends ToolBarItem {
     this.element.classList.add(...classNames);
   }
 }
-
-module.exports.ToolBarSpacerView = ToolBarSpacerView;

lib/raf-debounce.js

@@ -1,4 +1,4 @@
-module.exports = function rafDebounce (fn) {
+export function rafDebounce (fn) {
   let args, context, requestID;
 
   function later () {
@@ -22,4 +22,4 @@ module.exports = function rafDebounce (fn) {
   };
 
   return debounced;
-};
+}

lib/tool-bar-manager.js

@@ -1,16 +1,15 @@
-const { ToolBarItem } = require('./items/tool-bar-item');
-const { ToolBarButtonView } = require('./items/tool-bar-button-view');
-const { ToolBarSpacerView } = require('./items/tool-bar-spacer-view');
+import { ToolBarItem } from './items/tool-bar-item';
+import { ToolBarButtonView } from './items/tool-bar-button-view';
+import { ToolBarSpacerView } from './items/tool-bar-spacer-view';
 
 /**
  *
  * @property {string} group
  * @property {ToolBarView} toolBarView
  * @property {TouchBarManager} touchBarManager
  */
-class ToolBarManager {
+export class ToolBarManager {
   /**
-   *
    * @param {string} group
    * @param {ToolBarView} toolBarView
    * @param {TouchBarManager} touchBarManager
@@ -28,7 +27,7 @@ class ToolBarManager {
   addItem (options) {
     const item = new ToolBarItem(options, this.group);
     this.toolBarView.addItem(item);
-    // this.touchBarManager.addItem(item); // TODO
+    // this.touchBarManager?.addItem(item); // TODO
     return item;
   }
 
@@ -39,7 +38,7 @@ class ToolBarManager {
   addButton (options) {
     const button = new ToolBarButtonView(options, this.group);
     this.toolBarView.addItem(button);
-    this.touchBarManager.addButton(button);
+    this.touchBarManager?.addButton(button);
     return button;
   }
 
@@ -62,7 +61,7 @@ class ToolBarManager {
       this.toolBarView.items
         .filter(item => item.group === this.group)
         .forEach(item => this.toolBarView.removeItem(item));
-      this.touchBarManager.removeGroup(this.group);
+      this.touchBarManager?.removeGroup(this.group);
     }
   }
 
@@ -73,6 +72,4 @@ class ToolBarManager {
   onDidDestroy (callback) {
     this.toolBarView.emitter.on('did-destroy', callback);
   }
-};
-
-module.exports.ToolBarManager = ToolBarManager;
+}

lib/tool-bar-view.js

@@ -1,9 +1,8 @@
-const {CompositeDisposable, Emitter} = require('atom');
-const rafDebounce = require('./raf-debounce');
+import {CompositeDisposable, Emitter} from 'atom';
+import {rafDebounce} from './raf-debounce';
+import {useGutter} from './tool-bar.js'
 
-const {useGutter} = require('./tool-bar.js')
-
-module.exports = class ToolBarView {
+export class ToolBarView {
   constructor () {
     this.element = document.createElement('div');
     this.element.classList.add('tool-bar');
@@ -12,20 +11,12 @@ module.exports = class ToolBarView {
     this.subscriptions = new CompositeDisposable();
 
     this.subscriptions.add(
-      atom.commands.add('atom-workspace', 'tool-bar:toggle', () => {
-        this.toggle();
-      }),
-      atom.commands.add('atom-workspace', 'tool-bar:position-top', () => {
-        this.updatePosition('Top');
-      }),
-      atom.commands.add('atom-workspace', 'tool-bar:position-right', () => {
-        this.updatePosition('Right');
-      }),
-      atom.commands.add('atom-workspace', 'tool-bar:position-bottom', () => {
-        this.updatePosition('Bottom');
-      }),
-      atom.commands.add('atom-workspace', 'tool-bar:position-left', () => {
-        this.updatePosition('Left');
+      atom.commands.add("atom-workspace", {
+        'tool-bar:toggle': () => this.toggle(),
+        'tool-bar:position-top': () => this.updatePosition('Top'),
+        'tool-bar:position-right': () => this.updatePosition('Right'),
+        'tool-bar:position-bottom': () => this.updatePosition('Bottom'),
+        'tool-bar:position-left': () => this.updatePosition('Left'),
       }),
       atom.config.observe('tool-bar.iconSize', newValue => {
         this.updateSize(newValue);
@@ -174,7 +165,7 @@ module.exports = class ToolBarView {
 
   drawGutter () {
     if (!useGutter) {return;}
-    
+
     this.element.classList.remove('gutter-top', 'gutter-bottom');
 
     const visibleHeight = this.element.offsetHeight;
@@ -216,4 +207,4 @@ module.exports = class ToolBarView {
   toggle () {
     atom.config.set('tool-bar.visible', !atom.config.get('tool-bar.visible'));
   }
-};
+}

lib/tool-bar.js

@@ -1,31 +1,36 @@
-const { ToolBarManager } = require('./tool-bar-manager');
-const ToolBarView = require('./tool-bar-view');
-const TouchBarManager = require('./touch-bar-manager');
+import {ToolBarManager} from './tool-bar-manager';
+import {ToolBarView} from './tool-bar-view';
 
 let toolBarView = null;
 let touchBarManager = null;
 
-let useGutter = false;
-exports.useGutter = useGutter;
+export let useGutter = false;
 
-exports.activate = function () {
+export function activate() {
   toolBarView = new ToolBarView();
-  touchBarManager = new TouchBarManager();
-  useGutter = atom.config.get('tool-bar.useGutter')
-};
+  useTouchBar();
+  useGutter = atom.config.get('tool-bar.useGutter');
+}
+
+async function useTouchBar() {
+  if (atom.config.get('tool-bar.useTouchBar') && process.platform === 'darwin') {
+    let TouchBarManager = await import('./touch-bar-manager');
+    touchBarManager = new TouchBarManager();
+  }
+}
 
-exports.deactivate = function () {
+export function deactivate() {
   toolBarView.destroy();
   toolBarView = null;
   touchBarManager.destroy();
   touchBarManager = null;
-};
+}
 
-exports.provideToolBar = function provideToolBar () {
+export function provideToolBar () {
   return (group) => new ToolBarManager(group, toolBarView, touchBarManager);
-};
+}
 
-exports.config = {
+export const config = {
   visible: {
     type: 'boolean',
     default: true,

lib/touch-bar-manager.js

@@ -1,7 +1,8 @@
-const {TouchBar, nativeImage} = require('electron').remote;
+import {remote} from 'electron';
+const {TouchBar, nativeImage} = remote;
 const {TouchBarButton} = TouchBar;
 
-module.exports = class TouchBarManager {
+export class TouchBarManager {
   constructor () {
     this.buttons = [];
   }
@@ -12,7 +13,6 @@ module.exports = class TouchBarManager {
   }
 
   addButton (button) {
-    if (!this._useTouchBar()) return;
     if (this.buttons.length >= 7) return;
 
     this._renderButton(button).then(icon => {
@@ -32,8 +32,6 @@ module.exports = class TouchBarManager {
   }
 
   update () {
-    if (!this._useTouchBar()) return;
-
     if (this._updateDebounce) clearTimeout(this._updateDebounce);
     this._updateDebounce = setTimeout(() => this._setTouchBar(), 100);
   }
@@ -42,11 +40,7 @@ module.exports = class TouchBarManager {
     this.buttons = this.buttons.filter(button => button.group !== group);
     this.update();
   }
-
-  _useTouchBar () {
-    return process.platform === 'darwin' && atom.config.get('tool-bar.useTouchBar');
-  }
-
+
   _renderButton (button) {
     return document.fonts.ready.then(() => {
       if (!(button.element instanceof HTMLElement)) return;
@@ -86,4 +80,4 @@ module.exports = class TouchBarManager {
     atom.getCurrentWindow().setTouchBar(touchBar);
     this._updateDebounce = null;
   }
-};
+}