sygnal 2.2.0 → 2.3.0

package/dist/collection.js

@@ -37,8 +37,7 @@ function collection(component, stateLense) {
       domSourceName = _opts$domSourceName === void 0 ? 'DOM' : _opts$domSourceName,
       _opts$container = opts.container,
       container = _opts$container === void 0 ? 'div' : _opts$container,
-      _opts$containerClass = opts.containerClass,
-      containerClass = _opts$containerClass === void 0 ? '' : _opts$containerClass;
+      containerClass = opts.containerClass;
   return function (sources) {
     var key = Date.now();
     var collectionOpts = {
@@ -61,13 +60,14 @@ function collection(component, stateLense) {
 
             if (name === domSourceName && container) {
               acc.DOM = combined.map(function (children) {
+                var data = containerClass ? {
+                  props: {
+                    className: containerClass
+                  }
+                } : {};
                 return {
                   sel: container,
-                  data: {
-                    props: {
-                      className: containerClass
-                    }
-                  },
+                  data: data,
                   children: children,
                   key: key,
                   text: undefined,

package/dist/component.js

@@ -751,24 +751,16 @@ var Component = /*#__PURE__*/function () {
 
           var children$ = _xstream["default"].create().startWith(children);
 
-          var propState;
+          var stateSource;
           var sink$;
 
           if (isCollection) {
-            var _objectSpread2;
+            var _objectSpread3;
 
-            var stream, field;
+            var field, lense;
 
-            if (typeof data.props["for"] === 'string') {
-              field = data.props["for"];
-              stream = _this8.sources[_this8.stateSourceName].stream;
-            } else {
-              field = 'for';
-              stream = props$;
-            }
-
-            propState = new _state2.StateSource(stream.map(function (val) {
-              var arr = val[field];
+            var stateGetter = function stateGetter(state) {
+              var arr = state[field];
 
               if (!Array.isArray(arr)) {
                 console.warn("Collection of ".concat(data.props.of, " 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"));
@@ -776,28 +768,45 @@ var Component = /*#__PURE__*/function () {
               }
 
               return arr;
-            }).remember());
+            };
 
-            var sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, _this8.stateSourceName, propState), _defineProperty(_objectSpread2, "props$", props$), _defineProperty(_objectSpread2, "children$", children$), _objectSpread2));
+            if (typeof props["for"] === 'string') {
+              field = props["for"];
+              stateSource = _this8.sources[_this8.stateSourceName];
+              lense = {
+                get: stateGetter,
+                set: function set(state, arr) {
+                  return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, field, arr));
+                }
+              };
+            } else {
+              field = 'for';
+              stateSource = new _state2.StateSource(props$.remember());
+              lense = {
+                get: stateGetter,
+                set: function set(state, arr) {
+                  return state;
+                }
+              };
+            }
+
+            var sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, _this8.stateSourceName, stateSource), _defineProperty(_objectSpread3, "props$", props$), _defineProperty(_objectSpread3, "children$", children$), _objectSpread3));
+
+            var _factory = typeof data.props.of === 'function' ? data.props.of : _this8.components[data.props.of];
 
-            var _factory = _this8.components[data.props.of];
-            var lense = {
-              get: function get(state) {
-                return state;
-              },
-              set: function set(state) {
-                return state;
-              }
-            };
             sink$ = (0, _collection["default"])(_factory, lense)(sources);
+
+            if (_typeof(sink$) !== 'object') {
+              throw new Error('Invalid sinks returned from component factory of collection element');
+            }
           } else if (isSwitchable) {
-            var _objectSpread3;
+            var _objectSpread4;
 
             var stateField = data.props.state;
 
             if (typeof stateField === 'string') {
-              var _stream = _this8.sources[_this8.stateSourceName].stream;
-              propState = new _state2.StateSource(_stream.map(function (val) {
+              var stream = _this8.sources[_this8.stateSourceName].stream;
+              stateSource = new _state2.StateSource(stream.map(function (val) {
                 if (_typeof(val) !== 'object') {
                   console.error("Switchable Error: Invalid or undefined state");
                   return;
@@ -813,18 +822,22 @@ var Component = /*#__PURE__*/function () {
                 return newVal;
               }));
             } else {
-              propState = _this8.sources[_this8.stateSourceName];
+              stateSource = _this8.sources[_this8.stateSourceName];
             }
 
             var switchableComponents = data.props.of;
 
-            var _sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, _this8.stateSourceName, propState), _defineProperty(_objectSpread3, "props$", props$), _defineProperty(_objectSpread3, "children$", children$), _objectSpread3));
+            var _sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, _this8.stateSourceName, stateSource), _defineProperty(_objectSpread4, "props$", props$), _defineProperty(_objectSpread4, "children$", children$), _objectSpread4));
 
             sink$ = (0, _switchable["default"])(switchableComponents, props$.map(function (props) {
               return props.current;
             }))(_sources);
+
+            if (_typeof(sink$) !== 'object') {
+              throw new Error('Invalid sinks returned from component factory of switchable element');
+            }
           } else {
-            var _objectSpread4;
+            var _objectSpread5;
 
             var _lense = function _lense(props) {
               var state = props.state;
@@ -837,15 +850,21 @@ var Component = /*#__PURE__*/function () {
               return _objectSpread(_objectSpread({}, copy), state);
             };
 
-            propState = new _state2.StateSource(props$.map(_lense));
+            stateSource = new _state2.StateSource(props$.map(_lense));
 
-            var _sources2 = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, _this8.stateSourceName, propState), _defineProperty(_objectSpread4, "props$", props$), _defineProperty(_objectSpread4, "children$", children$), _objectSpread4));
+            var _sources2 = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread5 = {}, _defineProperty(_objectSpread5, _this8.stateSourceName, stateSource), _defineProperty(_objectSpread5, "props$", props$), _defineProperty(_objectSpread5, "children$", children$), _objectSpread5));
 
             sink$ = factory(_sources2);
+
+            if (_typeof(sink$) !== 'object') {
+              var name = componentName === 'sygnal-factory' ? 'custom element' : componentName;
+              throw new Error('Invalid sinks returned from component factory:', name);
+            }
           }
 
-          var originalDOMSink = sink$[_this8.DOMSourceName];
-          sink$[_this8.DOMSourceName] = propState.stream.map(function (state) {
+          var originalDOMSink = sink$[_this8.DOMSourceName].remember();
+
+          sink$[_this8.DOMSourceName] = stateSource.stream.map(function (state) {
             return originalDOMSink.compose((0, _debounce["default"])(10));
           }).flatten();
           acc[id] = {
@@ -1117,6 +1136,7 @@ function getComponents(currentElement, componentNames) {
   var isSwitchable = sel && sel.toLowerCase() === 'switchable';
   var isComponent = sel && ['collection', 'switchable', 'sygnal-factory'].concat(_toConsumableArray(componentNames)).includes(currentElement.sel) || typeof ((_currentElement$data2 = currentElement.data) === null || _currentElement$data2 === void 0 ? void 0 : (_currentElement$data3 = _currentElement$data2.props) === null || _currentElement$data3 === void 0 ? void 0 : _currentElement$data3.sygnalFactory) === 'function';
   var props = currentElement.data && currentElement.data.props || {};
+  var attrs = currentElement.data && currentElement.data.attrs || {};
   var children = currentElement.children || [];
   var found = {};
 
@@ -1124,11 +1144,16 @@ function getComponents(currentElement, componentNames) {
     var id = getComponentIdFromElement(currentElement);
 
     if (isCollection) {
+      var _currentElement$data4;
+
       if (!props.of) throw new Error("Collection element missing required 'component' property");
-      if (typeof props.of !== 'string') throw new Error("Invalid 'component' property of collection element: found ".concat(_typeof(props.of), " requires string"));
-      if (!componentNames.includes(props.of)) throw new Error("Specified component for collection not found: ".concat(props.of));
-      if (!props["for"] || !(typeof props["for"] === 'string' || Array.isArray(props["for"]))) console.warn("No valid array found in the 'value' property of collection ".concat(props.of, ": no collection components will be created"));
+      if (typeof props.of !== 'string' && typeof props.of !== 'function') throw new Error("Invalid 'component' property of collection element: found ".concat(_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: ".concat(props.of));
+      if (!attrs["for"] || !(typeof attrs["for"] === 'string' || Array.isArray(attrs["for"]))) console.warn("No valid array found in the 'value' property of collection ".concat(props.of, ": no collection components will be created"));
       currentElement.data.isCollection = true;
+      (_currentElement$data4 = currentElement.data).props || (_currentElement$data4.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 ".concat(_typeof(props.of), " requires object mapping names to component factories"));
@@ -1163,16 +1188,16 @@ function getComponents(currentElement, componentNames) {
 }
 
 function injectComponents(currentElement, components, componentNames) {
-  var _currentElement$data4, _currentElement$data5, _currentElement$data6, _currentElement$data7, _currentElement$data8;
+  var _currentElement$data5, _currentElement$data6, _currentElement$data7, _currentElement$data8, _currentElement$data9;
 
   var isNestedElement = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (!currentElement) return;
-  if ((_currentElement$data4 = currentElement.data) !== null && _currentElement$data4 !== void 0 && _currentElement$data4.componentsInjected) return currentElement;
+  if ((_currentElement$data5 = currentElement.data) !== null && _currentElement$data5 !== void 0 && _currentElement$data5.componentsInjected) return currentElement;
   if (!isNestedElement && currentElement.data) currentElement.data.componentsInjected = true;
   var sel = currentElement.sel || 'NO SELECTOR';
-  var isComponent = ['collection', 'switchable', 'sygnal-factory'].concat(_toConsumableArray(componentNames)).includes(sel) || typeof ((_currentElement$data5 = currentElement.data) === null || _currentElement$data5 === void 0 ? void 0 : (_currentElement$data6 = _currentElement$data5.props) === null || _currentElement$data6 === void 0 ? void 0 : _currentElement$data6.sygnalFactory) === 'function';
-  var isCollection = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data7 = currentElement.data) === null || _currentElement$data7 === void 0 ? void 0 : _currentElement$data7.isCollection;
-  var isSwitchable = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data8 = currentElement.data) === null || _currentElement$data8 === void 0 ? void 0 : _currentElement$data8.isSwitchable;
+  var isComponent = ['collection', 'switchable', 'sygnal-factory'].concat(_toConsumableArray(componentNames)).includes(sel) || typeof ((_currentElement$data6 = currentElement.data) === null || _currentElement$data6 === void 0 ? void 0 : (_currentElement$data7 = _currentElement$data6.props) === null || _currentElement$data7 === void 0 ? void 0 : _currentElement$data7.sygnalFactory) === 'function';
+  var isCollection = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data8 = currentElement.data) === null || _currentElement$data8 === void 0 ? void 0 : _currentElement$data8.isCollection;
+  var isSwitchable = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data9 = currentElement.data) === null || _currentElement$data9 === void 0 ? void 0 : _currentElement$data9.isSwitchable;
   var props = currentElement.data && currentElement.data.props || {};
   var children = currentElement.children || [];
 
@@ -1183,7 +1208,7 @@ function injectComponents(currentElement, components, componentNames) {
     if (isCollection) {
       currentElement.sel = 'div';
       delete currentElement.elm;
-      currentElement.children = _component;
+      currentElement.children = Array.isArray(_component) ? _component : [_component];
       return currentElement;
     } else if (isSwitchable) {
       return _component;

package/dist/pragma/index.js

@@ -45,7 +45,7 @@ var considerSvg = function considerSvg(vnode) {
 };
 
 var rewrites = {
-  // for: 'attrs',
+  "for": 'attrs',
   role: 'attrs',
   tabindex: 'attrs',
   'aria-*': 'attrs',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "An intuitive framework for building fast and small components or applications based on Cycle.js",
   "main": "./dist/index.js",
   "exports": {