open-index/open-npm huggingface dataset:
npm package: @plntr/eslint-config
Description: Planitar eslint configuration
Latest version: 1.9.0

# eslint-config-plntr

This package provides Planitar's .eslintrc as an extensible shared config. This
config should be used in any JS project developed by Planitar.

The package follows
[Planitar's JS code conventions](https://github.com/PlanitarInc/youriguide.com/wiki/Code-Conventions#javascript)
and is built on top of [Airbnb's eslint config](https://github.com/airbnb/javascript).

## Usage

Three ESLint configurations are provided:
- `esm` is an ES6+ configuration.
- `es5` is an ES5 configuration.
- `react-jsx` is a React specific configuration.
- `vue` is a Vue specific configuration.

All three ESLint configurations listed above come in 2 variations:
- a strict and unforgiving configuration that should be used before code is
  committed or deployed to production.
- a more relaxed configuration where syntactic rules are set to warning level,
  that can be used in dev environment; prefixed with `-dev`.

List of provided configurations:

| Type | "extends" path | Description |
|---|---|---|
| ES6+ | `plntr/esm` | strict `esm` config |
|   | `plntr/esm-dev` | relaxed `esm` config |
| React JSX | `plntr/react-jsx` | strict `react-jsx` config |
|   | `plntr/react-jsx-dev` | relaxed `react-jsx` config |
| Vue | `plntr/vue` | strict `vue` config |
|   | `plntr/vue-dev` | relaxed `vue` config |
| Jest | `plntr/jest` | strict `jest` config |
|   | `plntr/jest-dev` | relaxed `jest` config |
| Typescript | `plntr/typescript` | strict `typescript` config |
|   | `plntr/typescript-dev` | relaxed `typescript` config |
| ES5 | `plntr/es5` | strict `es5` config |
|   | `plntr/es5-dev` | relaxed `es5` config |

In order to use any of the configs just add `"extends": "<IMPORT PATH>"` to your
eslintrc.* file. For example, if you want to use React JSX rules, add
`"extends": "react-jsx"`.

By default if you just import the package, `"extends": "plntr"`, a strict `esm`
config is used.

Note: [`eslint` documentation mentions](https://eslint.org/docs/user-guide/configuring#using-a-shareable-configuration-package):

> A sharable configuration is an npm package that exports a configuration object. Make sure the package has been installed to a directory where ESLint can require it.
>
> The extends property value can omit the eslint-config- prefix of the package name.

Since the package name is `eslint-config-plntr`, when it is used in `extends`
property the prefix can be omitted, hence the "extends" paths listed above all
use `plntr` instead of `eslint-config-plntr`.
npm package: @plocca/streamelements-widget-events
Description: StreamElements Widget JS Window Event API
Author: plocca
Latest version: 1.0.2

# 👨‍💻 streamelements-widget-events

Here at [plocca](https://plocca.com) we're trying to make developing widgets
for twitch easier, faster and hassle-free. A big part of our mission in
creating beautiful widgets for twitch is to help developers make better widgets
ourselves.

We're quite unhappy with _StreamElements_ APIs for creating widgets. To make
sure that you can make great widgets without the unsafety of their API, we're
incrementally sharing our code with the community by open sourcing it.

This is the first of a long chain of repos that we want to share with the
community!

## What is it?

This is a set of typescript interfaces for ensuring type safety with the
Streamelements Window Event JS APIs.

So, instead of writing:

```js
window.addEventListener('follower-latest', (evt) => {
  // What fields does evt have?
  // What do those fields mean?
});
```

you can write safe `typescript`:

```typescript
window.addEventListener(WindowEventType.FollowerLatest, (evt: EventObject)) {
  // We know what fields `evt` has and our editor tells us -- no need to google
  // back and forth:
  const detail = <FollowerLatestEvent>evt.detail;

  // All fields in detail are nicely documente and we know what they do!
  // For example, the JSDoc for detail.name says "Username of the follower"!
}
```

Check out how autocomplete works in my editor `nvim`:

![autocomplete](./.github/autocomplete.png)

Some common ways to get autocomplete working in your editor are:

* Via [Typescript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript)
* Via [coc-tsserver for neovim](https://github.com/neoclide/coc-tsserver)

## Getting Started

Cool, you're on-board! Here's how you can get started!

First, grab the package off of the `npm`:
```bash
npm i --save @plocca/streamelements-widget-events
```

Then, in your `typescript` code, simply include it:

```typescript
import * as StreamElements from '@plocca/streamelements-widget-events';
```

## Usage

Now that you have the library, we'd recommend using the `delegateEvent`
function from it to handle your events. At plocca, we use it like so:

```typescript
const ourListener = (obj: StreamElements.EventObject) => StreamElements.delegateEvent(obj, {
  StreamElements.WindowEventType.FollowerLatest: (evt: StreamElements.FollowerLatestEvent) => {
    // Our super secret saucy code!
  },
  StreamElements.WindowEventType.Message: (evt: StreamElements.MessageEvent) => {
    // Our super secret saucy code!
  },
  // ... Maybe more!
});

window.addEventListener(StreamElements.WindowEvent.EventReceived, ourListener);
```

## Contributing

Please see the [CONTRIBUTING.md](./CONTRIBUTING.md) document for info on how to
contribute!

## License

This software is licensed under the MIT license! That means anyone can use it,
but we take no responsibility in this software's efficacy! See
[LICENSE.md](./LICENSE.md) for detailed info.
npm package: @plodovi/sdk
Description: An SDK containing web components for integrating with plodovi
Author: Plodovi
Latest version: 1.31.0

# Plodovi SDK

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i plodovi-products
```

## Usage

```html
<script type="module">
  import 'plodovi-products/plodovi-products.js';
</script>

<plodovi-products></plodovi-products>
```

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @plodswap/uikit
Description: Set of UI components for plodswap projects
Latest version: 0.3.6

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@plodswap/uikit)](https://www.npmjs.com/package/@plodswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@plodswap/uikit)](https://www.npmjs.com/package/@plodswap/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @plodswap/uikit`

***Note**: In case you want to use the older version of the Pancake UIkit, you should install @pancakeswap-libs/uikit, instead, but we recommend using the latest version of the UIkit.*


## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@plodswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@plodswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @plogg/animation
Description: animation wrapper nuxtJS module for 3D animation of Synode
Author: anh
Latest version: 1.0.3

# animation
animation wrapper nuxtJS module for 3D animation of Synode

# Installation

```npm install @plogg/animation```

then put the follwing in nuxt.config.js

```
modules: [
	["@plogg/animation", { namespace: 'animation' }]
]
```
npm package: @plogg/three
Description: JavaScript 3D library
Author: mrdoob
Latest version: 1.0.7

three.js
========

[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]
[![DeepScan][deepscan]][deepscan-url]
[![Discord][discord]][discord-url]

#### JavaScript 3D library ####

The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

[Examples](https://threejs.org/examples/) &mdash;
[Documentation](https://threejs.org/docs/) &mdash;
[Wiki](https://github.com/mrdoob/three.js/wiki) &mdash;
[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) &mdash;
[Questions](https://stackoverflow.com/questions/tagged/three.js) &mdash;
[Forum](https://discourse.threejs.org/) &mdash;
[Slack](https://join.slack.com/t/threejs/shared_invite/zt-rnuegz5e-FQpc6YboDVW~5idlp7GfDw)

### Usage ###

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.

```javascript
import * as THREE from 'three';

// init

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}
```

If everything went well, you should see [this](https://jsfiddle.net/7u84j6kp/).

### Cloning this repository ###

Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size.

```sh
git clone --depth=1 https://github.com/mrdoob/three.js.git
```

### Change log ###

[Releases](https://github.com/mrdoob/three.js/releases)


[npm]: https://img.shields.io/npm/v/three
[npm-url]: https://www.npmjs.com/package/three
[build-size]: https://badgen.net/bundlephobia/minzip/three
[build-size-url]: https://bundlephobia.com/result?p=three
[npm-downloads]: https://img.shields.io/npm/dw/three
[npmtrends-url]: https://www.npmtrends.com/three
[deepscan]: https://deepscan.io/api/teams/16600/projects/19901/branches/525701/badge/grade.svg
[deepscan-url]: https://deepscan.io/dashboard#view=project&tid=16600&pid=19901&bid=525701
[discord]: https://img.shields.io/discord/685241246557667386
[discord-url]: https://discord.gg/56GBJwAnUS