skatejs

Skate

Skate is high level, functional abstraction over the web component specs that:

• Produces cross-framework compatible components
• Abstracts away common attribute / property semantics via props, such as attribute reflection and coercion
• Adds several lifecycle callbacks for responding to prop updates, rendering and more
• Provides a base set of mixins that hook into renderers such as @skatejs/renderer-preact.

Installing

npm install skatejs

To use Skate with a renderer, you'll want to install one of them:

npm install skatejs @skatejs/renderer-[renderer]

Where [renderer] is one of:

• @skatejs/renderer-lit-html
• @skatejs/renderer-preact
• @skatejs/renderer-react
• Or any custom renderer!

Basic usage

HTML

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

JavaScript (using the Preact renderer)

/** @jsx h */

import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h } from 'preact';

const Component = withComponent(withPreact());

customElements.define('x-hello', class extends Component {
  static props = {
    name: props.string
  }
  renderCallback ({ name }) {
    return <span>Hello, {name}!</span>;
  }
});

Result

<x-hello name="Bob">
  #shadow-root
    <span>Hello, Bob!</span>
</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.

Polyfills

Skate uses both Custom Elements and Shadow DOM, but is capable of operating without Shadow DOM, you just don't get any encapsulation.

For more information on the polyfills, see their docs.

Browser Support

Skate supports all evergreens and IE11, and is subject to the browser support matrix of the polyfills.

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]