open-index/open-npm huggingface dataset:
npm package: @loopmode/events
Description: Unified global event handling
Author: Jovica Aleksic
Latest version: 1.0.5

# @loopmode/events

Unified global event handling.

Registers no more than a single listener per event type, invokes all registered callbacks.
The event listener is created when needed and removed again when obsolete.

-   Safe support for passive events via [detect-passive-events](https://github.com/rafrex/detect-passive-events)
-   Currently, only `window`, `document` and `body` are supported as event targets (Default is `window`)

<br />
Supports the same signature as [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener),
so it should be safe to search and replace in your code as follows:

-   `window.addEventListener` -> `Events.on`
-   `document.addEventListener('mousedown', this.handleMouseDown)` -> `Events.on.document('mousedown', this.handleMouseDown)`
-   `document.addEventListener('mousedown', this.handleMouseDown)` -> `Events.on('mousedown', this.handleMouseDown, {target: document})`
-   `window.removeEventListener` -> `Events.off`
-   ...

## Documentation

See [https://loopmode.github.io/events/](https://loopmode.github.io/events/)

## Motivation

Keep the number of global event listeners low, especially when using in react components that are rendered dozens or hundrets of time on the screen.
Support passive events, stay as light-weight as possible.

## Installation

```
yarn add @loopmode/events
```

## Usage

The default export is a singleton instance of the class. Typically, that's what you want.

Basic usage:

```
import Events from '@loopmode/events';

function onResize(event) {
    console.log('resize', event)
}

Events.on('resize', onResize);
Events.off('resize', onResize);


// remember to pass the same options when removing listeners:
Events.on('resize', onResize, {capture: true});
Events.off('resize', onResize, {capture: true})


// alternatively, use returned object with dispose function:
const listener = Events.on('mousemove', onResize, {capture: true, target: document.body, passive: true})
// no need to provide any arguments
listener.dispose();
```

In react component, with passive option:

```
import React, { PureComponent } from 'react';
import Events from '@loopmode/events';

export class MyComponent extends PureComponent {
    state = {
        delta: 0
    };
    componentDidMount() {
        this.wheelListener = Events.on('wheel', this.handleWheel, { passive: true })
    }
    componentWillUnmount() {
        // same as Events.off('wheel', this.handleWheel, { passive: true })
        this.wheelListener.dispose();
    }
    handleWheel = (event) => {
        this.setState({
            delta: event.deltaY
        })
    };
    render() {
        return (
            <div>{this.state.delta}</div>
        );
    }
}
```

If you need additional instances, use the named `Events` export:

```
import { Events } from '@loopmode/events';

const myEvents = new Events();

function onResize(event) {
    console.log('resize', event)
}

myEvents.on('resize', onResize);
```

Every instance may register up to one global event listener per event type.
npm package: @loopmode/freemarker
Description: Freemarker integration for NodeJS.
Author: Cody Chan
Latest version: 2.0.0

# freemarker

[![NPM version][npm-image]][npm-url]

Freemarker integration for NodeJS

***This fork allows specifying a `{ includesFolder }` option as fourth argument.***

## How to use

  - `JAVA_HOME` should be set properly
  - `npm i freemarker -S`

#### Render string

```javascript
const Freemarker = require('freemarker');

const freemarker = new Freemarker();

freemarker.render('<h1>${title}</h1>', { title: 'test render' }, (err, result) => {
  if (err) {
    throw new Error(err);
  }
  console.log(result);
});
```

*NOTICE: Don't use `#include` in string for rendering.*

#### Render file

```javascript
const Freemarker = require('freemarker');

const freemarker = new Freemarker({ root: __dirname });

freemarker.renderFile(path.join(__dirname, 'index.ftl'), data, (err, result) => {
  if (err) {
    throw new Error(err);
  }
  console.log(result);
});
```
In this example, `path.join(__dirname, 'index.ftl')` can be replaced with `index` or `index.ftl`

## Test
> node v6+

`npm test`

## Known issues
 - `null` is not supported

## LICENSE
MIT

[npm-url]: https://npmjs.org/package/freemarker
[npm-image]: https://img.shields.io/npm/v/freemarker.svg
npm package: @loopmode/react-link
Description: A thin wrapper around the `<a>` tag that allows usage of `javascript:` href.
Latest version: 1.0.0

# @loopmode/react-link

A thin wrapper around the `<a>` tag that allows usage of `javascript:` href.

Currently, React allows this but already prints a deprecation message: `Warning: A future version of React will block javascript: URLs as a security precaution.`
(see [PR 15047](https://github.com/facebook/react/pull/15047))

## Motivation

My original use-case is to render bookmarklets in a react app: Links or buttons users can drag into their browser bookmarks bar. When clicked, these bookmarklets shouldn't navigate; instead, they should execute some function on the current page.

## Installation

```
yarn add @loopmode/react-link
```

```
npm install --save @loopmode/react-link
```

## Usage

Please note that if you're using ESLint, you may still get warnings from the `no-script-url` rule.
There are various ways to disable it, for example you could disable the rule at the top of the file that defines the script url.

```jsx
/* eslint-disable no-script-url */
import React from "react";
import Link from "@loopmode/react-link";

export default function MyBookmarklet() {
    return (
        <Link href="javascript: (function() {window.console.log('clicked')}())">
            exec javascript function
        </Link>
    );
}
```
npm package: @loopmode/react-pretty-json
Description: A react component that pretty-prints JSON data, based on http://jsfiddle.net/unlsj
Author: Jovica Aleksic
Latest version: 1.0.9

# react-pretty-json

A react component that pretty-prints JSON data, based on http://jsfiddle.net/unlsj.

<img src="https://github.com/loopmode/react-pretty-json/raw/master/example.png" />

## Usage

```javascript
import React, { Component } from 'react';
import PrettyJson from '@loopmode/react-pretty-json';

export class App extends Component {
    state = {
        foo: "foo", 
        bar: "bar",
        nested: {
            stuff: "we needed a nested value",
            some: Immutable.fromJS({
                data: 'immutable as well!' 
            })
        }
    }
    render() {
        return (
            <PrettyJson json={this.state} onError={console.error} />
        );
    }
}

```

### Props

**json**

`json: PropTypes.oneOfType([PropTypes.object, PropTypes.string])`

Either an object that will be converted to a JSON string, or a JSON string.
If it's an object, it will be stringified to JSON first.
It is allowed to pass `immutable.js` objects, or mixed objects containing immutables.


**onPrettyPrint**

`onPrettyPrint: PropTypes.func`

A function that will be invoked with the prettified `html` string in case of success.


**onError**

`onError: PropTypes.func`

A function that will be invoked with the `error` object in case of error.
npm package: @loopmode/read-local-files
Description: Launches the native "open file" dialog and allows the user to choose one or more file to read contents from. The function returns a promise that is resolved when the user picks files and rejected when the user cancels.
Author: Jovica Aleksic
Latest version: 2.0.0

# read-local-files

Launches the native "open file" dialog and allows the user to choose one or more file to read contents from.
The function returns a promise that is resolved when the user picks files and rejected when the user cancels.

Cancel detection happens using `focus` and `mousemove` event listeners on the window object.

Once the user confirms the native file select dialog, the promise is resolved with an array of `FileReader` objects. Each has a `result` property that holds the content of the loaded file.
If the user cancels the dialog, the promise is rejected with an `ERR_ABORTED` error.

## Installation

```javascript
yarn add @loopmode/read-local-files
```

## Usage

In the example we expect to user to open json files.

Using `async/await`

```javascript
import readLocalFiles from '@loopmode/read-local-files';

async function handleLoadClick() {
    try {
        const fileInputs = await readLocalFiles();
        const data = fileInputs.map(input => JSON.parse(input.result))
        console.log({data})
        
    } catch (error) {
        console.warn(error);  
    }
}
```
 
## Options

You shouldn't really need these..

`encoding` - Used for `FileReader.readAsText`. Defaults to `UTF-8`.  

See https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText#Parameters

`rejectTimeout` - Amount of milliseconds to wait before rejecting the promise. Defaults to 500.

The promise is rejected on `mousemove` or `focus`, but this may happen just as well when the user actually did choose a file, and the dialog gets closed by the browser. In order to not immediatly reject the promise, we wait for `rejectTimeout` millis. If the files have been handled by now, we do not reject the promise.
npm package: @loopmode/scrollbarwidth
Description: simple function to retrieve the browser scrollbar width
Author: Jovica Aleksic
Latest version: 1.1.3

# scrollbarwidth

Extremely simple script for getting the current width of the browser window scrollbar.

If there is no scrollbar when invoked, `0` is returned.

### Installation

    # using npm
    npm install @loopmode/scrollbarwidth --save

    # using yarn
    yarn add @loopmode/scrollbarwidth

### Usage

You can provide a DOM element as argument to check it for its scrollbar width. When you call the function without arguments, it returns the width of the global window scrollbar.
You can require/import it any way you wish, and you can also access `window.scrollbarwidth`.

    import scrollbarwidth from '@loopmode/scrollbarwidth';

    var windowHasScrollbar = scrollbarwidth() > 0;
    var elHasScrollbar = scrollbarwidth(document.querySelector('.my-element')) > 0;

Have a look at the [code at github](https://github.com/loopmode/scrollbarwidth/blob/master/scrollbarwidth.js#L10-L15). It's ridiculously simple.
npm package: @loopmode/set-clipboard-data
Description: A promise-based function to set data to the clipboard
Author: Jovica Aleksic
Latest version: 1.0.2

# set-clipboard-data

Sets data to the clipboard via `document.execComand("copy")` and returns a promise.

The promise is resolved when the data has been set to the clipboard. This is detected via `document.addEventListener("copy")`.
It is rejected if the clipboard does not contain the specified value after the `copy` event, or if the event is not fired after a specific time (`rejectTimeout` option)

## Usage

```javascript
import setClipboardData from '@loopmode/set-clipboard-data';

async function handleCopyClick() {
    const clipboardValue = await setClipboardData(this.state.currentValue);
    console.log('done!', clipboardValue);
}

```

### Options

Signature:

```javascript
setClipboardData(data = '', { mime = 'text/plain', timeout = 60000 } = {})
```
npm package: @loopmode/use-content
Description: React hook for displaying local or external string-based content
Author: Jovica Aleksic
Latest version: 1.1.3

# @loopmode/use-content

A react effect hook for displaying local or remote string-based content.

## Usage

```jsx

import React from 'react';
import useContent from '@loopmode/use-content';

const Content = ({ children, src }) => {
    const content = useContent(children, { src });
    return (
        <div>{content}</div>
    );
}

const Demo = () => {
    return (
        <div>
            <Content>Hello text!</Content>
            <Content src="https://raw.githubusercontent.com/git/git/master/README.md" />
        </div>
    );
}

```

If a `src` is provided, the content is loaded from that URL.
The default setup uses `window.fetch` for loading and aborts pending requests when the component gets unmounted.

If a `redact` function is provided, it is invoked with the current content and its return value becomes the new value.

If an `append` or `prepend` value is provided, it will be resolved to a string value.

```jsx
import React from 'react';
import useContent from '@loopmode/use-content';


const addSrc = ({ src }) => `// src: ${src}`;
const addMeta = props => `/*\n${JSON.stringify(props, replacer, 4)}\n*/`;

const Content = ({ children, src }) => {
    const content = useContent(children, {
        src,
        prepend: [addSrc, `// Copyright foo`, props => !!props.content && 'Loading...'],
        append: addMeta
    });
    return (
        <div>{content}</div>
    );
}
const Demo = () => {
    return (
        <Content src="https://raw.githubusercontent.com/git/git/master/README.md" />
    );
}

```

### window.fetch and custom loader

We use `window.fetch()` for loading by default.
If you need to support older browsers, you can either provide a fetch polyfill or a custom `loader` function.

A custom `loader` function is pretty easy to create:

```javascript
const loader = (url, callback) => {
    axios.get(url)
        .then(response => callback(response.data));
}
```

- The signature is `(url: String, callback: Function): Function`
- Invoke the callback with the result string once you have it
- Optionally return a function

The loader may return a function to cancel pending requests when the requesting component gets unmounted.
For example, using axios, it would be something like [this](https://github.com/axios/axios#cancellation):

```javascript
const loader = (url, callback) => {
    const {token: cancelToken, cancel} = axios.CancelToken.source();
    axios.get(url, {cancelToken})
        .then(response => callback(response.data));
    return cancel
}
```
npm package: @loopmode/yarn-workspace-isolator
Description: ## What it does
Author: Christian Hoffmeister
Latest version: 0.2.1

# yarn-workspace-isolator

## What it does

This script isolates a single workspace by

* Making a copy of the workspace to some `new-folder/`
* Placing a copy for each needed workspace dependency into `new-folder/node_modules/{workspace-dependency}`
* Rewriting the version of each workspace dependency to `file:new-folder/node_modules/{workspace-dependency}`

Now you can simply run `yarn install` inside of `new-folder/` and yarn will install all dependencies as if you had not
used workspaces at all without having to publish any workspace dependency.

## Example usage

```
npm install -g yarn-workspace-isolator
cd my-project-using-yarn-workspaces
isolate-workspace -w my-package-name -o ~/new-folder
```

Note: This needs `yarn@>=1.5.0`!