Creating X Tag Components

Install some tools

Requirements:

Nodejs and NPM

Bower Package Manager

Gruntjs

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 git@github.com:[you]/[your-component].git

// Install dependencies
$ npm install
$ bower install
$ grunt build

Write your component

Best Practices

etc.. etc..

Updating .json files

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.

Tag it

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

Share

Bower

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.