sygnal 1.0.0

package/dist/component.js

@@ -0,0 +1,1152 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ABORT = void 0;
+exports["default"] = component;
+
+var _isolate = _interopRequireDefault(require("@cycle/isolate"));
+
+var _collection = _interopRequireDefault(require("./collection.js"));
+
+var _state2 = require("@cycle/state");
+
+var _xstream = _interopRequireWildcard(require("xstream"));
+
+var _delay = _interopRequireDefault(require("xstream/extra/delay.js"));
+
+var _concat = _interopRequireDefault(require("xstream/extra/concat.js"));
+
+var _debounce = _interopRequireDefault(require("xstream/extra/debounce.js"));
+
+var _dropRepeats = _interopRequireDefault(require("xstream/extra/dropRepeats.js"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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); }
+
+// import syntax has bugs for xstream in Node context
+// this attempts to normalize to work in both Node and browser
+// if (!xs.never && xs.default && xs.default.never) {
+//   xs.never = xs.default.never
+//   xs.merge = xs.default.merge
+//   xs.of    = xs.default.of
+// }
+// const concat = (Concat && Concat.default) ? Concat.default : Concat
+// const delay  = (Delay && Delay.default) ? Delay.default : Delay
+// const dropRepeats = (DropRepeats && DropRepeats.default) ? DropRepeats.default : DropRepeats
+var ENVIRONMENT = typeof window != 'undefined' && window || process && process.env || {};
+var REQUEST_SELECTOR_METHOD = 'request';
+var BOOTSTRAP_ACTION = 'BOOTSTRAP';
+var INITIALIZE_ACTION = 'INITIALIZE';
+var HYDRATE_ACTION = 'HYDRATE';
+var IS_ROOT_COMPONENT = true;
+var ABORT = '~#~#~ABORT~#~#~';
+exports.ABORT = ABORT;
+
+function component(opts) {
+  var name = opts.name,
+      sources = opts.sources,
+      isolateOpts = opts.isolateOpts,
+      _opts$stateSourceName = opts.stateSourceName,
+      stateSourceName = _opts$stateSourceName === void 0 ? 'STATE' : _opts$stateSourceName;
+
+  if (sources && _typeof(sources) !== 'object') {
+    throw new Error('Sources must be a Cycle.js sources object:', name);
+  }
+
+  var fixedIsolateOpts;
+
+  if (typeof isolateOpts == 'string') {
+    fixedIsolateOpts = _defineProperty({}, stateSourceName, isolateOpts);
+  } else {
+    if (isolateOpts === true) {
+      fixedIsolateOpts = {};
+    } else {
+      fixedIsolateOpts = isolateOpts;
+    }
+  }
+
+  var currySources = typeof sources === 'undefined';
+
+  if (_typeof(fixedIsolateOpts) == 'object') {
+    var wrapped = function wrapped(sources) {
+      var fixedOpts = _objectSpread(_objectSpread({}, opts), {}, {
+        sources: sources
+      });
+
+      return new Component(fixedOpts).sinks;
+    };
+
+    return currySources ? (0, _isolate["default"])(wrapped, fixedIsolateOpts) : (0, _isolate["default"])(wrapped, fixedIsolateOpts)(sources);
+  } else {
+    return currySources ? function (sources) {
+      return new Component(_objectSpread(_objectSpread({}, opts), {}, {
+        sources: sources
+      })).sinks;
+    } : new Component(opts).sinks;
+  }
+}
+
+var Component = /*#__PURE__*/function () {
+  // [ PASSED PARAMETERS ]
+  // name
+  // sources
+  // intent
+  // request
+  // model
+  // response
+  // view
+  // children
+  // initialState
+  // calculated
+  // storeCalculatedInState
+  // DOMSourceName
+  // stateSourceName
+  // requestSourceName
+  // [ PRIVATE / CALCULATED VALUES ]
+  // sourceNames
+  // intent$
+  // action$
+  // model$
+  // response$
+  // sendResponse$
+  // children$
+  // vdom$
+  // subComponentSink$
+  // [ INSTANTIATED STREAM OPERATOR ]
+  // log
+  // [ OUTPUT ]
+  // sinks
+  function Component(_ref) {
+    var _this = this;
+
+    var _ref$name = _ref.name,
+        name = _ref$name === void 0 ? 'NO NAME' : _ref$name,
+        sources = _ref.sources,
+        intent = _ref.intent,
+        request = _ref.request,
+        model = _ref.model,
+        response = _ref.response,
+        view = _ref.view,
+        _ref$children = _ref.children,
+        children = _ref$children === void 0 ? {} : _ref$children,
+        _ref$components = _ref.components,
+        components = _ref$components === void 0 ? {} : _ref$components,
+        initialState = _ref.initialState,
+        calculated = _ref.calculated,
+        _ref$storeCalculatedI = _ref.storeCalculatedInState,
+        storeCalculatedInState = _ref$storeCalculatedI === void 0 ? true : _ref$storeCalculatedI,
+        _ref$DOMSourceName = _ref.DOMSourceName,
+        DOMSourceName = _ref$DOMSourceName === void 0 ? 'DOM' : _ref$DOMSourceName,
+        _ref$stateSourceName = _ref.stateSourceName,
+        stateSourceName = _ref$stateSourceName === void 0 ? 'STATE' : _ref$stateSourceName,
+        _ref$requestSourceNam = _ref.requestSourceName,
+        requestSourceName = _ref$requestSourceNam === void 0 ? 'HTTP' : _ref$requestSourceNam;
+
+    _classCallCheck(this, Component);
+
+    if (!sources || _typeof(sources) != 'object') throw new Error('Missing or invalid sources');
+    this.name = name;
+    this.sources = sources;
+    this.intent = intent;
+    this.request = request;
+    this.model = model;
+    this.response = response;
+    this.view = view;
+    this.children = children;
+    this.components = components;
+    this.initialState = initialState;
+    this.calculated = calculated;
+    this.storeCalculatedInState = storeCalculatedInState;
+    this.DOMSourceName = DOMSourceName;
+    this.stateSourceName = stateSourceName;
+    this.requestSourceName = requestSourceName;
+    this.sourceNames = Object.keys(sources);
+    this.isSubComponent = this.sourceNames.includes('props$');
+    var state$ = sources[stateSourceName] && sources[stateSourceName].stream;
+
+    if (state$) {
+      this.currentState = initialState || {};
+      this.sources[this.stateSourceName] = new _state2.StateSource(state$.map(function (val) {
+        _this.currentState = val;
+        return val;
+      }));
+    }
+
+    if (IS_ROOT_COMPONENT && typeof this.intent === 'undefined' && typeof this.model === 'undefined') {
+      this.initialState = initialState || true;
+
+      this.intent = function (_) {
+        return {
+          __NOOP_ACTION__: _xstream["default"].never()
+        };
+      };
+
+      this.model = {
+        __NOOP_ACTION__: function __NOOP_ACTION__(state) {
+          return state;
+        }
+      };
+    }
+
+    IS_ROOT_COMPONENT = false;
+    this.log = makeLog(name);
+    this.initIntent$();
+    this.initAction$();
+    this.initResponse$();
+    this.initState();
+    this.initModel$();
+    this.initSendResponse$();
+    this.initChildren$();
+    this.initSubComponentSink$();
+    this.initVdom$();
+    this.initSinks();
+  }
+
+  _createClass(Component, [{
+    key: "initIntent$",
+    value: function initIntent$() {
+      if (!this.intent) {
+        return;
+      }
+
+      if (typeof this.intent != 'function') {
+        throw new Error('Intent must be a function');
+      }
+
+      this.intent$ = this.intent(this.sources);
+
+      if (!(this.intent$ instanceof _xstream.Stream) && _typeof(this.intent$) != 'object') {
+        throw new Error('Intent must return either an action$ stream or map of event streams');
+      }
+    }
+  }, {
+    key: "initAction$",
+    value: function initAction$() {
+      var requestSource = this.sources && this.sources[this.requestSourceName] || null;
+
+      if (!this.intent$) {
+        this.action$ = _xstream["default"].never();
+        return;
+      }
+
+      var runner;
+
+      if (this.intent$ instanceof _xstream.Stream) {
+        runner = this.intent$;
+      } else {
+        var mapped = Object.entries(this.intent$).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+              type = _ref3[0],
+              data$ = _ref3[1];
+
+          return data$.map(function (data) {
+            return {
+              type: type,
+              data: data
+            };
+          });
+        });
+        runner = _xstream["default"].merge.apply(_xstream["default"], [_xstream["default"].never()].concat(_toConsumableArray(mapped)));
+      }
+
+      var action$ = runner instanceof _xstream.Stream ? runner : runner.apply && runner(this.sources) || _xstream["default"].never();
+      var wrapped$ = (0, _concat["default"])(_xstream["default"].of({
+        type: BOOTSTRAP_ACTION
+      }), action$).compose((0, _delay["default"])(10));
+      var initialApiData;
+
+      if (requestSource && typeof requestSource.select == 'function') {
+        initialApiData = requestSource.select('initial').flatten();
+      } else {
+        initialApiData = _xstream["default"].never();
+      }
+
+      var hydrate$ = initialApiData.map(function (data) {
+        return {
+          type: HYDRATE_ACTION,
+          data: data
+        };
+      });
+      this.action$ = _xstream["default"].merge(wrapped$, hydrate$).compose(this.log(function (_ref4) {
+        var type = _ref4.type;
+        return "Action triggered: <".concat(type, ">");
+      }));
+    }
+  }, {
+    key: "initResponse$",
+    value: function initResponse$() {
+      var _this2 = this;
+
+      if (typeof this.request == 'undefined') {
+        return;
+      } else if (_typeof(this.request) != 'object') {
+        throw new Error('The request parameter must be an object');
+      }
+
+      var router$ = this.sources[this.requestSourceName];
+      var methods = Object.entries(this.request);
+      var wrapped = methods.reduce(function (acc, _ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+            method = _ref6[0],
+            routes = _ref6[1];
+
+        var _method = method.toLowerCase();
+
+        if (typeof router$[_method] != 'function') {
+          throw new Error('Invalid method in request object:', method);
+        }
+
+        var entries = Object.entries(routes);
+        var mapped = entries.reduce(function (acc, _ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+              route = _ref8[0],
+              action = _ref8[1];
+
+          var routeString = "[".concat(_method.toUpperCase(), "]:").concat(route || 'none');
+
+          var actionType = _typeof(action);
+
+          if (actionType === 'undefined') {
+            throw new Error("Action for '".concat(route, "' route in request object not specified"));
+          } else if (actionType !== 'string' && actionType !== 'function') {
+            throw new Error("Invalid action for '".concat(route, "' route: expecting string or function"));
+          }
+
+          var actionString = actionType === 'function' ? '[ FUNCTION ]' : "< ".concat(action, " >");
+          console.log("[".concat(_this2.name, "] Adding ").concat(_this2.requestSourceName, " route:"), _method.toUpperCase(), "'".concat(route, "' <").concat(actionString, ">"));
+
+          var route$ = router$[_method](route).compose((0, _dropRepeats["default"])(function (a, b) {
+            return a.id == b.id;
+          })).map(function (req) {
+            if (!req || !req.id) {
+              throw new Error("No id found in request: ".concat(routeString));
+            }
+
+            try {
+              var _reqId = req.id;
+              var params = req.params;
+              var body = req.body;
+              var cookies = req.cookies;
+              var type = actionType === 'function' ? 'FUNCTION' : action;
+              var data = {
+                params: params,
+                body: body,
+                cookies: cookies,
+                req: req
+              };
+              var obj = {
+                type: type,
+                data: body,
+                req: req,
+                _reqId: _reqId,
+                _action: type
+              };
+              var timestamp = new Date().toISOString();
+              var ip = req.get ? req.get('host') : '0.0.0.0';
+              console.log("".concat(timestamp, " ").concat(ip, " ").concat(req.method, " ").concat(req.url));
+
+              if (ENVIRONMENT.DEBUG) {
+                _this2.action$.setDebugListener({
+                  next: function next(_ref9) {
+                    var type = _ref9.type;
+                    return console.log("[".concat(_this2.name, "] Action from ").concat(_this2.requestSourceName, " request: <").concat(type, ">"));
+                  }
+                });
+              }
+
+              if (actionType === 'function') {
+                var enhancedState = _this2.addCalculated(_this2.currentState);
+
+                var result = action(enhancedState, req);
+                return _xstream["default"].of(_objectSpread(_objectSpread({}, obj), {}, {
+                  data: result
+                }));
+              } else {
+                _this2.action$.shamefullySendNext(obj);
+
+                var sourceEntries = Object.entries(_this2.sources);
+                var responses = sourceEntries.reduce(function (acc, _ref10) {
+                  var _ref11 = _slicedToArray(_ref10, 2),
+                      name = _ref11[0],
+                      source = _ref11[1];
+
+                  if (!source || typeof source[REQUEST_SELECTOR_METHOD] != 'function') return acc;
+                  var selected$ = source[REQUEST_SELECTOR_METHOD](_reqId);
+                  return [].concat(_toConsumableArray(acc), [selected$]);
+                }, []);
+                return _xstream["default"].merge.apply(_xstream["default"], _toConsumableArray(responses));
+              }
+            } catch (err) {
+              console.error(err);
+            }
+          }).flatten();
+
+          return [].concat(_toConsumableArray(acc), [route$]);
+        }, []);
+
+        var mapped$ = _xstream["default"].merge.apply(_xstream["default"], _toConsumableArray(mapped));
+
+        return [].concat(_toConsumableArray(acc), [mapped$]);
+      }, []);
+      this.response$ = _xstream["default"].merge.apply(_xstream["default"], _toConsumableArray(wrapped)).compose(this.log(function (res) {
+        if (res._action) return "[".concat(_this2.requestSourceName, "] response data received for Action: <").concat(res._action, ">");
+        return "[".concat(_this2.requestSourceName, "] response data received from FUNCTION");
+      }));
+
+      if (typeof this.response != 'undefined' && typeof this.response$ == 'undefined') {
+        throw new Error('Cannot have a response parameter without a request parameter');
+      }
+    }
+  }, {
+    key: "initState",
+    value: function initState() {
+      var _this3 = this;
+
+      if (this.model != undefined) {
+        if (this.model[INITIALIZE_ACTION] === undefined) {
+          this.model[INITIALIZE_ACTION] = _defineProperty({}, this.stateSourceName, function (_, data) {
+            return _objectSpread({}, _this3.addCalculated(data));
+          });
+        } else {
+          Object.keys(this.model[INITIALIZE_ACTION]).forEach(function (name) {
+            if (name !== _this3.stateSourceName) {
+              console.warn("".concat(INITIALIZE_ACTION, " can only be used with the ").concat(_this3.stateSourceName, " source... disregarding ").concat(name));
+              delete _this3.model[INITIALIZE_ACTION][name];
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "initModel$",
+    value: function initModel$() {
+      var _this4 = this;
+
+      if (typeof this.model == 'undefined') {
+        this.model$ = this.sourceNames.reduce(function (a, s) {
+          a[s] = _xstream["default"].never();
+          return a;
+        }, {});
+        return;
+      }
+
+      var initial = {
+        type: INITIALIZE_ACTION,
+        data: this.initialState
+      };
+      var shimmed$ = this.initialState ? (0, _concat["default"])(_xstream["default"].of(initial), this.action$).compose((0, _delay["default"])(0)) : this.action$;
+      var onState = this.makeOnAction(shimmed$, true, this.action$);
+      var onNormal = this.makeOnAction(this.action$, false, this.action$);
+      var modelEntries = Object.entries(this.model);
+      var reducers = {};
+      modelEntries.forEach(function (entry) {
+        var _entry = _slicedToArray(entry, 2),
+            action = _entry[0],
+            sinks = _entry[1];
+
+        if (typeof sinks === 'function') {
+          sinks = _defineProperty({}, _this4.stateSourceName, sinks);
+        }
+
+        if (_typeof(sinks) !== 'object') {
+          throw new Error("Entry for each action must be an object: ".concat(_this4.name, " ").concat(action));
+        }
+
+        var sinkEntries = Object.entries(sinks);
+        sinkEntries.forEach(function (entry) {
+          var _entry2 = _slicedToArray(entry, 2),
+              sink = _entry2[0],
+              reducer = _entry2[1];
+
+          var isStateSink = sink == _this4.stateSourceName;
+          var on = isStateSink ? onState : onNormal;
+          var onned = on(action, reducer);
+          var wrapped = onned.compose(_this4.log(function (data) {
+            if (isStateSink) {
+              return "State reducer added: <".concat(action, ">");
+            } else {
+              var extra = data && (data.type || data.command || data.name || data.key || Array.isArray(data) && 'Array' || data);
+              return "Data sent to [".concat(sink, "]: <").concat(action, "> ").concat(extra);
+            }
+          }));
+
+          if (Array.isArray(reducers[sink])) {
+            reducers[sink].push(wrapped);
+          } else {
+            reducers[sink] = [wrapped];
+          }
+        });
+      });
+      var model$ = Object.entries(reducers).reduce(function (acc, entry) {
+        var _entry3 = _slicedToArray(entry, 2),
+            sink = _entry3[0],
+            streams = _entry3[1];
+
+        acc[sink] = _xstream["default"].merge.apply(_xstream["default"], [_xstream["default"].never()].concat(_toConsumableArray(streams)));
+        return acc;
+      }, {});
+      this.model$ = model$;
+    }
+  }, {
+    key: "initSendResponse$",
+    value: function initSendResponse$() {
+      var _this5 = this;
+
+      var responseType = _typeof(this.response);
+
+      if (responseType != 'function' && responseType != 'undefined') {
+        throw new Error('The response parameter must be a function');
+      }
+
+      if (responseType == 'undefined') {
+        if (this.response$) {
+          this.response$.subscribe({
+            next: this.log(function (_ref12) {
+              var _reqId = _ref12._reqId,
+                  _action = _ref12._action;
+              return "Unhandled response for request: ".concat(_action, " ").concat(_reqId);
+            })
+          });
+        }
+
+        this.sendResponse$ = _xstream["default"].never();
+        return;
+      }
+
+      var selectable = {
+        select: function select(actions) {
+          if (typeof actions == 'undefined') return _this5.response$;
+          if (!Array.isArray(actions)) actions = [actions];
+          return _this5.response$.filter(function (_ref13) {
+            var _action = _ref13._action;
+            return actions.length > 0 ? _action === 'FUNCTION' || actions.includes(_action) : true;
+          });
+        }
+      };
+      var out = this.response(selectable);
+
+      if (_typeof(out) != 'object') {
+        throw new Error('The response function must return an object');
+      }
+
+      var entries = Object.entries(out);
+      var out$ = entries.reduce(function (acc, _ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+            command = _ref15[0],
+            response$ = _ref15[1];
+
+        var mapped$ = response$.map(function (_ref16) {
+          var _reqId = _ref16._reqId,
+              _action = _ref16._action,
+              data = _ref16.data;
+
+          if (!_reqId) {
+            throw new Error("No request id found for response for: ".concat(command));
+          }
+
+          return {
+            _reqId: _reqId,
+            _action: _action,
+            command: command,
+            data: data
+          };
+        });
+        return [].concat(_toConsumableArray(acc), [mapped$]);
+      }, []);
+      this.sendResponse$ = _xstream["default"].merge.apply(_xstream["default"], _toConsumableArray(out$)).compose(this.log(function (_ref17) {
+        var _reqId = _ref17._reqId,
+            _action = _ref17._action;
+        return "[".concat(_this5.requestSourceName, "] response sent for: <").concat(_action, ">");
+      }));
+    }
+  }, {
+    key: "initChildren$",
+    value: function initChildren$() {
+      var _this6 = this;
+
+      var initial = this.sourceNames.reduce(function (acc, name) {
+        if (name == _this6.DOMSourceName) {
+          acc[name] = {};
+        } else {
+          acc[name] = [];
+        }
+
+        return acc;
+      }, {});
+      this.children$ = Object.entries(this.children).reduce(function (acc, _ref18) {
+        var _ref19 = _slicedToArray(_ref18, 2),
+            childName = _ref19[0],
+            childFactory = _ref19[1];
+
+        var child$ = childFactory(_this6.sources);
+
+        _this6.sourceNames.forEach(function (source) {
+          if (source == _this6.DOMSourceName) {
+            acc[source][childName] = child$[source];
+          } else {
+            acc[source].push(child$[source]);
+          }
+        });
+
+        return acc;
+      }, initial);
+    }
+  }, {
+    key: "initSubComponentSink$",
+    value: function initSubComponentSink$() {
+      var _this7 = this;
+
+      var subComponentSink$ = _xstream["default"].create({
+        start: function start(listener) {
+          _this7.newSubComponentSinks = listener.next.bind(listener);
+        },
+        stop: function stop(_) {}
+      });
+
+      subComponentSink$.subscribe({
+        next: function next(_) {
+          return _;
+        }
+      });
+      this.subComponentSink$ = subComponentSink$.filter(function (sinks) {
+        return Object.keys(sinks).length > 0;
+      });
+    }
+  }, {
+    key: "initVdom$",
+    value: function initVdom$() {
+      var _this8 = this;
+
+      if (typeof this.view != 'function') {
+        this.vdom$ = _xstream["default"].of(null);
+        return;
+      }
+
+      var state = this.sources[this.stateSourceName];
+
+      var renderParams = _objectSpread({}, this.children$[this.DOMSourceName]);
+
+      var enhancedState = state && state.isolateSource(state, {
+        get: function get(state) {
+          return _this8.addCalculated(state);
+        }
+      });
+
+      var stateStream = enhancedState && enhancedState.stream || _xstream["default"].never();
+
+      renderParams.state = stateStream;
+      renderParams[this.stateSourceName] = stateStream;
+
+      if (this.sources.props$) {
+        renderParams.props = this.sources.props$;
+      }
+
+      if (this.sources.children$) {
+        renderParams.children = this.sources.children$;
+      }
+
+      var pulled = Object.entries(renderParams).reduce(function (acc, _ref20) {
+        var _ref21 = _slicedToArray(_ref20, 2),
+            name = _ref21[0],
+            stream = _ref21[1];
+
+        acc.names.push(name);
+        acc.streams.push(stream);
+        return acc;
+      }, {
+        names: [],
+        streams: []
+      });
+
+      var merged = _xstream["default"].combine.apply(_xstream["default"], _toConsumableArray(pulled.streams));
+
+      var throttled = merged.compose((0, _debounce["default"])(1)).map(function (arr) {
+        return pulled.names.reduce(function (acc, name, index) {
+          acc[name] = arr[index];
+          return acc;
+        }, {});
+      });
+      var componentNames = Object.keys(this.components);
+      this.vdom$ = throttled.fold(function (previousComponents, renderParams) {
+        var vDom = _this8.view(renderParams) || {
+          sel: 'div',
+          data: {},
+          children: []
+        };
+        var foundComponents = getComponents(vDom, componentNames);
+        var entries = Object.entries(foundComponents);
+        var rootEntry = {
+          '::ROOT::': vDom
+        };
+        if (entries.length === 0) return rootEntry;
+        var newComponents = entries.reduce(function (acc, _ref22) {
+          var _ref23 = _slicedToArray(_ref22, 2),
+              id = _ref23[0],
+              el = _ref23[1];
+
+          var componentName = el.sel;
+          var data = el.data;
+          var props = data.props || {};
+          var children = el.children || [];
+          var isCollection = data.isCollection || false;
+          var isSwitchable = data.isSwitchable || false;
+
+          if (previousComponents[id]) {
+            var entry = previousComponents[id];
+            acc[id] = entry;
+            entry.props$.shamefullySendNext(props);
+            entry.children$.shamefullySendNext(children);
+            return acc;
+          }
+
+          var factory = _this8.components[componentName];
+
+          var props$ = _xstream["default"].create().startWith(props);
+
+          var children$ = _xstream["default"].create().startWith(children);
+
+          var propState;
+          var sink$;
+
+          if (isCollection) {
+            var _objectSpread2;
+
+            propState = new _state2.StateSource(props$.map(function (val) {
+              return val.value;
+            }).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 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;
+
+            var _lense = function _lense(props) {
+              var state = props.state;
+              if (typeof state === 'undefined') return props;
+              if (_typeof(state) !== 'object') return state;
+
+              var copy = _objectSpread({}, props);
+
+              delete copy.state;
+              return _objectSpread(_objectSpread({}, copy), state);
+            };
+
+            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));
+
+            sink$ = factory(_sources);
+          }
+
+          var originalDOMSink = sink$[_this8.DOMSourceName];
+          sink$[_this8.DOMSourceName] = propState.stream.map(function (state) {
+            return originalDOMSink.compose((0, _debounce["default"])(2));
+          }).flatten();
+          acc[id] = {
+            sink$: sink$,
+            props$: props$,
+            children$: children$
+          };
+          return acc;
+        }, rootEntry);
+        return newComponents;
+      }, {}).map(function (components) {
+        var root = components['::ROOT::'];
+        var ids = [];
+        var entries = Object.entries(components).filter(function (_ref24) {
+          var _ref25 = _slicedToArray(_ref24, 1),
+              id = _ref25[0];
+
+          return id !== '::ROOT::';
+        });
+        if (entries.length === 0) return _xstream["default"].of(root);
+        var sinkArrays = entries.reduce(function (acc, _ref26) {
+          var _ref27 = _slicedToArray(_ref26, 2),
+              id = _ref27[0],
+              val = _ref27[1];
+
+          Object.entries(val.sink$).forEach(function (_ref28) {
+            var _ref29 = _slicedToArray(_ref28, 2),
+                name = _ref29[0],
+                stream = _ref29[1];
+
+            if (!acc[name]) acc[name] = [];
+            if (name !== _this8.DOMSourceName) acc[name].push(stream);
+          });
+          return acc;
+        }, {});
+        var sink$ = Object.entries(sinkArrays).reduce(function (acc, _ref30) {
+          var _ref31 = _slicedToArray(_ref30, 2),
+              sink = _ref31[0],
+              streams = _ref31[1];
+
+          acc[sink] = _xstream["default"].merge.apply(_xstream["default"], _toConsumableArray(streams));
+          return acc;
+        }, {});
+
+        _this8.newSubComponentSinks(sink$);
+
+        var vdom$ = entries.map(function (_ref32) {
+          var _ref33 = _slicedToArray(_ref32, 2),
+              id = _ref33[0],
+              val = _ref33[1];
+
+          ids.push(id);
+          return val.sink$[_this8.DOMSourceName];
+        });
+        if (vdom$.length === 0) return _xstream["default"].of(root);
+        return _xstream["default"].combine.apply(_xstream["default"], _toConsumableArray(vdom$)).map(function (vdoms) {
+          var withIds = vdoms.reduce(function (acc, vdom, index) {
+            acc[ids[index]] = vdom;
+            return acc;
+          }, {});
+          var injected = injectComponents(root, withIds, componentNames);
+          return injected;
+        });
+      }).flatten().filter(function (val) {
+        return !!val;
+      }).remember().compose(this.log('View Rendered'));
+    }
+  }, {
+    key: "initSinks",
+    value: function initSinks() {
+      var _this9 = this;
+
+      this.sinks = this.sourceNames.reduce(function (acc, name) {
+        if (name == _this9.DOMSourceName) return acc;
+        var subComponentSink$ = _this9.subComponentSink$ ? _this9.subComponentSink$.map(function (sinks) {
+          return sinks[name];
+        }).filter(function (sink) {
+          return !!sink;
+        }).flatten() : _xstream["default"].never();
+
+        if (name === _this9.stateSourceName) {
+          acc[name] = _xstream["default"].merge.apply(_xstream["default"], [_this9.model$[name] || _xstream["default"].never(), _this9.sources[_this9.stateSourceName].stream.filter(function (_) {
+            return false;
+          })].concat(_toConsumableArray(_this9.children$[name])));
+        } else {
+          acc[name] = _xstream["default"].merge.apply(_xstream["default"], [_this9.model$[name] || _xstream["default"].never(), subComponentSink$].concat(_toConsumableArray(_this9.children$[name])));
+        }
+
+        return acc;
+      }, {});
+      this.sinks[this.DOMSourceName] = this.vdom$;
+      this.sinks[this.requestSourceName] = _xstream["default"].merge(this.sendResponse$, this.sinks[this.requestSourceName]);
+    }
+  }, {
+    key: "makeOnAction",
+    value: function makeOnAction(action$) {
+      var _this10 = this;
+
+      var isStateSink = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var rootAction$ = arguments.length > 2 ? arguments[2] : undefined;
+      rootAction$ = rootAction$ || action$;
+      return function (name, reducer) {
+        var filtered$ = action$.filter(function (_ref34) {
+          var type = _ref34.type;
+          return type == name;
+        });
+        var returnStream$;
+
+        if (typeof reducer === 'function') {
+          returnStream$ = filtered$.map(function (action) {
+            var next = function next(type, data) {
+              var _reqId = action._reqId || action.req && action.req.id;
+
+              var _data = _reqId ? _typeof(data) == 'object' ? _objectSpread(_objectSpread({}, data), {}, {
+                _reqId: _reqId,
+                _action: name
+              }) : {
+                data: data,
+                _reqId: _reqId,
+                _action: name
+              } : data; // put the "next" action request at the end of the event loop so the "current" action completes first
+
+
+              setTimeout(function () {
+                // push the "next" action request into the action$ stream
+                rootAction$.shamefullySendNext({
+                  type: type,
+                  data: _data
+                });
+              }, 10);
+            };
+
+            var data = action.data;
+            if (data && data.data && data._reqId) data = data.data;
+
+            if (isStateSink) {
+              return function (state) {
+                var _state = _this10.isSubComponent ? _this10.currentState : state;
+
+                var enhancedState = _this10.addCalculated(_state);
+
+                var newState = reducer(enhancedState, data, next, action.req);
+                if (newState == ABORT) return _state;
+                return _this10.cleanupCalculated(newState);
+              };
+            } else {
+              var enhancedState = _this10.addCalculated(_this10.currentState);
+
+              var reduced = reducer(enhancedState, data, next, action.req);
+
+              var type = _typeof(reduced);
+
+              var _reqId = action._reqId || action.req && action.req.id;
+
+              if (['string', 'number', 'boolean', 'function'].includes(type)) return reduced;
+              if (type == 'object') return _objectSpread(_objectSpread({}, reduced), {}, {
+                _reqId: _reqId,
+                _action: name
+              });
+
+              if (type == 'undefined') {
+                console.warn("'undefined' value sent to ".concat(name));
+                return reduced;
+              }
+
+              throw new Error("Invalid reducer type for ".concat(name, " ").concat(type));
+            }
+          }).filter(function (result) {
+            return result != ABORT;
+          });
+        } else if (reducer === undefined || reducer === true) {
+          returnStream$ = filtered$.map(function (_ref35) {
+            var data = _ref35.data;
+            return data;
+          });
+        } else {
+          var value = reducer;
+          returnStream$ = filtered$.mapTo(value);
+        }
+
+        return returnStream$;
+      };
+    }
+  }, {
+    key: "addCalculated",
+    value: function addCalculated(state) {
+      if (!this.calculated || _typeof(state) !== 'object') return state;
+      if (_typeof(this.calculated) !== 'object') throw new Error("'calculated' parameter must be an object mapping calculated state field named to functions");
+      var entries = Object.entries(this.calculated);
+      var calculated = entries.reduce(function (acc, _ref36) {
+        var _ref37 = _slicedToArray(_ref36, 2),
+            field = _ref37[0],
+            fn = _ref37[1];
+
+        if (typeof fn !== 'function') throw new Error("Missing or invalid calculator function for calculated field '".concat(field));
+
+        try {
+          acc[field] = fn(state);
+        } catch (e) {
+          console.warn("Calculated field '".concat(field, "' threw an error during calculation: ").concat(e.message));
+        }
+
+        return acc;
+      }, {});
+      return _objectSpread(_objectSpread({}, state), calculated);
+    }
+  }, {
+    key: "cleanupCalculated",
+    value: function cleanupCalculated(state) {
+      var _this11 = this;
+
+      if (this.storeCalculatedInState) return this.addCalculated(state);
+      if (!this.calculated || !state || _typeof(state) !== 'object') return state;
+      var keys = Object.keys(this.calculated);
+
+      var copy = _objectSpread({}, state);
+
+      keys.forEach(function (key) {
+        if (_this11.initialState && typeof _this11.initialState[key] !== 'undefined') {
+          copy[key] = _this11.initialState[key];
+        } else {
+          delete copy[key];
+        }
+      });
+      return copy;
+    }
+  }]);
+
+  return Component;
+}();
+/**
+ * factory to create a logging function meant to be used inside of an xstream .compose()
+ *
+ * @param {String} context name of the component or file to be prepended to any messages
+ * @return {Function}
+ *
+ * returned function accepts either a `String` of `Function`
+ * `String` values will be logged to `console` as is
+ * `Function` values will be called with the current `stream` value and the result will be logged to `console`
+ * all output will be prepended with the `context` (ex. "[CONTEXT] My output")
+ * ONLY outputs if the global `DEBUG` variable is set to `true`
+ */
+
+
+function makeLog(context) {
+  return function (msg) {
+    var fixedMsg = typeof msg === 'function' ? msg : function (_) {
+      return msg;
+    };
+    return function (stream) {
+      return stream.debug(function (msg) {
+        if (ENVIRONMENT.DEBUG == 'true' || ENVIRONMENT.DEBUG === true) {
+          console.log("[".concat(context, "] ").concat(fixedMsg(msg)));
+        }
+      });
+    };
+  };
+}
+
+function getComponents(currentElement, componentNames) {
+  var _currentElement$data;
+
+  var isNestedElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (!currentElement) return {};
+  if ((_currentElement$data = currentElement.data) !== null && _currentElement$data !== void 0 && _currentElement$data.componentsProcessed) return {};
+  if (!isNestedElement) currentElement.data.componentsProcessed = true;
+  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 props = currentElement.data && currentElement.data.props || {};
+  var children = currentElement.children || [];
+  var found = {};
+
+  if (isComponent) {
+    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"));
+      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 (!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);
+      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;
+  }
+
+  if (children.length > 0) {
+    children.map(function (child) {
+      return getComponents(child, componentNames, true);
+    }).forEach(function (child) {
+      Object.entries(child).forEach(function (_ref38) {
+        var _ref39 = _slicedToArray(_ref38, 2),
+            id = _ref39[0],
+            el = _ref39[1];
+
+        return found[id] = el;
+      });
+    });
+  }
+
+  return found;
+}
+
+function injectComponents(currentElement, components, componentNames) {
+  var _currentElement$data2, _currentElement$data3, _currentElement$data4;
+
+  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 (!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 props = currentElement.data && currentElement.data.props || {};
+  var children = currentElement.children || [];
+
+  if (isComponent) {
+    var id = getComponentIdFromElement(currentElement);
+    var _component = components[id];
+
+    if (isCollection) {
+      currentElement.sel = 'div';
+      delete currentElement.elm;
+      currentElement.children = _component;
+      return currentElement;
+    } else {
+      return _component;
+    }
+  } else if (children.length > 0) {
+    currentElement.children = children.map(function (child) {
+      return injectComponents(child, components, componentNames);
+    }).flat();
+    return currentElement;
+  } else {
+    return currentElement;
+  }
+}
+
+function getComponentIdFromElement(el) {
+  var sel = el.sel;
+  var props = el.data && el.data.props || {};
+  var id = props.id && JSON.stringify(props.id) || JSON.stringify(props);
+  return "".concat(sel, "::").concat(id);
+}