sygnal 2.6.0 → 2.6.1

package/dist/index.cjs.js

@@ -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, {
@@ -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];
@@ -3704,11 +3743,11 @@ class Component {
     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   = [];
@@ -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]) : xs__default["default"].never();
 
         acc[id] = { sink$, props$, children$ };
 
@@ -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$ = xs__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)) {
+          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 comopnent 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$ = xs__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,43 +4019,71 @@ 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$ = xs__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$) {
@@ -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`)