npm - spyne - Versions diffs - 0.19.0 → 0.20.0 - Mend

spyne 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/.eslintrc.js +4 -3
package/.travis.yml +24 -11
package/karma.conf.js +76 -86
package/lib/spyne.esm.js +15 -0
package/lib/spyne.esm.js.map +1 -0
package/lib/spyne.umd.js +9565 -0
package/package.json +46 -26
package/rollup.config.js +26 -0
package/src/spyne/channels/channel-fetch-class.js +39 -43
package/src/spyne/channels/channel-payload-class.js +61 -74
package/src/spyne/channels/channel-proxy.js +25 -26
package/src/spyne/channels/channel.js +141 -149
package/src/spyne/channels/channels-config.js +46 -47
package/src/spyne/channels/channels-map.js +61 -65
package/src/spyne/channels/spyne-channel-lifecycle.js +12 -12
package/src/spyne/channels/spyne-channel-route.js +241 -250
package/src/spyne/channels/spyne-channel-ui.js +213 -75
package/src/spyne/channels/spyne-channel-window.js +157 -157
package/src/spyne/spyne-app.js +32 -19
package/src/spyne/spyne-plugins.js +55 -70
package/src/spyne/spyne.js +23 -23
package/src/spyne/utils/channel-config-validator.js +10 -10
package/src/spyne/utils/channel-fetch-util.js +72 -55
package/src/spyne/utils/channel-payload-filter.js +89 -100
package/src/spyne/utils/deep-merge.js +31 -29
package/src/spyne/utils/frp-tools.js +108 -92
package/src/spyne/utils/gc.js +6 -6
package/src/spyne/utils/mixins/base-core-mixins.js +17 -15
package/src/spyne/utils/mixins/base-streams-mixins.js +9 -9
package/src/spyne/utils/route-channel-updater.js +23 -29
package/src/spyne/utils/safe-clone.js +40 -58
package/src/spyne/utils/sanitize-html.js +35 -0
package/src/spyne/utils/security-policy.js +11 -0
package/src/spyne/utils/spyne-app-properties.js +110 -114
package/src/spyne/utils/spyne-logger.js +4 -11
package/src/spyne/utils/spyne-plugins-methods.js +38 -63
package/src/spyne/utils/spyne-trait.js +33 -33
package/src/spyne/utils/spyne-utils-channel-route-url.js +229 -153
package/src/spyne/utils/spyne-utils-channel-route.js +128 -138
package/src/spyne/utils/spyne-utils-channel-window.js +39 -39
package/src/spyne/utils/viewstream-animations.js +12 -12
package/src/spyne/utils/viewstream-observables.js +45 -45
package/src/spyne/views/dom-element-template.js +111 -114
package/src/spyne/views/dom-element.js +82 -84
package/src/spyne/views/view-stream-broadcaster.js +66 -62
package/src/spyne/views/view-stream-element.js +105 -106
package/src/spyne/views/view-stream-payload.js +25 -27
package/src/spyne/views/view-stream-selector.js +157 -163
package/src/spyne/views/view-stream.js +416 -640
package/src/tests/channels/channel-dom.test.js +15 -15
package/src/tests/channels/channel-fetch.test.js +51 -62
package/src/tests/channels/channel-payload-class.test.js +50 -63
package/src/tests/channels/channel-payload-filter.test.js +133 -193
package/src/tests/channels/channel-route.test.js +102 -112
package/src/tests/channels/channel-stream-item.test.js +19 -19
package/src/tests/channels/channel-ui.test.js +15 -27
package/src/tests/channels/channel-util-dom.test.js +31 -31
package/src/tests/channels/channel.test.js +20 -25
package/src/tests/channels/route-utils.test.js +61 -66
package/src/tests/channels/url-utils.test.js +151 -151
package/src/tests/channels/view-stream-broadcaster.test.js +7 -7
package/src/tests/import.test.js +5 -5
package/src/tests/index.js +6 -7
package/src/tests/index.test.js +6 -8
package/src/tests/mocks/channel-payload-data.js +218 -220
package/src/tests/mocks/enhancer.test.js +5 -5
package/src/tests/mocks/payload-ui.js +87 -90
package/src/tests/mocks/routes-data.js +264 -266
package/src/tests/mocks/spyne-docs.mocks.js +3 -3
package/src/tests/mocks/template-renderer.mocks.js +47 -47
package/src/tests/mocks/utils-data.js +78 -79
package/src/tests/mocks/viewstream-internal-payload.mocks.js +50 -50
package/src/tests/mocks/window-events-arr.js +1 -1
package/src/tests/package-json.spec.test.js +9 -0
package/src/tests/spyne-app.test.js +15 -18
package/src/tests/spyne-plugin.test.js +16 -20
package/src/tests/utils/channel-action-filter.test.js +84 -86
package/src/tests/utils/channel-data-packet-generator.unused.js +62 -86
package/src/tests/utils/channel-fetch-util.test.js +64 -66
package/src/tests/utils/frp-tools.test.js +19 -19
package/src/tests/utils/plugins-methods.test.js +31 -55
package/src/tests/utils/security.test.js +10 -0
package/src/tests/utils/spyne-app-properties.test.js +4 -8
package/src/tests/views/dom-el-selectors.test.js +112 -119
package/src/tests/views/dom-el-template-proxy.test.js +7 -0
package/src/tests/views/dom-el-template.test.js +186 -156
package/src/tests/views/dom-el.test.js +58 -56
package/src/tests/views/view-stream-enhancer-loader.test.js +2 -2
package/src/tests/views/view-stream-enhancer.test.js +11 -11
package/src/tests/views/view-stream.test.js +22 -33
package/webpack.config.js +76 -67
package/docs/-_%20Solves%20equations%20of%20the%20form%20a%20_%20x%20=%20b.html +0 -487
package/docs/DomItem.html +0 -298
package/docs/DomItem_DomItem.html +0 -314
package/docs/ViewStream.html +0 -2249
package/docs/ViewStream_ViewStream.html +0 -503
package/docs/custom/css/jsdoc-viewstream.css +0 -377
package/docs/custom/layout.tmpl +0 -47
package/docs/dom-item.js.html +0 -213
package/docs/fonts/OpenSans-Bold-webfont.eot +0 -0
package/docs/fonts/OpenSans-Bold-webfont.svg +0 -1830
package/docs/fonts/OpenSans-Bold-webfont.woff +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.svg +0 -1830
package/docs/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Italic-webfont.eot +0 -0
package/docs/fonts/OpenSans-Italic-webfont.svg +0 -1830
package/docs/fonts/OpenSans-Italic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Light-webfont.eot +0 -0
package/docs/fonts/OpenSans-Light-webfont.svg +0 -1831
package/docs/fonts/OpenSans-Light-webfont.woff +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.svg +0 -1835
package/docs/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Regular-webfont.eot +0 -0
package/docs/fonts/OpenSans-Regular-webfont.svg +0 -1831
package/docs/fonts/OpenSans-Regular-webfont.woff +0 -0
package/docs/global.html +0 -548
package/docs/index-custom.html +0 -79
package/docs/index.html +0 -82
package/docs/jsdoc.config.json +0 -22
package/docs/scripts/linenumber.js +0 -25
package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
package/docs/scripts/prettify/lang-css.js +0 -2
package/docs/scripts/prettify/prettify.js +0 -28
package/docs/styles/jsdoc-default.css +0 -358
package/docs/styles/prettify-jsdoc.css +0 -111
package/docs/styles/prettify-tomorrow.css +0 -132
package/docs/view-stream.js.html +0 -767

package/docs/view-stream.js.html DELETED Viewed

@@ -1,767 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>JSDoc: Source: view-stream.js</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
-    <script src="scripts/prettify/prettify.js"> </script>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <!--[if lt IE 9]>
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
-<!--
-    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
--->
-    <link type="text/css" rel="stylesheet" href="custom/css/jsdoc-viewstream.css">
-</head>
-<body>
-<div id="main">
-    <a class="page-title spyne" href='https://www.npmjs.com/package/spyne' target='blank'>spyne</a>
-<!--
-    <h1 class="page-title">Source: view-stream.js</h1>
--->
-    <section>
-        <article>
-            <pre class="prettyprint source linenums"><code>import {BaseCoreMixins} from '../utils/mixins/base-core-mixins';
-import {BaseStreamsMixins} from '../utils/mixins/base-streams-mixins';
-import {ifNilThenUpdate, convertDomStringMapToObj} from '../utils/frp-tools';
-// import {gc} from '../utils/gc';
-import {ViewStreamElement} from './basic-view';
-import {registeredStreamNames} from '../channels/channels-config';
-import {ViewStreamBroadcaster} from './view-stream-broadcaster';
-import {ViewStreamPayload} from '../channels/channels-payload';
-import {ViewStreamObservable} from '../utils/lifecycle-observables';
-const Rx = require('rxjs');
-const R = require('ramda');
-export class ViewStream {
-  /**
-   * @module ViewStream
-   *
-   * @desc
-   * The ViewStream object creates or references  a dom elment; the dom element can be as simple as a &amp;#60;p&amp;gt; tag, or the dom element can be a large dom chunk that is generated from data and an html template.
-   * &lt;br>&lt;br>
-   * Generally, the idea is to extend the ViewStream class and add the custom values within the constructor function, but all of the values can be passed as parameters as well.
-   *
-   * @example
-   * // returns &lt;h2>Hello World&lt;/h2>
-   * new ViewStream({tagName:'h2', data:'Hello World'};
-   * @example
-   * //  returns
-   * &lt;ul>
-   *    &lt;li>firstName: Jane&lt;li>
-   *    &lt;li>lastName: Doe&lt;li>
-   *    &lt;li>Age: 23&lt;li>
-   * &lt;/ul>
-   *
-   * let myTemplate = '&lt;li>firstName: {{fName}}&lt;li>lastName: {{lName}}&lt;li>Age: {{age}}';
-   * let myData = {fName: Jane, lName: Doe, age:23};
-   * new ViewStream({tagName:'ul', data:myData, tmpl:myTemplate});
-   *
-   *
-   *
-   * @constructor
-   * @param {object} props This json object takes in parameters to generate or reference the dom element
-   * @property {string} props.tagName  - 'div'  This can be any dom tag
-   * @property {domItem} props.el undefined, if defined, ViewStream will connect to that element
-   * @property {string|object} props.data undefined, // string for innerText or Json object for html template
-   * @property {boolean} props.animateIn - false, animates in View
-   * @property {number} props.animateInTime - .5
-   * @property {boolean} props.animateOut false, animates in View
-   * @property {number} props.animateOutTime .5
-   * @property {string} props.id - undefined, generates a random id if left undefined
-   * @property {boolean} props.debug false
-   * @property {tmpl} props.tmpl undefined, // html template
-   *
-   */
-  constructor(props = {}) {
-    this.addMixins();
-    this.defaults = () => {
-      let id = props.id ? props.id : this.createId();
-      return {
-        tagName: 'div',
-        el: undefined,
-        data: undefined,
-        animateIn:false,
-        animateInTime: 0.5,
-        animateOut: false,
-        animateOutTime: 0.5,
-        cid: this.createId(),
-        id: id,
-        hashId: `#${id}`,
-        viewClass: ViewStreamElement,
-        extendedSourcesHashMethods: {},
-        debug: false,
-        tmpl: undefined,
-        node: document.createDocumentFragment(),
-        name: this.constructor.name
-      };
-    };
-    this._state = {};
-    this.$dirs = ViewStreamObservable.createDirectionalFiltersObject();
-    this.addDefaultDirection = ViewStreamObservable.addDefaultDir;
-    this.addDownInternalDir = ViewStreamObservable.addDownInternalDir;
-    this.props = Object.assign({}, this.defaults(), props);
-    this.props['domAttributes'] = R.pick(['id', 'class', 'dataset'], this.props);
-    const channelFn = R.curry(this.onChannelMethodCall.bind(this));
-    let createExtraStatesMethod = (arr) => {
-      let [action, funcStr] = arr;
-      this.props.extendedSourcesHashMethods[action] = channelFn(funcStr);
-    };
-    this.extendedStateMethods().forEach(createExtraStatesMethod);
-    this.props.hashSourceMethods = this.setSourceHashMethods(this.props.extendedSourcesHashMethods);
-    this.props.action = 'LOADED';
-    this.sink$ = new Rx.Subject();
-    const ViewClass = this.props.viewClass;
-    this.view = new ViewClass(this.sink$);// new this.props.viewClass(this.sink$);
-    this.sourceStreams = this.view.sourceStreams;
-    this._rawSource$ = this.view.getSourceStream();
-    this._rawSource$['viewName'] = this.props.name;
-    this.sendEventsDownStream = this.sendEventsDownStreamFn;
-    this.init();
-    this.checkIfElementAlreadyExists();
-  }
-  checkIfElementAlreadyExists() {
-    const elIsDomElement = el => el !== undefined &amp;&amp; el.tagName !== undefined;
-    const elIsRendered = el => document.body.contains(el);
-    const elIsReadyBool = R.propSatisfies(R.allPass([elIsRendered, elIsDomElement]), 'el');
-    if (elIsReadyBool(this.props)) {
-      this.afterRender();
-    }
-  }
-  extendedStateMethods() {
-    return [];
-  }
-  onChannelMethodCall(str, p) {
-    // console.log('channelMethodCalled ', p);
-    if (p.$dir !== undefined &amp;&amp; p.$dir.includes('child')) {
-      // p.$dir = ['internal'];
-      // this.sourceStreams.toChild$.next(p);
-      let obj = Object.assign({}, p);
-      // obj['action'] = action;
-      obj['$dir'] = this.$dirs.C;
-      // console.log('SEND DOWN ', obj);
-      this.sourceStreams.raw$.next(obj);
-      // this.sendEventsDownStreamFn('HOLDER_ROUTE_EVENT', p);
-    }
-    this[str](p);
-  }
-  setSourceHashMethods(extendedSourcesHashMethods = {}) {
-    let hashSourceKeys = {
-      // 'PARENT_DISPOSING'                 : (p) => this.onDispose(p),
-      'DISPOSE'                          : (p) => this.onDispose(p),
-      // 'CHILD_DISPOSE'                    : (p) => this.onDispose(p),
-      'RENDERED'                         : (p) => this.onRendered(p),
-      'RENDERED_AND_ATTACHED_TO_DOM'     : (p) => this.onRendered(p),
-      'RENDERED_AND_ATTACHED_TO_PARENT'  : (p) => this.onRendered(p),
-      // 'CHILD_RENDERED'                   : (p) => this.attachChildToView(p),
-      'READY_FOR_GC'                     : (p) => this.onReadyToGC(p),
-      'NOTHING'                          : () => ({})
-    };
-    return Object.assign({}, hashSourceKeys, extendedSourcesHashMethods);
-  }
-  //  =====================================================================
-  // ====================== MAIN STREAM METHODS ==========================
-  init() {
-    this._source$ = this._rawSource$
-      .map((payload) => this.onMapViewSource(payload))
-      .takeWhile(this.notGCSTATE);
-    this.initAutoMergeSourceStreams();
-    this.updateSourceSubscription(this._source$, true);
-  }
-  notGCSTATE(p) {
-    return !p.action.includes('READY_FOR_GC');
-  }
-  eqGCSTATE(p) {
-    return !p.action.includes('READY_FOR_GC');
-  }
-  notCOMPLETED(p) {
-    return !p.action.includes('COMPLETED');
-  }
-  notGCCOMPLETE(p) {
-    return !p.action.includes('GC_COMPLETE');
-  }
-  testVal(p) {
-    console.log('TESTING VALL IS ', p);
-  }
-  addParentStream(obs, attachData) {
-    let filterOutNullData = (data) => data !== undefined &amp;&amp; data.action !== undefined;
-    let checkIfDisposeOrFadeout = (d) => {
-      let data = Object.assign({}, d);
-      if (data.action === 'DISPOSE_AND_READY_FOR_GC') {
-        this.onDispose(data);
-        data.action = 'READY_FOR_GC';
-      }
-      return data;
-    };
-    this.parent$ = obs
-      .filter(filterOutNullData)
-      .map(checkIfDisposeOrFadeout)
-      .takeWhile(this.notGCCOMPLETE);
-    this.updateSourceSubscription(this.parent$, false, 'PARENT');
-    this.renderAndAttachToParent(attachData);
-  }
-  addChildStream(obs$) {
-    let filterOutNullData = (data) => data !== undefined &amp;&amp; data.action !== undefined;
-    let child$ = obs$
-      .filter(filterOutNullData)
-      .map((p) => {
-        return p;
-      })
-      .takeWhile(this.notGCSTATE)
-      .finally(p => this.onChildCompleted(child$.source));
-    this.updateSourceSubscription(child$, true, 'CHILD');
-  }
-  onChildCompleted(p) {
-    let findName = (x) => {
-      let finalDest = (y) => {
-        while (y.destination !== undefined) {
-          y = finalDest(y.destination);
-        }
-        return y;
-      };
-      return finalDest(x).viewName;
-    };
-    // let childCompletedName = findName(p);
-    return findName(p);
-  }
-  initAutoMergeSourceStreams() {
-    // ====================== SUBSCRIPTION SOURCE =========================
-    let subscriber = {
-      next:     this.onSubscribeToSourcesNext.bind(this),
-      error:    this.onSubscribeToSourcesError.bind(this),
-      complete: this.onSubscribeToSourcesComplete.bind(this)
-    };
-    // let takeBeforeGCOld = (val) => val.action !== 'GARBAGE_COLLECTED';
-    // let takeBeforeGC = (p) => !p.action.includes('READY_FOR_GC');
-    // let mapToState = (val) => ({action:val});
-    //  =====================================================================
-    // ========== METHODS TO CHECK FOR WHEN TO COMPLETE THE STREAM =========
-    let completeAll = () => {
-      this.uberSource$.complete();
-      this.autoSubscriber$.complete();
-      this.sink$.complete();
-      this.props = undefined;
-    };
-    let decrementOnObservableClosed = () => {
-      obsCount -= 1;
-      if (obsCount === 0) {
-        completeAll();
-      }
-    };
-    //  =====================================================================
-    // ======================== INIT STREAM METHODS ========================
-    let obsCount = 0;
-    this.uberSource$ = new Rx.Subject();
-    // ======================= COMPOSED RXJS OBSERVABLE ======================
-    /* let addRelationToState = (pre, str) => {
-      let prefix = pre !== undefined ? pre + '_' : '';
-      return prefix + str;
-    }; */
-    let incrementObservablesThatCloses = () => { obsCount += 1; };
-    this.autoMergeSubject$ = this.uberSource$
-      .mergeMap((obsData) => {
-        let branchObservable$ = obsData.observable
-          .filter((p) => p !== undefined &amp;&amp; p.action !== undefined)
-          .map(p => {
-            // console.log('PAYLOAD IS ', p, this.constructor.name)
-            let payload = Object.assign({}, p);
-            payload.action = p.action;// addRelationToState(obsData.rel, p.action);
-            return payload;
-          });
-        if (obsData.autoClosesBool === false) {
-          return branchObservable$;
-        } else {
-          incrementObservablesThatCloses();
-          return branchObservable$
-            .finally(decrementOnObservableClosed);
-        }
-      });
-    // ============================= SUBSCRIBER ==============================
-    this.autoSubscriber$ = this.autoMergeSubject$
-      // .do((p) => console.log('SINK DATA ', this.constructor.name, p))
-      .filter((p) => p !== undefined &amp;&amp; p.action !== undefined)
-      .subscribe(subscriber);
-  }
-  // ========================= MERGE STREAMS TO MAIN SUBSCRIBER =================
-  updateSourceSubscription(obs$, autoClosesBool = false, rel) {
-    // const directionArr = sendDownStream === true ? this.$dirs.DI : this.$dirs.I;
-    /*
-    let obs$1 = obs$
-      .map(ViewStreamObservable.addDefaultDir);
-*/
-    let obj = {
-      observable: obs$,
-      autoClosesBool,
-      rel
-    };
-    this.uberSource$.next(obj);
-  }
-  // ============================= SUBSCRIBER METHODS ==============================
-  onSubscribeToSourcesNext(payload = {}) {
-    let defaultToFn = R.defaultTo((p) => this.sendExtendedStreams(p));
-    const hashAction = this.props.hashSourceMethods[payload.action];
-    // console.log('S PAYLOAD ', this.props.name, typeof (hashAction), payload);
-    let fn = defaultToFn(hashAction);
-    fn(payload);
-    // console.log(fn, payload, ' THE PAYLOAD FROM SUBSCRIBE IS ', ' ---- ', ' ---> ', this.props);
-  }
-  onSubscribeToSourcesError(payload = '') {
-    console.log('ALL ERROR  ', this.constructor.name, payload);
-  }
-  onSubscribeToSourcesComplete() {
-    // console.log('==== ALL COMPLETED ====', this.constructor.name);
-    this.openSpigot('GARBAGE_COLLECT');
-  }
-  //  =======================================================================================
-  // ============================= HASH KEY AND SPIGOT METHODS==============================
-  get source$() {
-    return this._source$;
-  }
-  sendExtendedStreams(payload) {
-    this.openSpigot(payload.actionz, payload);
-  }
-  // ===================================== RENDER METHODS ==================================
-  renderAndAttachToParent(attachData) {
-    // let childRenderData = attachData;
-    this.openSpigot('RENDER_AND_ATTACH_TO_PARENT', attachData);
-  }
-  renderView() {
-    this.openSpigot('RENDER');
-  }
-  renderViewAndAttachToDom(node, type, attachType) {
-    let attachData = {node, type, attachType};
-    this.openSpigot('RENDER_AND_ATTACH_TO_DOM', {attachData});
-  }
-  attachChildToView(data) {
-    // let childRenderData = data.attachData;
-    // console.log('CHILD DATA ', this.constructor.name, childRenderData);
-    // this.openSpigot('ATTACH_CHILD_TO_SELF', {childRenderData});
-  }
-  // ===================================== DISPOSE METHODS =================================
-  onDispose(p) {
-    this.openSpigot('DISPOSE');
-  }
-  onChildDispose(p) {
-  }
-  onParentDisposing(p) {
-    // this.updateSourceSubscription(this._source$);
-    this.openSpigot('DISPOSE');
-  }
-  onReadyToGC(p) {
-    this.openSpigot('GARBAGE_COLLECT');
-  }
-  // ===================================== SINK$ METHODS =================================
-  sendEventsDownStreamFn(o, action = {}) {
-    // console.log('OBJ ACTION ', o, action);
-    let obj = Object.assign({action}, o);
-    // obj['action'] = action;
-    obj['$dir'] = this.$dirs.C;
-    // console.log('OBJ FINAL ', obj);
-    this.sourceStreams.raw$.next(obj);
-  }
-  openSpigot(action, obj = {}) {
-    if (this.props !== undefined) {
-      this.props.action = action;
-      let data = R.merge(this.props, obj);
-      this.sink$
-        .next(Object.freeze(data));
-    }
-  }
-  setAttachData(attachType, query) {
-    return {
-      node: this.props.el,
-      type: 'ViewStreamElement',
-      attachType,
-      query: this.props.el.querySelector(query)
-    };
-  }
-  getParentEls(el, num) {
-    let getElem = el => el.parentElement;
-    let iter = 0;
-    let parentEl = el;
-    while (iter &lt; num) {
-      parentEl = getElem(parentEl);
-      iter++;
-    }
-    return parentEl;
-  }
-  setAttachParentData(attachType, query, level) {
-    return {
-      node: this.getParentEls(this.props.el, level),
-      type: 'ViewStreamElement',
-      attachType,
-      query: this.props.el.parentElement.querySelector(query)
-    };
-  }
-  onMapViewSource(payload = {}) {
-    this.props = R.merge(this.props, payload);
-    return payload;
-  }
-  // ====================== ATTACH STREAM AND DOM DATA AGGREGATORS==========================
-  exchangeViewsWithChild(childView, attachData) {
-    this.addChildStream(childView.sourceStreams.toParent$);
-    childView.addParentStream(this.sourceStreams.toChild$, attachData);
-  }
-  /**
-   * Appends a ViewStream object to an existing dom element.
-   * @param {dom} node the ViewStream child that is to be attached.
-   *
-   * @example
-   * //  returns
-   * &lt;body>
-   *    &lt;h2>Hello World&lt;/h2>
-   * &lt;/body>
-   *
-   * let viewStream = new ViewStream('h2', 'Hello World');
-   * viewStream.appendToDom(document.body);
-   *
-   */
-  appendToDom(node) {
-    this.renderViewAndAttachToDom(node, 'dom', 'appendChild');
-  }
-  /**
-   * Prepends the current ViewStream object to an existing dom element.
-   * @param {dom} node the ViewStream child that is to be attached.
-   *
-   * @example
-   * this.prependToDom(document.body);
-   *
-   */
-  prependToDom(node) {
-    this.renderViewAndAttachToDom(node, 'dom', 'prependChild');
-  }
-  /**
-   * This method appends a child ViewStream object. &lt;br>After the attachment, rxjs observables are exchanged between the parent and child ViewStream objects.&lt;br>&lt;br>
-   * @param {ViewStream} v the ViewStream child that is to be attached.
-   * @param {string} query a querySelector within this ViewStream.
-   *
-   * @example
-   * //  returns
-   * &lt;body>
-   *    &lt;main>
-   *        &lt;h2>Hello World&lt;/h2>
-   *    &lt;/main>
-   * &lt;/body>
-   *
-   *
-   * let parentView = new ViewStream('main');
-   * parentView.appendToDom(document.body);
-   *
-   * let childView = new ViewStream({tagName:'h2', data:'Hello World'};
-   * parentView.appendView(childView)
-   *
-   * */
-  appendView(v, query) {
-    this.exchangeViewsWithChild(v, this.setAttachData('appendChild', query));
-  }
-  /**
-   * This method appends a child ViewStream object to a parent ViewStream object.
-   * @param {ViewStream} v the ViewStream parent.
-   * @param {string} query a querySelector within this ViewStream.
-   * @param {level} this parameters can attach the viewStream's dom element up the dom tree while still maintaining the parent-child relationship of the ViewStream objects.
-   *
-   * @example
-   * //  returns
-   * &lt;body>
-   *    &lt;main>
-   *        &lt;h2>Hello World&lt;/h2>
-   *    &lt;/main>
-   * &lt;/body>
-   *
-   *
-   * let parentView = new ViewStream('main');
-   * parentView.appendToDom(document.body);
-   *
-   * let childView = new ViewStream({tagName:'h2', data:'Hello World'};
-   * childView.appendToParent(parentView)
-   *
-   * */
-  appendViewToParent(v, query, level = 1) {
-    this.exchangeViewsWithChild(v, this.setAttachParentData('appendChild', query, level));
-  }
-  /**
-   * This method prepends a child ViewStream object to a parent ViewStream object.
-   * @param {ViewStream} v the ViewStream parent.
-   * @param {string} query a querySelector within this ViewStream.
-   * @param {number} level this parameter can attach the viewStream's dom element up the dom tree while still maintaining the parent-child relationship of the ViewStream objects.
-   *
-   * @example
-   * let parentView = new ViewStream('main');
-   * parentView.prependToDom(document.body);
-   *
-   * let childView = new ViewStream({tagName:'h2', data:'Hello World'};
-   * childView.prependViewToParent(parentView)
-   *
-   * */
-  prependViewToParent(v, query, level = 1) {
-    this.exchangeViewsWithChild(v, this.setAttachParentData('prependChild', query, level));
-  }
-  /**
-   *
-   *
-   * This method prepends a child ViewStream object to the current ViewStream object. &lt;br>After the attachment, rxjs observables are exchanged between the parent and child ViewStream objects.&lt;br>&lt;br>
-   * @param {ViewStream} v the ViewStream child that is to be attached.
-   * @param {string} query a querySelector within this ViewStream.
-   *
-   * @example
-   * //  returns
-   * &lt;body>
-   *    &lt;main>
-   *        &lt;h2>Hello World&lt;/h2>
-   *    &lt;/main>
-   * &lt;/body>
-   *
-   * let parentView = new ViewStream('main');
-   * parentView.appendToDom(document.body);
-   *
-   * let childView = new ViewStream({tagName:'h2', data:'Hello World'};
-   * parentView.prependView(childView);
-   *
-   * */
-  prependView(v, query) {
-    this.exchangeViewsWithChild(v, this.setAttachData('prependChild', query));
-  }
-  onRendered(payload) {
-    // console.log('RENDER: ', this.props.name, payload);
-    if (payload.from$ === 'internal') {
-      this.viewsStreamBroadcaster = new ViewStreamBroadcaster(this.props, this.broadcastEvents);
-      // this.props['el'] = payload.el.el;
-      this.afterRender();
-    }
-  }
-  // ================================= METHODS TO BE EXTENDED ==============================
-  /**
-   *
-   * This method is called once the ViewStream's domElement has been rendered and attached to the dom.
-   * &lt;br>
-   * This method is empty and is meant to be overridden.
-   *
-   * */
-  afterRender() {
-  }
-  /**
-   *
-   * Add any query within the ViewStream's dom and any dom events to automatically be observed by the UI Channel.
-   * &lt;br>
-   * @example
-   *
-   *  broadcastEvents() {
-     *  // ADD BUTTON EVENTS AS NESTED ARRAYS
-     *  return [
-     *       ['#my-button', 'mouseover'],
-     *       ['#my-input', 'change']
-     *     ]
-     *   }
-   *
-   *
-   * */
-  broadcastEvents() {
-    // ADD BUTTON EVENTS AS NESTED ARRAYS
-    return [
-    ];
-  }
-  /**
-   *
-   * Automatically connect to an instance of registered channels, such as 'DOM', 'UI', and 'ROUTE' channels.
-   *
-   *
-   * @example
-   *
-   * let uiChannel = this.getChannel('UI');
-   *
-   * uiChannel
-   *    .filter((p) => p.data.id==='#my-button')
-   *    .subscribe((p) => console.log('my button was clicked ', p));
-   *
-   * */
-  getChannel(channel) {
-    let isValidChannel = c => registeredStreamNames().includes(c);
-    let error = c => console.warn(`channel name ${c} is not within ${registeredStreamNames}`);
-    let startSubscribe = (c) => window.Spyne.channels.getStream(c).observer;// getGlobalParam('streamsController').getStream(c).observer;
-    let fn = R.ifElse(isValidChannel, startSubscribe, error);
-    return fn(channel);
-  }
-  /**
-   *
-   * Preferred method to connect to instances of registered channels, such as 'DOM', 'UI', and 'ROUTE' channels.
-   *
-   * Add Channel will automatically unsubscribe to the channel, whereas the getChannel method requires the developer to manually unsubscribe.
-   *
-   * @param {string} str The name of the registered Channel that was added to the Channels Controller.
-   * @param {boolean} bool false, add true if the View should wait for this channel to unsubscribe before removing itself.
-   * @param {sendDownStream} bool The direction where the stream is allowed to travel.
-   *
-   * @example
-   *
-   * let routeChannel = this.addChannel('ROUTE');
-   *
-   *      extendedStateMethods() {
-     *           return [
-     *             ['CHANNEL_ROUTE_CHANGE_EVENT', 'onMapRouteEvent']
-     *           ]
-     *       }
-   *
-   *       onMapRouteEvent(p) {
-     *          console.log('the route value is ', p);
-     *       }
-   *
-   *
-   * */
-  addChannel(str, sendDownStream = false, bool = false) {
-    const directionArr = sendDownStream === true ? this.$dirs.CI : this.$dirs.I;
-    const mapDirection = p => Object.assign({$dir:directionArr}, R.clone(p));
-    let channel$ = this.getChannel(str)
-      .map(mapDirection);
-    this.updateSourceSubscription(channel$, false);
-    /* console.log('added channel ', str, channel);
-    let subscriber = {
-      next:     this.onSubscribeToSourcesNext.bind(this),
-      error:    this.onSubscribeToSourcesError.bind(this),
-      complete: this.onSubscribeToSourcesComplete.bind(this)
-    };
-    channel
-      .do(p => console.log('p in viewstream is ', p))
-      .subscribe(subscriber); */
-  }
-  /**
-   *
-   * Method to send data to any registered channel.
-   **
-   * @param {string} channelName The name of the registered Channel that was added to the Channels Controller.
-   * @param {string} action The event type that listeners can point to.
-   * @param {object} payload {}, The main data to send to the channel.
-   *
-   * @example
-   *
-   * let payload = {'location' : 'about'};
-   * let action = 'PAGE_CHANGE_EVENT';
-   * this.sendChannelPayload('ROUTE', paylaod, action);
-   *
-   *
-   *
-   * */
-  sendChannelPayload(channelName, action = 'DEFAULT_EVENT', payload = {}) {
-    let cid = this.props.cid;
-    let viewName = this.props.name;
-    let data = {cid, viewName, payload, action};
-    let obs$ = Rx.Observable.of(data);
-    return new ViewStreamPayload(channelName, obs$, data);
-  }
-  //  =======================================================================================
-  addMixins() {
-    //  ==================================
-    // BASE CORE MIXINS
-    //  ==================================
-    let coreMixins = BaseCoreMixins();
-    this.createId = coreMixins.createId;
-    this.createpropsMap = coreMixins.createpropsMap;
-    this.convertDomStringMapToObj = convertDomStringMapToObj;
-    this.ifNilThenUpdate = ifNilThenUpdate;
-    // this.gc = gc.bind(this);
-    //  ==================================
-    // BASE STREAM MIXINS
-    //  ==================================
-    let streamMixins = BaseStreamsMixins();
-    this.sendUIPayload = streamMixins.sendUIPayload;
-    this.sendRoutePayload = streamMixins.sendRoutePayload;
-    this.createLifeStreamPayload = streamMixins.createLifeStreamPayload;
-  }
-}
-</code></pre>
-        </article>
-    </section>
-</div>
-<nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="DomItem.html">DomItem</a></li><li><a href="ViewStream.html">ViewStream</a></li></ul>
-</nav>
-<br class="clear">
-<footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Dec 15 2017 22:34:55 GMT-0500 (EST)
-</footer>
-<script> prettyPrint(); </script>
-<script src="scripts/linenumber.js"> </script>
-</body>
-</html>