Periodic-manager NPM

Web component manager and registry

Overview

periodic is a tool to help you use web components from the periodic registry with your application.

Installation

Use npm to install periodic (install globally):

$ npm i -g periodic-manager

Note: requires Node v4 or newer

Usage

For full usage:

$ periodic --help

Note: periodic is also available via pm as well:

$ pm --help

Installing & removing component sets

Currently, periodic only supports component sets -- support for individual components is planned for future release. To install a component set:

$ pm install periodic-table

It is also possible to install component sets from Github repos directly:

$ pm install tylerdmace/periodic-table

To remove a component set:

$ pm remove periodic-table

You are also able to install/remove multiple sets at a time:

$ pm install periodic-table paper-elements iron-elements

Listing installed component sets

To list currently installed component sets:

$ pm list

periodic.json

The periodic.json file is used for several purposes. The first as a configuration file for the periodic commandline tool. The second as the configuration file for any web component sets you create that you'd like to share through the periodic registry. An example periodic.json being used for both purposes:

{
  "tool": {
    "registry": "periodic.io/registry",
    "root": "./components",
    "sets": [
      {
        "name": "periodic-table",
        "uri": "tylerdmace/periodic-table",
        "components": [
          {
            "name": "periodic-masonry",
            "path": "registry/periodic-masonry",
            "description": "Provides various grid-like layouts for other sub-components",
            "version": "0.1.0",
            "assets": [
              "periodic-masonry.html",
              "periodic-masonry.js"
            ],
            "dependencies": [
              "polymer"
            ]
          },
          {
            "name": "periodic-contact",
            "path": "registry/periodic-contact",
            "description": "Provides drop-in support for a 'contact me' form without needing to setup email",
            "version": "0.1.0",
            "assets": [
              "periodic-contact.html",
              "periodic-contact.js"
            ],
            "dependencies": [
              "polymer"
            ]
          }
        ]
      },
      {
        "name": "polymer",
        "uri": "polymer/polymer",
        "components": [
          {
            "name": "polymer",
            "description": "The Polymer Project",
            "version": "1.1",
            "dependencies": []
          }
        ]
      }
    ]
  },
  "registry": {
    "components": [
      {
        "name": "periodic-new-element",
        "path": "registry/periodic-new-element",
        "description": "Some sort of description on my new element",
        "version": "0.1.0",
        "assets": [
          "periodic-new-element.html",
          "periodic-new-element.js"
        ],
        "dependencies": [
          "polymer",
          "periodic-masonry"
        ]
      }
    ]
  }
}