-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ddaa472
commit 932db46
Showing
1 changed file
with
21 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,32 @@ | ||
# Ember-ClI-Lazy-Load | ||
# Ember-clI-lazy-load | ||
|
||
This README outlines the details of collaborating on the Ember-CLI-Lazy-Load addon [here](https://github.com/B-Stefan/ember-cli-lazy-load-example) you find an [exmaple app](https://github.com/B-Stefan/ember-cli-lazy-load-example) that use this addon: | ||
Ember Cli Lazy Load supports lazily loading your Ember application, by splitting the app up into bundles. It comes with [a dummy app](https://github.com/duizendnegen/ember-cli-lazy-load/tree/master/tests/dummy) that implements a basic lazy loading scenario. | ||
|
||
## Installation | ||
|
||
* `ember install ember-cli-lazy-load` for [email protected] and compatible with ember@1.* and [email protected].* | ||
* `ember install [email protected]` for ember-cli@1.* and compatible with ember@1.* | ||
Requirements: `ember-cli` >= 2.2.0-beta.6 | ||
|
||
###Warining | ||
This addon highly depend on the ember-cli version. | ||
To be sure that this addon will work install the same ember-cli version as specified in the [package.json](./package.json) file | ||
Whenever `[ember-engines](https://github.com/dgeb/ember-engines)` land their version of lazy loading, this add-on will be deprecated. | ||
|
||
## Installation | ||
|
||
## Getting started | ||
* `ember install ember-cli-lazy-load` | ||
|
||
## Getting started | ||
|
||
#### 1. Configure your bundles in config/bundes.js | ||
#### 1. Configure your bundles in config/bundes.js | ||
|
||
```javascript | ||
```javascript | ||
|
||
index: { | ||
//Minisearch file patterns for the content of the bundle | ||
//Minisearch file patterns for the content of the bundle | ||
files: [ | ||
"**/templates/index.js", | ||
"**/controllers/index.js", | ||
"**/components/my-cat/**.js" | ||
], | ||
//The name of the routes if you are using the lazy-route mixin, no minisearch expressions are allowed here. | ||
|
||
//The name of the routes if you are using the lazy-route mixin, no minisearch expressions are allowed here. | ||
routes: ["index", "..."] | ||
//The dependencies for this bundle. They will loaded in the same batch as the actual bundle | ||
//The dependencies for this bundle. They will loaded in the same batch as the actual bundle | ||
dependencies: ["about"], | ||
}, | ||
about: { | ||
|
@@ -44,7 +41,7 @@ To be sure that this addon will work install the same ember-cli version as speci | |
|
||
|
||
|
||
#### 2. Modify your config/environment.js and include there the bundle files | ||
#### 2. Modify config/environment.js to include the bundle files | ||
|
||
```javascript | ||
var bundles = require("./bundles") | ||
|
@@ -53,7 +50,7 @@ To be sure that this addon will work install the same ember-cli version as speci | |
bundles: bundles(environment), | ||
``` | ||
#### 3. Modify your ember-cli-build.js to use the custom bundle build flow. | ||
#### 3. Modify your ember-cli-build.js to use the custom bundle build flow. | ||
```javascript | ||
var EmberApp = require("ember-cli-lazy-load/ember-app"); | ||
|
@@ -65,66 +62,37 @@ module.exports = function(defaults) { | |
// Add options here | ||
bundles: bundles | ||
} | ||
``` | ||
|
||
```` | ||
|
||
#### 4. Add Mixin to your routes | ||
|
||
To enable the automatic loading of the bundles when the user change the route add the mixin to your route: | ||
#### 4. Add Mixin to your routes | ||
```javascript | ||
|
||
import Ember from "ember"; | ||
import LazyRouteMixin from 'ember-cli-lazy-load/mixins/lazy-route'; | ||
|
||
export default Ember.Route.extend(LazyRouteMixin,{ | ||
export default Ember.Route.extend(LazyRouteMixin, { | ||
|
||
|
||
}); | ||
|
||
``` | ||
if you already override the beforeModel function ensure that you execute the super call before the rest and wait for the result. | ||
if you already override `beforeModel`, ensure that you execute and await the super call: | ||
```javascript | ||
|
||
|
||
import Ember from "ember"; | ||
import LazyRouteMixin from 'ember-cli-lazy-load/mixins/lazy-route'; | ||
|
||
export default Ember.Route.extend(LazyRouteMixin,{ | ||
|
||
beforeModel: function(transition, queryParams){ | ||
return this._super(transition,queryParams).then(()=>{ | ||
console.log("code after the bundle load"); | ||
// do the other beforeModel operations | ||
}); | ||
} | ||
|
||
|
||
}); | ||
|
||
|
||
``` | ||
|
||
|
||
## Services / Mixin | ||
|
||
###bundle-loader Service | ||
|
||
The bundle loader provide the ability to load bundles. | ||
|
||
* loadBundle(bundleName:string):Promise() - Load the bundle and there dependencies | ||
|
||
|
||
###lazy-route Mixin | ||
The mixin override the beforeModel(transition, queryParams) function. | ||
If you use this function already in you route be sure that you call first this method and wait for the promise! | ||
|
||
|
||
* findBundleByRouteName(routeName:string):string - get the bundle for the route, undefined if no bundle found | ||
* beforeModel(transition, queryParams):Promise - loads the bundle if there is one for this route | ||
|
||
## Running | ||
|
@@ -136,9 +104,3 @@ If you use this function already in you route be sure that you call first this m | |
* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions) | ||
* `ember test` | ||
* `ember test --server` | ||
|
||
## Building | ||
|
||
* `ember build` | ||
|
||
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). |