open-index/open-npm huggingface dataset:
npm package: @mapado/swr-promise
Description: swr-promise is a utility that caches promise results with configurable expiration, error tolerance, and garbage collection to enhance performance and manage cache behavior.
Latest version: 1.2.0

# swr-promise

[![NPM version](https://img.shields.io/npm/v/swr-promise.svg?style=flat)](https://npmjs.com/package/swr-promise)
[![NPM downloads](http://img.shields.io/npm/dm/swr-promise.svg?style=flat)](https://npmjs.com/package/swr-promise)

## Install

```bash
$ npm install swr-promise
```

## Usage

```typescript
import swrPromise from "swr-promise";

const fetchData = (url: string) => fetch(url);

const fiveMinute  = 5 * 60 * 1000

const fetchDataSWR = swrPromise(fetchData,{ maxAge: fiveMinute });

fetchDataSWR("https://api.example.com/data")
  .then(console.log)
  .catch(console.error);
```

## API

### swrPromise(promiseFn, [options])

#### Parameters

- `promiseFn`: The Promise function to be wrapped.
- `options`(optional): An options object with the following properties:
  - `maxAge`: Cache validity period (ms), default is 0, when it is Infinity, it is cached permanently
  - `swr`: Cache expiration tolerance time (ms), default Infinity (`stale-while-revalidate`)
  - `sie`: Update error tolerance time (ms), default is Infinity (`stale-if-error`)
  - `gcThrottle`: Garbage collection throttling time (ms), the default is 0, when it is 0, no garbage collection is performed
  - `cacheFulfilled`: Whether to cache the current normal result, the default is true (arguments, value) => boolean
  - `cacheRejected`: Whether to cache the current exception result, the default is false (arguments, error) => boolean
  - `argsEqual`(optional): Compares the two argument arrays for equality to ensure correct matching and lookup of cache entries in the cache
  - `storeCreator`(optional): creates a Map to store cached data, but you can use other media such as SQlite by passing a custom storeCreator function

#### Returns

- A new function that accepts the same arguments as `promiseFn` and returns a Promise.

## Example

```typescript
import swrPromise from "swr-promise";

const mock = () =>
  new Promise((resolve) => setTimeout(() => resolve(Math.random()), 1000));

const swrMock = swrPromise(mock, { maxAge: 1000, swr: 1000 });

await swrMock().then(console.log); // 0.9504613827463109
await swrMock().then(console.log); // 0.9504613827463109 same response

// simulate waiting for 1 second
await sleep(1000);

await swrMock().then(console.log); // 0.9504613827463109 same response, but mock function re-executes

```

## LICENSE

This project is licensed under the MIT License.

## Contributing

Contributions are welcome! Please open an issue or submit a pull request.

## Acknowledgements

This utility function uses:
- `concur-promise` to prevents duplicate execution of identical Promise calls
- `lodash.isequal` to compare the arguments
- `lodash.throttle` to limit the frequency of garbage collection operations.
npm package: @mapalchemy/explainer
Description: ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) [![NPM Package][npm]][npm-url] [![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://mathdoc.mapalchemy.com/)
Author: Danilo Babovic
Latest version: 1.8.1

![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)
[![NPM Package][npm]][npm-url]
[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://mathdoc.mapalchemy.com/)

# Explainer - JavaScript 3D Animation library

The aim of the project is to create **SIMPLE** 3D JS animation engine for product and science explanations. 

![Explainer](https://github.com/DaniloBabovic/three-explainer/blob/main/explainer_main.png)


## Main features

## SIMPLE  
One line of code for objects creation and chain animations.

## Axis
- X, Y, Z Axis with 5 origin points  
Automatic coordinate transformation from user to browser to Three.js coordinate system  

## 3D objects
- Line, Curve, Text, Plane, Cube, Sphere object creation

## HTML Inside!
- Insert the HTML snippet or the web page
- Render using CSS3DRenderer without dept problem
- Render other 3D objects using WebGLRenderer
- Simple HTML requires only one line of code

## Animations: 
1. Object position chain animation
2. Fade-in-out chain animation
3. Camera position chain animation 
4. Camera target chain animation 
5. Object rotate chain animation

## Player:
1. Video-like pause-stop controls
2. Slier component controls all animations
3. Markers auto creation 

## Installation

Currently npm is required to build the project.

```bash

npm i @mapalchemy/explainer

```

## Live vue example
[Explainer example vue](https://explainervue.mapalchemy.com/)

## Documentation ##

[Explainer doc Link](https://mathdoc.mapalchemy.com/)

## Vue install ##

This is example what you can animate with only 100 lines of code with Vue3:

[Vue install doc Link](https://github.com/DaniloBabovic/three-explainer/blob/main/VUE_INSTALL.md)

## React install ##

Coming soon

![Next.js application](https://github.com/DaniloBabovic/three-explainer/blob/main/next.png)


[npm]: https://img.shields.io/npm/v/@mapalchemy/explainer
[npm-url]: https://www.npmjs.com/package/@mapalchemy/explainer
[build-size]: https://badgen.net/bundlephobia/minzip/@mapalchemy/explainer
[build-size-url]: https://bundlephobia.com/result?p=@mapalchemy/explainer
npm package: @mapbox-controls/compass
Description: Indicate map direction
Latest version: 3.0.0

[<< all controls](/README.md)

# 🧭 @mapbox-controls/compass

![](https://github.com/korywka/mapbox-controls/assets/988471/03647bed-7a93-430b-bd49-b4d0b878734d)

Control to indicate map direction. Optionally, can be hidden if map bearing iz 0.

```
npm i @mapbox-controls/compass
```

```js
import CompassControl from '@mapbox-controls/compass';
import '@mapbox-controls/compass/src/index.css';

map.addControl(new CompassControl(), 'bottom-right');
```

## Options

```ts
export type ControlOptions = {
    instant?: boolean;
};
```
npm package: @mapbox-controls/image
Description: Move, scale and rotate image on a map
Latest version: 3.0.0

[<< all controls](/README.md)

# 🏙️ @mapbox-controls/image

![](https://github.com/korywka/mapbox-controls/assets/988471/9db0c22d-662a-43fb-90e6-1fbe4405dcc5)

Control to move, scale, rotate image (raster layer) on top of a map.
Very handy to represent information from the raster to geojson, for example, the contours of buildings.

```
npm i @mapbox-controls/image
```

```js
import ImageControl from '@mapbox-controls/image';
import '@mapbox-controls/image/src/index.css';

const imageControl = new ImageControl();
map.addControl(imageControl, 'bottom-right');
```

## Options

```ts
export type ControlOptions = {
    removeButton?: boolean;
};
```

## Events

| event          | description                |
| -------------- | -------------------------- |
| image.select   | selected new image         |
| image.deselect | image was deselected       |
| image.mode     | transform mode was changed |
| image.update   | position was updated       |
| image.add      | new image added            |
| image.remove   | image removed              |

## Methods

Methods are useful for programmatic control (when option `invisible` is `true`):

- `addFile(file: File, coordinates?: [number, number][] | undefined): Promise<string>;` - add new image by file. raster id is returned
- `addUrl(url: string, coordinates?: [number, number][] | undefined): Promise<string>;` - add new image by url. raster id is returned
- `setLock: (id: string, isLocked: boolean) => void;` - lock or unlock image. locked image can't be selected
- `removeRaster: () => void;` - removes selected raster from the map

If image was added without `coordinates` parameter, the image is scaled down to be fully visible and placed at the center of the viewport.

Other methods may help to use this control without buttons, these methods are described in type definitions `.d.ts`.

## Change paint properties

Paint properties can be changed dynamically.
Below is an example how to control image opacity by slider (full implementation is available in [preview](/preview/preview.js)).

```js
map.on('image.select', ({ id }) => {
  const rasterLayerId = image.rasters[id].rasterLayer.id;
  const range = document.createElement('input');
  range.style.position = 'absolute';
  range.style.left = '50%';
  range.style.transform = 'translateX(-50%)';
  range.style.bottom = '16px';
  range.type = 'range';
  range.min = 0;
  range.step = 0.05;
  range.max = 1;
  range.value = map.getPaintProperty(rasterLayerId, 'raster-opacity');
  range.addEventListener('input', () => {
    map.setPaintProperty(rasterLayerId, 'raster-opacity', Number(range.value));
  });
  document.body.appendChild(range);
  map.once('image.deselect', () => {
    document.body.removeChild(range);
  });
});
```
npm package: @mapbox-controls/inspect
Description: Debug map style layers and sources
Latest version: 3.0.0

[<< all controls](/README.md)

# 🐞 @mapbox-controls/inspect

![](https://github.com/korywka/mapbox-controls/assets/988471/51eaee3e-1f4d-4e9a-b177-fd36f8c5ece1)

Control to debug map style layers and sources.

⚠️ Inspect Control doesn't work with new MapBox Standard style, since the MapBox API [doesn't work](https://github.com/mapbox/mapbox-gl-js/issues/13160) as documentated.

```
npm i @mapbox-controls/inspect
```

```js
import InspectControl from '@mapbox-controls/inspect';
import '@mapbox-controls/inspect/src/index.css';

map.addControl(new InspectControl(), 'bottom-right');
```

## Options

```ts
export type ControlOptions = {
    console?: boolean;
};
```
npm package: @mapbox-controls/language
Description: Change map language
Latest version: 3.0.0

[<< all controls](/README.md)

# 📖 @mapbox-controls/language

![](https://github.com/korywka/mapbox-controls/assets/988471/b2984a79-73f0-43e2-96b3-782b4b9970dc)

Localize map or change dynamically language.

By default, supported languages option is [the supported list](https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/#common-fields) by mapbox styles.

```
npm i @mapbox-controls/language
```

```js
// set language from browser, use 'mul' as fallback
map.addControl(new LanguageControl());

// set custom language while initialization
const languageControl = new LanguageControl({
  language: 'ru',
});
map.addControl(languageControl);

// or change language dynamically
languageControl.setLanguage(event.target.value);
```

## Options

```ts
export type ControlOptions = {
    supportedLanguages?: string[];
    language?: string;
    getLanguageKey?: (language: string) => string;
    excludedLayerIds?: string[];
};
```

## Methods

- `setLanguage(lang?: string | undefined): void;` - set dynamically map language
npm package: @mapbox-controls/ruler
Description: Measure distance between points on a map
Latest version: 3.0.0

[<< all controls](/README.md)

# 📏 @mapbox-controls/ruler

![](https://github.com/korywka/mapbox-controls/assets/988471/1c90555c-2e22-4785-8365-14c1bacabb18)

Control to measure distance between points on a map.

```
npm i @mapbox-controls/ruler
```

```js
import RulerControl from '@mapbox-controls/ruler';
import '@mapbox-controls/ruler/src/index.css';

map.addControl(new RulerControl(), 'bottom-right');
map.on('ruler.on', () => console.log('Ruler activated'));
map.on('ruler.off', () => console.log('Ruler deactivated'));
```

## Options

```ts
export type ControlOptions = {
    units?: import("@turf/helpers").Units;
    labelFormat?: (n: number) => string;
    lineLayout?: import("mapbox-gl").LineLayerSpecification["layout"];
    linePaint?: import("mapbox-gl").LineLayerSpecification["paint"];
    markerLayout?: import("mapbox-gl").CircleLayerSpecification["layout"];
    markerPaint?: import("mapbox-gl").CircleLayerSpecification["paint"];
    labelLayout?: import("mapbox-gl").SymbolLayerSpecification["layout"];
    labelPaint?: import("mapbox-gl").SymbolLayerSpecification["paint"];
    invisible?: boolean;
};
```

## Events

| event     | description       |
| --------- | ----------------- |
| ruler.on  | ruler activated   |
| ruler.off | ruler deactivated |

## Methods

Methods are useful for programmatic control (when option `invisible` is `true`):

- `activate(): void;` - activate controls
- `deactivate(): void;` - deactivate control
- `addCoordinate(coordinate: [number, number]): void;` - add new coordinate
npm package: @mapbox-controls/styles
Description: Change map style
Latest version: 3.0.0

[<< all controls](/README.md)

# 💅 @mapbox-controls/styles

![](https://github.com/korywka/mapbox-controls/assets/988471/18ac929f-06ff-4043-8b4b-258b876b9585)

Control to change map style among provided.

```
npm i @mapbox-controls/styles
```

```js
import StylesControl from '@mapbox-controls/styles';
import '@mapbox-controls/styles/src/index.css';

map.addControl(new StylesControl(styles: {
  label: 'Streets',
  styleName: 'Mapbox Streets',
  styleUrl: 'mapbox://styles/mapbox/streets-v12',
}, {
  label: 'Satellite',
  styleName: 'Mapbox Satellite Streets',
  styleUrl: 'mapbox://sprites/mapbox/satellite-streets-v12',
}), 'top-left');

// or with compact view and default styles (streets and satellite)
map.addControl(new StylesControl({ compact: true }), 'top-left');
```

Use mapbox [`style.load`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:style.load) event to redraw layers.

## Options

`styleName` - is the root value of style's `name` property according to [the specification](https://docs.mapbox.com/style-spec/reference/root/#name).

```ts
export type Style = {
    label: string;
    styleName: string;
    styleUrl: string;
};

export type ControlOptions = {
    styles?: Style[];
    onChange?: (style: Style) => void;
    compact?: boolean;
};
```
npm package: @mapbox-controls/tooltip
Description: Display tooltip on hover
Latest version: 3.0.0

[<< all controls](/README.md)

# 🏷️ @mapbox-controls/tooltip

![](https://github.com/korywka/mapbox-controls/assets/988471/ac7b2ba3-352e-48e2-b1fa-79fc73c1b63c)

Control to display tooltip on hover. The content of the tooltip may depend on the data stored in the layer.

```
npm i @mapbox-controls/tooltip
```

```js
import TooltipControl from '@mapbox-controls/tooltip';
import '@mapbox-controls/tooltip/src/index.css';

map.addControl(new TooltipControl({
  getContent: (event) => `${event.lngLat.lng.toFixed(6)}, ${event.lngLat.lat.toFixed(6)}`,
  layer: 'some-layer-id',
}));
```

## Options

```ts
export type ControlOptions = {
    getContent: (event: import("mapbox-gl").MapMouseEvent) => string;
    layer?: string;
};
```
npm package: @mapbox-controls/zoom
Description: Zoom in and zoom out map
Latest version: 3.0.0

[<< all controls](/README.md)

# 🔍 @mapbox-controls/zoom

![](https://github.com/korywka/mapbox-controls/assets/988471/6f02cf18-765c-47c0-821c-5cb741d34972)

Control to zoom in and zoom out map. The difference between the standard ones is that they are not combined with a compass control.

```
npm i @mapbox-controls/zoom
```

```js
import ZoomControl from '@mapbox-controls/zoom';
import '@mapbox-controls/zoom/src/index.css';

map.addControl(new ZoomControl(), 'bottom-right');
```
npm package: @mapbox-start/react-bridge
Description: > TODO: description
Author: zx
Latest version: 0.2.0

# `react-bridge`

> mapbox-gl react bridge

## Necessary

```
1. <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
   <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
2. "react": "16.8+","uuid": "8.x","lodash": "4.x"
```

## Install

```shell script
yarn add @mapbox-start/react-bridge
```

## Usage

```jsx
import {
  SpecMap,
  SpecMarker,
  SpecPopup,
  SpecSourceGeoJSON,
  SpecLayerSymbol,
  SpecLayerEvent,
} from "@mapbox-start/vue-bridge";

//marker popup
<SpecMap {...props}>
  <SpecMarker />
  <SpecPopup />
</SpecMap>;

//source  layer
<SpecSourceGeoJSON>
  <SpecLayerSymbol>
    <SpecLayerEvent />
  </SpecLayerSymbol>
</SpecSourceGeoJSON>;
```

[详细 demo](https://github.com/zxeryu/mapbox-start/tree/main/example/demo-react)
npm package: @mapbox-start/vue-bridge
Description: > TODO: description
Author: zx
Latest version: 0.2.0

# `react-bridge`

> mapbox-gl vue bridge

## Necessary

```
1. <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
   <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
2. "vue": "2.x","uuid": "8.x","lodash": "4.x"
```

## Install

```shell script
yarn add @mapbox-start/vue-bridge
```

## Usage

```jsx
import {
  SpecMap,
  SpecMarker,
  SpecPopup,
  SpecSourceGeoJSON,
  SpecLayerSymbol,
  SpecLayerEvent,
} from "@mapbox-start/vue-bridge";

//marker popup
<SpecMap {...props}>
  <SpecMarker />
  <SpecPopup />
</SpecMap>;

//source layer
<SpecSourceGeoJSON>
  <SpecLayerSymbol>
    <SpecLayerEvent />
  </SpecLayerSymbol>
</SpecSourceGeoJSON>;
```

[详细 demo](https://github.com/zxeryu/mapbox-start/tree/main/example/demo-vue)