panel - npm Package Compare versions

Comparing version 1.1.0-rc1 to 1.1.0-rc2

build/component.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _lodash = require('lodash.pick');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _webcomponent = require('webcomponent');
@@ -125,2 +129,15 @@
     /**
+     * Returns whether this.state is shared with other components (the default).
+     * @returns true if this.state is shared, false if this.appState is the shared store
+     * @example
+     * myWidget.isStateShared()
+     */
+
+  }, {
+    key: 'isStateShared',
+    value: function isStateShared() {
+      return !this.appState; // if appState is not specified, all state is shared
+    }
+
+    /**
      * Executes the route handler matching the given URL fragment, and updates
@@ -193,16 +210,22 @@ * the URL, as though the user had navigated explicitly to that address.
 
-      if (!this.initialized) {
-        Object.assign(this.state, stateUpdate);
-      } else if (this.isPanelRoot) {
-        var updateHash = '$fragment' in stateUpdate && stateUpdate.$fragment !== this.state.$fragment;
+      return this._updateStore(stateUpdate, { store: 'state', cascade: this.isStateShared() });
+    }
 
-        Object.assign(this.state, stateUpdate);
-        this.updateSelfAndChildren(this.state);
+    /**
+     * Applies a state update specifically to app state shared across components.
+     * In apps which don't specify `appState` in the root component config, all
+     * state is shared across all parent and child components and the standard
+     * update() method should be used instead.
+     * @param {object} [stateUpdate={}] - keys and values of entries to update in
+     * the app's appState object
+     * @example
+     * myWidget.updateApp({name: 'Bob'});
+     */
 
-        if (updateHash) {
-          this.router.replaceHash(this.state.$fragment);
-        }
-      } else {
-        this.$panelRoot.update(stateUpdate);
-      }
+  }, {
+    key: 'updateApp',
+    value: function updateApp() {
+      var stateUpdate = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+      return this._updateStore(stateUpdate, { store: 'appState', cascade: true });
     }
@@ -219,2 +242,5 @@ }, {
      * @property {object} [routes={}] - object mapping string route expressions to handler functions
+     * @property {object} [appState={}] - (app root component only) state object to share with nested descendant components;
+     * if not set, root component shares entire state object with all descendants
+     * @property {object} [defaultState={}] - default entries for component state
      * @property {boolean} [updateSync=false] - whether to apply updates to DOM
@@ -313,3 +339,6 @@ * immediately, instead of batching to one update per frame
         this.$panelParent.$panelChildren.add(this);
-        this.state = this.$panelRoot.state;
+
+        // share either appState or all of state
+        this.appState = this.$panelRoot.appState;
+        this.state = this.isStateShared() ? this.$panelRoot.state : {};
       } else {
@@ -319,2 +348,3 @@ this.isPanelRoot = true;
         this.$panelParent = null;
+        this.appState = this.getConfig('appState');
       }
@@ -383,33 +413,2 @@ this.app = this.$panelRoot;
   }, {
-    key: 'updateSelfAndChildren',
-    value: function updateSelfAndChildren(state) {
-      if (this.initialized && this.shouldUpdate(state)) {
-        this.domPatcher.update(state);
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = this.$panelChildren[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var child = _step.value;
-
-            child.updateSelfAndChildren(state);
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-      }
-    }
-  }, {
     key: '_render',
@@ -420,2 +419,3 @@ value: function _render(state) {
           this._rendered = this.getConfig('template')(Object.assign({}, state, {
+            $app: this.appState,
             $component: this,
@@ -447,2 +447,79 @@ $helpers: this.helpers
     }
+
+    // update helpers
+
+    // Update a given state store (this.state or this.appState), with option
+    // to 'cascade' the update across other linked components
+
+  }, {
+    key: '_updateStore',
+    value: function _updateStore(stateUpdate) {
+      var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var cascade = options.cascade;
+      var store = options.store;
+
+      if (!this.initialized) {
+
+        // just update store without patching DOM etc
+        Object.assign(this[store], stateUpdate);
+      } else {
+
+        // update DOM, router, descendants etc.
+        var updateHash = '$fragment' in stateUpdate && stateUpdate.$fragment !== this[store].$fragment;
+        this.updateSelfAndChildren(stateUpdate, { cascade: cascade, store: store });
+        if (cascade && !this.isPanelRoot) {
+          this.$panelRoot.updateSelfAndChildren(stateUpdate, { exclude: this, cascade: cascade, store: store });
+        }
+        if (updateHash) {
+          this.router.replaceHash(this[store].$fragment);
+        }
+      }
+    }
+
+    // Apply the given update down the component hierarchy from this node,
+    // optionally excluding one node's subtree. This is useful for applying
+    // a full state update to one component while sending only "shared" state
+    // updates to the app root.
+
+  }, {
+    key: 'updateSelfAndChildren',
+    value: function updateSelfAndChildren(stateUpdate) {
+      var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var store = options.store;
+      var cascade = options.cascade;
+
+      if (this.initialized && this.shouldUpdate(stateUpdate)) {
+        Object.assign(this[store], stateUpdate);
+        this.domPatcher.update(this.state);
+
+        if (cascade) {
+          var _iteratorNormalCompletion = true;
+          var _didIteratorError = false;
+          var _iteratorError = undefined;
+
+          try {
+            for (var _iterator = this.$panelChildren[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var child = _step.value;
+
+              if (options.exclude !== child) {
+                child.updateSelfAndChildren(stateUpdate, options);
+              }
+            }
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+        }
+      }
+    }
   }], [{
@@ -449,0 +526,0 @@ key: 'observedAttributes',

lib/component.js

 import cuid from 'cuid';
+import pick from 'lodash.pick';
 import WebComponent from 'webcomponent';
@@ -45,2 +46,5 @@
    * @property {object} [routes={}] - object mapping string route expressions to handler functions
+   * @property {object} [appState={}] - (app root component only) state object to share with nested descendant components;
+   * if not set, root component shares entire state object with all descendants
+   * @property {object} [defaultState={}] - default entries for component state
    * @property {boolean} [updateSync=false] - whether to apply updates to DOM
@@ -126,2 +130,12 @@ * immediately, instead of batching to one update per frame
   /**
+   * Returns whether this.state is shared with other components (the default).
+   * @returns true if this.state is shared, false if this.appState is the shared store
+   * @example
+   * myWidget.isStateShared()
+   */
+  isStateShared() {
+    return !this.appState; // if appState is not specified, all state is shared
+  }
+
+  /**
    * Executes the route handler matching the given URL fragment, and updates
@@ -178,16 +192,17 @@ * the URL, as though the user had navigated explicitly to that address.
   update(stateUpdate={}) {
-    if (!this.initialized) {
-      Object.assign(this.state, stateUpdate);
-    } else if (this.isPanelRoot) {
-      const updateHash = '$fragment' in stateUpdate && stateUpdate.$fragment !== this.state.$fragment;
+    return this._updateStore(stateUpdate, {store: `state`, cascade: this.isStateShared()});
+  }
 
-      Object.assign(this.state, stateUpdate);
-      this.updateSelfAndChildren(this.state);
-
-      if (updateHash) {
-        this.router.replaceHash(this.state.$fragment);
-      }
-    } else {
-      this.$panelRoot.update(stateUpdate);
-    }
+  /**
+   * Applies a state update specifically to app state shared across components.
+   * In apps which don't specify `appState` in the root component config, all
+   * state is shared across all parent and child components and the standard
+   * update() method should be used instead.
+   * @param {object} [stateUpdate={}] - keys and values of entries to update in
+   * the app's appState object
+   * @example
+   * myWidget.updateApp({name: 'Bob'});
+   */
+  updateApp(stateUpdate={}) {
+    return this._updateStore(stateUpdate, {store: `appState`, cascade: true});
   }
@@ -243,3 +258,7 @@
       this.$panelParent.$panelChildren.add(this);
-      this.state = this.$panelRoot.state;
+
+      // share either appState or all of state
+      this.appState = this.$panelRoot.appState;
+      this.state = this.isStateShared() ? this.$panelRoot.state : {};
+
     } else {
@@ -249,2 +268,3 @@ this.isPanelRoot = true;
       this.$panelParent = null;
+      this.appState = this.getConfig(`appState`);
     }
@@ -316,11 +336,2 @@ this.app = this.$panelRoot;
 
-  updateSelfAndChildren(state) {
-    if (this.initialized && this.shouldUpdate(state)) {
-      this.domPatcher.update(state);
-      for (let child of this.$panelChildren) {
-        child.updateSelfAndChildren(state);
-      }
-    }
-  }
-
   _render(state) {
@@ -330,2 +341,3 @@ if (this.shouldUpdate(state)) {
         this._rendered = this.getConfig('template')(Object.assign({}, state, {
+          $app: this.appState,
           $component: this,
@@ -356,4 +368,49 @@ $helpers: this.helpers,
   }
+
+  // update helpers
+
+  // Update a given state store (this.state or this.appState), with option
+  // to 'cascade' the update across other linked components
+  _updateStore(stateUpdate, options={}) {
+    const {cascade, store} = options;
+    if (!this.initialized) {
+
+      // just update store without patching DOM etc
+      Object.assign(this[store], stateUpdate);
+
+    } else {
+
+      // update DOM, router, descendants etc.
+      const updateHash = '$fragment' in stateUpdate && stateUpdate.$fragment !== this[store].$fragment;
+      this.updateSelfAndChildren(stateUpdate, {cascade, store});
+      if (cascade && !this.isPanelRoot) {
+        this.$panelRoot.updateSelfAndChildren(stateUpdate, {exclude: this, cascade, store});
+      }
+      if (updateHash) {
+        this.router.replaceHash(this[store].$fragment);
+      }
+    }
+  }
+
+  // Apply the given update down the component hierarchy from this node,
+  // optionally excluding one node's subtree. This is useful for applying
+  // a full state update to one component while sending only "shared" state
+  // updates to the app root.
+  updateSelfAndChildren(stateUpdate, options={}) {
+    const {store, cascade} = options;
+    if (this.initialized && this.shouldUpdate(stateUpdate)) {
+      Object.assign(this[store], stateUpdate);
+      this.domPatcher.update(this.state);
+
+      if (cascade) {
+        for (let child of this.$panelChildren) {
+          if (options.exclude !== child) {
+            child.updateSelfAndChildren(stateUpdate, options);
+          }
+        }
+      }
+    }
+  }
 }
 
 export default Component;

package.json

 {
   "name": "panel",
-  "version": "1.1.0-rc1",
+  "version": "1.1.0-rc2",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -41,2 +41,3 @@ "main": "build/index.js",
     "html-element": "2.2.0",
+    "lodash.pick": "4.4.0",
     "raf": "3.2.0",
@@ -61,3 +62,3 @@ "snabbdom": "0.6.1",
     "eslint-config-mixpanel": "^3.0.0",
-    "jsdoc": "^3.4.0",
+    "jsdoc": "^3.5.5",
     "minami": "^1.1.1",
@@ -64,0 +65,0 @@ "mocha": "^2.5.3",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89123

increased by2.88%

Lines of code

1694

increased by1.13%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased by16.67%

Number of package files

18

decreased by-5.26%

Dependency changes

• + Addedlodash.pick@4.4.0

• + Addedlodash.pick@4.4.0(transitive)