sygnal 2.6.0 → 2.6.2

package/dist/index.cjs.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var isolate = require('@cycle/isolate');
 var state = require('@cycle/state');
-var xs$1 = require('xstream');
+var xstream$1 = require('xstream');
 var run$1 = require('@cycle/run');
 var dom = require('@cycle/dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var isolate__default = /*#__PURE__*/_interopDefaultLegacy(isolate);
-var xs__default = /*#__PURE__*/_interopDefaultLegacy(xs$1);
+var xstream__default = /*#__PURE__*/_interopDefaultLegacy(xstream$1);
 
 function collection(component, stateLense, opts={}) {
   const {
@@ -351,6 +351,16 @@ var hasSymbols$2 = function hasNativeSymbols() {
 	return hasSymbolSham();
 };
 
+var test = {
+	foo: {}
+};
+
+var $Object = Object;
+
+var hasProto$1 = function hasProto() {
+	return { __proto__: test }.foo === test.foo && !({ __proto__: null } instanceof $Object);
+};
+
 /* eslint no-invalid-this: 1 */
 
 var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
@@ -453,18 +463,23 @@ var ThrowTypeError = $gOPD
 	: throwTypeError;
 
 var hasSymbols$1 = hasSymbols$2();
+var hasProto = hasProto$1();
 
-var getProto = Object.getPrototypeOf || function (x) { return x.__proto__; }; // eslint-disable-line no-proto
+var getProto = Object.getPrototypeOf || (
+	hasProto
+		? function (x) { return x.__proto__; } // eslint-disable-line no-proto
+		: null
+);
 
 var needsEval = {};
 
-var TypedArray = typeof Uint8Array === 'undefined' ? undefined$1 : getProto(Uint8Array);
+var TypedArray = typeof Uint8Array === 'undefined' || !getProto ? undefined$1 : getProto(Uint8Array);
 
 var INTRINSICS = {
 	'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
 	'%Array%': Array,
 	'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
-	'%ArrayIteratorPrototype%': hasSymbols$1 ? getProto([][Symbol.iterator]()) : undefined$1,
+	'%ArrayIteratorPrototype%': hasSymbols$1 && getProto ? getProto([][Symbol.iterator]()) : undefined$1,
 	'%AsyncFromSyncIteratorPrototype%': undefined$1,
 	'%AsyncFunction%': needsEval,
 	'%AsyncGenerator%': needsEval,
@@ -472,6 +487,8 @@ var INTRINSICS = {
 	'%AsyncIteratorPrototype%': needsEval,
 	'%Atomics%': typeof Atomics === 'undefined' ? undefined$1 : Atomics,
 	'%BigInt%': typeof BigInt === 'undefined' ? undefined$1 : BigInt,
+	'%BigInt64Array%': typeof BigInt64Array === 'undefined' ? undefined$1 : BigInt64Array,
+	'%BigUint64Array%': typeof BigUint64Array === 'undefined' ? undefined$1 : BigUint64Array,
 	'%Boolean%': Boolean,
 	'%DataView%': typeof DataView === 'undefined' ? undefined$1 : DataView,
 	'%Date%': Date,
@@ -492,10 +509,10 @@ var INTRINSICS = {
 	'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
 	'%isFinite%': isFinite,
 	'%isNaN%': isNaN,
-	'%IteratorPrototype%': hasSymbols$1 ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
+	'%IteratorPrototype%': hasSymbols$1 && getProto ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
 	'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
 	'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
-	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$1 ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
+	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$1 || !getProto ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
 	'%Math%': Math,
 	'%Number%': Number,
 	'%Object%': Object,
@@ -508,10 +525,10 @@ var INTRINSICS = {
 	'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
 	'%RegExp%': RegExp,
 	'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
-	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$1 ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
+	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$1 || !getProto ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
 	'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
 	'%String%': String,
-	'%StringIteratorPrototype%': hasSymbols$1 ? getProto(''[Symbol.iterator]()) : undefined$1,
+	'%StringIteratorPrototype%': hasSymbols$1 && getProto ? getProto(''[Symbol.iterator]()) : undefined$1,
 	'%Symbol%': hasSymbols$1 ? Symbol : undefined$1,
 	'%SyntaxError%': $SyntaxError,
 	'%ThrowTypeError%': ThrowTypeError,
@@ -527,6 +544,16 @@ var INTRINSICS = {
 	'%WeakSet%': typeof WeakSet === 'undefined' ? undefined$1 : WeakSet
 };
 
+if (getProto) {
+	try {
+		null.error; // eslint-disable-line no-unused-expressions
+	} catch (e) {
+		// https://github.com/tc39/proposal-shadowrealm/pull/384#issuecomment-1364264229
+		var errorProto = getProto(getProto(e));
+		INTRINSICS['%Error.prototype%'] = errorProto;
+	}
+}
+
 var doEval = function doEval(name) {
 	var value;
 	if (name === '%AsyncFunction%') {
@@ -542,7 +569,7 @@ var doEval = function doEval(name) {
 		}
 	} else if (name === '%AsyncIteratorPrototype%') {
 		var gen = doEval('%AsyncGenerator%');
-		if (gen) {
+		if (gen && getProto) {
 			value = getProto(gen.prototype);
 		}
 	}
@@ -612,6 +639,7 @@ var $concat = bind.call(Function.call, Array.prototype.concat);
 var $spliceApply = bind.call(Function.apply, Array.prototype.splice);
 var $replace = bind.call(Function.call, String.prototype.replace);
 var $strSlice = bind.call(Function.call, String.prototype.slice);
+var $exec = bind.call(Function.call, RegExp.prototype.exec);
 
 /* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */
 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
@@ -667,6 +695,9 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 		throw new $TypeError('"allowMissing" argument must be a boolean');
 	}
 
+	if ($exec(/^%?[^%]*%?$/, name) === null) {
+		throw new $SyntaxError('`%` may not be present anywhere but at the beginning and end of the intrinsic name');
+	}
 	var parts = stringToPath(name);
 	var intrinsicBaseName = parts.length > 0 ? parts[0] : '';
 
@@ -787,8 +818,14 @@ var hasPropertyDescriptors = hasPropertyDescriptors_1();
 var supportsDescriptors = origDefineProperty && hasPropertyDescriptors;
 
 var defineProperty = function (object, name, value, predicate) {
-	if (name in object && (!isFunction(predicate) || !predicate())) {
-		return;
+	if (name in object) {
+		if (predicate === true) {
+			if (object[name] === value) {
+				return;
+			}
+		} else if (!isFunction(predicate) || !predicate()) {
+			return;
+		}
 	}
 	if (supportsDescriptors) {
 		origDefineProperty(object, name, {
@@ -2740,11 +2777,11 @@ function switchable(factories, name$, initial, opts={}) {
   const nameType     = typeof name$;
 
   if (!name$) throw new Error(`Missing 'name$' parameter for switchable()`)
-  if (!(nameType === 'string' || nameType === 'function' || name$ instanceof xs$1.Stream)) {
+  if (!(nameType === 'string' || nameType === 'function' || name$ instanceof xstream$1.Stream)) {
     throw new Error(`Invalid 'name$' parameter for switchable(): expects Stream, String, or Function`)
   }
 
-  if (name$ instanceof xs$1.Stream) {
+  if (name$ instanceof xstream$1.Stream) {
     const withInitial$ = name$
       .compose(_default$5())
       .startWith(initial)
@@ -2754,7 +2791,7 @@ function switchable(factories, name$, initial, opts={}) {
     const mapFunction = (nameType === 'function' && name$) || (state => state[name$]);
     return sources => {
       const state$ = sources && ((typeof stateSourceName === 'string' && sources[stateSourceName]) || sources.STATE || sources.state).stream;
-      if (!state$ instanceof xs$1.Stream) throw new Error(`Could not find the state source: ${ stateSourceName }`)
+      if (!state$ instanceof xstream$1.Stream) throw new Error(`Could not find the state source: ${ stateSourceName }`)
       const _name$ = state$
         .map(mapFunction)
         .filter(name => typeof name === 'string')
@@ -2786,7 +2823,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
     .map(([name, factory]) => {
       if (sources[stateSourceName]) {
         const state$ = sources[stateSourceName].stream;
-        const switched = xs__default["default"].combine(name$, state$)
+        const switched = xstream__default["default"].combine(name$, state$)
                            .filter(([newComponentName, _]) => newComponentName == name)
                            .map(([_, state]) => state)
                            .remember();
@@ -2803,7 +2840,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
         obj[sinkName] = name$
           .map( newComponentName => {
             const sink = sinks.find(([componentName, _]) => componentName === newComponentName);
-            return (sink && sink[1][sinkName]) || xs__default["default"].never()
+            return (sink && sink[1][sinkName]) || xstream__default["default"].never()
           })
           .flatten()
           .remember()
@@ -2811,7 +2848,7 @@ function _switchable (factories, sources, name$, switched=['DOM'], stateSourceNa
       } else {
         const definedSinks = sinks.filter(([_,sink]) => sink[sinkName] !== undefined)
                                   .map(([_,sink]) => sink[sinkName]);
-        obj[sinkName] = xs__default["default"].merge(...definedSinks);
+        obj[sinkName] = xstream__default["default"].merge(...definedSinks);
       }
       return obj
     }, {});
@@ -3243,7 +3280,7 @@ class Component {
 
     if (IS_ROOT_COMPONENT && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
       this.initialState = initialState || true;
-      this.intent = _ => ({__NOOP_ACTION__:xs__default["default"].never()});
+      this.intent = _ => ({__NOOP_ACTION__:xstream__default["default"].never()});
       this.model = {
         __NOOP_ACTION__: state => state
       };
@@ -3275,7 +3312,7 @@ class Component {
 
     this.intent$ = this.intent(this.sources);
 
-    if (!(this.intent$ instanceof xs$1.Stream) && (typeof this.intent$ != 'object')) {
+    if (!(this.intent$ instanceof xstream$1.Stream) && (typeof this.intent$ != 'object')) {
       throw new Error('Intent must return either an action$ stream or map of event streams')
     }
   }
@@ -3284,21 +3321,21 @@ class Component {
     const requestSource  = (this.sources && this.sources[this.requestSourceName]) || null;
 
     if (!this.intent$) {
-      this.action$ = xs__default["default"].never();
+      this.action$ = xstream__default["default"].never();
       return
     }
 
     let runner;
-    if (this.intent$ instanceof xs$1.Stream) {
+    if (this.intent$ instanceof xstream$1.Stream) {
       runner = this.intent$;
     } else {
       const mapped = Object.entries(this.intent$)
                            .map(([type, data$]) => data$.map(data => ({type, data})));
-      runner = xs__default["default"].merge(xs__default["default"].never(), ...mapped);
+      runner = xstream__default["default"].merge(xstream__default["default"].never(), ...mapped);
     }
 
-    const action$  = ((runner instanceof xs$1.Stream) ? runner : (runner.apply && runner(this.sources) || xs__default["default"].never()));
-    const wrapped$ = _default$3(xs__default["default"].of({ type: BOOTSTRAP_ACTION }), action$)
+    const action$  = ((runner instanceof xstream$1.Stream) ? runner : (runner.apply && runner(this.sources) || xstream__default["default"].never()));
+    const wrapped$ = _default$3(xstream__default["default"].of({ type: BOOTSTRAP_ACTION }), action$)
       .compose(_default$4(10));
 
     let initialApiData;
@@ -3306,12 +3343,12 @@ class Component {
       initialApiData = requestSource.select('initial')
         .flatten();
     } else {
-      initialApiData = xs__default["default"].never();
+      initialApiData = xstream__default["default"].never();
     }
 
     const hydrate$ = initialApiData.map(data => ({ type: HYDRATE_ACTION, data }));
 
-    this.action$   = xs__default["default"].merge(wrapped$, hydrate$)
+    this.action$   = xstream__default["default"].merge(wrapped$, hydrate$)
       .compose(this.log(({ type }) => `Action triggered: <${ type }>`));
   }
 
@@ -3368,7 +3405,7 @@ class Component {
               if (actionType === 'function') {
                 const enhancedState = this.addCalculated(this.currentState);
                 const result = action(enhancedState, req);
-                return xs__default["default"].of({ ...obj, data: result })
+                return xstream__default["default"].of({ ...obj, data: result })
               } else {
                 this.action$.shamefullySendNext(obj);
 
@@ -3378,7 +3415,7 @@ class Component {
                   const selected$ = source[REQUEST_SELECTOR_METHOD](_reqId);
                   return [ ...acc, selected$ ]
                 }, []);
-                return xs__default["default"].merge(...responses)
+                return xstream__default["default"].merge(...responses)
               }
             } catch(err) {
               console.error(err);
@@ -3386,11 +3423,11 @@ class Component {
           }).flatten();
         return [ ...acc, route$ ]
       }, []);
-      const mapped$ = xs__default["default"].merge(...mapped);
+      const mapped$ = xstream__default["default"].merge(...mapped);
       return [ ...acc, mapped$ ]
     }, []);
 
-    this.response$ = xs__default["default"].merge(...wrapped)
+    this.response$ = xstream__default["default"].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`
@@ -3421,14 +3458,14 @@ class Component {
   initModel$() {
     if (typeof this.model == 'undefined') {
       this.model$ = this.sourceNames.reduce((a,s) => {
-        a[s] = xs__default["default"].never();
+        a[s] = xstream__default["default"].never();
         return a
       }, {});
       return
     }
 
     const initial  = { type: INITIALIZE_ACTION, data: this.initialState };
-    const shimmed$ = this.initialState ? _default$3(xs__default["default"].of(initial), this.action$).compose(_default$4(0)) : this.action$;
+    const shimmed$ = this.initialState ? _default$3(xstream__default["default"].of(initial), this.action$).compose(_default$4(0)) : this.action$;
     const onState  = this.makeOnAction(shimmed$, true, this.action$);
     const onNormal = this.makeOnAction(this.action$, false, this.action$);
 
@@ -3477,7 +3514,7 @@ class Component {
 
     const model$ = Object.entries(reducers).reduce((acc, entry) => {
       const [sink, streams] = entry;
-      acc[sink] = xs__default["default"].merge(xs__default["default"].never(), ...streams);
+      acc[sink] = xstream__default["default"].merge(xstream__default["default"].never(), ...streams);
       return acc
     }, {});
 
@@ -3496,7 +3533,7 @@ class Component {
           next: this.log(({ _reqId, _action }) => `Unhandled response for request: ${ _action } ${ _reqId }`)
         });
       }
-      this.sendResponse$ = xs__default["default"].never();
+      this.sendResponse$ = xstream__default["default"].never();
       return
     }
 
@@ -3524,7 +3561,7 @@ class Component {
       return [ ...acc, mapped$ ]
     }, []);
 
-    this.sendResponse$ = xs__default["default"].merge(...out$)
+    this.sendResponse$ = xstream__default["default"].merge(...out$)
       .compose(this.log(({ _reqId, _action }) => `[${ this.requestSourceName }] response sent for: <${ _action }>`));
   }
 
@@ -3552,7 +3589,7 @@ class Component {
   }
 
   initSubComponentSink$() {
-    const subComponentSink$ = xs__default["default"].create({
+    const subComponentSink$ = xstream__default["default"].create({
       start: listener => {
         this.newSubComponentSinks = listener.next.bind(listener);
       },
@@ -3565,7 +3602,7 @@ class Component {
   }
 
   initSubComponentsRendered$() {
-    const stream = xs__default["default"].create({
+    const stream = xstream__default["default"].create({
       start: (listener) => {
         this.subComponentsRendered = listener.next.bind(listener);
       },
@@ -3578,7 +3615,7 @@ class Component {
 
   initVdom$() {
     if (typeof this.view != 'function') {
-      this.vdom$ = xs__default["default"].of(null);
+      this.vdom$ = xstream__default["default"].of(null);
       return
     }
 
@@ -3596,17 +3633,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__default["default"].never();
+      const subComponentSink$ = this.subComponentSink$ ? this.subComponentSink$.map(sinks => sinks[name]).filter(sink => !!sink).flatten() : xstream__default["default"].never();
       if (name === this.stateSourceName) {
-        acc[name] = xs__default["default"].merge((this.model$[name] || xs__default["default"].never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...this.children$[name]);
+        acc[name] = xstream__default["default"].merge((this.model$[name] || xstream__default["default"].never()), subComponentSink$, this.sources[this.stateSourceName].stream.filter(_ => false), ...this.children$[name]);
       } else {
-        acc[name] = xs__default["default"].merge((this.model$[name] || xs__default["default"].never()), subComponentSink$, ...this.children$[name]);
+        acc[name] = xstream__default["default"].merge((this.model$[name] || xstream__default["default"].never()), subComponentSink$, ...this.children$[name]);
       }
       return acc
     }, {});
 
     this.sinks[this.DOMSourceName]     = this.vdom$;
-    this.sinks[this.requestSourceName] = xs__default["default"].merge(this.sendResponse$ ,this.sinks[this.requestSourceName]);
+    this.sinks[this.requestSourceName] = xstream__default["default"].merge(this.sendResponse$ ,this.sinks[this.requestSourceName]);
   }
 
   makeOnAction(action$, isStateSink=true, rootAction$) {
@@ -3663,7 +3700,7 @@ class Component {
   }
 
   addCalculated(state) {
-    if (!this.calculated || typeof state !== 'object') return state
+    if (!this.calculated || typeof state !== 'object' || state instanceof Array) return state
     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);
     const calculated = entries.reduce((acc, [field, fn]) => {
@@ -3678,11 +3715,13 @@ class Component {
     return { ...state, ...calculated }
   }
 
-  cleanupCalculated(state) {
-    if (this.storeCalculatedInState) return this.addCalculated(state)
-    if (!this.calculated || !state || typeof state !== 'object') return state
+  cleanupCalculated(incomingState) {
+    if (!incomingState || typeof incomingState !== 'object' || incomingState instanceof Array) return incomingState
+    const state = this.storeCalculatedInState ? this.addCalculated(incomingState) : incomingState;
+    const { __props, __children, ...sanitized } = state;
+    const copy  = { ...sanitized };
+    if (!this.calculated) return copy
     const keys = Object.keys(this.calculated);
-    const copy = { ...state };
     keys.forEach(key => {
       if (this.initialState && typeof this.initialState[key] !== 'undefined') {
         copy[key] = this.initialState[key];
@@ -3698,17 +3737,17 @@ class Component {
     const renderParams = { ...this.children$[this.DOMSourceName] };
 
     const enhancedState = state && state.isolateSource(state, { get: state => this.addCalculated(state) });
-    const stateStream   = (enhancedState && enhancedState.stream) || xs__default["default"].never();
+    const stateStream   = (enhancedState && enhancedState.stream) || xstream__default["default"].never();
 
     renderParams.state                 = stateStream;
     renderParams[this.stateSourceName] = stateStream;
 
     if (this.sources.props$) {
-      renderParams.props = this.sources.props$;
+      renderParams.__props = this.sources.props$;
     }
 
     if (this.sources.children$) {
-      renderParams.children = this.sources.children$;
+      renderParams.__children = this.sources.children$;
     }
 
     const names   = [];
@@ -3719,7 +3758,7 @@ class Component {
       streams.push(stream);
     });
 
-    const combined = xs__default["default"].combine(...streams)
+    const combined = xstream__default["default"].combine(...streams)
       // map the streams from an array back to an object with the render parameter names as the keys
       .map(arr => {
         return names.reduce((acc, name, index) => {
@@ -3761,8 +3800,8 @@ class Component {
           return acc
         }
 
-        const props$    = xs__default["default"].create().startWith(props);
-        const children$ = xs__default["default"].create().startWith(children);
+        const props$    = xstream__default["default"].create().startWith(props);
+        const children$ = xstream__default["default"].create().startWith(children);
 
         let instantiator;
 
@@ -3774,17 +3813,9 @@ class Component {
           instantiator = this.instantiateCustomComponent.bind(this);
         }
 
-        const { sink$, preventStateUpdates } = instantiator(el, props$, children$);
-
-        if (preventStateUpdates) {
-          const originalStateSink = sink$[this.stateSourceName];
-          sink$[this.stateSourceName] = originalStateSink.filter(state => {
-            console.warn('State update attempt from component with inderect link to state: Components with state set through HTML properties/attributes cannot update application state directly');
-            return false
-          });
-        }
+        const sink$ = instantiator(el, props$, children$);
 
-        sink$[this.DOMSourceName] = this.makeCoordinatedSubComponentDomSink(sink$[this.DOMSourceName]);
+        sink$[this.DOMSourceName] = sink$[this.DOMSourceName] ? this.makeCoordinatedSubComponentDomSink(sink$[this.DOMSourceName]) : xstream__default["default"].never();
 
         acc[id] = { sink$, props$, children$ };
 
@@ -3798,7 +3829,7 @@ class Component {
 
       const mergedSinksByType = Object.entries(sinkArrsByType).reduce((acc, [name, streamArr]) => {
         if (streamArr.length === 0) return acc
-        acc[name] = streamArr.length === 1 ? streamArr[0] : xs__default["default"].merge(...streamArr);
+        acc[name] = streamArr.length === 1 ? streamArr[0] : xstream__default["default"].merge(...streamArr);
         return acc
       }, {});
 
@@ -3827,115 +3858,160 @@ class Component {
     const data      = el.data;
     const props     = data.props || {};
     el.children || [];
-    let stateSource = new state.StateSource(this.sources[this.stateSourceName].stream.startWith(this.currentState));
-
-    let preventStateUpdates = false;
-    let sink$, field, lense;
-
-    const stateGetter = state => {
-      const arr = state[field];
-      if (typeof arr === 'undefined') return
-      if (!Array.isArray(arr)) {
-        const label = typeof props.of === 'string' ? props.of : 'components';
-        console.warn(`Collection of ${ label } does not have a valid array in the 'for' property: expects either an array or a string of the name of an array property on the state`);
-        return []
+
+    const combined$ = xstream__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+      .map(([state, __props, __children]) => {
+        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children } : { value: state, __props, __children }
+      });
+
+    const stateSource = new state.StateSource(combined$);
+    const stateField  = props.from;
+    let lense;
+
+    const factory = typeof props.of === 'function' ? props.of : this.components[props.of];
+
+    const sanitizeItems = item => {
+      if (typeof item === 'object') {
+        const { __props, __children, ...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 } : { value: item, __props, __children }
+        })
+      },
+      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) }
       }
-      return arr
     };
 
-    if (typeof props.for === 'undefined') {
+    if (stateField === undefined) {
       lense = {
         get: state => {
-          if (!Array.isArray(state)) {
-            console.warn(`Collection sub-component of ${ this.name } has no 'for' attribute and the parent state is not an array: Provide a 'for' attribute with either an array or the name of a state property containing an array`);
-            return []
-          }
+          if (!(state instanceof Array) && state.value && state.value instanceof Array) return state.value
           return state
         },
-        set: (oldState, newState) => newState
-      };
-    } else if (typeof props.for === 'string') {
-      field  = props.for;
-      lense = {
-        get: stateGetter,
-        set: (state, arr) => {
-          if (this.calculated && field in this.calculated) {
-            console.warn(`Collection sub-component of ${ this.name } attempted to update state on a calculated field '${ field }': Update ignored`);
-            return state
-          }
-          return { ...state, [field]: arr }
+        set: (oldState, newState) => {
+          console.log('COLL SET', newState);
+          return newState
         }
       };
+    } else if (typeof stateField === 'string') {
+      if (typeof this.currentState === 'object') {
+        if(!(stateField in this.currentState) && !(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;
+        } else if (!Array.isArray(this.currentState[stateField])) {
+          console.warn(`State property '${ stateField }' in collection comopnent of ${ this.name } is not an array: No components will be instantiated in the collection.`);
+          lense = fieldLense;
+        } else {
+          lense = fieldLense;
+        }
+      } else {
+        if (!Array.isArray(this.currentState[stateField])) {
+          console.warn(`State property '${ stateField }' in collection component of ${ this.name } is not an array: No components will be instantiated in the collection.`);
+          lense = fieldLense;
+        } else {
+          lense = fieldLense;
+        }
+      }
+    } else if (typeof stateField === 'object') {
+      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;
+      } else {
+        lense = { get: stateField.get, set: stateField.set };
+      }
     } else {
-      field  = 'for';
-      stateSource = new state.StateSource(props$.remember());
-      lense = {
-        get: stateGetter,
-        set: (state, arr) => state
-      };
-      preventStateUpdates = true;
+      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;
     }
-    const sources   = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
-    const factory   = typeof props.of === 'function' ? props.of : this.components[props.of];
-    sink$ = collection(factory, lense, { container: null })(sources);
+
+    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
+    const sink$   = collection(factory, lense, { container: null })(sources);
     if (typeof sink$ !== 'object') {
       throw new Error('Invalid sinks returned from component factory of collection element')
     }
-    return { sink$, preventStateUpdates }
+    return sink$
   }
 
   instantiateSwitchable(el, props$, children$) {
     const data      = el.data;
     const props     = data.props  || {};
     el.children || [];
-    let stateSource = new state.StateSource(this.sources[this.stateSourceName].stream.startWith(this.currentState));
 
-    const stateField        = props.state;
-    let preventStateUpdates = false;
-    let isolateSwitchable   = false;
-    let sink$, lense;
+    const combined$ = xstream__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+      .map(([state, __props, __children]) => {
+        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children } : { value: state, __props, __children }
+      });
 
-    if (typeof stateField === 'string') {
-      isolateSwitchable = true;
-      lense = {
-        get: state => {
-          return 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
-          }
-          return { ...oldState, [stateField]: newState }
+    const stateSource  = new state.StateSource(combined$);
+    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 } : { value: state[stateField], __props, __children }
+      },
+      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
         }
-      };
-      preventStateUpdates = false;
-    } else if (typeof stateField === 'undefined') {
-      isolateSwitchable = true;
-      lense = {
-        get: state => state,
-        set: (oldState, newState) => newState
-      };
-      preventStateUpdates = false;
+        console.log('SWITCH SET', newState);
+        if (typeof newState !== 'object' || newState instanceof Array) return { ...oldState, [stateField]: newState }
+        const { __props, __children, ...sanitized } = newState;
+        return { ...oldState, [stateField]: sanitized }
+      }
+    };
+
+    const baseLense = {
+      get: state => state,
+      set: (oldState, newState) => {
+        if (typeof newState !== 'object' || newState instanceof Array) return newState
+        const { __props, __children, ...sanitized } = newState;
+        return sanitized
+      }
+    };
+
+    if (typeof stateField === 'undefined') {
+      lense = baseLense;
+    } else if (typeof stateField === 'string') {
+      lense = fieldLense;
     } else if (typeof stateField === 'object') {
-      stateSource = new state.StateSource(props$.map(props => props.state));
+      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;
+      } else {
+        lense = { get: stateField.get, set: stateField.set };
+      }
     } else {
-      throw new Error(`Invalid state provided to collection sub-component of ${ this.name }: Expecting string, object, or none, but found ${ typeof stateField }`)
+      console.error(`Invalid state provided to switchable sub-component of ${ this.name }: Expecting string, object, or undefined, but found ${ typeof stateField }. Attempting to use parent component state.`);
+      lense = baseLense;
     }
 
-    const switchableComponents = data.props.of;
+    const switchableComponents = props.of;
     const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
-    if (isolateSwitchable) {
-      sink$ = isolate__default["default"](switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
-    } else {
-      sink$ = switchable(switchableComponents, props$.map(props => props.current))(sources);
-    }
+
+    const sink$ = isolate__default["default"](switchable(switchableComponents, props$.map(props => props.current)), { [this.stateSourceName]: lense })(sources);
 
     if (typeof sink$ !== 'object') {
       throw new Error('Invalid sinks returned from component factory of switchable element')
     }
 
-    return { sink$, preventStateUpdates }
+    return sink$
   }
 
   instantiateCustomComponent(el, props$, children$) {
@@ -3943,47 +4019,75 @@ class Component {
     const data      = el.data;
     const props     = data.props  || {};
     el.children || [];
-    let stateSource = new state.StateSource(this.sources[this.stateSourceName].stream.startWith(this.currentState));
+
+    const combined$ = xstream__default["default"].combine(this.sources[this.stateSourceName].stream.startWith(this.currentState), props$, children$)
+      .map(([state, __props, __children]) => {
+        return typeof state === 'object' ? { ...this.addCalculated(state), __props, __children } : { value: state, __props, __children }
+      });
+
+    const stateSource = new state.StateSource(combined$);
+    const stateField  = props.state;
 
     const factory   = componentName === 'sygnal-factory' ? props.sygnalFactory : (this.components[componentName] || props.sygnalFactory);
-    if (!factory && !isCollection && !isSwitchable) {
+    if (!factory) {
       if (componentName === 'sygnal-factory') throw new Error(`Component not found on element with Capitalized selector and nameless function: JSX transpilation replaces selectors starting with upper case letters with functions in-scope with the same name, Sygnal cannot see the name of the resulting component.`)
       throw new Error(`Component not found: ${ componentName }`)
     }
 
-    let preventStateUpdates = false;
-    let sink$;
+    let lense;
 
-    const { state: stateProp, sygnalFactory, id, ...sanitizedProps } = props;
-    if (typeof stateProp === 'undefined' && (typeof sanitizedProps !== 'object' || Object.keys(sanitizedProps).length === 0)) {
-      const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$: xs__default["default"].never().startWith(null), children$ };
-      sink$ = factory(sources);
-      preventStateUpdates = false;
+    const fieldLense = {
+      get: state => {
+        const { __props, __children } = state;
+        return typeof state[stateField] === 'object' ? { ...state[stateField], __props, __children } : { value: state[stateField], __props, __children }
+      },
+      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`);
+          return oldState
+        }
+        return { ...oldState, [stateField]: newState }
+      }
+    };
+
+    const baseLense = {
+      get: state => state,
+      set: (oldState, newState) => {
+        if (typeof newState !== 'object' || newState instanceof Array) return newState
+        const { __props, __children, ...sanitized } = newState;
+        return sanitized
+      }
+    };
+
+    if (typeof stateField === 'undefined') {
+      lense = baseLense;
+    } else if (typeof stateField === 'string') {
+      lense = fieldLense;
+    } else if (typeof stateField === 'object') {
+      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;
+      } else {
+        lense = { get: stateField.get, set: stateField.set };
+      }
     } else {
-      const lense = (props) => {
-        const state = props.state;
-        if (typeof state === 'undefined') return props
-        if (typeof state !== 'object')    return state
-
-        const copy = { ...props };
-        delete copy.state;
-        return { ...copy, ...state }
-      };
-      stateSource = new state.StateSource(props$.map(lense));
-      const sources   = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
-      sink$ = factory(sources);
+      console.error(`Invalid state provided to sub-component of ${ this.name }: Expecting string, object, or undefined, but found ${ typeof stateField }. Attempting to use parent component state.`);
+      lense = baseLense;
     }
 
+    const sources = { ...this.sources, [this.stateSourceName]: stateSource, props$, children$ };
+    const sink$   = isolate__default["default"](factory, { [this.stateSourceName]: lense })(sources);
+
     if (typeof sink$ !== 'object') {
       const name = componentName === 'sygnal-factory' ? 'custom element' : componentName;
       throw new Error('Invalid sinks returned from component factory:', name)
     }
 
-    return { sink$, preventStateUpdates }
+    return sink$
   }
 
   renderVdom(componentInstances$) {
-    return xs__default["default"].combine(this.subComponentsRendered$, componentInstances$)
+    return xstream__default["default"].combine(this.subComponentsRendered$, componentInstances$)
       .compose(_default$2(5))
       .map(([_, components]) => {
         const componentNames = Object.keys(this.components);
@@ -3992,7 +4096,7 @@ class Component {
         const entries = Object.entries(components).filter(([id]) => id !== '::ROOT::');
 
         if (entries.length === 0) {
-          return xs__default["default"].of(root)
+          return xstream__default["default"].of(root)
         }
 
         const ids = [];
@@ -4002,9 +4106,9 @@ class Component {
             return val.sink$[this.DOMSourceName].startWith(undefined)
           });
 
-        if (vdom$.length === 0) return xs__default["default"].of(root)
+        if (vdom$.length === 0) return xstream__default["default"].of(root)
 
-        return xs__default["default"].combine(...vdom$)
+        return xstream__default["default"].combine(...vdom$)
           .compose(_default$2(10))
           .map(vdoms => {
             const withIds = vdoms.reduce((acc, vdom, index) => {
@@ -4068,7 +4172,7 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
   const isSwitchable = sel && sel.toLowerCase() === 'switchable';
   const isComponent  = sel && (['collection', 'switchable', 'sygnal-factory', ...componentNames].includes(currentElement.sel)) || typeof currentElement.data?.props?.sygnalFactory === 'function';
   const props        = (currentElement.data && currentElement.data.props) || {};
-  const attrs        = (currentElement.data && currentElement.data.attrs) || {};
+  (currentElement.data && currentElement.data.attrs) || {};
   const children     = currentElement.children || [];
 
   let found    = {};
@@ -4079,11 +4183,9 @@ function getComponents(currentElement, componentNames, depth=0, index=0) {
       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 attrs.for !== 'undefined' && !(typeof attrs.for === 'string' || Array.isArray(attrs.for))) console.warn(`No valid array found in the 'value' property of collection ${ typeof props.of === 'string' ? props.of : 'function component' }: no collection components will be created`);
+      if (typeof props.from !== 'undefined' && !(typeof props.from === 'string' || Array.isArray(props.from))) console.warn(`No valid array found in the 'value' property of collection ${ typeof props.of === 'string' ? props.of : 'function component' }: no collection components will be created`);
       currentElement.data.isCollection = true;
       currentElement.data.props ||= {};
-      currentElement.data.props.for = attrs.for;
-      currentElement.data.attrs = undefined;
     } else if (isSwitchable) {
       if (!props.of)                    throw new Error(`Switchable element missing required 'of' property`)
       if (typeof props.of !== 'object') throw new Error(`Invalid 'components' property of switchable element: found ${ typeof props.of } requires object mapping names to component factories`)
@@ -4170,7 +4272,7 @@ function processForm(form, options={}) {
 
   const eventStream$ = events.map(event => form.events(event));
 
-  const merged$ = xs__default["default"].merge(...eventStream$);
+  const merged$ = xstream__default["default"].merge(...eventStream$);
 
   return merged$.map((e) => {
     if (preventDefault) e.preventDefault();
@@ -4231,7 +4333,7 @@ function eventBusDriver(out$) {
       const all = !type;
       const _type = (Array.isArray(type)) ? type : [type];
       let cb;
-      const in$ = xs__default["default"].create({
+      const in$ = xstream__default["default"].create({
         start: (listener) => {
           cb = ({detail: event}) => {
             const data = (event && event.data) || null;
@@ -4638,7 +4740,7 @@ var _default = sampleCombine$1.default = sampleCombine;
 
 Object.defineProperty(exports, 'xs', {
   enumerable: true,
-  get: function () { return xs__default["default"]; }
+  get: function () { return xstream__default["default"]; }
 });
 exports.ABORT = ABORT;
 exports.classes = classes;