MD Bookmarks: Proof-of-concept reimplementation of data storage/binding layer

chrome/browser/resources/md_bookmarks/store_client.js

Index: chrome/browser/resources/md_bookmarks/store_client.js
diff --git a/chrome/browser/resources/md_bookmarks/store_client.js b/chrome/browser/resources/md_bookmarks/store_client.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf104e5a0d950033c13365c5facb86b3ce552f08
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/store_client.js
@@ -0,0 +1,88 @@
+// 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,
+       *   storeGetter: function(BookmarksPageState)
+       * }>}
+       */
+      this.observers_ = [];
+      bookmarks.Store.getInstance().addObserver(this);
+    },
+
+    detached: function() {
+      bookmarks.Store.getInstance().removeObserver(this);
+    },
+
+    /**
+     * Observe a particular part of the state tree, updating |localProperty|
+     * whenever the state changes. |storeGetter| should be a function which,
+     * given the whole state tree, returns the particular Object that this
+     * Client is interested in. Eg:
+     *   observe('item', (state) => state.nodes[this.itemId]);
+     *
+     * @param {string} localProperty
+     * @param {function(BookmarksPageState)} storeGetter
+     */
+    observe: function(localProperty, storeGetter) {
+      this.observers_.push({
+        localProperty: localProperty,
+        storeGetter: storeGetter,
+      });
+    },
+
+    /**
+     * 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;
+      this.observers_.forEach(function(observer) {
+
+        var oldValue = this[observer.localProperty];
+        var newValue = observer.storeGetter(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};
+});