frint-react - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/frint-react.js

@@ -5,10 +5,10 @@ this["FrintReact"] =
 /******/ 	var installedModules = {};
-
+/******/
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-
+/******/
 /******/ 		// Check if module is in cache
 /******/ 		if(installedModules[moduleId])
 /******/ 			return installedModules[moduleId].exports;
-
+/******/
 /******/ 		// Create a new module (and put it into the cache)
@@ -20,23 +20,23 @@ /******/ 		var module = installedModules[moduleId] = {
 /******/ 		};
-
+/******/
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
+/******/
 /******/ 		// Flag the module as loaded
 /******/ 		module.l = true;
-
+/******/
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-
-
+/******/
+/******/
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-
+/******/
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-
+/******/
 /******/ 	// identity function for calling harmony imports with the correct context
 /******/ 	__webpack_require__.i = function(value) { return value; };
-
+/******/
 /******/ 	// define getter function for harmony exports
@@ -52,3 +52,3 @@ /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 	};
-
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
@@ -62,11 +62,11 @@ /******/ 	__webpack_require__.n = function(module) {
 /******/ 	};
-
+/******/
 /******/ 	// Object.prototype.hasOwnProperty.call
 /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-
+/******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-
+/******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 8);
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
 /******/ })
@@ -219,2 +219,61 @@ /************************************************************************/
 /* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _render = __webpack_require__(9);
+
+var _render2 = _interopRequireDefault(_render);
+
+var _streamProps = __webpack_require__(11);
+
+var _streamProps2 = _interopRequireDefault(_streamProps);
+
+var _isObservable = __webpack_require__(4);
+
+var _isObservable2 = _interopRequireDefault(_isObservable);
+
+var _getMountableComponent = __webpack_require__(3);
+
+var _getMountableComponent2 = _interopRequireDefault(_getMountableComponent);
+
+var _observe = __webpack_require__(8);
+
+var _observe2 = _interopRequireDefault(_observe);
+
+var _Region = __webpack_require__(7);
+
+var _Region2 = _interopRequireDefault(_Region);
+
+var _Provider = __webpack_require__(2);
+
+var _Provider2 = _interopRequireDefault(_Provider);
+
+var _Region3 = __webpack_require__(10);
+
+var _Region4 = _interopRequireDefault(_Region3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  render: _render2.default,
+  streamProps: _streamProps2.default,
+  isObservable: _isObservable2.default,
+
+  getMountableComponent: _getMountableComponent2.default,
+  observe: _observe2.default,
+  Region: _Region2.default,
+  Provider: _Provider2.default,
+
+  RegionService: _Region4.default
+};
+module.exports = exports['default'];
+
+/***/ }),
+/* 6 */
 /***/ (function(module, exports) {
@@ -225,3 +284,3 @@
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -236,3 +295,3 @@
 
-var _lodash = __webpack_require__(5);
+var _lodash = __webpack_require__(6);
 
@@ -262,3 +321,3 @@ var _lodash2 = _interopRequireDefault(_lodash);
     return {
-      list: [], // array of widgets ==> { name, instance }
+      list: [], // array of apps ==> { name, instance }
       listForRendering: [] // array of {name, Component} objects
@@ -272,3 +331,3 @@ };
    * Since we are calling setState multiple times, we need to make sure that only when
-   * the list of widgets to render, i.e. this.state.listForRendering, is changed should
+   * the list of apps to render, i.e. this.state.listForRendering, is changed should
    * trigger a re-render of the region component.
@@ -304,5 +363,5 @@ * @param  {Object}  nextProps  the next set of props
     this.rootApp = rootApp;
-    var widgets$ = rootApp.getWidgets$(this.props.name, this.props.uniqueKey);
+    var apps$ = rootApp.getApps$(this.props.name, this.props.uniqueKey);
 
-    this.subscription = widgets$.subscribe({
+    this.subscription = apps$.subscribe({
       next: function next(list) {
@@ -313,7 +372,8 @@ _this.setState({
           _this.state.list.forEach(function (item) {
-            var widgetName = item.name;
-            var widgetWeight = item.weight;
-            var widgetMulti = item.multi;
+            var appName = item.name,
+                appWeight = item.weight,
+                multi = item.multi;
+
             var existsInState = _this.state.listForRendering.some(function (w) {
-              return w.name === widgetName;
+              return w.name === appName;
             });
@@ -329,9 +389,9 @@
 
-            if (_this.props.uniqueKey && !rootApp.hasWidgetInstance.apply(rootApp, [widgetName].concat(regionArgs))) {
-              rootApp.instantiateWidget.apply(rootApp, [widgetName].concat(regionArgs));
+            if (_this.props.uniqueKey && !rootApp.hasAppInstance.apply(rootApp, [appName].concat(regionArgs))) {
+              rootApp.instantiateApp.apply(rootApp, [appName].concat(regionArgs));
             }
 
-            var widgetInstance = rootApp.getWidgetInstance.apply(rootApp, [widgetName].concat(regionArgs));
-            if (widgetInstance) {
-              _this.sendProps(widgetInstance, _this.props);
+            var appInstance = rootApp.getAppInstance.apply(rootApp, [appName].concat(regionArgs));
+            if (appInstance) {
+              _this.sendProps(appInstance, _this.props);
             }
@@ -341,7 +401,7 @@
               listForRendering: _this.state.listForRendering.concat({
-                name: widgetName,
-                weight: widgetWeight,
-                instance: widgetInstance,
-                multi: widgetMulti,
-                Component: (0, _getMountableComponent2.default)(widgetInstance)
+                name: appName,
+                weight: appWeight,
+                instance: appInstance,
+                multi: multi,
+                Component: (0, _getMountableComponent2.default)(appInstance)
               }).sort(function (a, b) {
@@ -359,4 +419,4 @@ return a.weight - b.weight;
   },
-  sendProps: function sendProps(widgetInstance, props) {
-    var regionService = widgetInstance.get(widgetInstance.options.providerNames.region);
+  sendProps: function sendProps(appInstance, props) {
+    var regionService = appInstance.get(appInstance.options.providerNames.region);
 
@@ -389,3 +449,3 @@ if (!regionService) {
       }).forEach(function (item) {
-        _this3.rootApp.destroyWidget(item.name, _this3.props.name, _this3.props.uniqueKey);
+        _this3.rootApp.destroyApp(item.name, _this3.props.name, _this3.props.uniqueKey);
       });
@@ -410,3 +470,3 @@ }
 
-        return _react2.default.createElement(Component, { key: 'widget-' + name });
+        return _react2.default.createElement(Component, { key: 'app-' + name });
       })
@@ -421,3 +481,3 @@ );
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -489,61 +549,2 @@
 /***/ }),
-/* 8 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _render = __webpack_require__(9);
-
-var _render2 = _interopRequireDefault(_render);
-
-var _streamProps = __webpack_require__(11);
-
-var _streamProps2 = _interopRequireDefault(_streamProps);
-
-var _isObservable = __webpack_require__(4);
-
-var _isObservable2 = _interopRequireDefault(_isObservable);
-
-var _getMountableComponent = __webpack_require__(3);
-
-var _getMountableComponent2 = _interopRequireDefault(_getMountableComponent);
-
-var _observe = __webpack_require__(7);
-
-var _observe2 = _interopRequireDefault(_observe);
-
-var _Region = __webpack_require__(6);
-
-var _Region2 = _interopRequireDefault(_Region);
-
-var _Provider = __webpack_require__(2);
-
-var _Provider2 = _interopRequireDefault(_Provider);
-
-var _Region3 = __webpack_require__(10);
-
-var _Region4 = _interopRequireDefault(_Region3);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = {
-  render: _render2.default,
-  streamProps: _streamProps2.default,
-  isObservable: _isObservable2.default,
-
-  getMountableComponent: _getMountableComponent2.default,
-  observe: _observe2.default,
-  Region: _Region2.default,
-  Provider: _Provider2.default,
-
-  RegionService: _Region4.default
-};
-module.exports = exports['default'];
-
-/***/ }),
 /* 9 */
@@ -568,3 +569,3 @@ /***/ (function(module, exports, __webpack_require__) {
 
-var _ = __webpack_require__(8);
+var _ = __webpack_require__(5);
 
@@ -657,3 +658,3 @@ var _2 = _interopRequireDefault(_);
 
-var _lodash = __webpack_require__(5);
+var _lodash = __webpack_require__(6);
 
@@ -660,0 +661,0 @@ var _lodash2 = _interopRequireDefault(_lodash);

dist/frint-react.min.js

@@ -1,1 +0,1 @@
-this.FrintReact=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=8)}([function(e,t){!function(){e.exports=this.React}()},function(e,t){!function(){e.exports=this.Rx}()},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(0),s=function(e){function t(e,n){r(this,t);var i=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.app=e.app,i}return i(t,e),u(t,[{key:"getChildContext",value:function(){return{app:this.app}}}]),u(t,[{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);s.propTypes={app:a.PropTypes.object.isRequired,children:a.PropTypes.element.isRequired},s.childContextTypes={app:a.PropTypes.object.isRequired},t.default=s,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=e.get("component"),n={app:e},r=function(e){return u.default.createElement(s.default,n,u.default.createElement(t,e))};return function(e){return u.default.createElement(r,e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(2),s=r(a);e.exports=t.default},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.subscribe||"function"!=typeof e.map||"function"!=typeof e.filter)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t){!function(){e.exports=this._}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),i=r(o),u=n(0),a=r(u),s=n(3),c=r(s);t.default=a.default.createClass({displayName:"Region",propTypes:{name:u.PropTypes.string.isRequired,uniqueKey:u.PropTypes.string,data:u.PropTypes.any},getInitialState:function(){return{list:[],listForRendering:[]}},shouldComponentUpdate:function(e,t){var n=!i.default.isEqual(this.props,e);if(!n){var r=t.listForRendering;n=n||this.state.listForRendering.length!==r.length,n=n||i.default.zipWith(this.state.listForRendering,r,function(e,t){return e.name===t.name}).some(function(e){return!e})}return n},componentWillMount:function(){var e=this,t=this.context&&this.context.app?this.context.app.getRootApp():window.app;if(t){this.rootApp=t;var n=t.getWidgets$(this.props.name,this.props.uniqueKey);this.subscription=n.subscribe({next:function(n){e.setState({list:n},function(){e.state.list.forEach(function(n){var r=n.name,o=n.weight,i=n.multi,u=e.state.listForRendering.some(function(e){return e.name===r});if(!u){var a=e.props.uniqueKey?[e.props.name,e.props.uniqueKey]:[e.props.name];e.props.uniqueKey&&!t.hasWidgetInstance.apply(t,[r].concat(a))&&t.instantiateWidget.apply(t,[r].concat(a));var s=t.getWidgetInstance.apply(t,[r].concat(a));s&&e.sendProps(s,e.props),e.setState({listForRendering:e.state.listForRendering.concat({name:r,weight:o,instance:s,multi:i,Component:(0,c.default)(s)}).sort(function(e,t){return e.weight-t.weight})})}})})},error:function(t){console.warn('Subscription error for <Region name="'+e.props.name+'" />:',t)}})}},sendProps:function(e,t){var n=e.get(e.options.providerNames.region);n&&n.emit(t)},componentWillReceiveProps:function(e){var t=this;this.state.listForRendering.filter(function(e){return e.instance}).forEach(function(n){return t.sendProps(n.instance,e)})},componentWillUnmount:function(){var e=this;this.subscription&&this.subscription.unsubscribe(),this.rootApp&&this.state.listForRendering.filter(function(e){return e.multi}).forEach(function(t){e.rootApp.destroyWidget(t.name,e.props.name,e.props.uniqueKey)})},render:function(){var e=this.state.listForRendering;return 0===e.length?null:a.default.createElement("div",null,e.map(function(e){var t=e.Component,n=e.name;return a.default.createElement(t,{key:"widget-"+n})}))}}),e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){return function(t){var n=a.default.createClass({displayName:"undefined"!=typeof t.displayName?"observe("+t.displayName+")":"observe",getInitialState:function(){return{computedProps:{}}},componentWillMount:function(){var t=this,n="undefined"!=typeof e?e:function(){return s.Observable.of({})};this.subscription=n(this.context.app).subscribe(function(e){t.setState({computedProps:e})})},componentWillUnmount:function(){this.subscription.unsubscribe()},render:function(){var e=this.state.computedProps;return a.default.createElement(t,i({},e,this.props))}});return n.contextTypes={app:u.PropTypes.object.isRequired},n}}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.default=o;var u=n(0),a=r(u),s=n(1);e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),u=n(11),a=r(u),s=n(4),c=r(s),f=n(3),l=r(f),p=n(7),d=r(p),h=n(6),v=r(h),b=n(2),y=r(b),m=n(10),g=r(m);t.default={render:i.default,streamProps:a.default,isObservable:c.default,getMountableComponent:l.default,observe:d.default,Region:v.default,Provider:y.default,RegionService:g.default},e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=f.default.getMountableComponent(e);return s.default.render(u.default.createElement(n,null),t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(12),s=r(a),c=n(8),f=r(c);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),u=function(){function e(){r(this,e),this.props$=new i.BehaviorSubject({})}return o(e,[{key:"emit",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.props$.next(e)}},{key:"getProps$",value:function(){return this.props$}},{key:"getData$",value:function(){return this.props$.map(function(e){return e.data})}}]),e}();t.default=u,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new v(e)}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=a;var f=n(5),l=r(f),p=n(1),d=n(4),h=r(d),v=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u(this,e),this._observables=[p.Observable.of(t)]}return c(e,[{key:"_push",value:function(e){this._observables.push(e)}},{key:"set",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"string"==typeof e?this.setKey(e,n[0]):l.default.isPlainObject(e)?this.setPlainObject(e):(0,h.default)(e)?this.setObservable.apply(this,[e].concat(n)):this}},{key:"setKey",value:function(e,t){return this._push(p.Observable.of(i({},e,t))),this}},{key:"setPlainObject",value:function(e){return this._push(p.Observable.of(e)),this}},{key:"setObservable",value:function(e){for(var t=e,n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.forEach(function(e){t=t.concatMap(function(t){var n=e(t);return(0,h.default)(n)?n:p.Observable.of(n)})}),this._push(t),this}},{key:"setDispatch",value:function(e,t){var n={};return Object.keys(e).forEach(function(r){var o=e[r];n[r]=function(){return t.dispatch(o.apply(void 0,arguments))}}),this._push(p.Observable.of(n)),this}},{key:"get$",value:function(){return p.Observable.merge.apply(p.Observable,o(this._observables)).scan(function(e,t){return s({},e,t)})}}]),e}();e.exports=t.default},function(e,t){!function(){e.exports=this.ReactDOM}()}]);
+this.FrintReact=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t){!function(){e.exports=this.React}()},function(e,t){!function(){e.exports=this.Rx}()},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(0),s=function(e){function t(e,n){r(this,t);var i=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.app=e.app,i}return i(t,e),u(t,[{key:"getChildContext",value:function(){return{app:this.app}}}]),u(t,[{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);s.propTypes={app:a.PropTypes.object.isRequired,children:a.PropTypes.element.isRequired},s.childContextTypes={app:a.PropTypes.object.isRequired},t.default=s,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=e.get("component"),n={app:e},r=function(e){return u.default.createElement(s.default,n,u.default.createElement(t,e))};return function(e){return u.default.createElement(r,e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(2),s=r(a);e.exports=t.default},function(e,t,n){"use strict";function r(e){return!(!e||"function"!=typeof e.subscribe||"function"!=typeof e.map||"function"!=typeof e.filter)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),u=n(11),a=r(u),s=n(4),c=r(s),l=n(3),f=r(l),p=n(8),d=r(p),h=n(7),v=r(h),b=n(2),y=r(b),m=n(10),g=r(m);t.default={render:i.default,streamProps:a.default,isObservable:c.default,getMountableComponent:f.default,observe:d.default,Region:v.default,Provider:y.default,RegionService:g.default},e.exports=t.default},function(e,t){!function(){e.exports=this._}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(6),i=r(o),u=n(0),a=r(u),s=n(3),c=r(s);t.default=a.default.createClass({displayName:"Region",propTypes:{name:u.PropTypes.string.isRequired,uniqueKey:u.PropTypes.string,data:u.PropTypes.any},getInitialState:function(){return{list:[],listForRendering:[]}},shouldComponentUpdate:function(e,t){var n=!i.default.isEqual(this.props,e);if(!n){var r=t.listForRendering;n=n||this.state.listForRendering.length!==r.length,n=n||i.default.zipWith(this.state.listForRendering,r,function(e,t){return e.name===t.name}).some(function(e){return!e})}return n},componentWillMount:function(){var e=this,t=this.context&&this.context.app?this.context.app.getRootApp():window.app;if(t){this.rootApp=t;var n=t.getApps$(this.props.name,this.props.uniqueKey);this.subscription=n.subscribe({next:function(n){e.setState({list:n},function(){e.state.list.forEach(function(n){var r=n.name,o=n.weight,i=n.multi;if(!e.state.listForRendering.some(function(e){return e.name===r})){var u=e.props.uniqueKey?[e.props.name,e.props.uniqueKey]:[e.props.name];e.props.uniqueKey&&!t.hasAppInstance.apply(t,[r].concat(u))&&t.instantiateApp.apply(t,[r].concat(u));var a=t.getAppInstance.apply(t,[r].concat(u));a&&e.sendProps(a,e.props),e.setState({listForRendering:e.state.listForRendering.concat({name:r,weight:o,instance:a,multi:i,Component:(0,c.default)(a)}).sort(function(e,t){return e.weight-t.weight})})}})})},error:function(t){console.warn('Subscription error for <Region name="'+e.props.name+'" />:',t)}})}},sendProps:function(e,t){var n=e.get(e.options.providerNames.region);n&&n.emit(t)},componentWillReceiveProps:function(e){var t=this;this.state.listForRendering.filter(function(e){return e.instance}).forEach(function(n){return t.sendProps(n.instance,e)})},componentWillUnmount:function(){var e=this;this.subscription&&this.subscription.unsubscribe(),this.rootApp&&this.state.listForRendering.filter(function(e){return e.multi}).forEach(function(t){e.rootApp.destroyApp(t.name,e.props.name,e.props.uniqueKey)})},render:function(){var e=this.state.listForRendering;return 0===e.length?null:a.default.createElement("div",null,e.map(function(e){var t=e.Component,n=e.name;return a.default.createElement(t,{key:"app-"+n})}))}}),e.exports=t.default},function(e,t,n){"use strict";function r(e){return function(t){var n=u.default.createClass({displayName:void 0!==t.displayName?"observe("+t.displayName+")":"observe",getInitialState:function(){return{computedProps:{}}},componentWillMount:function(){var t=this,n=void 0!==e?e:function(){return a.Observable.of({})};this.subscription=n(this.context.app).subscribe(function(e){t.setState({computedProps:e})})},componentWillUnmount:function(){this.subscription.unsubscribe()},render:function(){var e=this.state.computedProps;return u.default.createElement(t,o({},e,this.props))}});return n.contextTypes={app:i.PropTypes.object.isRequired},n}}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.default=r;var i=n(0),u=function(e){return e&&e.__esModule?e:{default:e}}(i),a=n(1);e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=l.default.getMountableComponent(e);return s.default.render(u.default.createElement(n,null),t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var i=n(0),u=r(i),a=n(12),s=r(a),c=n(5),l=r(c);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),u=function(){function e(){r(this,e),this.props$=new i.BehaviorSubject({})}return o(e,[{key:"emit",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.props$.next(e)}},{key:"getProps$",value:function(){return this.props$}},{key:"getData$",value:function(){return this.props$.map(function(e){return e.data})}}]),e}();t.default=u,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new v(e)}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();t.default=a;var l=n(6),f=r(l),p=n(1),d=n(4),h=r(d),v=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};u(this,e),this._observables=[p.Observable.of(t)]}return c(e,[{key:"_push",value:function(e){this._observables.push(e)}},{key:"set",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"string"==typeof e?this.setKey(e,n[0]):f.default.isPlainObject(e)?this.setPlainObject(e):(0,h.default)(e)?this.setObservable.apply(this,[e].concat(n)):this}},{key:"setKey",value:function(e,t){return this._push(p.Observable.of(i({},e,t))),this}},{key:"setPlainObject",value:function(e){return this._push(p.Observable.of(e)),this}},{key:"setObservable",value:function(e){for(var t=e,n=arguments.length,r=Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.forEach(function(e){t=t.concatMap(function(t){var n=e(t);return(0,h.default)(n)?n:p.Observable.of(n)})}),this._push(t),this}},{key:"setDispatch",value:function(e,t){var n={};return Object.keys(e).forEach(function(r){var o=e[r];n[r]=function(){return t.dispatch(o.apply(void 0,arguments))}}),this._push(p.Observable.of(n)),this}},{key:"get$",value:function(){return p.Observable.merge.apply(p.Observable,o(this._observables)).scan(function(e,t){return s({},e,t)})}}]),e}();e.exports=t.default},function(e,t){!function(){e.exports=this.ReactDOM}()}]);

lib/components/Region.js

@@ -32,3 +32,3 @@ 'use strict';
     return {
-      list: [], // array of widgets ==> { name, instance }
+      list: [], // array of apps ==> { name, instance }
       listForRendering: [] // array of {name, Component} objects
@@ -42,3 +42,3 @@ };
    * Since we are calling setState multiple times, we need to make sure that only when
-   * the list of widgets to render, i.e. this.state.listForRendering, is changed should
+   * the list of apps to render, i.e. this.state.listForRendering, is changed should
    * trigger a re-render of the region component.
@@ -74,5 +74,5 @@ * @param  {Object}  nextProps  the next set of props
     this.rootApp = rootApp;
-    var widgets$ = rootApp.getWidgets$(this.props.name, this.props.uniqueKey);
+    var apps$ = rootApp.getApps$(this.props.name, this.props.uniqueKey);
 
-    this.subscription = widgets$.subscribe({
+    this.subscription = apps$.subscribe({
       next: function next(list) {
@@ -83,7 +83,8 @@ _this.setState({
           _this.state.list.forEach(function (item) {
-            var widgetName = item.name;
-            var widgetWeight = item.weight;
-            var widgetMulti = item.multi;
+            var appName = item.name,
+                appWeight = item.weight,
+                multi = item.multi;
+
             var existsInState = _this.state.listForRendering.some(function (w) {
-              return w.name === widgetName;
+              return w.name === appName;
             });
@@ -99,9 +100,9 @@
 
-            if (_this.props.uniqueKey && !rootApp.hasWidgetInstance.apply(rootApp, [widgetName].concat(regionArgs))) {
-              rootApp.instantiateWidget.apply(rootApp, [widgetName].concat(regionArgs));
+            if (_this.props.uniqueKey && !rootApp.hasAppInstance.apply(rootApp, [appName].concat(regionArgs))) {
+              rootApp.instantiateApp.apply(rootApp, [appName].concat(regionArgs));
             }
 
-            var widgetInstance = rootApp.getWidgetInstance.apply(rootApp, [widgetName].concat(regionArgs));
-            if (widgetInstance) {
-              _this.sendProps(widgetInstance, _this.props);
+            var appInstance = rootApp.getAppInstance.apply(rootApp, [appName].concat(regionArgs));
+            if (appInstance) {
+              _this.sendProps(appInstance, _this.props);
             }
@@ -111,7 +112,7 @@
               listForRendering: _this.state.listForRendering.concat({
-                name: widgetName,
-                weight: widgetWeight,
-                instance: widgetInstance,
-                multi: widgetMulti,
-                Component: (0, _getMountableComponent2.default)(widgetInstance)
+                name: appName,
+                weight: appWeight,
+                instance: appInstance,
+                multi: multi,
+                Component: (0, _getMountableComponent2.default)(appInstance)
               }).sort(function (a, b) {
@@ -129,4 +130,4 @@ return a.weight - b.weight;
   },
-  sendProps: function sendProps(widgetInstance, props) {
-    var regionService = widgetInstance.get(widgetInstance.options.providerNames.region);
+  sendProps: function sendProps(appInstance, props) {
+    var regionService = appInstance.get(appInstance.options.providerNames.region);
 
@@ -159,3 +160,3 @@ if (!regionService) {
       }).forEach(function (item) {
-        _this3.rootApp.destroyWidget(item.name, _this3.props.name, _this3.props.uniqueKey);
+        _this3.rootApp.destroyApp(item.name, _this3.props.name, _this3.props.uniqueKey);
       });
@@ -180,3 +181,3 @@ }
 
-        return _react2.default.createElement(Component, { key: 'widget-' + name });
+        return _react2.default.createElement(Component, { key: 'app-' + name });
       })
@@ -183,0 +184,0 @@ );

lib/components/Region.spec.js

@@ -73,3 +73,3 @@ 'use strict';
 
-  it('renders widgets with weighted ordering', function () {
+  it('renders apps with weighted ordering', function () {
     resetDOM();
@@ -93,5 +93,5 @@
 
-    // widgets
-    var Widget1Component = _react2.default.createClass({
-      displayName: 'Widget1Component',
+    // apps
+    var App1Component = _react2.default.createClass({
+      displayName: 'App1Component',
       render: function render() {
@@ -101,13 +101,13 @@ return _react2.default.createElement(
           null,
-          'Widget 1'
+          'App 1'
         );
       }
     });
-    var Widget1 = (0, _frint.createApp)({
-      name: 'Widget1',
-      providers: [{ name: 'component', useValue: Widget1Component }]
+    var App1 = (0, _frint.createApp)({
+      name: 'App1',
+      providers: [{ name: 'component', useValue: App1Component }]
     });
 
-    var Widget2Component = _react2.default.createClass({
-      displayName: 'Widget2Component',
+    var App2Component = _react2.default.createClass({
+      displayName: 'App2Component',
       render: function render() {
@@ -117,9 +117,9 @@ return _react2.default.createElement(
           null,
-          'Widget 2'
+          'App 2'
         );
       }
     });
-    var Widget2 = (0, _frint.createApp)({
-      name: 'Widget2',
-      providers: [{ name: 'component', useValue: Widget2Component }]
+    var App2 = (0, _frint.createApp)({
+      name: 'App2',
+      providers: [{ name: 'component', useValue: App2Component }]
     });
@@ -131,8 +131,8 @@
 
-    // register widgets
-    window.app.registerWidget(Widget1, {
+    // register apps
+    window.app.registerApp(App1, {
       regions: ['sidebar'],
       weight: 10
     });
-    window.app.registerWidget(Widget2, {
+    window.app.registerApp(App2, {
       regions: ['sidebar'],
@@ -144,7 +144,7 @@ weight: 5
     var paragraphs = document.querySelectorAll('p'); // @TODO: enzyme can be used?
-    (0, _chai.expect)(paragraphs[0].innerHTML).to.equal('Widget 2');
-    (0, _chai.expect)(paragraphs[1].innerHTML).to.equal('Widget 1');
+    (0, _chai.expect)(paragraphs[0].innerHTML).to.equal('App 2');
+    (0, _chai.expect)(paragraphs[1].innerHTML).to.equal('App 1');
   });
 
-  it('warns when widgets subscription emits an error', function () {
+  it('warns when apps subscription emits an error', function () {
     // root
@@ -170,3 +170,3 @@ var RootComponent = _react2.default.createClass({
     var subject$ = new _rxjs.Subject();
-    window.app.getWidgets$ = function getWidgets$() {
+    window.app.getApps$ = function getApps$() {
       return subject$;
@@ -185,3 +185,3 @@ };
 
-  it('renders single and multi-instance widgets', function () {
+  it('renders single and multi-instance apps', function () {
     // root
@@ -228,18 +228,18 @@ var todos = [{ id: '1', title: 'First todo' }, { id: '2', title: 'Second todo' }, { id: '3', title: 'Third todo' }];
 
-    // widgets
-    var Widget1Component = _react2.default.createClass({
-      displayName: 'Widget1Component',
+    // apps
+    var App1Component = _react2.default.createClass({
+      displayName: 'App1Component',
       render: function render() {
         return _react2.default.createElement(
           'p',
-          { id: 'widget1-text' },
-          'Hello World from Widget1'
+          { id: 'app1-text' },
+          'Hello World from App1'
         );
       }
     });
-    var Widget1 = (0, _frint.createApp)({
-      name: 'Widget1',
-      providers: [{ name: 'component', useValue: Widget1Component }]
+    var App1 = (0, _frint.createApp)({
+      name: 'App1',
+      providers: [{ name: 'component', useValue: App1Component }]
     });
-    var Widget2Component = (0, _observe2.default)(function (app) {
+    var App2Component = (0, _observe2.default)(function (app) {
       return (0, _streamProps2.default)().set(app.get('region').getData$(), function (data) {
@@ -249,8 +249,8 @@ return { todo: data.todo };
     })(_react2.default.createClass({
-      displayName: 'Widget2Component',
+      displayName: 'App2Component',
       render: function render() {
         return _react2.default.createElement(
           'p',
-          { className: 'widget2-text' },
-          'Hello World from Widget2 - ',
+          { className: 'app2-text' },
+          'Hello World from App2 - ',
           this.props.todo.title
@@ -260,5 +260,5 @@ );
     }));
-    var Widget2 = (0, _frint.createApp)({
-      name: 'Widget2',
-      providers: [{ name: 'component', useValue: Widget2Component }, { name: 'region', useClass: _Region4.default }]
+    var App2 = (0, _frint.createApp)({
+      name: 'App2',
+      providers: [{ name: 'component', useValue: App2Component }, { name: 'region', useClass: _Region4.default }]
     });
@@ -271,8 +271,8 @@
 
-    // register widget
-    window.app.registerWidget(Widget1, {
+    // register apps
+    window.app.registerApp(App1, {
       regions: ['sidebar'],
       weight: 0
     });
-    window.app.registerWidget(Widget2, {
+    window.app.registerApp(App2, {
       regions: ['todo-item'],
@@ -283,9 +283,9 @@ weight: 1,
 
-    // verify single instance widget
-    (0, _chai.expect)(document.getElementById('widget1-text').innerHTML).to.equal('Hello World from Widget1');
+    // verify single instance app
+    (0, _chai.expect)(document.getElementById('app1-text').innerHTML).to.equal('Hello World from App1');
 
-    // verify multi instance widget
-    var elements = _lodash2.default.toArray(document.getElementsByClassName('widget2-text'));
+    // verify multi instance app
+    var elements = _lodash2.default.toArray(document.getElementsByClassName('app2-text'));
     elements.forEach(function (el, index) {
-      (0, _chai.expect)(el.innerHTML).to.contain('Hello World from Widget2 - ');
+      (0, _chai.expect)(el.innerHTML).to.contain('Hello World from App2 - ');
       (0, _chai.expect)(el.innerHTML).to.contain(todos[index].title);
@@ -303,6 +303,6 @@ });
     _reactDom2.default.unmountComponentAtNode(document.getElementById('root'));
-    (0, _chai.expect)(_lodash2.default.toArray(document.getElementsByClassName('widget2-text')).length).to.equal(0);
+    (0, _chai.expect)(_lodash2.default.toArray(document.getElementsByClassName('app2-text')).length).to.equal(0);
   });
 
-  it('calls beforeDestroy when unmounting multi-instance widgets', function () {
+  it('calls beforeDestroy when unmounting multi-instance apps', function () {
     // root
@@ -349,4 +349,4 @@ var todos = [{ id: '1', title: 'First todo' }];
 
-    // widget
-    var WidgetComponent = (0, _observe2.default)(function (app) {
+    // app
+    var AppComponent = (0, _observe2.default)(function (app) {
       return (0, _streamProps2.default)().set(app.get('region').getData$(), function (data) {
@@ -356,8 +356,8 @@ return { todo: data.todo };
     })(_react2.default.createClass({
-      displayName: 'WidgetComponent',
+      displayName: 'AppComponent',
       render: function render() {
         return _react2.default.createElement(
           'p',
-          { className: 'widget-text' },
-          'Hello World from Widget - ',
+          { className: 'app-text' },
+          'Hello World from App - ',
           this.props.todo.title
@@ -368,8 +368,8 @@ );
     var beforeDestroyCalled = false;
-    var Widget = (0, _frint.createApp)({
-      name: 'Widget',
+    var App = (0, _frint.createApp)({
+      name: 'App',
       beforeDestroy: function beforeDestroy() {
         beforeDestroyCalled = true;
       },
-      providers: [{ name: 'component', useValue: WidgetComponent }, { name: 'region', useClass: _Region4.default }]
+      providers: [{ name: 'component', useValue: AppComponent }, { name: 'region', useClass: _Region4.default }]
     });
@@ -382,4 +382,4 @@
 
-    // register widget
-    window.app.registerWidget(Widget, {
+    // register app
+    window.app.registerApp(App, {
       regions: ['todo-item'],
@@ -389,6 +389,6 @@ multi: true
 
-    // verify multi instance widget
-    var elements = _lodash2.default.toArray(document.getElementsByClassName('widget-text'));
+    // verify multi instance app
+    var elements = _lodash2.default.toArray(document.getElementsByClassName('app-text'));
     elements.forEach(function (el, index) {
-      (0, _chai.expect)(el.innerHTML).to.contain('Hello World from Widget - ');
+      (0, _chai.expect)(el.innerHTML).to.contain('Hello World from App - ');
       (0, _chai.expect)(el.innerHTML).to.contain(todos[index].title);
@@ -398,3 +398,3 @@ });
     // rootApp should have the instance
-    (0, _chai.expect)(window.app.getWidgetInstance('Widget', 'todo-item', 'todo-item-1')).to.not.equal(null);
+    (0, _chai.expect)(window.app.getAppInstance('App', 'todo-item', 'todo-item-1')).to.not.equal(null);
 
@@ -404,3 +404,3 @@ // change in props
     rootComponentInstance.forceUpdate();
-    var updatedElements = _lodash2.default.toArray(document.getElementsByClassName('widget-text'));
+    var updatedElements = _lodash2.default.toArray(document.getElementsByClassName('app-text'));
     (0, _chai.expect)(updatedElements.length).to.equal(0);
@@ -412,4 +412,4 @@
     // rootApp should not have the instance any more
-    (0, _chai.expect)(window.app.getWidgetInstance('Widget', 'todo-item', 'todo-item-1')).to.equal(null);
+    (0, _chai.expect)(window.app.getAppInstance('App', 'todo-item', 'todo-item-1')).to.equal(null);
   });
 });

package.json

 {
   "name": "frint-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React package for Frint",
@@ -35,3 +35,3 @@ "main": "lib/index.js",
   "devDependencies": {
-    "frint": "^1.1.0",
+    "frint": "^1.2.0",
     "frint-test-utils": "^1.0.0",
@@ -38,0 +38,0 @@ "react": "^0.14.8",

README.md

@@ -16,3 +16,3 @@ # frint-react
   - [Observing components](#observing-components)
-  - [Multi-instance Widgets](#multi-instance-widgets)
+  - [Multi-instance Apps](#multi-instance-apps)
 - [API](#api)
@@ -130,3 +130,3 @@ - [render](#render)
 
-We use the concept of regions for defining areas in our Components (either in a Root App or a Widget), where other Widgets can load themselves in.
+We use the concept of regions for defining areas in our Components, where other Apps can load themselves in.
 
@@ -152,3 +152,3 @@ For example, imagine the Root component of our Root App above, we can define a Region named `sidebar` as follows:
 
-That's just defining the Region only. Let's now create a Widget, and assign it to the `sidebar` region:
+That's just defining the Region only. Let's now create an App, and assign it to the `sidebar` region:
 
@@ -159,14 +159,14 @@
 
-const WidgetComponent = React.createClass({
+const AppComponent = React.createClass({
   render() {
-    return <p>I am Widget</p>;
+    return <p>I am App</p>;
   }
 });
 
-const Widget = createApp({
-  name: 'MyWidget',
+const App = createApp({
+  name: 'MyApp',
   providers: [
     {
       name: 'component',
-      useValue: WidgetComponent,
+      useValue: AppComponent,
     }
@@ -177,6 +177,6 @@ ],
 
-Now that we have our Widget defined, we can register it to our Root App:
+Now that we have our App defined, we can register it to our Root App:
 
 ```js
-window.app.registerWidget(Widget, {
+window.app.registerApp(App, {
   regions: ['sidebar'], // name of regions to target
@@ -187,7 +187,7 @@ weight: 10, // the lower the number, the higher they would appear
 
-Now when you refresh your browser, you would notice your Widget being rendered inside the Region `sidebar`.
+Now when you refresh your browser, you would notice your App being rendered inside the Region `sidebar`.
 
 ## Region and data
 
-It is possible that when defining the Region with a name, you would also want to pass some data to it, so that whenever a Widget gets rendered inside it, the Widget would be able to access that data.
+It is possible that when defining the Region with a name, you would also want to pass some data to it, so that whenever an App gets rendered inside it, the App would be able to access that data.
 
@@ -214,5 +214,5 @@ From the above example of `sidebar` Region, imagine us passing some data too via props:
 
-That's only the `Region` component's implementation part. How do we access it from our Widget now?
+That's only the `Region` component's implementation part. How do we access it from our App now?
 
-Enter `RegionService`. This is a Service that we can pass in our Widget's providers list, allowing us to later have access to Region's props.
+Enter `RegionService`. This is a Service that we can pass in our App's providers list, allowing us to later have access to Region's props.
 
@@ -222,8 +222,8 @@ ```js
 
-const Widget = createApp({
-  name: 'MyWidget',
+const App = createApp({
+  name: 'MyApp',
   providers: [
     {
       name: 'component',
-      useValue: WidgetComponent
+      useValue: AppComponent,
     },
@@ -233,3 +233,3 @@ {
       useClass: RegionService, // `useClass` because `RegionService` will be instantiated
-    }
+    },
   ],
@@ -239,7 +239,7 @@ });
 
-Once your Widget is registered and rendered, you can get access to your Widget instance, which can then allow you to deal with Region's props:
+Once your App is registered and rendered, you can get access to your App instance, which can then allow you to deal with Region's props:
 
 ```js
-const myWidget = window.app.getWidgetInstance('MyWidget');
-const region = myWidget.get('region');
+const myApp = window.app.getAppInstance('MyApp');
+const region = myApp.get('region');
 
@@ -254,3 +254,3 @@ // Region's data as an Observable
 
-We will dicuss more in details how to get Region's props in your Widget's components via `observe` in the next section.
+We will discuss more in details how to get Region's props in your App's components via `observe` in the next section.
 
@@ -292,7 +292,7 @@ ## Observing components
 
-In previous example, we showed you how to access Region's data via `RegionService`. Now let's see how we can pass it to your Widget's component too:
+In previous example, we showed you how to access Region's data via `RegionService`. Now let's see how we can pass it to your App's component too:
 
 ```js
-const ObservedWidgetComponent = observe(function (app) {
-  // `app` is your Widget instance
+const ObservedAppComponent = observe(function (app) {
+  // `app` is your App instance
 
@@ -318,6 +318,6 @@ // let's keep our first interval Observable too
     }, {});
-})(WidgetComponent);
+})(AppComponent);
 ```
 
-When your Widget's component renders, latest props will be passed to it in this structure:
+When your App's component renders, latest props will be passed to it in this structure:
 
@@ -367,3 +367,3 @@ ```js
     .get$();
-})(WidgetComponent);
+})(AppComponent);
 ```
@@ -382,5 +382,5 @@
 
-## Multi-instance Widgets
+## Multi-instance Apps
 
-This is a use case where you have multiple instances of Region with the same name mounted in the DOM. And the widgets rendered in them should have their own independent scoped instances too.
+This is a use case where you have multiple instances of Region with the same name mounted in the DOM. And the apps rendered in them should have their own independent scoped instances too.
 
@@ -419,5 +419,5 @@ Think of a scenario where you have a TodoList, and you want a Region defined for each Todo item:
 
-Now we may have a Widget that we want to be rendered in `todo-item` Regions.
+Now we may have an App that we want to be rendered in `todo-item` Regions.
 
-Let's create a Widget, that will receive the `todo` object, and render the title in UPPERCASE format.
+Let's create an App, that will receive the `todo` object, and render the title in UPPERCASE format.
 
@@ -429,3 +429,3 @@ ```js
 
-const WidgetComponent = React.createClass({
+const AppComponent = React.createClass({
   render () {
@@ -438,3 +438,3 @@ const { todo } = this.props;
 
-const ObservedWidgetComponent = observe(function (app) {
+const ObservedAppComponent = observe(function (app) {
   return streamProps()
@@ -446,10 +446,10 @@ .set(
     .get$();
-})(WidgetComponent);
+})(AppComponent);
 
-const Widget = createApp({
-  name: 'MyWidget',
+const App = createApp({
+  name: 'MyApp',
   providers: [
     {
       name: 'component',
-      useValue: ObservedWidgetComponent
+      useValue: ObservedAppComponent
     },
@@ -464,10 +464,10 @@ {
 
-Now comes the part of registering our Widget as a multi-instance widget:
+Now comes the part of registering our App as a multi-instance app:
 
 ```js
-window.app.registerWidget(Widget, {
+window.app.registerApp(App, {
   regions: ['todo-item'],
 
-  // this tells Root App to treat this widget as a multi-instance one
-  multi: true
+  // this tells Root App to treat this app as a multi-instance one
+  multi: true,
 });
@@ -498,3 +498,3 @@ ```
 1. `fn` (`Function`): The function returning an Observable.
-    * The `fn` accepts `app` as an argument, which is the instance of your Root App or Widget in the scope
+    * The `fn` accepts `app` as an argument, which is the instance of your Root App or the App in scope
     * It should return an `Observable`
@@ -515,4 +515,4 @@
 1. `name` (`String`): The name of the Region
-1. `data` (`Object`): Data to be made available to rendered Widgets
-1. `uniqueKey` (`String` [optional]): Used when there are multiple Regions of the same `name`. It prop must be unique and fixed thoughout the whole app.
+1. `data` (`Object`): Data to be made available to rendered App
+1. `uniqueKey` (`String` [optional]): Used when there are multiple Regions of the same `name`. It prop must be unique and fixed throughout the whole app.
 
@@ -523,3 +523,3 @@ ## RegionService
 
-If your Widget wishes to receive data coming from the Region component it rendered in, RegionService is your way to access it.
+If your App wishes to receive data coming from the Region component it rendered in, RegionService is your way to access it.
 
@@ -526,0 +526,0 @@ Methods exposed by the instance:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

98910

decreased by-7.63%

Number of package files

24

decreased by-20%

Lines of code

1884

decreased by-8.19%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes