Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

skatejs

Package Overview
Dependencies
Maintainers
8
Versions
151
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

skatejs

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.

  • 5.0.0-alpha.15
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
decreased by-6.61%
Maintainers
8
Weekly downloads
 
Created
Source

Skate

Downloads per month NPM version Build Status Join the chat at https://gitter.im/skatejs/skatejs Commitizen friendly Semantic Release OpenCollective OpenCollective Follow @skate_js on Twitter

Sauce Test Status

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
  • Uses Preact, by default but also supports custom renderers

HTML

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

JavaScript

import { Component, h, propString } from 'skatejs';

customElements.define('x-hello', class extends Component {
  static props = {
    name: propString
  }
  renderCallback ({ name }) {
    return h('span', `Hello, ${name}!`);
  }
});

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.

Installing

There's a couple ways to consume Skate.

NPM

npm install skatejs

Skate exports a UMD build in umd/ so you can:

import * as skate from 'skatejs';

Script Tag

<script src="https://unpkg.com/skatejs/umd/skatejs.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 load it up before everything else:

import 'skatejs-web-components';
import { Component } from 'skatejs';

Or you can use script tags:

<script src="https://unpkg.com/@skatejs/web-components/umd/@skatejs/web-components.min.js"></script>
<script src="https://unpkg.com/skatejs/umd/skatejs.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 to ES5, simply import @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. More information can be found in the webcomponents/custom-elements repo.

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 deliver native classes, you can configure Webpack to pull in a version of Skate that's been transpiled to the latest ES specification. More about this approach is detailed in this blog post.

Browser Support

Skate supports all evergreens and IE11. We recommend using the following 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]

Keywords

FAQs

Package last updated on 16 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc