open-index/open-npm huggingface dataset:
npm package: @pixeyes/api-sdk
Description: ```javascript import { PixEyeClient } from "@pixeyes/api-sdk";
Latest version: 0.0.1-beta.9



## how to use 

```javascript
import { PixEyeClient } from "@pixeyes/api-sdk";

const client = new PixEyeClient({
  endpoint: 'https://stable-pixeye.jd.com/v1',
  spaceEndpoint: "https://spaces.jd.com",
  token: "5fc5eb7f045c4f178e97c80bf82889c7",
});

client.doLogin();

```
npm package: @pixeyes/layer-render
Description: sketch、figma、PS通用图层渲染器
Latest version: 0.0.10-beta.13

# layer-render[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/vft-aurora/layer-render)
sketch、figma、PS通用图层渲染器

# 预览效果
![gif](https://storage.360buyimg.com/imgtools/cced120583-b8d18c70-2bd2-11ec-a7e2-3f485095ac48.gif)

# RoadMap

1. 添加各种生命周期钩子，`click` `move` 事件回调
2. 胶水层，在线连接figma open api接口、sketch支持文件上传解析，会先开一个独立应用来做
3. 。。。
npm package: @pixfox/leechee-util
Description: A package with util-functions  included in seperate fold for browser and node environment.
Author: Changjiang Zhao
Latest version: 1.0.4

# Description  

这个包集合一些常用工具方法，默认提供的是用于浏览器端的`./dist/leechee.win.min.js`,同时也提供了node环境下常用工具集`./dist/leechee.node.min.js`。 ~~两者都实现了umd接口~~。 前者实现了UMD接口，后者则以commonjs2的方式提供接口。
`leechee.win.min.js` 支持现代浏览器以及ie9+。 
   
~~虽供浏览器端使用，但没有对浏览器做版本和类别的兼容，所以不要直接以link方式引入来使用。换句话说请以模块编程方式来使用，结合打包工具如webpack,配合babel-loader之类的来做兼容处理。~~

The 'main' field of this package is './dist/leechee.win.min.js' for the default use in browsers, though 'leechee.node.min.js' can be useful in node environment. ~~Both of these two files are accessible by 'umd' functions~~. The `leechee.win.min.js` enabled UMD interface, while `leechee.node.min.js` can be required as commonjs2 module.  
`leechee.win.min.js` supports <font color=#3194d0>ie9+</font>.  
  
~~Don't link the ```leechee.win.js``` in html, though the target environment is browser, because it's not compatible with various browser versions or kernels. In other words, it works well as a module with bundle tool like webpack to make use of ```babel-loader```.~~


# Usage  
**link** in HTML  
```
    // link the source
    <script src="path/to/leechee.win.min.js"></script>  
    // leechee would be a global variable of window
    <script>
        leechee.ready(function(){
            console.log(leechee.env);
            leechee.on(leechee.rooter(),'click',function(e){
                document.querySelector('body').style.backgroundColor = 'red'
            })
        })
    </script>
```   
**install** in Node
```
    npm install @pixfox/leechee-util
```  
in bussiness code (By default `leechee.win.min.js` is the main module )  
```
import * as customName from '@pixfox/leechee-util' // as es6 module   
import {v,ready} from '@pixfox/leechee-util' // as es6 module   
const leechee = require( '@pixfox/leechee-util') // as commonjs module   
const {v,env} = require( '@pixfox/leechee-util') // as commonjs module 
```  
**treeshaking** in webpack  
```
import {v,ready} from '@pixfox/leechee-util'/src/win    // for brower env
import {v,env} from '@pixfox/leechee-util'/src/node    // for node env
```
*Note:'Treeshaking' works with es6 module pattern in 'production' mode of webpack and , so you may get some errors like 'Unrecognized identifier' in non-morden browers in 'development' mode of webpack*
npm package: @pixi-build-tools/api-extractor-lerna-monorepo
Description: Run @microsoft/api-extractor on all TypeScript packages in a Lerna monorepo!
Author: Shukant K. Pal
Latest version: 1.1.0

# @pixi-build-tools/api-extractor-lerna-monorepo

This package can be used to generate declaration files for TypeScript packages in a [Lerna](https://www.npmjs.com/package/lerna) monorepo
using [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor). **You need to compile your whole project using [tsc](https://www.npmjs.com/package/typescript) into the outDir specified in the [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)**.

## Installation :package:

```bash
npm install --dev @pixi-build-tools/api-extractor-lerna-monorepo
```

## Usage :page_facing_up:

```bash
api-extractor-lerna-monorepo
```
npm package: @pixi-build-tools/floss-rush-monorepo
Description: Unit-testing the PixiJS way!
Author: Shukant K. Pal
Latest version: 1.0.1

# @pixi-build-tools/floss-rush-monorepo

This package makes testing Rush monorepos easy with floss (and possibly mocha)! It will use the current
working directory to find the Rush configuration file and use the rush-lib API to `require` all of your
test files.

It expects scoped packages to each have a `test/index.js` file that `require`s all the test suites. This
way all test suites have a single entry point.

## Installation :package:

```bash
npm install --dev @pixi-build-tools/floss-rush-monorepo
```

## Usage :page_facing_up:

```bash
floss --path node_modules/\@pixi-build-tools/floss-rush-monorepo/index.js
```
npm package: @pixi-build-tools/rollup-configurator
Description: Opinionated rollup configuration for PixiJS libraries
Author: Shukant K. Pal
Latest version: 1.0.14

# @pixi-build-tools/rollup-configurator

This package can be used directly as a Rollup configuration.

## Installation :package:

```bash
npm install --dev @pixi-build-tools/rollup-configurator
```

## Usage :page_facing_up:

### as a Rollup configuration

```
rollup -c node_modules/\@pixi-build-tools/rollup-configurator/index.js
```

### in your custom configuration

```
import { main } from '@pixi-build-tools/rollup-configurator/main';
```

## Requirements

This package relies on your library's `package.json` manifest to configure the
build process.  By default, it will not include your package dependencies (and peer-dependencies)
in the bundle; to prevent this, set `standalone` in your `package.json`.

The following table summarizes the fields you might need to fill:

| Field            | Recommended              | Description                              |
| ---------------- | ------------------------ | ---------------------------------------- |
| `main`           | :white_check_mark:       | Output path for CommonJS bundle          |
| `module`         | :white_check_mark:       | Output path for ESM bundle               |
| `bundle`         | :white_check_mark:       | Output path for UMD bundle. In production mode, will also produce a minified bundle with a `.min.js` extension |
| `namespace`      |                          | Configure your package's global/namespace, i.e. how applications will access. For example, the namespace of pixi.js is `PIXI` |
| `bundleInput`    |                          | Alternative entry point for UMD bundles (other than `src/index.(ts|js)`)  |
| `bundleOutput`   |                          | Used to configure the Rollup `output` for UMD bundles |
| `bundleNoExport` |                          | Enable if your package does not export anything (for example, mixins) |
| `standalone`     |                          | Bundle all your dependencies in the UMD output |
npm package: @pixi-essentials/area-allocator
Description: Efficient texture area allocator for on-demand atlases
Author: Shukant Pal
Latest version: 3.0.0

# @pixi-essentials/area-allocator

This package implements an area allocator that can be used to issue texture space. It provides the following
implementations:

* GuilloteneAllocator: This maintains a tree of rectangular area nodes that are divided either horizontally or
vertically in a flip-flop fashion. The allocated area is picked from the tightest fit, after which the original
area is sliced. Sibling areas are merged when both are freed. This implementation was inspired the [guillotiere](https://github.com/nical/guillotiere) crate.

## Installation :package:

```bash
npm install @pixi-essentials/area-allocator
```

## Usage :page_facing_up:

```ts
import { GuilloteneAllocator } from '@pixi-essentials/area-allocator';

import type { AreaAllocator } from '@pixi-essentials/area-allocator';

// A guillotene allocator that can manage 2D space
const spatialAllocator: AreaAllocator = new GuilloteneAllocator(1024, 1024);

// Rectange-area allocated by the allocator. The returned object has a __mem_area property that
// points to a area node that is required to free this area.
const space = spatialAllocator.allocate(128, 256);

// Free the 2D space after using. NOTE: This must be the same rectangle passed by "allocate", or you
// must also copy the __mem_area property.
spatialAllocator.free(space);
```
npm package: @pixi-essentials/bounds
Description: Utilities for handling 2D bounding boxes
Author: Shukant K. Pal
Latest version: 3.0.0

# @pixi-essentials/bounds

This package provides utilities to handle non-conventional bounding areas. That includes:

* axis-aligned bounding boxes
* oriented bounding boxes

## Installation :package:

```bash
npm install @pixi-essentials/bounds
```
npm package: @pixi-essentials/conic
Description: Draw antialiased 2D conic sections to the display
Author: Shukant Pal
Latest version: 2.0.1

# @pixi-essentials/conic

This package is a display-object library for drawing conic sections (or any quadric curve) in
two dimensions.

Any quadratic curve can be represented in the form _k_<sup>2</sup> - _lm_ = _0_, where _k_, _l_, _m_ are linear functionals (of form _ax_ + _by_ + _c_ = _0_). _l_
and _m_ are tangents to the curve, while _k_ is the chord joining the points of tangency. The `Conic` shape exploits this representation to store quadric curves.

## Installation :package:

```bash
npm install @pixi-essentials/conic
```

## Usage :page_facing_up:

```ts
import { Conic, ConicDisplay } from '@pixi-essentials/conic';

const circleShape = Conic.createCircle(.5);
const circleDisplay = new ConicDisplay(circleShape);

circleDisplay.drawRect(0, 0, 1, 1);
circleDisplay.scale.set(100, 100);
circleDisplay.position.set(10, 10);
```

The snippet creates a circular curve centered at (0.5, 0.5) of radius 0.5. Then, a graphic is used to display the curve in a rectangle (0, 0, 1, 1), upscaled
at 100x resolution.

The linear functionals & the produced curves can be seen here: https://www.desmos.com/calculator/bbeizcgnhl

<img src="https://i.ibb.co/8mQ9xTM/Screen-Shot-2020-07-14-at-2-30-36-PM.png"></img>

## Control points & bezier curves

By default, a conic is a bezier. You can set the local control points on the conic-display to draw a
bezier curve.

```ts
import { Point } from 'pixi.js';
import { Conic, ConicDisplay } from '@pixi-essentials/conic`;

const bezierShape = new Conic();
const bezierDisplay = new ConicDisplay(bezierShape);

bezierDisplay
    .drawControlPoints()
    .setControlPoints(
        new Point(10, 10),
        new Point(200, 500),
        new Point(800, 20)
    );
```

This snippet will draw a quadratic bezier curve with control points (10,10), (200,500), (800,20).

<img src="https://i.ibb.co/TgPZMMJ/Screen-Shot-2020-07-15-at-2-39-30-PM.png"></img>

## Antialiasing

The conic shader uses a hardware-based derivatives to antialias pixels on the edge of the curve.
npm package: @pixi-essentials/cull
Description: Optimized recursive display-object culling for scene graphs
Author: Shukant Pal
Latest version: 2.0.0

# @pixi-essentials/cull

This package provides an optimized, highly configurable culling mechanism.

## Installation :package:

```bash
npm install @pixi-essentials/cull
```

## Usage :page_facing_up:

### Static scenes

If display-object's in your scene graph do not change each frame, then you can run culling whenever
your display-object's move or your scene graph changes.

```ts
import { Application } from 'pixi.js';
import { Cull } from '@pixi-essentials/cull';
import { Viewport } from 'pixi-viewport';

const app = new Application({  });
const renderer = app.renderer;
const viewport = initScene(new Viewport());
const cull = new Cull().addAll(viewport.children);

// Flags whether culling, should be set "true" when a child is added to the viewport's subtree.
let cullDirty = false;

viewport.on('frame-end', function() {
    if (viewport.dirty || cullDirty) {
        cull.cull(renderer.screen);

        viewport.dirty = false;
        cullDirty = false;
    }
})
```

### Dynamic scenes

If your scene graph is dynamic and/or changes across frames cannot be tracked, you can run culling
on the `prerender` event.

```ts
renderer.on('prerender', () => {
    cull.cull(renderer.screen);
})
```

### Multiple scene graphs

If you are rendering multiple panes on to the canvas, each with its own scene graph, using different
projections, then you need to use separate culls for each scene graph.

```ts
cull.cull(sourceFrame);
```
npm package: @pixi-essentials/gradients
Description: Generates textures with color gradients
Author: Shukant K. Pal
Latest version: 2.0.0

> Note: There is a bug in PixiJS v8.1.0 that prevents `GradientFactory` from correctly rendering into a texture.
> Make sure you have applied this patch to your PixiJS build: https://github.com/pixijs/pixijs/pull/10486

# @pixi-essentials/gradients

This package exports a `GradientFactory` that generates color gradient textures. The implementation wraps around
the Canvas API currently, and is not as performant as a WebGL shader would provide.

## Installation :package:

```bash
npm install @pixi-essentials/gradients
```

## Usage :page_facing_up:

```ts
import { GradientFactory } from '@pixi-essentials/gradients';
```
npm package: @pixi-essentials/instanced-renderer
Description: PixiJS object renderer that uses instancing for drawing multiple geometries with the same style
Author: Shukant Pal
Latest version: 0.0.1-alpha.1

# @pixi-essentials/instanced-renderer

This packages implements an object renderer that uses instancing to draw the same "base" geometry
with different "instanced attributes" like world-transforms.

## Usage

```js
import { InstancedRendererPluginFactory } from '@pixi-essentials/instanced-renderer';
import { Renderer, Shader, Geometry, TYPES } from 'pixi.js';

const spriteRenderer = InstancedRendererPluginFactory.from({
    instanceBuilder: {
        aVertexPosition: "_vertexData"
    },
    geometry: new Geometry().
        addAttribute("aVertexPosition", new Float32Array(
            0, 0,
            100, 0,
            100, 100,
            100, 100,
            0, 100,
            0, 0
        ), 2, false, TYPES.FLOAT, 0, 0, true),
    shader: new Shader(
       `
  attribute vec2 aVertexPosition;
  uniform mat3 projectionMatrix;
 
  void main(void)
  {
     gl_Position = vec4((projectionMatrix * vec3(aVertexPosition.xy, 1)).xy, 0, 1);
  }
  `,
  `
  void main(void)
  {
      gl_FragColor = vec4(.5, 1, .2, 1);// some random color
  }
  `,
  {} // you can add uniforms
      )
});

Renderer.registerPlugin('spriteRenderer', spriteRenderer);

const sprite = new Sprite();

// Renders 100x100 squares with random color
sprite.pluginName = 'spriteRenderer';
```
npm package: @pixi-essentials/mixin-smart-mask
Description: Smarter masking to reduce redundant draw-calls & improve batching efficiency
Author: Shukant Pal
Latest version: 1.0.4

# @pixi-essentials/smart-mask

This package is a mixin for `DisplayObject` that optimizes mask rendering. It is used to prevent masking when the contents of a
display-object already lie inside the mask's bounds. It should **only be used with rectangular masks**.

## Installation :package:

```bash
npm install @pixi-essentials/mixin-smart-mask
```

## Usage :page_facing_up:

In order for to use smart-masks, you must set masks on the `smartMask` property of display-objects instead; before each rendering
frame, you must call `updateSmartMask` to re-evalulate which masks are essential for rendering correctly.

```js
import * as PIXI from 'pixi.js';
import '@pixi-essentials/mixin-smart-mask';

const app = new PIXI.Application();

const maskedContainer = new PIXI.Container();
const mask = new PIXI.Graphics().drawRect(0, 0, 100, 100);
const child = new PIXI.Graphics().beginFill(0xff).drawRect(0, 0, 50, 50).endFill();

maskedContainer.addChild(mask, child);

// Set smartMask instead of mask
maskedContainer.smartMask = mask;

/*
 * Before rendering your scene each frame, you must update the smart-masks.
 */
app.renderer.on('prerender', function() {
    /* 
     * This will recalculate the world transforms in the scene graph. You don't need to do this if you
     * are already doing it somewhere else OR you could pass skipUpdate=false to updateSmartMask() instead.
     */
    app.stage.getBounds();

    /*
     * This will set display-object masks only if they are required, based on whether their smart-mask bounds cover
     * their contents fully.
     */
    app.stage.updateSmartMask();
});

/*
 * Since the 50x50 child lies entirely inside the 100x100 mask, updateSmartMask() will not set the mask of the
 * masked-container.
 */
```
npm package: @pixi-essentials/object-pool
Description: Custom-tailored object pool for PixiJS-based applications
Author: Shukant Pal
Latest version: 1.0.1

# @pixi-essentials/object-pool
[![install size](https://packagephobia.now.sh/badge?p=@pixi-essentials/object-pool)](https://packagephobia.now.sh/result?p=@pixi-essentials/object-pool)

This package implements a custom-tailored object pool for PixiJS applications. It provides the
following features:

* **reserve**: You can preallocate the pool size to have a set amount of objects.

* **limit**: You can reduce the pool size after a lot of allocations.

* **auto-GC**: The GC will reduce your pool to the reserve size after allocation demand goes down
per-frame.

This package can also be used as a _single-source_ of object pools. If two different libraries need
a pool for say, `PIXI.Rectangle`, then the same object pool will be returned.

### Analysis

* https://codepen.io/sukantpal/pen/zYvBOVw: This chart shows the pool capacity and the allocations done per frame. The GC
is enabled and reserve is set to 100,000.

<img src="https://i.ibb.co/jkNWHdR/Screen-Shot-2020-04-18-at-12-46-08-PM.png"></img>

* You should use auto-GC only if allocations-per-frame is smooth (slowly increase & slowly decrease) or you know the upper
limit of objects you need per frame.

## Installation :package:

```bash
npm install @pixi-essentials/object-pool
```

## Usage :page_facing_up:

```ts
import { ObjectPoolFactory } from '@pixi-essentials/object-pool';
import { Rectangle } from '@pixi/math';

const rpool: ObjectPoolFactory = ObjectPoolFactory.build(Rectangle);

rpool.reserve(10000);
rpool.startGC();// prevent pool from staying above 10,000 rectangles for too long

const rect: PIXI.Rectangle = rpool.allocate();

// do something

rpool.release(rect);

// Want to reduce pool size now?
rpool.limit(11000);
```
npm package: @pixi-essentials/react-bindings
Description: React components for display-objects provided by pixi-essentials, for usage with @pixi/react.
Author: Shukant K. Pal
Latest version: 3.0.0

# @pixi-essentials/react-bindings

This package contains React components for essential display-objects. It is designed for usage with [@pixi/react](https://github.com/pixijs/pixi-react).

## Installation :package:

```bash
npm install @pixi-essentials/react-bindings
```

## Components :page_with_curl:

| Package                                         | Display Objects               |
| ----------------------------------------------- | ----------------------------- |
| @pixi-essentials/transformer                    | Transformer                   |
npm package: @pixi-essentials/svg
Description: Native SVG Renderer on top of PixiJS
Author: Shukant K. Pal
Latest version: 3.0.0

# @pixi-essentials/svg

This package aims to implements the [SVG Native Specification](https://svgwg.org/specs/svg-native/). In addition, it also
supports the &lt;text /&gt;, &lt;tspan /&gt; elements.

It is designed for high performance rendering. As such, it automatically culls its internal scene graph and uses a shared
texture atlas for rasterized images.

## Installation :package:

```bash
npm install @pixi-essentials/svg
```

## Usage :page_facing_up:

```ts
import { SVGScene } from '@pixi-essentials/svg';

async function main() {
  console.info("Loaded payload");

  const app = new PIXI.Application({
    antialias: true,
    autoDensity: true,
    autoStart: false,
    backgroundColor: 0xffffff,
    resolution: window.devicePixelRatio,
    view: document.getElementById("view")
  });

  const viewport = app.stage.addChild(new PIXI.Container());
  const scene = viewport.addChild(await PIXI.SVGScene.from("https://upload.wikimedia.org/wikipedia/commons/f/fa/De_Groot_academic_genealogy.svg"));

  app.renderer.render(app.stage);

  console.info("Success");
}

main();
```

## Implementation

@pixi-essentials/svg generates a scene graph that maps one-to-one for each SVG DOM element. Features like masks and gradients are implemented
as "servers" which lazily render when needed.

## Collaboration

I'd like to thank [Strytegy](strytegy.com) for funding the initial development of this package.

<a href="https://www.strytegy.com"><img src="https://i.imgur.com/3Ns1JJb.png" width="153.3px" /></a>
npm package: @pixi-essentials/transformer
Description: Interactive display-object to edit the transformation matrices of display-objects
Author: Shukant K. Pal
Latest version: 3.0.4

# @pixi-essentials/transformer

This package contains `Transformer`, which provides an interactive interface for scaling and rotating groups of display-objects.

## Installation :package:

```base
npm install @pixi-essentials/transformer
```

## Pens :pen:

+ Standard usage: https://codepen.io/sukantpal/pen/dyMMmZm
+ Usage with @pixi-essentials/react-bindings: https://codepen.io/sukantpal/pen/ZEWWoWX

## Transform options :page_with_curl:

| Property           | Default         | Description                                                                                 |
| ------------------ | --------------- | ------------------------------------------------------------------------------------------- |
| boxRotationEnabled | false           | Rotation by dragging near outside the four corners of the bounding box                      |
| boxScalingEnabled  | false           | Scaling by dragging the edges of the bounding-box (also called the wireframe)               |
| centeredScaling    | false           | Whether scaling object should keep its center invariant (instead of the side being dragged) |
| rotateEnabled      | true            | Enables the rotator handle above the top-edge of the wireframe                              |
| scaleEnabled       | true            | Enables the 8 scaling handles (topLeft, topCenter, topRight, middleLeft, middleRight, bottomLeft, bottomCenter, bottomRight) |
| skewEnabled        | false           | Enables the 2 skewing handles                                                               |
| translateEnabled   | true            | Enables translation by dragging the wireframe. The transformer will capture all mouse events in the group's bounds |


## Usage :page_facing_up:

```js
import * as PIXI from 'pixi.js';
import { Transformer } from '@pixi-essentials/transformer';

const app = new PIXI.Application({
    resolution: window.devicePixelRatio,
    autoDensity: true,
    backgroundColor: 0xabcdef,
    width: 1024,
    height: 1024,
    antialias: true
});

document.body.appendChild(app.view);

const circle = app.stage.addChild(new PIXI.Graphics());

circle.beginFill(0xfedbac)
    .drawCircle(0, 0, 100)
    .endFill();
circle.pivot.set(50, 100);
circle.scale.set(1);
circle.position.set(300, 300);

const star = app.stage.addChild(new PIXI.Graphics());

star.beginFill(0xfedbac)
    .drawStar(0, 0, 8, 100)
    .endFill();
star.position.set(800, 500);
star.pivot.set(50, 100);

app.stage.addChild(new Transformer({
    group: [circle, star],
}));
```

<p align="center">
<img src="https://i.imgur.com/b82qYjF.png" width="790px" />
</p>

## External Resources

* (Initial release) [Vector rendering of SVG content with PixiJS](https://medium.com/javascript-in-plain-english/vector-rendering-of-svg-content-with-pixijs-6f26c91f09ee?source=friends_link&sk=1faf7f354ab39bd79d476bf33e9d44d1)
npm package: @pixi-pack/split-it
Description: a tiny package for splitting strings
Author: Emily Harber
Latest version: 0.0.5

[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
![github test workflow status](https://github.com/thecodepixi/split-it/actions/workflows/run-test.yaml/badge.svg)

# split-it

split-it is a tiny javascript package designed to provide convenience methods for splitting strings in a variety of ways.

## Installation

this package can be installed using either `npm` or `yarn`

### `npm` installation

`npm install split-it`

### `yarn` installation`

`yarn add split-it`

### Importing the package in your project

after adding the package to your project, you can import the main class `Split` to use the available methods:

```js
const Split = require('split-it');
```

## Available Methods

### `.it`

`.it ` is the base method of this library.
this method splits the given string on _all_ classic delimiters:
commas, colons, tabs, newlines, and returns

**Example Usage**

```js
Split.it('hello,from,split-it');
Split.it('hello:from:split-it');
Split.it('hello\tfrom\tsplit-it');
Split.it('hello\nfrom\rsplit-it');

// all of the above return ["hello", "from", "split-it"]
```

### `.onDelimiter`

`.onDelimiter` splits the given string by the given delimiter.
this method defaults to splitting on whitespace if no delimiter is passed.

**Example Usage**

```js
Split.onDelimiter('hello.from.split-it', '.');
Split.onDelimiter('hello*from*split-it', '*');
Split.onDelimiter('hello|from|split-it', '|');

// all of the above return ["hello", "from", "split-it"]
```

## Contributing

want to contribute to `split-it`? sweet!
if you'd like to contribute, please open an issue relating to the feature you'd like to work on,
and then open a pr linked to your issue. when you open your pr, please add your changes to the [CHANGELOG](./CHANGELOG.md) under the `### added` or `### fixed` heading, as appropriate, with a link to your pr.

don't want to contribute code, but see something missing or broken? open an issue to report any bugs or errors you encounter.

### Code of Conduct

before opening an issue or pr, please read (and adhere) to the following:

- be respectful
- be polite
- use empathy
- do not post anything containing hate speech or slurs
- failure to adhere to the above may result in removal of access to this project
npm package: @pixi-pbr/diffy
Description: Geometry factory that minimizes buffer uploads by tracking & updating only modified regions of data
Author: Shukant K. Pal
Latest version: 2.0.1

# @pixi-pbr/diffy

This package can be used to minimize buffer upload overhead in vertex-bound applications. It exploits
`bufferSubData` to upload only modified parts of the batched geometry. This trades off graphics memory
for reducing data transfers.

## Installation :package:

```bash
npm install @pixi-pbr/diffy
```

## Notes

* **WebGL 1**: WebGL 1 does not the required overload of `gl.bufferSubData` to do partial uploads. This
    in turns only allows optimizations in the case where the geometry has not changed at all.
* **Projection Matrix**: If your application uses a viewport (like `pixi-viewport` by David Fignater), then
    you can optimize it use a projection-matrix so that your object's coordinate do not change when modifying
    the viewport itself. This has the effect of the geometry not changing at all when panning/zooming so buffer uploads can be fully optimized away!

## Usage

To enable this optimization, you can use the exported geometry-factory and drawer.

```js
import { BatchRendererPluginFactory } from 'pixi-batch-renderer';
import { DiffGeometryFactory, DiffDrawer } from '@pixi-pbr/diffy';

// YourRenderer will have the diffy optimization!
const YourRenderer = BatchRendererPluginFactory.from({
    ...yourOptions,
    BatchGeometryFactoryClass: DiffGeometryFactory,
    BatchDrawerClass: DiffDrawer
});
```

## Collaboration

I'd like to thank [Strytegy](https://www.strytegy.com) for funding the initial development of this package.

<a href="https://www.strytegy.com"><img src="https://i.imgur.com/3Ns1JJb.png" width="153.3px" /></a>
npm package: @pixi/app
Description: Convenience class to create a new PixiJS application
Author: Mat Groves
Latest version: 7.4.3

# @pixi/app

## Installation

```bash
npm install @pixi/app
```

## Usage

```js
import { Application } from '@pixi/app';

const app = new Application();
document.body.appendChild(app.view);
```

### Plugins

PixiJS provides a few plugins to add features to the Application. These can be installed from the following packages. Use `extensions.add` to use these plugins. _Note: if you are using pixi.js or pixi.js-legacy bundles, this is unnecessary since plugins are installed automatically by default._

* **TickerPlugin** from `@pixi/ticker`
npm package: @pixi/basis
Description: Loader for the *.basis supercompressed texture file format. This package also ships with the transcoder!
Author: Shukant Pal
Latest version: 7.4.3

# @pixi/basis

This package contains the parser for *.basis files, and it also ships with the transcoder.

## Installation

```bash
npm install @pixi/basis
```

## Usage

```js
import '@pixi/basis';
```

## CDN Install

Via jsDelivr:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@pixi/basis@7.x/dist/basis.min.js"></script>
```

Or via unpkg:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://unpkg.com/@pixi/basis@7.x/dist/basis.min.js"></script>
```
npm package: @pixi/canvas-particle-container
Description: Canvas mixin for the particles package
Author: Mat Groves
Latest version: 7.4.3

# @pixi/canvas-particle-container

Provides CanvasRenderer support for `@pixi/particle-container`.

## Installation

```bash
npm install @pixi/canvas-particle-container
```

## Usage

```js
import '@pixi/canvas-particle-container';
import { ParticleContainer } from '@pixi/particle-container';

const container = new ParticleContainer();
```
npm package: @pixi/compressed-textures
Description: Loaders for compressed texture file formats
Author: Shukant Pal
Latest version: 7.4.3

# @pixi/compressed-textures

This packages contains the loaders for compressed texture file formats, namely:

| Extension  | Description                                 | Notes                                         |
| ---------- | ------------------------------------------- | --------------------------------------------- |
| .dds       | DirectDraw Surface                          | Support for cubemap, 3D textures not included |
| .ktx       | Khronos Texture Container                   | Support for cubemap, 3D textures not included |
| .json      | PixiJS Compressed Textures Manifest         | Fallback to uncompressed textures included    |

## Installation

```bash
npm install @pixi/compressed-textures
```

## Usage

```js
import '@pixi/compressed-textures';
```
npm package: @pixi/devtools
Description: <div align="center">
Latest version: 2.0.1

# PixiJS DevTools

<div align="center">

<img src=".github/logo.svg" alt="Logo"/>
<p>A chrome extension for debugging PixiJS applications.<p>

</div>


# Getting Started

Please follow the documentation at [pixijs.io/devtools](https://pixijs.io/devtools)

## License

MIT License.
npm package: @pixi/eslint-config
Description: ESLint config for PixiJS plugin creators
Author: Shukant K. Pal
Latest version: 6.0.0

# PixiJS Code Style

PixiJS has a unique taste of coding style, which inspired me to create an ESLint config
that can be installed for any project. This is primarily created for PixiJS plugins built
in Typescript.

## Install

```
npm install -D @pixi/eslint-config
```

## Use

```js
{
    "extends": [
        "@pixi/eslint-config"
    ]
}
```
npm package: @pixi/events
Description: Federated Events API, the plumbing behind the propagation of UI events into the PixiJS scene graph.
Author: Shukant Pal
Latest version: 7.4.3

# @pixi/events

This packages implements the Federated Events API, the plumbing behind the propagation of UI events into the PixiJS
scene graph.

## Installation

```bash
npm install @pixi/events
```

## Usage

```js
import '@pixi/events';
```
npm package: @pixi/filter-adjustment
Description: PixiJS filter to adjust gamma, contrast, saturation, brightness or color channels
Author: finscn
Latest version: 5.1.1

# AdjustmentFilter

> PixiJS filter to adjust gamma, contrast, saturation, brightness or color channels.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=AdjustmentFilter)

## Installation

```bash
npm install @pixi/filter-adjustment
```

## Usage

```js
import {AdjustmentFilter} from '@pixi/filter-adjustment';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new AdjustmentFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/AdjustmentFilter.html
npm package: @pixi/filter-advanced-bloom
Description: PixiJS filter to render Bloom Filter (with highlight) effect
Author: finscn
Latest version: 5.1.1

# AdvancedBloomFilter

> PixiJS filter to render Bloom Filter (with highlight) effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=AdvancedBloomFilter)

## Installation

```bash
npm install @pixi/filter-advanced-bloom
```

## Usage

```js
import {AdvancedBloomFilter} from '@pixi/filter-advanced-bloom';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new AdvancedBloomFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/AdvancedBloomFilter.html
npm package: @pixi/filter-ascii
Description: PixiJS filter to render DisplayObject as ASCII text
Author: Mat Groves
Latest version: 5.1.1

# AsciiFilter

> PixiJS filter to render DisplayObject as ASCII text.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=AsciiFilter)

## Installation

```bash
npm install @pixi/filter-ascii
```

## Usage

```js
import {AsciiFilter} from '@pixi/filter-ascii';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new AsciiFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/AsciiFilter.html
npm package: @pixi/filter-bevel
Description: PixiJS filter to apply a bevel effect
Author: Evgeny Shestakov
Latest version: 5.1.1

# BevelFilter

> PixiJS filter to apply a bevel effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=BevelFilter)

## Installation

```bash
npm install @pixi/filter-bevel
```

## Usage

```js
import {BevelFilter} from '@pixi/filter-bevel';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new BevelFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/BevelFilter.html
npm package: @pixi/filter-bloom
Description: PixiJS filter to apply a simple bloom effect
Author: Mat Groves
Latest version: 5.1.1

# BloomFilter

> PixiJS filter to apply a simple bloom effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=BloomFilter)

## Installation

```bash
npm install @pixi/filter-bloom
```

## Usage

```js
import {BloomFilter} from '@pixi/filter-bloom';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new BloomFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/BloomFilter.html
npm package: @pixi/filter-bulge-pinch
Description: PixiJS filter to apply a bulge or a pinch effect
Author: Mat Groves
Latest version: 5.1.1

# BulgePinchFilter

> PixiJS filter to apply a bulge or a pinch effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=BulgePinchFilter)

## Installation

```bash
npm install @pixi/filter-bulge-pinch
```

## Usage

```js
import {BulgePinchFilter} from '@pixi/filter-bulge-pinch';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new BulgePinchFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/BulgePinchFilter.html
npm package: @pixi/filter-color-gradient
Description: PixiJS filter to render a color gradient.
Author: Viktor Persson
Latest version: 5.3.0

# ColorGradientFilter

> PixiJS filter to render a color gradient.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ColorGradientFilter)

## Installation

```bash
npm install @pixi/filter-color-gradient
```

## Usage

```js
import { ColorGradientFilter } from '@pixi/filter-color-gradient';
import { Container } from 'pixi.js';

const container = new Container();

const options = {
  type: ColorGradientFilter.LINEAR,
  stops: [
    { offset: 0.0, color: 'red', alpha: 1.0, },
    { offset: 1.0, color: 'blue', alpha: 1.0, },
  ],
  angle: 90,
  alpha: 0.8,
}

container.filters = [new ColorGradientFilter(options)];
```

### Color values

The following values can be used to define a color.

| Description                 | Type       | Example               |
|-----------------------------|------------|-----------------------|
| [CSS color name][css_names] | `string`   | `"red"`               |
| Hexadecimal string          | `string`   | `"#ff0000"`, `"#f00"` |
| Hexadecimal number          | `number`   | `0xff0000`            |
| Array of numbers [R,G,B]    | `number[]` | `[1.0, 0.0, 0.0]`     |

## Documentation

See https://filters.pixijs.download/main/docs/ColorGradientFilter.html


[css_names]: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
npm package: @pixi/filter-color-map
Description: PixiJS filter to apply a color adjust effect
Author: finscn
Latest version: 5.1.1

# ColorMapFilter

> PixiJS filter to apply a color-map effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ColorMapFilter)

## Installation

```bash
npm install @pixi/filter-color-map
```

## Usage

```js
import {ColorMapFilter} from '@pixi/filter-color-map';
import {Container} from 'pixi.js';

const container = new Container();
const colorMap = new Image();
colorMap.src = 'foo/bar/colorMap.png';

container.filters = [new ColorMapFilter(colorMap)];
```

## Documentation

See https://filters.pixijs.download/main/docs/ColorMapFilter.html
npm package: @pixi/filter-color-overlay
Description: PixiJS filter to overlay all colors with single color
Author: Michael Deal
Latest version: 5.1.1

# ColorOverlayFilter

> PixiJS filter to overlay all colors with single color.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ColorOverlayFilter)

## Installation

```bash
npm install @pixi/filter-color-overlay
```

## Usage

```js
import {ColorOverlayFilter} from '@pixi/filter-color-overlay';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ColorOverlayFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ColorOverlayFilter.html
npm package: @pixi/filter-color-replace
Description: PixiJS filter to replace a single color
Author: Mat Groves
Latest version: 5.1.1

# ColorReplaceFilter

> PixiJS filter to replace a single color.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ColorReplaceFilter)

## Installation

```bash
npm install @pixi/filter-color-replace
```

## Usage

```js
import {ColorReplaceFilter} from '@pixi/filter-color-replace';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ColorReplaceFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ColorReplaceFilter.html
npm package: @pixi/filter-convolution
Description: PixiJS filter to apply a convolution effect
Author: Mat Groves
Latest version: 5.1.1

# ConvolutionFilter

> PixiJS filter to apply a convolution effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ConvolutionFilter)

## Installation

```bash
npm install @pixi/filter-convolution
```

## Usage

```js
import {ConvolutionFilter} from '@pixi/filter-convolution';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ConvolutionFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ConvolutionFilter.html
npm package: @pixi/filter-cross-hatch
Description: PixiJS filter to apply a cross-hatch black and white effect
Author: Mat Groves
Latest version: 5.1.1

# CrossHatchFilter

> PixiJS filter to apply a cross-hatch black and white effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=CrossHatchFilter)

## Installation

```bash
npm install @pixi/filter-cross-hatch
```

## Usage

```js
import {CrossHatchFilter} from '@pixi/filter-cross-hatch';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new CrossHatchFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/CrossHatchFilter.html
npm package: @pixi/filter-crt
Description: PixiJS filter to apply an effect resembling old CRT monitors
Author: finscn
Latest version: 5.1.1

# CRTFilter

> PixiJS filter to apply an effect resembling old CRT monitors.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=CRTFilter)

## Installation

```bash
npm install @pixi/filter-crt
```

## Usage

```js
import {CRTFilter} from '@pixi/filter-crt';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new CRTFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/CRTFilter.html
npm package: @pixi/filter-dot
Description: PixiJS filter to apply a black and white dot effect
Author: Mat Groves
Latest version: 5.1.1

# DotFilter

> PixiJS filter to apply a black and white dot effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=DotFilter)

## Installation

```bash
npm install @pixi/filter-dot
```

## Usage

```js
import {DotFilter} from '@pixi/filter-dot';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new DotFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/DotFilter.html
npm package: @pixi/filter-drop-shadow
Description: PixiJS filter to apply a drop shadow effect
Author: Mat Groves
Latest version: 5.2.0

# DropShadowFilter

> PixiJS filter to apply a drop shadow effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=DropShadowFilter)

## Installation

```bash
npm install @pixi/filter-drop-shadow
```

## Usage

```js
import {DropShadowFilter} from '@pixi/filter-drop-shadow';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new DropShadowFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/DropShadowFilter.html
npm package: @pixi/filter-emboss
Description: PixiJS filter to apply an emboss effect
Author: Mat Groves
Latest version: 5.1.1

# EmbossFilter

> PixiJS filter to apply an emboss effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=EmbossFilter)

## Installation

```bash
npm install @pixi/filter-emboss
```

## Usage

```js
import {EmbossFilter} from '@pixi/filter-emboss';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new EmbossFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/EmbossFilter.html
npm package: @pixi/filter-glitch
Description: PixiJS filter to apply a glitch effect
Author: finscn
Latest version: 5.1.1

# GlitchFilter

> PixiJS filter to apply a glitch effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=GlitchFilter)

## Installation

```bash
npm install @pixi/filter-glitch
```

## Usage

```js
import {GlitchFilter} from '@pixi/filter-glitch';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new GlitchFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/GlitchFilter.html
npm package: @pixi/filter-glow
Description: PixiJS filter to apply a glow effect
Author: Mat Groves
Latest version: 5.2.1

# GlowFilter

> PixiJS filter to apply a glow effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=GlowFilter)

## Installation

```bash
npm install @pixi/filter-glow
```

## Usage

```js
import {GlowFilter} from '@pixi/filter-glow';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new GlowFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/GlowFilter.html
npm package: @pixi/filter-godray
Description: PixiJS filter to apply and animate atmospheric light rays
Author: Alain Galvan
Latest version: 5.1.1

# GodrayFilter

> PixiJS filter to apply and animate atmospheric light rays.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=GodrayFilter)

## Installation

```bash
npm install @pixi/filter-godray
```

## Usage

```js
import {GodrayFilter} from '@pixi/filter-godray';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new GodrayFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/GodrayFilter.html
npm package: @pixi/filter-grayscale
Description: PixiJS filter to apply a grayscale effect
Author: Viktor Persson
Latest version: 5.1.1

# GrayscaleFilter

> PixiJS filter to apply a grayscale effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=GrayscaleFilter)

## Installation

```bash
npm install @pixi/filter-grayscale
```

## Usage

```js
import {GrayscaleFilter} from '@pixi/filter-grayscale';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new GrayscaleFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/GrayscaleFilter.html
npm package: @pixi/filter-hsl-adjustment
Description: PixiJS filter to apply a HSL adjustment
Author: Viktor Persson
Latest version: 5.3.0

# HslAdjustmentFilter

> PixiJS filter to apply a HSL adjustment.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=HslAdjustmentFilter)

## Installation

```bash
npm install @pixi/filter-hsl-adjustment
```

## Usage

```js
import { HslAdjustmentFilter } from '@pixi/filter-hsl-adjustment';
import { Container } from 'pixi.js';

const container = new Container();
container.filters = [
  new HslAdjustmentFilter({
    hue: 180,
    colorize: true,
  })
];
```

## Documentation

See https://filters.pixijs.download/main/docs/HslAdjustmentFilter.html
npm package: @pixi/filter-kawase-blur
Description: PixiJS filter to apply an alternative, fast blur effect to Gaussian
Author: finscn
Latest version: 5.1.1

# KawaseBlurFilter

> PixiJS filter to apply an alternative, fast blur effect to Gaussian.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=KawaseBlurFilter)

## Installation

```bash
npm install @pixi/filter-kawase-blur
```

## Usage

```js
import {KawaseBlurFilter} from '@pixi/filter-kawase-blur';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new KawaseBlurFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/KawaseBlurFilter.html
npm package: @pixi/filter-motion-blur
Description: PixiJS filter to apply a directional blur effect
Author: finscn
Latest version: 5.1.1

# MotionBlurFilter

> PixiJS filter to apply a directional blur effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=MotionBlurFilter)

## Installation

```bash
npm install @pixi/filter-motion-blur
```

## Usage

```js
import {MotionBlurFilter} from '@pixi/filter-motion-blur';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new MotionBlurFilter([1,2], 9)];
```

## Documentation

See https://filters.pixijs.download/main/docs/MotionBlurFilter.html
npm package: @pixi/filter-multi-color-replace
Description: PixiJS filter to dynamically replace multiple colors
Author: finscn
Latest version: 5.1.1

# MultiColorReplaceFilter

> PixiJS filter to dynamically replace multiple colors.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=MultiColorReplaceFilter)

## Installation

```bash
npm install @pixi/filter-multi-color-replace
```

## Usage

```js
import {MultiColorReplaceFilter} from '@pixi/filter-multi-color-replace';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [
    new MultiColorReplaceFilter(
        [0x0000FF, 0x00FF00],
        [0xFF0000, 0xFFFF00],
        0.2
    )
];
```

## Documentation

See https://filters.pixijs.download/main/docs/MultiColorReplaceFilter.html