MD Bookmarks: Implement basis for new data-binding system

chrome/browser/resources/md_bookmarks/store_client.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Defines StoreClient, a Polymer behavior to tie a front-end
+ * element to back-end data from the store.
+ */
+
+cr.define('bookmarks', function() {
+  /**
+   * @polymerBehavior
+   * @implements {StoreObserver}
+   */
+  var StoreClient = {
+    attached: function() {
+      /**
+       * @type {!Array<{
+       *   localProperty: string,
+       *   valueGetter: function(!BookmarksPageState)
+       * }>}
+       */
+      this.observers_ = [];
+      bookmarks.Store.getInstance().addObserver(this);
+    },
+
+    detached: function() {
+      bookmarks.Store.getInstance().removeObserver(this);
+    },
+
+    /**
+     * Observes a particular part of the state tree, updating |localProperty|
+     * to the return value of |valueGetter| whenever the state changes. Eg, to
+     * keep |this.item| updated with the value of a node:
+     *   observe('item', (state) => state.nodes[this.itemId]);
+     *
+     * Note that object identity is used to determine if the value has changed
+     * before updating the UI, rather than Polymer-style deep equality.
+     *
+     * @param {string} localProperty
+     * @param {function(!BookmarksPageState)} valueGetter
+     */
+    observe: function(localProperty, valueGetter) {

[calamity, 2017/03/03 02:29:03]

Is it possible to check here that localProperty is a Polymer property (or at
least something that's defined on this)? It would be nice to throw something in
the case of a typo etc.

[tsergeant, 2017/03/03 05:08:00]

Hmmm. Maybe? Checking if it's a Polymer property of the current element is easy,
so long as it's not defined by a behavior (in which case I think you need to
traverse the entire behavior tree to see how it's defined).

Checking if it's defined on `this` isn't sufficient since Polymer encourages you
to leave properties undefined until they're used.

I'll put in a TODO here to look into this more.

+      this.observers_.push({
+        localProperty: localProperty,
+        valueGetter: valueGetter,
+      });
+    },
+
+    /**
+     * Helper to dispatch an action to the store, which will update the store
+     * data and then (possibly) flow through to the UI.
+     * @param {Action} action
+     */
+    dispatch: function(action) {
+      bookmarks.Store.getInstance().handleAction(action);
+    },
+
+    /** @param {string} newState */
+    onStateChanged: function(newState) {
+      if (!this.observers_)
+        return;

[calamity, 2017/03/03 02:29:03]

nit: newline.

When can this happen?

[tsergeant, 2017/03/03 05:08:00]

While initializing <bookmarks-item> or <bookmarks-folder-node>.

The item is created with a specific itemId, which triggers the polymer observer
to call `updateFromStore`. This happens before attached() is called and
this.observers_ is initialized.

To fix this in a nicer way, I've moved observers_ initialization to created(),
which is called before properties are initialized.

[calamity, 2017/03/03 05:46:09]

Wew.

+      this.observers_.forEach(function(observer) {
+        var oldValue = this[observer.localProperty];
+        var newValue = observer.valueGetter(newState);
+
+        // Avoid poking Polymer unless something has actually changed. Reducers
+        // must return new objects rather than mutating existing objects, so
+        // any real changes will pass through correctly.
+        if (oldValue == newValue)
+          return;
+
+        this[observer.localProperty] = newValue;
+      }.bind(this));
+    },
+
+    updateFromStore: function() {
+      if (bookmarks.Store.getInstance().isInitialized())
+        this.onStateChanged(bookmarks.Store.getInstance().data);
+    },
+
+    /** @return {!BookmarksPageState} */
+    getState: function() {
+      return bookmarks.Store.getInstance().data;
+    },
+  };
+
+  return {StoreClient: StoreClient};
+});