sygnal 2.9.3 → 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;
@@ -3158,7 +3159,7 @@ const ABORT = '~#~#~ABORT~#~#~';
 function component (opts) {
   const { name, sources, isolateOpts, stateSourceName='STATE' } = opts;
 
-  if (sources && typeof sources !== 'object') {
+  if (sources && !isObj(sources)) {
     throw new Error('Sources must be a Cycle.js sources object:', name)
   }
 
@@ -3176,7 +3177,7 @@ function component (opts) {
   const currySources = typeof sources === 'undefined';
   let returnFunction;
 
-  if (typeof fixedIsolateOpts == 'object') {
+  if (isObj(fixedIsolateOpts)) {
     const wrapped = (sources) => {
       const fixedOpts = { ...opts, sources };
       return (new Component(fixedOpts)).sinks
@@ -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 }) {
-    if (!sources || typeof sources != 'object') throw new Error('Missing or invalid sources')
+  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$() {
@@ -3320,7 +3335,7 @@ class Component {
 
     this.intent$ = this.intent(this.sources);
 
-    if (!(this.intent$ instanceof Stream$1) && (typeof this.intent$ != 'object')) {
+    if (!(this.intent$ instanceof Stream$1) && (!isObj(this.intent$))) {
       throw new Error('Intent must return either an action$ stream or map of event streams')
     }
   }
@@ -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 (typeof this.request != 'object') {
-      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) {
@@ -3469,29 +3398,16 @@ class Component {
       this.context$ = xs$1.of({});
       return
     }
-    const repeatChecker = (a, b) => {
-      if (a === b) return true
-      if (typeof a !== 'object' || typeof b !== 'object') {
-        return a === b
-      }
-      const entriesA = Object.entries(a);
-      const entriesB = Object.entries(b);
-      if (entriesA.length === 0 && entriesB.length === 0) return true
-      if (entriesA.length !== entriesB.length) return false
-      return entriesA.every(([name, value]) => {
-        return b[name] === value
-      })
-    };
 
-    const state$ = this.sources[this.stateSourceName]?.stream.startWith({}).compose(_default$5(repeatChecker)) || xs$1.never();
-    const parentContext$ = this.sources.__parentContext$.startWith({}).compose(_default$5(repeatChecker)) || xs$1.of({});
-    if (this.context && typeof this.context !== 'object') {
+    const state$ = this.sources[this.stateSourceName]?.stream.startWith({}).compose(_default$5(objIsEqual)) || xs$1.never();
+    const parentContext$ = this.sources.__parentContext$.startWith({}).compose(_default$5(objIsEqual)) || xs$1.of({});
+    if (this.context && !isObj(this.context)) {
       console.error(`[${this.name}] Context must be an object mapping names to values of functions: ignoring provided ${ typeof this.context }`);
     }
     this.context$ = xs$1.combine(state$, parentContext$)
       .map(([_, parent]) => {
-        const _parent = typeof parent === 'object' ? parent : {};
-        const context = typeof this.context === 'object' ? this.context : {};
+        const _parent = isObj(parent) ? parent : {};
+        const context = isObj(this.context) ? this.context : {};
         const state = this.currentState;
         const values = Object.entries(context).reduce((acc, current) => {
           const [name, value] = current;
@@ -3514,7 +3430,7 @@ class Component {
         this.currentContext = newContext;
         return newContext
       })
-      .compose(_default$5(repeatChecker))
+      .compose(_default$5(objIsEqual))
       .startWith({});
     this.context$.subscribe({ next: _ => _ });
   }
@@ -3548,7 +3464,7 @@ class Component {
         sinks = { [this.stateSourceName]: sinks };
       }
 
-      if (typeof sinks !== 'object') {
+      if (!isObj(sinks)) {
         throw new Error(`Entry for each action must be an object: ${ this.name } ${ action }`)
       }
 
@@ -3557,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('"', '') }`
@@ -3589,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 (typeof out != 'object') {
-      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] = {};
@@ -3643,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 => {
@@ -3702,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$) {
@@ -3725,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 ? (typeof data == 'object' ? { ...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 (type == 'object') 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
@@ -3775,28 +3674,20 @@ class Component {
     let lastResult;
 
     return function(state) {
-      if (!this.calculated || typeof state !== 'object' || state instanceof Array) return state
+      if (!this.calculated || !isObj(state) || Array.isArray(state)) return state
       if (state === lastState) {
         return lastResult
       }
-      if (typeof this.calculated !== 'object') 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) {
+      if (!isObj(this.calculated)) throw new Error(`'calculated' parameter must be an object mapping calculated state field named to functions`)
+
+      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;
@@ -3805,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 || typeof incomingState !== 'object' || incomingState instanceof Array) return 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') {
@@ -3824,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();
@@ -3833,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   = [];
@@ -3858,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
@@ -3883,6 +3789,7 @@ class Component {
       }
 
       const sinkArrsByType = {};
+      const childSources = [];
       let newInstanceCount = 0;
 
       const newComponents =  entries.reduce((acc, [id, el]) => {
@@ -3894,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);
+            }
           });
         };
 
@@ -3943,6 +3854,8 @@ class Component {
       }, {});
 
       this.newSubComponentSinks(mergedSinksByType);
+      this.newChildSources(childSources);
+
 
       if (newInstanceCount > 0) this.log(`New sub components instantiated: ${ newInstanceCount }`, true);
 
@@ -3966,21 +3879,34 @@ class Component {
   instantiateCollection(el, props$, children$) {
     const data      = el.data;
     const props     = data.props || {};
-    el.children || [];
+    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]) => {
-        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children, __context: this.currentContext } : { value: state, __props, __children, __context: this.currentContext }
+    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) : state
       });
 
-    const stateSource = new StateSource(combined$);
-    const stateField  = props.from;
-
-    if (typeof props.sygnalFactory !== 'function' && typeof props.sygnalOptions === 'object') {
-      props.sygnalFactory = component(props.sygnalOptions);
-    }
-
+    const stateSource  = new StateSource(state$);
+    const stateField   = props.from;
     const collectionOf = props.of;
+    const idField      = props.idfield || 'id';
+
     let lense;
     let factory;
 
@@ -3988,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]) {
@@ -4000,29 +3926,33 @@ class Component {
       throw new Error(`[${this.name}] Invalid 'of' propery in collection: ${ collectionOf }`)
     }
 
-    const sanitizeItems = item => {
-      if (typeof item === 'object') {
-        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].map(item => {
-          return typeof item === 'object' ? { ...item, __props, __children, __context: this.currentContext } : { value: item, __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) {
           console.warn(`Collection sub-component of ${ this.name } attempted to update state on a calculated field '${ stateField }': Update ignored`);
           return oldState
         }
-        return { ...oldState, [stateField]: newState.map(sanitizeItems) }
+        const updated = [];
+        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(item => item[idField] === oldItem[idField]);
+            if (typeof newItem !== 'undefined') updated.push(oldItem.__primitive ? newItem.value : newItem);
+          }
+        }
+        return { ...oldState, [stateField]: updated }
       }
     };
 
@@ -4037,7 +3967,7 @@ class Component {
         }
       };
     } else if (typeof stateField === 'string') {
-      if (typeof this.currentState === 'object') {
+      if (isObj(this.currentState)) {
         if(!(this.currentState && stateField in this.currentState) && !(this.calculated && stateField in this.calculated)) {
           console.error(`Collection component in ${ this.name } is attempting to use non-existent state property '${ stateField }': To fix this error, specify a valid array property on the state.  Attempting to use parent component state.`);
           lense = undefined;
@@ -4055,7 +3985,7 @@ class Component {
           lense = fieldLense;
         }
       }
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Collection component in ${ this.name } has an invalid 'from' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting child state from the current state. Attempting to use parent component state.`);
         lense = undefined;
@@ -4077,9 +4007,9 @@ 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 (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       throw new Error('Invalid sinks returned from component factory of collection element')
     }
     return sink$
@@ -4088,47 +4018,38 @@ 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 typeof state === 'object' ? { ...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 (typeof state[stateField] === 'object' && !(state[stateField] instanceof Array)) ? { ...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 (typeof newState !== 'object' || newState instanceof Array) return { ...oldState, [stateField]: newState }
-        const { __props, __children, __context, ...sanitized } = newState;
-        return { ...oldState, [stateField]: sanitized }
+        if (!isObj(newState) || Array.isArray(newState)) return { ...oldState, [stateField]: newState }
+        return { ...oldState, [stateField]: newState }
       }
     };
 
     const baseLense = {
       get: state => state,
-      set: (oldState, newState) => {
-        if (typeof newState !== 'object' || newState instanceof Array) return newState
-        const { __props, __children, __context, ...sanitized } = newState;
-        return sanitized
-      }
+      set: (oldState, newState) => newState
     };
 
     if (typeof stateField === 'undefined') {
       lense = baseLense;
     } else if (typeof stateField === 'string') {
       lense = fieldLense;
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Switchable component in ${ this.name } has an invalid 'state' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting sub-component state from the current state. Attempting to use parent component state.`);
         lense = baseLense;
@@ -4145,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);
       }
     });
@@ -4156,7 +4077,7 @@ class Component {
 
     const sink$ = isolate(switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
 
-    if (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       throw new Error('Invalid sinks returned from component factory of switchable element')
     }
 
@@ -4167,17 +4088,16 @@ 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 typeof state === 'object' ? { ...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' && typeof props.sygnalOptions === 'object') {
+    if (typeof props.sygnalFactory !== 'function' && isObj(props.sygnalOptions)) {
       props.sygnalFactory = component(props.sygnalOptions);
     }
 
@@ -4190,10 +4110,7 @@ class Component {
     let lense;
 
     const fieldLense = {
-      get: state => {
-        const { __props, __children } = state;
-        return typeof state[stateField] === 'object' ? { ...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`);
@@ -4205,18 +4122,14 @@ class Component {
 
     const baseLense = {
       get: state => state,
-      set: (oldState, newState) => {
-        if (typeof newState !== 'object' || newState instanceof Array) return newState
-        const { __props, __children, __context, ...sanitized } = newState;
-        return sanitized
-      }
+      set: (oldState, newState) => newState
     };
 
     if (typeof stateField === 'undefined') {
       lense = baseLense;
     } else if (typeof stateField === 'string') {
       lense = fieldLense;
-    } else if (typeof stateField === 'object') {
+    } else if (isObj(stateField)) {
       if (typeof stateField.get !== 'function') {
         console.error(`Sub-component in ${ this.name } has an invalid 'state' field: Expecting 'undefined', a string indicating an array property in the state, or an object with 'get' and 'set' functions for retrieving and setting sub-component state from the current state. Attempting to use parent component state.`);
         lense = baseLense;
@@ -4231,7 +4144,7 @@ class Component {
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$, __parentContext$: this.context$ };
     const sink$   = isolate(factory, { [this.stateSourceName]: lense })(sources);
 
-    if (typeof sink$ !== 'object') {
+    if (!isObj(sink$)) {
       const name = componentName === 'sygnal-factory' ? 'custom element' : componentName;
       throw new Error('Invalid sinks returned from component factory:', name)
     }
@@ -4329,7 +4242,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0, parentI
   const sel          = currentElement.sel;
   const isCollection = sel && sel.toLowerCase() === 'collection';
   const isSwitchable = sel && sel.toLowerCase() === 'switchable';
-  const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function' || typeof currentElement.data?.props?.sygnalOptions === 'object';
+  const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function' || isObj(currentElement.data?.props?.sygnalOptions);
   const props        = (currentElement.data && currentElement.data.props) || {};
   (currentElement.data && currentElement.data.attrs) || {};
   const children     = currentElement.children || [];
@@ -4340,15 +4253,15 @@ function getComponents(currentElement, componentNames, depth=0, index=0, parentI
   if (isComponent) {
     id  = getComponentIdFromElement(currentElement, depth, index, parentId);
     if (isCollection) {
-      if (!props.of)                            throw new Error(`Collection element missing required 'component' property`)
+      if (!props.of)   throw new Error(`Collection element missing required 'component' property`)
       if (typeof props.of !== 'string' && typeof props.of !== 'function')         throw new Error(`Invalid 'component' property of collection element: found ${ typeof props.of } requires string or component factory function`)
       if (typeof props.of !== 'function' && !componentNames.includes(props.of))   throw new Error(`Specified component for collection not found: ${ props.of }`)
       if (typeof props.from !== 'undefined' && !(typeof props.from === 'string' || Array.isArray(props.from) || typeof props.from.get === 'function')) console.warn(`No valid array found for collection ${ typeof props.of === 'string' ? props.of : 'function component' }: no collection components will be created`, props.from);
       currentElement.data.isCollection = true;
       currentElement.data.props ||= {};
     } else if (isSwitchable) {
-      if (!props.of)                    throw new Error(`Switchable element missing required 'of' property`)
-      if (typeof props.of !== 'object') throw new Error(`Invalid 'of' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
+      if (!props.of)        throw new Error(`Switchable element missing required 'of' property`)
+      if (!isObj(props.of)) throw new Error(`Invalid 'of' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
       const switchableComponents = Object.values(props.of);
       if (!switchableComponents.every(comp => typeof comp === 'function')) throw new Error(`One or more components provided to switchable element is not a valid component factory`)
       if (!props.current || (typeof props.current !== 'string' && typeof props.current !== 'function')) throw new Error(`Missing or invalid 'current' property for switchable element: found '${ typeof props.current }' requires string or function`)
@@ -4377,7 +4290,7 @@ function injectComponents(currentElement, components, componentNames, depth=0, i
 
 
   const sel          = currentElement.sel || 'NO SELECTOR';
-  const isComponent  = ['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel) || typeof currentElement.data?.props?.sygnalFactory === 'function' || typeof currentElement.data?.props?.sygnalOptions === 'object';
+  const isComponent  = ['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(sel) || typeof currentElement.data?.props?.sygnalFactory === 'function' || isObj(currentElement.data?.props?.sygnalOptions);
   const isCollection = currentElement?.data?.isCollection;
   const isSwitchable = currentElement?.data?.isSwitchable;
   (currentElement.data && currentElement.data.props) || {};
@@ -4421,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;
@@ -4475,11 +4390,89 @@ function objIsEqual(objA, objB, maxDepth = 5, depth = 0) {
 }
 
 function sanitizeObject(obj) {
-  if (typeof obj !== 'object' || obj === null) return obj
-  const {state, of, from, _reqId, _action, __props, __children, __context, ...sanitized} = obj;
+  if (!isObj(obj)) return obj
+  const {state, of, from, filter, ...sanitized} = obj;
   return sanitized
 }
 
+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',
@@ -4693,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);
   }