sygnal 2.0.0 → 2.1.1

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

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

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.0",
+  "version": "2.1.1",
   "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": {