You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+17-4Lines changed: 17 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -78,13 +78,26 @@ If we ever want to convert our addon to a proper ember-addon structure, we can s
78
78
79
79
# Example: Extracting a component from an Ember-CLI application
80
80
81
-
Let's assume we have an ember app located at `~git/my-ember-app`. Within that app, there is a small custom button component called `my-button`. We want to quickly extract it into a micro addon.
81
+
Let's assume we have an ember app located at `~git/my-ember-app`. Within that app, there is a small custom button component called `my-button`. We want to **quickly extract it into a micro addon**.
82
82
83
-
From the app folder, we execute `ember-micro:extract component my-button` and that's it. There is now a new folder, `~/git/my-button` containing the component structured as a micro addon. We can now include that micro-addon in our app as a dependency, and it will work. We can do this by either linking the folder using `npm link`, or by installing the addon from a local folder using `npm install ~/git/my-button`.
83
+
From the app folder, we execute `ember-micro:extract component my-button` and that's it.
84
84
85
-
We can also go a step further and publish the addon to GitHub.
85
+
There is now a new folder, `~/git/my-button` containing the component structured as a micro addon.
86
86
87
-
We move to the parent folder, `~/git/` and execute `ember-micro:publish my-button`. We will be prompted for our GitHub username and password and a few seconds later, the addon will be published under our username to GitHub.
87
+
It contains
88
+
*`index.js` - the addon's entry file. Works the same way as it does with a regular ember addon, except it contains some special hooks which make it work in an app with the custom, flat file structure.
89
+
*`component.js`
90
+
*`template.hbs`
91
+
*`style.css`
92
+
93
+
94
+
We can now include that micro-addon in our app as a dependency, and it will work. We can do this by either
95
+
* linking the folder using [`npm link`](https://docs.npmjs.com/cli/link),
96
+
* installing the addon from a local folder using `npm install ~/git/my-button`
97
+
98
+
We can also go a step further and **publish the addon to GitHub**.
99
+
100
+
For that, we move to the parent folder, `~/git/` and execute `ember-micro:publish my-button`. We will be prompted for our GitHub username and password and a few seconds later, the addon will be published under our username to GitHub.
0 commit comments