sygnal 2.1.0 → 2.3.0

package/README.md

@@ -24,7 +24,7 @@ Sygnal provides a structured way to create Cycle.js components that accomplishes
 - Handle all stream plumbing between components
 - Support arbitrarily complex applications with deep component hierarchies
 - Reuse the best patterns from popular frameworks like React and Vue while avoiding the pitfalls
-- Support pure Javascript, Typescript, and JSX
+- Support pure Javascript, Typescript, and JSX (including fragments)
 - Provide application state out of the box, and make it easy to use
 - Use reasonable defaults while providing access to low-level Cycle.js functionality wherever possible
 - Provide automatic debugging information
@@ -106,7 +106,22 @@ The results will be in the 'dist' folder, and you can serve it locally by runnin
 npm preview
 ```
 
-Alternatively, you can use any other bundler of your choice (Webpack, Babel, Rollup, etc.).  To use JSX in your components while using alternative bundlers, you will need to install [snabbdom-pragma](https://www.npmjs.com/package/snabbdom-pragma) and configure your bundler to use it for transforming JSX (see [examples here](https://www.npmjs.com/package/snabbdom-pragma#usage "snabbdom-pragma bundler configuration examples")).
+Alternatively, you can use any other bundler of your choice (Webpack, Babel, Rollup, etc.).  To use JSX in your components while using alternative bundlers, you will need to configure your bundler to use Sygnal's JSX pragma. This is slightly different for each bundler, but looks generally like:
+
+```javascript
+// this example is for Vite or esbuild, but most bundlers have options similar to this for handling JSX transpiling
+{
+  ...,
+  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'`,
+    // 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'
+  },
+}
+```
 
 
 ## Initialization

package/dist/collection.js

@@ -26,10 +26,20 @@ 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,
+      containerClass = opts.containerClass;
   return function (sources) {
+    var key = Date.now();
     var collectionOpts = {
       item: component,
       itemKey: function itemKey(state, ind) {
@@ -46,7 +56,28 @@ 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) {
+                var data = containerClass ? {
+                  props: {
+                    className: containerClass
+                  }
+                } : {};
+                return {
+                  sel: container,
+                  data: data,
+                  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"));
@@ -749,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 stream, field;
+            var _objectSpread3;
 
-            if (typeof data.props["for"] === 'string') {
-              field = data.props["for"];
-              stream = _this8.sources[_this8.stateSourceName].stream;
-            } else {
-              field = 'for';
-              stream = props$;
-            }
+            var field, lense;
 
-            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"));
@@ -774,22 +768,76 @@ 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);
-          } else if (isSwitchable) {} else {
-            var _objectSpread3;
+
+            if (_typeof(sink$) !== 'object') {
+              throw new Error('Invalid sinks returned from component factory of collection element');
+            }
+          } else if (isSwitchable) {
+            var _objectSpread4;
+
+            var stateField = data.props.state;
+
+            if (typeof stateField === 'string') {
+              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;
+                }
+
+                var newVal = val[stateField];
+
+                if (typeof newVal === 'undefined') {
+                  console.warn("Specified state field '".concat(stateField, "' for switchable element not found"));
+                  return;
+                }
+
+                return newVal;
+              }));
+            } else {
+              stateSource = _this8.sources[_this8.stateSourceName];
+            }
+
+            var switchableComponents = data.props.of;
+
+            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 _objectSpread5;
 
             var _lense = function _lense(props) {
               var state = props.state;
@@ -802,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 _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), {}, (_objectSpread5 = {}, _defineProperty(_objectSpread5, _this8.stateSourceName, stateSource), _defineProperty(_objectSpread5, "props$", props$), _defineProperty(_objectSpread5, "children$", children$), _objectSpread5));
 
-            sink$ = factory(_sources);
+            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] = {
@@ -1080,8 +1134,9 @@ 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 attrs = currentElement.data && currentElement.data.attrs || {};
   var children = currentElement.children || [];
   var found = {};
 
@@ -1089,25 +1144,27 @@ 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.data.component = props.component; // currentElement.data.componentArray = props.value
+      (_currentElement$data4 = currentElement.data).props || (_currentElement$data4.props = {});
+      currentElement.data.props["for"] = attrs["for"];
+      currentElement.data.attrs = undefined;
     } 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;
@@ -1131,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', '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 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 || [];
 
@@ -1151,8 +1208,10 @@ 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;
     } else {
       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.1.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": {