sygnal 2.9.4 → 3.0.0

package/dist/index.esm.js

@@ -3144,10 +3144,11 @@ var _default$2 = debounce$1.default = debounce;
 const ENVIRONMENT = ((typeof window != 'undefined' && window) || (process && process.env)) || {};
 
 
-const REQUEST_SELECTOR_METHOD = 'request';
-const BOOTSTRAP_ACTION        = 'BOOTSTRAP';
-const INITIALIZE_ACTION       = 'INITIALIZE';
-const HYDRATE_ACTION          = 'HYDRATE';
+const BOOTSTRAP_ACTION  = 'BOOTSTRAP';
+const INITIALIZE_ACTION = 'INITIALIZE';
+const HYDRATE_ACTION    = 'HYDRATE';
+const PARENT_SINK_NAME  = 'PARENT';
+const CHILD_SOURCE_NAME = 'CHILD';
 
 
 let COMPONENT_COUNT   = 0;
@@ -3201,12 +3202,10 @@ class Component {
   // name
   // sources
   // intent
-  // request
   // model
   // context
-  // response
   // view
-  // children
+  // peers
   // components
   // initialState
   // calculated
@@ -3222,15 +3221,16 @@ class Component {
   // action$
   // model$
   // context$
-  // response$
-  // sendResponse$
-  // children$
+  // peers$
+  // childSources
   // vdom$
   // currentState
+  // currentProps
+  // currentChildren
   // currentContext
   // subComponentSink$
-  // unmountRequest$
-  // unmount()
+  // unmountRequest$ <- TODO
+  // unmount() <- TODO
   // _debug
 
   // [ INSTANTIATED STREAM OPERATOR ]
@@ -3239,18 +3239,17 @@ class Component {
   // [ OUTPUT ]
   // sinks
 
-  constructor({ name='NO NAME', sources, intent, request, model, context, response, view, children={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
+  constructor({ name='NO NAME', sources, intent, model, context, response, view, peers={}, components={}, initialState, calculated, storeCalculatedInState=true, DOMSourceName='DOM', stateSourceName='STATE', requestSourceName='HTTP', debug=false }) {
     if (!sources || !isObj(sources)) throw new Error('Missing or invalid sources')
 
     this.name       = name;
     this.sources    = sources;
     this.intent     = intent;
-    this.request    = request;
     this.model      = model;
     this.context    = context;
     this.response   = response;
     this.view       = view;
-    this.children   = children;
+    this.peers      = peers;
     this.components = components;
     this.initialState      = initialState;
     this.calculated        = calculated;
@@ -3273,6 +3272,23 @@ class Component {
       }));
     }
 
+    const props$ = sources.props$;
+    if (props$) {
+      this.sources.props$ = props$.map(val => {
+        this.currentProps = val;
+        return val
+      });
+    }
+
+    const children$ = sources.children$;
+    if (children$) {
+      this.sources.children$ = children$.map(val => {
+        this.currentChildren = val;
+        return val
+      });
+    }
+
+
     // Ensure that the root component has an intent and model
     // This is necessary to ensure that the component tree's state sink is subscribed to
     if (!this.isSubComponent && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
@@ -3288,14 +3304,13 @@ class Component {
     this.addCalculated = this.createMemoizedAddCalculated();
     this.log = makeLog(`${componentNumber} | ${name}`);
 
+    this.initChildSources$();
     this.initIntent$();
     this.initAction$();
-    this.initResponse$();
     this.initState();
     this.initContext();
     this.initModel$();
-    this.initSendResponse$();
-    this.initChildren$();
+    this.initPeers$();
     this.initSubComponentSink$();
     this.initSubComponentsRendered$();
     this.initVdom$();
@@ -3307,7 +3322,7 @@ class Component {
   }
 
   get debug() {
-    return this._debug || (ENVIRONMENT.DEBUG === 'true' || ENVIRONMENT.DEBUG === true)
+    return this._debug || (ENVIRONMENT.SYGNAL_DEBUG === 'true' || ENVIRONMENT.SYGNAL_DEBUG === true)
   }
 
   initIntent$() {
@@ -3344,7 +3359,7 @@ class Component {
 
     const action$    = ((runner instanceof Stream$1) ? runner : (runner.apply && runner(this.sources) || xs$1.never()));
     const bootstrap$ = xs$1.of({ type: BOOTSTRAP_ACTION }).compose(_default$4(10));
-    const wrapped$   = _default$3(bootstrap$, action$);
+    const wrapped$   = this.model[BOOTSTRAP_ACTION] ? _default$3(bootstrap$, action$) : action$;
 
 
     let initialApiData;
@@ -3361,92 +3376,6 @@ class Component {
       .compose(this.log(({ type }) => `<${ type }> Action triggered`));
   }
 
-  initResponse$() {
-    if (typeof this.request == 'undefined') {
-      return
-    } else if (!isObj(this.request)) {
-      throw new Error('The request parameter must be an object')
-    }
-
-    const router$ = this.sources[this.requestSourceName];
-    const methods = Object.entries(this.request);
-
-    const wrapped = methods.reduce((acc, [method, routes]) => {
-      const _method = method.toLowerCase();
-      if (typeof router$[_method] != 'function') {
-        throw new Error('Invalid method in request object:', method)
-      }
-      const entries = Object.entries(routes);
-      const mapped = entries.reduce((acc, [route, action]) => {
-        const routeString = `[${_method.toUpperCase()}]:${route || 'none'}`;
-        const actionType = typeof action;
-        if (actionType === 'undefined') {
-          throw new Error(`Action for '${ route }' route in request object not specified`)
-        } else if (actionType !== 'string' && actionType !== 'function') {
-          throw new Error(`Invalid action for '${ route }' route: expecting string or function`)
-        }
-        const actionString = (actionType === 'function') ? '[ FUNCTION ]' : `< ${ action } >`;
-        console.log(`[${ this.name }] Adding ${ this.requestSourceName } route:`, _method.toUpperCase(), `'${ route }' <${ actionString }>`);
-        const route$ = router$[_method](route)
-          .compose(_default$5((a, b) => a.id == b.id))
-          .map(req => {
-            if (!req || !req.id) {
-              throw new Error(`No id found in request: ${ routeString }`)
-            }
-            try {
-              const _reqId  = req.id;
-              const params  = req.params;
-              const body    = req.body;
-              const cookies = req.cookies;
-              const type    = (actionType === 'function') ? 'FUNCTION' : action;
-              const data    = { params, body, cookies, req };
-              const obj     = { type, data: body, req, _reqId, _action: type };
-
-              const timestamp = (new Date()).toISOString();
-              const ip = req.get ? req.get('host') : '0.0.0.0';
-
-              console.log(`${ timestamp } ${ ip } ${ req.method } ${ req.url }`);
-
-              if (this.debug) {
-                this.action$.setDebugListener({next: ({ type }) => this.log(`[${ this.name }] Action from ${ this.requestSourceName } request: <${ type }>`, true)});
-              }
-
-              if (actionType === 'function') {
-                const enhancedState = this.addCalculated(this.currentState);
-                const result = action(enhancedState, req);
-                return xs$1.of({ ...obj, data: result })
-              } else {
-                this.action$.shamefullySendNext(obj);
-
-                const sourceEntries = Object.entries(this.sources);
-                const responses     = sourceEntries.reduce((acc, [name, source]) => {
-                  if (!source || typeof source[REQUEST_SELECTOR_METHOD] != 'function') return acc
-                  const selected$ = source[REQUEST_SELECTOR_METHOD](_reqId);
-                  return [ ...acc, selected$ ]
-                }, []);
-                return xs$1.merge(...responses)
-              }
-            } catch(err) {
-              console.error(err);
-            }
-          }).flatten();
-        return [ ...acc, route$ ]
-      }, []);
-      const mapped$ = xs$1.merge(...mapped);
-      return [ ...acc, mapped$ ]
-    }, []);
-
-    this.response$ = xs$1.merge(...wrapped)
-      .compose(this.log(res => {
-        if (res._action) return `[${ this.requestSourceName }] response data received for Action: <${ res._action }>`
-        return `[${ this.requestSourceName }] response data received from FUNCTION`
-      }));
-
-    if (typeof this.response != 'undefined' && typeof this.response$ == 'undefined') {
-      throw new Error('Cannot have a response parameter without a request parameter')
-    }
-  }
-
   initState() {
     if (this.model != undefined) {
       if (this.model[INITIALIZE_ACTION] === undefined) {
@@ -3544,15 +3473,18 @@ class Component {
       sinkEntries.forEach((entry) => {
         const [sink, reducer] = entry;
 
-        const isStateSink = (sink == this.stateSourceName);
+        const isStateSink  = (sink === this.stateSourceName);
+        const isParentSink = (sink === PARENT_SINK_NAME);
 
         const on  = isStateSink ? onState() : onNormal();
-        const on$ = on(action, reducer);
+        const on$ = isParentSink ? on(action, reducer).map(value => ({ name: this.name, value })) : on(action, reducer);
 
         const wrapped$ = on$
           .compose(this.log(data => {
             if (isStateSink) {
               return `<${ action }> State reducer added`
+            } else if (isParentSink) {
+              return `<${ action }> Data sent to parent component: ${ JSON.stringify(data.value).replaceAll('"', '') }`
             } else {
               const extra = data && (data.type || data.command || data.name || data.key || (Array.isArray(data) && 'Array') || data);
               return `<${ action }> Data sent to [${ sink }]: ${ JSON.stringify(extra).replaceAll('"', '') }`
@@ -3576,51 +3508,7 @@ class Component {
     this.model$ = model$;
   }
 
-  initSendResponse$() {
-    const responseType = typeof this.response;
-    if (responseType != 'function' && responseType != 'undefined') {
-      throw new Error('The response parameter must be a function')
-    }
-
-    if (responseType == 'undefined') {
-      if (this.response$) {
-        this.response$.subscribe({
-          next: this.log(({ _reqId, _action }) => `Unhandled response for request: ${ _action } ${ _reqId }`)
-        });
-      }
-      this.sendResponse$ = xs$1.never();
-      return
-    }
-
-    const selectable = {
-      select: (actions) => {
-        if (typeof actions == 'undefined') return this.response$
-        if (!Array.isArray(actions)) actions = [actions];
-        return this.response$.filter(({_action}) => (actions.length > 0) ? (_action === 'FUNCTION' || actions.includes(_action)) : true)
-      }
-    };
-
-    const out = this.response(selectable);
-    if (!isObj(out)) {
-      throw new Error('The response function must return an object')
-    }
-
-    const entries = Object.entries(out);
-    const out$    = entries.reduce((acc, [command, response$]) => {
-      const mapped$ = response$.map(({ _reqId, _action, data }) => {
-        if (!_reqId) {
-          throw new Error(`No request id found for response for: ${ command }`)
-        }
-        return { _reqId, _action, command, data }
-      });
-      return [ ...acc, mapped$ ]
-    }, []);
-
-    this.sendResponse$ = xs$1.merge(...out$)
-      .compose(this.log(({ _reqId, _action }) => `[${ this.requestSourceName }] response sent for: <${ _action }>`));
-  }
-
-  initChildren$() {
+  initPeers$() {
     const initial = this.sourceNames.reduce((acc, name) => {
       if (name == this.DOMSourceName) {
         acc[name] = {};
@@ -3630,19 +3518,46 @@ class Component {
       return acc
     }, {});
 
-    this.children$ = Object.entries(this.children).reduce((acc, [childName, childFactory]) => {
-      const child$ = childFactory(this.sources);
+    this.peers$ = Object.entries(this.peers).reduce((acc, [peerName, peerFactory]) => {
+      const peer$ = peerFactory(this.sources);
       this.sourceNames.forEach(source => {
         if (source == this.DOMSourceName) {
-          acc[source][childName] = child$[source];
+          acc[source][peerName] = peer$[source];
         } else {
-          acc[source].push(child$[source]);
+          acc[source].push(peer$[source]);
         }
       });
       return acc
     }, initial);
   }
 
+  initChildSources$() {
+    let newSourcesNext;
+    const childSources$ = xs$1.create({
+      start: listener => {
+        newSourcesNext = listener.next.bind(listener);
+      },
+      stop: _ => {
+
+      }
+    }).map(sources => xs$1.merge(...sources)).flatten();
+
+    // childSources$.subscribe({ next: _ => _})
+
+    this.sources[CHILD_SOURCE_NAME] = {
+      select: (name) => {
+        const all$ = childSources$;
+        const filtered$ = name ? all$.filter(entry => entry.name === name) : all$;
+        const unwrapped$ = filtered$.map(entry => entry.value);
+        return unwrapped$
+      }
+    };
+
+    this.newChildSources = (sources) => {
+      if (typeof newSourcesNext === 'function') newSourcesNext(sources);
+    };
+  }
+
   initSubComponentSink$() {
     const subComponentSink$ = xs$1.create({
       start: listener => {
@@ -3689,17 +3604,17 @@ class Component {
   initSinks() {
     this.sinks = this.sourceNames.reduce((acc, name) => {
       if (name == this.DOMSourceName) return acc
-      const subComponentSink$ = this.subComponentSink$ ? this.subComponentSink$.map(sinks => sinks[name]).filter(sink => !!sink).flatten() : xs$1.never();
+      const subComponentSink$ = (this.subComponentSink$ && name !== PARENT_SINK_NAME) ? this.subComponentSink$.map(sinks => sinks[name]).filter(sink => !!sink).flatten() : xs$1.never();
       if (name === this.stateSourceName) {
-        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...this.children$[name]);
+        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...(this.peers$[name] || []));
       } else {
-        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, ...this.children$[name]);
+        acc[name] = xs$1.merge((this.model$[name] || xs$1.never()), subComponentSink$, ...(this.peers$[name] || []));
       }
       return acc
     }, {});
 
-    this.sinks[this.DOMSourceName]     = this.vdom$;
-    this.sinks[this.requestSourceName] = xs$1.merge(this.sendResponse$ ,this.sinks[this.requestSourceName]);
+    this.sinks[this.DOMSourceName] = this.vdom$;
+    this.sinks[PARENT_SINK_NAME] = this.model$[PARENT_SINK_NAME] || xs$1.never();
   }
 
   makeOnAction(action$, isStateSink=true, rootAction$) {
@@ -3712,33 +3627,30 @@ class Component {
         returnStream$ = filtered$.map(action => {
           const next = (type, data, delay=10) => {
             if (typeof delay !== 'number') throw new Error(`[${ this.name } ] Invalid delay value provided to next() function in model action '${ name }'. Must be a number in ms.`)
-            const _reqId = action._reqId || (action.req && action.req.id);
-            const _data  = _reqId ? (isObj(data) ? { ...data, _reqId, _action: name } : { data, _reqId, _action: name }) : data;
             // put the "next" action request at the end of the event loop so the "current" action completes first
             setTimeout(() => {
               // push the "next" action request into the action$ stream
-              rootAction$.shamefullySendNext({ type, data: _data });
+              rootAction$.shamefullySendNext({ type, data });
             }, delay);
             this.log(`<${ name }> Triggered a next() action: <${ type }> ${ delay }ms delay`, true);
           };
 
+          const extra = { props: this.currentProps, children: this.currentChildren, context: this.currentContext };
+
           let data = action.data;
-          if (data && data.data && data._reqId) data = data.data;
           if (isStateSink) {
             return (state) => {
               const _state = this.isSubComponent ? this.currentState : state;
               const enhancedState = this.addCalculated(_state);
-              const newState = reducer(enhancedState, data, next, action.req);
+              const newState = reducer(enhancedState, data, next, extra);
               if (newState == ABORT) return _state
               return this.cleanupCalculated(newState)
             }
           } else {
             const enhancedState = this.addCalculated(this.currentState);
-            const reduced = reducer(enhancedState, data, next, action.req);
+            const reduced = reducer(enhancedState, data, next, extra);
             const type = typeof reduced;
-            const _reqId = action._reqId || (action.req && action.req.id);
-            if (['string', 'number', 'boolean', 'function'].includes(type)) return reduced
-            if (isObj(reduced)) return { ...reduced, _reqId, _action: name }
+            if (isObj(reduced) || ['string', 'number', 'boolean', 'function'].includes(type)) return reduced
             if (type == 'undefined') {
               console.warn(`'undefined' value sent to ${ name }`);
               return reduced
@@ -3767,23 +3679,15 @@ class Component {
         return lastResult
       }
       if (!isObj(this.calculated)) throw new Error(`'calculated' parameter must be an object mapping calculated state field named to functions`)
-      const entries = Object.entries(this.calculated);
-      if (entries.length === 0) {
+
+      const calculated = this.getCalculatedValues(state);
+      if (!calculated) {
         lastState = state;
         lastResult = state;
         return state
       }
-      const calculated = entries.reduce((acc, [field, fn]) => {
-        if (typeof fn !== 'function') throw new Error(`Missing or invalid calculator function for calculated field '${ field }`)
-        try {
-          acc[field] = fn(state);
-        } catch(e) {
-          console.warn(`Calculated field '${ field }' threw an error during calculation: ${ e.message }`);
-        }
-        return acc
-      }, {});
 
-      const newState = { ...state, ...calculated, __context: this.currentContext };
+      const newState = { ...state, ...calculated };
 
       lastState = state;
       lastResult = newState;
@@ -3792,12 +3696,27 @@ class Component {
     }
   }
 
+  getCalculatedValues(state) {
+    const entries = Object.entries(this.calculated || {});
+    if (entries.length === 0) {
+      return
+    }
+    return entries.reduce((acc, [field, fn]) => {
+      if (typeof fn !== 'function') throw new Error(`Missing or invalid calculator function for calculated field '${ field }`)
+      try {
+        acc[field] = fn(state);
+      } catch(e) {
+        console.warn(`Calculated field '${ field }' threw an error during calculation: ${ e.message }`);
+      }
+      return acc
+    }, {})
+  }
+
   cleanupCalculated(incomingState) {
     if (!incomingState || !isObj(incomingState) || Array.isArray(incomingState)) return incomingState
     const state = this.storeCalculatedInState ? this.addCalculated(incomingState) : incomingState;
-    const { __props, __children, __context, ...sanitized } = state;
-    const copy  = { ...sanitized };
-    if (!this.calculated) return copy
+    const copy  = { ...state };
+    if (!this.calculated || this.storeCalculatedInState) return copy
     const keys = Object.keys(this.calculated);
     keys.forEach(key => {
       if (this.initialState && typeof this.initialState[key] !== 'undefined') {
@@ -3811,7 +3730,7 @@ class Component {
 
   collectRenderParameters() {
     const state        = this.sources[this.stateSourceName];
-    const renderParams = { ...this.children$[this.DOMSourceName] };
+    const renderParams = { ...this.peers$[this.DOMSourceName] };
 
     const enhancedState = state && state.isolateSource(state, { get: state => this.addCalculated(state) });
     const stateStream   = (enhancedState && enhancedState.stream) || xs$1.never();
@@ -3820,15 +3739,15 @@ class Component {
     renderParams.state  = stateStream.compose(_default$5(objIsEqual));
 
     if (this.sources.props$) {
-      renderParams.__props = this.sources.props$.compose(_default$5(objIsEqual));
+      renderParams.props = this.sources.props$.compose(_default$5(propsIsEqual));
     }
 
     if (this.sources.children$) {
-      renderParams.__children = this.sources.children$.compose(_default$5(objIsEqual));
+      renderParams.children = this.sources.children$.compose(_default$5(objIsEqual));
     }
 
     if (this.context$) {
-      renderParams.__context = this.context$.compose(_default$5(objIsEqual));
+      renderParams.context = this.context$.compose(_default$5(objIsEqual));
     }
 
     const names   = [];
@@ -3845,10 +3764,10 @@ class Component {
       .map(arr => {
         const params = names.reduce((acc, name, index) => {
           acc[name] = arr[index];
-          if (name === 'state') acc[this.stateSourceName] = arr[index];
-          if (name === '__props') acc.props = arr[index];
-          if (name === '__children') acc.children = arr[index];
-          if (name === '__context') acc.context = arr[index];
+          if (name === 'state') {
+            acc[this.stateSourceName] = arr[index];
+            acc.calculated = (arr[index] && this.getCalculatedValues(arr[index])) || {};
+          }
           return acc
         }, {});
         return params
@@ -3870,6 +3789,7 @@ class Component {
       }
 
       const sinkArrsByType = {};
+      const childSources = [];
       let newInstanceCount = 0;
 
       const newComponents =  entries.reduce((acc, [id, el]) => {
@@ -3881,9 +3801,13 @@ class Component {
         const isSwitchable = data.isSwitchable || false;
 
         const addSinks = (sinks) => {
-          Object.entries(sinks).map(([name, stream]) => {
+          Object.entries(sinks).forEach(([name, stream]) => {
             sinkArrsByType[name] ||= [];
-            if (name !== this.DOMSourceName) sinkArrsByType[name].push(stream);
+            if (name === PARENT_SINK_NAME) {
+              childSources.push(stream);
+            } else if (name !== this.DOMSourceName) {
+              sinkArrsByType[name].push(stream);
+            }
           });
         };
 
@@ -3930,6 +3854,8 @@ class Component {
       }, {});
 
       this.newSubComponentSinks(mergedSinksByType);
+      this.newChildSources(childSources);
+
 
       if (newInstanceCount > 0) this.log(`New sub components instantiated: ${ newInstanceCount }`, true);
 
@@ -3953,18 +3879,30 @@ class Component {
   instantiateCollection(el, props$, children$) {
     const data      = el.data;
     const props     = data.props || {};
-    el.children || [];
-    let filter      = typeof props.filter === 'function' ? props.filter : _ => true;
+    let filter      = typeof props.filter === 'function' ? props.filter : undefined;
+    let sort        = sortFunctionFromProp(props.sort);
 
-    const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
-      .map(([state, __props, __children]) => {
-        if (__props.filter && typeof __props.filter === 'function') {
-          filter = __props.filter;
+    const arrayOperators = {
+      filter,
+      sort
+    };
+    
+    const state$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$.startWith(props))
+      // this debounce is important. it forces state and prop updates to happen at the same time
+      // without this, changes to sort or filter won't happen properly
+      .compose(_default$2(1))
+      .map(([state, props]) => {
+        if (props.filter !== arrayOperators.filter) {
+          arrayOperators.filter = typeof props.filter === 'function' ? props.filter : undefined;
+        }
+        if (props.sort !== arrayOperators.sort) {
+          arrayOperators.sort = sortFunctionFromProp(props.sort);
         }
-        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+        
+        return isObj(state) ? this.addCalculated(state) : state
       });
 
-    const stateSource  = new StateSource(combined$);
+    const stateSource  = new StateSource(state$);
     const stateField   = props.from;
     const collectionOf = props.of;
     const idField      = props.idfield || 'id';
@@ -3976,10 +3914,10 @@ class Component {
       if (collectionOf.isSygnalComponent) {
         factory = collectionOf;
       } else {
-        const name = (typeof collectionOf.name === 'string') ? collectionOf.name : 'FUNCTION_COMPONENT';
+        const name = collectionOf.componentName || collectionOf.label || collectionOf.name || 'FUNCTION_COMPONENT';
         const view = collectionOf;
-        const { model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = collectionOf;
-        const options = { name, view, model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = collectionOf;
+        const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
         factory = component(options);
       }
     } else if (this.components[collectionOf]) {
@@ -3988,22 +3926,17 @@ class Component {
       throw new Error(`[${this.name}] Invalid 'of' propery in collection: ${ collectionOf }`)
     }
 
-    const sanitizeItems = item => {
-      if (isObj(item)) {
-        const { __props, __children, __context, ...sanitized } = item;
-        return sanitized
-      } else {
-        return item
-      }
-    };
-
     const fieldLense = {
       get: state => {
-        const { __props, __children } = state;
         if (!Array.isArray(state[stateField])) return []
-        return state[stateField].filter(filter).map((item, index) => {
-          return (isObj(item)) ? { ...item, [idField]: item[idField] || index, __props, __children, __context: this.currentContext } : { value: item, [idField]: index, __props, __children, __context: this.currentContext }
-        })
+        const items = state[stateField];
+        const filtered = typeof arrayOperators.filter === 'function' ? items.filter(arrayOperators.filter) : items;
+        const sorted = typeof arrayOperators.sort ? filtered.sort(arrayOperators.sort) : filtered;
+        const mapped = sorted.map((item, index) => {
+          return (isObj(item)) ? { ...item, [idField]: item[idField] || index } : { value: item, [idField]: index }
+        });
+
+        return mapped
       },
       set: (oldState, newState) => {
         if (this.calculated && stateField in this.calculated) {
@@ -4011,15 +3944,15 @@ class Component {
           return oldState
         }
         const updated = [];
-        for (const oldItem of oldState[stateField].map((item, index) => ({ __primitive: true, value: item, [idField]: index }))) {
-          if (!filter(oldItem)) {
+        for (const oldItem of oldState[stateField].map((item, index) => (isObj(item) ? { ...item, [idField]: item[idField] || index } : { __primitive: true, value: item, [idField]: index }))) {
+          if (typeof arrayOperators.filter === 'function' && !arrayOperators.filter(oldItem)) {
             updated.push(oldItem.__primitive ? oldItem.value : oldItem);
           } else {
-            const newItem = newState.find(newItem => newItem.id === oldItem.id);
+            const newItem = newState.find(item => item[idField] === oldItem[idField]);
             if (typeof newItem !== 'undefined') updated.push(oldItem.__primitive ? newItem.value : newItem);
           }
         }
-        return { ...oldState, [stateField]: newState.map(sanitizeItems) }
+        return { ...oldState, [stateField]: updated }
       }
     };
 
@@ -4074,7 +4007,7 @@ class Component {
       lense = undefined;
     }
 
-    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
+    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$, PARENT: null };
     const sink$   = collection(factory, lense, { container: null })(sources);
     if (!isObj(sink$)) {
       throw new Error('Invalid sinks returned from component factory of collection element')
@@ -4085,40 +4018,31 @@ class Component {
   instantiateSwitchable(el, props$, children$) {
     const data      = el.data;
     const props     = data.props  || {};
-    el.children || [];
 
-    const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
-      .map(([state, __props, __children]) => {
-        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+    const state$ = this.sources[this.stateSourceName].stream.startWith(this.currentState)
+      .map((state) => {
+        return isObj(state) ? this.addCalculated(state) : state
       });
 
-    const stateSource  = new StateSource(combined$);
-    const stateField = props.state;
+    const stateSource = new StateSource(state$);
+    const stateField  = props.state;
     let lense;
 
     const fieldLense = {
-      get: state => {
-        const { __props, __children } = state;
-        return (isObj(state[stateField])) ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
-      },
+      get: state => state[stateField],
       set: (oldState, newState) => {
         if (this.calculated && stateField in this.calculated) {
           console.warn(`Switchable sub-component of ${ this.name } attempted to update state on a calculated field '${ stateField }': Update ignored`);
           return oldState
         }
         if (!isObj(newState) || Array.isArray(newState)) return { ...oldState, [stateField]: newState }
-        const { __props, __children, __context, ...sanitized } = newState;
-        return { ...oldState, [stateField]: sanitized }
+        return { ...oldState, [stateField]: newState }
       }
     };
 
     const baseLense = {
       get: state => state,
-      set: (oldState, newState) => {
-        if (!isObj(newState) || Array.isArray(newState)) return newState
-        const { __props, __children, __context, ...sanitized } = newState;
-        return sanitized
-      }
+      set: (oldState, newState) => newState
     };
 
     if (typeof stateField === 'undefined') {
@@ -4142,10 +4066,10 @@ class Component {
     keys.forEach(key => {
       const current = switchableComponents[key];
       if (!current.isSygnalComponent) {
-        const name = (typeof current.name === 'string') ? current.name : 'FUNCTION_COMPONENT';
+        const name = current.componentName || current.label || current.name || 'FUNCTION_COMPONENT';
         const view = current;
-        const { model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = current;
-        const options = { name, view, model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = current;
+        const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
         switchableComponents[key] = component(options);
       }
     });
@@ -4164,14 +4088,13 @@ class Component {
     const componentName = el.sel;
     const data      = el.data;
     const props     = data.props  || {};
-    el.children || [];
 
-    const combined$ = xs$1.combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
-      .map(([state, __props, __children]) => {
-        return isObj(state) ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+    const state$ = this.sources[this.stateSourceName].stream.startWith(this.currentState)
+      .map((state) => {
+        return isObj(state) ? this.addCalculated(state) : state
       });
 
-    const stateSource = new StateSource(combined$);
+    const stateSource = new StateSource(state$);
     const stateField  = props.state;
 
     if (typeof props.sygnalFactory !== 'function' && isObj(props.sygnalOptions)) {
@@ -4187,10 +4110,7 @@ class Component {
     let lense;
 
     const fieldLense = {
-      get: state => {
-        const { __props, __children } = state;
-        return isObj(state[stateField]) ? { ...state[stateField], __props, __children, __context: this.currentContext } : { value: state[stateField], __props, __children, __context: this.currentContext }
-      },
+      get: state => state[stateField],
       set: (oldState, newState) => {
         if (this.calculated && stateField in this.calculated) {
           console.warn(`Sub-component of ${ this.name } attempted to update state on a calculated field '${ stateField }': Update ignored`);
@@ -4202,11 +4122,7 @@ class Component {
 
     const baseLense = {
       get: state => state,
-      set: (oldState, newState) => {
-        if (!isObj(newState) || Array.isArray(newState)) return newState
-        const { __props, __children, __context, ...sanitized } = newState;
-        return sanitized
-      }
+      set: (oldState, newState) => newState
     };
 
     if (typeof stateField === 'undefined') {
@@ -4418,9 +4334,11 @@ function deepCopyVdom(obj) {
   return { ...obj, children: Array.isArray(obj.children) ? obj.children.map(deepCopyVdom) : undefined, data: obj.data && { ...obj.data, componentsInjected: false } }
 }
 
-function objIsEqual(objA, objB, maxDepth = 5, depth = 0) {
-  const obj1 = sanitizeObject(objA);
-  const obj2 = sanitizeObject(objB);
+function propsIsEqual(obj1, obj2) {
+  return objIsEqual(sanitizeObject(obj1))
+}
+
+function objIsEqual(obj1, obj2, maxDepth = 5, depth = 0) {
   // Base case: if the current depth exceeds maxDepth, return true
   if (depth > maxDepth) {
       return false;
@@ -4473,7 +4391,7 @@ function objIsEqual(objA, objB, maxDepth = 5, depth = 0) {
 
 function sanitizeObject(obj) {
   if (!isObj(obj)) return obj
-  const {state, of, from, _reqId, _action, __props, __children, __context, ...sanitized} = obj;
+  const {state, of, from, filter, ...sanitized} = obj;
   return sanitized
 }
 
@@ -4481,6 +4399,80 @@ function isObj(obj) {
   return typeof obj === 'object' && obj !== null && !Array.isArray(obj)
 }
 
+function __baseSort(a, b, ascending=true) {
+  const direction = ascending ? 1 : -1;
+  switch(true) {
+    case a > b: return 1 * direction
+    case a < b: return -1 * direction
+    default: return 0
+  }
+}
+
+function __sortFunctionFromObj(item) {
+  const entries = Object.entries(item);
+  if (entries.length > 1) {
+    console.error('Sort objects can only have one key:', item);
+    return undefined
+  }
+  const entry = entries[0];
+  const [field, directionRaw] = entry;
+  if (!['string', 'number'].includes(typeof directionRaw)) {
+    console.error('Sort object properties must be a string or number:', item);
+    return undefined
+  }
+  let ascending = true;
+  if (typeof directionRaw === 'string') {
+    if (!['asc', 'dec'].includes(directionRaw.toLowerCase())) {
+      console.error('Sort object string values must be asc or dec:', item);
+      return undefined
+    }
+    ascending = directionRaw.toLowerCase() === 'asc';
+  }
+  if (typeof directionRaw === 'number') {
+    if (directionRaw !== 1 && directionRaw !== -1) {
+      console.error('Sort object number values must be 1 or -1:', item);
+      return undefined
+    }
+    ascending = directionRaw === 1;
+  }
+  return (a, b) => __baseSort(a[field], b[field], ascending)
+}
+
+function sortFunctionFromProp(sortProp) {
+  if (!sortProp) return undefined
+  const propType = typeof sortProp;
+  // if function do nothing
+  if (propType === 'function') return sortProp
+  if (propType === 'string') {
+    // if passed either 'asc' or 'dec' sort on the entire item
+    if (sortProp.toLowerCase() === 'asc' || sortProp.toLowerCase() === 'dec') {
+      const ascending = sortProp.toLowerCase() === 'asc';
+      return (a, b) => __baseSort(a, b, ascending)
+    }
+    // assume it's a field/property name, and sort it ascending
+    const field = sortProp;
+    return (a, b) => __baseSort(a[field], b[field], true)
+  } else if (Array.isArray(sortProp)) {
+    const sorters = sortProp.map(item => {
+      if (typeof item === 'function') return item
+      if (typeof item === 'string' && !['asc', 'dec'].includes(item.toLowerCase())) return (a, b) => __baseSort(a[item], b[item], true)
+      if (isObj(item)) {
+        return __sortFunctionFromObj(item)
+      }
+    });
+    
+    return (a, b) => sorters.filter(sorter => typeof sorter === 'function').reduce((comparisonSoFar, currentSorter) => {
+      if (comparisonSoFar !== 0) return comparisonSoFar
+      return currentSorter(a, b)
+    }, 0)
+  } else if (isObj(sortProp)) {
+    return __sortFunctionFromObj(sortProp)
+  } else {
+    console.error('Invalid sort option (ignoring):', item);
+    return undefined
+  }
+}
+
 function driverFromAsync(promiseReturningFunction, opts = {}) {
   const {
     selector: selectorProperty = 'category',
@@ -4694,10 +4686,10 @@ function logDriver(out$) {
 function run(app, drivers={}, options={}) {
   const { mountPoint='#root', fragments=true } = options;
   if (!app.isSygnalComponent) {
-    const name = app.name || "FUNCTIONAL_COMPONENT";
+    const name = app.name || app.componentName || app.label || "FUNCTIONAL_COMPONENT";
     const view = app;
-    const { model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = app;
-    const options = { name, view, model, intent, context, children, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+    const { model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug } = app;
+    const options = { name, view, model, intent, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
 
     app = component(options);
   }