From b03c6357e8ac3636727475ab6093f3794410b078 Mon Sep 17 00:00:00 2001 From: Noj Vek Date: Thu, 30 Aug 2018 17:05:26 -0700 Subject: [PATCH] 1.4.0 --- docs/Component.html | 157 ++++++++- docs/ProxyComponent.html | 160 ++++++++- docs/StateController.html | 4 +- docs/StateStore.html | 4 +- ...mponent-utils_controlled-component.js.html | 120 +++++++ docs/component-utils_index.js.html | 4 +- docs/component-utils_proxy-component.js.html | 8 +- docs/component-utils_state-controller.js.html | 4 +- docs/component-utils_state-store.js.html | 4 +- docs/component.js.html | 107 ++++-- docs/global.html | 318 ++++++++++++++++++ docs/index.html | 4 +- docs/index.js.html | 4 +- docs/isorender_dom-shims.js.html | 18 +- docs/module-component-utils.html | 4 +- docs/module-isorender_dom-shims.html | 6 +- docs/module-panel.html | 4 +- docs/module.exports.html | 179 ++++++++++ package.json | 4 +- 19 files changed, 1026 insertions(+), 87 deletions(-) create mode 100644 docs/component-utils_controlled-component.js.html create mode 100644 docs/global.html create mode 100644 docs/module.exports.html diff --git a/docs/Component.html b/docs/Component.html index edbeaa89..7a33e479 100644 --- a/docs/Component.html +++ b/docs/Component.html @@ -23,7 +23,7 @@
@@ -109,7 +109,7 @@

new Componen
Source:
@@ -696,7 +696,7 @@

Properties
Source:
@@ -783,7 +783,7 @@
Type:
Source:
@@ -816,6 +816,137 @@

Methods

+ +

_updateAttr(attr)

+ + + + + +
+ Parses html attribute using type information from attrsSchema and updates this.attrs +
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
attr + + +string + + + + attribute name
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + +

child(tagName, configopt) → {object}

@@ -974,7 +1105,7 @@
Parameters:
Source:
@@ -1133,7 +1264,7 @@
Parameters:
Source:
@@ -1304,7 +1435,7 @@
Parameters:
Source:
@@ -1507,7 +1638,7 @@
Parameters:
Source:
@@ -1662,7 +1793,7 @@
Parameters:
Source:
@@ -1801,7 +1932,7 @@
Parameters:
Source:
@@ -1985,7 +2116,7 @@
Parameters:
Source:
@@ -2145,7 +2276,7 @@
Parameters:
Source:
@@ -2194,7 +2325,7 @@
Example

- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/ProxyComponent.html b/docs/ProxyComponent.html index dd4a7ad8..7e12f455 100644 --- a/docs/ProxyComponent.html +++ b/docs/ProxyComponent.html @@ -23,7 +23,7 @@
@@ -673,7 +673,7 @@
Properties
Source:
@@ -765,7 +765,7 @@
Type:
Source:
@@ -941,6 +941,142 @@

Methods

+ +

_updateAttr(attr)

+ + + + + +
+ Parses html attribute using type information from attrsSchema and updates this.attrs +
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
attr + + +string + + + + attribute name
+ + + + + + +
+ + + + + + +
Inherited From:
+
+ + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + +

allowEvent(ev) → {boolean}

@@ -1269,7 +1405,7 @@
Parameters:
Source:
@@ -1433,7 +1569,7 @@
Parameters:
Source:
@@ -1609,7 +1745,7 @@
Parameters:
Source:
@@ -1938,7 +2074,7 @@
Parameters:
Source:
@@ -2098,7 +2234,7 @@
Parameters:
Source:
@@ -2242,7 +2378,7 @@
Parameters:
Source:
@@ -2431,7 +2567,7 @@
Parameters:
Source:
@@ -2596,7 +2732,7 @@
Parameters:
Source:
@@ -2645,7 +2781,7 @@
Example

- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/StateController.html b/docs/StateController.html index 9f08180e..f5dbd55f 100644 --- a/docs/StateController.html +++ b/docs/StateController.html @@ -23,7 +23,7 @@
@@ -167,7 +167,7 @@

new St
- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/StateStore.html b/docs/StateStore.html index 3184612e..b919df0a 100644 --- a/docs/StateStore.html +++ b/docs/StateStore.html @@ -23,7 +23,7 @@
@@ -163,7 +163,7 @@

new StateSt
- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/component-utils_controlled-component.js.html b/docs/component-utils_controlled-component.js.html new file mode 100644 index 00000000..4e916ebc --- /dev/null +++ b/docs/component-utils_controlled-component.js.html @@ -0,0 +1,120 @@ + + + + + component-utils/controlled-component.js - Documentation + + + + + + + + + + + + + + + + + +
+ +

component-utils/controlled-component.js

+ + + + + + + +
+
+ 
import Component from '../component';
+import {EMPTY_DIV} from '../dom-patcher';
+
+/**
+ * @deprecated
+ * ControlledComponent is deprecated. Compose with a normal component and controller
+ *
+ * @example
+ * constructor() {
+ *   super(...arguments);
+ *   this.controller = new ExampleController({store: this});
+ *   this.setConfig(`defaultState`, this.controller.defaultState);
+ * }
+ */
+
+
+export default class ControlledComponent extends Component {
+  constructor() {
+    super(...arguments);
+    this.controller = this.getConfig(`controller`);
+    if (!this.controller) {
+      throw Error(`"controller" must be set in config of a ControlledComponent`);
+    }
+    // Don't allow component's update directly
+    this._update = this.update;
+    this.update = () => { throw new Error(`update() not allowed from component. Use controller`); };
+    this._updateListener = () => this._update();
+    this.controller.subscribeUpdates(this._updateListener);
+  }
+
+  disconnectedCallback() {
+    if (!this.initialized) {
+      return;
+    }
+
+    super.disconnectedCallback();
+    this.controller.unsubscribeUpdates(this._updateListener);
+  }
+
+  attributeChangedCallback() {
+    // Do nothing, component should explicitly pass this to controller for an update
+    // Super class calls this.update() which will throw an error
+  }
+
+  _render() {
+    if (this.shouldUpdate()) {
+      try {
+        // Pass in $controller to jade.
+        // Template should use something like $controller.getDisplayX() to get the state it needs
+        this._rendered = this.getConfig(`template`)({
+          $component: this,
+          $helpers: this.helpers,
+          $controller: this.controller,
+        });
+      } catch (e) {
+        this.logError(`Error while rendering ${this.toString()}`, this, e.stack);
+      }
+    }
+    return this._rendered || EMPTY_DIV;
+  }
+}
+
+
+
+ + + + +
+ +
+ +
+ Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme. +
+ + + + + diff --git a/docs/component-utils_index.js.html b/docs/component-utils_index.js.html index e7ca6f9f..7a64c927 100644 --- a/docs/component-utils_index.js.html +++ b/docs/component-utils_index.js.html @@ -23,7 +23,7 @@
@@ -80,7 +80,7 @@

component-utils/index.js


- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/component-utils_proxy-component.js.html b/docs/component-utils_proxy-component.js.html index 7cfe303b..3b92a0d9 100644 --- a/docs/component-utils_proxy-component.js.html +++ b/docs/component-utils_proxy-component.js.html @@ -23,7 +23,7 @@
@@ -49,7 +49,7 @@

component-utils/proxy-component.js

* @extends Component */ class ProxyComponent extends Component { - get config(){ + get config() { return Object.assign({ template: ({$component}) => { return h($component.getTargetElementTag(), { @@ -112,7 +112,7 @@

component-utils/proxy-component.js

* } * } */ - allowEvent(ev) { + allowEvent(ev) { // eslint-disable-line no-unused-vars return true; } @@ -165,7 +165,7 @@

component-utils/proxy-component.js


- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/component-utils_state-controller.js.html b/docs/component-utils_state-controller.js.html index ebfb10f9..07ac29b6 100644 --- a/docs/component-utils_state-controller.js.html +++ b/docs/component-utils_state-controller.js.html @@ -23,7 +23,7 @@
@@ -89,7 +89,7 @@

component-utils/state-controller.js


- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/component-utils_state-store.js.html b/docs/component-utils_state-store.js.html index 1c5990ca..63cf549b 100644 --- a/docs/component-utils_state-store.js.html +++ b/docs/component-utils_state-store.js.html @@ -23,7 +23,7 @@
@@ -80,7 +80,7 @@

component-utils/state-store.js


- Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme. + Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
diff --git a/docs/component.js.html b/docs/component.js.html index d7f3a3cd..f309090f 100644 --- a/docs/component.js.html +++ b/docs/component.js.html @@ -23,7 +23,7 @@
@@ -39,10 +39,9 @@

component.js

import cuid from 'cuid';
-import pick from 'lodash.pick';
 import WebComponent from 'webcomponent';
 
-import { EMPTY_DIV, DOMPatcher, h } from './dom-patcher';
+import {EMPTY_DIV, DOMPatcher, h} from './dom-patcher';
 import Router from './router';
 
 const DOCUMENT_FRAGMENT_NODE = 11;
@@ -148,7 +147,7 @@ 
component.js

    */
   findPanelParentByTagName(tagName) {
     tagName = tagName.toLowerCase();
-    for (let node = this.$panelParent; !!node; node = node.$panelParent) {
+    for (let node = this.$panelParent; node; node = node.$panelParent) {
       if (node.tagName.toLowerCase() === tagName) {
         return node;
       }
@@ -206,7 +205,7 @@ 
component.js

    *   return state.largeResultSetID !== this._cachedResultID;
    * }
    */
-  shouldUpdate(state) {
+  shouldUpdate(state) { // eslint-disable-line no-unused-vars
     return true;
   }
 
@@ -242,10 +241,10 @@ 
component.js

 
     this.panelID = cuid();
     this._config = Object.assign({}, {
-      css: '',
+      css: ``,
       helpers: {},
       routes: {},
-      template: () => { throw Error('No template provided by Component subclass'); },
+      template: () => { throw Error(`No template provided by Component subclass`); },
       updateSync: false,
       useShadowDom: false,
     }, this.config);
@@ -254,6 +253,7 @@ 
component.js

     // appState and isStateShared of child components will be overwritten by parent/root
     // when the component is connected to the hierarchy
     this.state = {};
+    this.attrs = {};
     this.appState = this.getConfig(`appState`);
     if (!this.appState) {
       this.appState = {};
@@ -262,13 +262,13 @@ 
component.js

       this.isStateShared = false;
     }
 
-    if (this.getConfig('useShadowDom')) {
-      this.el = this.attachShadow({mode: 'open'});
-      this.styleTag = document.createElement('style');
-      this.styleTag.innerHTML = this.getConfig('css');
+    if (this.getConfig(`useShadowDom`)) {
+      this.el = this.attachShadow({mode: `open`});
+      this.styleTag = document.createElement(`style`);
+      this.styleTag.innerHTML = this.getConfig(`css`);
       this.el.appendChild(this.styleTag);
-    } else if (this.getConfig('css')) {
-      throw Error('"useShadowDom" config option must be set in order to use "css" config.');
+    } else if (this.getConfig(`css`)) {
+      throw Error(`"useShadowDom" config option must be set in order to use "css" config.`);
     } else {
       this.el = this;
     }
@@ -288,11 +288,11 @@ 
component.js

 
     this.$panelChildren = new Set();
 
-    if (typeof this.$panelParentID !== 'undefined') {
+    if (typeof this.$panelParentID !== `undefined`) {
       this.isPanelChild = true;
       // find $panelParent
       for (let node = this.parentNode; node && !this.$panelParent; node = node.parentNode) {
-        if (node.nodeType === DOCUMENT_FRAGMENT_NODE) {  // handle shadow-root
+        if (node.nodeType === DOCUMENT_FRAGMENT_NODE) { // handle shadow-root
           node = node.host;
         }
         if (node.panelID === this.$panelParentID) {
@@ -320,20 +320,22 @@ 
component.js

 
     const newState = Object.assign(
       {},
-      this.getConfig('defaultState'),
+      this.getConfig(`defaultState`),
       this.state,
-      this.getJSONAttribute('data-state'),
+      this.getJSONAttribute(`data-state`),
       this._stateFromAttributes()
     );
+
     Object.assign(this.state, newState);
+    Object.keys(this.constructor.attrsSchema).forEach(attr => this._updateAttr(attr));
 
-    if (Object.keys(this.getConfig('routes')).length) {
+    if (Object.keys(this.getConfig(`routes`)).length) {
       this.router = new Router(this, {historyMethod: this.historyMethod});
       this.navigate(window.location.hash);
     }
 
     this.domPatcher = new DOMPatcher(this.state, this._render.bind(this), {
-      updateMode: this.getConfig('updateSync') ? 'sync': 'async',
+      updateMode: this.getConfig(`updateSync`) ? `sync`: `async`,
     });
     this.el.appendChild(this.domPatcher.el);
     this.initialized = true;
@@ -355,22 +357,41 @@ 
component.js

     this.initialized = false;
   }
 
+  /**
+   * Attributes schema that defines the component's html attributes and their types
+   * Panel auto parses attribute changes into this.attrs object and $attrs template helper
+   *
+   * @typedef {object} AttrSchema
+   * @prop {'string' | 'number' | 'boolean' | 'json'} type - type of the attribute
+   *       if not set, the attr parser will interpret it as 'string'
+   * @prop {string} default - value if the attr is not defined
+   * @prop {number} description - description of the attribute, what it does e.t.c
+   *
+   * @type {Object.<string, AttrSchema>}
+   */
+  static get attrsSchema() {
+    return {};
+  }
+
   static get observedAttributes() {
-    return [`style-override`];
+    return [`style-override`].concat(Object.keys(this.attrsSchema));
   }
 
   attributeChangedCallback(attr, oldVal, newVal) {
-    if (attr === 'style-override') {
+    this._updateAttr(attr);
+
+    if (attr === `style-override`) {
       this._applyStyles(newVal);
     }
+
     if (this.isPanelRoot && this.initialized) {
       this.update();
     }
   }
 
   _applyStyles(styleOverride) {
-    if (this.getConfig('useShadowDom')) {
-      this.styleTag.innerHTML = this.getConfig('css') + (styleOverride || '');
+    if (this.getConfig(`useShadowDom`)) {
+      this.styleTag.innerHTML = this.getConfig(`css`) + (styleOverride || ``);
     }
   }
 
@@ -381,20 +402,21 @@ 
component.js

   toString() {
     try {
       return `${this.tagName}#${this.panelID}`;
-    } catch(e) {
-      return 'UNKNOWN COMPONENT';
+    } catch (e) {
+      return `UNKNOWN COMPONENT`;
     }
   }
 
   _render(state) {
     if (this.shouldUpdate(state)) {
       try {
-        this._rendered = this.getConfig('template')(Object.assign({}, state, {
+        this._rendered = this.getConfig(`template`)(Object.assign({}, state, {
           $app: this.appState,
           $component: this,
           $helpers: this.helpers,
+          $attrs: this.attrs,
         }));
-      } catch(e) {
+      } catch (e) {
         this.logError(`Error while rendering ${this.toString()}`, this, e.stack);
       }
     }
@@ -437,6 +459,33 @@ 
component.js

     return state;
   }
 
+  /**
+   * Parses html attribute using type information from attrsSchema and updates this.attrs
+   * @param {string} attr - attribute name
+   */
+  _updateAttr(attr) {
+    const attrsSchema = this.constructor.attrsSchema;
+    if (attrsSchema.hasOwnProperty(attr)) {
+      const attrSchema = attrsSchema[attr];
+      const attrType = attrSchema.type || `string`;
+      let attrValue = null;
+
+      if (!this.hasAttribute(attr) && attrSchema.hasOwnProperty(`default`)) {
+        attrValue = attrSchema.default;
+      } else if (attrType === `string`) {
+        attrValue = this.getAttribute(attr);
+      } else if (attrType === `boolean`) {
+        attrValue = this.isAttributeEnabled(attr);
+      } else if (attrType === `number`) {
+        attrValue = this.getNumberAttribute(attr);
+      } else if (attrType === `json`) {
+        attrValue = this.getJSONAttribute(attr);
+      }
+
+      this.attrs[attr] = attrValue;
+    }
+  }
+
   // update helpers
 
   // Update a given state store (this.state or this.appState), with option
@@ -451,7 +500,7 @@ 
component.js

     } else {
 
       // update DOM, router, descendants etc.
-      const updateHash = '$fragment' in stateUpdate && stateUpdate.$fragment !== this[store].$fragment;
+      const updateHash = `$fragment` in stateUpdate && stateUpdate.$fragment !== this[store].$fragment;
       const cascadeFromRoot = cascade && !this.isPanelRoot;
       const updateOptions = {cascade, store};
       const rootOptions = {exclude: this, cascade, store};
@@ -514,7 +563,7 @@ 
component.js

 

 
 

-    Documentation generated by JSDoc 3.5.5 on Thu Apr 12 2018 16:20:51 GMT-0700 (PDT) using the Minami theme.
+    Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
 

 
 
diff --git a/docs/global.html b/docs/global.html
new file mode 100644
index 00000000..72a3f5ec
--- /dev/null
+++ b/docs/global.html
@@ -0,0 +1,318 @@
+
+
+
+    
+    Global - Documentation
+
+    
+    
+    
+    
+    
+    
+
+
+
+
+
+
+
+
+
+
+

+    
+    
Global

+    
+
+    
+
+
+
+
+

+
+

+    
+        

+        
+        

+        
+    
+

+
+

+    

+    
+        
+
+        
+
+
+

+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+

+
+
+        
+    
+    

+
+    
+
+    
+
+    
+
+     
+
+    
+
+    
+
+    
+
+    
+        
Type Definitions

+
+        
+                
+
AttrSchema

+
+
+
+
+

+    Attributes schema that defines the component's html attributes and their types
+Panel auto parses attribute changes into this.attrs object and $attrs template helper
+

+
+
+
+    
Type:

+    
    
+        
  • 
+            
+object
+
+
+        
    • 
+    

+
+
+
+
+
+    
Properties:

+
+    
+
+
+    
+    
+        
+        
+        
+
+        
+
+        
+
+        
+
+        
+    
+    
+
+    
+    
+
+        
+            
+                
+            
+
+            
+
+            
+
+            
+
+            
+        
+
+    
+
+        
+            
+                
+            
+
+            
+
+            
+
+            
+
+            
+        
+
+    
+
+        
+            
+                
+            
+
+            
+
+            
+
+            
+
+            
+        
+
+    
+    
+
NameTypeDescription
type
+            
+                
+'string'
+|
+
+'number'
+|
+
+'boolean'
+|
+
+'json'
+
+
+            
+            type of the attribute
+      if not set, the attr parser will interpret it as 'string'
default
+            
+                
+string
+
+
+            
+            value if the attr is not defined
description
+            
+                
+number
+
+
+            
+            description of the attribute, what it does e.t.c

+
+
+
+
+

+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    
Source:

+    

+    
+
+    
+
+    
+
+    
+

+
+
+
+
+
+
+            
+    
+
+    
+

+
+

+
+
+
+
+

+
+

+
+

+    Documentation generated by JSDoc 3.5.5 on Thu Aug 30 2018 17:04:14 GMT-0700 (PDT) using the Minami theme.
+

+
+
+
+
+
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index f9a1857a..3370bd32 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,7 @@
 
 
 
 
 

@@ -61,7 +61,7 @@ 
Home
Classes