open-index/open-npm huggingface dataset:
npm package: @lxsbw/express-swagger-ui
Description: Swagger UI middleware for express
Latest version: 1.0.1

# @lxsbw/express-swagger-ui [![NPM version][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/@lxsbw/express-swagger-ui.svg
[npm-url]: https://npmjs.org/package/@lxsbw/express-swagger-ui

> Host swagger ui at a given directory from your express app

Inspired by:

- [koa2-swagger-ui](https://github.com/scttcper/koa2-swagger-ui)
- [swagger-injector](https://github.com/johnhof/swagger-injector) for serving on a specific route
- [hapi-swaggered-ui](https://github.com/z0mt3c/hapi-swaggered-ui) for serving files from node_modules using a handlebars driven index.html

## install

```
npm install @lxsbw/express-swagger-ui --save
```

## config

for more swaggerOptions see [swagger-ui](https://github.com/swagger-api/swagger-ui#swaggerui)
defaults:

```javascript
title: 'swagger', // page title
oauthOptions: {}, // passed to initOAuth
swaggerOptions: { // passed to SwaggerUi()
  dom_id: 'swagger-ui-container',
  url: 'http://petstore.swagger.io/v2/swagger.json', // link to swagger.json
  supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
  docExpansion: 'none',
  jsonEditor: false,
  defaultModelRendering: 'schema',
  showRequestHeaders: false,
  swaggerVersion: 'x.x.x' // read from package.json,
},
routePrefix: '/docs', // route where the view is returned
hideTopbar: false, // hide swagger top bar
favicon16: '/favicon-16x16.png', // default icon 16x16, set for self icon
favicon32: '/favicon-32x32.png', // default icon 32x32, set for self icon
```

## example

```javascript
import * as express from 'express';
import { expressSwagger } from '@lxsbw/express-swagger-ui';

const app = express();

app.use(
  expressSwagger({
    routePrefix: '/swagger', // host at /swagger instead of default /docs
    swaggerOptions: {
      url: 'http://petstore.swagger.io/v2/swagger.json', // example path to json
    },
  }),
);

app.listen(3000);
```
npm package: @lxsmnsyc/dendro
Description: > Simple, granular, reactive, composable state management library. Inspired by Recoil.
Author: Alexis Munsayac
Latest version: 0.2.1

# @lxsmnsyc/dendro

> Simple, granular, reactive, composable state management library. Inspired by Recoil.

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/dendro.svg)](https://www.npmjs.com/package/@lxsmnsyc/dendro)

## Install

```bash
npm install @lxsmnsyc/dendro
```
```bash
yarn add @lxsmnsyc/dendro
```

## Usage

### Creating a Dendro instance

The package exports a function for constructing `Dendro` instances. This function accepts a function that supplies the composable logic and returns the state of the `Dendro`.

```ts
import dendro from '@lxsmnsyc/dendro';

const counter = dendro(() => 0);
```

You can call the `read` method to receive the value, or you can use the `addListener` to receive and handle the new values.

```ts
const currentCount = counter.read(); // 0

currentCount.addListener((value) => {
  // yet to receive an update.
});
```

A `Dendro` instance can update its state using `write`.

```ts
counter.write(counter.read() + 1);
```

### Adding a Dendro dependency

The function provided to the constructor may receive a function that handles subscription to another `Dendro` instance and allows reactive re-computation.

```ts
const delayedCounter = dendro(async (get) => {
  // Read counter value and register as a dependency
  const value = get(counter);
  await sleep(2000);
  return `Delayed for 2s : ${value}`;
});

delayedCounter.addListener((value) => {
  value.then(console.log); // Delayed for 2s : 5
});

counter.write(5);
```

Whenever the dependencies emits a new value (either through `write` or reactive recomputation), the dependent `Dendro` instance recomputes its value.

The `get` function can be called anywhere inside the function, useful for conditional dependencies or arbitrary number of dependencies.

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/dendro-react
Description: > React bindings for [@lxsmnsyc/dendro](https://github.com/lxsmnsyc/dendro/tree/master/packages/dendro)
Author: Alexis Munsayac
Latest version: 0.2.1

# @lxsmnsyc/dendro-react

> React bindings for [@lxsmnsyc/dendro](https://github.com/lxsmnsyc/dendro/tree/master/packages/dendro)

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/dendro-react.svg)](https://www.npmjs.com/package/@lxsmnsyc/dendro-react)

## Install

```bash
npm install @lxsmnsyc/dendro-react
```
```bash
yarn add @lxsmnsyc/dendro-react
```

## Usage

### useDendroValue

Reactively update component whenever a Dendro instance emits a new value.

```tsx
import dendro from '@lxsmnsyc/dendro';
import { useDendroValue } from '@lxsmnsyc/dendro-react';

const counter = dendro(() => 0);

// ...
const count = useDendroValue(counter);

return (
  <h1>Count: {count}</h1>
);
```

### Dendro Resource

Dendro Resources allows Promise-emitting Dendro instances to Result-emitting Dendro instances.

```tsx
import { createDendroResource } from '@lxsmnsyc/dendro-react;

const userData = dendro(() => fetch('/api/user'));

const userResource = createDendroResource(userData);

const value = userResource.read(); // { status: 'pending' }
```

#### useDendroResource

```tsx
function UserDetails() {
  const { status, value } = useDendroResource(userResource);

  if (status === 'pending') {
    return <Loading />;
  }
  if (status === 'failure') {
    return <ErrorMessage reason={value} />;
  }
  return (
    <h1>Name: {value.name}</h1>
  );
}
```

`useDendroResource` also accepts a second parameter for turning on Suspense mode.

```tsx
function UserDetails() {
  const { value } = useDendroResource(userResource, true);

  return (
    <h1>Name: {value.name}</h1>
  );
}

function Profile() {
  return (
    <Suspense fallback={<Loading />}>
      <UserDetails />
    </Suspense>
  );
}
```

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/indigo-player
Description: > A rewrite for the https://github.com/matvp91/indigo-player
Author: Alexis Munsayac
Latest version: 0.3.2

# @lxsmnsyc/indigo-player

> A rewrite for the https://github.com/matvp91/indigo-player

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/indigo-player.svg)](https://www.npmjs.com/package/@lxsmnsyc/indigo-player) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lxsmnsyc/indigo-player
```

```bash
yarn add @lxsmnsyc/indigo-player
```

## Credits
- [Matthias Van Parijs](https://github.com/matvp91) - For his amazing library
- [Xi Xao](https://github.com/xixiaofinland) - VTT to JSON
- [Jared Palmer](https://github.com/jaredpalmer) - TSDX
- [Carey Hinoki](https://github.com/chemoish/) - BIF Parser

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/preact-scoped-model
Description: Scoped Model pattern for Preact
Latest version: 0.2.2
Deprecated: Package scope has been dropped. Please use preact-scoped-model.

# @lxsmnsyc/preact-scoped-model

> Scoped Model pattern in Preact (but with Hooks)

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/preact-scoped-model.svg)](https://www.npmjs.com/package/@lxsmnsyc/preact-scoped-model) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Features

- Contextual State: Inject state into your component tree.
- Composition: Write states as if you are writing components, use Preact Hooks to compose state logic.
- Granular control: Only watch updates you need, not when the whole state updates.

## Install

```bash
npm install --save @lxsmnsyc/preact-scoped-model
```

```bash
yarn add @lxsmnsyc/preact-scoped-model
```

## Documentation

- [Creating a model](/packages/preact-scoped-model/docs/create-model.md)
- [Scoped Model Hooks](/packages/preact-scoped-model/docs/hooks/README.md)
- [Model Factories](/packages/preact-scoped-model/docs/model-factory.md)
- [Hook Factories](/packages/preact-scoped-model/docs/hook-factory.md)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/re-use
Description: A collection of hooks for ReasonReact
Author: lxsmnsyc
Latest version: 0.5.0

# @lxsmnsyc/re-use

> ⚛️ 🎣 A collection of hooks for ReasonReact

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/re-use.svg)](https://www.npmjs.com/package/@lxsmnsyc/re-use) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lxsmnsyc/re-use
```

```bash
yarn add @lxsmnsyc/re-use
```

### bsconfig.json

```json
  "bs-dependencies": [
    "@lxsmnsyc/re-use"
  ],
```

## Hooks

- Constant
- ConstantCallback
- ForceUpdate
- IsomorphicEffect
- LifeCycle
- MountedState
- Mutable
- NativeCallback
- NativeEffect
- NativeIsomorphicEffect
- NativeLayoutEffect
- NativeMemo
- NativeState
- NativeSyncEffect
- OnMount
- OnUnmount
- PageVisibility
- Previous
- Promise
- RefMounted
- SyncEffect
- ThrottledReducer
- ThrottledState
- UpdateEffect
- WindowSize

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/react-fallback
Description: Easy error fallback handling in React
Author: Alexis Munsayac
Latest version: 0.1.0

# @lxsmnsyc/react-fallback

> Easy fallback UI handler for React

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/react-fallback.svg)](https://www.npmjs.com/package/@lxsmnsyc/react-fallback) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lxsmnsyc/react-fallback
```

```bash
yarn add @lxsmnsyc/react-fallback
```
## Usage

`react-fallback` aims to easily present fallback UI whenever the main UI fails. Managing Fallback UIs can be cumbersome and can lead to nested component trees.

#### FallbackBoundary

`FallbackBoundary` is a React component that manages the fallback UI for the component tree. The rendered content of a `FallbackBoundary` may throw a valid React element which will be switched in place of the currently rendered UI.

```tsx
import { FallbackBoundary } from '@lxsmnsyc/react-fallback';

// ...
<FallbackBoundary>
  <FallibleComponent />
</FallbackBoundary>
```

Say, if we want to present the sign-in form if the user hasn't signed in yet, we may present the form inside the component.

```tsx
if (notSignedIn) {
  throw <SignIn />;
}
```

> Why throw instead of conditionally rendering the UI?

This is so that we can bail-out immediately of the render logic and so we can render the fallback immediately to prevent further effects to occur. For example, given that `useSignInRequired` and `useMobileOnly` throws a fallback UI:

```tsx
useMobileOnly();
const credentials = useSignInRequired();

return (
  <UserDetails credentials={credentials} />;
);
```

We don't have to check the user's authentication if the UI is only for mobile. Due to the nature of React hooks, we can't call `useSignInRequired` in a conditional way without producing another layer of component tree.

### useFallbackBoundaryRefresh

`useFallbackBoundaryRefresh` is a hook that provides a function you can call to refresh the nearest ancestor `FallbackBoundary`. If called without a valid React element as an argument, it will attempt to remount the children, otherwise, it will render the given element as a fallback UI.

```tsx
const refresh = useFallbackBoundaryRefresh();

// User has signed out, refresh the boundary to remount.
const signOut = () => {
  deleteCredentials();
  refresh();
};
```

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/react-image
Description: Responsive, suspenseful images in React
Author: Alexis Munsayac
Latest version: 0.5.9

# @lxsmnsyc/react-image

> Responsive, Suspenseful, Lazy-loading Image component in React

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/react-image.svg)](https://www.npmjs.com/package/@lxsmnsyc/react-image) 

## Install

Yarn
```bash
yarn add @lxsmnsyc/react-image
```

NPM
```bash
npm -i @lxsmnsyc/react-image
```

## Features

### Lazy-loading
The component employs the lazy-loading mechanism for loading the image only when necessary, in which case, if the image is visible in the client's viewport. This is achieved through the use of `IntersectionObserver` API.

### Suspenseful
The component uses React's `Suspense` API to await the image's loading process, so that the image won't feel "snappy" when being rendered in the browser. While being loaded, the provided fallback is rendered.

### Responsive
The component not only can receive an image source, it can receive a list of sources, coupled with a media query, which allows the component to present the correct image source when it matches the given media query.

### Compatibility
Although the native image element supports these kinds of mechanisms, not all browsers supports those features. This component allows the users to achieve the same kind of functionality but with bonuses.

## Usage

### Example

```tsx
import Img from '@lxsmnsyc/react-image';

// Your code

<Img
  src="default.jpg"
  fallback={<LoadingFallback />}
  containerRef={containerRef}
  sources={[
    {
      source: 'portrait.jpg',
      media: '(orientation: portrait)',
    },
    {
      source: 'landscape.jpg',
      media: '(orientation: landscape)',
    },
  ]}
/>
```

The `<Img>` is semantically the same with the `<img>` component, with some properties removed (i.e. srcSet, sizes, referrerPolicy, crossOrigin, etc.). This component has some extra properties:

* `fallback` - a ReactNode; used to display as a fallback to the component while the image is being loaded or while the image is out of the view (won't shift back after the image has been loaded).
* `containerRef` - The container of the `<Img>`, in which case, the DOM parent. This is used to detect if the image has intersected the viewport visibility.
* `sources` - an array of objects with properties `source` and `media`.
  * `source` - the source of the image to be selected.
  * `media` - the media query used for selecting the image. If similar media occurs in other objects, only the last occuring media that matches will be allowed to select the image to be presented.
npm package: @lxsmnsyc/react-scoped-model
Description: Scoped Model pattern in React (but with Hooks)
Latest version: 1.5.2
Deprecated: Package scope has been dropped. Please use react-scoped-model.

# @lxsmnsyc/react-scoped-model

> Scoped Model pattern in React (but with Hooks)

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/react-scoped-model.svg)](https://www.npmjs.com/package/@lxsmnsyc/react-scoped-model) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Features

- Contextual State: Inject state into your component tree.
- Composition: Write states as if you are writing components, use React Hooks to compose state logic.
- Granular control: Only watch updates you need, not when the whole state updates.

## Install

```bash
npm install --save @lxsmnsyc/react-scoped-model
```

```bash
yarn add @lxsmnsyc/react-scoped-model
```

## Documentation

- [Creating a model](/packages/react-scoped-model/docs/create-model.md)
- [Scoped Model Hooks](/packages/react-scoped-model/docs/hooks/README.md)
- [Model Factories](/packages/react-scoped-model/docs/model-factory.md)
- [Hook Factories](/packages/react-scoped-model/docs/hook-factory.md)
- [Migrating from 0.16](/packages/react-scoped-model/docs/migrating.md)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/react-scoped-model-swr
Description: SWR + react-scoped-model
Latest version: 0.2.2
Deprecated: Package scope has been dropped. Please use react-scoped-model-swr.

# @lxsmnsyc/react-scoped-model-swr

> [react-scoped-model](https://github.com/lxsmnsyc/scoped-model) + [Vercel's SWR](https://swr.vercel.app/)

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/react-scoped-model-swr.svg)](https://www.npmjs.com/package/@lxsmnsyc/react-scoped-model-swr) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Usage

### Basic Usage

The package exports two model factories: `createSWRModel` and `createSWRInfiniteModel`.

```tsx
import { createSWRModel } from '@lxsmnsyc/react-scoped-model';
```

The simplest form of an SWR Model can be created using just a key value.

```tsx
const TopItems = createSWRModel('/api/items/top');
```

which can be mounted like a scoped model instance:

```tsx
<TopItems.Provider>
  <TopItemsList />
</TopItems.Provider>
```

And can be used with hooks:

```tsx
import { useSelector } from '@lxsmnsyc/react-scoped-model';

// ...
const data = useSelector(TopItems, (state) => state.data);
```

All SWR and SWR Infinite models are also subject to the `<SWRConfig>` setup.

The second parameter for `createSWRModel` is reserved for custom fetching, but it is required to be returned by a higher-order function:

```tsx
const TopItems = createSWRModel('/api/items/top', () => getTopItems);
```

The third parameter is an optional parameter and is for the [SWR Config](https://swr.vercel.app/docs/options).

```tsx
const TopItems = createSWRModel('/api/items/top', () => getTopItems, {
  initialData: [],
});
```

The fourth parameter is an optional parameter reserved for the scoped model options e.g. `displayName`.

### Props and Dependent Fetching

SWR and SWR Infinite models can also receive props, and can be used to produce dynamic key, fetcher and config, which can cause [dependent or conditional fetching](https://swr.vercel.app/docs/conditional-fetching);

```tsx
const UserDetails = createSWRModel(
  ({ userId }) => `/api/user/${userId}`,
  ({ userId }) => () => getUser(userId),
);

// ...
<UserDetails.Provider userId={userId}>
  <UserProfile />
</UserDetails.Provider>
```

You may also use hooks inside these functions as they behave as hooks:

```tsx
const RecentActivity = createSWRModel(
  () => {
    // Get the current sign-in token
    const token = useAuthToken();

    // Only fetch if a token exists,
    // signifying the signed-in user's presence
    if (token) {
      return ['/api/recent-activity', token];
    }
    return null,
  },
  () => getRecentActivity,
);
```

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/react-use-websockets
Description: React Hooks + WebSockets
Author: lxsmnsyc
Latest version: 0.1.0

# @lxsmnsyc/react-use-websockets

> React Hooks + WebSockets

[![NPM](https://img.shields.io/npm/v/@lxsmnsyc/react-use-websockets.svg)](https://www.npmjs.com/package/@lxsmnsyc/react-use-websockets) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lxsmnsyc/react-use-websockets
```

```bash
yarn add @lxsmnsyc/react-use-websockets
```

## Usage

```tsx
import React from 'react';

import {
  useWebSocketMessage,
  useWebSocketError,
  useWebSocketClose,
  useWebSocketOpen,
} from '@lxsmnsyc/react-use-websockets';

const wss = new WebSocket('ws://localhost:8080');

function App() {
  const onMessageData = useWebSocketMessage(wss);
  const onErrorData = useWebSocketError(wss);
  const onCloseData = useWebSocketClose(wss);
  const onOpenData = useWebSocketOpen(wss);

  if (onErrorData) {
    return (
      <h3>
        An error occured.
      </h3>
    );
  }
  if (onCloseData) {
    return (
      <h3>
        Connection closed.
      </h3>
    );
  }
  if (onMessageData) {
    return (
      <h3>
        Message received : { onMessageData }
      </h3>
    );
  }
  if (onOpenData) {
    return (
      <h3>
        Connection established.
      </h3>
    );
  }
  return (
    <h3>
      Waiting for a connection.
    </h3>
  );
}

export default App;
```

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)
npm package: @lxsmnsyc/unique-id
Description: Generates unique ids
Author: Alexis Munsayac
Latest version: 0.3.0

# unique-id

Generates unique id

## How does it work

Internally, it uses a `pseudo-encrypt` function based on a similar name from the Postgre Wiki. This encryption (not hashing) function generates a unique 32-bit signed integer from a given 32-bit integer. Since the function is an encryption, we can also infer that the `pseudoEncrypt(pseudoEncrypt(x)) = x;`.

Secondly, the resulting integer is used as a basis for generating a unique code. The integer is converted to the base-N sequence of characters constructed by the alphabet definition.

Users may define their own alphabet sequence, or their own sauce (a permutation formula being used inside `pseudo-encrypt` that produces a value between 0 and 1), to produce a completely different sequence of ids.

## Usage

This package exports a default class named "UniqueIdGenerator". This class creates an instance for generating unique ids.

The constructor for UniqueIdGenerator may receive two parameters:

- `alphabet` - the base of character encryption. The default sequence is `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`.
- `sauce` - a permutation formula used for the `pseudo-encrypt` algorithm. The default is 
`((1366 * r1 + 150889) % 714025) / 714025.0)` where `r1` is a 16-bit value.

Once an instance is constructed, the `next` method can be used to generate a unique string. This method receives a number that is used by the `pseudo-encrypt` function.

## Reference

- Stack Overflow: https://stackoverflow.com/a/12590064
npm package: @lxtiscool/clone1
Description: 实现JavaScript引用对象的深拷贝功能
Latest version: 1.0.0

### clone
实现JavaScript引用对象的深拷贝功能

### 使用者指南

通过npm下载安装代码

```bash
$ npm install --save clone
```

如果你是node环境

```js
var { clone } = require('clone');

clone({a: 1})
```

如果你是webpack等环境

```js
import { clone } from 'clone';

clone({a: 1})
```

如果你是浏览器环境

```html
<script src="node_modules/clone/dist/index.aio.js"></script>
<script>
    clone({a: 1})
</script>
```

### 贡献者指南
首次运行需要先安装依赖

```bash
$ npm install
```

一键打包生成生产代码

```bash
$ npm run build
```

运行单元测试:

```bash
$ npm test