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

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

.eslintrc.json

@@ -269,7 +269,6 @@
                 "user_groups": false,
                 "user_pill": false,
                 "poll_widget": false,
-                "vdom": false,
                 "widgetize": false,
                 "zxcvbn": false
             }

frontend_tests/node_tests/pm_list.js

@@ -2,6 +2,8 @@
 
 const {strict: assert} = require("assert");
 
+const rewiremock = require("rewiremock/node");
+
 const {set_global, with_field, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
 const $ = require("../zjsunit/zjquery");
@@ -15,11 +17,15 @@ set_global("stream_popover", {
 });
 const unread = set_global("unread", {});
 const unread_ui = set_global("unread_ui", {});
-const vdom = set_global("vdom", {
+const vdom = {
+    __esModule: true,
     render: () => "fake-dom-for-pm-list",
-});
+};
+rewiremock("../../static/js/vdom").with(vdom);
 const pm_list_dom = set_global("pm_list_dom", {});
 
+rewiremock.enable();
+
 zrequire("presence");
 zrequire("buddy_data");
 zrequire("hash_util");
@@ -288,3 +294,4 @@ run_test("ensure coverage", (override) => {
         },
     );
 });
+rewiremock.disable();

static/js/bundles/app.js

@@ -14,7 +14,6 @@ import "flatpickr/dist/plugins/confirmDate/confirmDate";
 
 // Import app JS
 import "../i18n";
-import "../vdom";
 import "../keydown_util";
 import "../rtl";
 import "../fold_dict";

static/js/pm_list.js

@@ -2,6 +2,7 @@
 
 const people = require("./people");
 const pm_conversations = require("./pm_conversations");
+const vdom = require("./vdom");
 
 let prior_dom;
 let private_messages_open = false;

static/js/pm_list_dom.js

@@ -4,6 +4,8 @@ const _ = require("lodash");
 
 const render_pm_list_item = require("../templates/pm_list_item.hbs");
 
+const vdom = require("./vdom");
+
 exports.keyed_pm_li = (convo) => {
     const render = () => render_pm_list_item(convo);
 

static/js/topic_list.js

@@ -7,6 +7,7 @@ const render_more_topics_spinner = require("../templates/more_topics_spinner.hbs
 const render_topic_list_item = require("../templates/topic_list_item.hbs");
 
 const topic_list_data = require("./topic_list_data");
+const vdom = require("./vdom");
 
 /*
     Track all active widgets with a Map.

static/js/vdom.js

@@ -1,8 +1,6 @@
-"use strict";
+import _ from "lodash";
 
-const _ = require("lodash");
+export function eq_array(a, b, eq) {
-
-exports.eq_array = (a, b, eq) => {
     if (a === b) {
         // either both are undefined, or they
         // are referentially equal
@@ -18,14 +16,16 @@ exports.eq_array = (a, b, eq) => {
     }
 
     return a.every((item, i) => eq(item, b[i]));
-};
+}
 
-exports.ul = (opts) => ({
+export function ul(opts) {
-    tag_name: "ul",
+    return {
-    opts,
+        tag_name: "ul",
-});
+        opts,
+    };
+}
 
-exports.render_tag = (tag) => {
+export function render_tag(tag) {
     /*
         This renders a tag into a string.  It will
         automatically escape attributes, but it's your
@@ -53,9 +53,9 @@ exports.render_tag = (tag) => {
 
     const innards = opts.keyed_nodes.map((node) => node.render()).join("\n");
     return start_tag + "\n" + innards + "\n" + end_tag;
-};
+}
 
-exports.update_attrs = (elem, new_attrs, old_attrs) => {
+export function update_attrs(elem, new_attrs, old_attrs) {
     const new_dict = new Map(new_attrs);
     const old_dict = new Map(old_attrs);
 
@@ -70,9 +70,9 @@ exports.update_attrs = (elem, new_attrs, old_attrs) => {
             elem.removeAttr(k);
         }
     }
-};
+}
 
-exports.update = (replace_content, find, new_dom, old_dom) => {
+export function update(replace_content, find, new_dom, old_dom) {
     /*
         The update method allows you to continually
         update a "virtual" representation of your DOM,
@@ -125,7 +125,7 @@ exports.update = (replace_content, find, new_dom, old_dom) => {
         `pm_list_dom.js`.
     */
     function do_full_update() {
-        const rendered_dom = exports.render_tag(new_dom);
+        const rendered_dom = render_tag(new_dom);
         replace_content(rendered_dom);
     }
 
@@ -146,7 +146,7 @@ exports.update = (replace_content, find, new_dom, old_dom) => {
         return;
     }
 
-    const same_structure = exports.eq_array(
+    const same_structure = eq_array(
         new_opts.keyed_nodes,
         old_opts.keyed_nodes,
         (a, b) => a.key === b.key,
@@ -181,7 +181,5 @@ exports.update = (replace_content, find, new_dom, old_dom) => {
         child_elems.eq(i).replaceWith(rendered_dom);
     }
 
-    exports.update_attrs(find(), new_opts.attrs, old_opts.attrs);
+    update_attrs(find(), new_opts.attrs, old_opts.attrs);
-};
+}
-
-window.vdom = exports;