Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .local.dic
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ ember-a11y-testing
ember-auto-import
ember-basic-dropdown
ember-cli-addon-docs
ember-cli-github-pages
ember-concurrency
ember-d3
ember-bootstrap
Expand Down
80 changes: 0 additions & 80 deletions guides/advanced-use/blueprints.md
Original file line number Diff line number Diff line change
Expand Up @@ -522,83 +522,3 @@ The options object passed to `fileMapTokens` is:
```

As mentioned above, Ember's built-in [blueprints](https://github.com/emberjs/ember.js/tree/master/blueprints) provide detailed examples on how to create custom blueprints.

## Addon blueprints

As in applications, custom blueprints are available in addons. Addon blueprints are used to generate code snippets in the client application. Addons can also have a default blueprint that will run automatically after the addon is installed.

Addon blueprints have the same structure as regular blueprints. The default blueprint has extra hooks to install packages and/or install another Ember addon into the client app.

To create the default blueprint, use `ember generate blueprint <addon-name>`

```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
module.exports = {
normalizeEntityName() {}, // no-op since we're just adding dependencies
};
```
### Blueprint Hooks

In addition to the standard blueprint hooks, the default blueprint can use these hooks.

* `addAddonToProject`
* `addBowerPackageToProject`
* `addPackageToProject`

#### addAddonToProject

Installs another Ember addon in the client application

#### addBowerPackageToProject

Installs a Bower package or dependency into the client application.
Bower is a package manager that is [no longer recommended for new projects](https://bower.io/),
but you may find this hook used in older addons.

#### addPackageToProject

Installs an npm package or dependency into the client application

Each of the hooks returns a promise, so they can all be chained with `.then()`. The following is an example of each of these:

```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
module.exports = {
normalizeEntityName() {}, // no-op since we're just adding dependencies

afterInstall() {
// Add addons to package.json and run defaultBlueprint
return this.addAddonsToProject({
// a packages array defines the addons to install
packages: [
// name is the addon name, and target (optional) is the version
{name: 'ember-cli-code-coverage', target: '0.3.9'},
{name: 'ember-cli-sass'}
]
})
.then(() => {
// Add npm packages to package.json
return this.addPackagesToProject([
{name: 'babel-eslint'},
{name: 'eslint-plugin-ship-shape'}
]);
})
.then(() => {
return this.addBowerPackagesToProject([
{name: 'bootstrap', target: '3.0.0'}
]);
});
}
};
```

### Blueprint Config

The default blueprint is recognized because it normally has the same name as the addon. Optionally, you may specify a different name for the "defaultBlueprint" in `package.json`:


```json {data-filename=my-addon-name/package.json}
"ember-addon": {
// addon configuration properties
"configPath": "tests/dummy/config",
"defaultBlueprint": "blueprint-that-isnt-package-name",
}
```
2 changes: 2 additions & 0 deletions guides/pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@
url: 'intro-tutorial'
- title: 'Addon dependencies'
url: 'addon-dependencies'
- title: 'Addon blueprints'
url: 'addon-blueprints'
- title: 'Writing documentation'
url: 'documenting'
- title: 'Deprecating addon features'
Expand Down
85 changes: 85 additions & 0 deletions guides/writing-addons/addon-blueprints.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
## Addon blueprints

As in applications, custom blueprints are available in addons. Addon blueprints are used to generate code snippets in the client application. Addons can also have a default blueprint that will run automatically after the addon is installed.

Addon blueprints have the same structure as regular blueprints. You should be familiar with [creating blueprints](../../advanced-use/blueprints/) in the `Advanced use` section to understand blueprints before using them in your addon.

The default blueprint has extra hooks to install packages and/or install another Ember addon into the client app.

To create the default blueprint, use `ember generate blueprint <addon-name>`

```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
module.exports = {
normalizeEntityName() {}, // no-op since we're just adding dependencies
};
```
### Blueprint Hooks

In addition to the standard blueprint hooks, the default blueprint can use these hooks.

* `addAddonToProject`
* `addBowerPackageToProject`
* `addPackageToProject`

#### addAddonToProject

Installs another Ember addon in the client application

#### addPackageToProject

Installs an npm package or dependency into the client application

#### addBowerPackageToProject

Installs a Bower package or dependency into the client application.
Bower is a package manager that is [no longer recommended for new projects](https://bower.io/),
but you may find this hook used in older addons.

Each of the hooks returns a promise, so they can all be chained with `.then()`. The following is an example of each of these:

```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
module.exports = {
normalizeEntityName() {}, // no-op since we're just adding dependencies

afterInstall() {
// Add addons to package.json and run defaultBlueprint
return this.addAddonsToProject({
// a packages array defines the addons to install
packages: [
// name is the addon name, and target (optional) is the version
{ name: 'ember-cli-code-coverage', target: '0.3.9' },
{ name: 'ember-cli-sass' }
]
}).then(() => {
// Add npm packages to package.json
return this.addPackagesToProject([
{ name: 'babel-eslint' },
{ name: 'eslint-plugin-ship-shape' }
]);
});
}
};
```

### Blueprint Config

The default blueprint is recognized because it normally has the same name as the addon. Optionally, you may specify a different name for the "defaultBlueprint" in `package.json`:


```json {data-filename=my-addon-name/package.json}
"ember-addon": {
// addon configuration properties
"configPath": "tests/dummy/config",
"defaultBlueprint": "blueprint-that-isnt-package-name",
}
```

### Blueprints in development

When developing and testing your addon using either `npm link` or `yarn link` your addon's blueprint will not automatically run. To manually run and test the blue print you would use the following command:

```shell
ember generate <your-blueprint-name>
```

If you specified a different name for the default blueprint, use that name with `ember generate`.
2 changes: 1 addition & 1 deletion guides/writing-addons/documenting.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ This tool is used by both Ember projects and the community as a whole.
For example, check out the [ember-styleguide](https://github.com/ember-learn/ember-styleguide), which is a library of UI components that make up [emberjs.com](https://emberjs.com). The addon docs help show what components are available and how to use them.

Another option is to create your own site from scratch.
Many addon authors use the dummy app within an addon to build their documentation site, and deploy it to GitHub pages.
Many addon authors use the dummy app within an addon to build their documentation site, and deploy it to GitHub pages. The Ember addon [ember-cli-github-pages](https://github.com/poetic/ember-cli-github-pages) simplifies deploying the dummy app to GitHub pages.

For more inspiration, take a look at how your favorite addons do their documentation.

Expand Down