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

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

.eslintrc.json

@@ -145,7 +145,6 @@
                 "realm_night_logo": false,
                 "settings_profile_fields": false,
                 "StripeCheckout": false,
-                "subs": false,
                 "ui": false,
                 "ui_init": false,
                 "zxcvbn": false

frontend_tests/node_tests/compose.js

@@ -85,7 +85,8 @@ rewiremock("../../static/js/loading").with(loading);
 const page_params = set_global("page_params", {});
 const resize = {__esModule: true};
 rewiremock("../../static/js/resize").with(resize);
-const subs = set_global("subs", {});
+const subs = {__esModule: true};
+rewiremock("../../static/js/subs").with(subs);
 const ui_util = {__esModule: true};
 
 rewiremock("../../static/js/ui_util").with(ui_util);

frontend_tests/node_tests/dispatch_subs.js

@@ -17,7 +17,9 @@ const compose_fade = {__esModule: true};
 rewiremock("../../static/js/compose_fade").with(compose_fade);
 const stream_events = {__esModule: true};
 rewiremock("../../static/js/stream_events").with(stream_events);
-const subs = set_global("subs", {});
+const subs = {__esModule: true};
+
+rewiremock("../../static/js/subs").with(subs);
 
 rewiremock.enable();
 

frontend_tests/node_tests/hashchange.js

@@ -38,7 +38,8 @@ const overlays = {__esModule: true};
 rewiremock("../../static/js/overlays").with(overlays);
 const settings = {__esModule: true};
 rewiremock("../../static/js/settings").with(settings);
-const subs = set_global("subs", {});
+const subs = {__esModule: true};
+rewiremock("../../static/js/subs").with(subs);
 const ui_util = {__esModule: true};
 rewiremock("../../static/js/ui_util").with(ui_util);
 rewiremock("../../static/js/top_left_corner").with({

frontend_tests/node_tests/hotkey.js

@@ -104,7 +104,9 @@ const search = {__esModule: true};
 rewiremock("../../static/js/search").with(search);
 const stream_list = {__esModule: true};
 rewiremock("../../static/js/stream_list").with(stream_list);
-const subs = set_global("subs", {});
+const subs = {__esModule: true};
+
+rewiremock("../../static/js/subs").with(subs);
 
 set_global("current_msg_list", {
     empty() {

frontend_tests/node_tests/stream_edit.js

@@ -37,7 +37,6 @@ rewiremock.enable();
 
 const peer_data = zrequire("peer_data");
 const people = zrequire("people");
-zrequire("subs");
 const stream_edit = zrequire("stream_edit");
 const stream_data = zrequire("stream_data");
 const stream_pill = zrequire("stream_pill");

frontend_tests/node_tests/stream_events.js

@@ -39,7 +39,11 @@ rewiremock("../../static/js/message_list").with({
     },
 });
 
-const subs = set_global("subs", {update_settings_for_subscribed: noop});
+const subs = {
+    __esModule: true,
+    update_settings_for_subscribed: noop,
+};
+rewiremock("../../static/js/subs").with(subs);
 rewiremock("../../static/js/overlays").with({streams_open: () => true});
 
 rewiremock.enable();

frontend_tests/node_tests/ui_init.js

@@ -94,7 +94,7 @@ rewiremock("../../static/js/server_events").with(server_events);
 rewiremock("../../static/js/settings_sections").with({initialize() {}});
 rewiremock("../../static/js/settings_panel_menu").with({initialize() {}});
 rewiremock("../../static/js/settings_toggle").with({initialize() {}});
-set_global("subs", {initialize() {}});
+rewiremock("../../static/js/subs").with({initialize() {}});
 rewiremock("../../static/js/timerender").with({initialize() {}});
 const ui = set_global("ui", {initialize() {}});
 rewiremock("../../static/js/unread_ui").with({initialize() {}});

static/js/bundles/app.js

@@ -18,7 +18,6 @@ import "../fold_dict";
 import "../setup";
 import "../message_list";
 import "../reload";
-import "../subs";
 import "../ui";
 import "../composebox_typeahead";
 import "../hotkey";

static/js/compose.js

@@ -30,6 +30,7 @@ import * as server_events from "./server_events";
 import * as settings_config from "./settings_config";
 import * as stream_data from "./stream_data";
 import * as stream_edit from "./stream_edit";
+import * as subs from "./subs";
 import * as transmit from "./transmit";
 import * as ui_report from "./ui_report";
 import * as upload from "./upload";

static/js/global.d.ts

@@ -15,7 +15,6 @@ declare let message_events: any;
 declare let page_params: any;
 declare let pointer: any;
 declare let settings_profile_fields: any;
-declare let subs: any;
 declare let ui: any;
 declare let zulip_test: any;
 

static/js/hashchange.js

@@ -12,6 +12,7 @@ import * as recent_topics from "./recent_topics";
 import * as search from "./search";
 import * as settings from "./settings";
 import * as settings_panel_menu from "./settings_panel_menu";
+import * as subs from "./subs";
 import * as top_left_corner from "./top_left_corner";
 import * as ui_util from "./ui_util";
 

static/js/hotkey.js

@@ -28,6 +28,7 @@ import * as recent_topics from "./recent_topics";
 import * as search from "./search";
 import * as stream_list from "./stream_list";
 import * as stream_popover from "./stream_popover";
+import * as subs from "./subs";
 import * as topic_zoom from "./topic_zoom";
 
 function do_narrow_action(action) {

static/js/server_events_dispatch.js

@@ -45,6 +45,7 @@ import * as stream_events from "./stream_events";
 import * as stream_list from "./stream_list";
 import * as stream_topic_history from "./stream_topic_history";
 import * as submessage from "./submessage";
+import * as subs from "./subs";
 import * as typing_events from "./typing_events";
 import * as unread_ops from "./unread_ops";
 import * as user_events from "./user_events";

static/js/stream_color.js

@@ -2,6 +2,7 @@ import _ from "lodash";
 
 import * as colorspace from "./colorspace";
 import * as message_view_header from "./message_view_header";
+import * as subs from "./subs";
 
 export const default_color = "#c2c2c2";
 

static/js/stream_create.js

@@ -7,6 +7,7 @@ import * as loading from "./loading";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
 import * as stream_data from "./stream_data";
+import * as subs from "./subs";
 import * as ui_report from "./ui_report";
 
 let created_stream;

static/js/stream_edit.js

@@ -21,6 +21,7 @@ import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as stream_pill from "./stream_pill";
 import * as stream_ui_updates from "./stream_ui_updates";
+import * as subs from "./subs";
 import * as ui_report from "./ui_report";
 import * as user_pill from "./user_pill";
 import * as util from "./util";

static/js/stream_events.js

@@ -11,6 +11,7 @@ import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as stream_list from "./stream_list";
 import * as stream_muting from "./stream_muting";
+import * as subs from "./subs";
 
 // In theory, this function should apply the account-level defaults,
 // however, they are only called after a manual override, so

static/js/stream_popover.js

@@ -18,6 +18,7 @@ import * as popovers from "./popovers";
 import * as resize from "./resize";
 import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
+import * as subs from "./subs";
 import * as ui_util from "./ui_util";
 import * as unread_ops from "./unread_ops";
 

static/js/stream_ui_updates.js

@@ -4,6 +4,7 @@ import * as ListWidget from "./list_widget";
 import * as peer_data from "./peer_data";
 import * as stream_data from "./stream_data";
 import * as stream_edit from "./stream_edit";
+import * as subs from "./subs";
 
 export function initialize_disable_btn_hint_popover(
     btn_wrapper,

static/js/subs.js

@@ -1,35 +1,33 @@
-"use strict";
+import _ from "lodash";
 
-const _ = require("lodash");
+import render_subscription from "../templates/subscription.hbs";
+import render_subscription_settings from "../templates/subscription_settings.hbs";
+import render_subscription_table_body from "../templates/subscription_table_body.hbs";
+import render_subscriptions from "../templates/subscriptions.hbs";
 
-const render_subscription = require("../templates/subscription.hbs");
+import * as channel from "./channel";
-const render_subscription_settings = require("../templates/subscription_settings.hbs");
+import * as components from "./components";
-const render_subscription_table_body = require("../templates/subscription_table_body.hbs");
+import * as compose_state from "./compose_state";
-const render_subscriptions = require("../templates/subscriptions.hbs");
+import * as hash_util from "./hash_util";
+import * as hashchange from "./hashchange";
+import * as loading from "./loading";
+import * as message_live_update from "./message_live_update";
+import * as message_view_header from "./message_view_header";
+import * as overlays from "./overlays";
+import * as people from "./people";
+import * as scroll_util from "./scroll_util";
+import * as search_util from "./search_util";
+import * as stream_create from "./stream_create";
+import * as stream_data from "./stream_data";
+import * as stream_edit from "./stream_edit";
+import * as stream_list from "./stream_list";
+import * as stream_muting from "./stream_muting";
+import * as stream_ui_updates from "./stream_ui_updates";
+import * as typeahead_helper from "./typeahead_helper";
+import * as ui_report from "./ui_report";
+import * as util from "./util";
 
-const channel = require("./channel");
+export const show_subs_pane = {
-const components = require("./components");
-const compose_state = require("./compose_state");
-const hash_util = require("./hash_util");
-const hashchange = require("./hashchange");
-const loading = require("./loading");
-const message_live_update = require("./message_live_update");
-const message_view_header = require("./message_view_header");
-const overlays = require("./overlays");
-const people = require("./people");
-const scroll_util = require("./scroll_util");
-const search_util = require("./search_util");
-const stream_create = require("./stream_create");
-const stream_data = require("./stream_data");
-const stream_edit = require("./stream_edit");
-const stream_list = require("./stream_list");
-const stream_muting = require("./stream_muting");
-const stream_ui_updates = require("./stream_ui_updates");
-const typeahead_helper = require("./typeahead_helper");
-const ui_report = require("./ui_report");
-const util = require("./util");
-
-exports.show_subs_pane = {
     nothing_selected() {
         $(".stream-info-title, .settings, #stream-creation").hide();
         $("#stream_settings_title, .nothing-selected").show();
@@ -44,16 +42,16 @@ exports.show_subs_pane = {
     },
 };
 
-exports.row_for_stream_id = function (stream_id) {
+export function row_for_stream_id(stream_id) {
     return $(`.stream-row[data-stream-id='${CSS.escape(stream_id)}']`);
-};
+}
 
-exports.is_sub_already_present = function (sub) {
+export function is_sub_already_present(sub) {
-    return exports.row_for_stream_id(sub.stream_id).length > 0;
+    return row_for_stream_id(sub.stream_id).length > 0;
-};
+}
 
-exports.update_left_panel_row = (sub) => {
+export function update_left_panel_row(sub) {
-    const row = exports.row_for_stream_id(sub.stream_id);
+    const row = row_for_stream_id(sub.stream_id);
 
     if (row.length === 0) {
         return;
@@ -74,18 +72,18 @@ exports.update_left_panel_row = (sub) => {
         new_row.addClass("active");
     }
 
-    exports.add_tooltip_to_left_panel_row(new_row);
+    add_tooltip_to_left_panel_row(new_row);
 
     row.replaceWith(new_row);
-};
+}
 
-exports.settings_button_for_sub = function (sub) {
+export function settings_button_for_sub(sub) {
     // We don't do expectOne() here, because this button is only
     // visible if the user has that stream selected in the streams UI.
     return $(
         `.subscription_settings[data-stream-id='${CSS.escape(sub.stream_id)}'] .subscribe-button`,
     );
-};
+}
 
 function get_row_data(row) {
     const row_id = Number.parseInt(row.attr("data-stream-id"), 10);
@@ -99,7 +97,7 @@ function get_row_data(row) {
     return undefined;
 }
 
-exports.get_active_data = function () {
+export function get_active_data() {
     const active_row = $("div.stream-row.active");
     const valid_active_id = Number.parseInt(active_row.attr("data-stream-id"), 10);
     const active_tabs = $(".subscriptions-container").find("div.ind-tab.selected");
@@ -108,7 +106,7 @@ exports.get_active_data = function () {
         id: valid_active_id,
         tabs: active_tabs,
     };
-};
+}
 
 function get_hash_safe() {
     if (typeof window !== "undefined" && typeof window.location.hash === "string") {
@@ -141,7 +139,7 @@ function should_list_all_streams() {
 
 // this finds the stream that is actively open in the settings and focused in
 // the left side.
-exports.active_stream = function () {
+export function active_stream() {
     const hash_components = window.location.hash.slice(1).split(/\//);
 
     // if the string casted to a number is valid, and another component
@@ -154,26 +152,26 @@ exports.active_stream = function () {
     }
 
     return undefined;
-};
+}
 
-exports.set_muted = function (sub, is_muted, status_element) {
+export function set_muted(sub, is_muted, status_element) {
     stream_muting.update_is_muted(sub, is_muted);
     stream_edit.set_stream_property(sub, "is_muted", sub.is_muted, status_element);
-};
+}
 
-exports.toggle_pin_to_top_stream = function (sub) {
+export function toggle_pin_to_top_stream(sub) {
     stream_edit.set_stream_property(sub, "pin_to_top", !sub.pin_to_top);
-};
+}
 
 let subscribed_only = true;
 
-exports.is_subscribed_stream_tab_active = function () {
+export function is_subscribed_stream_tab_active() {
     // Returns true if "Subscribed" tab in stream settings is open
     // otherwise false.
     return subscribed_only;
-};
+}
 
-exports.update_stream_name = function (sub, new_name) {
+export function update_stream_name(sub, new_name) {
     const old_name = sub.name;
 
     // Rename the stream internally.
@@ -187,7 +185,7 @@ exports.update_stream_name = function (sub, new_name) {
     stream_edit.update_stream_name(sub, new_name);
 
     // Update the subscriptions page
-    const sub_row = exports.row_for_stream_id(stream_id);
+    const sub_row = row_for_stream_id(stream_id);
     sub_row.find(".stream-name").text(new_name);
 
     // Update the message feed.
@@ -203,14 +201,14 @@ exports.update_stream_name = function (sub, new_name) {
 
     // Update navbar if needed
     message_view_header.maybe_rerender_title_area_for_stream(sub);
-};
+}
 
-exports.update_stream_description = function (sub, description, rendered_description) {
+export function update_stream_description(sub, description, rendered_description) {
     sub.description = description;
     sub.rendered_description = rendered_description.replace("<p>", "").replace("</p>", "");
 
     // Update stream row
-    const sub_row = exports.row_for_stream_id(sub.stream_id);
+    const sub_row = row_for_stream_id(sub.stream_id);
     sub_row.find(".description").html(util.clean_user_content_links(sub.rendered_description));
 
     // Update stream settings
@@ -218,14 +216,14 @@ exports.update_stream_description = function (sub, description, rendered_descrip
 
     // Update navbar if needed
     message_view_header.maybe_rerender_title_area_for_stream(sub);
-};
+}
 
-exports.update_stream_privacy = function (sub, values) {
+export function update_stream_privacy(sub, values) {
     stream_data.update_stream_privacy(sub, values);
     stream_data.update_calculated_fields(sub);
 
     // Update UI elements
-    exports.update_left_panel_row(sub);
+    update_left_panel_row(sub);
     stream_ui_updates.update_stream_subscription_type_text(sub);
     stream_ui_updates.update_change_stream_privacy_settings(sub);
     stream_ui_updates.update_settings_button_for_sub(sub);
@@ -234,33 +232,33 @@ exports.update_stream_privacy = function (sub, values) {
 
     // Update navbar if needed
     message_view_header.maybe_rerender_title_area_for_stream(sub);
-};
+}
 
-exports.update_stream_post_policy = function (sub, new_value) {
+export function update_stream_post_policy(sub, new_value) {
     stream_data.update_stream_post_policy(sub, new_value);
     stream_data.update_calculated_fields(sub);
 
     stream_ui_updates.update_stream_subscription_type_text(sub);
-};
+}
 
-exports.update_message_retention_setting = function (sub, new_value) {
+export function update_message_retention_setting(sub, new_value) {
     stream_data.update_message_retention_setting(sub, new_value);
     stream_ui_updates.update_stream_subscription_type_text(sub);
-};
+}
 
-exports.set_color = function (stream_id, color) {
+export function set_color(stream_id, color) {
     const sub = stream_data.get_sub_by_id(stream_id);
     stream_edit.set_stream_property(sub, "color", color);
-};
+}
 
-exports.update_subscribers_ui = function (sub) {
+export function update_subscribers_ui(sub) {
-    exports.update_left_panel_row(sub);
+    update_left_panel_row(sub);
     stream_ui_updates.update_subscribers_list(sub);
     message_view_header.maybe_rerender_title_area_for_stream(sub);
-};
+}
 
-exports.add_sub_to_table = function (sub) {
+export function add_sub_to_table(sub) {
-    if (exports.is_sub_already_present(sub)) {
+    if (is_sub_already_present(sub)) {
         // If a stream is already listed/added in subscription modal,
         // display stream in `Subscribed` tab and return.
         // This can happen in some corner cases (which might
@@ -274,7 +272,7 @@ exports.add_sub_to_table = function (sub) {
     const setting_sub = stream_data.get_sub_for_settings(sub);
     const html = render_subscription(setting_sub);
     const new_row = $(html);
-    exports.add_tooltip_to_left_panel_row(new_row);
+    add_tooltip_to_left_panel_row(new_row);
 
     if (stream_create.get_name() === sub.name) {
         ui.get_content_element($(".streams-list")).prepend(new_row);
@@ -293,23 +291,23 @@ exports.add_sub_to_table = function (sub) {
         // good way to associate with this request because the stream
         // ID isn't known yet.  These are appended to the top of the
         // list, so they are more visible.
-        exports.row_for_stream_id(sub.stream_id).trigger("click");
+        row_for_stream_id(sub.stream_id).trigger("click");
         stream_create.reset_created_stream();
     }
-};
+}
 
-exports.remove_stream = function (stream_id) {
+export function remove_stream(stream_id) {
     // It is possible that row is empty when we deactivate a
     // stream, but we let jQuery silently handle that.
-    const row = exports.row_for_stream_id(stream_id);
+    const row = row_for_stream_id(stream_id);
     row.remove();
     const sub = stream_data.get_sub_by_id(stream_id);
     if (stream_edit.is_sub_settings_active(sub)) {
         stream_edit.open_edit_panel_empty();
     }
-};
+}
 
-exports.update_settings_for_subscribed = function (sub) {
+export function update_settings_for_subscribed(sub) {
     stream_ui_updates.update_add_subscriptions_elements(sub);
     $(
         `.subscription_settings[data-stream-id='${CSS.escape(
@@ -317,39 +315,39 @@ exports.update_settings_for_subscribed = function (sub) {
         )}'] #preview-stream-button`,
     ).show();
 
-    if (exports.is_sub_already_present(sub)) {
+    if (is_sub_already_present(sub)) {
-        exports.update_left_panel_row(sub);
+        update_left_panel_row(sub);
         stream_ui_updates.update_stream_row_in_settings_tab(sub);
         stream_ui_updates.update_settings_button_for_sub(sub);
         stream_ui_updates.update_change_stream_privacy_settings(sub);
     } else {
-        exports.add_sub_to_table(sub);
+        add_sub_to_table(sub);
     }
 
     stream_ui_updates.update_subscribers_list(sub);
 
     // Display the swatch and subscription stream_settings
     stream_ui_updates.update_regular_sub_settings(sub);
-};
+}
 
-exports.show_active_stream_in_left_panel = function () {
+export function show_active_stream_in_left_panel() {
     const selected_row = get_hash_safe().split(/\//)[1];
 
     if (Number.parseFloat(selected_row)) {
-        const sub_row = exports.row_for_stream_id(selected_row);
+        const sub_row = row_for_stream_id(selected_row);
         sub_row.addClass("active");
     }
-};
+}
 
-exports.add_tooltip_to_left_panel_row = (row) => {
+export function add_tooltip_to_left_panel_row(row) {
     row.find('.sub-info-box [class$="-bar"] [class$="-count"]').tooltip({
         placement: "left",
         animation: false,
     });
-};
+}
 
-exports.update_settings_for_unsubscribed = function (sub) {
+export function update_settings_for_unsubscribed(sub) {
-    exports.update_left_panel_row(sub);
+    update_left_panel_row(sub);
     stream_ui_updates.update_subscribers_list(sub);
     stream_ui_updates.update_settings_button_for_sub(sub);
     stream_ui_updates.update_regular_sub_settings(sub);
@@ -367,7 +365,7 @@ exports.update_settings_for_unsubscribed = function (sub) {
 
     // Remove private streams from subscribed streams list.
     stream_ui_updates.update_stream_row_in_settings_tab(sub);
-};
+}
 
 function triage_stream(left_panel_params, sub) {
     if (left_panel_params.subscribed_only && !sub.subscribed) {
@@ -426,7 +424,7 @@ function get_stream_id_buckets(stream_ids, left_panel_params) {
     return buckets;
 }
 
-exports.render_left_panel_superset = function () {
+export function render_left_panel_superset() {
     // For annoying legacy reasons we render all the subs we are
     // allowed to know about and put them in the DOM, then we do
     // a second pass where we filter/sort them.
@@ -441,17 +439,17 @@ exports.render_left_panel_superset = function () {
     });
 
     ui.get_content_element($("#subscriptions_table .streams-list")).html(html);
-};
+}
 
 // LeftPanelParams { input: String, subscribed_only: Boolean, sort_order: String }
-exports.redraw_left_panel = function (left_panel_params) {
+export function redraw_left_panel(left_panel_params) {
     // We only get left_panel_params passed in from tests.  Real
     // code calls get_left_panel_params().
     if (left_panel_params === undefined) {
-        left_panel_params = exports.get_left_panel_params();
+        left_panel_params = get_left_panel_params();
     }
 
-    exports.show_active_stream_in_left_panel();
+    show_active_stream_in_left_panel();
 
     function stream_id_for_row(row) {
         return Number.parseInt($(row).attr("data-stream-id"), 10);
@@ -498,19 +496,19 @@ exports.redraw_left_panel = function (left_panel_params) {
             widgets.get(stream_id),
         );
     }
-    exports.maybe_reset_right_panel();
+    maybe_reset_right_panel();
 
     for (const row of $("#subscriptions_table .stream-row")) {
-        exports.add_tooltip_to_left_panel_row($(row));
+        add_tooltip_to_left_panel_row($(row));
     }
 
     // return this for test convenience
     return [...buckets.name, ...buckets.desc];
-};
+}
 
 let sort_order = "by-stream-name";
 
-exports.get_left_panel_params = function () {
+export function get_left_panel_params() {
     const search_box = $("#stream_filter input[type='text']");
     const input = search_box.expectOne().val().trim();
     const params = {
@@ -519,20 +517,20 @@ exports.get_left_panel_params = function () {
         sort_order,
     };
     return params;
-};
+}
 
-exports.maybe_reset_right_panel = function () {
+export function maybe_reset_right_panel() {
     if ($(".stream-row.active").hasClass("notdisplayed")) {
         $(".right .settings").hide();
         $(".nothing-selected").show();
         $(".stream-row.active").removeClass("active");
     }
-};
+}
 
 // Make it explicit that our toggler is not created right away.
-exports.toggler = undefined;
+export let toggler;
 
-exports.switch_stream_tab = function (tab_name) {
+export function switch_stream_tab(tab_name) {
     /*
         This switches the stream tab, but it doesn't update
         the toggler widget.  You may instead want to
@@ -545,11 +543,11 @@ exports.switch_stream_tab = function (tab_name) {
         subscribed_only = true;
     }
 
-    exports.redraw_left_panel();
+    redraw_left_panel();
     stream_edit.setup_subscriptions_tab_hash(tab_name);
-};
+}
 
-exports.switch_stream_sort = function (tab_name) {
+export function switch_stream_sort(tab_name) {
     if (
         tab_name === "by-stream-name" ||
         tab_name === "by-subscriber-count" ||
@@ -559,10 +557,10 @@ exports.switch_stream_sort = function (tab_name) {
     } else {
         sort_order = "by-stream-name";
     }
-    exports.redraw_left_panel();
+    redraw_left_panel();
-};
+}
 
-exports.setup_page = function (callback) {
+export function setup_page(callback) {
     // We should strongly consider only setting up the page once,
     // but I am writing these comments write before a big release,
     // so it's too risky a change for now.
@@ -602,7 +600,7 @@ exports.setup_page = function (callback) {
             ],
             html_class: "stream_sorter_toggle",
             callback(value, key) {
-                exports.switch_stream_sort(key);
+                switch_stream_sort(key);
             },
         });
         $("#subscriptions_table .search-container").prepend(sort_toggler.get());
@@ -610,23 +608,23 @@ exports.setup_page = function (callback) {
         // Reset our internal state to reflect that we're initially in
         // the "Subscribed" tab if we're reopening "Manage streams".
         subscribed_only = true;
-        exports.toggler = components.toggle({
+        toggler = components.toggle({
             child_wants_focus: true,
             values: [
                 {label: i18n.t("Subscribed"), key: "subscribed"},
                 {label: i18n.t("All streams"), key: "all-streams"},
             ],
             callback(value, key) {
-                exports.switch_stream_tab(key);
+                switch_stream_tab(key);
             },
         });
 
         if (should_list_all_streams()) {
-            const toggler_elem = exports.toggler.get();
+            const toggler_elem = toggler.get();
             $("#subscriptions_table .search-container").prepend(toggler_elem);
         }
         if (page_params.is_guest) {
-            exports.toggler.disable_tab("all-streams");
+            toggler.disable_tab("all-streams");
         }
 
         // show the "Stream settings" header by default.
@@ -654,12 +652,12 @@ exports.setup_page = function (callback) {
         const rendered = render_subscription_table_body(template_data);
         $("#subscriptions_table").append(rendered);
 
-        exports.render_left_panel_superset();
+        render_left_panel_superset();
         initialize_components();
-        exports.redraw_left_panel();
+        redraw_left_panel();
         stream_create.set_up_handlers();
 
-        const throttled_redraw_left_panel = _.throttle(exports.redraw_left_panel, 50);
+        const throttled_redraw_left_panel = _.throttle(redraw_left_panel, 50);
         $("#stream_filter input[type='text']").on("input", () => {
             // Debounce filtering in case a user is typing quickly
             throttled_redraw_left_panel();
@@ -667,7 +665,7 @@ exports.setup_page = function (callback) {
 
         $("#clear_search_stream_name").on("click", () => {
             $("#stream_filter input[type='text']").val("");
-            exports.redraw_left_panel();
+            redraw_left_panel();
         });
 
         if (callback) {
@@ -680,43 +678,43 @@ exports.setup_page = function (callback) {
     if (!should_list_all_streams()) {
         $(".create_stream_button").val(i18n.t("Subscribe"));
     }
-};
+}
 
-exports.switch_to_stream_row = function (stream_id) {
+export function switch_to_stream_row(stream_id) {
-    const stream_row = exports.row_for_stream_id(stream_id);
+    const stream_row = row_for_stream_id(stream_id);
     const container = $(".streams-list");
 
-    exports.get_active_data().row.removeClass("active");
+    get_active_data().row.removeClass("active");
     stream_row.addClass("active");
 
     scroll_util.scroll_element_into_container(stream_row, container);
 
     // It's dubious that we need this timeout any more.
     setTimeout(() => {
-        if (stream_id === exports.get_active_data().id) {
+        if (stream_id === get_active_data().id) {
             stream_row.trigger("click");
         }
     }, 100);
-};
+}
 
-exports.change_state = function (section) {
+export function change_state(section) {
     // if in #streams/new form.
     if (section === "new") {
         if (!page_params.is_guest) {
-            exports.do_open_create_stream();
+            do_open_create_stream();
         } else {
-            exports.toggler.goto("subscribed");
+            toggler.goto("subscribed");
         }
         return;
     }
 
     if (section === "all") {
-        exports.toggler.goto("all-streams");
+        toggler.goto("all-streams");
         return;
     }
 
     if (section === "subscribed") {
-        exports.toggler.goto("subscribed");
+        toggler.goto("subscribed");
         return;
     }
 
@@ -727,19 +725,19 @@ exports.change_state = function (section) {
         // So redirect guest users to 'subscribed' tab
         // for any unsubscribed stream settings hash
         if (page_params.is_guest && !stream_data.id_is_subscribed(stream_id)) {
-            exports.toggler.goto("subscribed");
+            toggler.goto("subscribed");
         } else {
-            exports.switch_to_stream_row(stream_id);
+            switch_to_stream_row(stream_id);
         }
         return;
     }
 
     blueslip.warn("invalid section for streams: " + section);
-    exports.toggler.goto("subscribed");
+    toggler.goto("subscribed");
-};
+}
 
-exports.launch = function (section) {
+export function launch(section) {
-    exports.setup_page(() => {
+    setup_page(() => {
         overlays.open_overlay({
             name: "subscriptions",
             overlay: $("#subscription_overlay"),
@@ -747,15 +745,15 @@ exports.launch = function (section) {
                 hashchange.exit_overlay();
             },
         });
-        exports.change_state(section);
+        change_state(section);
     });
-    if (!exports.get_active_data().id) {
+    if (!get_active_data().id) {
         $("#search_stream_name").trigger("focus");
     }
-};
+}
 
-exports.switch_rows = function (event) {
+export function switch_rows(event) {
-    const active_data = exports.get_active_data();
+    const active_data = get_active_data();
     let switch_row;
     if (window.location.hash === "#streams/new") {
         // Prevent switching stream rows when creating a new stream
@@ -781,46 +779,46 @@ exports.switch_rows = function (event) {
     const row_data = get_row_data(switch_row);
     if (row_data) {
         const stream_id = row_data.id;
-        exports.switch_to_stream_row(stream_id);
+        switch_to_stream_row(stream_id);
     } else if (event === "up_arrow" && !row_data) {
         $("#search_stream_name").trigger("focus");
     }
     return true;
-};
+}
 
-exports.keyboard_sub = function () {
+export function keyboard_sub() {
-    const active_data = exports.get_active_data();
+    const active_data = get_active_data();
     const stream_filter_tab = $(active_data.tabs[0]).text();
     const row_data = get_row_data(active_data.row);
     if (row_data) {
-        exports.sub_or_unsub(row_data.object);
+        sub_or_unsub(row_data.object);
         if (row_data.object.subscribed && stream_filter_tab === "Subscribed") {
             active_data.row.addClass("notdisplayed");
             active_data.row.removeClass("active");
         }
     }
-};
+}
 
-exports.toggle_view = function (event) {
+export function toggle_view(event) {
-    const active_data = exports.get_active_data();
+    const active_data = get_active_data();
     const stream_filter_tab = $(active_data.tabs[0]).text();
 
     if (event === "right_arrow" && stream_filter_tab === "Subscribed") {
-        exports.toggler.goto("all-streams");
+        toggler.goto("all-streams");
     } else if (event === "left_arrow" && stream_filter_tab === "All streams") {
-        exports.toggler.goto("subscribed");
+        toggler.goto("subscribed");
     }
-};
+}
 
-exports.view_stream = function () {
+export function view_stream() {
-    const active_data = exports.get_active_data();
+    const active_data = get_active_data();
     const row_data = get_row_data(active_data.row);
     if (row_data) {
         const stream_narrow_hash =
             "#narrow/stream/" + hash_util.encode_stream_name(row_data.object.name);
         hashchange.go_to_location(stream_narrow_hash);
     }
-};
+}
 
 /* For the given stream_row, remove the tick and replace by a spinner. */
 function display_subscribe_toggle_spinner(stream_row) {
@@ -923,7 +921,7 @@ function ajaxUnsubscribe(sub, stream_row) {
     });
 }
 
-exports.do_open_create_stream = function () {
+export function do_open_create_stream() {
     // Only call this directly for hash changes.
     // Prefer open_create_stream().
 
@@ -937,25 +935,25 @@ exports.do_open_create_stream = function () {
     }
 
     stream_create.new_stream_clicked(stream);
-};
+}
 
-exports.open_create_stream = function () {
+export function open_create_stream() {
-    exports.do_open_create_stream();
+    do_open_create_stream();
     hashchange.update_browser_history("#streams/new");
-};
+}
 
-exports.sub_or_unsub = function (sub, stream_row) {
+export function sub_or_unsub(sub, stream_row) {
     if (sub.subscribed) {
         ajaxUnsubscribe(sub, stream_row);
     } else {
         ajaxSubscribe(sub.name, sub.color, stream_row);
     }
-};
+}
 
-exports.initialize = function () {
+export function initialize() {
     $("#subscriptions_table").on("click", ".create_stream_button", (e) => {
         e.preventDefault();
-        exports.open_create_stream();
+        open_create_stream();
     });
 
     $(".subscriptions").on("click", "[data-dismiss]", (e) => {
@@ -964,7 +962,7 @@ exports.initialize = function () {
         // click; this fixes an issue where hitting "Enter" would
         // trigger this code path due to bootstrap magic.
         if (e.clientY !== 0) {
-            exports.show_subs_pane.nothing_selected();
+            show_subs_pane.nothing_selected();
         }
     });
 
@@ -991,6 +989,4 @@ exports.initialize = function () {
             }
         });
     })();
-};
+}
-
-window.subs = exports;

static/js/ui_init.js

@@ -57,6 +57,7 @@ import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as stream_edit from "./stream_edit";
 import * as stream_list from "./stream_list";
+import * as subs from "./subs";
 import * as timerender from "./timerender";
 import * as topic_list from "./topic_list";
 import * as topic_zoom from "./topic_zoom";