attributes-kit

Attributes Kit

Attributes Kit is a (as the name suggest) kit which helps you with rendering MSON (plain-text, human and machine readable, description format for describing data structures).

For instance—it turns the following...

- id: 1
- name: A green door
- price: 12.50
- tags: home, green

...into this.

Please see the list of supported features →

Preview

This application has been deployed to Heroku, try it out at attributes-kit.herokuapp.com.

---

Table of Contents

• Getting Started
• Status
• Compatibility
• Usage
  • API
  • Browser
  • Server
• Developing
  • Installation
  • Playground
  • Testing
• Versioning
• Contributing
• Troubleshooting
• Code of Conduct
• License

---

Getting Started

Note: Attributes Kit hasn't been published to NPM just yet, before we do that, please git clone the repository.

1. Clone the repository

$ git clone [e-mail]:apiaryio/attributes-kit.git

1. Install dependencies

cd ./attributes-kit
npm install

1. Run it

npm start

You can go to localhost:8080 to try out the Playground, or to /examples.html to see the list of examples.

1. Use it

Render the Attributes Kit using the render method.

import AttributesKit from 'attributes-kit';

let attributes = new AttributesKit({element, options});
attributes.render(refractElement);

Or you can use the React component directly.

import {Attributes} from 'attributes-kit';

// E.g. <Attributes element={refractElement} />

You're done! Great job! :+1:

---

Status

Please see the STATUS.md file.

---

Compatibility

Node

:point_right: You are using version 0.10.39 (or newer) of Node

node -v
0.10.39

:point_right: You are using version 2.11.3 (or newer) of NPM

npm -v
2.11.3

Browsers

Browser

---

Usage

• API
• Browser
• Server

API

• render Method
• Class Instance
• React Component

render Method

import AttributesKit from 'attributes-kit';

AttributesKit.render(refractElement, element, options);

Class Instance

import AttributesKit from 'attributes-kit';

let attributes = new AttributesKit({element, options});
attributes.render(refractElement);

React Component

import ReactDom from 'react-dom';
import {Attributes} from 'attributes-kit';

ReactDom.render(<Attributes element={refractElement} />, element);

Parameters

Attributes Kit always takes the same parameters.

Parameter	Description
refractElement	Refract element to be rendered.
element	A DOM node or a CSS selector; Attributes Kit will be rendered inside the element.
options	An options object to customize the rendering.

Browser

1. Install the package

npm install attributes-kit

1. Require the package

ES6

import AttributesKit from 'attributes-kit';

ES5

var AttributesKit = require('attributes-kit');

1. Use it

Use the Attributes Kit, you can see the API.

<script> tag

If you prefer to drop a <script> tag in your page, here's how to do it. Just a note—all builds do support UMD (AMD and CommonJS) out of the box.

1. Download the latest release

Go to the Releases page and download the latest release.

1. Choose the build

You can download the build directly, or all builds are located in the dist folder.

Development Build
attributes-kit.js
Works out of the box, the uncompressed file is best used during development or debugging.

Production Build
attributes-kit-min.js; attributes-kit-min.js.map
Works out of the box, compressed version saves bandwidth and improves performance in production. attributes-kit-min.js.map is not required to run the Kit.

1. Drop the <script> tag

<script src="./attributes-kit.js"></script>

1. Use it

var AttributesKit = window.AttributesKit;
AttributesKit.render(refractElement, element, options);

Please see the API.

Advanced

There are two more builds mainly for more advanced use cases.

Build without React
attributes-kit-no-react.js
This build does not contain React dependency. You have to install React manually, or your application lists React in its dependencies (in package.json).

Build without dependencies
attributes-kit-no-deps.js
This build does not contain any dependencies of the Attributes Kit. You have to install all dependencies manually, or your application lists them all in (e.g.) package.json.

Server

You can use the Attributes Kit on the server too. For instance—you can generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl you pages for SEO purposes.

1. Install the package

npm install attributes-kit

1. Require the package

Please mind the dist/attributes-kit-server suffix.

ES6

import AttributesKit from 'attributes-kit/dist/attributes-kit-server';

ES5

var AttributesKit = require('attributes-kit/dist/attributes-kit-server');

1. Use it

import React from 'react';
import ReactDomServer from 'react-dom/server'
import {Attributes} from 'attributes-kit/dist/attributes-kit-server';

const element = React.createElement(Attributes, {
  refractElement: [Refract Element]
});

ReactDomServer.renderToString(element);

---

Developing

Installation

1. Clone the repository

$ git clone [e-mail]:apiaryio/attributes-kit.git

1. Install dependencies

cd ./attributes-kit
npm install

1. Run it

npm start

Congratulations! You are all set to start developing now! :rocket:

Playground

Testing

---

Versioning

Attributes Kit is maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format.

<major>.<minor>.<patch>

And constructed with the following guidelines.

• Breaking backwards compatibility bumps the <major>
• New additions without breaking backwards compatibility bumps the <minor>
• Bug fixes and misc changes bump the <patch>

Please see the Releases section of our GitHub project for changelog.

---

Contributing

Please see the Contributions guidelines.

---

Troubleshooting

---

Code of Conduct

This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.

---

License

MIT.