diff --git a/.eslintrc.json b/.eslintrc.json index 1a032b4f22..cd9db74ba7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -269,7 +269,6 @@ "user_groups": false, "user_pill": false, "poll_widget": false, - "vdom": false, "widgetize": false, "zxcvbn": false } diff --git a/frontend_tests/node_tests/pm_list.js b/frontend_tests/node_tests/pm_list.js index 0254c955c9..d2be76b936 100644 --- a/frontend_tests/node_tests/pm_list.js +++ b/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(); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index ad1b2f5da3..24954c15f8 100644 --- a/static/js/bundles/app.js +++ b/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"; diff --git a/static/js/pm_list.js b/static/js/pm_list.js index b4735ba5d8..2b02799a4a 100644 --- a/static/js/pm_list.js +++ b/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; diff --git a/static/js/pm_list_dom.js b/static/js/pm_list_dom.js index 7323c6d5ce..d57fc4dd6f 100644 --- a/static/js/pm_list_dom.js +++ b/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); diff --git a/static/js/topic_list.js b/static/js/topic_list.js index 122a6c28ec..83906a750e 100644 --- a/static/js/topic_list.js +++ b/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. diff --git a/static/js/vdom.js b/static/js/vdom.js index a79e206a0c..812eed79fe 100644 --- a/static/js/vdom.js +++ b/static/js/vdom.js @@ -1,8 +1,6 @@ -"use strict"; +import _ from "lodash"; -const _ = require("lodash"); - -exports.eq_array = (a, b, eq) => { +export function 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) => ({ - tag_name: "ul", - opts, -}); +export function ul(opts) { + return { + 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); -}; - -window.vdom = exports; + update_attrs(find(), new_opts.attrs, old_opts.attrs); +}