spyne 0.16.0 → 0.18.0

package/src/spyne/spyne-plugins.js

@@ -1,20 +1,24 @@
-import {SpyneApp, ViewStream, DomElement} from './spyne';
-import {prop, path, is, pathSatisfies} from 'ramda';
+import {SpyneApp, DomElement, SpyneAppProperties} from './spyne';
+import {is, clone, pathSatisfies} from 'ramda';
 export class SpynePlugin {
 
   constructor(props={}) {
     let {name, config, parentEl} = props;
     this.props = props;
 
+
+    if (config===undefined){
+      config = clone(props);
+    }
+
     this.name = name || 'empty';
     this.props.name = name;
     config = SpynePlugin.mergeDefaultConfig(config, this.defaultConfig());
     this.props.parentEl = parentEl || SpynePlugin.createParentEl();
-    this.props.spyneApp = SpynePlugin.getSpyneApp(name, config);
-    console.log("SPYNE APP ",{name},this.name,this.props.spyneApp);
-    if (this.props.spyneApp===false){
-      //console.warn(`Spyne Warning: Spyne Plugin, ${this.name} already exists!`)
-      return false;
+    SpynePlugin.getSpyneApp(name, config);
+
+    if (this.props.traits!==undefined){
+      this.addTraits(this.props.traits);
     }
 
     this.onBeforeRegistered();
@@ -22,49 +26,21 @@ export class SpynePlugin {
     this.onRender();
   }
 
-  onBeforeRegistered(){
-    this.props.pluginName = this.props.name;
-    this.props.config = path(['Spyne', 'config', 'plugins', this.props.name], window);
-
-  }
-
   static mergeDefaultConfig(config={}, defaultConfig=this.defaultConfig()){
     return Object.assign(defaultConfig, config);
   }
 
-
-  defaultConfig(){
-
-    return {
-
-
-    }
-
-  }
-
-
-
   static getSpyneApp(name, config){
-    const win = window || {};
-    let spyneApp = prop('Spyne', win) ;
-    const spyneInitialized = typeof(spyneApp) === 'object';
-    //console.log('spyne app is ',{spyneApp, spyneInitialized}, typeof(spyneApp));
-
-    spyneApp = spyneInitialized === true ? spyneApp : new spyneApp();
-
-     const updateConfig = SpynePlugin.updateSpyneConfig(spyneApp, name, config);
+    if(SpyneAppProperties.initialized===false){
+      SpyneApp.init()
+    }
 
-     if(updateConfig===false){
-       return false;
-     }
+    SpyneAppProperties.addPluginConfig(name, config);
 
-   // spyneApp.config.plugins[name] = config;
-    return spyneApp;
   }
 
   static updateSpyneConfig(spyneApp, pluginName, pluginConfig){
     const pathExists = pathSatisfies(is(Object), ['config', 'plugins', pluginName])(spyneApp);
-   // console.log('path exists ',{pathExists}, spyneApp.config.plugins[pluginName])
 
     if (pathExists===true){
       if (spyneApp.config.debug===true) {
@@ -87,7 +63,7 @@ export class SpynePlugin {
         });
         document.body.appendChild(pluginEl.render());
         const el = document.getElementById('spyne-plugins')
-        el.style.cssText="position:absolute; top:0;left:0;width:100%;height:100%;min-height:100vh; pointer-events:none";
+        el.style.cssText="position:absolute; top:0;left:0;width:100%;height:100%;min-height:100vh;z-index:1000000; pointer-events:none";
         return el;
       }
       return pluginEl || createPluginEl();
@@ -96,6 +72,32 @@ export class SpynePlugin {
     return el || createPluginParentEl();
   }
 
+  addTraits(traits){
+    if (traits.constructor.name!=='Array'){
+      traits = [traits];
+    }
+    const addTrait=(TraitClass)=>{
+      return new TraitClass(this);
+    };
+
+    traits.forEach(addTrait);
+
+  }
+
+  onBeforeRegistered(){
+    this.props.pluginName = this.props.name;
+    this.props.config = SpyneAppProperties.getPluginConfigByPluginName(this.props.pluginName);
+  }
+
+  defaultConfig(){
+
+    return {
+
+
+    }
+
+  }
+
   onRegistered(){
 
 
@@ -109,3 +111,4 @@ export class SpynePlugin {
 
 
 }
+

package/src/spyne/spyne.js

@@ -1,6 +1,5 @@
-import { ChannelsDelegator } from './channels/channels-delegator';
-import { ChannelDataPacketGenerator } from './utils/channel-data-packet-generator';
-import { DomElement, DomEl } from './views/dom-element';
+import { ChannelsMap } from './channels/channels-map';
+import { DomElement } from './views/dom-element';
 import {DomElementTemplate} from './views/dom-element-template';
 import { ViewStreamElement } from './views/view-stream-element';
 import { ViewStreamSelector} from './views/view-stream-selector';
@@ -13,178 +12,28 @@ import { ChannelFetch } from './channels/channel-fetch-class';
 import {ChannelFetchUtil} from './utils/channel-fetch-util';
 import { ChannelPayload } from './channels/channel-payload-class';
 import {ChannelPayloadFilter} from './utils/channel-payload-filter';
-import {SpyneUtilsChannelRoute} from './utils/spyne-utils-channel-route';
 import {SpynePlugin} from './spyne-plugins';
 import { deepMerge } from './utils/deep-merge';
+import {SpyneAppProperties} from './utils/spyne-app-properties';
+import {SpyneApp} from './spyne-app';
 
-class SpyneApp {
-  /**
-   *
-   * SpyneApp creates the global Spyne object, and creates the following items
-   * <ul>
-   *
-   * <li>LINK['ChannelsDelegator', 'channels-controller'] that directs the flow of data to all Channels</li>
-   * <li>LINK['SpyneChannelUI', 'spyne-channel-u-i'], that broadcast all user interaction events</li>
-   * <li>LINK['SpyneChannelRoute', 'spyne-channel-route'], that broadcast window location changes and is the only other channel that can be bound to user events</li>
-   * <li>LINK['SpyneChannelWindow', 'spyne-channel-window'], that broadcast all requested window and document events, such as scrolling, resizing and media queries</li>
-   * <li>LINK['SpyneChannelLifecycle', 'spyne-channel-lifecycle'], that broadcasts rendering and removing of ViewStream elements that have been directed to broadcast their lifecycle events</li>
-   * </ul>
-   *
-   *
-   * @module SpyneApp
-   * @type core
-   *
-   * @constructor
-   * @param {Object} config
-   * @property {Object} config - = {}; This global config object is mainly used to provide configuration details for two SpyneChannels, CHANNEL_ROUTE and CHANNEL_WINDOW.
-   */
-  constructor(config = {}) {
-    this.channels = new ChannelsDelegator();
-    this.VERSION = '0.16.0';
-/*!
- * Spyne 0.16.0
- * https://spynejs.org
- *
- * @license Copyright 2017-2020, Frank Batista, Relevant Context, LLC. All rights reserved.
- * Spyne is licensed under the GNU Lesser General Public License v3.0
- *
- * @author: Frank Batista,
- * @email:  frbatista.nyc@gmail.com
-*/
-/* eslint-disable */
-    this.ViewStream = ViewStream;
-    this.BasicView = ViewStreamElement;
-    this.DomEl = DomElement;
-    this.ViewStreamBroadcaster = ViewStreamBroadcaster;
-    this.ChannelsPayload = ViewStreamPayload;
-    this.ChannelsController = ChannelsDelegator;
-    this.ChannelsBase = Channel;
-    this.ChannelPayloadItem = ChannelPayload;
-    this._channelDataPacketGenerator = new ChannelDataPacketGenerator();
-    window.Spyne = this;
-    let defaultConfig = {
-      scrollLock: false,
-      scrollLockX: 31,
-      scrollLockY: 0,
-      debug: false,
-      utils: {
-        tableRE: /^([^>]*?)(<){1}(\b)(thead|col|colgroup|tbody|td|tfoot|tr|th)(\b)([^\0]*)$/
-      },
-      tmp:{
-
-      },
-      plugins:{
-
-      },
-      channels: {
-        WINDOW: {
-          mediqQueries: {
-
-          },
-          events: [],
-          listenForResize: true,
-          listenForOrientation: true,
-          listenForScroll: false,
-          listenForMouseWheel: false,
-          debounceMSTimeForResize: 200,
-          debounceMSTimeForScroll: 150
-        },
-
-        ROUTE: {
-          type: 'slash',
-          isHash: false,
-          isHidden: false,
-          add404s: false,
-          routes: {
-            'routePath' : {
-              'routeName' : 'change'
-            }
-          }
-
-        },
-
-        CHANNEL_ROUTE: {},
-        CHANNEL_UI: {},
-      }
-    };
-    if (config !== undefined) {
-      config = SpyneUtilsChannelRoute.conformRouteObject(config);
-      window.Spyne['config'] = deepMerge(defaultConfig, config)
-    }
-
-
-
-    this.getChannelActions = (str) => window.Spyne.channels.getChannelActions(str);
-    this.registerChannel = (val) => this.channels.registerStream(val);
-    this.registerDataChannel = (obs$) => this.channels.registerStream(obs$);
-    this.listChannels = () => Array.from(window.Spyne.channels.map.keys());
-    let nullHolder = new ViewStream({ id:'spyne-null-views' });
-    nullHolder.appendToDom(document.body);
-    nullHolder.props.el.style.cssText = 'display:none; opacity:0; pointer-events:none;';
-    this.channels.init();
-  }
-
-
-  get createDataPacket(){
-    return this._channelDataPacketGenerator.createDataPacket;
-  }
-
-  /**
-   * This is mostly used for debugging purposes
-   *
-   * @example
-   * TITLE['<h4>Listing the registereed Channels in the browser console</h4>']
-   * SpyneApp.listChannels();
-   *
-   * @returns A list of all registered channels
-   */
-  static listChannels() {
-    return Array.from(window.Spyne.channels.map.keys());
-  }
-
-  /**
-   * This method is useful to check in the console or in the code what actions are available to be listened to.
-   * @param {String} str
-   * @returns {Array} An array of Actions that can be listened to
-   */
-  static getChannelActions(str) {
-    return window.Spyne.channels.getChannelActions(str);
-  }
-
-  /**
-   *
-   * This method will add the channel to the registered list so that it can subscribed by all ViewStream and Channel instances.
-   * @param {Channel} c
-   *
-   *
-   */
-  static registerChannel(c) {
-    if (window.Spyne === undefined) {
-      console.warn('Spyne has not been initialized');
-    } else {
-      return window.Spyne.channels.registerStream(c);
-    }
-  }
-}
-
-window['Spyne'] = SpyneApp;
 export {
   ViewStreamElement,
   Channel,
   ChannelFetch,
     ChannelFetchUtil,
-  ChannelsDelegator,
+  ChannelsMap,
   ViewStreamPayload,
   ChannelPayload,
     ChannelPayloadFilter,
   DomElement,
-    DomEl,
   DomElementTemplate,
   ViewStream,
     ViewStreamSelector,
   ViewStreamBroadcaster,
   SpyneTrait,
   SpyneApp,
+  SpyneAppProperties,
   SpynePlugin,
   deepMerge
 };

package/src/spyne/utils/channel-config-validator.js

@@ -1,6 +1,5 @@
 import Validation from 'data.validation';
 import {curry, curryN, length, always, reduce} from 'ramda';
-// import { curry, curryN, reduce, length, always } from 'ramda';
 const success = Validation.Success;
 const failure = Validation.Failure;
 let validate = () => {};

package/src/spyne/utils/channel-fetch-util.js

@@ -2,7 +2,6 @@ import { from } from 'rxjs';
 import { flatMap, map, publish, tap } from 'rxjs/operators';
 import {compose, prop, defaultTo, over, lensProp, has, propEq, when, propIs, allPass, assoc, pick, mergeDeepRight} from 'ramda';
 export class ChannelFetchUtil {
-// METHOD GET POST PUT PATCH DELETE
   /**
    * @module ChannelFetchUtil
    * @type util
@@ -49,7 +48,7 @@ export class ChannelFetchUtil {
 
 
   constructor(options, subscriber, testMode) {
-    // console.log('url ',url,options);
+
     const testSubscriber = (p) => console.log('FETCH RETURNED ', p);
 
     this._mapFn = ChannelFetchUtil.setMapFn(options);

package/src/spyne/utils/channel-payload-filter.js

@@ -1,14 +1,9 @@
 import {
   is,
   reject,
-  ifElse,
-  invoker,
-  identity,
-  assoc,
   isNil,
-    find,
+  find,
   allPass,
-  tap,
   forEachObjIndexed,
   not,
   isEmpty,
@@ -19,17 +14,15 @@ import {
   where,
   defaultTo,
   mergeAll,
-  __,
   omit,
-  path,
-  call,
-  clone,
   flatten,
   any,
-  type,
   curry,
-  mergeRight, lte,
+  lte
 } from 'ramda';
+
+import {SpyneAppProperties} from './spyne-app-properties';
+
 const rMap = require('ramda').map;
 
 const isNotArr = compose(not, is(Array));
@@ -122,8 +115,6 @@ export class ChannelPayloadFilter {
 
     const debugLabelArr = [debugLabel,  prop('debugLabel', filters)]
 
-    const makeBool = b => Boolean(b);
-
     debugLabel = compose(find(is(String)))(debugLabelArr);
 
     let props = omit(['debugLabel', 'label', 'selector', 'props', 'testMode', 'propFilters'], filters)
@@ -137,22 +128,13 @@ export class ChannelPayloadFilter {
     filters['propFilters'] = props;
 
     let {propFilters} = filters;
-    //console.log("selector filters ", {selector, filters})
 
-    // let {selector,propFilters,debugLabel} = filters;
 
     const addStringSelectorFilter =  isNonEmptyStr(selector) ? ChannelPayloadFilter.filterSelector([selector], debugLabel) : undefined;
     const addArraySelectorFilter =   isNonEmptyArr(selector) ? ChannelPayloadFilter.filterSelector(selector, debugLabel) : undefined;
-
-
     const addDataFilter = isNonEmptyObjectFn(propFilters) ? ChannelPayloadFilter.filterData(propFilters, debugLabel) : undefined;
 
-    //console.log("IS STRING ",{selector, addStringSelectorFilter, addArraySelectorFilter, addDataFilter},isNonEmptyStr(selector))
-
-
-
     let filtersArr = reject(isNil, [addStringSelectorFilter, addArraySelectorFilter, addDataFilter]);
-   // console.log('filtersArr is ',{selector})
 
       // IF ARRAY IS EMPTY ALWAYS RETURN FALSE;
 
@@ -160,15 +142,12 @@ export class ChannelPayloadFilter {
 
       if (filtersAreEmpty){
         filtersArr = [always(false)];
-        if (path(['Spyne', 'config', 'debug'], window) === true && testMode!==true){
+        if (SpyneAppProperties.debug === true && testMode!==true){
           console.warn(`Spyne Warning: The Channel Filter, with selector: ${selector}, and propFilters:${propFilters} appears to be empty!`);
         }
 
       }
-
-
-    //console.log(" VALUES OF FILTERS ",{selector,propFilters,filters,debugLabel,testMode, filtersAreEmpty});
-    if (testMode === true){
+      if (testMode === true){
         return {selector, propFilters, debugLabel, filters, testMode, filtersAreEmpty};
       }
 
@@ -178,40 +157,21 @@ export class ChannelPayloadFilter {
   static filterData(filterJson, filterdebugLabel) {
     const debugLabel = filterdebugLabel;
 
-    //console.log('filter data is ',{filterJson, debugLabel})
     let compareData = () => {
       // DO NOT ALLOW AN EMPTY OBJECT TO RETURN TRUEs
       if (isEmpty(filterJson)) {
         return always(false);
       }
 
-      //console.log("FILTER JSON ",filterJson);
       //  CHECKS ALL VALUES IN JSON TO DETERMINE IF THERE ARE FILTERING METHODS
 
-      //let typeArrFn = compose(values, rMap(type));
-
-      /*let sendMalFormedWarningBool = uniq(filterValsArr).length > 1;
-      if (sendMalFormedWarningBool === true) {
-        console.warn('Spyne Warningd: The data values in ChannelActionFilters needs to be either all methods or all static values.  DATA: ', filterJson);
-      }*/
-
       const createCurryComparator = compareStr => (str)=>{
         return str===compareStr;
       };
       const checkToConvertToFn = (val, key, obj)=>val = is(String, val)===true ? createCurryComparator(val) : val;
       filterJson = rMap(checkToConvertToFn, filterJson);
 
-      // console.log("FILTER JSON: ",{filterJson, newJson});
-      //const isAllMethods  = all(equals('Function'), filterValsArr);
-
-      // PULL OUT THE CHANNEL PAYLOAD OBJECT IN THE MAIN PAYLOAD
-      // let payload = prop('channelPayload', eventData)
-
-      // IF THERE ARE METHODS IN THE FILTERING JSON, THEN USE where or whereEq if Basic JSON
-     // let fMethod = isAllMethods === true ? where(filterJson) : whereEq(filterJson);
-
       // TAP LOGGER
-
       const tapLogger = (comparedObj)=>{
         if (debugLabel===undefined){
           return comparedObj;
@@ -225,13 +185,11 @@ export class ChannelPayloadFilter {
       };
 
       // END TAP LOGGER
-
       let fMethod = where(filterJson);
 
       let getFilteringObj =  (v)=>{
         const {payload, srcElement, event} = v || {};
-        const o = Object.assign({}, v, event,srcElement, payload);
-
+        const o = Object.assign({}, v, event, payload);
         //console.log('o is ',o);
         return o;
       }
@@ -240,29 +198,20 @@ export class ChannelPayloadFilter {
       return compose( fMethod, tapLogger, defaultTo({}),  getFilteringObj);
 
     };
-   // const filterLabel = `filtering-${Math.floor(Math.random()*999999)}`;
-    //console.time(filterLabel);
-   // const val = compareData();
 
-    //console.timeEnd(filterLabel);
-    //return val;
     return compareData();
   }
 
 
   static checkPayloadSelector(arr, debugLabel, srcPayload) {
-    // ELEMENT FROM PAYLOADs
-
 
+    // ELEMENT FROM PAYLOADs
     const {payload, srcElement, event} = srcPayload || {};
-    //console.log('payload before ',{srcPayload, payload, srcElement, event})
 
     const reduceFindEl = (acc, src) => {
       const el = prop('el', src);
-      //console.log("EL IS ",{el, src, acc})
       if (ChannelPayloadFilter.elIsDomElement(el) && acc===undefined){
         acc = el;
-       // return acc;
       }
       return acc;
     }
@@ -270,19 +219,6 @@ export class ChannelPayloadFilter {
     const el = [srcElement, payload, prop('srcElement', event), srcPayload].reduce(reduceFindEl, undefined);
 
 
-    //console.log('el check ',{debugLabel, srcElement, payload, event, el})
-
-    //const o = Object.assign({}, srcPayload, event,srcElement, payload);
-
-    //console.log('o is ',o);
-
-
-    //let payloadIsNotProps = compose(equals('Function'),type, prop('props')  )(payload);
-    //payload = payloadIsNotProps === true ? payload.payload : payload;
-   // console.log('payload after ',{o})
-
-   // let el = path(['el'], o);
-
     // RETURN BOOLEAN MATCH WITH PAYLOAD EL
     const compareEls = (elCompare) => elCompare.isEqualNode((el));
 
@@ -297,10 +233,7 @@ export class ChannelPayloadFilter {
     if (debugLabel!==undefined){
       let nodeArrResultsDebugger = compose(flatten, rMap(mapNodeArrWithEl))(arr);
       const selectorsArr = arr;
-
       console.log(`%c CHANNEL PAYLOAD FILTER DEBUGGER ["${debugLabel}"] - selectors: `, "color:orange;",{el, selectorsArr, nodeArrResultsDebugger});
-
-
     }
 
     // CHECK IF PAYLOAD EL EXISTS

package/src/spyne/utils/frp-tools.js

@@ -6,6 +6,26 @@ const isIOS = () => {
   return ios === true;
 };
 
+
+const delayCall = async(fn, time)=>{
+
+  function sleep (ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  const timeoutHandler = async() => {
+    await sleep(1);
+    window.requestAnimationFrame(fn);
+  }
+
+  window.setTimeout(timeoutHandler, time)
+
+
+}
+
+
+
+
 const getConstructorName = (obj) => {
   if (obj.constructor.name !== undefined) {
     return obj.constructor.name;
@@ -142,4 +162,4 @@ const pullParams =    (str) => str.replace(routeRE, '$4');
 const pullTranslateX = str => str.replace(/^(matrix)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*)(,.*)/, '$6');
 const pullTranslateY = str => str.replace(/^(matrix)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d)(.*)/, '$7');
 const pullTranslateYFromHeader = str => str.replace(/^(transform: matrix)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*,)(.*\d*)(\).*;)/, '$6');
-export { getConstructorName, arrFromMapKeys, getAllMethodNames, findStrOrRegexMatchStr, findStrFromRegexArr, checkIfObjIsNotEmptyOrNil, isIOS, pullRouteInfo, pullTranslateYFromHeader, pullSlashFromPath, pullHashAndSlashFromPath, closest, pullTranslateY, pullTranslateX, pullMainRoute, pullParams, right, left, fromNullable, findInObj, ifNilThenUpdate, removeSlashes, subscribeFn, convertDomStringMapToObj };
+export { getConstructorName, arrFromMapKeys, getAllMethodNames, findStrOrRegexMatchStr, findStrFromRegexArr, checkIfObjIsNotEmptyOrNil, isIOS, pullRouteInfo, pullTranslateYFromHeader, pullSlashFromPath, pullHashAndSlashFromPath, closest, pullTranslateY, pullTranslateX, pullMainRoute, pullParams, right, left, fromNullable, findInObj, ifNilThenUpdate, removeSlashes, subscribeFn, convertDomStringMapToObj, delayCall };

package/src/spyne/utils/gc.js

@@ -1,7 +1,7 @@
 import {forEach} from 'ramda';
 export function gc() {
   let cleanup = () => {
-    let loopM = m => void 0;
+    let loopM = m => undefined;
     forEach(loopM, this);
   };
   setTimeout(cleanup, 1);

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

@@ -7,10 +7,7 @@ export class RouteChannelUpdater{
     let id = `${name}_ROUTE_UPDATER`;
 
     const sendRouteChannelUpdate = curry(RouteChannelUpdater.createTemporaryViewStreamObj);
-
     return sendRouteChannelUpdate({id,name});
-
-   //RouteChannelUpdater.createTemporaryViewStreamObj({name,id});
   }
 
 
@@ -30,7 +27,6 @@ export class RouteChannelUpdater{
     };
 
     vs.appendToNull();
-    //console.log("VIEWSTREAM IS ",{vs, name,id,payload});
 
   }