New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
marionette.toolkit
Advanced tools
marionette.toolkit - npm Package Compare versions
Comparing version 1.0.0 to 2.0.0
| { | ||
| "name": "marionette.toolkit", | ||
| "version": "1.0.0", | ||
| "version": "2.0.0", | ||
| "description": "A collection of opinionated Backbone.Marionette extensions for large scale application architecture.", | ||
@@ -36,6 +36,6 @@ "main": "./dist/marionette.toolkit.js", | ||
| "dependencies": { | ||
| "backbone.marionette": "^2.4.5", | ||
| "backbone": "^1.3.2", | ||
| "backbone.marionette": "^3.0.0", | ||
| "backbone": "^1.3.3", | ||
| "underscore": "^1.8.3" | ||
| } | ||
| } |
@@ -0,1 +1,21 @@ | ||
| #### v2.0.0 | ||
| * `App` | ||
| * The `App` now extends `Marionette.Application` | ||
| * **Breaking Changes:** | ||
| * Move `initState` from `App` constructor to `start` | ||
| * Remove `restartState` functionality | ||
| * Add `getInitState` functionality to allow user to override and modify state on App `start` | ||
| * Remove `isDestroyed` functionality and `isDestroyed` flag as this is now supported in `Marionette.Application` | ||
| * Allow user to pass in `StateModel` during `App` initialization via `ClassOptions` | ||
| * `Component` | ||
| * ViewClass now uses `Marionette.View` instead of deprecated `Marionette.ItemView` | ||
| * Add `getRegion` functionality | ||
| * `StateMixin` | ||
| * Now uses `unbindEvents` instead of `unbindEntityEvents` | ||
| * `ChildAppsMixin` | ||
| * Add `startChildApp`/`stopChildApp` functionality | ||
| * Dependency | ||
| * Update and hard-set various dependencies, including Marionette, Backbone, and underscore | ||
| #### v1.0.0 | ||
@@ -2,0 +22,0 @@ |
| /** | ||
| * marionette.toolkit - A collection of opinionated Backbone.Marionette extensions for large scale application architecture. | ||
| * @version v1.0.0 | ||
| * @version v2.0.0 | ||
| * @link https://github.com/RoundingWellOS/marionette.toolkit | ||
@@ -71,3 +71,3 @@ * @license MIT | ||
| this.unbindEntityEvents(this._stateModel); | ||
| this.unbindEvents(this._stateModel); | ||
| this._stateModel.stopListening(); | ||
@@ -86,3 +86,3 @@ this.off('destroy', this._destroyState); | ||
| _setEventHandlers: function _setEventHandlers() { | ||
| this.bindEntityEvents(this._stateModel, _$1.result(this, 'stateEvents')); | ||
| this.bindEvents(this._stateModel, _$1.result(this, 'stateEvents')); | ||
@@ -204,3 +204,2 @@ this.on('destroy', this._destroyState); | ||
| */ | ||
| _initChildApps: function _initChildApps() { | ||
@@ -274,2 +273,31 @@ var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | ||
| /** | ||
| * Starts `childApp` | ||
| * | ||
| * @param {String} appName - Name of childApp to start | ||
| * @param {object} options - Start options for app | ||
| * @public | ||
| * @method startChildApp | ||
| */ | ||
| startChildApp: function startChildApp(appName, options) { | ||
| this.getChildApp(appName).start(options); | ||
| return this; | ||
| }, | ||
| /** | ||
| * Stops `childApp` | ||
| * | ||
| * @param {String} appName - Name of childApp to stop | ||
| * @public | ||
| * @method stopChildApp | ||
| */ | ||
| stopChildApp: function stopChildApp(appName) { | ||
| this.getChildApp(appName).stop(); | ||
| return this; | ||
| }, | ||
| /** | ||
| * Destroys `childApps` if allowed by child | ||
@@ -529,3 +557,2 @@ * | ||
| */ | ||
| _stopRunningEvents: function _stopRunningEvents() { | ||
@@ -604,6 +631,6 @@ _$1.each(this._runningEvents, function (args) { | ||
| var ClassOptions$1 = ['startWithParent', 'stopWithParent', 'startAfterInitialized', 'preventDestroy']; | ||
| var ClassOptions$1 = ['startWithParent', 'stopWithParent', 'startAfterInitialized', 'preventDestroy', 'StateModel']; | ||
| /** | ||
| * Marionette.Object with an `initialize` / `start` / `stop` / `destroy` lifecycle. | ||
| * Marionette.Application with an `initialize` / `start` / `stop` / `destroy` lifecycle. | ||
| * | ||
@@ -615,3 +642,3 @@ * @public | ||
| */ | ||
| var App = Marionette.Object.extend({ | ||
| var App = Marionette.Application.extend({ | ||
@@ -628,11 +655,2 @@ /** | ||
| /** | ||
| * Internal flag indiciate when `App` has been destroyed | ||
| * | ||
| * @private | ||
| * @type {Boolean} | ||
| * @default false | ||
| */ | ||
| _isDestroyed: false, | ||
| /** | ||
| * Set to true if a parent `App` should not be able to destroy this `App`. | ||
@@ -686,6 +704,5 @@ * | ||
| this.initState(options); | ||
| this._initChildApps(options); | ||
| Marionette.Object.call(this, options); | ||
| Marionette.Application.call(this, options); | ||
@@ -748,5 +765,10 @@ if (_$1.result(this, 'startAfterInitialized')) { | ||
| var opts = _$1.extend({}, options); | ||
| opts.state = this.getInitState(opts.state); | ||
| this.initState(opts); | ||
| this._isRunning = true; | ||
| this.triggerStart(options); | ||
| this.triggerStart(opts); | ||
@@ -758,14 +780,14 @@ return this; | ||
| /** | ||
| * Triggers start event. | ||
| * Override to introduce async start | ||
| * Returns state. | ||
| * Override to extend state | ||
| * | ||
| * @public | ||
| * @method triggerStart | ||
| * @method getInitState | ||
| * @memberOf App | ||
| * @param {Object} [options] - Settings for the App passed through to events | ||
| * @event App#start - passes options | ||
| * @returns | ||
| * @param {Object} [state] - initial app state | ||
| * @returns state | ||
| */ | ||
| triggerStart: function triggerStart(options) { | ||
| this.triggerMethod('start', options); | ||
| getInitState: function getInitState(state) { | ||
| return state; | ||
| }, | ||
@@ -775,17 +797,14 @@ | ||
| /** | ||
| * "Restarts the app" by first stoping app, reinitializing state, and then starting the app again | ||
| * Triggers start event. | ||
| * Override to introduce async start | ||
| * | ||
| * | ||
| * @public | ||
| * @method restart | ||
| * @method triggerStart | ||
| * @memberOf App | ||
| * @param {Object} [options] - Settings for the App passed through to events | ||
| * @returns {App} | ||
| * @event App#start - passes options | ||
| * @returns | ||
| */ | ||
| restart: function restart(options) { | ||
| this.stop(options); | ||
| this.initState(options); | ||
| this.start(options); | ||
| return this; | ||
| triggerStart: function triggerStart(options) { | ||
| this.triggerMethod('start', options); | ||
| }, | ||
@@ -825,15 +844,2 @@ | ||
| /** | ||
| * Gets the value of internal `_isDestroyed` flag | ||
| * | ||
| * @public | ||
| * @method isDestroyed | ||
| * @memberOf App | ||
| * @returns {Boolean} | ||
| */ | ||
| isDestroyed: function isDestroyed() { | ||
| return this._isDestroyed; | ||
| }, | ||
| /** | ||
| * Stops the `App` and sets it destroyed. | ||
@@ -853,4 +859,2 @@ * | ||
| Marionette.Object.prototype.destroy.apply(this, arguments); | ||
| this._isDestroyed = true; | ||
| } | ||
@@ -861,3 +865,3 @@ }); | ||
| var ClassOpions = ['ViewClass', 'viewEventPrefix', 'viewOptions', 'region']; | ||
| var ClassOptions$3 = ['ViewClass', 'viewEventPrefix', 'viewOptions', 'region']; | ||
| /** | ||
@@ -875,6 +879,6 @@ * Reusable Marionette.Object with View management boilerplate | ||
| * The view class to be managed. | ||
| * @type {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} | ||
| * @default Marionette.ItemView | ||
| * @type {Mn.View|Mn.CollectionView} | ||
| * @default Marionette.View | ||
| */ | ||
| ViewClass: Marionette.ItemView, | ||
| ViewClass: Marionette.View, | ||
@@ -901,3 +905,3 @@ /** | ||
| * @param {Object} [options.state] - Attributes to set on the state model. | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView=} [options.ViewClass] | ||
| * @param {Mn.View|Mn.CollectionView} [options.ViewClass] | ||
| * - The view class to be managed. | ||
@@ -913,3 +917,3 @@ * @param {String} [options.viewEventPrefix] | ||
| // Make defaults available to this | ||
| this.mergeOptions(options, ClassOpions); | ||
| this.mergeOptions(options, ClassOptions$3); | ||
@@ -965,2 +969,4 @@ this.initState(options); | ||
| show: function show(viewOptions) { | ||
| var region = this.getRegion(); | ||
| if (this._isShown) { | ||
@@ -973,3 +979,3 @@ throw new Marionette.Error({ | ||
| if (!this.region) { | ||
| if (!region) { | ||
| throw new Marionette.Error({ | ||
@@ -990,3 +996,3 @@ name: 'ComponentRegionError', | ||
| // it destroys the view | ||
| this.listenTo(this.region, 'empty', this._destroy); | ||
| this.listenTo(region, 'empty', this._destroy); | ||
@@ -998,2 +1004,15 @@ return this; | ||
| /** | ||
| * Returns component region. | ||
| * | ||
| * @public | ||
| * @method getRegion | ||
| * @memberOf Component | ||
| * @returns Component region | ||
| */ | ||
| getRegion: function getRegion() { | ||
| return this.region; | ||
| }, | ||
| /** | ||
| * Get the Component ViewClass class. | ||
@@ -1057,3 +1076,3 @@ * Checks if the `ViewClass` is a view class (the common case) | ||
| // Show the view in the region | ||
| this.region.show(view); | ||
| this.getRegion().show(view); | ||
@@ -1076,3 +1095,3 @@ this._shouldDestroy = true; | ||
| * @memberOf Component | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} view - | ||
| * @param {Mn.View|Mn.CollectionView} view - | ||
| * The instantiated ViewClass. | ||
@@ -1120,6 +1139,6 @@ */ | ||
| * @memberOf Component | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} ViewClass - | ||
| * @param {Mn.View|Mn.CollectionView} ViewClass - | ||
| * The view class to instantiate. | ||
| * @param {Object} [viewOptions] - Options to pass to the View | ||
| * @returns {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} | ||
| * @returns {Mn.View|Mn.CollectionView} | ||
| */ | ||
@@ -1154,5 +1173,7 @@ buildView: function buildView(ViewClass, viewOptions) { | ||
| _emptyRegion: function _emptyRegion(options) { | ||
| if (this.region) { | ||
| this.stopListening(this.region, 'empty'); | ||
| this.region.empty(options); | ||
| var region = this.getRegion(); | ||
| if (region) { | ||
| this.stopListening(region, 'empty'); | ||
| region.empty(options); | ||
| } | ||
@@ -1204,3 +1225,3 @@ }, | ||
| Toolkit.VERSION = '1.0.0'; | ||
| Toolkit.VERSION = '2.0.0'; | ||
@@ -1207,0 +1228,0 @@ Toolkit.StateMixin = StateMixin; |
| /** | ||
| * marionette.toolkit - A collection of opinionated Backbone.Marionette extensions for large scale application architecture. | ||
| * @version v1.0.0 | ||
| * @version v2.0.0 | ||
| * @link https://github.com/RoundingWellOS/marionette.toolkit | ||
| * @license MIT | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("backbone.marionette"),require("underscore"),require("backbone")):"function"==typeof define&&define.amd?define(["backbone.marionette","underscore","backbone"],e):(t.Marionette=t.Marionette||{},t.Marionette.Toolkit=e(t.Marionette,t._,t.Backbone))}(this,function(t,e,i){"use strict";t="default"in t?t["default"]:t,e="default"in e?e["default"]:e,i="default"in i?i["default"]:i;var n=["StateModel","stateEvents"],s={StateModel:i.Model,initState:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.mergeOptions(t,n),this._removeEventHandlers();var e=this._getStateModel(t);return this._stateModel=new e(t.state),this._setEventHandlers(),this},_removeEventHandlers:function(){this._stateModel&&(this.unbindEntityEvents(this._stateModel),this._stateModel.stopListening(),this.off("destroy",this._destroyState))},_setEventHandlers:function(){this.bindEntityEvents(this._stateModel,e.result(this,"stateEvents")),this.on("destroy",this._destroyState)},_getStateModel:function(n){if(this.StateModel.prototype instanceof i.Model||this.StateModel===i.Model)return this.StateModel;if(e.isFunction(this.StateModel))return this.StateModel.call(this,n);throw new t.Error({name:"InvalidStateModelError",message:'"StateModel" must be a model class or a function that returns a model class'})},setState:function(){return this._stateModel.set.apply(this._stateModel,arguments)},resetStateDefaults:function(){var t=e.result(this._stateModel,"defaults");return this._stateModel.set(t)},getState:function(t){return t?this._stateModel.get.apply(this._stateModel,arguments):this._stateModel},_destroyState:function(){this._stateModel.stopListening()}},r=["childApps","childAppOptions"],o={_initChildApps:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this._childApps={},this.mergeOptions(t,r);var i=this.childApps;i&&(e.isFunction(i)&&(i=i.call(this,t)),this.addChildApps(i)),this._initListeners()},_initListeners:function(){this.on({start:this._startChildApps,"before:stop":this._stopChildApps,"before:destroy":this._destroyChildApps})},_startChildApps:function(){e.each(this._childApps,function(t){e.result(t,"startWithParent")&&t.start()})},_stopChildApps:function(){e.each(this._childApps,function(t){e.result(t,"stopWithParent")&&t.stop()})},_destroyChildApps:function(){e.each(this._childApps,function(t){e.result(t,"preventDestroy")||t.destroy()})},_buildAppFromObject:function(t){var i=t.AppClass,n=e.omit(t,"AppClass");return this.buildApp(i,n)},_buildApp:function(t,i){return e.isFunction(t)?this.buildApp(t,i):e.isObject(t)?this._buildAppFromObject(t):void 0},buildApp:function(t,i){return i=e.extend({},this.childAppOptions,i),new t(i)},_ensureAppIsUnique:function(e){if(this._childApps[e])throw new t.Error({name:"DuplicateChildAppError",message:'A child App with name "'+e+'" has already been added.'})},addChildApps:function(t){e.each(t,function(t,e){this.addChildApp(e,t)},this)},addChildApp:function(i,n,s){this._ensureAppIsUnique(i);var r=this._buildApp(n,s);if(!r)throw new t.Error({name:"AddChildAppError",message:"App build failed. Incorrect configuration."});return r._name=i,this._childApps[i]=r,r.on("destroy",e.partial(this._removeChildApp,i),this),this.isRunning()&&e.result(r,"startWithParent")&&r.start(),r},getName:function(){return this._name},getChildApps:function(){return e.clone(this._childApps)},getChildApp:function(t){return this._childApps[t]},_removeChildApp:function(t){delete this._childApps[t]._name,delete this._childApps[t]},removeChildApps:function(){var t=this.getChildApps();return e.each(this._childApps,function(t,e){this.removeChildApp(e)},this),t},removeChildApp:function(t,i){i=e.extend({},i);var n=this.getChildApp(t);if(n)return i.preventDestroy||e.result(n,"preventDestroy")?this._removeChildApp(t):n.destroy(),n}},h={_stopRunningEvents:function(){e.each(this._runningEvents,function(t){this.off.apply(this,t)},this)},_stopRunningListeners:function(){e.each(this._runningListeningTo,function(t){this.stopListening.apply(this,t)},this)},on:function(){return this._isRunning&&(this._runningEvents=this._runningEvents||[],this._runningEvents.push(arguments)),t.Object.prototype.on.apply(this,arguments)},listenTo:function(){return this._isRunning&&(this._runningListeningTo=this._runningListeningTo||[],this._runningListeningTo.push(arguments)),t.Object.prototype.listenTo.apply(this,arguments)},listenToOnce:function(){return this._isRunning&&(this._runningListeningTo=this._runningListeningTo||[],this._runningListeningTo.push(arguments)),t.Object.prototype.listenToOnce.apply(this,arguments)}},p=["startWithParent","stopWithParent","startAfterInitialized","preventDestroy"],a=t.Object.extend({_isRunning:!1,_isDestroyed:!1,preventDestroy:!1,startAfterInitialized:!1,startWithParent:!1,stopWithParent:!0,constructor:function(){var i=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];e.bindAll(this,"start","stop"),this.mergeOptions(i,p),this.initState(i),this._initChildApps(i),t.Object.call(this,i),e.result(this,"startAfterInitialized")&&this.start(i)},_ensureAppIsIntact:function(){if(this._isDestroyed)throw new t.Error({name:"AppDestroyedError",message:"App has already been destroyed and cannot be used."})},isRunning:function(){return this._isRunning},start:function(t){return this._ensureAppIsIntact(),this._isRunning?this:(this.triggerMethod("before:start",t),this._isRunning=!0,this.triggerStart(t),this)},triggerStart:function(t){this.triggerMethod("start",t)},restart:function(t){return this.stop(t),this.initState(t),this.start(t),this},stop:function(t){return this._isRunning?(this.triggerMethod("before:stop",t),this._isRunning=!1,this.triggerMethod("stop",t),this._stopRunningListeners(),this._stopRunningEvents(),this):this},isDestroyed:function(){return this._isDestroyed},destroy:function(){this._isDestroyed||(this.stop(),t.Object.prototype.destroy.apply(this,arguments),this._isDestroyed=!0)}});e.extend(a.prototype,s,o,h);var d=["ViewClass","viewEventPrefix","viewOptions","region"],u=t.Object.extend({ViewClass:t.ItemView,viewEventPrefix:"view",viewOptions:{},constructor:function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.mergeOptions(e,d),this.initState(e),t.Object.call(this,e)},_shouldDestroy:!0,showIn:function(t,e){return this.region=t,this.show(e),this},show:function(e){if(this._isShown)throw new t.Error({name:"ComponentShowError",message:"Component has already been shown in a region."});if(!this.region)throw new t.Error({name:"ComponentRegionError",message:"Component has no defined region."});return this.triggerMethod("before:show"),this.renderView(e),this._isShown=!0,this.triggerMethod("show"),this.listenTo(this.region,"empty",this._destroy),this},_getViewClass:function(){var n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],s=this.ViewClass;if(s.prototype instanceof i.View||s===i.View)return s;if(e.isFunction(s))return s.call(this,n);throw new t.Error({name:"InvalidViewClassError",message:'"ViewClass" must be a view class or a function that returns a view class'})},renderView:function(t){var e=this._getViewClass(t),i=this.mixinOptions(t),n=this.buildView(e,i);return this.currentView=n,this._proxyViewEvents(n),this.triggerMethod("before:render:view",n),this._shouldDestroy=!1,this.region.show(n),this._shouldDestroy=!0,this.triggerMethod("render:view",n),this},_proxyViewEvents:function(t){var i=this.viewEventPrefix;t.on("all",function(){var n=e.toArray(arguments),s=n[0];n[0]=i+":"+s,n.splice(1,0,t),this.triggerMethod.apply(this,n)},this)},mixinOptions:function(t){var i=e.result(this,"viewOptions");return e.extend({state:this.getState().attributes},i,t)},buildView:function(t,e){return new t(e)},_destroy:function(){this._shouldDestroy&&t.Object.prototype.destroy.apply(this,arguments)},_emptyRegion:function(t){this.region&&(this.stopListening(this.region,"empty"),this.region.empty(t))},destroy:function(t){this._emptyRegion(t),this._shouldDestroy=!0,this._destroy(t)}});e.extend(u.prototype,s);var l=t.Toolkit,c=t.Toolkit={};return c.noConflict=function(){return t.Toolkit=l,this},c.MixinState=function(t){var e=s;t.prototype.StateModel&&(e=_.omit(s,"StateModel")),_.extend(t.prototype,e)},c.VERSION="1.0.0",c.StateMixin=s,c.App=a,c.Component=u,c}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("backbone.marionette"),require("underscore"),require("backbone")):"function"==typeof define&&define.amd?define(["backbone.marionette","underscore","backbone"],e):(t.Marionette=t.Marionette||{},t.Marionette.Toolkit=e(t.Marionette,t._,t.Backbone))}(this,function(t,e,i){"use strict";t="default"in t?t.default:t,e="default"in e?e.default:e,i="default"in i?i.default:i;var n=["StateModel","stateEvents"],s={StateModel:i.Model,initState:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.mergeOptions(t,n),this._removeEventHandlers();var e=this._getStateModel(t);return this._stateModel=new e(t.state),this._setEventHandlers(),this},_removeEventHandlers:function(){this._stateModel&&(this.unbindEvents(this._stateModel),this._stateModel.stopListening(),this.off("destroy",this._destroyState))},_setEventHandlers:function(){this.bindEvents(this._stateModel,e.result(this,"stateEvents")),this.on("destroy",this._destroyState)},_getStateModel:function(n){if(this.StateModel.prototype instanceof i.Model||this.StateModel===i.Model)return this.StateModel;if(e.isFunction(this.StateModel))return this.StateModel.call(this,n);throw new t.Error({name:"InvalidStateModelError",message:'"StateModel" must be a model class or a function that returns a model class'})},setState:function(){return this._stateModel.set.apply(this._stateModel,arguments)},resetStateDefaults:function(){var t=e.result(this._stateModel,"defaults");return this._stateModel.set(t)},getState:function(t){return t?this._stateModel.get.apply(this._stateModel,arguments):this._stateModel},_destroyState:function(){this._stateModel.stopListening()}},r=["childApps","childAppOptions"],o={_initChildApps:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this._childApps={},this.mergeOptions(t,r);var i=this.childApps;i&&(e.isFunction(i)&&(i=i.call(this,t)),this.addChildApps(i)),this._initListeners()},_initListeners:function(){this.on({start:this._startChildApps,"before:stop":this._stopChildApps,"before:destroy":this._destroyChildApps})},_startChildApps:function(){e.each(this._childApps,function(t){e.result(t,"startWithParent")&&t.start()})},_stopChildApps:function(){e.each(this._childApps,function(t){e.result(t,"stopWithParent")&&t.stop()})},startChildApp:function(t,e){return this.getChildApp(t).start(e),this},stopChildApp:function(t){return this.getChildApp(t).stop(),this},_destroyChildApps:function(){e.each(this._childApps,function(t){e.result(t,"preventDestroy")||t.destroy()})},_buildAppFromObject:function(t){var i=t.AppClass,n=e.omit(t,"AppClass");return this.buildApp(i,n)},_buildApp:function(t,i){return e.isFunction(t)?this.buildApp(t,i):e.isObject(t)?this._buildAppFromObject(t):void 0},buildApp:function(t,i){return i=e.extend({},this.childAppOptions,i),new t(i)},_ensureAppIsUnique:function(e){if(this._childApps[e])throw new t.Error({name:"DuplicateChildAppError",message:'A child App with name "'+e+'" has already been added.'})},addChildApps:function(t){e.each(t,function(t,e){this.addChildApp(e,t)},this)},addChildApp:function(i,n,s){this._ensureAppIsUnique(i);var r=this._buildApp(n,s);if(!r)throw new t.Error({name:"AddChildAppError",message:"App build failed. Incorrect configuration."});return r._name=i,this._childApps[i]=r,r.on("destroy",e.partial(this._removeChildApp,i),this),this.isRunning()&&e.result(r,"startWithParent")&&r.start(),r},getName:function(){return this._name},getChildApps:function(){return e.clone(this._childApps)},getChildApp:function(t){return this._childApps[t]},_removeChildApp:function(t){delete this._childApps[t]._name,delete this._childApps[t]},removeChildApps:function(){var t=this.getChildApps();return e.each(this._childApps,function(t,e){this.removeChildApp(e)},this),t},removeChildApp:function(t,i){i=e.extend({},i);var n=this.getChildApp(t);if(n)return i.preventDestroy||e.result(n,"preventDestroy")?this._removeChildApp(t):n.destroy(),n}},h={_stopRunningEvents:function(){e.each(this._runningEvents,function(t){this.off.apply(this,t)},this)},_stopRunningListeners:function(){e.each(this._runningListeningTo,function(t){this.stopListening.apply(this,t)},this)},on:function(){return this._isRunning&&(this._runningEvents=this._runningEvents||[],this._runningEvents.push(arguments)),t.Object.prototype.on.apply(this,arguments)},listenTo:function(){return this._isRunning&&(this._runningListeningTo=this._runningListeningTo||[],this._runningListeningTo.push(arguments)),t.Object.prototype.listenTo.apply(this,arguments)},listenToOnce:function(){return this._isRunning&&(this._runningListeningTo=this._runningListeningTo||[],this._runningListeningTo.push(arguments)),t.Object.prototype.listenToOnce.apply(this,arguments)}},p=["startWithParent","stopWithParent","startAfterInitialized","preventDestroy","StateModel"],a=t.Application.extend({_isRunning:!1,preventDestroy:!1,startAfterInitialized:!1,startWithParent:!1,stopWithParent:!0,constructor:function(){var i=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];e.bindAll(this,"start","stop"),this.mergeOptions(i,p),this._initChildApps(i),t.Application.call(this,i),e.result(this,"startAfterInitialized")&&this.start(i)},_ensureAppIsIntact:function(){if(this._isDestroyed)throw new t.Error({name:"AppDestroyedError",message:"App has already been destroyed and cannot be used."})},isRunning:function(){return this._isRunning},start:function(t){if(this._ensureAppIsIntact(),this._isRunning)return this;this.triggerMethod("before:start",t);var i=e.extend({},t);return i.state=this.getInitState(i.state),this.initState(i),this._isRunning=!0,this.triggerStart(i),this},getInitState:function(t){return t},triggerStart:function(t){this.triggerMethod("start",t)},stop:function(t){return this._isRunning?(this.triggerMethod("before:stop",t),this._isRunning=!1,this.triggerMethod("stop",t),this._stopRunningListeners(),this._stopRunningEvents(),this):this},destroy:function(){this._isDestroyed||(this.stop(),t.Object.prototype.destroy.apply(this,arguments))}});e.extend(a.prototype,s,o,h);var d=["ViewClass","viewEventPrefix","viewOptions","region"],u=t.Object.extend({ViewClass:t.View,viewEventPrefix:"view",viewOptions:{},constructor:function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.mergeOptions(e,d),this.initState(e),t.Object.call(this,e)},_shouldDestroy:!0,showIn:function(t,e){return this.region=t,this.show(e),this},show:function(e){var i=this.getRegion();if(this._isShown)throw new t.Error({name:"ComponentShowError",message:"Component has already been shown in a region."});if(!i)throw new t.Error({name:"ComponentRegionError",message:"Component has no defined region."});return this.triggerMethod("before:show"),this.renderView(e),this._isShown=!0,this.triggerMethod("show"),this.listenTo(i,"empty",this._destroy),this},getRegion:function(){return this.region},_getViewClass:function(){var n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],s=this.ViewClass;if(s.prototype instanceof i.View||s===i.View)return s;if(e.isFunction(s))return s.call(this,n);throw new t.Error({name:"InvalidViewClassError",message:'"ViewClass" must be a view class or a function that returns a view class'})},renderView:function(t){var e=this._getViewClass(t),i=this.mixinOptions(t),n=this.buildView(e,i);return this.currentView=n,this._proxyViewEvents(n),this.triggerMethod("before:render:view",n),this._shouldDestroy=!1,this.getRegion().show(n),this._shouldDestroy=!0,this.triggerMethod("render:view",n),this},_proxyViewEvents:function(t){var i=this.viewEventPrefix;t.on("all",function(){var n=e.toArray(arguments),s=n[0];n[0]=i+":"+s,n.splice(1,0,t),this.triggerMethod.apply(this,n)},this)},mixinOptions:function(t){var i=e.result(this,"viewOptions");return e.extend({state:this.getState().attributes},i,t)},buildView:function(t,e){return new t(e)},_destroy:function(){this._shouldDestroy&&t.Object.prototype.destroy.apply(this,arguments)},_emptyRegion:function(t){var e=this.getRegion();e&&(this.stopListening(e,"empty"),e.empty(t))},destroy:function(t){this._emptyRegion(t),this._shouldDestroy=!0,this._destroy(t)}});e.extend(u.prototype,s);var l=t.Toolkit,c=t.Toolkit={};return c.noConflict=function(){return t.Toolkit=l,this},c.MixinState=function(t){var e=s;t.prototype.StateModel&&(e=_.omit(s,"StateModel")),_.extend(t.prototype,e)},c.VERSION="2.0.0",c.StateMixin=s,c.App=a,c.Component=u,c}); | ||
| //# sourceMappingURL=marionette.toolkit.min.js.map |
| # Marionette.Toolkit.App | ||
| `Marionette.Toolkit.App` is an extension of `Marionette.Object`. Its purpose is to provide an object with a `initialize`/`start`/`stop`/`destroy` lifecycle. `App` has several mixins: | ||
| `Marionette.Toolkit.App` is an extension of `Marionette.Application`. Its purpose is to provide an object with a `initialize`/`start`/`stop`/`destroy` lifecycle. `App` has several mixins: | ||
| * [`StateMixin`](./mixins/state.md) to maintain application state. | ||
| * [`EventListernersMixin`](./mixins/event-listeners.md) to bind all events to an `App` while running (and only those) will be remove when stopped. | ||
| * [`EventListenersMixin`](./mixins/event-listeners.md) to bind all events to an `App` while running (and only those) will be remove when stopped. | ||
| * [`ChildAppsMixin`](./mixins/child-apps.md) to manage the addition and removal of child `App`s and relating the child `App` lifecycle with the parent `App` lifecycle. | ||
@@ -17,10 +17,10 @@ | ||
| * [App `start`](#app-start) | ||
| * [App `restart`](#app-restart) | ||
| * [App `stop`](#app-stop) | ||
| * [App `isRunning`](#app-isrunning) | ||
| * [App `destroy`](#app-destroy) | ||
| * [App `isDestroyed`](#app-isdestroyed) | ||
| * [Lifecycle Events](#lifecycle-events) | ||
| * ["before:start" / "start" events](#beforestart--start-events) | ||
| * ["before:stop" / "stop" events](#beforestop--stop-events) | ||
| * [Application State](#application-state) | ||
| * [App `getInitState`](#app-getInitState) | ||
@@ -149,2 +149,4 @@ ## Lifecycle Settings | ||
| Initial state can be passed as an option to `start`. | ||
| ```js | ||
@@ -156,2 +158,3 @@ var myApp = new Marionette.Toolkit.App(); | ||
| options.foo === true; | ||
| this.getState('bar') === 'baz'; | ||
| }); | ||
@@ -162,6 +165,10 @@ | ||
| var initialState = { | ||
| bar: 'baz' | ||
| }; | ||
| // "My App Started!" logged | ||
| myApp.start({ | ||
| foo: true | ||
| foo: true, | ||
| state: initialState | ||
| }); | ||
@@ -176,29 +183,2 @@ | ||
| ### App `restart` | ||
| This method stops the `App`'s running state. | ||
| The `App`'s state is then reinitialized. | ||
| Finally the `App`'s `start` method is triggered. | ||
| Among other options that `restart` accepts, it also takes state settings. | ||
| ```js | ||
| var myApp = new Marionette.Toolkit.App(); | ||
| myApp.start(); | ||
| //Pass state argument | ||
| myApp.restart({ | ||
| state: { | ||
| foo: 'bar' | ||
| } | ||
| }); | ||
| // true | ||
| myApp.isRunning(); | ||
| // bar | ||
| this.getState('foo'); | ||
| ``` | ||
| ### App `stop` | ||
@@ -275,17 +255,2 @@ | ||
| ### App `isDestroyed` | ||
| Returns a Boolean indicating whether or not the `App` is destroyed. Destroyed `App`s cannot be started or used. | ||
| ```js | ||
| var myApp = new Marionette.Toolkit.App(); | ||
| myApp.isDestroyed() === false; | ||
| myApp.destroy(); | ||
| myApp.isDestroyed() === true; | ||
| ``` | ||
| ## Lifecycle Events | ||
@@ -356,1 +321,17 @@ | ||
| ``` | ||
| ## Application State | ||
| Application state can be passed to [App `start`](#app-start) as an option. The state is maintained while the app is running. | ||
| ### App `getInitState` | ||
| Override `getInitState` to modify state object passed into the App constructor. | ||
| ```js | ||
| getInitState(state){ | ||
| const modState = _.extend({}, {foo: 'bar'}, state); | ||
| return return modState; | ||
| } | ||
| ``` |
| # Marionette.Toolkit.Component | ||
| `Marionette.Toolkit.Component` is heavily influenced by **@jfairbank**'s [Marionette.Component](https://github.com/jfairbank/marionette.component). | ||
| It mixes in [`StateMixin`](./mixins/state.md) that manages a view (or views) whose lifecycle is tied to the region it is shown in. | ||
| `Marionette.Toolkit.Component` is heavily influenced by **@jfairbank**'s [Marionette.Component](https://github.com/jfairbank/marionette.component) and is an extension of `Marionette.Application`. It mixes in [`StateMixin`](./mixins/state.md) that manages a view (or views) whose lifecycle is tied to the region it is shown in. | ||
| The Component provides a consistent interface for which to package state-view-logic. | ||
@@ -32,3 +31,3 @@ | ||
| ```js | ||
| var MyComponentView = Marionette.ItemView.extend({ | ||
| var MyComponentView = Marionette.View.extend({ | ||
| template: _.template('<div>Hello Component</div>') | ||
@@ -60,6 +59,6 @@ }); | ||
| a view definition, not an instance. If you do not specify a | ||
| `ViewClass`, a vanilla `Marionette.ItemView` definition will be used. | ||
| `ViewClass`, a vanilla `Marionette.View` definition will be used. | ||
| ```js | ||
| var MyViewClass = Marionette.ItemView.extend({}); | ||
| var MyViewClass = Marionette.View.extend({}); | ||
@@ -76,3 +75,3 @@ Marionette.Toolkit.Component.extend({ | ||
| ```js | ||
| var MyViewClass = Marionette.ItemView.extend({}); | ||
| var MyViewClass = Marionette.View.extend({}); | ||
@@ -84,3 +83,3 @@ Marionette.Toolkit.Component.extend({ | ||
| } | ||
| return Marionette.ItemView; | ||
| return Marionette.View; | ||
| } | ||
@@ -98,3 +97,3 @@ }); | ||
| ```js | ||
| var MyViewClass = Marionette.ItemView.extend({}); | ||
| var MyViewClass = Marionette.View.extend({}); | ||
@@ -141,3 +140,3 @@ Marionette.Toolkit.MixinState(MyViewClass); | ||
| ```js | ||
| var MyView = Marionette.ItemView.extend({ | ||
| var MyView = Marionette.View.extend({ | ||
| initialize: function(options) { | ||
@@ -261,3 +260,3 @@ console.log(options.foo); // => "bar" | ||
| ```js | ||
| var MyItemView = Marionette.ItemView.extend({ | ||
| var MyView = Marionette.View.extend({ | ||
| triggers: { | ||
@@ -270,3 +269,3 @@ 'click button': 'do:something' | ||
| var myComponent = new Marionette.Toolkit.Component(null, { | ||
| ViewClass: MyItemView, | ||
| ViewClass: MyView, | ||
@@ -273,0 +272,0 @@ onViewDoSomething: function(currentView, args*) { |
@@ -17,2 +17,4 @@ # ChildAppsMixin | ||
| * [ChildAppsMixin `removeChildApps`](#childappsmixin-removechildapps) | ||
| * [ChildAppsMixin `startChildApp`](#childappsmixin-startChildApp) | ||
| * [ChildAppsMixin `stopChildApp`](#childappsmixin-stopChildApp) | ||
@@ -226,1 +228,53 @@ ## ChildAppsMixin's Lifecycle Settings | ||
| This will destroy all childApps (that don't have preventDestroy set to true), and remove them. | ||
| ### ChildAppsMixin `startChildApp` | ||
| You can quickly start a specific childApp from an | ||
| App instance by calling the `startChildApp` | ||
| method and passing the childApp name and any options. | ||
| ```js | ||
| var childApps = { | ||
| cA1: Marionette.Toolkit.App.extend({ | ||
| onStart(options) { | ||
| this.mergeOptions(options, ['foo']); | ||
| } | ||
| }) | ||
| }; | ||
| var myApp = new Marionette.Toolkit.App({ childApps: childApps }); | ||
| myApp.startChildApp('cA1', { foo: 'bar' }); | ||
| var childAppInstance = myApp.getChildApp('cA1'); | ||
| // true | ||
| console.log(childAppInstance.isRunning()); | ||
| // bar | ||
| console.log(childAppInstance.getOption('foo')); | ||
| ``` | ||
| Note: The parentApp instance is returned for chaining. | ||
| ### ChildAppsMixin `stopChildApp` | ||
| You can quickly stop a specific childApp from an | ||
| App instance by calling the `stopChildApp` | ||
| method and passing the childApp name. | ||
| ```js | ||
| var myApp = new Marionette.Toolkit.App({ childApps: { cA1: Marionette.Toolkit.App } }); | ||
| myApp.startChildApp('cA1'); | ||
| // true | ||
| console.log(myApp.getChildApp('cA1').isRunning()); | ||
| myApp.stopChildApp('cA1'); | ||
| // false | ||
| console.log(myApp.getChildApp('cA1').isRunning()); | ||
| ``` | ||
| Note: The parentApp instance is returned for chaining. |
@@ -1,4 +0,4 @@ | ||
| # EventListernersMixin | ||
| # EventListenersMixin | ||
| `EventListernersMixin` is a private mixin for [`App`](../app.md). It adds functionality to binds events to the `App` while running and removed (and only those) when the `App` is stopped. | ||
| `EventListenersMixin` is a private mixin for [`App`](../app.md). It adds functionality to binds events to the `App` while running and removed (and only those) when the `App` is stopped. | ||
@@ -5,0 +5,0 @@ ## Documentation Index |
@@ -20,3 +20,3 @@ # Marionette.Toolkit.StateMixin | ||
| While `StateMixin` comes pre-mixined with `Marionette.Toolkit.App` you can extend your own class with `StateMixin` by calling `initState` in your class's `initialize` passing any desired options. | ||
| While `StateMixin` comes pre-mixined with `Marionette.Toolkit.App` and `Marionette.Toolkit.Component`, you can extend your own class with `StateMixin` by calling `initState` in your class's `initialize` passing any desired options. | ||
@@ -81,3 +81,3 @@ ```js | ||
| var MyClass = Marionette.Toolkit.App.extend({ | ||
| var MyClass = Marionette.Object.extend({ | ||
| StateModel: MyStateModel | ||
@@ -95,3 +95,3 @@ | ||
| var MyClass = Marionette.Toolkit.App.extend({ | ||
| var MyClass = Marionette.Object.extend({ | ||
| initialize(options) { | ||
@@ -102,3 +102,5 @@ this.initState(options); | ||
| var myClass = new MyClass(MyStateModel); | ||
| var myClass = new MyClass({ | ||
| StateModel: MyStateModel | ||
| }); | ||
| ``` | ||
@@ -123,2 +125,4 @@ | ||
| #### Passed as Option on Initialization | ||
| Alternatively, you can specify a `StateModel` in the options for | ||
@@ -135,2 +139,24 @@ the `constructor`: | ||
| ### StateMixin's `State` | ||
| Optionally define a `state` attributes object on your class initialization or pass as an option when calling `initState(options)`. | ||
| ```js | ||
| var MyStateModel = Backbone.Model.extend({}); | ||
| var MyClass = Marionette.Object.extend({ | ||
| StateModel: MyStateModel | ||
| initialize(options) { | ||
| this.initState(options); | ||
| } | ||
| }); | ||
| new MyClass({ | ||
| state: { | ||
| foo: 'bar' | ||
| } | ||
| }); | ||
| ``` | ||
| ### StateMixin's `stateEvents` | ||
@@ -137,0 +163,0 @@ |
| { | ||
| "name": "marionette.toolkit", | ||
| "version": "1.0.0", | ||
| "version": "2.0.0", | ||
| "description": "A collection of opinionated Backbone.Marionette extensions for large scale application architecture.", | ||
@@ -35,38 +35,38 @@ "main": "./dist/marionette.toolkit.js", | ||
| "devDependencies": { | ||
| "babel-core": "^6.7.7", | ||
| "babel-eslint": "^6.0.3", | ||
| "babel-polyfill": "^6.7.4", | ||
| "babel-preset-es2015": "^6.6.0", | ||
| "babel-preset-es2015-rollup": "^1.1.1", | ||
| "babel-register": "^6.7.2", | ||
| "backbone": "^1.0.0", | ||
| "backbone.marionette": "^2.1.0", | ||
| "chai": "^2.0.0", | ||
| "del": "^1.1.1", | ||
| "eslint": "^2.8.0", | ||
| "gulp": "^3.8.10", | ||
| "gulp-eslint": "^2.0.0", | ||
| "gulp-file": "^0.2.0", | ||
| "gulp-filter": "^2.0.0", | ||
| "gulp-babel-istanbul": "^1.1.0", | ||
| "gulp-livereload": "^3.4.0", | ||
| "gulp-load-plugins": "^0.8.0", | ||
| "gulp-mocha": "^2.0.0", | ||
| "gulp-notify": "^2.1.0", | ||
| "gulp-plumber": "^0.6.6", | ||
| "gulp-rename": "^1.2.0", | ||
| "gulp-sourcemaps": "^1.3.0", | ||
| "gulp-uglify": "^1.5.3", | ||
| "jquery": "~2.1.1", | ||
| "jsdom": "^8.0.0", | ||
| "mocha": "^2.1.0", | ||
| "rollup": "^0.25.8", | ||
| "rollup-plugin-babel": "^2.4.0", | ||
| "rollup-plugin-commonjs": "^2.2.1", | ||
| "rollup-plugin-json": "^2.0.0", | ||
| "rollup-plugin-multi-entry": "^1.2.0", | ||
| "rollup-plugin-node-resolve": "^1.5.0", | ||
| "sinon": "^1.12.2", | ||
| "sinon-chai": "^2.7.0", | ||
| "underscore": "^1.8.3" | ||
| "babel-core": "6.7.7", | ||
| "babel-eslint": "6.0.3", | ||
| "babel-polyfill": "6.7.4", | ||
| "babel-preset-es2015": "6.6.0", | ||
| "babel-preset-es2015-rollup": "1.1.1", | ||
| "babel-register": "6.7.2", | ||
| "backbone": "1.3.3", | ||
| "backbone.marionette": "3.0.0", | ||
| "chai": "2.0.0", | ||
| "del": "1.1.1", | ||
| "eslint": "2.8.0", | ||
| "gulp": "3.8.10", | ||
| "gulp-eslint": "2.0.0", | ||
| "gulp-file": "0.2.0", | ||
| "gulp-filter": "2.0.0", | ||
| "gulp-babel-istanbul": "1.1.0", | ||
| "gulp-livereload": "3.4.0", | ||
| "gulp-load-plugins": "0.8.0", | ||
| "gulp-mocha": "2.0.0", | ||
| "gulp-notify": "2.1.0", | ||
| "gulp-plumber": "0.6.6", | ||
| "gulp-rename": "1.2.0", | ||
| "gulp-sourcemaps": "1.6.0", | ||
| "gulp-uglify": "2.0.0", | ||
| "jquery": "2.1.1", | ||
| "jsdom": "8.0.0", | ||
| "mocha": "2.1.0", | ||
| "rollup": "0.25.8", | ||
| "rollup-plugin-babel": "2.4.0", | ||
| "rollup-plugin-commonjs": "2.2.1", | ||
| "rollup-plugin-json": "2.0.0", | ||
| "rollup-plugin-multi-entry": "1.2.0", | ||
| "rollup-plugin-node-resolve": "1.5.0", | ||
| "sinon": "1.12.2", | ||
| "sinon-chai": "2.7.0", | ||
| "underscore": "1.8.3" | ||
| }, | ||
@@ -78,6 +78,6 @@ "babelBoilerplateOptions": { | ||
| "peerDependencies": { | ||
| "backbone.marionette": "^2.4.5", | ||
| "backbone": "^1.3.2", | ||
| "underscore": "^1.8.3" | ||
| "backbone.marionette": "3.0.0", | ||
| "backbone": "1.3.3", | ||
| "underscore": "1.8.3" | ||
| } | ||
| } |
@@ -15,13 +15,13 @@ Marionette.Toolkit | ||
| ## Documentation | ||
| [App](./docs/app.md) - An extension of `Marionette.Object`. Its purpose is to provide an object with a `initialize`/`start`/`stop`/`destroy` lifecycle. | ||
| [App](./docs/app.md) - An extension of `Marionette.Application`. Its purpose is to provide an object with a `initialize`/`start`/`stop`/`destroy` lifecycle. | ||
| [Component](./docs/component.md) - Provides a consistent interface for which to package state-view-logic. | ||
| [Component](./docs/component.md) - An extension of `Marionette.Object`. Provides a consistent interface for which to package state-view-logic. | ||
| [Asnyc App start](./docs/async-app-start.md) - How to easily start apps asynchronously. | ||
| [StateMixin](./docs/mixins/state.md) - JavaScript Object with a `Backbone.Model` for keeping state. | ||
| [StateMixin](./docs/mixins/state.md) - JavaScript Object with a `Backbone.Model` for keeping state. Used by both the App and Component but can be applied to any Marionette Class. | ||
| [ChildAppsMixin](./docs/mixins/child-apps.md) - Functionality to add or remove child Apps to a parent App, start apps asynchronously, and connect the child App lifecycle with the parent App lifecycle. | ||
| [EventListernersMixin](./docs/mixins/event-listeners.md) - Binds events to the `App` while running and removed (and only those) when the `App` is stopped. | ||
| [EventListenersMixin](./docs/mixins/event-listeners.md) - Binds events to the `App` while running and removed (and only those) when the `App` is stopped. | ||
@@ -64,14 +64,10 @@ | ||
| Marionette.Toolkit currently requires [Marionette](http://marionettejs.com) 2.2.0+ as it utilizes [`Marionette.Error`](https://github.com/marionettejs/backbone.marionette/blob/v2.2.0/src/marionette.error.js) and extends | ||
| [`Marionette.Object`](https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.object.md) | ||
| Marionette.Toolkit currently requires [Marionette](http://marionettejs.com) 3.0.0+ as it utilizes [`Marionette.Error`](https://github.com/marionettejs/backbone.marionette/blob/v2.2.0/src/marionette.error.js) and extends | ||
| [`Marionette.Application`](https://github.com/marionettejs/backbone.marionette/blob/next/docs/marionette.application.md) | ||
| It's possible this library would work with earlier versions by manually adding `Marionette.Error` and shimming | ||
| `Marionette.Object = Marionette.Controller;` | ||
| This library is tested with Marionette v3.0+ | ||
| Marionette.Toolkit supports IE9+ and modern browsers. | ||
| This library is tested with v2.2+ and a mix of underscore and lodash versions. | ||
| Marionette.Toolkit supports IE8+ and modern browsers. | ||
| ## How to Contribute | ||
@@ -94,2 +90,2 @@ | ||
| This library is © 2015 RoundingWell. Distributed under MIT license. | ||
| This library is © 2016 RoundingWell. Distributed under MIT license. |
@@ -11,7 +11,8 @@ import _ from 'underscore'; | ||
| 'startAfterInitialized', | ||
| 'preventDestroy' | ||
| 'preventDestroy', | ||
| 'StateModel' | ||
| ]; | ||
| /** | ||
| * Marionette.Object with an `initialize` / `start` / `stop` / `destroy` lifecycle. | ||
| * Marionette.Application with an `initialize` / `start` / `stop` / `destroy` lifecycle. | ||
| * | ||
@@ -23,3 +24,3 @@ * @public | ||
| */ | ||
| const App = Marionette.Object.extend({ | ||
| const App = Marionette.Application.extend({ | ||
@@ -36,11 +37,2 @@ /** | ||
| /** | ||
| * Internal flag indiciate when `App` has been destroyed | ||
| * | ||
| * @private | ||
| * @type {Boolean} | ||
| * @default false | ||
| */ | ||
| _isDestroyed: false, | ||
| /** | ||
| * Set to true if a parent `App` should not be able to destroy this `App`. | ||
@@ -92,6 +84,5 @@ * | ||
| this.initState(options); | ||
| this._initChildApps(options); | ||
| Marionette.Object.call(this, options); | ||
| Marionette.Application.call(this, options); | ||
@@ -151,5 +142,10 @@ if(_.result(this, 'startAfterInitialized')) { | ||
| const opts = _.extend({}, options); | ||
| opts.state = this.getInitState(opts.state); | ||
| this.initState(opts); | ||
| this._isRunning = true; | ||
| this.triggerStart(options); | ||
| this.triggerStart(opts); | ||
@@ -160,2 +156,17 @@ return this; | ||
| /** | ||
| * Returns state. | ||
| * Override to extend state | ||
| * | ||
| * @public | ||
| * @method getInitState | ||
| * @memberOf App | ||
| * @param {Object} [state] - initial app state | ||
| * @returns state | ||
| */ | ||
| getInitState(state) { | ||
| return state; | ||
| }, | ||
| /** | ||
| * Triggers start event. | ||
@@ -176,20 +187,2 @@ * Override to introduce async start | ||
| /** | ||
| * "Restarts the app" by first stoping app, reinitializing state, and then starting the app again | ||
| * | ||
| * | ||
| * @public | ||
| * @method restart | ||
| * @memberOf App | ||
| * @param {Object} [options] - Settings for the App passed through to events | ||
| * @returns {App} | ||
| */ | ||
| restart(options) { | ||
| this.stop(options); | ||
| this.initState(options); | ||
| this.start(options); | ||
| return this; | ||
| }, | ||
| /** | ||
| * Sets the app lifecycle to not running. | ||
@@ -224,14 +217,2 @@ * Removes any listeners added during the running state | ||
| /** | ||
| * Gets the value of internal `_isDestroyed` flag | ||
| * | ||
| * @public | ||
| * @method isDestroyed | ||
| * @memberOf App | ||
| * @returns {Boolean} | ||
| */ | ||
| isDestroyed() { | ||
| return this._isDestroyed; | ||
| }, | ||
| /** | ||
| * Stops the `App` and sets it destroyed. | ||
@@ -251,4 +232,2 @@ * | ||
| Marionette.Object.prototype.destroy.apply(this, arguments); | ||
| this._isDestroyed = true; | ||
| } | ||
@@ -255,0 +234,0 @@ }); |
@@ -6,3 +6,3 @@ import _ from 'underscore'; | ||
| const ClassOpions = [ | ||
| const ClassOptions = [ | ||
| 'ViewClass', | ||
@@ -25,6 +25,6 @@ 'viewEventPrefix', | ||
| * The view class to be managed. | ||
| * @type {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} | ||
| * @default Marionette.ItemView | ||
| * @type {Mn.View|Mn.CollectionView} | ||
| * @default Marionette.View | ||
| */ | ||
| ViewClass: Marionette.ItemView, | ||
| ViewClass: Marionette.View, | ||
@@ -51,3 +51,3 @@ /** | ||
| * @param {Object} [options.state] - Attributes to set on the state model. | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView=} [options.ViewClass] | ||
| * @param {Mn.View|Mn.CollectionView} [options.ViewClass] | ||
| * - The view class to be managed. | ||
@@ -61,3 +61,3 @@ * @param {String} [options.viewEventPrefix] | ||
| // Make defaults available to this | ||
| this.mergeOptions(options, ClassOpions); | ||
| this.mergeOptions(options, ClassOptions); | ||
@@ -111,2 +111,4 @@ this.initState(options); | ||
| show(viewOptions) { | ||
| const region = this.getRegion(); | ||
| if(this._isShown) { | ||
@@ -119,3 +121,3 @@ throw new Marionette.Error({ | ||
| if(!this.region) { | ||
| if(!region) { | ||
| throw new Marionette.Error({ | ||
@@ -136,3 +138,3 @@ name: 'ComponentRegionError', | ||
| // it destroys the view | ||
| this.listenTo(this.region, 'empty', this._destroy); | ||
| this.listenTo(region, 'empty', this._destroy); | ||
@@ -143,2 +145,14 @@ return this; | ||
| /** | ||
| * Returns component region. | ||
| * | ||
| * @public | ||
| * @method getRegion | ||
| * @memberOf Component | ||
| * @returns Component region | ||
| */ | ||
| getRegion() { | ||
| return this.region; | ||
| }, | ||
| /** | ||
| * Get the Component ViewClass class. | ||
@@ -199,3 +213,3 @@ * Checks if the `ViewClass` is a view class (the common case) | ||
| // Show the view in the region | ||
| this.region.show(view); | ||
| this.getRegion().show(view); | ||
@@ -217,3 +231,3 @@ this._shouldDestroy = true; | ||
| * @memberOf Component | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} view - | ||
| * @param {Mn.View|Mn.CollectionView} view - | ||
| * The instantiated ViewClass. | ||
@@ -259,6 +273,6 @@ */ | ||
| * @memberOf Component | ||
| * @param {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} ViewClass - | ||
| * @param {Mn.View|Mn.CollectionView} ViewClass - | ||
| * The view class to instantiate. | ||
| * @param {Object} [viewOptions] - Options to pass to the View | ||
| * @returns {Mn.ItemView|Mn.CollectionView|Mn.CompositeView|Mn.LayoutView} | ||
| * @returns {Mn.View|Mn.CollectionView} | ||
| */ | ||
@@ -291,5 +305,7 @@ buildView(ViewClass, viewOptions) { | ||
| _emptyRegion(options) { | ||
| if(this.region) { | ||
| this.stopListening(this.region, 'empty'); | ||
| this.region.empty(options); | ||
| const region = this.getRegion(); | ||
| if(region) { | ||
| this.stopListening(region, 'empty'); | ||
| region.empty(options); | ||
| } | ||
@@ -296,0 +312,0 @@ }, |
@@ -98,2 +98,29 @@ import _ from 'underscore'; | ||
| /** | ||
| * Starts `childApp` | ||
| * | ||
| * @param {String} appName - Name of childApp to start | ||
| * @param {object} options - Start options for app | ||
| * @public | ||
| * @method startChildApp | ||
| */ | ||
| startChildApp(appName, options) { | ||
| this.getChildApp(appName).start(options); | ||
| return this; | ||
| }, | ||
| /** | ||
| * Stops `childApp` | ||
| * | ||
| * @param {String} appName - Name of childApp to stop | ||
| * @public | ||
| * @method stopChildApp | ||
| */ | ||
| stopChildApp(appName) { | ||
| this.getChildApp(appName).stop(); | ||
| return this; | ||
| }, | ||
| /** | ||
| * Destroys `childApps` if allowed by child | ||
@@ -100,0 +127,0 @@ * |
@@ -58,3 +58,3 @@ import _ from 'underscore'; | ||
| this.unbindEntityEvents(this._stateModel); | ||
| this.unbindEvents(this._stateModel); | ||
| this._stateModel.stopListening(); | ||
@@ -72,3 +72,3 @@ this.off('destroy', this._destroyState); | ||
| _setEventHandlers() { | ||
| this.bindEntityEvents(this._stateModel, _.result(this, 'stateEvents')); | ||
| this.bindEvents(this._stateModel, _.result(this, 'stateEvents')); | ||
@@ -75,0 +75,0 @@ this.on('destroy', this._destroyState); |
@@ -73,35 +73,2 @@ import App from '../../src/app'; | ||
| }); | ||
| describe('and restarting the application', function() { | ||
| beforeEach(function() { | ||
| this.sinon.spy(this.myApp, 'initState'); | ||
| this.myApp.restart(); | ||
| }); | ||
| it('should call stop', function() { | ||
| expect(this.stopStub).to.have.been.calledOnce; | ||
| }); | ||
| it('should reinitialize state', function() { | ||
| expect(this.myApp.initState).to.have.been.calledOnce; | ||
| }); | ||
| it('should trigger start event', function() { | ||
| expect(this.startStub).to.have.been.calledTwice; | ||
| }); | ||
| describe('passing state argument', function() { | ||
| beforeEach(function() { | ||
| this.myApp.restart({ | ||
| state: { | ||
| foo: 'bar' | ||
| } | ||
| }); | ||
| }); | ||
| it('should have reinitialize state with passed in state', function() { | ||
| expect(this.myApp.getState('foo')).to.equal('bar'); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
@@ -108,0 +75,0 @@ |
@@ -15,3 +15,3 @@ describe('Marionette.Toolkit.Component', function() { | ||
| this.showStub = this.sinon.stub(); | ||
| this.MyViewClass = Marionette.ItemView.extend({}); | ||
| this.MyViewClass = Marionette.View.extend({}); | ||
| this.MyComponent = Marionette.Toolkit.Component.extend({ | ||
@@ -72,2 +72,22 @@ viewOptions: { | ||
| // RETRIVING A COMPONENT'S region | ||
| describe('when retriving a component\'s region', function() { | ||
| beforeEach(function() { | ||
| this.renderStub = this.sinon.stub(); | ||
| this.MyViewClass = Marionette.View; | ||
| this.MyComponent = Marionette.Toolkit.Component.extend({ | ||
| region: this.myRegion, | ||
| ViewClass: this.MyViewClass, | ||
| viewOptions: { | ||
| template: _.template('<div></div>') | ||
| } | ||
| }); | ||
| this.myComponent = new this.MyComponent(); | ||
| }); | ||
| it('should return component region', function() { | ||
| expect(this.myComponent.getRegion()).to.deep.eq(this.myRegion); | ||
| }); | ||
| }); | ||
| // RENDERING A VIEW WITH renderView() | ||
@@ -78,3 +98,3 @@ describe('when rendering a view', function() { | ||
| this.renderStub = this.sinon.stub(); | ||
| this.MyViewClass = Marionette.ItemView; | ||
| this.MyViewClass = Marionette.View; | ||
| this.MyComponent = Marionette.Toolkit.Component.extend({ | ||
@@ -141,3 +161,3 @@ region: this.myRegion, | ||
| if(options.foo) { | ||
| return Marionette.ItemView.extend({ | ||
| return Marionette.View.extend({ | ||
| customViewOption: 'bar', | ||
@@ -147,3 +167,3 @@ template: _.template('<div></div>') | ||
| } | ||
| return Marionette.ItemView; | ||
| return Marionette.View; | ||
| } | ||
@@ -214,3 +234,3 @@ }); | ||
| beforeEach(function() { | ||
| this.MyView = Marionette.ItemView.extend({ | ||
| this.MyView = Marionette.View.extend({ | ||
| initialize: function(options) { | ||
@@ -289,3 +309,3 @@ this.test = options.foo; | ||
| it('should trigger a destroy event on the component', function() { | ||
| this.myRegion.show(new Marionette.ItemView({ | ||
| this.myRegion.show(new Marionette.View({ | ||
| template: false | ||
@@ -292,0 +312,0 @@ })); |
@@ -343,2 +343,65 @@ describe('ChildAppMixin', function() { | ||
| }); | ||
| describe('startChildApp', function() { | ||
| before(function() { | ||
| const childApps = { | ||
| cA1: Marionette.Toolkit.App, | ||
| cA2: Marionette.Toolkit.App.extend({ | ||
| onStart(options) { | ||
| this.mergeOptions(options, ['region']); | ||
| } | ||
| }), | ||
| cA3: Marionette.Toolkit.App | ||
| }; | ||
| this.myApp = new Marionette.Toolkit.App({ childApps: childApps }); | ||
| }); | ||
| it('should start specified childApp', function() { | ||
| this.myApp.startChildApp('cA1'); | ||
| expect(this.myApp.getChildApp('cA1').isRunning()).to.be.true; | ||
| }); | ||
| it('should start childApp with options', function() { | ||
| this.myApp.startChildApp('cA2', { region: 'regionName' }); | ||
| expect(this.myApp.getChildApp('cA2').getOption('region')).to.eq('regionName'); | ||
| }); | ||
| it('should return parentApp instance', function() { | ||
| const spy = sinon.spy(this.myApp, 'startChildApp'); | ||
| this.myApp.startChildApp('cA1'); | ||
| expect(spy.returned(this.myApp)).to.be.true; | ||
| }); | ||
| }); | ||
| describe('stopChildApp', function() { | ||
| before(function() { | ||
| const childApps = { | ||
| cA1: Marionette.Toolkit.App, | ||
| cA2: Marionette.Toolkit.App, | ||
| cA3: Marionette.Toolkit.App | ||
| }; | ||
| this.myApp = new Marionette.Toolkit.App({ childApps: childApps }); | ||
| this.myApp.startChildApp('cA1'); | ||
| }); | ||
| it('should stop specified childApp', function() { | ||
| this.myApp.stopChildApp('cA1'); | ||
| expect(this.myApp.getChildApp('cA1').isRunning()).to.be.false; | ||
| }); | ||
| it('should return parentApp instance', function() { | ||
| const spy = sinon.spy(this.myApp, 'stopChildApp'); | ||
| this.myApp.stopChildApp('cA1'); | ||
| expect(spy.returned(this.myApp)).to.be.true; | ||
| }); | ||
| }); | ||
| }); |
@@ -59,3 +59,3 @@ import Marionette from 'backbone.marionette'; | ||
| describe.only('when resetting a state on a state object using resetStateDefaults', function() { | ||
| describe('when resetting a state on a state object using resetStateDefaults', function() { | ||
| beforeEach(function() { | ||
@@ -229,3 +229,3 @@ this.StateClass = Marionette.Object.extend(); | ||
| this.sinon.spy(this.myStateClass._stateModel, 'stopListening'); | ||
| this.sinon.spy(this.myStateClass, 'unbindEntityEvents'); | ||
| this.sinon.spy(this.myStateClass, 'unbindEvents'); | ||
| this.sinon.spy(this.myStateClass, 'off'); | ||
@@ -236,3 +236,3 @@ | ||
| expect(orgStateModel.stopListening).to.have.been.calledOnce; | ||
| expect(this.myStateClass.unbindEntityEvents).to.have.been.calledOnce; | ||
| expect(this.myStateClass.unbindEvents).to.have.been.calledOnce; | ||
| expect(this.myStateClass.off).to.have.been.calledWith('destroy', this.myStateClass._destroyState); | ||
@@ -239,0 +239,0 @@ }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by2.44%
42
- Lines of code
- increased by2.57%
3427
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-8.44%
263637
- Number of lines in readme file
- decreased by-4.3%
89
No dependency changes