open-index/open-npm huggingface dataset:
npm package: @skate85/videojungle
Description: A TypeScript client for the Video Jungle API
Author: Kirk Kaiser
Latest version: 0.1.0

# Video Jungle API Client (TypeScript)

This is a TypeScript client for the Video Jungle API. It provides a simple interface to interact with the Video Jungle API in Node.js environments.

## Installation

You can install the Video Jungle API client using npm:

```
npm install @skate85/videojungle
```

## Usage

Here's a simple example of how to use the Video Jungle API client:

```typescript
import { ApiClient } from 'videojungle';

const client = new ApiClient('your_api_token_here');

// Get a project
client.projects.get('2ec097cd-1fff-4824-a7bf-a0e14281f4e5')
  .then(project => console.log(project))
  .catch(error => console.error(error));

// Using async/await
async function getProject() {
  try {
    const project = await client.projects.get('2ec097cd-1fff-4824-a7bf-a0e14281f4e5');
    console.log(project);
  } catch (error) {
    console.error(error);
  }
}

getProject();
```

## License

This project is licensed under the MIT License.
npm package: @skatejs/cli
Description: A starter kit for SkateJS.
Author: Trey Shugart
Latest version: 0.1.1

# SkateJS CLI

> Hit the ground skating!

## Installing

```
npm install @skatejs/cli
```

## Using

You can run the CLI simply by running `skatejs`.

```
$ skatejs

? What are you building? app
? What renderer do you want to use? preact

Generating package.json...
Writing files...
NPM installing...

Done!
```

### Tests

You get a working Jest setup out of the box! Just run `npm test` or `jest`.

### Bundling

App bundles are built with `parcel-bundler`.

* To dev, run `npm start`.
* To bundle, run `npm build`.
npm package: @skatejs/element-hyperhtml
Description: A SkateJS renderer for HyperHTML.
Author: Trey Shugart
Latest version: 0.0.1

# element-hyperhtml

SkateJS renderer for [HyperHTML](https://github.com/WebReflection/hyperHTML).

## Install

```sh
npm install @skatejs/element-hyperhtml hyperhtml
```

## Usage

```js
import Element from '@skatejs/element-hyperhtml';

class Hello extends Element {
  render(h) {
    return h`Hello, <slot />!`;
  }
}

customElements.define('x-hello', Hello);
```

```html
<x-hello>World</x-hello>
```
npm package: @skatejs/element-lit-html
Description: A SkateJS renderer for LitHTML.
Author: Trey Shugart
Latest version: 0.0.1

# element-lit-html

SkateJS renderer for [LitHTML](https://github.com/PolymerLabs/lit-html).

## Install

```sh
npm i @skatejs/element-lit-html lit-html
```

## Usage

```js
import Element, { h } from '@skatejs/element-lit-html';

class Hello extends Element {
  render() {
    return h`Hello, <slot></slot>!`;
  }
}

customElements.define('x-hello', Hello);
```

```html
<x-hello>World</x-hello>
```
npm package: @skatejs/element-preact
Description: A SkateJS renderer for Preact.
Author: Trey Shugart
Latest version: 0.0.1

# element-preact

SkateJS renderer for [Preact](https://preactjs.com/).

## Install

```sh
npm i @skatejs/element-preact preact
```

## Usage

```js
import Element, { h } from '@skatejs/element-preact';

class Hello extends Element {
  render() {
    return (
      <span>
        Hello, <slot />!
      </span>
    );
  }
}

customElements.define('x-hello', Hello);
```

```html
<x-hello>World</x-hello>
```
npm package: @skatejs/element-react
Description: A SkateJS renderer for React.
Author: Trey Shugart
Latest version: 0.0.1

# element-react

SkateJS renderer for [React](https://reactjs.org/).

## Install

```sh
npm i @skatejs/element-react react react-dom
```

## Usage

```js
import Element, { h } from '@skatejs/element-react';

class Hello extends Element {
  render() {
    return (
      <span>
        Hello, <slot />!
      </span>
    );
  }
}

customElements.define('x-hello', Hello);
```

```html
<x-hello>World</x-hello>
```

## Current issues with React

There are currently a few issues integrating with React that we have to work around:

1. React only sets attributes on custom elements.
2. React does not bind to custom events.

### Attributes vs properties

React doesn't set properties on custom elements because it doesn't know which ones are properties and which ones are attributes. As the author of a custom element, you should always try and provide attributes for every property that you have and property deserialize from the attribute to the property.

In Skate, a lot of this happens automatically for you. However there are times when you must still explicitly specify a property. For this case, we've provided a `setProps` export that allows you to do this in React:

```js
/** @jsx h */

import Element, { h, setProps } from '@skatejs/element-react';
import React, { Component } from 'react';

class Hello extends Element {
  static props = {
    name: String
  };
  render() {
    return <span>Hello, {this.name}!</span>;
  }
}

export default class extends Component {
  optionalParentRefCallback = () => {};
  render() {
    return (
      <Hello
        ref={setProps({ name: 'World' }, this.optionalParentRefCallback)}
      />
    );
  }
}
```

### Custom events

The issue with custom events is similar to with properties in that React doesn't know which events it should bind to.

Instead of providing a separate abstraction to work around this, you can define properties that bind to custom events and use the `setProps` function to add custom event handlers. With Skate's `event` prop type, this is trivial.

```js
/** @jsx h */

import Element, { h, setProps } from '@skatejs/element-react';
import React, { Component } from 'react';

class Button extends Element {
  static props = {
    name: String,
    onClick: Event
  };
  render() {
    return (
      <button onClick={this.onClick}>
        <slot />
      </button>
    );
  }
}

export default class extends Component {
  optionalParentRefCallback = () => {};
  state = {
    clicked: false
  };
  render() {
    return (
      <Button
        ref={setProps({
          onClick(e) {
            this.setState({ clicked: e.detail.clicked });
          }
        })}
      >
        {this.state.clicked ? 'Clicked!' : 'Click me'}
      </Button>
    );
  }
}
```
npm package: @skatejs/element-snabbdom
Description: A SkateJS renderer for Snabbdom.
Author: Trey Shugart
Latest version: 0.0.1

# element-snabbdom

> SkateJS renderer for [Snabbdom](https://github.com/snabbdom/snabbdom)

## Install

```sh
npm i @skatejs/element-snabbdom snabbdom
```

## Usage

```js
import Element, { h } from '@skatejs/element-snabbdom';

class Hello extends Element {
  static modules = [
    require('snabbdom/modules/attributes').default,
    require('snabbdom/modules/eventlisteners').default,
    require('snabbdom/modules/class').default,
    require('snabbdom/modules/props').default,
    require('snabbdom/modules/style').default,
    require('snabbdom/modules/dataset').default
  ];
  render() {
    return h('div', `Hello, `, h('slot'), '!');
  }
}

customElements.define('x-hello', Hello);
```

It's possible to use JSX via [snabbdom-pragma](https://github.com/Swizz/snabbdom-pragma).
npm package: @skatejs/renderer-lit-html
Description: A SkateJS renderer for Lit HTML.
Author: Trey Shugart
Latest version: 0.2.2

# skatejs/renderer-lit-html

SkateJS renderer for [Lit HTML](https://github.com/PolymerLabs/lit-html).

Please note `renderer-lit-html` uses Lit HTML's extended renderer by default. This provides slightly different
than default, and enhanced, functionality as described
[here](https://github.com/PolymerLabs/lit-html/blob/master/src/lib/lit-extended.ts#L25).

## Install

```sh
npm install skatejs lit-html @skatejs/renderer-lit-html
```

## Usage

This assumes knowledge of SkateJS.

```js
import { html } from 'lit-html';
import { withComponent } from 'skatejs';
import withLitHtml from '@skatejs/renderer-lit-html';

class MyComponent extends withComponent(withLitHtml()) {
  render() {
    return html`Hello, <slot />!`;
  }
}
```
npm package: @skatejs/renderer-preact
Description: A SkateJS renderer for Preact.
Author: Trey Shugart
Latest version: 0.3.3

# skatejs/renderer-preact

> SkateJS renderer for Preact.

## Install

```sh
npm install @skatejs/renderer-preact preact skatejs
```

## Usage

The simple use case is if you're using Preact as a rendering layer.

```js
import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import Preact from 'preact';

class WcHello extends withComponent(withPreact()) {
  static props = {
    yell: props.boolean
  };
  renderCallback({ name }) {
    return <div>Hello, {yell ? <strong>{children}</strong> : children}!</div>;
  }
}

customElements.define('wc-hello', WcHello);
```

A more complex use case is if you have an existing Preact component that you
want to wrap in a web component.

```js
import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h, Component } from 'preact';

// Preact component we want to wrap in the web component.
class PreactHello extends Component {
  render() {
    const { children, yell } = this.props;
    return <div>Hello, {yell ? <strong>{children}</strong> : children}!</div>;
  }
}

// Web component that renders using Preact. This is all you need
// to do to wrap the Preact component. All props can be passed
// down and {children} becomes <slot />.
class WcHello extends withComponent(withPreact()) {
  static props = {
    // Unfortunately we need to declare props on the custom element
    // because it needs to be able to link between observed attributes
    // and properties.
    //
    // You could write a Babel plugin to transform Flow types to
    // property definitions, but we haven't done that yet.
    yell: props.boolean
  };
  render({ props }) {
    return <PreactHello {...props} />;
  }
}

customElements.define('wc-hello', WcHello);
```

For either example, you can now just write HTML:

```html
<wc-hello yell>World</wc-hello>
```
npm package: @skatejs/renderer-snabbdom
Description: A SkateJS renderer for Snabbdom.
Author: Luiz Américo Pereira Câmara
Latest version: 0.0.1

# skatejs/renderer-snabbdom

> SkateJS renderer for [Snabbdom](https://github.com/snabbdom/snabbdom)

## Install

```sh
npm install @skatejs/renderer-snabbdom snabbdom skatejs
```

## Usage

`skatejs/renderer-snabbdom` exports a factory function that creates a renderer mixin. It accepts as argument an array
of snabbdom modules

```js
import { props, withComponent } from 'skatejs';
import createRenderer from '@skatejs/renderer-snabbdom';
import h from 'snabbdom/h';

// configure the renderer with the required modules
const withSnabbdom = createRenderer([
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/eventlisteners').default,
  require('snabbdom/modules/class').default,
  require('snabbdom/modules/props').default,
  require('snabbdom/modules/style').default,
  require('snabbdom/modules/dataset').default
]);

class WcHello extends withComponent(withSnabbdom()) {
  static props = {
    name: props.string
  };
  render({ name }) {
    return h('div', `Hello, ${name}!`);
  }
}

customElements.define('wc-hello', WcHello);
```

It's possible to use JSX syntax through [Snabbdom-pragma](https://github.com/Swizz/snabbdom-pragma)
npm package: @skatejs/sk-router
Description: A web component router that's compatible with code-splitting out of the box.
Author: Trey Shugart
Latest version: 0.3.3

# sk-router

> A web component router that's compatible with code-splitting out of the box.

## Install

```sh
npm i @skatejs/sk-router
```

## Usage

In these examples we've used the hyperscript `h` export in
[@skatejs/val](https://github.com/skatejs/val) to create _real_ DOM using JSX so
that we can express them in a readable manner while still setting complex data
types **_(which you cannot do with HTML)_**.

```js
/** @jsx h */

import { Route, Router } from '@skatejs/sk-router';
import { h } from '@skatejs/val';
import { Index, NotFound } from './pages';

const router = (
  <Router>
    <Route page={Index} path="/" />
    <Route page={NotFound} path="*" />
  </Router>
);
```

The `page` prop on the `Route` component is just a function that returns a DOM
node. This means that it can be:

* A custom element constructor.
* A function that mounts a React DOM tree to a node and returns the node.
* A function that does anything, so long as it returns a normal DOM node.

### Optimisation / code-splitting

The example above loads everything up front. However, in a large app, you'd
probably want to split up your pages into separate resources. Webpack can easily
do this for you using `import()`. All you need to do to enable this is to:

1. Use a function as your component instead of a constructor.
2. Call `import()` in the function.
3. Ensure the module you import contains a default export that can be anything
   that `page` takes, as mentioned above.

```js
const lazyRoute = <Route page={() => import('./pages/docs')} path="/docs" />;
```

### Links

We use PageJS underneath the hood, but we also export a `Link` component so that
it doesn't have to capture all anchor clicks on the page, which could cause some
confusion.

```js
import { Link } from '@skatejs/sk-router';

const indexLink = <Link href="/">Home</Link>;
```
npm package: @skatejs/vert
Description: Describe vert here
Author: Trey Shugart
Latest version: 0.1.0

# vert

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe vert here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @skatejs/web-components
Description: Including the web component polyfills just got simpler.
Latest version: 1.0.0

# SkateJS Web Components

This repo gives you the bare minimum you'd need in an environment that doesn't support Custom Elements or Shadow DOM natively. It gives you support for the V1 APIs of each respectively and ensures all their polyfill dependencies are met all through a single import.

*Using this is great for development, or if you need all of the features polyfilled. However if you only need some of the features, it's recommended that you include them piecemeal instead.*

*Once the polyfills are all set up on polyfills.io, then it's likely we'll recommend using that instead as it'll only deliver what the visiting browser needs.*

### Installing

You can install via NPM:

```sh
npm install @skatejs/web-components
```

Or you can download it from unpkg:

```
https://unpkg.com/@skatejs/web-components
```



### Importing

You can import it using any module format:

```js
// ES2015
import '@skatejs/web-components';

// CommonJS
require('@skatejs/web-components');

// AMD
require(['@skatejs/web-components']);
```

Or you can use a `<script>` tag:

```html
<script src="https://unpkg.com/@skatejs/web-components/umd/@skatejs/web-components.min.js"></script>