sygnal 1.2.1 → 2.1.0

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/extra/run.js

@@ -25,10 +25,21 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function run(app) {
   var drivers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _options$mountPoint = options.mountPoint,
+      mountPoint = _options$mountPoint === void 0 ? '#root' : _options$mountPoint,
+      _options$fragments = options.fragments,
+      fragments = _options$fragments === void 0 ? true : _options$fragments;
   var wrapped = (0, _state.withState)(app, 'STATE');
   var baseDrivers = {
     EVENTS: _eventDriver["default"],
-    DOM: (0, _dom.makeDOMDriver)('#root'),
+    DOM: (0, _dom.makeDOMDriver)(mountPoint, {
+      snabbdomOptions: {
+        experimental: {
+          fragments: fragments
+        }
+      }
+    }),
     LOG: _logDriver["default"]
   };
 

package/dist/index.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; // export sygnal core functions
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -13,7 +13,12 @@ var _exportNames = {
   processForm: true,
   run: true,
   classes: true,
-  xs: true
+  xs: true,
+  debounce: true,
+  throttle: true,
+  delay: true,
+  dropRepeats: true,
+  sampleCombine: true
 };
 Object.defineProperty(exports, "ABORT", {
   enumerable: true,
@@ -39,6 +44,24 @@ Object.defineProperty(exports, "component", {
     return _component["default"];
   }
 });
+Object.defineProperty(exports, "debounce", {
+  enumerable: true,
+  get: function get() {
+    return _debounce["default"];
+  }
+});
+Object.defineProperty(exports, "delay", {
+  enumerable: true,
+  get: function get() {
+    return _delay["default"];
+  }
+});
+Object.defineProperty(exports, "dropRepeats", {
+  enumerable: true,
+  get: function get() {
+    return _dropRepeats["default"];
+  }
+});
 Object.defineProperty(exports, "processForm", {
   enumerable: true,
   get: function get() {
@@ -51,12 +74,24 @@ Object.defineProperty(exports, "run", {
     return _run["default"];
   }
 });
+Object.defineProperty(exports, "sampleCombine", {
+  enumerable: true,
+  get: function get() {
+    return _sampleCombine["default"];
+  }
+});
 Object.defineProperty(exports, "switchable", {
   enumerable: true,
   get: function get() {
     return _switchable["default"];
   }
 });
+Object.defineProperty(exports, "throttle", {
+  enumerable: true,
+  get: function get() {
+    return _throttle["default"];
+  }
+});
 Object.defineProperty(exports, "xs", {
   enumerable: true,
   get: function get() {
@@ -92,6 +127,16 @@ Object.keys(_dom).forEach(function (key) {
 
 var _xstream = _interopRequireDefault(require("xstream"));
 
+var _debounce = _interopRequireDefault(require("xstream/extra/debounce"));
+
+var _throttle = _interopRequireDefault(require("xstream/extra/throttle"));
+
+var _delay = _interopRequireDefault(require("xstream/extra/delay"));
+
+var _dropRepeats = _interopRequireDefault(require("xstream/extra/dropRepeats"));
+
+var _sampleCombine = _interopRequireDefault(require("xstream/extra/sampleCombine"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/dist/jsx.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Fragment", {
+  enumerable: true,
+  get: function get() {
+    return _snabbdom.Fragment;
+  }
+});
 Object.defineProperty(exports, "jsx", {
   enumerable: true,
   get: function get() {
@@ -10,4 +16,6 @@ Object.defineProperty(exports, "jsx", {
   }
 });
 
-var _index = require("./pragma/index");
+var _index = require("./pragma/index");
+
+var _snabbdom = require("snabbdom");

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,15 +116,26 @@ var defaultModules = {
 
 var createElementWithModules = function createElementWithModules(modules) {
   return function (sel, data) {
-    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');
+    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.');
     }
 
     for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       children[_key - 2] = arguments[_key];
     }
 
+    if (is.fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children);
+      }
+
+      var factory = sel;
+      sel = sel.name || 'sygnal-factory';
+      data || (data = {});
+      data.sygnalFactory = factory;
+    }
+
     var text = sanitizeText(children, modules);
     return considerSvg({
       sel: sel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "1.2.1",
+  "version": "2.1.0",
   "description": "An intuitive framework for building fast and small components or applications based on Cycle.js",
   "main": "./dist/index.js",
   "exports": {
@@ -36,6 +36,7 @@
     "@cycle/run": "^5.7.0",
     "@cycle/state": "^1.7.0",
     "extend": "^3.0.2",
+    "snabbdom": "^3.5.0",
     "xstream": "^11.14.0"
   },
   "devDependencies": {