open-index/open-npm huggingface dataset:
npm package: @reshiftsecurity/reshift-plugin-npm
Description: Security vulnerability scanner
Latest version: 2.0.2

[![Reshift Logo](https://reshiftsecurity-content.s3.ca-central-1.amazonaws.com/icons/reshift.png)](http://reshiftsecurity.com/)

  [![NPM Version][npm-image]][npm-url]
  [![NPM Downloads][downloads-image]][downloads-url]

Reshift is a lightweight JavaScript security plugin for NPM that quickly finds vulnerabilities, offers multiple code remediation snippets and DevSec coaching to help build more secure code.
<br/>
<br/>
The plugin is for JavaScript developers looking to integrate security seamlessly into their software development practices. Reshift is wholly focused on security, allowing developers to meaningfully shift left - fixing security bugs early on.

## Features
* A curated list of JavaScript security checks, vetted by security experts
* Rich developer-centric issue descriptions
* DevSec coach and remediation assitance
* Additional vulnerability resources

> NOTE: Javascript scanning is only availabe to a closed beta group. To join the waitlist visit [reshiftsecurity.com](https://reshiftsecurity.com) and sign up.

Visit our documentation for help setting up NPM https://docs.reshiftsecurity.com/integrations/npm.

## Installation

```bash
$ npm install -g @reshiftsecurity/reshift-plugin-npm
```

## Usage

You will need a reshift account to able to use this plugin. [Sign up for free here](https://reshift.reshiftsecurity.com/onboarding)

Follow this instructions to on-board your git project and obtain your reshift token. You can then scan your project by running this command inside your project root:
```bash
$ reshift-scan -t <your reshift token here>
```
For more optional parameters, use the help argument `-h`
```bash
$ reshift-scan -h
```

## License

  [MIT](LICENSE)

[npm-image]: https://img.shields.io/npm/v/@reshiftsecurity/reshift-plugin-npm.svg
[npm-url]: https://npmjs.org/package/@reshiftsecurity/reshift-plugin-npm
[downloads-image]: https://img.shields.io/npm/dw/@reshiftsecurity/reshift-npm-plugin
[downloads-url]: https://npmcharts.com/compare/@reshiftsecurity/reshift-plugin-npm?minimal=true

## Help
Have more questions? Feel free to [contact us](mailto:dev@reshiftsecurity.com)
npm package: @reshoot/core
Description: Extract meta data from image and generate low-quality image preview
Author: Billy Kwok
Latest version: 2.1.3

# <img src="https://raw.githubusercontent.com/billykwok/reshoot/main/logo.png" width="200" alt="Reshoot logo" /><br/>`@reshoot/core`

A backend library for extracting meta data and generating low-quality iamge placeholder from a given image.

You should rarely need to use it directly.

More about [`reshoot`](https://github.com/billykwok/reshoot).

## Installation

```sh
# PNPM
pnpm add @reshoot/core

# NPM
npm install @reshoot/core

# yarn
yarn add @reshoot/core
```

## API

```js
// webpack.config.js
import { readfile } from 'node:fs/promises';
import { extractMeta } from '@reshoot/core';

const buffer = await readfile('./image.png');
const meta = await extractMeta(buffer, {
  // The color of placeholder image while loading. It is the dominant color of the image if this option is set to null
  // Type: '#abc' | '#abcdef' | 'transparent' | null
  color: null,
  // The size of placeholder image
  // Type: number
  placeholderSize: 8,
  // The quality of placeholder image
  // Type: number (1 - 10)
  placeholderQuality: 10,
  // The type of the aspect ratio in the output meta data
  // Type: 'heightByWidth' | 'widthByHeight'
  aspectRatioType: 'heightByWidth',
  // The format of the aspect ratio in the output meta data
  // Type: 'percent' | 'ratio'
  aspectRatioFormat: 'precent',
  // The number of decimals of the aspect ratio in the output meta data
  // Type: number
  aspectRatioDecimal: 4,
});
// Output:
// {
//   hash: string;
//   placeholder: string;
//   width: number;
//   height: number;
//   aspectRatio: number;
//   color: string;
// }
```

## Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

## Issues and Feedback

Please voice your opinion and report bugs in the [issues](https://github.com/billykwok/reshoot/issues) sections of this GitHub project.

## Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to [`package.json`](https://github.com/billykwok/reshoot/blob/main/package.json).

## License

MIT
npm package: @reshoot/macro
Description: Babel macro integration for Reshoot
Author: Billy Kwok
Latest version: 2.1.6

# <img src="https://raw.githubusercontent.com/billykwok/reshoot/main/logo.png" width="200" alt="Reshoot logo" /><br/>`@reshoot/macro`

A [`babel-macro`](https://github.com/kentcdodds/babel-plugin-macros) transpiling `reshoot('image.png', { color: '#eee' })` into `import meta from 'image.png?color=#eee';`.

More about [`reshoot`](https://github.com/billykwok/reshoot).

## Installation

```sh
# PNPM
pnpm add -D @reshoot/macro

# NPM
npm install -D @reshoot/macro

# yarn
yarn add -D @reshoot/macro
```

## Setup

```js
// babel.config.js
module.exports = {
  // ...
  plugins: ['babel-plugin-macros'],
};
```

## API

```js
import reshoot from '@reshoot/macro';

const meta = reshoot(
  './image.png',
  { color: '#eee' } // Optional inline config overriding the loader options
);
```

## Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

## Issues and Feedback

Please voice your opinion and report bugs in the [issues](https://github.com/billykwok/reshoot/issues) sections of this GitHub project.

## Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to [`package.json`](https://github.com/billykwok/reshoot/blob/main/package.json).

## License

MIT
npm package: @reshoot/react
Description: React integration for Reshoot
Author: Billy Kwok
Latest version: 2.1.3

# <img src="https://raw.githubusercontent.com/billykwok/reshoot/main/logo.png" width="200" alt="Reshoot logo" /><br/>`@reshoot/react`

A [`React`](https://reactjs.org) component rendering responsive images, designed to accept the output meta data of [`@reshoot/loader`](https://www.npmjs.com/package/@reshoot/loader).

More about [`reshoot`](https://github.com/billykwok/reshoot).

## Installation

```sh
# PNPM
pnpm add @reshoot/react

# NPM
npm install @reshoot/react

# yarn
yarn add @reshoot/react
```

## Setup

The library should work out of the box. The only required setup is to include the styles in your website.

```jsx
// entry-point.js
import '@reshoot/react/styles.css';
```

However, if you would like to the image to be shown even when JavaScript is disabled (for privacy, accessibility or SEO purposes), you need to render the website on the server side and add the following HTML to the end of `<head />` to hide the overlaying placeholder image.

```html
<noscript>
  <style>
    .js-only {
      display: none;
    }
  </style>
</noscript>
```

## API

```jsx
import imageMeta from '@reshoot/macro';
import Img from '@reshoot/react';

export default function Example() {
  return (
    <Img
      // Meta data of the image. Could be generated and typed automatically using @reshoot/loader and @reshoot/macro
      // Type: {
      //   placeholder?: string;
      //   srcSet?: string;
      //   sizes?: string;
      //   aspectRatio: number;
      //   color: string;
      //   src: string;
      // }
      meta={imageMeta('./image.png')}
      // Container wrapping the image
      // Type: string | ReactComponent
      container="div"
      // Reference to the container, work the same as normal ref
      // Type: RefCallback<HTMLElement> | MutableRefObject<HTMLElement>
      ref={undefined}
      // Reference to the inner image element, work the same as normal ref
      // Type: RefCallback<HTMLImageElement> | MutableRefObject<HTMLImageElement>
      imgRef={undefined}
      // The same as the native `alt` property of <img />
      // Type: string
      alt=""
      // The blur radius CSS value of image preview
      // Type: string
      blur="1rem"
    />
  );
}
```

## Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

## Issues and Feedback

Please voice your opinion and report bugs in the [issues](https://github.com/billykwok/reshoot/issues) sections of this GitHub project.

## Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to [`package.json`](https://github.com/billykwok/reshoot/blob/main/package.json).

## License

MIT
npm package: @reshoot/remark-mdx-image
Description: MDX integration for Reshoot
Author: Billy Kwok
Latest version: 2.0.6

# <img src="https://raw.githubusercontent.com/billykwok/reshoot/main/logo.png" width="200" alt="Reshoot logo" /><br/>`@reshoot/remark-mdx-image`

An [`mdx`](https://mdxjs.com) / [`remark-plugin`](https://github.com/remarkjs/remark) transpiling `![alt text](image.png "title"){{color='#eee'}}` into the following.<pre lang="mdx">import meta from 'image.png?color=#eee';<br/>&lt;img meta={meta} alt=&quot;alt text&quot; title=&quot;title&quot; /&gt;</pre>

More about [`reshoot`](https://github.com/billykwok/reshoot).

## Installation

```sh
# PNPM
pnpm add -D @reshoot/remark-mdx-image

# NPM
npm install -D @reshoot/remark-mdx-image

# yarn
yarn add -D @reshoot/remark-mdx-image
```

## Setup

```js
import reshootRemarkMdxImage from '@reshoot/remark-mdx-image';

// MDX options
const mdxOptions = {
  remarkPlugins: [reshootRemarkMdxImage],
};
```

## Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

## Issues and Feedback

Please voice your opinion and report bugs in the [issues](https://github.com/billykwok/reshoot/issues) sections of this GitHub project.

## Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to [`package.json`](https://github.com/billykwok/reshoot/blob/main/package.json).

## License

MIT
npm package: @reshoot/types
Description: Common types for Reshoot
Author: Billy Kwok
Latest version: 2.0.4

# <img src="https://raw.githubusercontent.com/billykwok/reshoot/main/logo.png" width="200" alt="Reshoot logo" /><br/>`@reshoot/types`

Enums and types shared across the framework.

You should rarely need to use it directly.

More about [`reshoot`](https://github.com/billykwok/reshoot).

## Installation

```sh
# PNPM
pnpm add @reshoot/types

# NPM
npm install @reshoot/types

# yarn
yarn add @reshoot/types
```

## Available Enums and Types

```ts
import {
  AspectRatioType,
  AspectRatioFormat,
  type CoreOptions,
  type InlineOptions,
  type CoreImageMeta,
  type ImageMeta,
} from '@reshoot/types';
```

## Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

## Issues and Feedback

Please voice your opinion and report bugs in the [issues](https://github.com/billykwok/reshoot/issues) sections of this GitHub project.

## Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to [`package.json`](https://github.com/billykwok/reshoot/blob/main/package.json).

## License

MIT
npm package: @reshuffle/base-connector
Description: This package contains utilities for implementing new Reshuffle connectors
Author: Amir Shevat, Christophe Gachiniard, Nimo Naamani
Latest version: 0.0.12

# reshuffle-base-connector
Base class for Reshuffle Connectors

## Get started
To implement a new connector, create a new class extending the BaseConnector class from this package.

Example:
```js
import { BaseConnector } from 'reshuffle-base-connector'

class MyCustomConnector extends BaseConnector<MyConnectorConfigOptions, MyConnectorEventOptions> {
    
  constructor(options, id /* your custom options */) {
    super(id)
    // Set your custom options here
  }
    
  onStart() {
    // ...
  }
    
  onStop() {
    // ...
  }
 
  on(options: EventOptionsType, eventId: EventConfiguration['id']): EventConfiguration {
    // ...
  }

}
```
npm package: @reshuffle/db-admin
Description: Super Simple Admin interface for Reshuffle DB
Author: Amir Shevat
Latest version: 0.0.11
Deprecated: This version of Reshuffle is being replaced with our new scripting platform for business workflows & integration.  Thanks!

## Install 
`npm install @reshuffle/db-admin`

## Use


`const devDBAdmin = require('@reshuffle/db-admin');`

After you declare the express app, add this line:

`app.use("/dev/db-admin", express.json(), devDBAdmin.devDBAdminHandler);`

## Access 
On a reshuffle project go to https://your-reshuffle-url/dev/db-admin
npm package: @reshuffle/monday-redis-service
Description: Reshuffle service for mirroring Monday to Redis
Author: Avner Braverman
Latest version: 0.0.23

# reshuffle-monday-redis-service

[Code](https://github.com/reshufflehq/reshuffle-monday-redis-service)

### Reshuffle Monday-Redis Service

This service mirrors Monday data into a Redis cache to provide scale and
atomicity of updates.
npm package: @reshuffle/passport
Description: Passport strategy for reshuffle authentication
Author: Ariel Shaqed
Latest version: 0.2.0
Deprecated: This version of Reshuffle is being replaced with our new scripting platform for business workflows & integration.  Thanks!

## `@reshuffle/passport`

"out-of-the-box" auth for your app.

Meant to be paired with [`@reshuffle/react-auth`](../react-auth).

See a fully working demo [here](https://github.com/reshufflehq/auth-template).

### Installation
```console
$ npm install @reshuffle/passport
```

### Usage
Configure `backend/_handler.js`

```js
const app = express();
app.use('/', authRouter());

// Custom routes go here

app.use(defaultHandler);

export default app;
```

Add custom routes

```js
app.get('/display-name', (req, res) => {
  if (!req.user) {
    return res.sendStatus(403);
  }
  res.end(req.user.displayName);
});
```

Access user from your `@expose`d functions

`backend/todos.js`
```js
import { getCurrentUser } from '@reshuffle/server-function';
import { get } from '@reshuffle/db';

/* @expose */
export async function getTodos() {
  const user = getCurrentUser(true /* required - will throw an error if not authenticated */);
  return get(`/todos/${user.id}`);
});
```
npm package: @reshuffle/react-auth
Description: React provider for working with Reshuffle authentication
Latest version: 0.1.7
Deprecated: This version of Reshuffle is being replaced with our new scripting platform for business workflows & integration.  Thanks!

## `@reshuffle/react-auth`
React context for adding "out-of-the-box" auth to your app using `@reshuffle/passport`.

See a fully working demo [here](https://github.com/reshufflehq/auth-template).

### Installation
```console
$ npm install @reshuffle/react-auth
```

### Prerequisites
* Install `@reshuffle/passport`
* Configure `backend/_handler.js` to use `@reshuffle/passport`, see [instructions](../passport/README.md#usage)

### Usage
Wrap your root component with `AuthProvider`.

`src/App.js`
```jsx
import React from 'react';
import { AuthProvider } from '@reshuffle/react-auth';
import Main from './components/Main';

export default function App() {
  return (
    <AuthProvider>
      <Main />
    </AuthProvider>
  );
}
```

Use with react hooks.

`src/components/Main`
```jsx
import React from 'react';
import { useAuth } from '@reshuffle/react-auth';

export default function Main() {
  const {
    loading,
    error,
    authenticated,
    profile,
    getLoginURL,
    getLogoutURL,
  } = useAuth();

  if (loading) {
    return <div><h2>Loading...</h2></div>;
  }
  if (error) {
    return <div className='error'><h1>{error.toString()}</h1></div>;
  }
  if (!authenticated) {
    return <a href={getLoginURL()}>Login</a>;
  }
  return (
    <>
      <img src={profile.picture} />
      <span>{profile.displayName}</span>
      <a href={getLogoutURL()}>Logout</a>
    </>
  );
}
```

Use with react class components.

`src/components/Main`
```jsx
import React from 'react';
import { AuthContext } from '@reshuffle/react-auth';

export default class Main extends React.Component {
  static contextType = AuthContext;

  render() {
    const {
      loading,
      error,
      authenticated,
      profile,
      getLoginURL,
      getLogoutURL,
    } = this.context;

    if (loading) {
      return <div><h2>Loading...</h2></div>;
    }
    if (error) {
      return <div className='error'><h1>{error.toString()}</h1></div>;
    }
    if (!authenticated) {
      return <a href={getLoginURL()}>Login</a>;
    }
    return (
      <>
        <img src={profile.picture} />
        <span>{profile.displayName}</span>
        <a href={getLogoutURL()}>Logout</a>
      </>
    );
  }
}
```