JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API.

Crab's size is 5kB gzipped with polyfills included. Without polyfills size is only about 1kB gzipped.

Installation

Crab is compiling from ES2015+ to ES5 ready because it comes with native-shim (and also custom-elements) polyfill included.

Install crab with package manager

# yarn
yarn add @kocisov/crab

# npm
npm install --save @kocisov/crab

Include crab into your code

import { Component, defineComponents, render } from '@kocisov/crab'
// ...

render(`
  <h2>Hello</h2>
`, document.getElementById('root'))

If you are using Uglify for minification, Crab requires harmony version of Uglify instead of default to work properly.

You can add it to your project with this command.

# yarn
yarn add --dev git://github.com/mishoo/UglifyJS2#harmony

# npm
npm install --save-dev git://github.com/mishoo/UglifyJS2#harmony

Or you can use babili and its babili-webpack-plugin

Example

Refer to example folder or example.md