open-index/open-npm huggingface dataset:
npm package: @lukeapage/eslint-plugin-ecmascript-compat
Description: ESLint plugin for checking JavaScript code compatibility with target browsers and Node.js versions
Author: Robat Williams
Latest version: 3.1.0

<!-- prettier-ignore-start -->
[![npm version](https://badge.fury.io/js/eslint-plugin-ecmascript-compat.svg)](https://badge.fury.io/js/eslint-plugin-ecmascript-compat)
[![npm downloads](https://img.shields.io/npm/dm/eslint-plugin-ecmascript-compat.svg)](http://www.npmtrends.com/eslint-plugin-ecmascript-compat)
<!-- prettier-ignore-end -->

# eslint-plugin-ecmascript-compat

> ESLint plugin for checking JavaScript code compatibility with target browsers and Node.js versions

```bash
npm install --save-dev eslint-plugin-ecmascript-compat
```

```json
// .eslintrc.json
{
  "extends": ["plugin:ecmascript-compat/recommended"]
}

// Alternatively
{
  "plugins": ["ecmascript-compat"],
  "rules": {
    "ecmascript-compat/compat": [
      "error",
      {
        // Optionally, specify provided polyfills
        "polyfills": [
          "Array.prototype.includes"
        ]
      }
    ]
  }
}
```

```
// .browserslistrc
Chrome >= 64
Firefox >= 58
```

<!--- Absolute link, in order to work from NPM website --->

The optional `polyfills` option is used to specify polyfills that your application loads. These features are therefore considered supported in all browsers. Features that are polyfillable and can be specified here can be found in the [rule schema](https://github.com/robatwilliams/es-compat/blob/master/packages/eslint-plugin-ecmascript-compat/lib/rule.js).

For example usage, see sibling directory: `eslint-plugin-ecmascript-compat-example`

<!--- Absolute link, in order to work from NPM website --->

➡ For more information, see the [main readme](https://github.com/robatwilliams/es-compat#readme).
npm package: @lukeboyle/array-item-toggle
Description: A helper function to check if an item is an array and add it if not.
Author: Luke Boyle
Latest version: 1.0.2

# Array Item Toggle

[![Build Status](https://travis-ci.org/3stacks/array-item-toggle.svg?branch=master)](https://travis-ci.org/3stacks/array-item-toggle)
[![Coverage Status](https://coveralls.io/repos/github/3stacks/array-item-toggle/badge.svg?branch=master)](https://coveralls.io/github/3stacks/array-item-toggle?branch=master)

A helper function to check if an item is:

- in an array -> remove it from the array,
- not in the array -> add it to the array

## Usage

```javascript
import toggle from 'array-item-toggle';

toggle([1, 2, 3], 1)

// returns a new array = [2, 3];

toggle([2, 3], 1)

// returns a new array = [2, 3, 1];

```
npm package: @lukeboyle/es6-module-boilerplate
Description: A simple way to get started with making ES6 modules. Uses rollup to compile your ES6 to Commonjs and a basic Gulp process for a demo
Author: Luke Boyle
Latest version: 1.1.1

# React Component Boilerplate

This is a simple boilerplate project to get started quickly with ES6 modules.
The purpose of this is to make a module to easily publish on npm.

## Installation

- `npm install @lukeboyle/es6-module-boilerplate`
- Copy the files from node modules into your project root

## Getting Started

## Building your module

- Develop your component in `src/index.js`
- `npm run build` will run rollup on `index.js` under the `src` folder
- Add your component to the demo project js
- `npm run build-demo` will run the gulp default process in `demo/src`
- The gulp process will use babelify to transform the es6 to commonjs.
npm package: @lukeboyle/get-filename-from-path
Description: ## Usage
Author: Luke Boyle
Latest version: 1.0.3

# get-filename-from-path

## Usage

```javascript
import getFilenameFromPath from '@lukeboyle/get-filename-from-path';

getFilenameFromPath('/some/path/some-file.js');

// => 'some-file'
```

## API

### <Function> getFilenameFromPath 

#### Arguments

- <string> path

#### Return value

- <string> filename - The filename extracted from the path provided in argument one
npm package: @lukeboyle/lazy-slider
Description: Ultra lightweight vanilla js slider
Author: Luke Boyle
Latest version: 1.0.1

# LazyLoad Slider

[![Build Status](https://travis-ci.org/3stacks/lazy-slider.svg?branch=master)](https://travis-ci.org/3stacks/lazy-slider)

View the demo site - [http://3stacks.github.io/lazy-slider/](http://3stacks.github.io/lazy-slider/)

## Importing the module

```javascript
  // ES6
  import LazySlider from 'lazy-slider';
```

```javascript
  // CommonJS 
  const LazySlider = require('lazy-slider');
```

## API & Usage

```javascript
const options = {
  // the slides' container element
  target: HTMLElement,
  
  // slide 1 is hard-coded in the page already
  slides: [
    'path/to/slide-2.html',
    'path/to/slide-3.html',
    'path/to/slide-4.html'
  ],
  
  // The class applied to each slide
  slideClass: 'ls-slide',
  
  animationClasses: {
    current:  'ls-current',
    next:     'ls-next',
    previous: 'ls-previous',
    entering: 'ls-entering',
    exiting:  'ls-exiting'
  },
  
  timings: {
    duration: 2000,
    transition: 500
  }
};

// init (call this when page has finished loading)
const slider1 = new lazySlider(options);
```

## API

### destroy()

#### Purpose

The destroy method will clear out all slides except for the initial one
and set it to the current.

#### Usage

```javascript
  slider1.destroy()
```

If you wish to use destroy in a timeout, ensure you bind the slider to 
the destroy `this`.

```javascript
  setTimeout(slider1.destroy.bind(slider1), 1000);
```
npm package: @lukeboyle/local-storage-manager
Description: A module to easily manage data in local storage.
Author: Luke Boyle
Latest version: 3.0.1

## Local Storage Manager

[![Build Status](https://travis-ci.org/3stacks/local-storage-manager.svg?branch=master)](https://travis-ci.org/3stacks/local-storage-manager)
[![Coverage Status](https://coveralls.io/repos/github/3stacks/local-storage-manager/badge.svg?branch=master)](https://coveralls.io/github/3stacks/local-storage-manager?branch=master)

A simple package used for creating, storing and deleting data from local storage.

Current features:
* Enter key and data into local storage
* Get the data for a given key
* Remove all data for a given key

### Installation

`npm install @lukeboyle/local-storage-manager --save`

### Usage

- When setting data, put your namespace as the third argument and all data 
will be stored under that key
- You can then get keys from under that namespace, or just get that key 
and dump all your namespace data

```javascript
const localStorageManager = require('@lukeboyle/local-storage-manager'); // OR
import * as localStorageManager from '@lukeboyle/local-storage-manager'; // OR
import {getItem, setItem, removeItem} from '@lukeboyle/local-storage-manager';

// Creating a key and entering a string into local storage

setItem('string1', 'data');
setItem('some/path', 'some string');
setItem(['other', 'path'], 'some string');

// Second argument of setItem is any type that can be JSON.stringified

// Getting data bound to a key

getItem('string1'); // => 'data'
getItem('some/path'); // => 'some string'
getItem(['other', 'path']); // => 'some string'

// Removing a key and all data bound to it

removeItem('string1');
removeItem('some/path');
removeItem(['other', 'path']);

```

## API

### setItem

#### Arguments

- path - `string | Array<string>` e.g. `'noPath'`, `'short/path'`, `['array', 'path']` 
*(array and slash separated paths can not be combined)*
- data - `any` - Any data valid for `JSON.stringify`

### getItem

#### Arguments

- path - `string | Array<string>` e.g. `'noPath'`, `'short/path'`, `['array', 'path']` 
*(array and slash separated paths can not be combined)*
- defaultValue - `any` - If key doesn't exist in Storage, this will be returned instead

### removeItem

#### Arguments

- path - `string | Array<string>` e.g. `'noPath'`, `'short/path'`, `['array', 'path']` 
*(array and slash separated paths can not be combined)*

### Running the Tests

run `npm test`

## Contact

Find me on [Github](https://github.com/3stacks/ "Github"),
or at my [website](http://lukeboyle.com "My website")
npm package: @lukeboyle/mouse-near
Description: Trigger a callback when the mouse is near an element
Author: Luke Boyle
Latest version: 1.0.4

# mouse-near 

[![Build Status](https://travis-ci.org/3stacks/mouse-near.svg?branch=master)](https://travis-ci.org/3stacks/mouse-near)

Detect when the mouse is near/on an element of your choosing and trigger a callback.

## Usage

- `npm install @lukeboyle/mouse-near`

```javascript
import mouseNear from '../src/index';

mouseNear('.element-1', () => {
    document.querySelector('.element-1').classList.add('active');
});
```

See the demo [mouse-near.3stacks.me](mouse-near.3stacks.me).

### Parameters

| Argument | Type | Example |
| ------ | ----- | ------ |
| element | HTMLElement OR querySelector String | document.querySelector('#element'); |
| callback | Function | (event) => { console.log(event) }
| options | Object | { distance: 40 } |

#### Options

Currently supported options

- distance - The amount in pixels to trigger outside the bounds of the selected element/

## Known Issues

mouse-near depends on `element.getBoundingClientRect()`, so positioning styles must be applied before 
the listeners are added. If you are using a deferred script in the head, you must add an eventListener for 'load'.

Example: 

```javascript
import mouseNear from 'mouse-near';

window.addEventListener('load', () => {
    mouseNear('.element', function() {
        console.log('it\'s gucci');
    })
})
```
npm package: @lukeboyle/react-color-picker
Description: A simple color picker component, pass in an array of colours and get a colour hex in your callback
Author: Luke Boyle
Latest version: 1.0.3

# React Color Picker

A highly customisable color picker component for React. The color picker 
supports onClick, onTouchStart and onTouchMove. 

View the demo site [react-color-picker.3stacks.me](react-color-picker.3stacks.me)

## Installation

- `npm install @lukeboyle/react-color-picker`

## Usage

```javascript
import React from 'react';
import reactDom from 'react-dom';
import ColorPicker from '@lukeboyle/react-color-picker';

const mainElement = document.getElementById('root');

reactDom.render(<ColorPicker columns={7} height={400} width={500} style={{border: '1px solid black'}} onChange={console.debug.bind(console)}/>, mainElement);
```

## Props

### colors

- type: Array
- required: no
- default: see [http://clrs.cc](http://clrs.cc)

Define your own array of hex codes and the color picker will fill in the canvas for you.

### columns

- type: Number
- required: no
- default: 7

The number of columns to spread your colours across.

### onChange

- type: Function
- required: yes
- default: none

The onChange function. Returns the hex color value chosen by user.

### height

- type: Number
- required: no
- default: 500

The height in pixels of the canvas.

### width

- type: Number
- required: no
- default: 500

The width in pixels of the canvas.

## Problems

### The rectangles are rendering at the wrong size

Make sure you aren't setting the width and height using CSS and use the props instead.
npm package: @lukeboyle/react-component-boilerplate
Description: A simple way to get started with making ES6 modules. Uses rollup to compile your ES6 to Commonjs and a basic Gulp process for a demo
Author: Luke Boyle
Latest version: 1.1.0

# React Component Boilerplate

This is a simple boilerplate project to get started with react components.
The purpose of this is to make a component to easily publish on npm.

## Installation

- `npm install @lukeboyle/react-component-boilerplate`
- Copy the files from node modules into your project root

## Getting Started

## Building your module

- Develop your component in `src/index.jsx`
- `npm run build` will run rollup on `index.jsx` under the `src` folder
- Add your component to the demo project js
- `npm run build-demo` will run the gulp default process in `demo/src`
- The gulp process will use babelify to transform the jsx, so you may import your un-transpiled jsx file.
npm package: @lukeboyle/react-omnislider
Description: A React component wrapper for the omni-slider from PricelineLabs
Author: Luke Boyle
Latest version: 1.0.4

# React OmniSlider

The OmniSlider was created by PricelineLabs and it's a two way slider with a nice API.

See the Github page - [https://github.com/pricelinelabs/omni-slider](https://github.com/pricelinelabs/omni-slider)

For the React demo, see - [http://3stacks.github.io/react-omnislider/](http://3stacks.github.io/react-omnislider/)

## Installation

- `npm install @lukeboyle/react-omnislider --save`

## Usage

In your React app, import the OmniSlider component.

```javascript
  import OmniSlider from 'react-omnislider'
  
  <OmniSlider/>
  
  <OmniSlider options={{ start: 100, end: 1000, min: 10, max: 1500 }}/>
```

Or when using Redux

```javascript
  	
  	function appReducer(state, action) {
  	  switch(action.type) {
  	   case('SLIDER_VALUE_CHANGED'):
  	     console.log(action.payload.positions);
      break;
  	  }
  	}
  	
  	const onSliderChanged = function(positions) {
  	  store.dispatch({
        type: 'SLIDER_VALUE_CHANGED',
        payload: {
          positions
        }
      })
    }

  <OmniSlider onChange={onSliderValueChanged} options={{ start: 100, end: 1000, min: 10, max: 1500 }}/>

```

There are no required props, however, there are several you can use

## Props

- options (Object | Required)
- onStart (Function | Optional) - Callback for when the slider **starts moving**
- onChange (Function | Optional) - Callback for when the slider **is moving**
- onFinish (Function | Optional) - Callback for when the slider **stops moving**

## options

For a list of all options, see the omni-slider docs - [https://github.com/pricelinelabs/omni-slider](https://github.com/pricelinelabs/omni-slider)

## onStart, onChange, onFinish

All of these functions return the positions of the left and right in an object.

```javascript
  Object { left: 0, right: 80.5497 }
```

## Developing the plugin

- Clone the repo
- Run `npm install`
- Make changes in `src/index.jsx`
- Build the changes with `npm run build` to convert it to commonjs
npm package: @lukeboyle/sync-vars
Description: Easily sync and update your css variables at runtime from JavaScript
Author: Luke Boyle
Latest version: 1.0.1

# Sync Vars

In a recent project I found myself setting colour theme variables in my 
JavaScript. To reduce double handling, I was setting the theme colours like this:

```
const themeColors = {
	primary: {
		hex: '#2196f3',
		color: 'blue'
	},
	secondary: {
		hex: '#F44336',
		color: 'red'
	}
};
```

This object was being passed to vue-material to set the theme colours in there, and then I used the function to set my 
CSS Variables on my root element.

## Installation

### Yarn

- `yarn add @lukeboyle/sync-vars`

### npm

- `npm install @lukeboyle/sync-vars`

## API

### syncVars

| Argument | Type | Example |
| ----- | ----- | ----- |
| element | HTMLElement | `document.querySelector('html')` |
| varName | String | `primary-color` |
| varValue | String | `#FEFEFE` |

## Usage

```javascript
import syncVar from '@lukeboyle/sync-vars'

const vars = {
  'primary-color': 'green',
  'primary-border': 'blue'
};

Object.entries(vars).forEach(([varName, varValue]) => {
    syncVar(document.querySelector('html'), varName, varValue);
});

```

## CSS Variable Test

The package comes bundled with a feature test for css variables. You can use it like this:

### < IE11

```javscript
import syncVar, { testCSSVariables } from '../../../src/index';

function init() {
  // If you give testCSSVariables a function, it will return a bool of the test result
  testCSSVariables(response => {
    if (response) {
      import syncVar from '@lukeboyle/sync-vars'
      
      const vars = {
        'primary-color': 'green',
        'primary-border': 'blue'
      };
      
      Object.entries(vars).forEach(([varName, varValue]) => {
          syncVar(document.querySelector('html'), varName, varValue);
      });
    } else {
      console.warn('color-sync: You are using a browser that does not support CSS Variables, upgrade your browser for the full power');
    }
  });
}

window.addEventListener('load', init);
```

### > IE11

```javscript
import syncVar, { testCSSVariables } from '../../../src/index';

function init() {
  testCSSVariables().then(
    () => {       
      syncVar(document.querySelector('html'), 'primary-color', 'red');
    },
    error => {
        console.warn(error);
        // 'color-sync: You are using a browser that does not support CSS Variables, upgrade your browser for the full power'
    }
  );
}

window.addEventListener('load', init);
```

Results in

```html
<body style="--primary-color: green; --primary-border: blue;">
  ...
</body>
```

## Coming Soon

- Keep CSS variables in sync with Javascript
npm package: @lukeboyle/timetools
Description: Simple tools for dealing with millisecond times in Javascript.
Author: Luke Boyle
Latest version: 2.0.2

# timetools

[![Build Status](https://travis-ci.org/3stacks/timetools.svg?branch=master)](https://travis-ci.org/3stacks/timetools)
[![Coverage Status](https://coveralls.io/repos/3stacks/timetools/badge.svg?branch=master&service=github)](https://coveralls.io/github/3stacks/timetools?branch=master)
[![StyleCI](https://styleci.io/repos/49603638/shield)](https://styleci.io/repos/49603638)

## What does timetools do?

timetools makes it easier to deal with times in Javascript. For example, new Date().getTime() at the time of writing 
this returns 1452734171694.

If you want to know how many days/weeks/years there are in that, your code can get pretty crowded with maths. That's 
where timetools comes in.

## Installation 

`npm install --save timetools`

## Usage

### format

format accepts a value in milliseconds and converts it to a unit of your choice. Such as years, days, weeks.

### A simple example

```javascript

var timeTools = require('time-tools')

// 1000 ms to seconds
timeTools.format(1000, 'seconds');

// > 1


```

### A slightly more intense example

```javascript

var millisecondsPerDay = 1000 * 60 * 60 * 24;

timeTools.format(millisecondsPerDay * 3, 'days');

// > 3



```

### Applying these examples

```javascript

// The current date
var date1 = new Date().getTime();
// The current date minus 3 years
var date2 = new Date().setFullYear(new Date().getFullYear() - 3);

// convert the difference of those two dates into days
timeTools.format(date1 - date2, 'days');

// > 1095

```

You could also replace 'days' in the last example with 'weeks' or 'years'.

### parse

parse takes the number of a unit of time and converts it to milliseconds

### A simple example

```javascript

// 1 day in ms
timeTools.parse(1, 'day');

// > 86400000

```

### Applying this example

```javascript

var a = new Date().get Time() 

a - timeTools.parse(3, 'years')

// > 1452856052790

```

This returns the current time, minus 3 years. You could also take off days, weeks, hours etc.

## API 

Available functions

### format

- Takes a time in milliseconds and returns your chosen unit.

#### Arguments

| Argument | Type   | Default | Options |
| -------- | ------ | ------- | ------- |
| rawTime  | Number | None    | None    |
| timeUnit | String | None    | nanoseconds, microseconds, milliseconds, seconds, minutes, hours, days, weeks, years |
          
### parse

- Takes a number and a unit and returns the value in milliseconds.

#### Arguments 

| Argument | Type   | Default | Options |
| -------- | ------ | ------- | ------- |
| number   | Number | None    | None    |
| timeUnit | String | None    | nanoseconds, microseconds, milliseconds, seconds, minutes, hours, days, weeks, years |

## Running tests

Simply run  ` npm install ` and run  ` npm test `
npm package: @lukeboyle/when-clicked-outside
Description: Micro-library to trigger a callback when a user clicks anything BUT your target element.
Author: Luke Boyle
Latest version: 2.1.1

Add a click listener to fire a callback for everywhere on the window except your chosen element. 

# Installation

- run `npm install @lukeboyle/when-clicked-outside`

# Basic Usage

```javascript

// ES6
import whenClickedOutside from '@lukeboyle/when-clicked-outside';
// CommonJs
const whenClickedOutside = require('@lukeboyle/when-clicked-outside');

whenClickedOutside('#element', whenClickedOutsideCallback, {});

function whenClickedOutsideCallback(event) {
    console.log('hello');
}

```

# Advanced Usage

```javascript

// ES6
import whenClickedOutside from '@lukeboyle/when-clicked-outside';
// CommonJs
const whenClickedOutside = require('@lukeboyle/when-clicked-outside');

const listener = whenClickedOutside('#element', whenClickedOutsideCallback, {});

function whenClickedOutsideCallback(event) {
    console.log('hello');
    listener.destroy();
}

```

# API

## whenClickedOutside

### Arguments

#### Element

Type: querySelector String OR HTMLElement

e.g. 'body', '.class-name', '#id', document.getElementById('id')

#### Callback

Type: Function

#### Config

Type: Object

To set the standard addEventListener, add an 'options' element to the config object

### Returns

Returns an object with a reference to your element, and a destroy function to remove the listener.

# Changelog

## 2.0.5

- fix: add missing dependency

## 2.0.4

- fix: remove reference to window.event to address a bug in firefox

## 2.0.3

- fix: add explicit reference to the `MouseEvent` in click verification function

## 2.0.2

- docs: update the readme with commonJs require

## 2.0.1

- fix: build issue when publishing

## 2.0.0

- breaking change: Export whenClickedOutside by default

## 1.0.2

- refactor: tidy verifyElementExists function

## 1.0.1

- fix: add error handling for incorrect types
- fix: add error handling for non-existent elements