ES6 classes, stricter checks

src/app/Action/ActionBar.js

@@ -1,10 +1,9 @@
-const { ReliefStyle } = imports.gi.Gtk;
+const { Box, Button, ReliefStyle, VSeparator } = imports.gi.Gtk;
 const Component = require("inferno-component").default;
-const h = require("inferno-hyperscript").default;
 const { connect } = require("inferno-mobx");
 const { autoBind } = require("../Gjs/autoBind");
-const ActionBarRm = require("./ActionBarRm").default;
-const { ActionService } = require("./ActionService");
+const { h } = require("../Gjs/GtkInferno");
+const ActionBarItem = require("./ActionBarItem").default;
 
 const actions = [
   { id: "cursorService.view", label: "View", shortcut: "F3" },
@@ -16,42 +15,24 @@ const actions = [
   { id: "windowService.exit", label: "Exit", shortcut: "Alt+F4" },
 ];
 
-/**
- * @typedef IProps
- * @property {ActionService} actionService
- *
- * @param {IProps} props
- */
-function ActionBar(props) {
-  Component.call(this, props);
-  autoBind(this, ActionBar.prototype, __filename);
-}
-
-ActionBar.prototype = Object.create(Component.prototype);
-
-/**
- * @type {IProps}
- */
-ActionBar.prototype.props = undefined;
+class ActionBar extends Component {
+  constructor() {
+    super();
+    autoBind(this, ActionBar.prototype, __filename);
+  }
 
-ActionBar.prototype.render = function() {
-  return (
-    h("box", { expand: false }, actions.reduce((prev, action) => prev.concat([
-      action.id === "rm" ? h(ActionBarRm, {
+  render() {
+    return (
+      h(Box, { expand: false }, actions.reduce((prev, action) => prev.concat([
+        h(ActionBarItem, {
+          action,
           key: action.id,
-          label: action.shortcut + " " + action.label,
-        }) : h("button", {
-          can_focus: false,
-          expand: true,
-          key: action.id,
-          label: action.shortcut + " " + action.label,
-          on_pressed: this.props.actionService.get(action.id).handler,
-          relief: ReliefStyle.NONE,
         }),
-      h("v-separator", { key: action.id + "+" }),
-    ]), []))
-  );
-};
+
+        h(VSeparator, { key: action.id + "+" }),
+      ]), /** @type {any[]} */ ([])))
+    );
+  }
+}
 
 exports.ActionBar = ActionBar;
-exports.default = connect(["actionService"])(ActionBar);

src/app/Action/ActionBar.test.js

@@ -1,21 +1,7 @@
-const expect = require("expect");
-const h = require("inferno-hyperscript").default;
-const { find, shallow } = require("../Test/Test");
 const { ActionBar } = require("./ActionBar");
 
 describe("ActionBar", () => {
-  it("dispatches action without payload", () => {
-    const handler = expect.createSpy();
-
-    /** @type {any} */
-    const actionService = {
-      get: () => ({ handler }),
-    };
-
-    const tree = shallow(h(ActionBar, { actionService }));
-    const button = find(tree, x => x.type === "button");
-
-    button.props.on_pressed();
-    expect(handler).toHaveBeenCalledWith();
+  it("renders", () => {
+    new ActionBar().render();
   });
 });

src/app/Action/ActionBarItem.js

@@ -0,0 +1,53 @@
+const { Button, ReliefStyle } = imports.gi.Gtk;
+const Component = require("inferno-component").default;
+const { connect } = require("inferno-mobx");
+const { autoBind } = require("../Gjs/autoBind");
+const { h } = require("../Gjs/GtkInferno");
+const ActionBarRm = require("./ActionBarRm").default;
+const { ActionService } = require("./ActionService");
+
+/**
+ * @typedef IProps
+ * @property {{ id: string, label: string, shortcut: string }} action
+ * @property {ActionService?} [actionService]
+ *
+ * @extends Component<IProps>
+ */
+class ActionBarItem extends Component {
+  /**
+   * @param {IProps} props
+   */
+  constructor(props) {
+    super(props);
+    autoBind(this, ActionBarItem.prototype, __filename);
+  }
+
+  /**
+   * @param {Button} button
+   */
+  ref(button) {
+    const { get } = /** @type {ActionService} */ (this.props.actionService);
+    button.connect("pressed", get(this.props.action.id).handler);
+  }
+
+  render() {
+    const { id, label, shortcut } = this.props.action;
+
+    if (id === "rm") {
+      return h(ActionBarRm, { label: shortcut + " " + label });
+    }
+
+    return (
+      h(Button, {
+        can_focus: false,
+        expand: true,
+        label: shortcut + " " + label,
+        ref: this.ref,
+        relief: ReliefStyle.NONE,
+      })
+    );
+  }
+}
+
+exports.ActionBarItem = ActionBarItem;
+exports.default = connect(["actionService"])(ActionBarItem);

src/app/Action/ActionBarItem.test.js

@@ -0,0 +1,37 @@
+const expect = require("expect");
+const { ActionBarItem } = require("./ActionBarItem");
+
+describe("ActionBarItem", () => {
+  it("renders", () => {
+    const action = {
+      id: "windowService.exit",
+      label: "Exit",
+      shortcut: "Alt+F4",
+    };
+
+    new ActionBarItem({ action }).render();
+  });
+
+  it("connects handler", () => {
+    const handler = expect.createSpy();
+
+    /** @type {any} */
+    const actionService = {
+      get: () => ({ handler }),
+    };
+
+    /** @type {any} */
+    const button = {
+      connect: expect.createSpy(),
+    };
+
+    const action = {
+      id: "windowService.exit",
+      label: "Exit",
+      shortcut: "Alt+F4",
+    };
+
+    new ActionBarItem({ action, actionService }).ref(button);
+    expect(button.connect).toHaveBeenCalledWith("pressed", handler);
+  });
+});

src/app/Action/ActionBarRm.js

@@ -1,7 +1,7 @@
 const { DragAction } = imports.gi.Gdk;
-const { DestDefaults, ReliefStyle } = imports.gi.Gtk;
+const { Button, DestDefaults, ReliefStyle } = imports.gi.Gtk;
 const Component = require("inferno-component").default;
-const h = require("inferno-hyperscript").default;
+const { h } = require("../Gjs/GtkInferno");
 const { connect } = require("inferno-mobx");
 const { autoBind } = require("../Gjs/autoBind");
 const { JobService } = require("../Job/JobService");
@@ -10,77 +10,70 @@ const { SelectionService } = require("../Selection/SelectionService");
 
 /**
  * @typedef IProps
- * @property {JobService} jobService
- * @property {PanelService} panelService
- * @property {SelectionService} selectionService
+ * @property {JobService?} [jobService]
+ * @property {PanelService?} [panelService]
+ * @property {SelectionService?} [selectionService]
  * @property {string} label
  *
- * @param {IProps} props
+ * @extends Component<IProps>
  */
-function ActionBarRm(props) {
-  Component.call(this, props);
-  autoBind(this, ActionBarRm.prototype, __filename);
-}
-
-ActionBarRm.prototype = Object.create(Component.prototype);
-
-/**
- * @type {IProps}
- */
-ActionBarRm.prototype.props = undefined;
+class ActionBarRm extends Component {
+  /**
+   * @param {IProps} props
+   */
+  constructor(props) {
+    super(props);
+    autoBind(this, ActionBarRm.prototype, __filename);
+  }
 
-/**
- * @param {any} _node
- * @param {{ get_selected_action(): number }} _dragContext
- * @param {number} _x
- * @param {number} _y
- * @param {{ get_uris(): string[] }} selectionData
- */
-ActionBarRm.prototype.handleDrop = function(
-  _node,
-  _dragContext,
-  _x,
-  _y,
-  selectionData,
-) {
-  const { jobService, panelService } = this.props;
-  const uris = selectionData.get_uris();
+  // tslint:disable:variable-name
+  /**
+   * @param {any} _node
+   * @param {any} _dragContext
+   * @param {number} _x
+   * @param {number} _y
+   * @param {{ get_uris(): string[] }} selectionData
+   */
+  handleDrop(_node, _dragContext, _x, _y, selectionData) {
+    const { run } = /** @type {JobService} */ (this.props.jobService);
+    const { refresh } = /** @type {PanelService} */ (this.props.panelService);
+    const uris = selectionData.get_uris();
 
-  jobService.run(
-    {
+    run({
       destUri: "",
       type: "rm",
       uris,
-    },
-    panelService.refresh,
-  );
-};
+    }, refresh);
+  }
+  // tslint-enable: variable-name
 
-ActionBarRm.prototype.handlePressed = function() {
-  this.props.selectionService.rm();
-};
+  handlePressed() {
+    const { rm } = /** @type {SelectionService} */ (this.props.selectionService);
+    rm();
+  }
 
-/**
- * @param {any} node
- */
-ActionBarRm.prototype.ref = function(node) {
-  node.drag_dest_set(DestDefaults.ALL, [], DragAction.MOVE);
-  node.drag_dest_add_uri_targets();
-};
+  /**
+   * @param {Button} node
+   */
+  ref(node) {
+    node.connect("drag-data-received", this.handleDrop);
+    node.connect("pressed", this.handlePressed);
+    node.drag_dest_set(DestDefaults.ALL, [], DragAction.MOVE);
+    node.drag_dest_add_uri_targets();
+  }
 
-ActionBarRm.prototype.render = function() {
-  return (
-    h("button", {
-      can_focus: false,
-      expand: true,
-      label: this.props.label,
-      on_drag_data_received: this.handleDrop,
-      on_pressed: this.handlePressed,
-      ref: this.ref,
-      relief: ReliefStyle.NONE,
-    })
-  );
-};
+  render() {
+    return (
+      h(Button, {
+        can_focus: false,
+        expand: true,
+        label: this.props.label,
+        ref: this.ref,
+        relief: ReliefStyle.NONE,
+      })
+    );
+  }
+}
 
 exports.ActionBarRm = ActionBarRm;
 exports.default = connect(["jobService", "panelService", "selectionService"])(

src/app/Action/ActionBarRm.test.js

@@ -1,31 +1,24 @@
 const { DragAction } = imports.gi.Gdk;
 const expect = require("expect");
+const noop = require("lodash/noop");
 const { h } = require("../Gjs/GtkInferno");
 const { find, shallow } = require("../Test/Test");
 const { ActionBarRm } = require("./ActionBarRm");
 
 describe("ActionBarRm", () => {
   it("renders", () => {
-    new ActionBarRm({
-      jobService: undefined,
-      label: "",
-      panelService: undefined,
-      selectionService: undefined,
-    }).render();
+    new ActionBarRm({ label: "" }).render();
   });
 
   it("enables drop", () => {
+    /** @type {any} */
     const node = {
+      connect: noop,
       drag_dest_add_uri_targets: expect.createSpy(),
       drag_dest_set: expect.createSpy(),
     };
 
-    new ActionBarRm({
-      jobService: undefined,
-      label: "",
-      panelService: undefined,
-      selectionService: undefined,
-    }).ref(node);
+    new ActionBarRm({ label: "" }).ref(node);
 
     expect(node.drag_dest_set).toHaveBeenCalled();
     expect(node.drag_dest_add_uri_targets).toHaveBeenCalled();
@@ -51,7 +44,6 @@ describe("ActionBarRm", () => {
       jobService,
       label: "",
       panelService,
-      selectionService: undefined,
     }).handleDrop(undefined, undefined, 0, 0, selectionData);
 
     expect(jobService.run).toHaveBeenCalledWith({
@@ -67,8 +59,10 @@ describe("ActionBarRm", () => {
       rm: expect.createSpy(),
     };
 
-    const button = shallow(h(ActionBarRm, { selectionService }));
-    button.props.on_pressed();
+    new ActionBarRm({
+      label: "",
+      selectionService,
+    }).handlePressed();
 
     expect(selectionService.rm).toHaveBeenCalled();
   });

src/app/Action/ActionService.js

@@ -48,7 +48,7 @@ class ActionService {
       });
     }
 
-    return this.actions.get(id);
+    return /** @type {Action} */ (this.actions.get(id));
   }
 }