thepian-skatejs
v4.6.8
Published
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.
Downloads
2
Maintainers
Readme
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.
- 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
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:
index.js
- This is themain
entry point in thepackage.json
without dependencies.index-with-deps.js
- Unminified with dependencies.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 your definitions.
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.
Transpilation and native custom element gotchas
If you’re using Babel or some other tool to transpile your ES2015 code to ES5, simply import skatejs
and skatejs-web-components
(or selectively include the polyfills) as needed and ignore the following.
Native custom element support requires that you load a shim if you're not delivering native ES2015 classes to the browser. If you're transpiling to ES5, you must - at the very least - load the native shim:
When you load Skate by module name (import { ... } from 'skatejs';
or require('skatejs');
), you'll be getting the transpiled source. Thus even if you author your components in ES2015, you'll still be getting ES5 base-classes and the native custom elements implementation will complain. If you want to deliever native classes you have to point to the non-transpiled Skate source: import { ... } from 'skatejs/src';
. Currently this is not supported by our API versioning but we have an issue to work around this.
More information can be found in the webcomponents/custom-elements repo.
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
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]