sygnal 2.1.1 → 2.2.0

package/README.md

@@ -114,11 +114,11 @@ Alternatively, you can use any other bundler of your choice (Webpack, Babel, Rol
   ...,
   esbuild: {
     // add the import for Sygnal's JSX and Fragment handler to the top of each .jsx and .tsx page automatically
-    jsxInject: `import { jsx, Fragment } from 'sygnal/jsx'`
+    jsxInject: `import { jsx, Fragment } from 'sygnal/jsx'`,
     // tell the transpiler to use Sygnal's 'jsx' funtion to render JSX elements
     jsxFactory: `jsx`,
     // tell the transpiler to use Sygnal's 'Fragment' funtion to render JSX fragments (<>...</>)
-    jsxFragment: 'Fragment',
+    jsxFragment: 'Fragment'
   },
 }
 ```

package/dist/collection.js

@@ -26,10 +26,21 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function collection(component, stateLense) {
-  var combineList = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['DOM'];
-  var globalList = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ['EVENTS'];
-  var stateSourceName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'STATE';
+  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _opts$combineList = opts.combineList,
+      combineList = _opts$combineList === void 0 ? ['DOM'] : _opts$combineList,
+      _opts$globalList = opts.globalList,
+      globalList = _opts$globalList === void 0 ? ['EVENTS'] : _opts$globalList,
+      _opts$stateSourceName = opts.stateSourceName,
+      stateSourceName = _opts$stateSourceName === void 0 ? 'STATE' : _opts$stateSourceName,
+      _opts$domSourceName = opts.domSourceName,
+      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;
   return function (sources) {
+    var key = Date.now();
     var collectionOpts = {
       item: component,
       itemKey: function itemKey(state, ind) {
@@ -46,7 +57,27 @@ function collection(component, stateLense) {
               stream = _ref2[1];
 
           if (combineList.includes(name)) {
-            acc[name] = instances.pickCombine(name);
+            var combined = instances.pickCombine(name);
+
+            if (name === domSourceName && container) {
+              acc.DOM = combined.map(function (children) {
+                return {
+                  sel: container,
+                  data: {
+                    props: {
+                      className: containerClass
+                    }
+                  },
+                  children: children,
+                  key: key,
+                  text: undefined,
+                  elm: undefined
+                };
+              });
+            } else {
+              console.warn('Collections without wrapping containers will fail in unpredictable ways when used inside JSX fragments');
+              acc[name] = combined;
+            }
           } else {
             acc[name] = instances.pickMerge(name);
           }

package/dist/component.js

@@ -10,6 +10,8 @@ var _isolate = _interopRequireDefault(require("@cycle/isolate"));
 
 var _collection = _interopRequireDefault(require("./collection.js"));
 
+var _switchable = _interopRequireDefault(require("./switchable.js"));
+
 var _state2 = require("@cycle/state");
 
 var _xstream = _interopRequireWildcard(require("xstream"));
@@ -788,9 +790,42 @@ var Component = /*#__PURE__*/function () {
               }
             };
             sink$ = (0, _collection["default"])(_factory, lense)(sources);
-          } else if (isSwitchable) {} else {
+          } else if (isSwitchable) {
             var _objectSpread3;
 
+            var stateField = data.props.state;
+
+            if (typeof stateField === 'string') {
+              var _stream = _this8.sources[_this8.stateSourceName].stream;
+              propState = new _state2.StateSource(_stream.map(function (val) {
+                if (_typeof(val) !== 'object') {
+                  console.error("Switchable Error: Invalid or undefined state");
+                  return;
+                }
+
+                var newVal = val[stateField];
+
+                if (typeof newVal === 'undefined') {
+                  console.warn("Specified state field '".concat(stateField, "' for switchable element not found"));
+                  return;
+                }
+
+                return newVal;
+              }));
+            } else {
+              propState = _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));
+
+            sink$ = (0, _switchable["default"])(switchableComponents, props$.map(function (props) {
+              return props.current;
+            }))(_sources);
+          } else {
+            var _objectSpread4;
+
             var _lense = function _lense(props) {
               var state = props.state;
               if (typeof state === 'undefined') return props;
@@ -804,9 +839,9 @@ var Component = /*#__PURE__*/function () {
 
             propState = new _state2.StateSource(props$.map(_lense));
 
-            var _sources = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, _this8.stateSourceName, propState), _defineProperty(_objectSpread3, "props$", props$), _defineProperty(_objectSpread3, "children$", children$), _objectSpread3));
+            var _sources2 = _objectSpread(_objectSpread({}, _this8.sources), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, _this8.stateSourceName, propState), _defineProperty(_objectSpread4, "props$", props$), _defineProperty(_objectSpread4, "children$", children$), _objectSpread4));
 
-            sink$ = factory(_sources);
+            sink$ = factory(_sources2);
           }
 
           var originalDOMSink = sink$[_this8.DOMSourceName];
@@ -1080,7 +1115,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', '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 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 children = currentElement.children || [];
   var found = {};
@@ -1094,20 +1129,17 @@ function getComponents(currentElement, componentNames) {
       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) {
-      if (!props.components) throw new Error("Switchable element missing required 'components' property");
-      if (_typeof(props.components) !== 'object') throw new Error("Invalid 'components' property of switchable element: found ".concat(_typeof(props.components), " requires object mapping names to component factories"));
-      var switchableComponents = Object.values(props.components);
+      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"));
+      var switchableComponents = Object.values(props.of);
       if (!switchableComponents.every(function (comp) {
         return typeof comp === 'function';
-      })) throw new Error("One or more invalid component factories for switchable element is not a valid component factory");
-      if (!props.current || typeof props.current !== 'string') throw new Error("Missing or invalid 'current' property for switchable element: found ".concat(_typeof(props.current), " requires string"));
-      var switchableComponentNames = Object.keys(props.components);
+      })) throw new Error("One or more components provided to switchable element is not a valid component factory");
+      if (!props.current || typeof props.current !== 'string' && typeof props.current !== 'function') throw new Error("Missing or invalid 'current' property for switchable element: found '".concat(_typeof(props.current), "' requires string or function"));
+      var switchableComponentNames = Object.keys(props.of);
       if (!switchableComponentNames.includes(props.current)) throw new Error("Component '".concat(props.current, "' not found in switchable element"));
       currentElement.data.isSwitchable = true;
-      currentElement.data.components = props.components;
-      currentElement.data.currentComponent = props.current;
     } else {}
 
     found[id] = currentElement;
@@ -1138,7 +1170,7 @@ function injectComponents(currentElement, components, componentNames) {
   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', '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 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 props = currentElement.data && currentElement.data.props || {};
@@ -1153,6 +1185,8 @@ function injectComponents(currentElement, components, componentNames) {
       delete currentElement.elm;
       currentElement.children = _component;
       return currentElement;
+    } else if (isSwitchable) {
+      return _component;
     } else {
       return _component;
     }

package/package.json

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