From d8c793f791818490f31e8db6a692fd65e1fb2bac Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <anders@zulip.com>
Date: Sun, 28 Feb 2021 12:33:26 -0800
Subject: [PATCH] js: Convert static/js/composebox_typeahead.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
---
 .eslintrc.json                                |   1 -
 .../node_tests/composebox_typeahead.js        |   6 +-
 frontend_tests/node_tests/dispatch.js         |   3 +-
 frontend_tests/node_tests/ui_init.js          |   1 -
 static/js/bundles/app.js                      |   1 -
 static/js/composebox_typeahead.js             | 216 +++++++++---------
 static/js/global.d.ts                         |   1 -
 static/js/message_edit.js                     |   1 +
 static/js/server_events_dispatch.js           |   1 +
 static/js/ui_init.js                          |   1 +
 10 files changed, 114 insertions(+), 118 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index a049c64592..22adf4975d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -127,7 +127,6 @@
             "globals": {
                 "$": false,
                 "blueslip": false,
-                "composebox_typeahead": false,
                 "csrf_token": false,
                 "current_msg_list": true,
                 "dropdown_list_widget": false,
diff --git a/frontend_tests/node_tests/composebox_typeahead.js b/frontend_tests/node_tests/composebox_typeahead.js
index ad1c8ee283..017a3e3908 100644
--- a/frontend_tests/node_tests/composebox_typeahead.js
+++ b/frontend_tests/node_tests/composebox_typeahead.js
@@ -70,7 +70,7 @@ const ct = composebox_typeahead;
 // Use a slightly larger value than what's user-facing
 // to facilitate testing different combinations of
 // broadcast-mentions/persons/groups.
-ct.max_num_items = 15;
+ct.__Rewire__("max_num_items", 15);
 
 const mention_all = ct.broadcast_mentions()[0];
 assert.equal(mention_all.email, "all");
@@ -1146,7 +1146,7 @@ run_test("begins_typeahead", () => {
 
     function get_values(input, rest) {
         // Stub out split_at_cursor that uses $(':focus')
-        ct.split_at_cursor = () => [input, rest];
+        ct.__Rewire__("split_at_cursor", () => [input, rest]);
         const values = ct.get_candidates.call(begin_typehead_this, input);
         return values;
     }
@@ -1526,7 +1526,7 @@ run_test("message people", () => {
     let results;
 
     compose_state.__Rewire__("stream_name", () => undefined);
-    ct.max_num_items = 2;
+    ct.__Rewire__("max_num_items", 2);
 
     /*
         We will simulate that we talk to Hal and Harry,
diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js
index 2ce0b07cf8..3aa313a5cf 100644
--- a/frontend_tests/node_tests/dispatch.js
+++ b/frontend_tests/node_tests/dispatch.js
@@ -29,7 +29,8 @@ rewiremock("../../static/js/attachments_ui").with(attachments_ui);
 const bot_data = {__esModule: true};
 rewiremock("../../static/js/bot_data").with(bot_data);
 rewiremock("../../static/js/compose").with({});
-const composebox_typeahead = set_global("composebox_typeahead", {});
+const composebox_typeahead = {__esModule: true};
+rewiremock("../../static/js/composebox_typeahead").with(composebox_typeahead);
 set_global("current_msg_list", {});
 const emoji_picker = {__esModule: true};
 rewiremock("../../static/js/emoji_picker").with(emoji_picker);
diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js
index 068242b976..2405321b88 100644
--- a/frontend_tests/node_tests/ui_init.js
+++ b/frontend_tests/node_tests/ui_init.js
@@ -117,7 +117,6 @@ const util = zrequire("util");
 
 const upload = zrequire("upload");
 const compose = zrequire("compose");
-zrequire("composebox_typeahead");
 
 run_test("initialize_everything", () => {
     util.is_mobile = () => false;
diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index 13f04f01f0..0f6699926d 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -18,7 +18,6 @@ import "../fold_dict";
 import "../setup";
 import "../message_list";
 import "../reload";
-import "../composebox_typeahead";
 import "../hotkey";
 import "../notifications";
 import "../message_events";
diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js
index 6d60db30a5..7b7665bcd0 100644
--- a/static/js/composebox_typeahead.js
+++ b/static/js/composebox_typeahead.js
@@ -1,29 +1,27 @@
-"use strict";
+import autosize from "autosize";
+import {formatISO} from "date-fns";
+import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
+import _ from "lodash";
 
-const autosize = require("autosize");
-const {formatISO} = require("date-fns");
-const ConfirmDatePlugin = require("flatpickr/dist/plugins/confirmDate/confirmDate");
-const _ = require("lodash");
+import pygments_data from "../generated/pygments_data.json";
+import * as emoji from "../shared/js/emoji";
+import * as typeahead from "../shared/js/typeahead";
 
-const pygments_data = require("../generated/pygments_data.json");
-const emoji = require("../shared/js/emoji");
-const typeahead = require("../shared/js/typeahead");
-
-const channel = require("./channel");
-const compose = require("./compose");
-const compose_pm_pill = require("./compose_pm_pill");
-const compose_state = require("./compose_state");
-const compose_ui = require("./compose_ui");
-const message_store = require("./message_store");
-const people = require("./people");
-const rows = require("./rows");
-const settings_data = require("./settings_data");
-const stream_data = require("./stream_data");
-const stream_topic_history = require("./stream_topic_history");
-const timerender = require("./timerender");
-const typeahead_helper = require("./typeahead_helper");
-const user_groups = require("./user_groups");
-const user_pill = require("./user_pill");
+import * as channel from "./channel";
+import * as compose from "./compose";
+import * as compose_pm_pill from "./compose_pm_pill";
+import * as compose_state from "./compose_state";
+import * as compose_ui from "./compose_ui";
+import * as message_store from "./message_store";
+import * as people from "./people";
+import * as rows from "./rows";
+import * as settings_data from "./settings_data";
+import * as stream_data from "./stream_data";
+import * as stream_topic_history from "./stream_topic_history";
+import * as timerender from "./timerender";
+import * as typeahead_helper from "./typeahead_helper";
+import * as user_groups from "./user_groups";
+import * as user_pill from "./user_pill";
 
 //************************************
 // AN IMPORTANT NOTE ABOUT TYPEAHEADS
@@ -38,38 +36,38 @@ const user_pill = require("./user_pill");
 
 // This is what we use for PM/compose typeaheads.
 // We export it to allow tests to mock it.
-exports.max_num_items = 8;
+export const max_num_items = 8;
 
-exports.emoji_collection = [];
+export let emoji_collection = [];
 
-exports.update_emoji_data = function () {
-    exports.emoji_collection = [];
+export function update_emoji_data() {
+    emoji_collection = [];
     for (const emoji_dict of emoji.emojis_by_name.values()) {
         if (emoji_dict.is_realm_emoji === true) {
-            exports.emoji_collection.push({
+            emoji_collection.push({
                 emoji_name: emoji_dict.name,
                 emoji_url: emoji_dict.url,
                 is_realm_emoji: true,
             });
         } else {
             for (const alias of emoji_dict.aliases) {
-                exports.emoji_collection.push({
+                emoji_collection.push({
                     emoji_name: alias,
                     emoji_code: emoji_dict.emoji_code,
                 });
             }
         }
     }
-};
+}
 
-exports.topics_seen_for = function (stream_name) {
+export function topics_seen_for(stream_name) {
     const stream_id = stream_data.get_stream_id(stream_name);
     if (!stream_id) {
         return [];
     }
     const topic_names = stream_topic_history.get_recent_topic_names(stream_id);
     return topic_names;
-};
+}
 
 function get_language_matcher(query) {
     query = query.toLowerCase();
@@ -78,7 +76,7 @@ function get_language_matcher(query) {
     };
 }
 
-exports.query_matches_person = function (query, person) {
+export function query_matches_person(query, person) {
     if (!settings_data.show_email()) {
         return typeahead.query_matches_source_attrs(query, person, ["full_name"], " ");
     }
@@ -87,7 +85,7 @@ exports.query_matches_person = function (query, person) {
         email_attr = "delivery_email";
     }
     return typeahead.query_matches_source_attrs(query, person, ["full_name", email_attr], " ");
-};
+}
 
 function query_matches_name_description(query, user_group_or_stream) {
     return typeahead.query_matches_source_attrs(
@@ -127,7 +125,7 @@ function get_topic_matcher(query) {
     };
 }
 
-exports.should_enter_send = function (e) {
+export function should_enter_send(e) {
     const has_non_shift_modifier_key = e.ctrlKey || e.metaKey || e.altKey;
     const has_modifier_key = e.shiftKey || has_non_shift_modifier_key;
     let this_enter_sends;
@@ -147,9 +145,9 @@ exports.should_enter_send = function (e) {
         this_enter_sends = has_non_shift_modifier_key;
     }
     return this_enter_sends;
-};
+}
 
-exports.handle_enter = function (textarea, e) {
+export function handle_enter(textarea, e) {
     // Used only if Enter doesn't send.
 
     // Since this Enter doesn't send, we just want to do
@@ -180,7 +178,7 @@ exports.handle_enter = function (textarea, e) {
         return;
     }
     // Fall through to native browser behavior, otherwise.
-};
+}
 
 let nextFocus = false;
 
@@ -205,13 +203,13 @@ function handle_keydown(e) {
                 // This if branch is only here to make Tab+Enter work on Safari,
                 // which does not make <button>s tab-accessible by default
                 // (even if we were to set tabindex=0).
-                if (!exports.should_enter_send(e)) {
+                if (!should_enter_send(e)) {
                     $("#compose-send-button").trigger("focus");
                     e.preventDefault();
                 }
             } else {
                 // Enter
-                if (exports.should_enter_send(e)) {
+                if (should_enter_send(e)) {
                     e.preventDefault();
                     if (!$("#compose-send-button").prop("disabled")) {
                         $("#compose-send-button").prop("disabled", true);
@@ -220,7 +218,7 @@ function handle_keydown(e) {
                     return;
                 }
 
-                exports.handle_enter($("#compose-textarea"), e);
+                handle_enter($("#compose-textarea"), e);
             }
         } else if (on_stream || on_topic || on_pm) {
             // Prevent the form from submitting
@@ -251,12 +249,12 @@ function handle_keyup(e) {
     }
 }
 
-exports.split_at_cursor = function (query, input) {
+export function split_at_cursor(query, input) {
     const cursor = input.caret();
     return [query.slice(0, cursor), query.slice(cursor)];
-};
+}
 
-exports.tokenize_compose_str = function (s) {
+export function tokenize_compose_str(s) {
     // This basically finds a token like "@alic" or
     // "#Veron" as close to the end of the string as it
     // can find it.  It wants to find white space or
@@ -322,9 +320,9 @@ exports.tokenize_compose_str = function (s) {
     }
 
     return "";
-};
+}
 
-exports.broadcast_mentions = function () {
+export function broadcast_mentions() {
     return ["all", "everyone", "stream"].map((mention, idx) => ({
         special_item_text: i18n.t("__wildcard_mention_token__ (Notify stream)", {
             wildcard_mention_token: mention,
@@ -342,7 +340,7 @@ exports.broadcast_mentions = function () {
         // used for sorting
         idx,
     }));
-};
+}
 
 function filter_mention_name(current_token) {
     if (current_token.startsWith("**")) {
@@ -371,7 +369,7 @@ function should_show_custom_query(query, items) {
     return !matched;
 }
 
-exports.slash_commands = [
+export const slash_commands = [
     {
         text: i18n.t("/dark (Toggle night mode)"),
         name: "dark",
@@ -414,26 +412,26 @@ exports.slash_commands = [
     },
 ];
 
-exports.filter_and_sort_mentions = function (is_silent, query, opts) {
+export function filter_and_sort_mentions(is_silent, query, opts) {
     opts = {
         want_broadcast: !is_silent,
         want_groups: !is_silent,
         filter_pills: false,
         ...opts,
     };
-    return exports.get_person_suggestions(query, opts);
-};
+    return get_person_suggestions(query, opts);
+}
 
-exports.get_pm_people = function (query) {
+export function get_pm_people(query) {
     const opts = {
         want_broadcast: false,
         want_groups: true,
         filter_pills: true,
     };
-    return exports.get_person_suggestions(query, opts);
-};
+    return get_person_suggestions(query, opts);
+}
 
-exports.get_person_suggestions = function (query, opts) {
+export function get_person_suggestions(query, opts) {
     query = typeahead.clean_query_lowercase(query);
 
     function filter_persons(all_persons) {
@@ -446,9 +444,9 @@ exports.get_person_suggestions = function (query, opts) {
         }
 
         if (opts.want_broadcast) {
-            persons = persons.concat(exports.broadcast_mentions());
+            persons = persons.concat(broadcast_mentions());
         }
-        return persons.filter((item) => exports.query_matches_person(query, item));
+        return persons.filter((item) => query_matches_person(query, item));
     }
 
     let groups;
@@ -483,7 +481,7 @@ exports.get_person_suggestions = function (query, opts) {
         persons who match on prefix to groups who
         match on prefix.)
     */
-    const cutoff_length = exports.max_num_items;
+    const cutoff_length = max_num_items;
 
     const filtered_message_persons = filter_persons(people.get_active_message_people());
 
@@ -501,11 +499,11 @@ exports.get_person_suggestions = function (query, opts) {
         opts.stream,
         opts.topic,
         filtered_groups,
-        exports.max_num_items,
+        max_num_items,
     );
-};
+}
 
-exports.get_stream_topic_data = (hacky_this) => {
+export function get_stream_topic_data(hacky_this) {
     const opts = {};
     const message_row = hacky_this.$element.closest(".message_row");
     if (message_row.length === 1) {
@@ -520,9 +518,9 @@ exports.get_stream_topic_data = (hacky_this) => {
         opts.topic = compose_state.topic();
     }
     return opts;
-};
+}
 
-exports.get_sorted_filtered_items = function (query) {
+export function get_sorted_filtered_items(query) {
     /*
         This is just a "glue" function to work
         around bootstrap.  We want to control these
@@ -546,7 +544,7 @@ exports.get_sorted_filtered_items = function (query) {
         several years ago.)
     */
 
-    const fetcher = exports.get_candidates.bind(this);
+    const fetcher = get_candidates.bind(this);
     const big_results = fetcher(query);
 
     if (!big_results) {
@@ -558,28 +556,28 @@ exports.get_sorted_filtered_items = function (query) {
     const completing = this.completing;
     const token = this.token;
 
-    const opts = exports.get_stream_topic_data(this);
+    const opts = get_stream_topic_data(this);
 
     if (completing === "mention" || completing === "silent_mention") {
-        return exports.filter_and_sort_mentions(big_results.is_silent, token, opts);
+        return filter_and_sort_mentions(big_results.is_silent, token, opts);
     }
 
-    return exports.filter_and_sort_candidates(completing, big_results, token);
-};
+    return filter_and_sort_candidates(completing, big_results, token);
+}
 
-exports.filter_and_sort_candidates = function (completing, candidates, token) {
-    const matcher = exports.compose_content_matcher(completing, token);
+export function filter_and_sort_candidates(completing, candidates, token) {
+    const matcher = compose_content_matcher(completing, token);
 
     const small_results = candidates.filter((item) => matcher(item));
 
-    const sorted_results = exports.sort_results(completing, small_results, token);
+    const sorted_results = sort_results(completing, small_results, token);
 
     return sorted_results;
-};
+}
 
-exports.get_candidates = function (query) {
-    const split = exports.split_at_cursor(query, this.$element);
-    let current_token = exports.tokenize_compose_str(split[0]);
+export function get_candidates(query) {
+    const split = split_at_cursor(query, this.$element);
+    let current_token = tokenize_compose_str(split[0]);
     if (current_token === "") {
         return false;
     }
@@ -635,7 +633,7 @@ exports.get_candidates = function (query) {
         }
         this.completing = "emoji";
         this.token = current_token.slice(1);
-        return exports.emoji_collection;
+        return emoji_collection;
     }
 
     if (this.options.completions.mention && current_token[0] === "@") {
@@ -658,7 +656,7 @@ exports.get_candidates = function (query) {
     }
 
     function get_slash_commands_data() {
-        const commands = exports.slash_commands;
+        const commands = slash_commands;
         return commands;
     }
 
@@ -711,7 +709,7 @@ exports.get_candidates = function (query) {
             if (tokens[1]) {
                 const stream_name = tokens[1];
                 this.token = tokens[2] || "";
-                const topic_list = exports.topics_seen_for(stream_name);
+                const topic_list = topics_seen_for(stream_name);
                 if (should_show_custom_query(this.token, topic_list)) {
                     topic_list.push(this.token);
                 }
@@ -727,9 +725,9 @@ exports.get_candidates = function (query) {
         }
     }
     return false;
-};
+}
 
-exports.content_highlighter = function (item) {
+export function content_highlighter(item) {
     switch (this.completing) {
         case "emoji":
             return typeahead_helper.render_emoji(item);
@@ -754,7 +752,7 @@ exports.content_highlighter = function (item) {
         default:
             return undefined;
     }
-};
+}
 
 const show_flatpickr = (element, callback, default_timestamp) => {
     const flatpickr_input = $("<input id='#timestamp_flatpickr'>");
@@ -784,8 +782,8 @@ const show_flatpickr = (element, callback, default_timestamp) => {
     container.find(".flatpickr-monthDropdown-months").trigger("focus");
 };
 
-exports.content_typeahead_selected = function (item, event) {
-    const pieces = exports.split_at_cursor(this.query, this.$element);
+export function content_typeahead_selected(item, event) {
+    const pieces = split_at_cursor(this.query, this.$element);
     let beginning = pieces[0];
     let rest = pieces[1];
     const textbox = this.$element;
@@ -923,9 +921,9 @@ exports.content_typeahead_selected = function (item, event) {
         compose_ui.autosize_textarea(textbox);
     }, 0);
     return beginning + rest;
-};
+}
 
-exports.compose_content_matcher = function (completing, token) {
+export function compose_content_matcher(completing, token) {
     switch (completing) {
         case "emoji":
             return typeahead.get_emoji_matcher(token);
@@ -949,9 +947,9 @@ exports.compose_content_matcher = function (completing, token) {
                 return undefined;
         }
     };
-};
+}
 
-exports.sort_results = function (completing, matches, token) {
+export function sort_results(completing, matches, token) {
     switch (completing) {
         case "emoji":
             return typeahead.sort_emojis(matches, token);
@@ -970,24 +968,24 @@ exports.sort_results = function (completing, matches, token) {
         default:
             return undefined;
     }
-};
+}
 
-exports.compose_automated_selection = function () {
+export function compose_automated_selection() {
     if (this.completing === "topic_jump") {
         // automatically jump inside stream mention on typing > just after
         // a stream mention, to begin stream+topic mention typeahead (topic_list).
         return true;
     }
     return false;
-};
+}
 
-exports.compose_trigger_selection = function (event) {
+export function compose_trigger_selection(event) {
     if (this.completing === "stream" && event.key === ">") {
         // complete stream typeahead partially to immediately start the topic_list typeahead.
         return true;
     }
     return false;
-};
+}
 
 function get_header_html() {
     let tip_text = "";
@@ -1012,7 +1010,7 @@ function get_header_html() {
     return `<em>${_.escape(tip_text)}</em>`;
 }
 
-exports.initialize_compose_typeahead = function (selector) {
+export function initialize_compose_typeahead(selector) {
     const completions = {
         mention: true,
         emoji: true,
@@ -1025,32 +1023,32 @@ exports.initialize_compose_typeahead = function (selector) {
     };
 
     $(selector).typeahead({
-        items: exports.max_num_items,
+        items: max_num_items,
         dropup: true,
         fixed: true,
         // Performance note: We have trivial matcher/sorters to do
         // matching and sorting inside the `source` field to avoid
         // O(n) behavior in the number of users in the organization
         // inside the typeahead library.
-        source: exports.get_sorted_filtered_items,
-        highlighter: exports.content_highlighter,
+        source: get_sorted_filtered_items,
+        highlighter: content_highlighter,
         matcher() {
             return true;
         },
         sorter(items) {
             return items;
         },
-        updater: exports.content_typeahead_selected,
+        updater: content_typeahead_selected,
         stopAdvance: true, // Do not advance to the next field on a Tab or Enter
         completions,
-        automated: exports.compose_automated_selection,
-        trigger_selection: exports.compose_trigger_selection,
+        automated: compose_automated_selection,
+        trigger_selection: compose_trigger_selection,
         header: get_header_html,
     });
-};
+}
 
-exports.initialize = function () {
-    exports.update_emoji_data();
+export function initialize() {
+    update_emoji_data();
 
     // These handlers are at the "form" level so that they are called after typeahead
     $("form#send_message_form").on("keydown", handle_keydown);
@@ -1101,7 +1099,7 @@ exports.initialize = function () {
     $("#stream_message_recipient_topic").typeahead({
         source() {
             const stream_name = compose_state.stream_name();
-            return exports.topics_seen_for(stream_name);
+            return topics_seen_for(stream_name);
         },
         items: 3,
         fixed: true,
@@ -1118,8 +1116,8 @@ exports.initialize = function () {
     });
 
     $("#private_message_recipient").typeahead({
-        source: exports.get_pm_people,
-        items: exports.max_num_items,
+        source: get_pm_people,
+        items: max_num_items,
         dropup: true,
         fixed: true,
         highlighter(item) {
@@ -1154,13 +1152,11 @@ exports.initialize = function () {
         stopAdvance: true, // Do not advance to the next field on a Tab or Enter
     });
 
-    exports.initialize_compose_typeahead("#compose-textarea");
+    initialize_compose_typeahead("#compose-textarea");
 
     $("#private_message_recipient").on("blur", function () {
         const val = $(this).val();
         const recipients = typeahead_helper.get_cleaned_pm_recipients(val);
         $(this).val(recipients.join(", "));
     });
-};
-
-window.composebox_typeahead = exports;
+}
diff --git a/static/js/global.d.ts b/static/js/global.d.ts
index 31481aac22..21167ad135 100644
--- a/static/js/global.d.ts
+++ b/static/js/global.d.ts
@@ -4,7 +4,6 @@
 // to TS.
 
 declare let blueslip: any;
-declare let composebox_typeahead: any;
 declare let csrf_token: any;
 declare let current_msg_list: any;
 declare let emoji: any;
diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index 8c1b567d0b..188d56d8d2 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -6,6 +6,7 @@ import render_topic_edit_form from "../templates/topic_edit_form.hbs";
 import * as channel from "./channel";
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
+import * as composebox_typeahead from "./composebox_typeahead";
 import * as condense from "./condense";
 import * as echo from "./echo";
 import * as loading from "./loading";
diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js
index c1fd55f5d4..33f3ba0e67 100644
--- a/static/js/server_events_dispatch.js
+++ b/static/js/server_events_dispatch.js
@@ -7,6 +7,7 @@ import * as attachments_ui from "./attachments_ui";
 import * as bot_data from "./bot_data";
 import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
+import * as composebox_typeahead from "./composebox_typeahead";
 import * as emoji_picker from "./emoji_picker";
 import * as hotspots from "./hotspots";
 import * as markdown from "./markdown";
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index c96377cd6c..f09a31f35b 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -12,6 +12,7 @@ import * as bot_data from "./bot_data";
 import * as click_handlers from "./click_handlers";
 import * as compose from "./compose";
 import * as compose_pm_pill from "./compose_pm_pill";
+import * as composebox_typeahead from "./composebox_typeahead";
 import * as condense from "./condense";
 import * as copy_and_paste from "./copy_and_paste";
 import * as drafts from "./drafts";