open-index/open-npm huggingface dataset:
npm package: @gveditor/sdk
Description: Graviton SDK to develop plugins.
Author: Marc Espín Sanz
Latest version: 0.5.4

# 🧵 Graviton SDK
SDK to develop plugins for [Graviton Editor](https://github.com/Graviton-Code-Editor/Graviton-App)

It makes use of Webpack, ts-loader and babel under the hood.

### ✍ Usage
Installation:

```shell
npm install --save-dev @gveditor/sdk
```

Develop plugin for development:
```shell
gvsdk --project ./ --target plugin --mode dev
```

Build plugin for production:
```shell
gvsdk --project ./ --target plugin --mode release
```

### 📜 Usage

Manifest file (package.json) should have the property `mainSrc` which indicates where the entry file (aka main file) is located.

Example:

```json
{
	"name": "plugin-example",
	"type":"plugin",
	"version": "1.0.0",
	"mainSrc": "src/main.js",
	"main": "main.js",
	"license": "MIT"
}
```

CLI parameters:

* `--project`: Path of the Plugin's folder where the manifest (package.json) is located
* `--target`: Target type:
	* `plugin` ( aka Dynamic or JavaScript plugin )
	* `iconpack` ( Icons pack )
	* `theme` ( UI themes )
* `--mode`: Build type (dev, release)
* `--platform`: Any webpack target, it defaults to 'node'

Example:

```ts
gvsdk --target plugin --project . --mode release
```

This will generate a release of the plugin you are located in.

### 🤖 Where is this being used?

* [Deno Graviton](https://github.com/marc2332/deno-graviton)
* [Cargo Graviton](https://github.com/marc2332/cargo-graviton)
* [Flutter Graviton](https://github.com/Graviton-Code-Editor/flutter-plugin)

And Graviton Editor itself.
npm package: @gvempire/vulcan
Description: collection of firebase wrappers
Author: Khari Johnson
Latest version: 0.0.5

<p align="center">
  <a href="https://example.com/">
    <img src="https://via.placeholder.com/72" alt="Logo" width=72 height=72>
  </a>

  <h3 align="center">vulcan</h3>

  <p align="center">
    vulcan is collection of tools and resources for interacting with the gv-collecion GCP project
    <br>
  </p>
</p>


## Table of contents

- [Quick start](#quick-start)
- [Prerequisites](#prerequisites)
- [Usage](#usage)
- [Contact](#contact)
- [License](#license)

## Quick start

- Clone down the repo
- Install deps with `yarn`
- Start development server with `yarn start`
- Run `yarn deploy` to build and serve the application

## Prerequisites

Before you begin, ensure you have met the following requirements:

<!--- These are just example requirements. Add, duplicate or remove as required --->

- You have installed the latest version of `node`, `npm`, and `yarn`

```
NODE_ENV=test

# General
APP_NAME="good vibes change-me"
APP_DESCRIPTION="Meeting all your Recruitment change-me"

# Firebase
FIREBASE_API_KEY=Vshg2RwB9kyJuAIzaSyBvKpx6BGchange-me
<<<<<<< HEAD
FIREBASE_AUTH_DOMAIN=recruit.firebaseapp.changeme
FIREBASE_DATABASE_URL=https://recruit.firebaseiochange-me
FIREBASE_PROJECT_ID=change-me
FIREBASE_STORAGE_BUCKET=recruit.appspotchange-me
FIREBASE_MESSAGING_SENDER_ID=change-me
FIREBASE_APP_ID=1:501310133826:webchange-me
FIREBASE_MEASUREMENT_ID=G-change-me


# Send Grid
SENDGRID_API_KEY=SG.SJaiYmQ63pSZIe.ECoxRKR9AXawH7vchange-me
=======
FIREBASE_AUTH_DOMAIN=gvfirebase.firebaseapp.changeme
FIREBASE_DATABASE_URL=https://gvfirebase.firebaseio.change-me
FIREBASE_PROJECT_ID=change-me
FIREBASE_STORAGE_BUCKET=gvfirebase.appspot.change-me
FIREBASE_MESSAGING_SENDER_ID=change-me
FIREBASE_APP_ID=1:501310133826:webchange-me
FIREBASE_MEASUREMENT_ID=G-change-me
>>>>>>> v1.1.0
```

## Usage

To use vulcan, use these scripts:
(if using npm, replace `yarn` with `npm run`)

`build` - build production files

`deploy` - build and publish npm package



## Contact

If you want to contact me you can reach me [here](https:calendly.com/gvempire/discover) or [kj@gvempire.com](mailto:kj@gvempire.com) or vist me at [gvempire.com](https://gvempire.com).

## License

[MIT License](https://gitlab.com/gvempire/gv-collection/blob/a772c5143d804e91593f683ba58c21ed5e6ee346/LICENSE)
npm package: @gvibehacker/browser-socket-client
Description: Client library to enable browser access to native TCP sockets
Author: George Ma
Latest version: 0.1.3

# @gvibehacker/browser-socket-client

Browser-friendly TCP facade that mirrors Node.js `net`, backed by the browser-socket transport. It multiplexes every outbound or inbound TCP stream over a single WebSocket bridge so you can connect to databases, queues, or your own services directly from the browser.

## Install

```bash
npm install @gvibehacker/browser-socket-client
```

Load the ESM build in modern bundlers, the CJS build in Node-style environments, or the minified bundle from `dist/index.min.js` for `<script>` usage.

## Connect to a TCP Service

```ts
import { Net } from "@gvibehacker/browser-socket-client";

const net = new Net("ws://localhost:8080");
const socket = net.createConnection({ host: "example.com", port: 80 }, () => {
  console.log("connected from the browser");
  socket.write("GET / HTTP/1.1\r\nHost: example.com\r\n\r\n");
});

socket.on("data", (chunk) => {
  console.log("response", new TextDecoder().decode(chunk));
});

socket.on("end", () => console.log("closed"));
```

## Host a TCP Server in the Browser

```ts
import { Net } from "@gvibehacker/browser-socket-client";

const net = new Net("ws://localhost:8080");

const server = net.createServer((client) => {
  client.write("hello from the browser!\n");

  client.readable.pipeTo(
    new WritableStream({
      write(chunk) {
        client.write(chunk); // simple echo
      },
    })
  );
});

server.listen({ host: "0.0.0.0", port: 3000 }, () => {
  console.log("browser server ready");
});
```

## API Highlights

- `Net` manages the underlying WebSocket tunnel and exposes Node-compatible helpers (`createConnection`, `createServer`).
- `Socket` instances provide event emitter semantics (`data`, `end`, `error`) and WHATWG streams for modern piping.
- Automatic backpressure via window updates keeps streams responsive even with multiple concurrent connections.

Refer to the generated [Client API docs](./docs/index.html) for the full surface, including low-level helpers and TypeScript definitions under `dist/index.d.ts`.

## Development

- `npm run build` – roll up TypeScript to ESM, CJS, and browser bundles.
- `npm run dev` – watch mode for rapid iteration while working on demos.
- `npm run docs` – rebuild the Typedoc reference in `docs/`.

Pair with `@gvibehacker/browser-socket-server` or the Cloudflare Worker bridge to reach your target TCP services.
npm package: @gvibehacker/browser-socket-cloudflare-worker
Description: Cloudflare worker library to enable browser access to native TCP sockets
Author: George Ma
Latest version: 0.1.3

# @gvibehacker/browser-socket-cloudflare-worker

Cloudflare Workers transport for browser-socket. It terminates WebSocket connections from browsers, multiplexes every TCP stream, and proxies them through Cloudflare's `connect()` API so you can expose TCP services from the edge.

## Install

```bash
npm install @gvibehacker/browser-socket-cloudflare-worker
```

Add it to an existing Wrangler project or scaffold a new worker and import the connection handler in your `src/index.ts`.

## Worker Setup

```ts
import { Connection } from "@gvibehacker/browser-socket-cloudflare-worker";

export default {
  async fetch(request) {
    if (request.headers.get("Upgrade") !== "websocket") {
      return new Response("browser-socket worker", { status: 200 });
    }

    const pair = new WebSocketPair();
    const [client, server] = Object.values(pair);
    const connection = new Connection(server);

    connection.addEventListener("connect", async (event) => {
      const [socket, { host, port }] = event.detail;
      const tcp = connect({ hostname: host, port });

      socket.ack({ address: host, port, family: "IPv4", remoteAddress: "0.0.0.0", remotePort: 0 });
      socket.readable.pipeTo(tcp.writable).catch(() => socket.destroy("tcp write error"));
      tcp.readable.pipeTo(socket.writable).catch(() => socket.destroy("tcp read error"));
    });

    return new Response(null, { status: 101, webSocket: client });
  },
};
```

Deploy with Wrangler and point your browser client at the worker URL:

```bash
npm run build
npm run deploy
```

## API Highlights

- `Connection` wraps a worker-side WebSocket and emits DOM-style events (`connect`, `listen`, `close`).
- `Socket` instances expose either WHATWG streams or helper methods (`ack`, `write`, `destroy`) to coordinate TCP flow control.
- Protocol helpers (`encodeFrame`, `parseSynPayload`, frame constants) are exported for advanced integrations or tooling.

See the generated [Cloudflare Worker API docs](./docs/index.html) for all types and event signatures.

## Development

- `npm run build` – bundle TypeScript for worker deployment.
- `npm run dev` / `npm run start` – run the worker locally with Wrangler.
- `npm run docs` – rebuild the Typedoc reference.

Combine this transport with `@gvibehacker/browser-socket-client` in the browser and, optionally, the Node bridge for hybrid routing.
npm package: @gvibehacker/browser-socket-server
Description: Server library to enable browser access to native TCP sockets
Author: George Ma
Latest version: 0.1.3

# @gvibehacker/browser-socket-server

Node.js transport that bridges browser-socket clients to real TCP sockets. It accepts browser WebSocket connections, multiplexes streams over a single socket, and hands them to your Node runtime so you can connect to or host arbitrary TCP services on behalf of the browser.

## Install

```bash
npm install @gvibehacker/browser-socket-server
```

## Quick Start

```ts
import { Transport } from "@gvibehacker/browser-socket-server";
import { WebSocketServer } from "ws";
import net from "node:net";

const wss = new WebSocketServer({ port: 8080, perMessageDeflate: false });
const transport = new Transport(wss);

transport.on("connection", (connection) => {
  connection.on("connect", (socket, { address, port }) => {
    const upstream = net.connect(port, address);

    upstream.on("connect", () => {
      socket.ack({
        address: upstream.localAddress!,
        port: upstream.localPort!,
        family: upstream.localFamily!,
        remoteAddress: upstream.remoteAddress!,
        remotePort: upstream.remotePort!,
      });

      upstream.on("data", (chunk) => socket.write(chunk));
      socket.readable.pipeTo(
        new WritableStream({
          write(chunk) {
            upstream.write(Buffer.from(chunk));
          },
        })
      );
    });

    upstream.on("error", (err) => socket.destroy(err.message));
  });
});

transport.start();
console.log("Bridge listening on ws://localhost:8080");
```

## API Highlights

- `Transport` binds to an existing `ws` server and emits `connection` events per browser.
- `Connection` surfaces `connect` and `listen` events to map browser flows onto real TCP sockets.
- `Socket` objects expose Node-like methods (`ack`, `write`, `end`, `destroy`) plus WHATWG streams for piping.
- Flow control is handled by the binary protocol (24-bit length frames with window updates) so you can focus on wiring TCP endpoints.

See the generated [Server API docs](./docs/index.html) for the full surface area.

## Development

- `npm run build` – bundle TypeScript with Rollup and emit d.ts files.
- `npm run dev` – watch source files and rebuild incrementally.
- `npm run docs` – regenerate the HTML reference under `docs/`.

Pair this package with `@gvibehacker/browser-socket-client` in the browser or the Cloudflare Worker bridge for edge deployments.
npm package: @gvillette/boardgame.io
Description: library for turn-based games
Author: nicolodavis@gmail.com
Latest version: 0.39.15

<p align="center">
  <img src="https://raw.githubusercontent.com/boardgameio/boardgame.io/master/docs/logo-optimized.svg?sanitize=true" alt="boardgame.io" />
</p>

<p align="center">
<a href="https://www.npmjs.com/package/boardgame.io"><img src="https://badge.fury.io/js/boardgame.io.svg" alt="npm version" /></a>
<a href="https://github.com/boardgameio/boardgame.io/actions?query=workflow%3ATests"> <img src="https://github.com/boardgameio/boardgame.io/workflows/Tests/badge.svg" alt='Build Status'></a>
<a href='https://coveralls.io/github/boardgameio/boardgame.io?branch=master'><img src='https://coveralls.io/repos/github/boardgameio/boardgame.io/badge.svg?branch=master' alt='Coverage Status' /></a>
<a href="https://gitter.im/boardgame-io"><img src="https://badges.gitter.im/boardgame-io.svg" alt="Gitter" /></a>
</p>

<p align="center">
  <strong><a href="https://boardgame.io/documentation/#/">Read the Documentation</a></strong>
  
</p>

<p align="center">
  <strong>boardgame.io</strong> is an engine for creating turn-based games using JavaScript.
</p>

Write simple functions that describe how the game state changes
when a particular move is made. This is automatically converted
into a playable game complete with online multiplayer
features, all without requiring you to write a single line of
networking or storage code.

### Features

- **State Management**: Game state is managed seamlessly across clients, server and storage automatically.
- **Multiplayer**: Game state is kept in sync in realtime and across platforms.
- **AI**: Automatically generated bots that can play your game.
- **Game Phases**: with different game rules and turn orders per phase.
- **Lobby**: Player matchmaking and game creation.
- **Prototyping**: Interface to simulate moves even before you render the game.
- **Extendable**: Plugin system that allows creating new abstractions.
- **View-layer Agnostic**: Use the vanilla JS client or the bindings for React / React Native.
- **Logs**: Game logs with the ability to time travel (viewing the board at an earlier state).

## Usage

### Installation

```sh
npm install boardgame.io
```

### Documentation

Read our [Full Documentation](https://boardgame.io/documentation/) to learn how to
use boardgame.io, and join the [community on gitter](https://gitter.im/boardgame-io/General)
to ask your questions!

### Running examples in this repository

```sh
npm install
npm start
```

The examples can be found in the [examples](examples/) folder.

## Changelog

See [changelog](docs/documentation/CHANGELOG.md).

## Contributing

See the contributing [guidelines](CONTRIBUTING.md). Also take a look at the [roadmap](roadmap.md)
to find things that you could contribute to.

## License

[MIT](LICENSE)
npm package: @gvirtual/create-esbuild-starter
Description: Scaffold esbuild powered web app
Author: Gopal Ojha
Latest version: 0.0.1

# Esbuild Starter

This package or API helps you setup an [EsBuild](https://esbuild.github.io/) app with supported template (e.g. _react_ etc)

## Getting Started

You can start using the package by the following method

- With `npm`

```
npm init @gvirtual/esbuild-starter
```

- With `yarn`

```
yarn create @gvirtual/esbuild-starter
```

- With `npx`

```
npx @gvirtual/create-esbuild-starter
```

Once you perform any of the above, you'll be prompted to answer few questions.

## Current Supported Template

- [ReactJs](https://reactjs.org/) with [Styled Components](https://styled-components.com/)
npm package: @gvlatko/material-duration-picker-v5
Description: React Material component for durations inspired by Material-UI Pickers
Author: gvlatko
Latest version: 2.0.42

# Material-Duration-Picker

Simple duration picker inspired by [Material-UI Pickers](https://material-ui-pickers.dev/)

This is a fork from [https://github.com/tran-simon/material-duration-picker](https://github.com/tran-simon/material-duration-picker)

![image](https://user-images.githubusercontent.com/8755930/116327819-96fc1280-a795-11eb-96a6-e10722fe5b56.png)


## To install

```bash
npm install --save material-duration-picker
```

or

```bash
yarn add material-duration-picker
```

### Dependencies:

* [Material-UI](https://material-ui.com/)
* [React](https://github.com/facebook/react)

## To use:

*This example uses [date-fns](https://github.com/date-fns/date-fns) to format the duration*

```typescript jsx
import {DurationPicker} from "./durationPicker";
import {formatDuration} from 'date-fns'

const Comp = () => {
  const [value, setValue] = useState(0)
  return (
    <div>
      <DurationPicker
        label='Duration'
        value={value}
        onValueChange={(v) => setValue(v)}
        formatDuration={formatDuration}
      />
    </div>
  );
}
```


[demo](https://user-images.githubusercontent.com/8755930/116327648-41c00100-a795-11eb-9446-ec7d57fae7a4.mp4)



### Props

* value: (REQUIRED) The duration value in seconds
* onValueChange: (REQUIRED) On change callback
* formatDuration: function to customize the way that the duration is formatted
* views: Array of views to offer. **MUST BE FROM BIGGEST TO SMALLEST** ex: ['weeks', 'minutes', 'seconds']
* disableEditDialog: If should not enable the edit dialog on click of the field 
* DurationDialogProps: Props passed to the dialog

Remaining props are passed to the TextField component


### Localisation

https://github.com/tran-simon/material-duration-picker/issues/1#issuecomment-870100173

[Sandbox example](https://codesandbox.io/s/material-duration-picker-translation-example-3xnps?file=/src/App.tsx:0-897)
npm package: @gvnn/tf-publish
Description: Simple CLI for upload tf modules to Gitlab registry
Latest version: 1.2.2

# 🚂 @gvnn/tf-publish

[![Powered by skuba](https://img.shields.io/badge/🤿%20skuba-powered-009DC4)](https://github.com/seek-oss/skuba)

## Install

```shell
yarn add -D @gvnn/tf-publish
yarn gvnn-tf-publish
```

## Development

### Prerequisites

- Node.js LTS
- Yarn 1.x

```shell
yarn install
```

### Test

```shell
yarn test
```

### Lint

```shell
# Fix issues
yarn format

# Check for issues
yarn lint
```

### Package

```shell
# Compile source
yarn build

# Review bundle
npm pack
```
npm package: @gvol-org/daassdk
Description: cesium的地名扩展功能
Author: chuhaoming
Latest version: 1.0.8

# 快速上手

## 通过 CDN 安装

#### html部分

```js

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Dass测试</title>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="./Cesium/Cesium.js"></script>
    <script src="./daassdk.min.js"></script>
    <style>
        #GvolContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="GvolContainer"></div>
    <div id="toolbar"></div>
</body>


```

#### js 部分

```js
<script>
    //初始化地球
    const engine = new daassdk.GvolEngine('GvolContainer')
    // 新的矢量样式加载方式是解密一个链接 
      new  daassdk.MapboxPlaceName(engine.viewer, style)
 </script>

 ```

# 通过 npm 安装

> npm i cesium @gvol-org/daassdk


```js
  import 'cesium/Source/Widgets/widgets.css'
  import * as Cesium from 'cesium'
//在入口文件或打包配置文件里设置window的全局变量
  window['CESIUM_BASE_URL'] ="./node_modules/Cesium/Build/Cesium";
  window.Cesium={...Cesium}



  import {
    GvolEngine,//cesium内核
    MapboxPlaceName //创建矢量地名图层
    } from '@gvol-org/daassdk'



    window.Cesium=Cesium  //将Cesium对象赋值到window上
   const engine = new GvolEngine('GvolContainer')
   let style=xxxx  //style是样式配置文件
   new   MapboxPlaceName(engine.viewer, style) 

````
npm package: @gvol-org/daassdk.cesium
Description: cesium的地形兼容
Latest version: 1.0.7

# 快速上手

## script引入

### html部分

```js

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Dass测试</title>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="./Cesium/Cesium.js"></script>
    <script src="./daassdk.min.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
</body>


```

#### js 部分

##### 加载数据服务

```js
<script>
    const viewer = new Cesium.Viewer('cesiumContainer'); 
    let instance = daassdk.useCesium(viewer);
    let layer = instance.addLayer({
        name: 'yingxiang',
        index: 0,
        baseUrl: "https://tiles.geovis.online/base/v1/img/{z}/{x}/{y}",
        tmsIds: "w",
        visible:true,
        format:'webp',
        token: "token...",
        minimumLevel: 0,
        maximumLevel: 18,
    });
 </script>

 ```

##### 加载地名样式
```js
<script>

   let style='xxxx'  //style是矢量样式配置文件
   //加载矢量地名样式
   new daassdk.MapboxPlaceName(viewer, styles)
 </script>

 ```

## 通过 npm 安装

> npm i cesium @gvol-org/daassdk

```js
  //入口文件
  import 'cesium/Source/Widgets/widgets.css'
  import * as Cesium from 'cesium'
  //在入口文件或打包配置文件里设置window的全局变量
  window['CESIUM_BASE_URL'] ="./node_modules/Cesium/Build/Cesium";
  window.Cesium={...Cesium}


  //需要用到的js文件引入
  import { MapboxPlaceName, useCesium } from '@gvol-org/daassdk'

  const viewer = new Cesium.Viewer('cesiumContainer'); 
    let instance = daassdk.useCesium(viewer);
    let layer = instance.addLayer({
        name: 'yingxiang',
        index: 0,
        baseUrl: "https://tiles.geovis.online/base/v1/img/{z}/{x}/{y}",
        tmsIds: "w",
        visible:true,
        format:'webp',
        token: "token....",
        minimumLevel: 0,
        maximumLevel: 18,
    });
   let style='xxxx'  //style是样式配置文件
   new MapboxPlaceName(viewer, style) 

````
npm package: @gvol-org/daassdk.openlayers
Description: 是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的调用Datacloud的地图服务。
Latest version: 1.0.1

# 快速上手

## script 引入

### html 部分

```js
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>OpenLayer测试</title>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="../src/LayerManager/OpenLayer/ol.js"></script>
    <script src="../src/LayerManager/OpenLayer/daas.geovis.ol.min.js"></script>
</head>

<body>
    <div id="OpenLayer" style="width:100%,height:100%"></div>
</body>
```

#### js 部分

##### 加载数据服务

```js
<script>
   let map = new ol.Map({
    target: document.getElementById('OpenLayer'),
    layers: [],
    controls: [],
    view: new ol.View({
      projection: 'EPSG:3857',
      center: [0, 0],
      zoom: 2.9068905956085187,
      maxZoom: 20
    })
  })

  let instance = daas.useOpenlayer(map);

  //增
  let layer = instance.addLayer({
    name: 'yingxiang',
    index: 0,
    baseUrl: "https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}",
    tmsIds: "w",
    format: 'webp',
    token: "4ea7bc4e9a2efc4e76be33d9511600dfa3b4f24bb81cb69561ab0b833d9b482c",
    minimumLevel: 0,
    maximumLevel: 18,
  });

  //显示
  layer.show = true;

  //修改层级
  layer.index = 2;

 </script>
```

## 通过 npm 安装

> npm i @gvol-org/openlayers  ol

```js
//入口文件
import { Map, View } from "ol";
import { useOpenlayer } from "@gvol-org/openlayers";

onMounted(() => {
  // 初始化地球
  let map = new Map({
    target: "OpenLayer",
    layers: [],
    controls: [],
    view: new View({
      projection: "EPSG:3857",
      center: [0, 0],
      zoom: 2.9068905956085187,
      maxZoom: 20,
    }),
  });
  let instance = useOpenlayer(map);

  //增
  let layer = instance.addLayer({
    name: "yingxiang",
    index: 1,
    baseUrl: "https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}",
    tmsIds: "w",
    format: "webp",
    token: "4ea7bc4e9a2efc4e76be33d9511600dfa3b4f24bb81cb69561ab0b833d9b482c",
    minimumLevel: 0,
    maximumLevel: 18,
  });

  layer.show = true;
});
```
npm package: @gvol/components
Description: Import pre-built [Gvol](https://gvol.io/) charts in your UI 🧙🏼
Author: Roman Krasiuk
Latest version: 0.2.12

# genesis volatility ui components

Import pre-built [Gvol](https://gvol.io/) charts in your UI 🧙🏼

## getting started

The following chart components are available in v0.2.0:  
`<Skew />`  
`<ConstantSkews1M />  `  
`<ConstantMaturityATM />`  
`<GenericOrderbookTermStructure />`  
`<CobIvDteATMIv />`  

Simply import the components you want into your project and you're ready to go!
Example in React.js:

```js
import { ConstantMaturityATM } from '@gvol/components'

function App() {
  return (
    <div>
      <ConstantMaturityATM
        symbol="BTC"
        />
    </div>
  );
}
```

| Prop      | Type | Default |
| ----------- | ----------- |---------- |
| *Symbol      | "BTC" or "ETH"       | *Required
| Height   | Number        | 600 |
| colors   | string[ ]        | GVOL Default Colors |

If you'd like more information on the data for these charts, check out the [Genesis Volatility documentation](https://docs.gvol.io/#intro) 🚀
npm package: @gvray/adminkit
Description: A rich and colorful toolkit about Path.
Author: GavinRay
Latest version: 1.0.5

# @gvray/adminkit

A comprehensive toolkit for admin/business application development.

## Installation

```shell
npm i @gvray/adminkit
# or
yarn add @gvray/adminkit
# or
pnpm add @gvray/adminkit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/adminkit v1.0.5**

***

# @gvray/adminkit v1.0.5

复制相关功能模块

## Classes

- [EventBus](classes/EventBus.md)
- [LoadingManager](classes/LoadingManager.md)
- [LocalStorage](classes/LocalStorage.md)
- [SessionStorage](classes/SessionStorage.md)

## Interfaces

- [EventBusOptions](interfaces/EventBusOptions.md)
- [LoadingState](interfaces/LoadingState.md)
- [StorageItem](interfaces/StorageItem.md)
- [StorageOptions](interfaces/StorageOptions.md)

## Type Aliases

- [EventHandler](type-aliases/EventHandler.md)
- [LoadingListener](type-aliases/LoadingListener.md)

## Variables

- [eventBus](variables/eventBus.md)
- [loadingManager](variables/loadingManager.md)
- [sessionStore](variables/sessionStore.md)
- [storage](variables/storage.md)

## Functions

- [copyCode](docs/functions/copyCode.md)
- [copyImage](docs/functions/copyImage.md)
- [copyLink](docs/functions/copyLink.md)
- [copyRichText](docs/functions/copyRichText.md)
- [copyTable](docs/functions/copyTable.md)
- [copyText](docs/functions/copyText.md)
- [formatFileSize](docs/functions/formatFileSize.md)
- [formatMoney](docs/functions/formatMoney.md)
- [formatNumber](docs/functions/formatNumber.md)
- [formatNumberCustom](docs/functions/formatNumberCustom.md)
- [formatPercentage](docs/functions/formatPercentage.md)
- [formatPhoneNumber](docs/functions/formatPhoneNumber.md)
- [loading](docs/functions/loading.md)
- [truncateText](docs/functions/truncateText.md)
- [withLoading](docs/functions/withLoading.md)

<!-- AUTO-API-END -->
npm package: @gvray/datekit
Description: Professional date and time utilities for JavaScript/TypeScript applications / 专业的JavaScript/TypeScript日期时间工具库
Author: GavinRay
Latest version: 1.0.1

# @gvray/datekit

A toolkit for date and time manipulation.

## Installation

```shell
npm i @gvray/datekit
# or
yarn add @gvray/datekit
# or
pnpm add @gvray/datekit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/datekit v1.0.1**

***

# @gvray/datekit v1.0.1

## Interfaces

- [FormatOptions](interfaces/FormatOptions.md)

## Variables

- [DATE\_FORMATS](variables/DATE_FORMATS.md)
- [FORMAT\_TOKENS](variables/FORMAT_TOKENS.md)

## Functions

- [add](docs/functions/add.md)
- [duration](docs/functions/duration.md)
- [format](docs/functions/format.md)
- [formatPreset](docs/functions/formatPreset.md)
- [getTimezoneOffset](docs/functions/getTimezoneOffset.md)
- [isAfter](docs/functions/isAfter.md)
- [isBefore](docs/functions/isBefore.md)
- [isEqual](docs/functions/isEqual.md)
- [isValid](docs/functions/isValid.md)
- [parse](docs/functions/parse.md)
- [parseAny](docs/functions/parseAny.md)
- [parseISO](docs/functions/parseISO.md)
- [parseUnix](docs/functions/parseUnix.md)
- [subtract](docs/functions/subtract.md)
- [timeAgo](docs/functions/timeAgo.md)
- [toTimezone](docs/functions/toTimezone.md)

<!-- AUTO-API-END -->
npm package: @gvray/domkit
Description: A rich and colorful toolkit about DOM.
Author: GavinRay
Latest version: 1.0.5

# @gvray/domkit

A toolkit for DOM manipulation and browser utilities.

## Installation

```shell
npm i @gvray/domkit
# or
yarn add @gvray/domkit
# or
pnpm add @gvray/domkit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/domkit v1.0.5**

***

# @gvray/domkit v1.0.5

## Variables

- [preload](variables/preload.md)

## Functions

- [addClass](docs/functions/addClass.md)
- [addCss](docs/functions/addCss.md)
- [addEvent](docs/functions/addEvent.md)
- [cancelAnimationFrame](docs/functions/cancelAnimationFrame.md)
- [canUseDom](docs/functions/canUseDom.md)
- [createDom](docs/functions/createDom.md)
- [downloadByBlob](docs/functions/downloadByBlob.md)
- [downloadByUrl](docs/functions/downloadByUrl.md)
- [emptyDom](docs/functions/emptyDom.md)
- [getBoundingClientPosition](docs/functions/getBoundingClientPosition.md)
- [getBrowser](docs/functions/getBrowser.md)
- [getClass](docs/functions/getClass.md)
- [getCssVariable](docs/functions/getCssVariable.md)
- [getOffsetPosition](docs/functions/getOffsetPosition.md)
- [getPlatform](docs/functions/getPlatform.md)
- [getScrollLeft](docs/functions/getScrollLeft.md)
- [getScrollPosition](docs/functions/getScrollPosition.md)
- [getScrollTop](docs/functions/getScrollTop.md)
- [getStyleProps](docs/functions/getStyleProps.md)
- [getTextPixelWidth](docs/functions/getTextPixelWidth.md)
- [hasClass](docs/functions/hasClass.md)
- [isBrowser](docs/functions/isBrowser.md)
- [isIE](docs/functions/isIE.md)
- [isScrollEnd](docs/functions/isScrollEnd.md)
- [loadScript](docs/functions/loadScript.md)
- [observeScroll](docs/functions/observeScroll.md)
- [rem](docs/functions/rem.md)
- [removeClass](docs/functions/removeClass.md)
- [removeCssVariable](docs/functions/removeCssVariable.md)
- [removeDom](docs/functions/removeDom.md)
- [removeEvent](docs/functions/removeEvent.md)
- [requestAnimationFrame](docs/functions/requestAnimationFrame.md)
- [require](docs/functions/require.md)
- [scrollTo](docs/functions/scrollTo.md)
- [setClass](docs/functions/setClass.md)
- [setCssVariable](docs/functions/setCssVariable.md)
- [setOpacity](docs/functions/setOpacity.md)
- [setStyleProps](docs/functions/setStyleProps.md)
- [toBack](docs/functions/toBack.md)
- [toFront](docs/functions/toFront.md)

<!-- AUTO-API-END -->
npm package: @gvray/mathkit
Description: Professional mathematical utilities for JavaScript/TypeScript applications / 专业的JavaScript/TypeScript数学工具库
Author: GavinRay
Latest version: 1.0.1

# @gvray/mathkit

A toolkit for mathematical operations and calculations.

## Installation

```shell
npm i @gvray/mathkit
# or
yarn add @gvray/mathkit
# or
pnpm add @gvray/mathkit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/mathkit v1.0.1**

***

# @gvray/mathkit v1.0.1

## Functions

- [add](docs/functions/add.md)
- [arithmeticSequence](docs/functions/arithmeticSequence.md)
- [clamp](docs/functions/clamp.md)
- [divide](docs/functions/divide.md)
- [fibonacci](docs/functions/fibonacci.md)
- [geometricSequence](docs/functions/geometricSequence.md)
- [isEven](docs/functions/isEven.md)
- [isOdd](docs/functions/isOdd.md)
- [max](docs/functions/max.md)
- [min](docs/functions/min.md)
- [multiply](docs/functions/multiply.md)
- [randomBoolean](docs/functions/randomBoolean.md)
- [randomChoice](docs/functions/randomChoice.md)
- [randomFloat](docs/functions/randomFloat.md)
- [randomInt](docs/functions/randomInt.md)
- [range](docs/functions/range.md)
- [repeat](docs/functions/repeat.md)
- [shuffle](docs/functions/shuffle.md)
- [subtract](docs/functions/subtract.md)

<!-- AUTO-API-END -->
npm package: @gvray/pathkit
Description: A rich and colorful toolkit about Path.
Author: GavinRay
Latest version: 1.0.5

# @gvray/pathkit

A toolkit for path manipulation and URL utilities.

## Installation

```shell
npm i @gvray/pathkit
# or
yarn add @gvray/pathkit
# or
pnpm add @gvray/pathkit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/pathkit v1.0.5**

***

# @gvray/pathkit v1.0.5

## Interfaces

- [ParsedPath](interfaces/ParsedPath.md)

## Functions

- [basename](docs/functions/basename.md)
- [dirname](docs/functions/dirname.md)
- [extname](docs/functions/extname.md)
- [format](docs/functions/format.md)
- [fromFileUrl](docs/functions/fromFileUrl.md)
- [isAbsolute](docs/functions/isAbsolute.md)
- [isWithin](docs/functions/isWithin.md)
- [join](docs/functions/join.md)
- [normalize](docs/functions/normalize.md)
- [parse](docs/functions/parse.md)
- [parseUrl](docs/functions/parseUrl.md)
- [queryString](docs/functions/queryString.md)
- [relative](docs/functions/relative.md)
- [resolve](docs/functions/resolve.md)
- [toFileUrl](docs/functions/toFileUrl.md)
- [toPosix](docs/functions/toPosix.md)
- [toWin32](docs/functions/toWin32.md)

<!-- AUTO-API-END -->
npm package: @gvray/validationkit
Description: Professional data validation utilities for JavaScript/TypeScript applications / 专业的JavaScript/TypeScript数据验证工具库
Author: GavinRay
Latest version: 1.0.1

# @gvray/validationkit

A toolkit for data validation and schema checking.

## Installation

```shell
npm i @gvray/validationkit
# or
yarn add @gvray/validationkit
# or
pnpm add @gvray/validationkit
```
<!-- AUTO-API-START -->

## API Reference

**@gvray/validationkit v1.0.1**

***

# @gvray/validationkit v1.0.1

## Classes

- [FormValidator](classes/FormValidator.md)

## Interfaces

- [FormField](interfaces/FormField.md)
- [FormState](interfaces/FormState.md)
- [FormValidationOptions](interfaces/FormValidationOptions.md)
- [Schema](interfaces/Schema.md)
- [SchemaField](interfaces/SchemaField.md)
- [SchemaValidationResult](interfaces/SchemaValidationResult.md)
- [ValidationResult](interfaces/ValidationResult.md)

## Type Aliases

- [Validator](type-aliases/Validator.md)

## Variables

- [chineseIdCard](variables/chineseIdCard.md)
- [chineseMobile](variables/chineseMobile.md)
- [email](variables/email.md)
- [isLetterOrDigit](variables/isLetterOrDigit.md)
- [phone](variables/phone.md)
- [required](variables/required.md)
- [url](variables/url.md)

## Functions

- [max](docs/functions/max.md)
- [maxLength](docs/functions/maxLength.md)
- [min](docs/functions/min.md)
- [minLength](docs/functions/minLength.md)
- [pattern](docs/functions/pattern.md)
- [validateSchema](docs/functions/validateSchema.md)

<!-- AUTO-API-END -->
npm package: @gvrs-nx/publint
Description: An Nx executor for linting build artifacts with publint
Author: Alex Gavrusev
Latest version: 0.1.0

# @gvrs-nx/publint

An [Nx](https://nx.dev) executor for linting published libraries' build artifacts with [publint](https://publint.dev)

## Installation

```bash
npm i -D @gvrs-nx/publint
```

## Usage

In the library's `project.json`, configure the `publint` executor by specifying the library build target as the `buildTarget`, and depending on it:

```json
{
  "publint": {
    "executor": "@gvrs-nx/publint:publint",
    "options": {
      "buildTarget": "build"
    },
    "dependsOn": ["build"]
  }
}
```

Alternatively, if the build target does not have an `outputPath`, specify the `buildOutputPath` instead:

```json
{
  "publint": {
    "executor": "@gvrs-nx/publint:publint",
    "options": {
      "buildOutputPath": "dist/libs/a"
    },
    "dependsOn": ["build"]
  }
}
```

## Licence

MIT © Aliaksandr Haurusiou.
npm package: @gvrs/eslint-config
Description: React and base eslint config
Author: Alex Gavrusev
Latest version: 2.0.1

# @gvrs/eslint-config

![npm (scoped)](https://img.shields.io/npm/v/@gvrs/eslint-config?style=flat-square)
![NPM](https://img.shields.io/npm/l/@gvrs/eslint-config?style=flat-square)
![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreenn?style=flat-square)

## Setup

### 1) Install (with peer dependencies)

```bash
npx install-peerdeps --dev @gvrs/eslint-config
```

### 2) Extend config

For React:

```diff
extends: [
+ '@gvrs/eslint-config/react'
]
```

Base only

```diff
extends: [
+ '@gvrs/eslint-config/base'
]
```

### 3) Set [parserOptions.project](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsproject)

```diff
{
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}
```

## Additional Documentation

- [CHANGELOG.md](CHANGELOG.md)
- [eslint-config-airbnb-typescript](https://github.com/iamturns/eslint-config-airbnb-typescript)
- [eslint-config-airbnb](https://github.com/airbnb/javascript)
npm package: @gvrs/gatsby-transformer-image-mask
Description: Refine edges of placeholders with transparent parts
Author: Alex Gavrusev
Latest version: 2.0.0

# @gvrs/gatsby-transformer-image-mask

![npm (scoped)](https://img.shields.io/npm/v/@gvrs/gatsby-transformer-image-mask?style=flat-square)
![NPM](https://img.shields.io/npm/l/@gvrs/gatsby-transformer-image-mask?style=flat-square)
![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreenn?style=flat-square)

Refine edges of placeholders with transparent parts

## Configuration

```javascript
// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `@gvrs/gatsby-transformer-image-mask`,
  ],
};
```

## Usage example

### Fetching data

```graphql
imageSharp {
  gatsbyImageData
  imageMask {
    base64
  }
}
```

### Rendering

```tsx
import { GatsbyImage } from "gatsby-plugin-image";
import styled from "@emotion/styled";

const GatsbyImageWithMask = styled(GatsbyImage)`
  & [data-placeholder-image] {
    mask-image: url("${(props) => props.mask}");
    mask-size: "contain";
    mask-position: "center center";
    mask-repeat: "no-repeat";
  }
`;

const Image = ({ gatsbyImageData, imageMask }) => (
  <GatsbyImageWithMask image={gatsbyImageData} mask={imageMask.base64} />
);
```

## Returns

- `base64` (string) — base 64 encoded svg mask

## Additional documentation

- [CHANGELOG](https://gitlab.com/alex.gavrusev/gatsby-transformer-image-mask/-/blob/master/CHANGELOG.md)

## See also

- [@gvrs/gatsby-transformer-blurhash](https://gitlab.com/alex.gavrusev/gatsby-transformer-blurhash/) — generate [BlurHash](https://blurha.sh/) placeholders for images
npm package: @gvrs/nestjs-hcaptcha
Description: A NestJS module for adding hCaptcha validation
Author: Alex Gavrusev
Latest version: 0.9.0

# @gvrs/nestjs-hcaptcha

A NestJS module for adding hCaptcha validation

## Installation

```bash
npm i @gvrs/nestjs-hcaptcha
```

## Usage

First, provide the options in the root `AppModule`:

```ts
@Module({
  imports: [
    HcaptchaModule.forRoot({
      secret: 'YOUR_HCAPTCHA_SECRET',
    }),
  ],
})
export class AppModule {}
```

Afterward, import the `HcaptchaModule` in the module where you need to use captcha validation:

```ts
@Module({
  imports: [HcaptchaModule],
  controllers: [UsersController],
})
export class UsersModule {}
```

Finally, decorate the controller method with `@VerifyCaptcha()`:

```ts
@Controller('users')
class UsersController {
  @Post('register')
  @VerifyCaptcha()
  register() {}
}
```

By default, the hCaptcha token will be extracted from the `h-captcha-response` request body field

### Setting the sitekey you expect to see

Provide the `sitekey` option in the root `HcaptchaModule`:

```ts
@Module({
  imports: [
    HcaptchaModule.forRoot({
      secret: 'YOUR_HCAPTCHA_SECRET',
      sitekey: 'YOUR_SITEKEY',
    }),
  ],
})
export class AppModule {}
```

### Customizing the captcha data extraction

If you want to customize the retrieval of the hCaptcha token and/or the user's IP address, provide an implementation of `getCaptchaData` in the root `HcaptchaModule`:

```ts
@Module({
  imports: [
    HcaptchaModule.forRoot({
      secret: 'YOUR_HCAPTCHA_SECRET',
      getCaptchaData: (ctx) => {
        const request = ctx.switchToHttp().getRequest();

        const token = request.body['token'];
        const remoteip = request.headers['x-forwarded-for'];

        return { token, remoteip };
      },
    }),
  ],
})
export class AppModule {}
```

### Customizing the error response

By default, when the captcha is invalid, or cannot be validated, a 403 error will be sent to the client. To customize that response, use an [exception filter](https://docs.nestjs.com/exception-filters):

```ts
@Catch(HcaptchaException)
class HcaptchaExceptionFilter implements ExceptionFilter {
  catch(exception: HcaptchaException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    const status = 400;

    response.status(status).json({
      statusCode: status,
      message: 'Invalid captcha',
    });
  }
}
```

### Imperative captcha verification

If you don't want to, or cannot use the `@VerifyCaptha()` decorator or the `HcaptchaGuard`, you can verify the captcha by using the `HcaptchaService`:

```ts
@Controller('users')
class UsersController {
  constructor(private readonly hcaptchaService: HcaptchaService) {}

  @Post('register')
  async register(@Req() request: Request) {
    try {
      const token = request.body['h-captcha-response'];

      // returns the hCaptcha JSON response, or throws a HcaptchaException
      const verifyResponse = await this.hcaptchaService.verifyCaptcha(token);
    } catch {
      throw new BadRequestException();
    }
  }
}
```

## License

MIT © Aliaksandr Haurusiou.
npm package: @gw2/markup-ast
Description: Types for Guild Wars 2 Markup AST
Author: darthmaim
Latest version: 1.0.2

# @gw2/markup-ast

This package contains the type definitions for the AST (Abstract Syntax Tree) used to represent Guild Wars 2® markup.


## Usage

You probably don't need to use this package directly, unless you are writing your own transformers for Guild Wars 2® markup.


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-parser
Description: Guild Wars 2 markup parser
Author: darthmaim
Latest version: 1.1.1

# @gw2/markup-parser

This package contains a parser that converts Guild Wars 2® markup into an AST (Abstract Syntax Tree).


## Usage

Use this package if you want to parse Guild Wars 2® markup into an AST to process it further.

```ts
import { parseGw2Markup } from '@gw2/markup-parser';

const ast = parseGw2Markup('Hello <c=@example>world</c>!');
```


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-react
Description: Render Guild Wars 2 markup as React elements
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-react

This package renders Guild Wars 2® markup as React elements.


## Usage

This package provides both a render function and a React component for rendering Guild Wars 2® markup.

### Render function

```ts
import { renderGw2Markup } from '@gw2/markup-react';

const node = renderGw2Markup('Hello <c=@info>world</c>');
```

### Component

```tsx
import { Gw2Markup } from '@gw2/markup-react';

export function Example() {
  return <Gw2Markup markup="Hello <c=@info>world</c>" />;
}
```

### Options

You can customize the components used for rendering the different markup nodes by passing a `components` prop to the `Gw2Markup` component or an options object to the `renderGw2Markup` function.

| Component slot | Description | Default |
|-|-|-|
| `root` | The root component that wraps the entire rendered output. | `React.Fragment` |
| `color` | The component used to render color nodes. Receives a `color` prop with the color value (e.g. `@info`, `#ff0000`). | `span` with inline style for hex colors and a `data-gw2-markup-color` attribute for named colors |
| `break` | The component used to render line breaks. | `br` |

```tsx
import { renderGw2Markup } from '@gw2/markup-react';

const node = renderGw2Markup('Hello <c=@info>world</c>', {
  components: {
    color: ({ color, children }) => (
      <span className={`gw2-color-${color.slice(1)}`}>{children}</span>
    ),
  },
});
```

### CSS styles

If you are using the default color rendering, you can install [`@gw2/markup-css`](../css/) and import a shared stylesheet to apply the default styles for known named colors.

```ts
import '@gw2/markup-css/styles.css';
```


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-stringify
Description: Stringify Guild Wars 2 Markup AST
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-stringify

This package stringifies a Guild Wars 2® markup AST back into markup.


## Usage

You can use this package to convert an AST back into markup after processing it. 

```ts
import { stringifyGw2Markup } from '@gw2/markup-stringify';

const markup = stringifyGw2Markup(ast);
```


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-strip
Description: Strip Guild Wars 2 markup from strings
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-strip

This package strips Guild Wars 2® markup from a string.


## Usage

Use this package if you want to convert a string containing Guild Wars 2® markup into plain text.

```ts
import { stripGw2Markup } from '@gw2/markup-strip';

stripGw2Markup('Hello <c=@example>world</c>!');
// => 'Hello world!'
```


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-to-hast
Description: Convert Guild Wars 2 Markup AST to HAST
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-to-hast

This package converts a Guild Wars 2® markup AST into HAST (Hypertext Abstract Syntax Tree) so it can be processed by tools like [rehype](https://github.com/rehypejs/rehype).


## Usage

Use this package if you want to convert a Guild Wars 2® markup AST into HAST for further processing.

If you are using [unified](https://unifiedjs.com/), you can use the plugin from the [`@gw2/markup-unified`](../unified/) package instead, which combines the parser and this converter for easy integration into unified-based processing pipelines.

```ts
import { gw2MarkupToHast } from '@gw2/markup-to-hast';

const hast = gw2MarkupToHast(ast);
```

### Options

You can pass optional options as the second argument to `gw2MarkupToHast` to customize the conversion process. 

- `colorProperties?: (color: string) => Properties`  
A function that takes a color value (e.g. `@red`, `#ff0000`, etc.) and returns an object with properties to add to the corresponding HAST node.  
The default implementation sets `style="color: ${color}"` for hex colors and `data-gw2-markup-color="${color}"` for named colors.

```ts
import { gw2MarkupToHast } from '@gw2/markup-to-hast';

const hast = gw2MarkupToHast(ast, {
  colorProperties: (color) => {
    if (color.startsWith('#')) {
      return { style: `color: ${color}` };
    } else {
      return { class: `gw2-color--${color}` };
    }
  },
});
```


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-to-jsx
Description: Convert Guild Wars 2 Markup AST to JSX
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-to-jsx

This package converts a Guild Wars 2® markup AST into JSX-compatible elements.


## Usage

If you want to render markup in React, use the [`@gw2/markup-react`](../react/) package instead.

Use this package if you want full control over how AST nodes are converted into elements for React, Preact, Solid, React Native, or any other JSX runtime.

```ts
import React from 'react';
import { gw2MarkupToJsx } from '@gw2/markup-to-jsx';

const element = gw2MarkupToJsx(ast, {
  createElement: React.createElement,
  components: {
    root: React.Fragment,
    color: 'span',
    break: 'br',
  },
});
```


## API

### `gw2MarkupToJsx(tree, options)`

- `tree`: Guild Wars 2® markup AST root node.
- `options.createElement`: Function used to create elements (`createElement` in React, `h` in Preact, etc).
- `options.components`: Required mapping from AST node types to component/element types.
  - `root`
  - `color`
  - `break`
- Color nodes always receive `{ color: string }` as props.


## License

This package is licensed under the [MIT License](../LICENSE).
npm package: @gw2/markup-to-text
Description: Convert Guild Wars 2 Markup AST to plain text
Author: darthmaim
Latest version: 1.0.1

# @gw2/markup-to-text

This package converts a Guild Wars 2® markup AST into plain text by stripping all markup nodes.


## Usage

Use this package to extract human-readable text from a Guild Wars 2® markup AST.

```ts
import { gw2MarkupToText } from '@gw2/markup-to-text';

const text = gw2MarkupToText(ast);
```


## License

This package is licensed under the [MIT License](../LICENSE).