skatejs

Skate

Skate is a library built on top of the W3C web component specs that enables you to write functional and performant web components with a very small footprint.

• Functional rendering pipeline backed by Google's Incremental DOM.
• Inherently cross-framework compatible. For example, it works seamlessly with - and complements - React and other frameworks.
• Skate itself is only 4k min+gz.
• It's very fast.
• It works with multiple versions of itself on the page.

HTML

<x-hello name="Bob"></x-hello>

JavaScript

customElements.define('x-hello', class extends skate.Component {
  static get props () {
    return {
      name: { attribute: true }
    };
  }
  renderCallback () {
    return skate.h('div', `Hello, ${this.name}`);
  }
});

Result

<x-hello name="Bob">Hello, Bob!</x-hello>

Whenever you change the name property - or attribute - the component will re-render, only changing the part of the DOM that requires updating.

Documentation

• Installing
  • NPM
  • Script Tag
• Dependencies
• Browser Support
• Recipes
• Examples
• API

Installing

There's a couple ways to consume Skate.

NPM

npm install skatejs

Skate exports a UMD definition so you can:

import * as skate from 'skatejs';
const skate = require('skatejs');
require(['skatejs'], function (skate) {});

There's three files in dist/. Each has a UMD definition and a corresponding sourcemap file:

1. index.js - This is the main entry point in the package.json without dependencies.
2. index-with-deps.js - Unminified with dependencies.
3. index-with-deps.min.js - Minified with dependencies.

Script Tag

<script src="https://unpkg.com/skatejs/dist/index-with-deps.min.js"></script>

Since Skate exports a UMD definition, you can then access it via the global:

const { skate } = window;

Dependencies

Skate doesn't require you provide any external dependencies, but recommends you provide some web component polyfills depending on what browsers you require support for. Skate requires both Custom Elements and Shadow DOM v1.

To get up and running quickly with our recommended configuration, we've created a single package called skatejs-web-components where all you have to do is load it before Skate.

npm install skatejs skatejs-web-components

And then you can import it:

import 'skatejs-web-components';
import { define, vdom } from 'skatejs';

Or you can use script tags:

<script src="https://unpkg.com/skatejs-web-components/dist/index.min.js"></script>
<script src="https://unpkg.com/skatejs/dist/index-with-deps.min.js"></script>

If you want finer grained control about which polyfills you use, you'll have to BYO Custom Element and Shadow DOM polyfills.

Browser Support

Skate supports all evergreens and IE11. We recommend using the following polyfills:

• Custom Elements: https://github.com/webcomponents/custom-elements
• Shadow DOM: https://github.com/webcomponents/shadydom
• Shadow DOM (CSS fills): https://github.com/webcomponents/shadycss