Skip to content

Commit c8cd045

Browse files
authored
Merge pull request #142 from maxwondercorn/move-addon-blueprints
Move addon blueprints to writing addons
2 parents 20ec08a + 0762aed commit c8cd045

File tree

5 files changed

+89
-81
lines changed

5 files changed

+89
-81
lines changed

.local.dic

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ ember-a11y-testing
1919
ember-auto-import
2020
ember-basic-dropdown
2121
ember-cli-addon-docs
22+
ember-cli-github-pages
2223
ember-concurrency
2324
ember-d3
2425
ember-bootstrap

guides/advanced-use/blueprints.md

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -522,83 +522,3 @@ The options object passed to `fileMapTokens` is:
522522
```
523523

524524
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.
525-
526-
## Addon blueprints
527-
528-
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.
529-
530-
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.
531-
532-
To create the default blueprint, use `ember generate blueprint <addon-name>`
533-
534-
```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
535-
module.exports = {
536-
normalizeEntityName() {}, // no-op since we're just adding dependencies
537-
};
538-
```
539-
### Blueprint Hooks
540-
541-
In addition to the standard blueprint hooks, the default blueprint can use these hooks.
542-
543-
* `addAddonToProject`
544-
* `addBowerPackageToProject`
545-
* `addPackageToProject`
546-
547-
#### addAddonToProject
548-
549-
Installs another Ember addon in the client application
550-
551-
#### addBowerPackageToProject
552-
553-
Installs a Bower package or dependency into the client application.
554-
Bower is a package manager that is [no longer recommended for new projects](https://bower.io/),
555-
but you may find this hook used in older addons.
556-
557-
#### addPackageToProject
558-
559-
Installs an npm package or dependency into the client application
560-
561-
Each of the hooks returns a promise, so they can all be chained with `.then()`. The following is an example of each of these:
562-
563-
```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
564-
module.exports = {
565-
normalizeEntityName() {}, // no-op since we're just adding dependencies
566-
567-
afterInstall() {
568-
// Add addons to package.json and run defaultBlueprint
569-
return this.addAddonsToProject({
570-
// a packages array defines the addons to install
571-
packages: [
572-
// name is the addon name, and target (optional) is the version
573-
{name: 'ember-cli-code-coverage', target: '0.3.9'},
574-
{name: 'ember-cli-sass'}
575-
]
576-
})
577-
.then(() => {
578-
// Add npm packages to package.json
579-
return this.addPackagesToProject([
580-
{name: 'babel-eslint'},
581-
{name: 'eslint-plugin-ship-shape'}
582-
]);
583-
})
584-
.then(() => {
585-
return this.addBowerPackagesToProject([
586-
{name: 'bootstrap', target: '3.0.0'}
587-
]);
588-
});
589-
}
590-
};
591-
```
592-
593-
### Blueprint Config
594-
595-
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`:
596-
597-
598-
```json {data-filename=my-addon-name/package.json}
599-
"ember-addon": {
600-
// addon configuration properties
601-
"configPath": "tests/dummy/config",
602-
"defaultBlueprint": "blueprint-that-isnt-package-name",
603-
}
604-
```

guides/pages.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
url: 'intro-tutorial'
4646
- title: 'Addon dependencies'
4747
url: 'addon-dependencies'
48+
- title: 'Addon blueprints'
49+
url: 'addon-blueprints'
4850
- title: 'Writing documentation'
4951
url: 'documenting'
5052
- title: 'Deprecating addon features'
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
## Addon blueprints
2+
3+
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.
4+
5+
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.
6+
7+
The default blueprint has extra hooks to install packages and/or install another Ember addon into the client app.
8+
9+
To create the default blueprint, use `ember generate blueprint <addon-name>`
10+
11+
```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
12+
module.exports = {
13+
normalizeEntityName() {}, // no-op since we're just adding dependencies
14+
};
15+
```
16+
### Blueprint Hooks
17+
18+
In addition to the standard blueprint hooks, the default blueprint can use these hooks.
19+
20+
* `addAddonToProject`
21+
* `addBowerPackageToProject`
22+
* `addPackageToProject`
23+
24+
#### addAddonToProject
25+
26+
Installs another Ember addon in the client application
27+
28+
#### addPackageToProject
29+
30+
Installs an npm package or dependency into the client application
31+
32+
#### addBowerPackageToProject
33+
34+
Installs a Bower package or dependency into the client application.
35+
Bower is a package manager that is [no longer recommended for new projects](https://bower.io/),
36+
but you may find this hook used in older addons.
37+
38+
Each of the hooks returns a promise, so they can all be chained with `.then()`. The following is an example of each of these:
39+
40+
```javascript {data-filename=my-addon-name/blueprints/my-addon-name/index.js}
41+
module.exports = {
42+
normalizeEntityName() {}, // no-op since we're just adding dependencies
43+
44+
afterInstall() {
45+
// Add addons to package.json and run defaultBlueprint
46+
return this.addAddonsToProject({
47+
// a packages array defines the addons to install
48+
packages: [
49+
// name is the addon name, and target (optional) is the version
50+
{ name: 'ember-cli-code-coverage', target: '0.3.9' },
51+
{ name: 'ember-cli-sass' }
52+
]
53+
}).then(() => {
54+
// Add npm packages to package.json
55+
return this.addPackagesToProject([
56+
{ name: 'babel-eslint' },
57+
{ name: 'eslint-plugin-ship-shape' }
58+
]);
59+
});
60+
}
61+
};
62+
```
63+
64+
### Blueprint Config
65+
66+
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`:
67+
68+
69+
```json {data-filename=my-addon-name/package.json}
70+
"ember-addon": {
71+
// addon configuration properties
72+
"configPath": "tests/dummy/config",
73+
"defaultBlueprint": "blueprint-that-isnt-package-name",
74+
}
75+
```
76+
77+
### Blueprints in development
78+
79+
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:
80+
81+
```shell
82+
ember generate <your-blueprint-name>
83+
```
84+
85+
If you specified a different name for the default blueprint, use that name with `ember generate`.

guides/writing-addons/documenting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ This tool is used by both Ember projects and the community as a whole.
2323
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.
2424

2525
Another option is to create your own site from scratch.
26-
Many addon authors use the dummy app within an addon to build their documentation site, and deploy it to GitHub pages.
26+
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.
2727

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

0 commit comments

Comments
 (0)