-
Notifications
You must be signed in to change notification settings - Fork 150
Creating X Tag Components
Requirements:
Start by using our Custom Element Stub Repository
// Clone the stub repo
$ git clone git://github.com/x-tag/web-component-stub.git
// Make a copy
$ cp -r web-component-stub [your-component]
$ cd [your-component]
// You need a place to store your new component, so goto Github.com and create a new repository for it
// Once you're finished, you'll need to add that remote url to this repo.
// First remove the old origin
$ git remote rm origin
// replace it with the repo you just created
$ git remote add origin [email protected]:[you]/[your-component].git
// Install dependencies
$ npm install
$ bower install
$ grunt build
etc.. etc..
Once you finish coding your component, don't forget to update the .json files. Yes, there are three of them, yes it sucks. We will create a grunt task soon to streamline it.
package.json
is used by NPM to manage dependencies like Bower, Grunt and grunt related plugins.
bower.json
is used by Bower to download other components your component may rely on. For example, x-tag-core
.
xtag.json
is used by X-Tag Registry.
We have a special grunt task just for this.
# This will increment the version number in all .json files by 0.0.1, create a tag and a commit.
$ grunt bump:patch
# Update the code
$ git push origin master
# Push tag
$ git push --tags
Once you've created a component, the next step is to share it with other developers or include it in your own projects. To do this, you'll need to register it with Bower.
// Bower requires a unique component name and the git read-only url of the component.
$ bower register [unique-component-name] git://github.com/[you]/[your-component].git
Once it's published to Bower, you can use it your other projects by running
$ bower install [unique-component-name]
See this link for more details.