js: Convert static/js/drafts.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -150,7 +150,6 @@
                 "confirm_dialog": false,
                 "csrf_token": false,
                 "current_msg_list": true,
-                "drafts": false,
                 "dropdown_list_widget": false,
                 "emoji_picker": false,
                 "favicon": false,

frontend_tests/node_tests/compose.js

@@ -33,6 +33,7 @@ const _document = {
 };
 
 const _drafts = {
+    __esModule: true,
     delete_draft_after_send: noop,
 };
 
@@ -48,7 +49,7 @@ const reminder = {
 };
 
 set_global("document", _document);
-set_global("drafts", _drafts);
+rewiremock("../../static/js/drafts").with(_drafts);
 set_global("navigator", _navigator);
 set_global("notifications", _notifications);
 set_global("reminder", reminder);

frontend_tests/node_tests/compose_actions.js

@@ -33,7 +33,7 @@ const compose_fade = set_global("compose_fade", {
     clear_compose: noop,
 });
 
-set_global("drafts", {
+rewiremock("../../static/js/drafts").with({
     update_draft: noop,
 });
 

frontend_tests/node_tests/drafts.js

@@ -164,9 +164,9 @@ run_test("initialize", () => {
     window.addEventListener = (event_name, f) => {
         assert.equal(event_name, "beforeunload");
         let called = false;
-        drafts.update_draft = () => {
+        drafts.__Rewire__("update_draft", () => {
             called = true;
-        };
+        });
         f();
         assert(called);
     };
@@ -295,7 +295,7 @@ run_test("format_drafts", (override) => {
     });
 
     override(drafts, "open_overlay", noop);
-    drafts.set_initial_element = noop;
+    drafts.__Rewire__("set_initial_element", noop);
 
     $.create("#drafts_table .draft-row", {children: []});
     drafts.launch();

frontend_tests/node_tests/hashchange.js

@@ -2,6 +2,8 @@
 
 const {strict: assert} = require("assert");
 
+const rewiremock = require("rewiremock/node");
+
 const {set_global, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
 const $ = require("../zjsunit/zjquery");
@@ -20,7 +22,8 @@ set_global("document", "document-stub");
 const history = set_global("history", {});
 
 const admin = set_global("admin", {});
-const drafts = set_global("drafts", {});
+const drafts = {__esModule: true};
+rewiremock("../../static/js/drafts").with(drafts);
 set_global("favicon", {});
 const floating_recipient_bar = set_global("floating_recipient_bar", {});
 const info_overlay = set_global("info_overlay", {});
@@ -34,6 +37,8 @@ set_global("top_left_corner", {
     handle_narrow_deactivated: () => {},
 });
 
+rewiremock.enable();
+
 const people = zrequire("people");
 const hash_util = zrequire("hash_util");
 const hashchange = zrequire("hashchange");
@@ -304,3 +309,4 @@ run_test("save_narrow", () => {
     helper.assert_events([[message_viewport, "stop_auto_scrolling"]]);
     assert.equal(url_pushed, "http://example.com/#narrow/is/starred");
 });
+rewiremock.disable();

frontend_tests/node_tests/hotkey.js

@@ -2,6 +2,8 @@
 
 const {strict: assert} = require("assert");
 
+const rewiremock = require("rewiremock/node");
+
 const {set_global, with_field, with_overrides, zrequire} = require("../zjsunit/namespace");
 const {make_stub} = require("../zjsunit/stub");
 const {run_test} = require("../zjsunit/test");
@@ -65,7 +67,8 @@ set_global("document", "document-stub");
 
 const compose_actions = set_global("compose_actions", {});
 const condense = set_global("condense", {});
-const drafts = set_global("drafts", {});
+const drafts = {__esModule: true};
+rewiremock("../../static/js/drafts").with(drafts);
 const hashchange = set_global("hashchange", {
     in_recent_topics_hash: () => false,
 });
@@ -103,6 +106,8 @@ set_global("recent_topics", {
     is_visible: () => false,
 });
 
+rewiremock.enable();
+
 const emoji_codes = zrequire("emoji_codes", "generated/emoji/emoji_codes.json");
 const emoji = zrequire("emoji", "shared/js/emoji");
 const activity = zrequire("activity");
@@ -493,3 +498,4 @@ run_test("motion_keys", () => {
     overlays.is_active = () => false;
     overlays.drafts_open = () => false;
 });
+rewiremock.disable();

frontend_tests/node_tests/recent_topics.js

@@ -2,6 +2,8 @@
 
 const {strict: assert} = require("assert");
 
+const rewiremock = require("rewiremock/node");
+
 const {stub_templates} = require("../zjsunit/handlebars");
 const {reset_module, set_global, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
@@ -76,7 +78,7 @@ const ListWidget = set_global("ListWidget", {
     hard_redraw: noop,
     render_item: (item) => ListWidget.modifier(item),
 });
-set_global("drafts", {
+rewiremock("../../static/js/drafts").with({
     update_draft: noop,
 });
 
@@ -163,6 +165,8 @@ set_global("stream_data", {
     id_is_subscribed: () => true,
 });
 
+rewiremock.enable();
+
 zrequire("message_util");
 zrequire("narrow_state");
 const people = zrequire("people");
@@ -835,3 +839,4 @@ run_test("test_search", () => {
     assert.equal(rt.topic_in_search_results("\\", "general", "\\"), true);
     assert.equal(rt.topic_in_search_results("\\", "general", "\\\\"), true);
 });
+rewiremock.disable();

frontend_tests/node_tests/ui_init.js

@@ -68,7 +68,7 @@ page_params.presences = [];
 set_global("activity", {initialize() {}});
 set_global("click_handlers", {initialize() {}});
 set_global("compose_pm_pill", {initialize() {}});
-set_global("drafts", {initialize() {}});
+rewiremock("../../static/js/drafts").with({initialize() {}});
 set_global("emoji_picker", {initialize() {}});
 set_global("gear_menu", {initialize() {}});
 set_global("hashchange", {initialize() {}});

static/js/bundles/app.js

@@ -15,7 +15,6 @@ import "flatpickr/dist/plugins/confirmDate/confirmDate";
 // Import app JS
 import "../i18n";
 import "../fold_dict";
-import "../drafts";
 import "../input_pill";
 import "../user_pill";
 import "../compose_pm_pill";

static/js/compose.js

@@ -10,6 +10,7 @@ const render_compose_not_subscribed = require("../templates/compose_not_subscrib
 const render_compose_private_stream_alert = require("../templates/compose_private_stream_alert.hbs");
 
 const common = require("./common");
+const drafts = require("./drafts");
 const echo = require("./echo");
 const loading = require("./loading");
 const peer_data = require("./peer_data");

static/js/compose_actions.js

@@ -5,6 +5,7 @@ const autosize = require("autosize");
 const fenced_code = require("../shared/js/fenced_code");
 
 const common = require("./common");
+const drafts = require("./drafts");
 const people = require("./people");
 
 exports.blur_compose_inputs = function () {

static/js/drafts.js

@@ -1,13 +1,11 @@
-"use strict";
+import {subDays} from "date-fns";
+import Handlebars from "handlebars/runtime";
 
-const {subDays} = require("date-fns");
-const Handlebars = require("handlebars/runtime");
+import render_draft_table_body from "../templates/draft_table_body.hbs";
 
-const render_draft_table_body = require("../templates/draft_table_body.hbs");
-
-const {localstorage} = require("./localstorage");
-const people = require("./people");
-const util = require("./util");
+import {localstorage} from "./localstorage";
+import * as people from "./people";
+import * as util from "./util";
 
 function set_count(count) {
     const draft_count = count.toString();
@@ -15,7 +13,7 @@ function set_count(count) {
     $(".compose_drafts_button").text(text);
 }
 
-const draft_model = (function () {
+export const draft_model = (function () {
     const exports = {};
 
     // the key that the drafts are stored under.
@@ -75,9 +73,7 @@ const draft_model = (function () {
     return exports;
 })();
 
-exports.draft_model = draft_model;
-
-exports.snapshot_message = function () {
+export function snapshot_message() {
     if (!compose_state.composing() || compose_state.message_content().length <= 2) {
         // If you aren't in the middle of composing the body of a
         // message or the message is shorter than 2 characters long, don't try to snapshot.
@@ -98,9 +94,9 @@ exports.snapshot_message = function () {
         message.topic = compose_state.topic();
     }
     return message;
-};
+}
 
-exports.restore_message = function (draft) {
+export function restore_message(draft) {
     // This is kinda the inverse of snapshot_message, and
     // we are essentially making a deep copy of the draft,
     // being explicit about which fields we send to the compose
@@ -123,15 +119,15 @@ exports.restore_message = function (draft) {
     }
 
     return compose_args;
-};
+}
 
 function draft_notify() {
     $(".alert-draft").css("display", "inline-block");
     $(".alert-draft").delay(1000).fadeOut(500);
 }
 
-exports.update_draft = function () {
-    const draft = exports.snapshot_message();
+export function update_draft() {
+    const draft = snapshot_message();
 
     if (draft === undefined) {
         // The user cleared the compose box, which means
@@ -157,23 +153,23 @@ exports.update_draft = function () {
     const new_draft_id = draft_model.addDraft(draft);
     $("#compose-textarea").data("draft-id", new_draft_id);
     draft_notify();
-};
+}
 
-exports.delete_draft_after_send = function () {
+export function delete_draft_after_send() {
     const draft_id = $("#compose-textarea").data("draft-id");
     if (draft_id) {
         draft_model.deleteDraft(draft_id);
     }
     $("#compose-textarea").removeData("draft-id");
-};
+}
 
-exports.restore_draft = function (draft_id) {
+export function restore_draft(draft_id) {
     const draft = draft_model.getDraft(draft_id);
     if (!draft) {
         return;
     }
 
-    const compose_args = exports.restore_message(draft);
+    const compose_args = restore_message(draft);
 
     if (compose_args.type === "stream") {
         if (draft.stream !== "") {
@@ -204,11 +200,11 @@ exports.restore_draft = function (draft_id) {
     compose_actions.start(compose_args.type, compose_args);
     compose_ui.autosize_textarea($("#compose-textarea"));
     $("#compose-textarea").data("draft-id", draft_id);
-};
+}
 
 const DRAFT_LIFETIME = 30;
 
-exports.remove_old_drafts = function () {
+export function remove_old_drafts() {
     const old_date = subDays(new Date(), DRAFT_LIFETIME).getTime();
     const drafts = draft_model.get();
     for (const [id, draft] of Object.entries(drafts)) {
@@ -216,9 +212,9 @@ exports.remove_old_drafts = function () {
             draft_model.deleteDraft(id);
         }
     }
-};
+}
 
-exports.format_draft = function (draft) {
+export function format_draft(draft) {
     const id = draft.id;
     let formatted;
     const time = new Date(draft.updatedAt);
@@ -291,7 +287,7 @@ exports.format_draft = function (draft) {
     }
 
     return formatted;
-};
+}
 
 function row_with_focus() {
     const focused_draft = $(".draft-info-box:focus")[0];
@@ -312,7 +308,7 @@ function remove_draft(draft_row) {
     // Deletes the draft and removes it from the list
     const draft_id = draft_row.data("draft-id");
 
-    exports.draft_model.deleteDraft(draft_id);
+    draft_model.deleteDraft(draft_id);
 
     draft_row.remove();
 
@@ -321,7 +317,7 @@ function remove_draft(draft_row) {
     }
 }
 
-exports.launch = function () {
+export function launch() {
     function format_drafts(data) {
         for (const [id, draft] of Object.entries(data)) {
             draft.id = id;
@@ -334,7 +330,7 @@ exports.launch = function () {
         );
 
         const sorted_formatted_drafts = sorted_raw_drafts
-            .map((draft_row) => exports.format_draft(draft_row))
+            .map((draft_row) => format_draft(draft_row))
             .filter(Boolean);
 
         return sorted_formatted_drafts;
@@ -362,7 +358,7 @@ exports.launch = function () {
 
             const draft_row = $(this).closest(".draft-row");
             const draft_id = draft_row.data("draft-id");
-            exports.restore_draft(draft_id);
+            restore_draft(draft_id);
         });
 
         $(".draft_controls .delete-draft").on("click", function () {
@@ -372,7 +368,7 @@ exports.launch = function () {
         });
     }
 
-    exports.remove_old_drafts();
+    remove_old_drafts();
     const drafts = format_drafts(draft_model.get());
     render_widgets(drafts);
 
@@ -380,10 +376,10 @@ exports.launch = function () {
     // element in order for the CSS transition to take effect.
     $("#draft_overlay").css("opacity");
 
-    exports.open_overlay();
-    exports.set_initial_element(drafts);
+    open_overlay();
+    set_initial_element(drafts);
     setup_event_handlers();
-};
+}
 
 function activate_element(elem) {
     $(".draft-info-box").removeClass("active");
@@ -457,7 +453,7 @@ function drafts_scroll(next_focus_draft_row) {
     }
 }
 
-exports.drafts_handle_events = function (e, event_key) {
+export function drafts_handle_events(e, event_key) {
     const draft_arrow = draft_model.get();
     const draft_id_arrow = Object.getOwnPropertyNames(draft_arrow);
     drafts_initialize_focus(event_key);
@@ -504,15 +500,15 @@ exports.drafts_handle_events = function (e, event_key) {
     // It restores draft that is focused.
     if (event_key === "enter") {
         if (document.activeElement.parentElement.hasAttribute("data-draft-id")) {
-            exports.restore_draft(focused_draft_id);
+            restore_draft(focused_draft_id);
         } else {
             const first_draft = draft_id_arrow[draft_id_arrow.length - 1];
-            exports.restore_draft(first_draft);
+            restore_draft(first_draft);
         }
     }
-};
+}
 
-exports.open_overlay = function () {
+export function open_overlay() {
     overlays.open_overlay({
         name: "drafts",
         overlay: $("#draft_overlay"),
@@ -520,9 +516,9 @@ exports.open_overlay = function () {
             hashchange.exit_overlay();
         },
     });
-};
+}
 
-exports.set_initial_element = function (drafts) {
+export function set_initial_element(drafts) {
     if (drafts.length > 0) {
         const curr_draft_id = drafts[0].draft_id;
         const selector = '[data-draft-id="' + curr_draft_id + '"]';
@@ -531,20 +527,18 @@ exports.set_initial_element = function (drafts) {
         activate_element(focus_element);
         $(".drafts-list")[0].scrollTop = 0;
     }
-};
+}
 
-exports.initialize = function () {
+export function initialize() {
     window.addEventListener("beforeunload", () => {
-        exports.update_draft();
+        update_draft();
     });
 
     set_count(Object.keys(draft_model.get()).length);
 
-    $("#compose-textarea").on("focusout", exports.update_draft);
+    $("#compose-textarea").on("focusout", update_draft);
 
     $("body").on("focus", ".draft-info-box", (e) => {
         activate_element(e.target);
     });
-};
-
-window.drafts = exports;
+}

static/js/global.d.ts

@@ -28,7 +28,6 @@ declare let condense: any;
 declare let confirm_dialog: any;
 declare let csrf_token: any;
 declare let current_msg_list: any;
-declare let drafts: any;
 declare let emoji: any;
 declare let emoji_picker: any;
 declare let favicon: any;

static/js/hashchange.js

@@ -1,5 +1,6 @@
 "use strict";
 
+const drafts = require("./drafts");
 const invite = require("./invite");
 
 // Read https://zulip.readthedocs.io/en/latest/subsystems/hashchange-system.html

static/js/hotkey.js

@@ -4,6 +4,7 @@ const emoji = require("../shared/js/emoji");
 
 const common = require("./common");
 const copy_and_paste = require("./copy_and_paste");
+const drafts = require("./drafts");
 const feedback_widget = require("./feedback_widget");
 const topic_zoom = require("./topic_zoom");
 

static/js/recent_topics.js

@@ -4,6 +4,7 @@ const render_recent_topic_row = require("../templates/recent_topic_row.hbs");
 const render_recent_topics_filters = require("../templates/recent_topics_filters.hbs");
 const render_recent_topics_body = require("../templates/recent_topics_table.hbs");
 
+const drafts = require("./drafts");
 const {localstorage} = require("./localstorage");
 const people = require("./people");
 

static/js/ui_init.js

@@ -10,6 +10,7 @@ const render_edit_content_button = require("../templates/edit_content_button.hbs
 
 const alert_words = require("./alert_words");
 const copy_and_paste = require("./copy_and_paste");
+const drafts = require("./drafts");
 const echo = require("./echo");
 const emojisets = require("./emojisets");
 const invite = require("./invite");