open-index/open-npm huggingface dataset:
npm package: @serdoo/node-red-contrib-soap
Description: SOAP Client for Node Red
Author: Andre Alexandre Avila
Latest version: 0.1.0

# node-red-contrib-soap
Node-red nodes that allow users to send SOAP request.


##Usages
To set up SOAP request, create a new soap config:
* Enter the WSDL address to the `WSDL` field. 
* Select `Auth` method, the default would be set to None.
* Fill in *Username*, *Password*, *Client Key*, *Client Certificate*, *Token* if needed.

In the SOAP request config tab, enter the valid method name in *Method* field. Having an invalid method name will return error.

You can also feed in parameters and overwrite configs with an injected msg: 
* You can have `msg.server` to overwrite the WSDL address. This only works with WSDL server with no authentication method.
* You can have `msg.options` to add in options to the SOAP request.
* You can have `msg.headers` to add in headers for the SOAP request.
* You can feed in `msg.payload.<parameters>` to feed in the parameters you need.

For example, here is the sample flow where we try to send a SOAP request to http://www.webservicex.net/geoipservice.asmx, trying to call the `GetGeoIP` function with an variable IPAddress as 139.130.4.5.

```
[{"id":"e480824b.767f","type":"soap request","z":"beb01f75.a7c1d","name":"","topic":"","wsdl":"1d0b9627.18e18a","method":"GetGeoIP","x":395,"y":169,"wires":[["5bd47eca.8fd67"]]},{"id":"a2176fcf.cb88","type":"inject","z":"beb01f75.a7c1d","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":114,"y":261,"wires":[["5e12abf.dccd454"]]},{"id":"5bd47eca.8fd67","type":"debug","z":"beb01f75.a7c1d","name":"","active":true,"console":"false","complete":"false","x":541,"y":265,"wires":[]},{"id":"5e12abf.dccd454","type":"function","z":"beb01f75.a7c1d","name":"","func":"var newmsg={\n  server:\"http://www.webservicex.net/geoipservice.asmx\",\n  options:{},\n  headers:{},\n  payload:{\n      IPAddress:\"139.130.4.5\"\n  }\n  \n};\nreturn newmsg;","outputs":1,"noerr":0,"x":246,"y":194,"wires":[["e480824b.767f"]]},{"id":"1d0b9627.18e18a","type":"soap-config","z":"beb01f75.a7c1d","wsdl":"http://www.webservicex.net/geoipservice.asmx?wsdl","auth":"0","user":"","pass":"","key":"","cert":"","token":""}]
```

The returned `msg.payload` would be:
```
{ "GetGeoIPResult": { "ReturnCode": 1, "IP": "139.130.4.5", "ReturnCodeDetails": "Success", "CountryName": "Australia", "CountryCode": "AUS" } }
```
npm package: @serdoo/rete-readonly-plugin
Description: Rete readonly plugin ==== #### Rete.js plugin
Author: Vitaliy Stoliarov
Latest version: 0.4.1

Rete readonly plugin
====
#### Rete.js plugin

```js
import ReadonlyPlugin from 'rete-readonly-plugin';

 // the plugin creates a 'readonly' and 'isreadonly' events

editor.use(ReadonlyPlugin, { enabled: false }); // enabled is true by default

this.emitter.exist('isreadonly') // check if event exist, i.e. plugin installed

let readonlyEnabled = editor.trigger('isreadonly'); // get readonly state

editor.trigger('readonly', readonlyEnabled); // enable or disable readonly

editor.on('readonly', () => {}) // side effects when turning on / off the read-only mode
```
npm package: @serebano/capacitor-env-info
Description: CapacitorEnvInfo Capacitor Plugin
Author: me
Latest version: 0.0.1

# capacitor-env-info

CapacitorEnvInfo Capacitor Plugin

## Install

```bash
npm install @serebano/capacitor-env-info
npx cap sync
```

## API

<docgen-index>

* [`echo(...)`](#echo)
* [`getAppEnvironment()`](#getappenvironment)
* [Enums](#enums)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### echo(...)

```typescript
echo(options: { value: string; }) => Promise<{ value: string; }>
```

| Param         | Type                            |
| ------------- | ------------------------------- |
| **`options`** | <code>{ value: string; }</code> |

**Returns:** <code>Promise&lt;{ value: string; }&gt;</code>

--------------------


### getAppEnvironment()

```typescript
getAppEnvironment() => Promise<{ appEnvironment: AppEnvironment; }>
```

**Returns:** <code>Promise&lt;{ appEnvironment: <a href="#appenvironment">AppEnvironment</a>; }&gt;</code>

--------------------


### Enums


#### AppEnvironment

| Members          | Value                     |
| ---------------- | ------------------------- |
| **`simulator`**  | <code>'simulator'</code>  |
| **`debug`**      | <code>'debug'</code>      |
| **`testFlight`** | <code>'testFlight'</code> |
| **`appStore`**   | <code>'appStore'</code>   |
| **`web`**        | <code>'web'</code>        |

</docgen-api>
npm package: @seregpie/bron-kerbosch
Description: An implementation of the Bron-Kerbosch algorithm to find the maximal cliques in an undirected graph.
Author: Sergej Sintschilin
Latest version: 1.0.1

# BronKerbosch

`BronKerbosch(edges)`

An implementation of the [Bron-Kerbosch algorithm](https://en.wikipedia.org/wiki/Bron–Kerbosch_algorithm) to find the maximal cliques in an undirected graph.

| argument | description |
| ---: | :--- |
| `edges` | An iterable of the edges to build the graph from. An edge is an array of two nodes. |

Returns the maximal cliques as an array of arrays.

## setup

### npm

```shell
npm i @seregpie/bron-kerbosch
```

---

Import inside an ES module.

```javascript
import BronKerbosch from '@seregpie/bron-kerbosch';
```

*or*

Import inside a CommonJS module.

```javascript
let BronKerbosch = require('@seregpie/bron-kerbosch');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/bron-kerbosch"></script>
```

The module is globally available as `BronKerbosch`.

## usage

```javascript
let edges = [[6, 4], [4, 3], [4, 5], [5, 2], [5, 1], [1, 2]];
let cliques = BronKerbosch(edges);
// => [[4, 6], [4, 3], [4, 5], [2, 5, 1]]
```

## see also

- [NearestNeighborChain](https://github.com/SeregPie/NearestNeighborChain)
npm package: @seregpie/claw
Description: A very small gesture recognizer.
Author: Sergej Sintschilin
Latest version: 3.0.0
Deprecated: WARNING: This project has been deprecated.

# Claw

A very small gesture recognizer.

## demo

[Try it out!](https://seregpie.github.io/VueClaw/)

## setup

### npm

```shell
npm install @seregpie/claw
```

### ES module

```javascript
import Claw from '@seregpie/claw';
```

### browser

```html
<script src="https://unpkg.com/@seregpie/claw"></script>
```

## members

```
.constructor(target, {
  delay = 500,
  distance = 1,
})
```

| argument | description |
| ---: | :--- |
| `target` |  The target element. |
| `delay` |  The delay threshold to separate the event types. |
| `distance` |  The distance threshold to separate the event types. |

```javascript
let element = document.getElementById('claw');
(new Claw(element))
  .on('panStart', event => {
    // handle
  })
  .on('pan', event => {
    // handle
  })
  .on('panEnd', event => {
    // handle
  });
```

---

`.on(type, listener)`

*chainable*

Binds a listener to an event type.

```javascript
claw.on('tap', event => {
  // handle tap event
});
```

---

`.off(type, listener)`

*chainable*

Unbinds a listener from an event type.
Omit the argument `listener` to unbind all listeners from an event type.
Omit the argument `type` to unbind all listeners from all event types.

```javascript
let tapListener = function(event) {
  // handle tap event
  claw.off('tap', tapListener);
};
claw.on('tap', tapListener);
```

---

`.isIdle`

Returns `true`, if there are no bound listeners.

## events

`holdStart`

```js
{
  pointerType,
  timeStamp,
  x,
  y,
}
```

---

`holdEnd`

```js
{
  initialTimeStamp,
  pointerType,
  timeStamp,
  x,
  y,
}
```

---

`panStart`

```js
{
  pointerType,
  timeStamp,
  x,
  y,
}
```

---

`pan`

```js
{
  initialTimeStamp,
  initialX,
  initialY,
  pointerType,
  previousTimeStamp,
  previousX,
  previousY,
  timeStamp,
  x,
  y,
}
```

---

`panEnd`

```js
{
  initialTimeStamp,
  initialX,
  initialY,
  pointerType,
  timeStamp,
  x,
  y,
}
```

---

`tap`

```js
{
  pointerType,
  timeStamp,
  x,
  y,
}
```
npm package: @seregpie/debounce-async
Description: Creates a debounced function.
Author: Sergej Sintschilin
Latest version: 1.0.1

# debounceAsync

`debounceAsync(func, delay = 0, leading = false)`

Creates a debounced function.

| argument | description |
| ---: | :--- |
| `func` | A function to debounce. |
| `delay` | A number as the delay. |
| `leading` | If `true`, the function is invoked on the leading edge of the delay. |

Returns a new function.

## setup

### npm

```shell
npm install @seregpie/debounce-async
```

### ES module

```javascript
import debounceAsync from '@seregpie/debounce-async';
```

### Node

```javascript
let debounceAsync = require('@seregpie/debounce-async');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/debounce-async"></script>
```

The function is globally available as `debounceAsync`.

## usage

```javascript
let debounced = debounceAsync(async n => {
  await new Promise(resolve => {
    setTimeout(resolve, 2000);
  });
  return n;
}, 1000);
let p0 = debounced(0);
let p1 = debounced(1);
let p2 = debounced(2);
await new Promise(resolve => {
  setTimeout(resolve, 3000);
});
let p3 = debounced(3);
let p4 = debounced(4);
let p5 = debounced(5);
let r = await Promise.all([p0, p1, p2, p3, p4, p5]);
// => [2, 2, 2, 5, 5, 5]
```
npm package: @seregpie/echarts-vue
Description: A simple Vue wrapper for ECharts.
Author: Sergej Sintschilin
Latest version: 1.0.2

# EChartsVue

A simple Vue wrapper for ECharts.

Works for Vue 2 & 3.

## dependencies

- [VueDemi](https://github.com/antfu/vue-demi)
- [VueResizeSensor](https://github.com/SeregPie/VueResizeSensor)

## setup

### npm

```shell
npm i @seregpie/echarts-vue
```

---

```javascript
import {VueChart} from '@seregpie/echarts-vue';
```

### browser

```html
<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/@seregpie/vue-resize-sensor"></script>
<script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>
<script src="https://unpkg.com/@seregpie/echarts-vue"></script>
```

The module is globally available as `EChartsVue`.

## usage

Register the component globally.

```javascript
import {createApp} from 'vue';
import {VueChart} from '@seregpie/echarts-vue';

let app = createApp({/*...*/});
app.component(VueChart.name, VueChart);
app.mount('body');
```

*or*

Register the component locally.

```javascript
import {VueChart} from '@seregpie/echarts-vue';

export default {
  components: {
    VueChart,
  },
  // ...
};
```

---

```vue
<template>
  <vue-chart
    style="width: 600px; height: 400px"
    :options="chartOptions"
  />
</template>
<script>
import {BarChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';
import {use} from 'echarts/core';
use([
  BarChart,
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
]);

export default {
  data() {
    return {
      products: [
        {name: 'shirt', sales: 5},
        {name: 'cardigan', sales: 20},
        {name: 'chiffon shirt', sales: 36},
        {name: 'pants', sales: 10},
        {name: 'heels', sales: 10},
        {name: 'socks', sales: 20},
      ],
    };
  },
  computed: {
    chartOptions() {
      let {products} = this;
      return {
        title: {
          text: 'My Little Shop',
        },
        tooltip: {},
        xAxis: {
          data: products.map(({name}) => name),
        },
        yAxis: {},
        series: {
          name: 'sales',
          data: products.map(({sales}) => sales),
          type: 'bar',
        },
      };
    },
  },
};
</script>
```
npm package: @seregpie/express.ws
Description: WebSocket support for express.
Author: Sergej Sintschilin
Latest version: 18.6.2
Deprecated: Don't use it.

# express.ws

WebSocket support for express.

## dependencies

- [express](https://github.com/expressjs/express)
- [ws](https://github.com/websockets/ws)

## install

```shell
npm install @seregpie/express.ws
```

## usage

```javascript
const express = require('express');
require('@seregpie/express.ws');

let app = express();
app.server = app.listen(3000);
```

---

```javascript
const express = require('express');
require('@seregpie/express.ws');
const https = require('https');

let app = express();
app.server = https.createServer(app).listen(443);
```

---

```javascript
app.ws((ws, req) => {
  ws.on('message', data => {
    ws.send(`received ${data}`);
  });
});
```
npm package: @seregpie/k-means
Description: Implementation of the k-means algorithm to partition the values into the clusters.
Author: Sergej Sintschilin
Latest version: 2.0.1

# KMeans

```
KMeans(values, means, {
  distance(value, otherValue) { /* euclidean distance */ },
  map(value) { /* identity */ },
  maxIterations: 1024,
  mean(...values) { /* centroid */ },
  random: Math.random,
})
```

Implementation of the [k-means algorithm](https://en.wikipedia.org/wiki/k-means) to partition the values into the clusters.

| argument | description |
| ---: | :--- |
| `values` | An iterable of the values to be clustered. |
| `means` | Either an iterable of the initial means or the number of the clusters. |
| `distance` | A function to calculate the distance between two values. |
| `map` | A function to map the values. |
| `maxIterations` | The maximum number of iterations until the convergence. |
| `mean` | A function to calculate the mean value. |
| `random` | A function as the pseudo-random number generator. |

Returns the clustered values as an array of arrays.

## dependencies

- [JustMyLuck](https://github.com/SeregPie/JustMyLuck)
- [VectorMath](https://github.com/SeregPie/VectorMath)

## setup

### npm

```shell
npm install @seregpie/k-means
```

### ES module

```javascript
import KMeans from '@seregpie/k-means';
```

### Node

```javascript
let KMeans = require('@seregpie/k-means');
```

### browser

```html
<script src="https://unpkg.com/just-my-luck"></script>
<script src="https://unpkg.com/@seregpie/vector-math"></script>
<script src="https://unpkg.com/@seregpie/k-means"></script>
```

The module is globally available as `KMeans`.

## usage

Let the initial means be chosen randomly.

```javascript
let vectors = [[1, 4], [6, 2], [0, 4], [1, 3], [5, 1], [4, 0]];
let clusters = KMeans(vectors, 3);
// => [[[1, 4], [0, 4]], [[6, 2], [5, 1], [4, 0]], [[1, 3]]]
```

---

Provide the initial means.

```javascript
let vectors = [[1, 4], [6, 2], [0, 4], [1, 3], [5, 1], [4, 0]];
let centroids = [[0, 7], [7, 0]];
let clusters = KMeans(vectors, centroids);
// => [[[1, 4], [0, 4], [1, 3]], [[6, 2], [5, 1], [4, 0]]]
```

---

Provide a `map` function to convert a value to a vector.

```javascript
let Athlete = class {
  constructor(name, height, weight) {
    this.name = name;
    this.height = height;
    this.weight = weight;
  }
  toJSON() {
    return this.name;
  }
};
let athletes = [
  new Athlete('A', 185, 72), new Athlete('B', 183, 84), new Athlete('C', 168, 60),
  new Athlete('D', 179, 68), new Athlete('E', 182, 72), new Athlete('F', 188, 77),
  new Athlete('G', 180, 71), new Athlete('H', 180, 70), new Athlete('I', 170, 56),
  new Athlete('J', 180, 88), new Athlete('K', 180, 67), new Athlete('L', 177, 76),
];
let clusteredAthletes = KMeansPlusPlus(athletes, [athletes[0], athletes[1]], {
  map: athlete => [athlete.weight / athlete.height],
});
console.log(JSON.parse(JSON.stringify(clusteredAthletes)));
// => [['A', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K'], ['B', 'J', 'L']]
```
npm package: @seregpie/k-means-plus-plus
Description: Implementation of the k-means-plus-plus algorithm to partition the values into the clusters.
Author: Sergej Sintschilin
Latest version: 2.0.1

# KMeansPlusPlus

```
KMeansPlusPlus(values, clustersCount, {
  distance(value, otherValue) { /* euclidean distance */ },
  map(value) { /* identity */ },
  maxIterations: 1024,
  mean(...values) { /* centroid */ },
  random: Math.random,
})
```

Implementation of the [k-means-plus-plus algorithm](https://en.wikipedia.org/wiki/k-means++) to partition the values into the clusters.

| argument | description |
| ---: | :--- |
| `values` | An iterable of the values to be clustered. |
| `clustersCount` | Nhe number of the clusters. |
| `distance` | A function to calculate the distance between two values. |
| `map` | A function to map the values. |
| `maxIterations` | The maximum number of iterations until the convergence. |
| `mean` | A function to calculate the mean value. |
| `random` | A function as the pseudo-random number generator. |

Returns the clustered values as an array of arrays.

## dependencies

- [KMeans](https://github.com/SeregPie/KMeans)
- [JustMyLuck](https://github.com/SeregPie/JustMyLuck)

## setup

### npm

```shell
npm install @seregpie/k-means-plus-plus
```

### ES module

```javascript
import KMeansPlusPlus from '@seregpie/k-means-plus-plus';
```

### Node

```javascript
let KMeansPlusPlus = require('@seregpie/k-means-plus-plus');
```

### browser

```html
<script src="https://unpkg.com/just-my-luck"></script>
<script src="https://unpkg.com/@seregpie/vector-math"></script>
<script src="https://unpkg.com/@seregpie/k-means"></script>
<script src="https://unpkg.com/@seregpie/k-means-plus-plus"></script>
```

The module is globally available as `KMeansPlusPlus`.

## usage

```javascript
let vectors = [[1, 4], [6, 2], [0, 4], [1, 3], [5, 1], [4, 0]];
let clusters = KMeans(vectors, 2);
// => [[[1, 4], [0, 4], [1, 3]], [[6, 2], [5, 1], [4, 0]]]
```

---

Provide a `map` function to convert a value to a vector.

```javascript
let Athlete = class {
  constructor(name, height, weight) {
    this.name = name;
    this.height = height;
    this.weight = weight;
  }
  toJSON() {
    return this.name;
  }
};
let athletes = [
  new Athlete('A', 185, 72), new Athlete('B', 183, 84), new Athlete('C', 168, 60),
  new Athlete('D', 179, 68), new Athlete('E', 182, 72), new Athlete('F', 188, 77),
  new Athlete('G', 180, 71), new Athlete('H', 180, 70), new Athlete('I', 170, 56),
  new Athlete('J', 180, 88), new Athlete('K', 180, 67), new Athlete('L', 177, 76),
];
let clusteredAthletes = KMeansPlusPlus(athletes, 2, {
  map: athlete => [athlete.weight / athlete.height],
});
console.log(JSON.parse(JSON.stringify(clusteredAthletes)));
// => [['A', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K'], ['B', 'J', 'L']]
```
npm package: @seregpie/koa-body
Description: A simple body fetcher.
Author: Sergej Sintschilin
Latest version: 1.0.1

# KoaBody

A simple body fetcher.

## dependencies

- [bytes](https://github.com/visionmedia/bytes.js)

## setup

```shell
npm i @seregpie/koa-body
```

## usage

```javascript
let Koa = require('koa');
let KoaBody = require('@seregpie/koa-body');

let app = new Koa();

app.use(async ctx => {
  ctx.body = await KoaBody.json(ctx);
});
```

---

Fetch the body as `application/json`.

```javascript
let body = await KoaBody.json(ctx);
```

---

Set explicit limit.

```javascript
let body = await KoaBody.json(ctx, {limit: '16mb'});
```

---

Fetch the body as `text/plain`.

```javascript
let body = await KoaBody.text(ctx);
```

---

Fetch the body as a `Buffer`.

```javascript
let body = await KoaBody(ctx);
```
npm package: @seregpie/koa-route
Description: A simple route middleware.
Author: Sergej Sintschilin
Latest version: 19.0.1

# KoaRoute

A simple route middleware.

## dependencies

- [PathToRegExp](https://github.com/pillarjs/path-to-regexp)

## setup

```shell
npm i @seregpie/koa-route
```

## usage

```javascript
let Koa = require('koa');
let KoaRoute = require('@seregpie/koa-route');

let app = new Koa();

let items = [];

app.use(KoaRoute.post('/items', async ctx => {
  let item = await KoaBody.json(ctx);
  let itemIndex = items.length;
  items.push(item);
  ctx.body = itemIndex;
}));

app.use(KoaRoute.get('/items/:itemIndex', ctx => {
  let {itemIndex} = ctx.params;
  let item = items[itemIndex];
  ctx.body = JSON.stringify(item);
}));
```
npm package: @seregpie/koa-state
Description: A simple state middleware.
Author: Sergej Sintschilin
Latest version: 1.0.0

# KoaState

`KoaState(state)`

A simple state middleware.

## setup

### npm

```shell
npm i @seregpie/koa-state
```

### Node

```javascript
let KoaState = require('@seregpie/koa-state');
```

## usage

```javascript
let Koa = require('koa');
let KoaState = require('@seregpie/koa-state');
let mysql = require('mysql');

let app = new Koa();
app.use(KoaState({
  mysql: {
    pool: mysql.createPool({
      database: 'my_db',
      host: 'localhost',
      password: 'secret',
      user: 'me',
    }),
  },
  root: __dirname,
}));

app.use(async (ctx, next) => {
  let {
    mysql,
    root,
  } = ctx.state;
  // process
});
```
npm package: @seregpie/native-require
Description: The native require function.
Author: Sergej Sintschilin
Latest version: 1.0.1

# native-require

The native require function.

# setup

### npm

```shell
npm i @seregpie/native-require
```

## usage

```javascript
import require from '@seregpie/native-require';

let feature;
try {
  feature = require('optional-node-feature');
} catch {
  try {
    feature = require('other-optional-node-feature');
  } catch {
    feature = null;
  }
}
```
npm package: @seregpie/nearest-neighbor-chain
Description: Builds a hierarchy of clusters.
Author: Sergej Sintschilin
Latest version: 1.0.0

# NearestNeighborChain

`NearestNeighborChain(values, distance)`

Builds a hierarchy of the clusters.

| argument | description |
| ---: | :--- |
| `values` | An iterable of the values to build the hierarchy of the clusters from. |
| `distance` | A function to calculate the distance between two values. The value pairs with the lowest distance build a cluster. |

Returns the clustered values as a nested array.

## dependencies

- [BronKerbosch](https://github.com/SeregPie/BronKerbosch)

## setup

### npm

```shell
npm install @seregpie/nearest-neighbor-chain
```

### ES module

```javascript
import NearestNeighborChain from '@seregpie/nearest-neighbor-chain';
```

### Node

```javascript
let NearestNeighborChain = require('@seregpie/nearest-neighbor-chain');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/bron-kerbosch"></script>
<script src="https://unpkg.com/@seregpie/nearest-neighbor-chain"></script>
```

The module is globally available as `NearestNeighborChain`.

## usage

```javascript
let array = [4, 90, 12, 61, 29];
let clusters = NearestNeighborChain(array, (a, b) => Math.abs(a - b));
// => [[29, [4, 12]], [90, 61]]
```

---

Overlapping clusters are merged together.

```javascript
let intersection = function(a, b) {
  a = new Set(a);
	b = new Set(b);
  return [...a].filter(v => b.has(v));
};
let array = ['ac', 'ab', 'baab', 'aba', 'bc'];
let clusters = NearestNeighborChain(array, (a, b) => -intersection(a, b).length);
// => ['ac', 'bc', ['ab', 'baab', 'aba']]
```

## see also

- [KMeans](https://github.com/SeregPie/KMeans)
npm package: @seregpie/render-template
Description: Renders a string template with the given directive.
Author: Sergej Sintschilin
Latest version: 1.0.0

# renderTemplate

```
renderTemplate(template, directive, {
	regex = /{{\s*([^\s{}]+)\s*}}/g,
})
```

Renders a string template with the given directive.

| argument | description |
| ---: | :--- |
| `template` | A string to render. |
| `directive` | An object or an array to be used to replace the matches. |
| `regex` | A regular expression. |

Returns the rendered string.

---

Access and change the default configuration.

```javascript
let {
	regex,
} = renderTemplate;
```

## setup

### npm

```shell
npm i @seregpie/render-template
```

### ES module

```javascript
import renderTemplate from '@seregpie/render-template';
```

### browser

```html
<script src="https://unpkg.com/@seregpie/render-template"></script>
```

## usage

```javascript
let string = renderTemplate('Hello, {{ name }}. You have {{ unreadMessagesCount }} unread messages.', {
	name: 'Alice',
	unreadMessagesCount() {
		return 1 + 1;
	},
});
// => 'Hello, Alice. You have 2 unread messages.'
```

---

```javascript
let string = renderTemplate('My top three favorite fruits are {{ 0 }}, {{ 1 }} and {{ 2 }}.', [
	'apples',
	'bananas',
	'oranges',
]);
// => 'My top three favorite fruits are apples, bananas and oranges.'
```
npm package: @seregpie/save-file
Description: Saves a file inside a browser.
Author: Sergej Sintschilin
Latest version: 1.0.1

# saveFile

```
saveFile(value, fileName)
```

Saves a file inside a browser.

| argument | description |
| ---: | :--- |
| `value` | The value to load from. Supported value types are `String`, `Promise`, `URL`, `Blob`, `File`, `Response`. |
| `fileName` | A string as the file name. If not specified, the file name is suggested in various ways. |

Returns a promise.

## setup

### npm

```shell
npm i @seregpie/save-file
```

### ES module

```javascript
import saveFile from '@seregpie/save-file';
```

### Node

```javascript
let saveFile = require('@seregpie/save-file');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/save-file"></script>
```

The function is globally available as `saveFile`.

## usage

```javascript
let text = [
  'Twinkle, twinkle, little star,',
  'How I wonder what you are!',
  'Up above the world so high,',
  'Like a diamond in the sky.'
].join('\n');
let blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
await saveFile(blob, 'lullaby.txt');
```

---

```javascript
let res = await fetch('/path/to/image.jpg', {
  method: 'GET',
  headers: {'Authorization': `Bearer ${token}`},
});
await saveFile(res);
```
npm package: @seregpie/tag
Description: Parses a template literal to a function.
Author: Sergej Sintschilin
Latest version: 1.0.0

# tag

Parses a template literal to a function.

## setup

### npm

```shell
npm i @seregpie/tag
```

---

Import inside an ES module.

```javascript
import tag from '@seregpie/tag';
```

*or*

Import inside a CommonJS module.

```javascript
let tag = require('@seregpie/tag');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/tag"></script>
```

The function is globally available as `tag`.

## usage

```javascript
let renderTemplate = tag`Hi, ${'name'}!`;
let string = renderTemplate({name: 'Patrik'});
// => 'Hi, Patrik!'
```
npm package: @seregpie/three.camera-facing-group
Description: A group of objects that are always facing the camera.
Author: Sergej Sintschilin
Latest version: 1.0.1

# THREE.CameraFacingGroup

`class THREE.CameraFacingGroup extends THREE.Mesh`

A group of objects that are always facing the camera.

## setup

### npm

```shell
npm i @seregpie/three.camera-facing-group
```

---

```javascript
import CameraFacingGroup from '@seregpie/three.camera-facing-group';
```

### browser

```html
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.camera-facing-group"></script>
```

The class is globally available as `THREE.CameraFacingGroup`.

## usage

```javascript
let geometry = new THREE.CircleGeometry(8, 32);
let material = new THREE.MeshBasicMaterial({color: 0xffff00});
let mesh = new THREE.Mesh(geometry, material);
let group = new THREE.CameraFacingGroup();
group.add(mesh);
scene.add(group);
```

## members

### properties

`.isCameraFacingGroup = true`

Used to check whether this is an instance of `CameraFacingGroup`.
npm package: @seregpie/three.text-plane
Description: Optimally displays the text as a plane.
Author: Sergej Sintschilin
Latest version: 1.1.0

# THREE.TextPlane

`class THREE.TextPlane extends THREE.Mesh`

Optimally displays the text as a plane.

## demo

[Try it out!](https://seregpie.github.io/aframe-text-plane/)

## dependencies

- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture)

## setup

### npm

```shell
npm i @seregpie/three.text-plane
```

---

```javascript
import TextPlane from '@seregpie/three.text-plane';
```

### browser

```html
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.text-texture"></script>
<script src="https://unpkg.com/@seregpie/three.text-plane"></script>
```

The class is globally available as `THREE.TextPlane`.

## usage

```javascript
let plane = new THREE.TextPlane({
  alignment: 'left',
  color: '#24ff00',
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 8,
  fontStyle: 'italic',
  text: [
    'Twinkle, twinkle, little star,',
    'How I wonder what you are!',
    'Up above the world so high,',
    'Like a diamond in the sky.',
  ].join('\n'),
});
scene.add(plane);
```

---

Update the plane.

```javascript
plane.fontFamily = 'Arial, Helvetica, sans-serif';
plane.fontStyle = 'normal';
plane.text = [
  'When this blazing sun is gone,',
  'When he nothing shines upon,',
  'Then you show your little light,',
  'Twinkle, twinkle, through the night.',
].join('\n');
```

## members

### constructor

```
new THREE.TextPlane({
  alignment: 'center',
  backgroundColor = 'rgba(0,0,0,0)',
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 1,
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  lineGap: 0.25,
  padding: 0.5,
  strokeColor: '#fff',
  strokeWidth: 0,
  text: '',
}, material)
```

| argument | description |
| ---: | :--- |
| `alignment` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
| `backgroundColor` | The background color. |
| `color` | The color. |
| `fontFamily` | The font family. |
| `fontSize` | The font size. |
| `fontStyle` | The font style. |
| `fontVariant` | The font variant. |
| `fontWeight` | The font weight. |
| `lineGap` | The vertical distance between the text lines. The value is relative to the font size. |
| `padding` | The space around the text. The value is relative to the font size. |
| `strokeColor` | The stroke color. |
| `strokeWidth` | The stroke width. The value is relative to the font size. |
| `text` | The text. |
| `material` | An instance of `THREE.Material`. If not provided, a default instance will be created. |

### properties

`.isTextPlane = true`

Used to check whether this is an instance of `TextPlane`.

---

`.text`

`.fontFamily`

`.fontSize`

`.fontWeight`

`.fontVariant`

`.fontStyle`

`.color`

`.strokeWidth`

`.strokeColor`

`.alignment`

`.lineGap`

`.padding`

`.backgroundColor`

### methods

`.dispose()`

Disposes the geometry, the texture and the material.
npm package: @seregpie/three.text-sprite
Description: Optimally displays the text as a sprite.
Author: Sergej Sintschilin
Latest version: 3.2.0

# THREE.TextSprite

`class THREE.TextSprite extends THREE.Sprite`

Optimally displays the text as a sprite.

## demo

[Try it out!](https://seregpie.github.io/aframe-text-sprite/)

## dependencies

- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture)

## setup

### npm

```shell
npm i @seregpie/three.text-sprite
```

---

```javascript
import TextSprite from '@seregpie/three.text-sprite';
```

### browser

```html
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.text-texture"></script>
<script src="https://unpkg.com/@seregpie/three.text-sprite"></script>
```

The class is globally available as `THREE.TextSprite`.

## usage

```javascript
let sprite = new THREE.TextSprite({
  alignment: 'left',
  color: '#24ff00',
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 8,
  fontStyle: 'italic',
  text: [
    'Twinkle, twinkle, little star,',
    'How I wonder what you are!',
    'Up above the world so high,',
    'Like a diamond in the sky.',
  ].join('\n'),
});
scene.add(sprite);
```

---

Update the sprite.

```javascript
sprite.fontFamily = 'Arial, Helvetica, sans-serif';
sprite.fontStyle = 'normal';
sprite.text = [
  'When this blazing sun is gone,',
  'When he nothing shines upon,',
  'Then you show your little light,',
  'Twinkle, twinkle, through the night.',
].join('\n');
```

## members

### constructor

```
new THREE.TextSprite({
  alignment: 'center',
  backgroundColor: 'rgba(0,0,0,0)',
  color: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 1,
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  lineGap: 0.25,
  padding: 0.5,
  strokeColor: '#fff',
  strokeWidth: 0,
  text: '',
}, material)
```

| argument | description |
| ---: | :--- |
| `alignment` | The horizontal text alignment. Possible values are `'center'`, `'left'` and `'right'`. |
| `backgroundColor` | The background color. |
| `color` | The color. |
| `fontFamily` | The font family. |
| `fontSize` | The font size. |
| `fontStyle` | The font style. |
| `fontVariant` | The font variant. |
| `fontWeight` | The font weight. |
| `lineGap` | The vertical distance between the text lines. The value is relative to the font size. |
| `padding` | The space around the text. The value is relative to the font size. |
| `strokeColor` | The stroke color. |
| `strokeWidth` | The stroke width. The value is relative to the font size. |
| `text` | The text. |
| `material` | An instance of `THREE.Material`. If not provided, a default instance will be created. |

### properties

`.isTextSprite = true`

Used to check whether this is an instance of `TextSprite`.

---

`.text`

`.fontFamily`

`.fontSize`

`.fontWeight`

`.fontVariant`

`.fontStyle`

`.color`

`.strokeWidth`

`.strokeColor`

`.alignment`

`.lineGap`

`.padding`

`.backgroundColor`

### methods

`.dispose()`

Disposes the texture and the material.
npm package: @seregpie/throttle-async
Description: Creates a throttled function.
Author: Sergej Sintschilin
Latest version: 1.0.1

# throttleAsync

`throttleAsync(func, delay = 0, trailing = false)`

Creates a throttled function.

| argument | description |
| ---: | :--- |
| `func` | A function to throttle. |
| `delay` | A number as the delay. |
| `trailing` | If `true`, the function is invoked on the trailing edge of the delay. |

Returns a new function.

## setup

### npm

```shell
npm install @seregpie/throttle-async
```

### ES module

```javascript
import throttleAsync from '@seregpie/throttle-async';
```

### Node

```javascript
let throttleAsync = require('@seregpie/throttle-async');
```

### browser

```html
<script src="https://unpkg.com/@seregpie/throttle-async"></script>
```

The function is globally available as `throttleAsync`.

## usage

```javascript
let throttled = throttleAsync(async n => {
  await new Promise(resolve => {
    setTimeout(resolve, 2000);
  });
  return n;
}, 1000);
let p0 = throttled(0);
let p1 = throttled(1);
let p2 = throttled(2);
await new Promise(resolve => {
  setTimeout(resolve, 3000);
});
let p3 = throttled(3);
let p4 = throttled(4);
let p5 = throttled(5);
let r = await Promise.all([p0, p1, p2, p3, p4, p5]);
// => [0, 2, 2, 3, 5, 5]
```
npm package: @seregpie/vue-chart
Description: A simple wrapper for Chart.js.
Author: Sergej Sintschilin
Latest version: 1.1.0

# VueChart

A simple wrapper for Chart.js.

Works for Vue 2 & 3.

## dependencies

- [VueDemi](https://github.com/antfu/vue-demi)

## setup

### npm

```shell
npm i @seregpie/vue-chart
```

---

```javascript
import VueChart from '@seregpie/vue-chart';
```

### browser

```html
<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/chart.js@3"></script>
<script src="https://unpkg.com/@seregpie/vue-chart"></script>
```

The module is globally available as `VueChart`.

## usage

Register the component globally.

```javascript
import {createApp} from 'vue';
import VueChart from '@seregpie/vue-chart';

let app = createApp({/*...*/});
app.component(VueChart.name, VueChart);
app.mount('body');
```

*or*

Register the component locally.

```javascript
import VueChart from '@seregpie/vue-chart';

export default {
  components: {
    VueChart,
  },
  // ...
};
```

---

```html
<vue-chart
  :data="chartData"
  :options="{scales: {y: {beginAtZero: true}}}"
  style="width: 800px; height: 600px;"
  type="bar"
/>
```

## properties

| name | type | description |
| ---: | :--- | :--- |
| `data` | `Object` | The data of the chart. |
| `options` | `Object` | The configuration options of the chart of the current type. |
| `type` | `String` | The type of the chart. Changing the value will recreate the chart. |
| `updateMode` | `String` | The mode for the update process. |
npm package: @seregpie/vue-resize-sensor
Description: A Vue container that supports the resize event.
Author: Sergej Sintschilin
Latest version: 1.1.5

# VueResizeSensor

A Vue container that supports the resize event.

Works for Vue 2 & 3.

## dependencies

- [Vue Demi](https://github.com/antfu/vue-demi)

## setup

### npm

```shell
npm i @seregpie/vue-resize-sensor
```

---

```javascript
import VueResizeSensor from '@seregpie/vue-resize-sensor';
```

### browser

```html
<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/@seregpie/vue-resize-sensor"></script>
```

The component is globally available as `VueResizeSensor`.

## usage

Register the component globally.

```javascript
import {createApp} from 'vue';
import VueResizeSensor from '@seregpie/vue-resize-sensor';

let app = createApp({/*...*/});
app.component(VueResizeSensor.name, VueResizeSensor);
app.mount('body');
```

*or*

Register the component locally.

```javascript
import VueResizeSensor from '@seregpie/vue-resize-sensor';

export default {
  components: {
    VueResizeSensor,
  },
  // ...
};
```

---

Wrap the content inside the default slot.

```html
<vue-resize-sensor
  style="width: 100%; height: 100%"
  v-slot="{width, height}"
>
  <my-header v-if="height > 400"/>
  <div
    :style="{flexDirection: (width > height) ? 'row' : 'column'}"
    style="display: flex"
  >
    <my-first-item/>
    <my-second-item/>
  </div>
</vue-resize-sensor>
```

---

Capture the `resize` event.

```html
<div>
  <vue-resize-sensor @resize="onResize"/>
  <my-content/>
</div>
```

```javascript
methods: {
  onResize({width, height}) {
    // handle resize
  },
},
```

---

The component renders a `<div>` element by default. You can change the element that is rendered with the `tag` attribute.

```html
<vue-resize-sensor tag="form"/>
```
npm package: @seregpie/vueasynccomputed
Description: ...
Author: Sergej Sintschilin
Latest version: 18.7.9
Deprecated: Don't use it.

# VueAsyncComputed

...

## demo

[Try it out!](https://seregpie.github.io/VueAsyncComputed/)

## dependencies

- [Vue](https://github.com/vuejs/vue)

## setup

### npm

```shell
npm install @seregpie/vueasynccomputed
```

### ES module

Install the plugin globally.

```javascript
import Vue from 'vue';
import VueAsyncComputed from '@seregpie/vueasynccomputed';

Vue.use(VueAsyncComputed);
```

*or*

Register the plugin in the scope of another instance.

```javascript
import VueAsyncComputed from '@seregpie/vueasynccomputed';

export default {
  // ...
  mixins: [VueAsyncComputed],
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vueasynccomputed"></script>
```

If Vue is detected, the plugin will be installed automatically.

## usage

...
npm package: @seregpie/vuedragdrop
Description: A drag and drop solution for Vue.
Author: Sergej Sintschilin
Latest version: 18.8.13
Deprecated: never finished

# VueDragDrop

A drag and drop solution for Vue.

## demo

[Try it out!](https://seregpie.github.io/VueDragDrop/)

## dependencies

- [Vue](https://github.com/vuejs/vue)

## setup

### npm

```shell
npm install @seregpie/vuedragdrop
```

### ES module

Register the components globally.

```javascript
import Vue from 'vue';
import VueDragDrop from '@seregpie/vuedragdrop';

Vue.use(VueDragDrop);
```

*or*

Register the components in the scope of another instance.

```javascript
import VueDragDrop from '@seregpie/vuedragdrop';

export default {
  // ...
  components: {
    [VueDragDrop.DragItem.name]: VueDragDrop.DragItem,
    [VueDragDrop.DropArea.name]: VueDragDrop.DropArea,
  },
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vuedragdrop"></script>
```

If Vue is detected, the components will be registered automatically.

## usage

...

## components

### VueDragItem

#### properties

| property | type | default |
| ---: | :--- | :--- |
| `tag` | `String` | `'div'` |
| `data` | | |
| `revertDuration` | `Number` | `0` |
| `restrict` | | |

#### events

| event | description |
| ---: | :--- |
| `drag-start` | |
| `drag-end` | |
| `drag` | |

### VueDropArea

#### properties

| property | type | default |
| ---: | :--- | :--- |
| `tag` | `String` | `'div'` |
| `accept` | `Function` | `stubTrue` |
| `overlapThreshold` | `Number` | `1` |

#### events

| event | description |
| ---: | :--- |
| `drag-start` | |
| `drag-end` | |
| `drag-over` | |
| `drag-out` | |
| `drag` | |
| `drag-outside` | |
| `drag-inside` | |
| `drop` | |
npm package: @seregpie/vueflex
Description: A flexbox grid system.
Author: Sergej Sintschilin
Latest version: 20.0.0
Deprecated: WARNING: This project has been deprecated. Browsers support flex gap natively.

# VueFlex

A flexbox grid system.

## demo

[Try it out!](https://seregpie.github.io/VueFlex/)

## setup

### npm

```shell
npm install @seregpie/vueflex
```

---

Register the components globally.

```javascript
import Vue from 'vue';
import VueFlex from '@seregpie/vueflex';

Vue.use(VueFlex);
```

*or*

Register the components in the scope of another component.

```javascript
import VueFlex from '@seregpie/vueflex';

export default {
  components: {
    [VueFlex.Box.name]: VueFlex.Box,
    [VueFlex.Item.name]: VueFlex.Item,
  },
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vueflex"></script>
```

If Vue is detected, the components are registered automatically.

## usage

```html
<vue-flex-box
  align-items="center"
  gap="16px"
  justify-content="space-between"
  wrap
>
  <vue-flex-item><!--...--></vue-flex-item>
  <vue-flex-item><!--...--></vue-flex-item>
</vue-flex-box>
```

---

Nested boxes can inherit the gap from their parent.

```html
<vue-flex-box gap="8px">
  <vue-flex-item
    style="width: 100px;"
  ><!--...--></vue-flex-item>
  <vue-flex-box
    direction-column
    gap="inherit"
    style="flex-grow: 1;"
  >
    <vue-flex-item><!--...--></vue-flex-item>
    <vue-flex-item><!--...--></vue-flex-item>
  </vue-flex-box>
</vue-flex-box>
```

---

Provide any unit for the gap.

```html
<vue-flex-box gap="2em"><!--...--></vue-flex-box>
```

## components

### VueFlexBox

#### properties

| property | type | default |
| ---: | :--- | :--- |
| `alignContent` | `String` | `'stretch'` |
| `alignItems` | `String` | `'stretch'` |
| `directionColumn` | `Boolean` | `false` |
| `gap` | `String` | `'0px'` |
| `justifyContent` | `String` | `'flex-start'` |
| `reverseDirection` | `Boolean` | `false` |
| `reverseWrap` | `Boolean` | `false` |
| `tag` | `String` | `'div'` |
| `wrap` | `Boolean` | `false` |

### VueFlexItem

#### properties

| property | type | default |
| ---: | :--- | :--- |
| `tag` | `String` | `'div'` |
npm package: @seregpie/vuesvg
Description: Loads a SVG image as an inline SVG.
Author: Sergej Sintschilin
Latest version: 19.0.0

# VueSvg

Loads a SVG image as an inline SVG.

## setup

### npm

```shell
npm i @seregpie/vuesvg
```

### ES module

Register the component globally.

```javascript
import Vue from 'vue';
import VueSvg from '@seregpie/vuesvg';

Vue.component(VueSvg.name, VueSvg);
```

*or*

Register the component in the scope of another component.

```javascript
import VueSvg from '@seregpie/vuesvg';

export default {
  components: {
    [VueSvg.name]: VueSvg,
  },
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vuesvg"></script>
```

If Vue is detected, the component will be registered automatically.

## usage

```html
<vue-svg src="https://unpkg.com/simple-icons/icons/github.svg"/>
```
npm package: @seregpie/vuetween
Description: Allows the components to tween their properties.
Author: Sergej Sintschilin
Latest version: 18.10.25

# VueTween

Allows the components to tween their properties.

## demo

[Try it out!](https://seregpie.github.io/VueTween/)

## dependencies

- [Vue](https://github.com/vuejs/vue)

## setup

### npm

```shell
npm install @seregpie/vuetween
```

### ES module

Install the plugin globally.

```javascript
import Vue from 'vue';
import VueTween from '@seregpie/vuetween';

Vue.use(VueTween);
```

*or*

Register the plugin in the scope of a component.

```javascript
import VueTween from '@seregpie/vuetween';

export default {
  mixins: [VueTween],
  /*...*/
};
```

### browser

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@seregpie/vuetween"></script>
```

If Vue is detected, the plugin will be installed automatically.

## usage

```javascript
{
  props: {
    number: Number,
    animationDuration: Number,
  },
  tweened: {
    animatedNumber: {
      get() {
        return this.number;
      },
      duration() {
        return this.animationDuration;
      },
      easing(t) {
        return t * (2 - t);
      },
    },
  },
}
```

---

Use nested objects and arrays.

```javascript
{
  data: {
    colors: [
      {r: 255, g: 0, b: 0},
      {r: 0, g: 255, b: 0},
      {r: 0, g: 0, b: 255},
    ],
  },
  tweened: {
    animatedColors: {
      get() {
        return this.colors;
      },
      duration: 1000,
    },
  },
}
```