sygnal 1.2.0 → 2.0.1

package/dist/collection.js

@@ -32,8 +32,8 @@ function collection(component, stateLense) {
   return function (sources) {
     var collectionOpts = {
       item: component,
-      itemKey: function itemKey(state) {
-        return state.id;
+      itemKey: function itemKey(state, ind) {
+        return typeof state.id !== 'undefined' ? state.id : ind;
       },
       itemScope: function itemScope(key) {
         return key;

package/dist/component.js

@@ -738,7 +738,12 @@ var Component = /*#__PURE__*/function () {
             return acc;
           }
 
-          var factory = _this8.components[componentName];
+          var factory = componentName === 'sygnal-factory' ? props.sygnalFactory : _this8.components[componentName] || props.sygnalFactory;
+
+          if (!factory && !isCollection && !isSwitchable) {
+            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: ".concat(componentName));
+          }
 
           var props$ = _xstream["default"].create().startWith(props);
 
@@ -750,13 +755,30 @@ var Component = /*#__PURE__*/function () {
           if (isCollection) {
             var _objectSpread2;
 
-            propState = new _state2.StateSource(props$.map(function (val) {
-              return val.value;
+            var stream, field;
+
+            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];
+
+              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"));
+                return [];
+              }
+
+              return arr;
             }).remember());
 
             var sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, _this8.stateSourceName, propState), _defineProperty(_objectSpread2, "props$", props$), _defineProperty(_objectSpread2, "children$", children$), _objectSpread2));
 
-            var _factory = _this8.components[data.component];
+            var _factory = _this8.components[data.props.of];
             var lense = {
               get: function get(state) {
                 return state;
@@ -1049,7 +1071,7 @@ function makeLog(context) {
 }
 
 function getComponents(currentElement, componentNames) {
-  var _currentElement$data;
+  var _currentElement$data, _currentElement$data2, _currentElement$data3;
 
   var isNestedElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (!currentElement) return {};
@@ -1058,7 +1080,7 @@ function getComponents(currentElement, componentNames) {
   var sel = currentElement.sel;
   var isCollection = sel && sel.toLowerCase() === 'collection';
   var isSwitchable = sel && sel.toLowerCase() === 'switchable';
-  var isComponent = sel && ['collection', 'swtichable'].concat(_toConsumableArray(componentNames)).includes(currentElement.sel);
+  var isComponent = sel && ['collection', 'swtichable', '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 children = currentElement.children || [];
   var found = {};
@@ -1067,10 +1089,10 @@ function getComponents(currentElement, componentNames) {
     var id = getComponentIdFromElement(currentElement);
 
     if (isCollection) {
-      if (!props.component) throw new Error("Collection element missing required 'component' property");
-      if (typeof props.component !== 'string') throw new Error("Invalid 'component' property of collection element: found ".concat(_typeof(props.component), " requires string"));
-      if (!componentNames.includes(props.component)) throw new Error("Specified component for collection not found: ".concat(props.component));
-      if (!props.value || !Array.isArray(props.value)) console.warn("No valid array found in the 'value' property of collection ".concat(props.component, ": no collection components will be created"));
+      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"));
       currentElement.data.isCollection = true;
       currentElement.data.component = props.component; // currentElement.data.componentArray = props.value
     } else if (isSwitchable) {
@@ -1109,16 +1131,16 @@ function getComponents(currentElement, componentNames) {
 }
 
 function injectComponents(currentElement, components, componentNames) {
-  var _currentElement$data2, _currentElement$data3, _currentElement$data4;
+  var _currentElement$data4, _currentElement$data5, _currentElement$data6, _currentElement$data7, _currentElement$data8;
 
   var isNestedElement = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (!currentElement) return;
-  if ((_currentElement$data2 = currentElement.data) !== null && _currentElement$data2 !== void 0 && _currentElement$data2.componentsInjected) return currentElement;
+  if ((_currentElement$data4 = currentElement.data) !== null && _currentElement$data4 !== void 0 && _currentElement$data4.componentsInjected) return currentElement;
   if (!isNestedElement && currentElement.data) currentElement.data.componentsInjected = true;
   var sel = currentElement.sel || 'NO SELECTOR';
-  var isComponent = ['collection', 'swtichable'].concat(_toConsumableArray(componentNames)).includes(sel);
-  var isCollection = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data3 = currentElement.data) === null || _currentElement$data3 === void 0 ? void 0 : _currentElement$data3.isCollection;
-  var isSwitchable = currentElement === null || currentElement === void 0 ? void 0 : (_currentElement$data4 = currentElement.data) === null || _currentElement$data4 === void 0 ? void 0 : _currentElement$data4.isSwitchable;
+  var isComponent = ['collection', 'swtichable', '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 props = currentElement.data && currentElement.data.props || {};
   var children = currentElement.children || [];
 

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',
@@ -116,9 +116,16 @@ var defaultModules = {
 
 var createElementWithModules = function createElementWithModules(modules) {
   return function (sel, data) {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      cnosole.error('JSX Error: Capitalized HTML element without corresponding Sygnal factory.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+
     if (is.fun(sel)) {
-      sel = sel.name || 'unnamed';
-      console.error('JSX Error: A capitalized tag name was used, but was transpiled to a nameless function.  Either use a named function or a lower case tag name to avoid this problem');
+      var factory = sel;
+      sel = sel.name || 'sygnal-factory';
+      data || (data = {});
+      data.sygnalFactory = factory;
     }
 
     for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
@@ -129,7 +136,7 @@ var createElementWithModules = function createElementWithModules(modules) {
     return considerSvg({
       sel: sel,
       data: data ? sanitizeData(data, modules) : {},
-      children: text ? undefined : sanitizeChildren(children),
+      children: typeof text !== 'undefined' ? undefined : sanitizeChildren(children),
       text: text,
       elm: undefined,
       key: data ? data.key : undefined

package/package.json

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