sygnal 2.0.1 → 2.2.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,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/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

@@ -121,17 +121,21 @@ var createElementWithModules = function createElementWithModules(modules) {
       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;
     }
 
-    for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      children[_key - 2] = arguments[_key];
-    }
-
     var text = sanitizeText(children, modules);
     return considerSvg({
       sel: sel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "2.0.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": {
@@ -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": {