spyne 0.14.8 → 0.17.3

package/src/spyne/utils/spyne-scroll-lock.js

@@ -0,0 +1,95 @@
+export class SpyneScrollLock {
+
+  /**
+   * @module SpyneScrollLock
+   * @type core
+   * @desc
+   * Channel Window utility that handles locking body scroll.
+   *
+   * @constructor
+   * @param {Number} x - = 0; Window scroll X position.
+   * @param {Number} y - = 0; Window scroll Y position.
+   *
+   */
+
+
+  constructor(x=window.scrollX,y=window.scrollY) {
+    this.scrollX = x;
+    this.scrollY = y;
+    this.scrollLocked = false;
+    this.scrollElement = undefined;
+    this.defaultScrollState = SpyneScrollLock.getDefaultScrollState();
+    /**
+     * TODO: GET IOS BOOL -- check window height in IOS and adjust
+     *
+     *
+     * */
+
+
+  }
+
+  static getDefaultOverflow(){
+     return window.getComputedStyle(document.body)['overflow'];
+  }
+
+  static getDefaultPosition(){
+    return window.getComputedStyle(document.body)['position'];
+
+  }
+
+  static getDefaultTop(){
+    return window.getComputedStyle(document.body)['top'];
+
+  }
+
+  static getDefaultBodyTop(){
+    return window.getComputedStyle(document.body)['top'];
+
+  }
+
+  static getDefaultScrollState(){
+    return {
+      position: SpyneScrollLock.getDefaultPosition(),
+      overflow: SpyneScrollLock.getDefaultOverflow(),
+      top: SpyneScrollLock.getDefaultTop(),
+      x: window.scrollX,
+      y: window.scrollY
+    }
+  }
+
+
+
+
+  disableBodyScroll(){
+
+
+   // this.defaultBodyOverflow = SpyneScrollLock.getDefaultOverflow();
+    this.defaultScrollState = SpyneScrollLock.getDefaultScrollState();
+    const {y} = this.defaultScrollState;
+    const bodyTopPos = `${y*-1}px`;
+
+    //console.log('disable body scroll ', this.defaultScrollState, bodyTopPos)
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = bodyTopPos;
+
+
+
+  }
+
+  enableBodyScroll(){
+    const {position, overflow, top, x, y} = this.defaultScrollState;
+
+    //console.log('Enable body scroll ', this.defaultScrollState)
+
+    document.body.style.overflow = overflow;
+    document.body.style.position = position;
+    document.body.style.top = top;
+    window.scrollTo(x,y);
+
+  }
+
+
+
+
+}

package/src/spyne/utils/spyne-utils-channel-route-url.js

@@ -1,4 +1,5 @@
 import {isEmpty, head, values, compose, prop, complement, isNil, allPass, reduce, filter, equals, toPairs, replace, either, propEq, __,invert,path,zipObj, reject, keys, find, assoc, is,has, when, split, always, concat, join, flatten, map, ifElse, test, findLastIndex,last, defaultTo,fromPairs } from 'ramda';
+import {SpyneAppProperties} from './spyne-app-properties';
 
 export class SpyneUtilsChannelRouteUrl {
   constructor() {
@@ -163,7 +164,7 @@ export class SpyneUtilsChannelRouteUrl {
     return map(mapUrlProps, urlsArr);
   }
 
-  static convertParamsToRoute(data, r = window.Spyne.config.channels.ROUTE, t, locStr) {
+  static convertParamsToRoute(data, r = SpyneAppProperties.config.channels.ROUTE, t, locStr) {
     const urlType = t !== undefined ? t : r.type;
     const isHash = r.isHash;
     let route = r.routes.routePath;

package/src/spyne/utils/spyne-utils-channel-route.js

@@ -129,7 +129,9 @@ export class SpyneUtilsChannelRoute {
         const [key, val] = arrPair;
         const isObject = is(Object, val);
 
-        const getLinkText = str => test(isValidStrRE, str) ? String(str).toUpperCase() : key;
+        const createTitle = (str)=>String(str).replace(/([-_])/g, " ").toUpperCase();
+
+        const getLinkText = str => test(isValidStrRE, str) ? createTitle(str) : key;
 
         if (key === 'routeName' || key === '404'){
           return acc;

package/src/spyne/utils/spyne-utils-channel-window.js

@@ -1,4 +1,4 @@
-import { fromEventPattern } from 'rxjs';
+import { fromEventPattern, fromEvent } from 'rxjs';
 import { map } from 'rxjs/operators';
 import {mapObjIndexed} from 'ramda';
 
@@ -66,7 +66,7 @@ export class SpyneUtilsChannelWindow {
   }
 
   static createMergedObsFromObj(config) {
-    let mediaQueriesObj = config.mediqQueries;
+    let mediaQueriesObj = config.mediaQueries || config.mediqQueries;
     let arr = [];
 
     const loopQueries = (val, key, obj) => {

package/src/spyne/views/dom-element-template.js

@@ -136,6 +136,9 @@ export class DomElementTemplate {
   constructor(template, data) {
     this.template = this.formatTemplate(template);
 
+    //const tempL = `template-${Math.floor(Math.random()*99999)}`
+   // this.tempL=tempL
+
     const checkForArrayData = ()=>{
       if (is(Array, data) === true) {
         data = {spyneData:data};
@@ -144,19 +147,21 @@ export class DomElementTemplate {
       }
     };
 
-    checkForArrayData();
 
+    checkForArrayData();
 
     this.templateData = data;
 
+
     let strArr = DomElementTemplate.getStringArray(this.template);
 
+
     let strMatches = this.template.match(DomElementTemplate.findTmplLoopsRE());
     strMatches = strMatches === null ? [] : strMatches;
 
-    const mapTmplLoop = (str, data) => str.replace(
-      DomElementTemplate.parseTmplLoopsRE(),
-      this.parseTheTmplLoop.bind(this));
+    const parseTmplLoopsRE = DomElementTemplate.parseTmplLoopsRE();
+    const parseTmplLoopFn =  this.parseTheTmplLoop.bind(this);
+    const mapTmplLoop = (str, data) => str.replace(parseTmplLoopsRE, parseTmplLoopFn);
     const findTmplLoopsPred = includes(__, strMatches);
 
     const checkForMatches = ifElse(
@@ -165,6 +170,7 @@ export class DomElementTemplate {
       this.addParams.bind(this));
 
     this.finalArr = strArr.map(checkForMatches);
+
   }
 
   static getStringArray(template) {
@@ -197,11 +203,24 @@ export class DomElementTemplate {
      *
      * @desc Returns a document fragment generated from the template and any added data.
      */
+
+
   renderDocFrag() {
+
+
     const html = this.finalArr.join('');
-    const el = document.createRange().createContextualFragment(html);
-    window.setTimeout(this.removeThis(), 10);
+    const isTableSubTag =   /^([^>]*?)(<){1}(\b)(thead|col|colgroup|tbody|td|tfoot|tr|th)(\b)([^\0]*)$/.test(html);
+    const el = isTableSubTag ? html : document.createRange().createContextualFragment(html);
+
+      window.setTimeout(this.removeThis(), 2);
     return el;
+
+  }
+
+  renderToString(){
+    const html = this.finalArr.join('');
+    window.setTimeout(this.removeThis(), 2);
+    return html;
   }
 
   getTemplateString() {
@@ -210,21 +229,33 @@ export class DomElementTemplate {
 
   formatTemplate(template) {
     return prop('nodeName', template)==='SCRIPT' ? template.innerHTML : template;
+  }
 
-   // return typeof (template) === 'string' ? template : template.text;
+  getDataValFromPathStr(pathStr, dataFile){
+    const pathArr = String(pathStr).split('.');
+    const pathData = path(pathArr, dataFile);
+    return pathData || '';
   }
 
   addParams(str) {
+    //console.time(this.tempL+'9')
+    const re = /(\.)/gm;
+
     const replaceTags = (str, p1, p2, p3) => {
-      let dataVal = compose(path(__, this.templateData), split('.'))(p2);
-      let defaultIsEmptyStr = defaultTo('');
-      return defaultIsEmptyStr(dataVal);
+      if (re.test(p2) === false && this.templateData[p2] !==undefined){
+        return this.templateData[p2];
+      }
+      return this.getDataValFromPathStr(p2, this.templateData);
     };
 
-    return str.replace(DomElementTemplate.swapParamsForTagsRE(), replaceTags);
+   return str.replace(DomElementTemplate.swapParamsForTagsRE(), replaceTags);
+
   }
 
   parseTheTmplLoop(str, p1, p2, p3) {
+
+    //console.time(this.tempL+'5b')
+    const reDot = /(\.)/gm;
     const subStr = p3;
     let elData = this.templateData[p2];
     const parseString = (item, str) => {
@@ -233,22 +264,17 @@ export class DomElementTemplate {
     const parseObject = (obj, str) => {
       const loopObj = (str, p1, p2) => {
         // DOT SYNTAX CHECK
-        return compose(path(__, obj), split('.'))(p2);
+        if (reDot.test(p2) === false && obj[p2] !==undefined) {
+          return obj[p2]
+        }
+
+        return this.getDataValFromPathStr(p2, obj);
       };
       return str.replace(DomElementTemplate.swapParamsForTagsRE(), loopObj);
     };
-    const mapStringData = (d) => {
-      if (typeof (d) === 'string') {
-        //console.log("MAP STR 1 ",{d, subStr});
+    const mapStringData = (d) => typeof(d) === 'string' ? parseString(d, subStr) : parseObject(d, subStr);
 
-        d = parseString(d, subStr);
-       // console.log("MAP STR 2",{d, subStr});
 
-      } else {
-        d = parseObject(d, subStr);
-      }
-      return d;
-    };
     if (isNil(elData) === true || isEmpty(elData)) {
       return '';
     }
@@ -256,6 +282,9 @@ export class DomElementTemplate {
     if (elData.length===undefined) {
           elData = [elData];
       }
-      return elData.map(mapStringData).join('');
+
+     return elData.map(mapStringData).join('');
+
+
   }
 }

package/src/spyne/views/dom-element.js

@@ -97,9 +97,9 @@ class DomElement {
     let addTmpl = (template) => {
       let data = this.getProp('data');
       data = is(Object, data) ? data : {};
-
       let frag = new DomElementTemplate(template, data).renderDocFrag();
-      el.appendChild(frag);
+      const fragIsString = is(String, frag);
+      fragIsString ? el.innerHTML = frag : el.appendChild(frag);
       return el;
     };
     let doNothing = (el) => el;
@@ -143,6 +143,15 @@ class DomElement {
     return this.getProp('el');
   }
 
+  renderToHTMLString() {
+    this.execute();
+    this.props.template = undefined;
+    this.props.data = undefined;
+    this.props.attributes = undefined;
+    return this.getProp('el').outerHTML;
+  }
+
+
   returnIfDefined(obj, val) {
     if (val !== undefined) {
       let isObj = typeof (val) === 'undefined';

package/src/spyne/views/view-stream-broadcaster.js

@@ -1,6 +1,6 @@
 import { baseStreamsMixins } from '../utils/mixins/base-streams-mixins';
 import { convertDomStringMapToObj } from '../utils/frp-tools';
-
+import {SpyneAppProperties} from '../utils/spyne-app-properties';
 import { fromEvent } from 'rxjs';
 import { map } from 'rxjs/operators';
 import {clone, omit, path} from 'ramda';
@@ -99,10 +99,10 @@ export class ViewStreamBroadcaster {
       // run payload
       channelPayload(observable, data);
     };
-    let isDevMode = path(['Spyne', 'config', 'debug'], window) === true;
+    let isDevMode = SpyneAppProperties.debug === true;
     let queryIsNil = query === undefined || query.length <= 0;
     if (queryIsNil === true && isDevMode === true) {
-      console.warn(`Spyne Warning: The item ${selector}, does not appear to exist!`);
+      console.warn(`Spyne Warning: The item ${selector}, does not appear to exist in ${this.props.name} --> vsid:${this.props.vsid}!`);
       // query = this.props.el;
       // addObservable(query, event);
     } else {

package/src/spyne/views/view-stream-payload.js

@@ -1,6 +1,15 @@
 import { uiValidations } from '../channels/channels-config';
-import { validate } from '../utils/channel-config-validator';
+import {SpyneAppProperties} from '../utils/spyne-app-properties';
+//import { validate } from '../utils/channel-config-validator';
 import { gc } from '../utils/gc';
+import {
+  compose,
+  clone,
+  fromPairs,
+  toPairs,
+  __,
+  lte, defaultTo, prop, is,
+} from 'ramda';
 
 export class ViewStreamPayload {
   /**
@@ -18,40 +27,47 @@ export class ViewStreamPayload {
    * @param {Boolean} debug
    */
   constructor(name, observable, data, action = 'subscribe', debug = false) {
-    this.addMixins();
-    this.options = {
+    //this.addMixins();
+    const options = {
       'name' : name,
       'observable': observable,
       'data': data,
       'action': action
     };
-    this.getValidationChecks(name);
+   // this.getValidationChecks(name);
+    this.sendToDirectorStream(options);
   }
-  getValidationChecks(n) {
+/*  getValidationChecks(n) {
     let left  = e => console.warn(e);
     let right = val => this.onRunValidations(val);
-    const channelMap = window.Spyne.channels.map;
-    if (channelMap.has(n) === true) {
+    let channelExists = SpyneAppProperties.channelsMap.testStream(n);
+    if (channelExists === true) {
       return right(uiValidations);
     } else {
       return left('payload Needs a Valid Stream Name!');//
     }
   }
   onRunValidations(checks) {
-    validate(checks(), this.options).fold(
+    /!*validate(checks(), this.options).fold(
       this.onError.bind(this),
-      this.onSuccess.bind(this));
+      this.onSuccess.bind(this));*!/
   }
   onPayloadValidated(p) {
     this.sendToDirectorStream(p);
-  }
+  }*/
   sendToDirectorStream(payload) {
-    let streamsController = window.Spyne.channels;// getGlobalParam('streamsController');
-    let directorStream$ = streamsController.getStream('DISPATCHER');
-    // console.log('payload is ',payload);
-    directorStream$.next(payload);
-    this.gc();
+    let directorStream$ = SpyneAppProperties.channelsMap.getStream('DISPATCHER');
+    const frozenPayload = ViewStreamPayload.deepClone(payload);
+    //console.log('payload is ',frozenPayload);
+    directorStream$.next(frozenPayload);
+    payload = undefined;
+
+    //this.gc();
+    //console.timeEnd(label);
+
+    delete this;
   }
+/*
   onError(errors) {
     console.warn('payload failed due to:\n' + errors.map(e => '* ' + e).join('\n'));
     this.gc();
@@ -59,6 +75,51 @@ export class ViewStreamPayload {
   onSuccess(payload) {
     this.onPayloadValidated(payload);
   }
+*/
+
+  static deepClone(o) {
+    const isArr = is(Array);
+    const isObj = is(Object);
+    const isIter = ob => isArr(ob)===false && isObj(ob)===true;
+    const isIterable = isIter(o);
+    return isIterable ? compose(fromPairs, toPairs, clone)(o) : clone(o);
+
+  }
+
+
+
+  static deepFreeze(o) {
+    //return o;
+    //return Object.freeze(o);
+    const elIsDomElement = compose(lte(0), defaultTo(-1), prop('nodeType'));
+
+    try {
+      Object.freeze(o);
+      Object.getOwnPropertyNames(o).forEach(function(prop) {
+        if (o.hasOwnProperty(prop)
+            && elIsDomElement(o[prop]) === false
+            && o[prop] !== null
+            && (typeof o[prop] === "object" || typeof o[prop] === "function")
+            && !Object.isFrozen(o[prop])) {
+          ChannelPayload.deepFreeze(o[prop]);
+        }
+      });
+
+    } catch(e){
+      //console.log("FREEZE ERR ",{o,e});
+      return o;
+
+    }
+
+    return o;
+  }
+
+  static getMouseEventKeys() {
+    return ['altKey', 'bubbles', 'cancelBubble', 'cancelable', 'clientX', 'clientY', 'composed', 'ctrlKey', 'currentTarget', 'defaultPrevented', 'detail', 'eventPhase', 'fromElement', 'isTrusted', 'layerX', 'layerY', 'metaKey', 'movementX', 'movementY', 'offsetX', 'offsetY', 'pageX', 'pageY', 'path', 'relatedTarget', 'returnValue', 'screenX', 'screenY', 'shiftKey', 'sourceCapabilities', 'srcElement', 'target', 'timeStamp', 'toElement', 'type', 'view', 'which', 'x', 'y'];
+  }
+
+
+
   addMixins() {
     //  ==================================
     // BASE CORE MIXINS

package/src/spyne/views/view-stream-selector.js

@@ -1,5 +1,5 @@
 import {head, compose, reject, split, isEmpty, path, lte, defaultTo, prop} from 'ramda';
-
+import {SpyneAppProperties} from '../utils/spyne-app-properties';
 
 function generateSpyneSelectorId(el) {
   //const num = () => Math.floor(Math.random(10000000) * 10000000);
@@ -15,7 +15,7 @@ function generateSpyneSelectorId(el) {
 }
 
 function isDevMode(){
-  return path(['Spyne', 'config', 'debug'], window) === true;
+  return SpyneAppProperties.debug === true;
 }