pm_list: Simplify redraws for Private Messages.

We now use vdom-ish techniques to track the
list items for the pm list.  When we go to update
the list, we only re-render nodes whose data
has changed, with two exceptions:

    - Obviously, the first time we do a full render.
    - If the keys for the items have changed (i.e.
      a new node has come in or the order has changed),
      we just re-render the whole list.

If the keys are the same since the last re-render, we
only re-render individual items if their data has
changed.

Most of the new code is in these two modules:

    - pm_list_dom.js
    - vdom.js

We remove all of the code in pm_list.js that is
related to updating DOM with unread counts.

For presence updates, we are now *never*
re-rendering the whole list, since presence
updates only change individual line items and
don't affect the keys.  Instead, we just update
any changed elements in place.

The main thing that makes this all work is the
`update` method in `vdom`, which is totally generic
and essentially does a few simple jobs:

    - detect if keys are different
    - just render the whole ul as needed
    - for items that change, do the appropriate
      jQuery to update the item in place

Note that this code seems to play nice with simplebar.

Also, this code continues to use templates to render
the individual list items.

FWIW this code isn't radically different than list_render,
but it's got some key differences:

    - There are fewer bells and whistles in this code.
      Some of the stuff that list_render does is overkill
      for the PM list.

    - This code detects data changes.

Note that the vdom scheme is agnostic about templates;
it simply requires the child nodes to provide a render
method.  (This is similar to list_render, which is also
technically agnostic about rendering, but which also
does use templates in most cases.)

These fixes are somewhat related to #13605, but we
haven't gotten a solid repro on that issue, and
the scrolling issues there may be orthogonal to the
redraws.  But having fewer moving parts here should
help, and we won't get the rug pulled out from under
us on every presence update.

There are two possible extensions to this that are
somewhat overlapping in nature, but can be done
one a time.

    * We can do a deeper vdom approach here that
      gets us away from templates, and just have
      nodes write to an AST.  I have this on another
      branch, but it might be overkill.

    * We can avoid some redraws by detecting where
      keys are moving up and down.  I'm not completely
      sure we need it for the PM list.

If this gets merged, we may want to try similar
things for the stream list, which also does a fairly
complicated mixture of big-hammer re-renders and
surgical updates-in-place (with custom code).

BTW we have 100% line coverage for vdom.js.

.eslintrc.json

@@ -115,6 +115,7 @@
         "people": false,
         "pm_conversations": false,
         "pm_list": false,
+        "pm_list_dom": false,
         "pointer": false,
         "popovers": false,
         "presence": false,
@@ -209,6 +210,7 @@
         "user_status_ui": false,
         "util": false,
         "poll_widget": false,
+        "vdom": false,
         "widgetize": false,
         "zcommand": false,
         "zform": false,

frontend_tests/node_tests/pm_list.js

@@ -1,7 +1,5 @@
 set_global('$', global.make_zjquery());
 
-const Dict = zrequire('dict').Dict;
-
 set_global('narrow_state', {});
 set_global('resize', {
     resize_stream_filters_container: function () {},
@@ -18,12 +16,17 @@ set_global('blueslip', global.make_zblueslip());
 set_global('popovers', {
     hide_all: function () {},
 });
+set_global('vdom', {
+    render: () => {
+        return 'fake-dom-for-pm-list';
+    },
+});
+set_global('pm_list_dom', {});
 
 zrequire('user_status');
 zrequire('presence');
 zrequire('buddy_data');
 zrequire('hash_util');
-set_global('Handlebars', global.make_handlebars());
 zrequire('people');
 zrequire('pm_conversations');
 zrequire('pm_list');
@@ -73,12 +76,11 @@ run_test('build_private_messages_list', () => {
         return 1;
     };
 
-    let template_data;
+    let pm_data;
 
-    global.stub_templates(function (template_name, data) {
-        assert.equal(template_name, 'sidebar_private_message_list');
-        template_data = data;
-    });
+    pm_list_dom.pm_ul = (data) => {
+        pm_data = data;
+    };
 
     narrow_state.filter = () => {};
     pm_list._build_private_messages_list();
@@ -97,7 +99,7 @@ run_test('build_private_messages_list', () => {
         },
     ];
 
-    assert.deepEqual(template_data, {messages: expected_data});
+    assert.deepEqual(pm_data, expected_data);
 
     global.unread.num_unread_for_person = function () {
         return 0;
@@ -105,11 +107,11 @@ run_test('build_private_messages_list', () => {
     pm_list._build_private_messages_list();
     expected_data[0].unread = 0;
     expected_data[0].is_zero = true;
-    assert.deepEqual(template_data, {messages: expected_data});
+    assert.deepEqual(pm_data, expected_data);
 
     pm_list.initialize();
     pm_list._build_private_messages_list();
-    assert.deepEqual(template_data, {messages: expected_data});
+    assert.deepEqual(pm_data, expected_data);
 });
 
 run_test('build_private_messages_list_bot', () => {
@@ -120,11 +122,12 @@ run_test('build_private_messages_list_bot', () => {
         return 1;
     };
 
-    let template_data;
-    global.stub_templates(function (template_name, data) {
-        assert.equal(template_name, 'sidebar_private_message_list');
-        template_data = data;
-    });
+    let pm_data;
+    pm_list_dom.pm_ul = (data) => {
+        pm_data = data;
+    };
+
+    narrow_state.active = () => true;
 
     pm_list._build_private_messages_list();
     const expected_data = [
@@ -152,75 +155,44 @@ run_test('build_private_messages_list_bot', () => {
         },
     ];
 
-    assert.deepEqual(template_data, {messages: expected_data});
+    assert.deepEqual(pm_data, expected_data);
 });
 
 run_test('update_dom_with_unread_counts', () => {
+    let counts;
+    let toggle_button_set;
+
     const total_value = $.create('total-value-stub');
     const total_count = $.create('total-count-stub');
     const private_li = $(".top_left_private_messages");
     private_li.set_find_results('.count', total_count);
     total_count.set_find_results('.value', total_value);
 
-    const child_value = $.create('child-value-stub');
-    const child_count = $.create('child-count-stub');
-    const child_li = $.create('child-li-stub');
-    private_li.set_find_results("li[data-user-ids-string='101,102']", child_li);
-    child_li.set_find_results('.private_message_count', child_count);
-    child_count.set_find_results('.value', child_value);
-
-    child_value.length = 1;
-    child_count.length = 1;
-
-    const pm_count = new Dict();
-    const user_ids_string = '101,102';
-    pm_count.set(user_ids_string, 7);
-
-    let counts = {
+    counts = {
         private_message_count: 10,
-        pm_count: pm_count,
     };
 
-    let toggle_button_set;
     unread_ui.set_count_toggle_button = function (elt, count) {
         toggle_button_set = true;
         assert.equal(count, 10);
     };
 
+    toggle_button_set = false;
     pm_list.update_dom_with_unread_counts(counts);
-
     assert(toggle_button_set);
-    assert.equal(child_value.text(), '7');
-    assert.equal(total_value.text(), '10');
 
-    pm_count.set(user_ids_string, 0);
     counts = {
         private_message_count: 0,
-        pm_count: pm_count,
     };
-    toggle_button_set = false;
+
     unread_ui.set_count_toggle_button = function (elt, count) {
         toggle_button_set = true;
         assert.equal(count, 0);
     };
-    pm_list.update_dom_with_unread_counts(counts);
 
-    assert(toggle_button_set);
-    assert.equal(child_value.text(), '');
-    assert.equal(total_value.text(), '');
-
-    const pm_li = pm_list.get_li_for_user_ids_string("101,102");
-    pm_li.find = function (sel) {
-        assert.equal(sel, '.private_message_count');
-        return {find: function (sel) {
-            assert.equal(sel, '.value');
-            return [];
-        }};
-    };
+    toggle_button_set = false;
     pm_list.update_dom_with_unread_counts(counts);
     assert(toggle_button_set);
-    assert.equal(child_value.text(), '');
-    assert.equal(total_value.text(), '');
 });
 
 run_test('get_active_user_ids_string', () => {
@@ -284,15 +256,16 @@ function with_fake_list(f) {
 
 run_test('expand', () => {
     with_fake_list(() => {
-        let html_inserted;
+        let html_updated;
 
-        $('#private-container').html = function (html) {
-            assert.equal(html, 'PM_LIST_CONTENTS');
-            html_inserted = true;
+        vdom.update = (container) => {
+            assert.equal(container.selector, '#private-container');
+            html_updated = true;
         };
+
         pm_list.expand();
 
-        assert(html_inserted);
+        assert(html_updated);
     });
 });
 
@@ -300,11 +273,11 @@ run_test('update_private_messages', () => {
     narrow_state.active = () => true;
 
     with_fake_list(() => {
-        let html_inserted;
+        let html_updated;
 
-        $('#private-container').html = function (html) {
-            assert.equal(html, 'PM_LIST_CONTENTS');
-            html_inserted = true;
+        vdom.update = (container) => {
+            assert.equal(container.selector, '#private-container');
+            html_updated = true;
         };
 
         const orig_is_all_privates = pm_list.is_all_privates;
@@ -312,7 +285,7 @@ run_test('update_private_messages', () => {
 
         pm_list.update_private_messages();
 
-        assert(html_inserted);
+        assert(html_updated);
         assert($(".top_left_private_messages").hasClass('active-filter'));
 
         pm_list.is_all_privates = orig_is_all_privates;

frontend_tests/node_tests/templates.js

@@ -1156,23 +1156,6 @@ run_test('settings_tab', () => {
 
 });
 
-run_test('sidebar_private_message_list', () => {
-    const args = {
-        want_show_more_messages_links: true,
-        messages: [
-            {
-                recipients: "alice,bob",
-            },
-        ],
-    };
-
-    let html = '';
-    html += render('sidebar_private_message_list', args);
-
-    const conversations = $(html).find('a').text().trim().split('\n');
-    assert.equal(conversations[0], 'alice,bob');
-});
-
 run_test('stream_member_list_entry', () => {
     const everyone_items = ["subscriber-name", "subscriber-email"];
     const admin_items = ["remove-subscriber-button"];

frontend_tests/node_tests/vdom.js

@@ -0,0 +1,218 @@
+set_global('blueslip', global.make_zblueslip());
+zrequire('util');
+zrequire('vdom');
+
+run_test('basics', () => {
+    const opts = {
+        keyed_nodes: [],
+        attrs: [
+            ['class', 'foo'],
+            ['title', 'cats & <"dogs">'],
+        ],
+    };
+
+    const ul = vdom.ul(opts);
+
+    const html = vdom.render_tag(ul);
+
+    assert.equal(
+        html,
+        '<ul class="foo" title="cats &amp; &lt;&quot;dogs&quot;&gt;">\n\n' +
+        '</ul>'
+    );
+});
+
+function make_child(i, name) {
+    const render = () => {
+        return '<li>' + name + '</li>';
+    };
+
+    const eq = (other) => {
+        return name === other.name;
+    };
+
+    return {
+        key: i,
+        render: render,
+        name: name,
+        eq: eq,
+    };
+}
+
+function make_children(lst) {
+    return _.map(lst, (i) => {
+        return make_child(i, 'foo' + i);
+    });
+}
+
+run_test('children', () => {
+    let rendered_html;
+
+    const container = {
+        html: (html) => {
+            rendered_html = html;
+        },
+    };
+
+    const nodes = make_children([1, 2, 3]);
+
+    const opts = {
+        keyed_nodes: nodes,
+        attrs: [],
+    };
+
+    const ul = vdom.ul(opts);
+
+    vdom.update(container, ul);
+
+    assert.equal(
+        rendered_html,
+        '<ul>\n' +
+        '<li>foo1</li>\n' +
+        '<li>foo2</li>\n' +
+        '<li>foo3</li>\n' +
+        '</ul>'
+    );
+
+    // Force a complete redraw.
+    const new_nodes = make_children([4, 5]);
+    const new_opts = {
+        keyed_nodes: new_nodes,
+        attrs: [
+            ['class', 'main'],
+        ],
+    };
+
+    const new_ul = vdom.ul(new_opts);
+    vdom.update(container, new_ul, ul);
+
+    assert.equal(
+        rendered_html,
+        '<ul class="main">\n' +
+        '<li>foo4</li>\n' +
+        '<li>foo5</li>\n' +
+        '</ul>'
+    );
+});
+
+run_test('partial updates', () => {
+    let rendered_html;
+
+    const container = {
+        html: (html) => {
+            rendered_html = html;
+        },
+    };
+
+    const nodes = make_children([1, 2, 3]);
+
+    const opts = {
+        keyed_nodes: nodes,
+        attrs: [],
+    };
+
+    const ul = vdom.ul(opts);
+
+    vdom.update(container, ul);
+
+    assert.equal(
+        rendered_html,
+        '<ul>\n' +
+        '<li>foo1</li>\n' +
+        '<li>foo2</li>\n' +
+        '<li>foo3</li>\n' +
+        '</ul>'
+    );
+
+    container.html = () => {
+        throw Error('should not replace entire html');
+    };
+
+    let patched_html;
+
+    container.find = (tag_name) => {
+        assert.equal(tag_name, 'ul');
+        return {
+            children: () => {
+                return {
+                    eq: (i) => {
+                        assert.equal(i, 0);
+                        return {
+                            replaceWith: (html) => {
+                                patched_html = html;
+                            },
+                        };
+                    },
+                };
+            },
+        };
+    };
+
+    const new_nodes = make_children([1, 2, 3]);
+    new_nodes[0] = make_child(1, 'modified1');
+
+    const new_opts = {
+        keyed_nodes: new_nodes,
+        attrs: [],
+    };
+
+    const new_ul = vdom.ul(new_opts);
+    vdom.update(container, new_ul, ul);
+
+    assert.equal(patched_html, '<li>modified1</li>');
+});
+
+run_test('eq_array easy cases', () => {
+    const bogus_eq = () => {
+        throw Error('we should not be comparing elements');
+    };
+
+    assert.equal(
+        vdom.eq_array(undefined, undefined, bogus_eq),
+        true);
+
+    const x = [1, 2, 3];
+    assert.equal(
+        vdom.eq_array(x, undefined, bogus_eq),
+        false);
+
+    assert.equal(
+        vdom.eq_array(undefined, x, bogus_eq),
+        false);
+
+    assert.equal(vdom.eq_array(x, x, bogus_eq), true);
+
+    // length check should also short-circuit
+    const y = [1, 2, 3, 4, 5];
+    assert.equal(vdom.eq_array(x, y, bogus_eq), false);
+
+    // same length, same values, but different order
+    const eq = (a, b) => a === b;
+    const z = [3, 2, 1];
+    assert.equal(vdom.eq_array(x, z, eq), false);
+});
+
+run_test('eq_array elementwise', () => {
+    const a = [51, 32, 93];
+    const b = [31, 52, 43];
+    const eq = (a, b) => a % 10 === b % 10;
+    assert.equal(vdom.eq_array(a, b, eq), true);
+});
+
+run_test('error checking', () => {
+    blueslip.set_test_data(
+        'error',
+        'We need keyed_nodes for updates.');
+
+    const container = 'whatever';
+    const ul = {opts: {}};
+
+    vdom.update(container, ul, ul);
+    assert.equal(blueslip.get_test_logs('error').length, 1);
+
+    blueslip.set_test_data(
+        'error',
+        'We need keyed_nodes to render innards.');
+    vdom.render_tag(ul);
+
+});

static/js/bundles/app.js

@@ -25,6 +25,7 @@ import "../translations.js";
 import "../feature_flags.js";
 import "../loading.js";
 import "../schema.js";
+import "../vdom.js";
 import "../util.js";
 import "../search_util.js";
 import "../keydown_util.js";
@@ -55,6 +56,7 @@ import "../user_groups.js";
 import "../unread.js";
 import "../topic_list_data.js";
 import "../topic_list.js";
+import "../pm_list_dom.js";
 import "../pm_list.js";
 import "../pm_conversations.js";
 import "../recent_senders.js";

static/js/pm_list.js

@@ -1,5 +1,4 @@
-const render_sidebar_private_message_list = require('../templates/sidebar_private_message_list.hbs');
-
+let prior_dom;
 let private_messages_open = false;
 
 // This module manages the "Private Messages" section in the upper
@@ -25,25 +24,6 @@ function set_count(count) {
     update_count_in_dom(count_span, value_span, count);
 }
 
-exports.get_li_for_user_ids_string = function (user_ids_string) {
-    const pm_li = get_filter_li();
-    const convo_li = pm_li.find("li[data-user-ids-string='" + user_ids_string + "']");
-    return convo_li;
-};
-
-function set_pm_conversation_count(user_ids_string, count) {
-    const pm_li = exports.get_li_for_user_ids_string(user_ids_string);
-    const count_span = pm_li.find('.private_message_count');
-    const value_span = count_span.find('.value');
-
-    if (count_span.length === 0 || value_span.length === 0) {
-        return;
-    }
-
-    count_span.removeClass("zero_count");
-    update_count_in_dom(count_span, value_span, count);
-}
-
 function remove_expanded_private_messages() {
     stream_popover.hide_topic_popover();
     ui.get_content_element($("#private-container")).empty();
@@ -52,6 +32,7 @@ function remove_expanded_private_messages() {
 
 exports.close = function () {
     private_messages_open = false;
+    prior_dom = undefined;
     remove_expanded_private_messages();
 };
 
@@ -71,7 +52,7 @@ exports.get_active_user_ids_string = function () {
     return people.emails_strings_to_user_ids_string(emails);
 };
 
-exports._build_private_messages_list = function () {
+exports._get_convos = function () {
 
     const private_messages = pm_conversations.recent.get();
     const display_messages = [];
@@ -117,24 +98,28 @@ exports._build_private_messages_list = function () {
         };
         display_messages.push(display_message);
     });
-
-    const finish = blueslip.start_timing('render pm list');
-    const recipients_dom = render_sidebar_private_message_list({
-        messages: display_messages,
-    });
-    finish();
-    return recipients_dom;
+    return display_messages;
 };
 
-exports.rebuild_recent = function () {
-    stream_popover.hide_topic_popover();
+exports._build_private_messages_list = function () {
+    const finish = blueslip.start_timing('render pm list');
+    const convos = exports._get_convos();
+    const dom_ast = pm_list_dom.pm_ul(convos);
+    finish();
+    return dom_ast;
+};
 
-    if (private_messages_open) {
-        const rendered_pm_list = exports._build_private_messages_list();
-        ui.get_content_element($("#private-container")).html(rendered_pm_list);
+exports.update_private_messages = function () {
+    if (!narrow_state.active()) {
+        return;
     }
 
-    resize.resize_stream_filters_container();
+    if (private_messages_open) {
+        const container = ui.get_content_element($("#private-container"));
+        const new_dom = exports._build_private_messages_list();
+        vdom.update(container, new_dom, prior_dom);
+        prior_dom = new_dom;
+    }
 };
 
 exports.is_all_privates = function () {
@@ -147,31 +132,19 @@ exports.is_all_privates = function () {
     return _.contains(filter.operands('is'), "private");
 };
 
-exports.update_private_messages = function () {
-    if (!narrow_state.active()) {
-        return;
-    }
-
-    exports.rebuild_recent();
-
+exports.expand = function () {
+    private_messages_open = true;
+    stream_popover.hide_topic_popover();
+    exports.update_private_messages();
+    resize.resize_stream_filters_container();
     if (exports.is_all_privates()) {
         $(".top_left_private_messages").addClass('active-filter');
     }
 };
 
-exports.expand = function () {
-    private_messages_open = true;
-    exports.rebuild_recent();
-};
-
 exports.update_dom_with_unread_counts = function (counts) {
+    exports.update_private_messages();
     set_count(counts.private_message_count);
-    counts.pm_count.each(function (count, user_ids_string) {
-        // TODO: just use user_ids_string in our markup
-        set_pm_conversation_count(user_ids_string, count);
-    });
-
-
     unread_ui.set_count_toggle_button($("#userlist-toggle-unreadcount"),
                                       counts.private_message_count);
 };

static/js/pm_list_dom.js

@@ -0,0 +1,33 @@
+const render_pm_list_item = require('../templates/pm_list_item.hbs');
+
+exports.keyed_pm_li = (convo) => {
+    const render = () => {
+        return render_pm_list_item(convo);
+    };
+
+    const eq = (other) => {
+        return _.isEqual(convo, other.convo);
+    };
+
+    const key = convo.user_ids_string;
+
+    return {
+        key: key,
+        render: render,
+        convo: convo,
+        eq: eq,
+    };
+};
+
+exports.pm_ul = (convos) => {
+    const attrs = [
+        ['class', 'expanded_private_messages'],
+        ['data-name', 'private'],
+    ];
+    return vdom.ul({
+        attrs: attrs,
+        keyed_nodes: _.map(convos, exports.keyed_pm_li),
+    });
+};
+
+window.pm_list_dom = exports;

static/js/vdom.js

@@ -0,0 +1,169 @@
+exports.eq_array = (a, b, eq) => {
+    if (a === b) {
+        // either both are undefined, or they
+        // are referentially equal
+        return true;
+    }
+
+    if (a === undefined || b === undefined) {
+        return false;
+    }
+
+    if (a.length !== b.length) {
+        return false;
+    }
+
+    return _.all(a, (item, i) => {
+        return eq(item, b[i]);
+    });
+};
+
+exports.ul = (opts) => {
+    return {
+        tag_name: 'ul',
+        opts: opts,
+    };
+};
+
+exports.render_tag = (tag) => {
+    /*
+        This renders a tag into a string.  It will
+        automatically escape attributes, but it's your
+        responsibility to make sure keyed_nodes provide
+        a `render` method that escapes HTML properly.
+        (One option is to use templates.)
+
+        Do NOT call this method directly, except for
+        testing.  The vdom scheme expects you to use
+        the `update` method.
+    */
+    const opts = tag.opts;
+    const tag_name = tag.tag_name;
+    const attr_str = _.map(opts.attrs, (attr) => {
+        return ' ' + attr[0] + '="' + util.escape_html(attr[1]) + '"';
+    }).join('');
+
+    const start_tag = '<' + tag_name + attr_str + '>';
+    const end_tag = '</' + tag_name + '>';
+
+    if (opts.keyed_nodes === undefined) {
+        blueslip.error("We need keyed_nodes to render innards.");
+        return;
+    }
+
+    const innards = _.map(opts.keyed_nodes, (node) => {
+        return node.render();
+    }).join('\n');
+    return start_tag + '\n' + innards + '\n' + end_tag;
+};
+
+exports.update = (container, new_dom, old_dom) => {
+    /*
+        The update method allows you to continually
+        update a "virtual" representation of your DOM,
+        and then this method actually updates the
+        real DOM in a container using jQuery.
+
+        The first "update" will be more like a create,
+        because your `old_dom` should be undefined.
+        After that initial call, it is important that
+        you always pass in a correct value of `old_dom`;
+        otherwise, things will be incredibly confusing.
+
+        The basic scheme here is simple:
+
+            1) If old_dom is undefined, we render
+               everything for the first time into
+               the container.
+
+            2) If the keys of your new children are no
+               longer the same order as the old
+               children, then we just render
+               everything anew into the container.
+               (We may refine this in the future.)
+
+            3) If your key structure remains the same,
+               then we update your child nodes on
+               a child-by-child basis, and we avoid
+               updates where the data had remained
+               the same.
+
+        The key to making this all work is that
+        `new_dom` should include a `keyed_nodes` option
+        where each `keyed_node` has a `key` and supports
+        these methods:
+
+            eq - can compare itself to similar nodes
+                 for data equality
+
+            render - can create an HTML representation
+                     of itself
+
+        The `new_dom` should generally be created with
+        something like `vdom.ul`, which will set a
+        tag field internally and which will want options
+        like `attrs` for attributes.
+
+        For examples of creating vdom objects, look at
+        `pm_list_dom.js`.
+    */
+    function do_full_update() {
+        const rendered_dom = exports.render_tag(new_dom);
+        container.html(rendered_dom);
+    }
+
+    if (old_dom === undefined) {
+        do_full_update();
+        return;
+    }
+
+    const new_opts = new_dom.opts;
+    const old_opts = old_dom.opts;
+
+    if (new_opts.keyed_nodes === undefined) {
+        // We generally want to use vdom on lists, and
+        // adding keys for childrens lets us avoid unnecessary
+        // redraws (or lets us know we should just rebuild
+        // the dom).
+        blueslip.error("We need keyed_nodes for updates.");
+        return;
+    }
+
+    const same_structure = exports.eq_array(
+        new_opts.keyed_nodes,
+        old_opts.keyed_nodes,
+        (a, b) => a.key === b.key
+    );
+
+    if (!same_structure) {
+        /* We could do something smarter like detecting row
+           moves, but it's overkill for small lists.
+        */
+        do_full_update();
+        return;
+    }
+
+    /*
+        DO "QUICK" UPDATES:
+
+        We've gotten this far, so we know we have the
+        same overall structure for our parent tag, and
+        the only thing left to do with our child nodes
+        is to possibly update them in place (via jQuery).
+        We will only update nodes whose data has changed.
+    */
+
+    const tag_name = new_dom.tag_name;
+    const child_elems = container.find(tag_name).children();
+
+    _.each(new_opts.keyed_nodes, (new_node, i) => {
+        const old_node = old_opts.keyed_nodes[i];
+        if (new_node.eq(old_node)) {
+            return;
+        }
+        const rendered_dom = new_node.render();
+        child_elems.eq(i).replaceWith(rendered_dom);
+    });
+};
+
+window.vdom = exports;

static/templates/pm_list_item.hbs

@@ -0,0 +1,24 @@
+<li class='{{#if is_active}}active-sub-filter{{/if}} {{#if is_zero}}zero-pm-unreads{{/if}} top_left_row expanded_private_message' data-user-ids-string='{{user_ids_string}}'>
+    <span class='pm-box' id='pm_user_status' data-user-ids-string='{{user_ids_string}}' data-is-group='{{is_group}}'>
+
+        <div class="pm_left_col">
+            {{#if is_group}}
+                {{#if fraction_present}}
+                <span class="{{user_circle_class}} user_circle" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
+                {{else}}
+                <span class="{{user_circle_class}} user_circle" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
+                {{/if}}
+            {{else}}
+                <span class="{{user_circle_class}} user_circle"></span>
+            {{/if}}
+        </div>
+
+        <a href='{{url}}' class="conversation-partners">
+            {{recipients}}
+        </a>
+        <div class="private_message_count {{#if is_zero}}zero_count{{/if}}">
+            <div class="value">{{unread}}</div>
+        </div>
+    </span>
+</li>
+

static/templates/sidebar_private_message_list.hbs

@@ -1,27 +0,0 @@
-<ul class='expanded_private_messages' data-name='private'>
-    {{#each messages}}
-    <li class='{{#if is_active}}active-sub-filter{{/if}} {{#if is_zero}}zero-pm-unreads{{/if}} top_left_row expanded_private_message' data-user-ids-string='{{user_ids_string}}'>
-        <span class='pm-box' id='pm_user_status' data-user-ids-string='{{user_ids_string}}' data-is-group='{{is_group}}'>
-
-            <div class="pm_left_col">
-                {{#if is_group}}
-                    {{#if fraction_present}}
-                    <span class="{{user_circle_class}} user_circle" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
-                    {{else}}
-                    <span class="{{user_circle_class}} user_circle" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
-                    {{/if}}
-                {{else}}
-                    <span class="{{user_circle_class}} user_circle"></span>
-                {{/if}}
-            </div>
-
-            <a href='{{url}}' class="conversation-partners">
-                {{recipients}}
-            </a>
-            <div class="private_message_count {{#if is_zero}}zero_count{{/if}}">
-                <div class="value">{{unread}}</div>
-            </div>
-        </span>
-    </li>
-    {{/each}}
-</ul>

tools/linter_lib/custom_check.py

@@ -703,7 +703,7 @@ html_rules = whitespace_rules + prose_style_rules + [
 
          # background image property is dynamically generated
          'static/templates/user_profile_modal.hbs',
-         'static/templates/sidebar_private_message_list.hbs',
+         'static/templates/pm_list_item.hbs',
 
          # Inline styling for an svg; could be moved to CSS files?
          'templates/zerver/landing_nav.html',

tools/test-js-with-node

@@ -96,6 +96,7 @@ enforce_fully_covered = {
     'static/js/user_search.js',
     'static/js/user_status.js',
     'static/js/util.js',
+    'static/js/vdom.js',
     'static/js/widgetize.js',
     'static/js/search_pill.js',
     'static/js/billing/billing.js',