npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

data-structures-kit

v0.17.0-alpha.3

Published

React component for MSON rendering

Downloads

29

Readme

Attributes Kit Circle CI

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.

image

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

  1. Clone the repository
git clone [email protected]: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. You're done! :+1:

If you would like to use it in your application, please see the Usage section.


Usage

Browser

  1. Install the package
npm install attributes-kit
  1. Require the package
ES6
import AttributesKit from 'attributes-kit/dist/attributes-kit';
ES5
var AttributesKit = require('attributes-kit/dist/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. Choose the build
Download the latest release
Go to the [Releases](https://github.com/apiaryio/attributes-kit/releases) page and download the latest release, or you can download all the builds directly below.

| Development Build | |:------------------------| | attributes-kit.js; attributes-kit.js.map | | Works out of the box, the uncompressed file is best used during development or debugging. attributes-kit.js.map is not required to run the Kit. |

| Production Build | |:------------------------| | attributes-kit.min.js | | Works out of the box, compressed version saves bandwidth and improves performance in production. |

Use CDN

| Development Build | |:------------------------| | https://npmcdn.com/attributes-kit/dist/attributes-kit.js |

| Production Build | |:------------------------| | https://npmcdn.com/attributes-kit/dist/attributes-kit.min.js |

  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; attributes-kit-no-react.js.map | | 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; attributes-kit-no-deps.js.map | | 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, {
  element: [Refract Element]
});

ReactDomServer.renderToString(element);

API

render Method

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

AttributesKit.render(refractElement, element, options);

Class Instance

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

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

React Component

import ReactDom from 'react-dom';
import {Attributes} from 'attributes-kit/dist/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. | | options.dataStructures | If set, these data structures will be used to dereference the refractElement being rendered. It should be a js array of refract elements. |


Developing

Installation

  1. Clone the repository
git clone [email protected]: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:


Compatibility

| Package | Version | |:------------------------|:--------| | React | 0.14+ | | React DOM | 0.14+ | | Node | 0.10.40+ | | NPM | 2.11+ |

Browsers

| Browser | Version | |:------------------------|:--------| | Google Chrome | 15+ | | Safari | 6.1+ | | Firefox | 28+ | | Edge | 12+ | | IE | 11+ | | Opera | 12.1+ |


Status

Please see the STATUS.md file.


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.