open-index/open-npm huggingface dataset:
npm package: @jsnw/common-utils
Description: Lightweight JavaScript/TypeScript utilities with async helpers, array and string operations
Author: Pavlo Baliuk
Latest version: 1.0.0

# jsn-utils
![coverage badge](https://img.shields.io/badge/coverage-100%25-brightgreen)

## 3.8.0
## List of utility functions

- `noop(): void` - A no-operation function that does nothing
- `ignorePromise(promise: Promise<any>): void` - Helps to suppress unhandled promise rejections
- `chunk<T>(array: T[], size: number): T[][]` - Splits array into chunks of the specified size
- `chunkStr(str: string, chunkSize: number): string[]` - Splits a string into chunks of a specified size
- `isObjectEmpty(obj: object): boolean` - Checks if the given object is empty (contains no own properties)
- `wait(ms: number, signal?: AbortSignal): Promise<void>` - Returns a promise that resolves after the specified amount of time in milliseconds or when signal is aborted
- `createPromisesCache` - deprecated; use createInFlightDeduper instead
- `createInFlightDeduper` - Creates a deduplicator for in-flight promises or sync functions. Prevents duplicate executions for the same key while a promise is pending. Clears the entry after settlement
- `resultify` - Executes a function and returns its result as a tuple `[value, error]`. Works with both sync and async functions. Never throws.

## List of utility classes

- `Monitor` class - provides simple methods to monitor execution time of functions:
    - static `measureFunctionTime(fn: Function): number | Promise<number>`
    - static `autoStart(label: string): Monitor` - Creates a new `Monitor` instance and calls `.start(label)` on it
    - `start(label: string)`
    - `mark(label: string, description?: string)`
    - `stop(label: string): MonitorResult`


### Types
#### MonitorMark
- ts: `number` - mark timestamp
- diff: `number` - difference in milliseconds between start timestamp and mark timestamp
- description?: `string` - an optional description of a mark

#### MonitorResult
- startTs: `number` - start timestamp
- stopTs: `number` - stop timestamp
- totalTime: `number` - difference between `stopTs` and `startTs`
- marks: `MonitorMark[]` - array of marks (if any)
npm package: @jsnw/nestjs-ioredis
Description: NestJS module for integrating Redis
Author: Pavlo Baliuk
Latest version: 2.0.0

# @jsnw/nestjs-ioredis

NestJS module for integrating Redis using [ioredis](https://www.npmjs.com/package/ioredis)

## Installation

```bash
npm i -s @jsnw/nestjs-ioredis ioredis @nestjs/common@11
```

## Quick Start

Import `RedisModule` in your app module and configure it with `forRoot()`:

```typescript
import { Module } from '@nestjs/common';
import { RedisModule } from '@jsnw/nestjs-ioredis';

@Module({
  imports: [
    RedisModule.forRoot({
      hostname: 'localhost',
      port: 6379,
      username: 'default',
      password: 'your-password'
    }),
  ],
})
export class AppModule {}
```

## License

MIT

## Author

Pavlo Baliuk (jsnow0177@gmail.com)
npm package: @jsnw/nestjs-rabbitmq
Description: NestJS module for RabbitMQ integration
Author: Pavlo Baliuk
Latest version: 2.0.5

# @jsnw/nestjs-rabbitmq

**A lightweight, strictly typed, and predictable RabbitMQ module for NestJS**

## Key features
- [rabbitmq-client](https://www.npmjs.com/package/rabbitmq-client) inside
- Full validation for both incoming and outgoing messages using [zod](https://www.npmjs.com/package/zod)
- Single connection
- Type-Safe publishing: You cannot publish an invalid payload
- Exchanges and queues are automatically declared upon application bootstrap
- No AI. The code is written by human, not a machine

## Installation

```bash
npm i -s @jsnw/nestjs-rabbitmq @nestjs/core@11 @nestjs/common@11
```

Optionally, you can install `zod` and `rabbitmq-client`

## Quick Start
### 1. Define exchanges and queues

```ts
import {RabbitmqExchange, RabbitmqQueue} from '@jsnw/nestjs-rabbitmq';

export const MY_EXCHANGE = new RabbitmqExchange({
    name: 'my_exchange',
    type: 'direct',
    durable: true,
    autoDelete: false
});

export const MY_QUEUE = new RabbitmqQueue({
    name: 'my_queue',
    durable: true,
    autoDelete: false,
    bindings: [
        {exchange: MY_EXCHANGE, routingKeys: ['user.created']}
    ]
});

```

### 2. Register the module

```ts
// app.module.ts
import {Module} from '@nestjs/common';
import {RabbitmqModule} from '@jsnw/nestjs-rabbitmq';

@Module({
    imports: [
        RabbitmqModule.forRoot({
            hostname: 'localhost',
            port: 5672,
            username: 'guest',
            password: 'guest',
            exchanges: [MY_EXCHANGE],
            queues: [MY_QUEUE]
        })
    ]
})
export class AppModule {}
```

### 3. Define a Message Contract

```ts
import {z} from 'zod';
import {RabbitmqMessage} from '@jsnw/nestjs-rabbitmq';

export const USER_CREATED_EVENT = RabbitmqMessage.template({
    type: 'json',
    exchange: MY_EXCHANGE,
    durable: true,
    routingKey: 'user.created',
    schema: z.object({
        id: z.number(),
        email: z.string().email()
    })
});
```

### 4. Publishing messages
```ts
import {Injectable} from '@nestjs/common';
import {Rabbitmq} from '@jsnw/nestjs-rabbitmq';

@Injectable()
export class UserService {

    constructor(private readonly rabbit: Rabbitmq){}
    
    async create(dto: any){
        await this.rabbit.publish(
            USER_CREATED_EVENT.make({
                id: 1, 
                email: 'example@example.com'
            })
        );
    }

}
```

### 5. Subscribing to messages

```ts
import {Injectable} from '@nestjs/common';
import {RabbitmqSubscribe, type AsyncMessage} from '@jsnw/nestjs-rabbitmq';

@Injectable()
export class NotificationsService {

    @RabbitmqSubscribe({
        queue: MY_QUEUE,
        validation: {
            schema: USER_CREATED_EVENT.schema,
            onFail: 'drop'
        }
    })
    async onUserCreated(data: z.infer<typeof USER_CREATED_EVENT.schema>, message: AsyncMessage) {

    }

}
```

## Author
Pavlo Baliuk (jsnow0177@gmail.com)

## License
MIT
npm package: @jsnw/srv-utils
Description: Server-side utilities for Node.js/TypeScript: tsconfig paths, Nest helpers, and config loading.
Author: Pavlo Baliuk
Latest version: 1.1.5

# @jsnw/srv-utils

Small server-side utility bundle for Node.js/TypeScript projects. It includes helpers for tsconfig path aliases, NestJS app bootstrapping, and YAML config loading with Zod validation plus a few predefined schemas.

## Install

```bash
npm install @jsnw/srv-utils
```

Optional dependencies:
- `module-alias` for `useTsconfigPaths`
- `@nestjs/core` and `@nestjs/common` for `withNest`

## Exports

### useTsconfigPaths(fromPath, tsconfigPath)
Loads `compilerOptions.paths` from a tsconfig file and registers them via `module-alias`.

```ts
import {useTsconfigPaths} from '@jsnw/srv-utils';

useTsconfigPaths(__dirname, './tsconfig.json');
```

### getRootPackageDirnameSync()
Finds the highest directory (from the current module) that still has a readable `package.json`.

```ts
import {getRootPackageDirnameSync} from '@jsnw/srv-utils';

const root = getRootPackageDirnameSync();
```

### ConfigLoader.loadConfig(path, schema, addProps?)
Loads a YAML file and validates it with a Zod schema. It also injects `isDev` based on `APP_CONTEXT`, `APPLICATION_CONTEXT`, or `NODE_ENV`.

**Path resolution prefixes:**
- `%pkgroot/` - Resolves to the project root directory
- `%env:VAR_NAME/` - Resolves based on environment variable value

```ts
import {ConfigLoader, configSchemas} from '@jsnw/srv-utils';

// Using project root
const config = ConfigLoader.loadConfig(
  '%pkgroot/config.yml',
  configSchemas.mongodbConnection
);

// Using environment variable
const config = ConfigLoader.loadConfig(
  '%env:CONFIG_PATH/config.yml',
  configSchemas.mongodbConnection
);
```

### configSchemas
Predefined Zod schemas:
- `timeString` (parses strings like `5s`, `2 min` into milliseconds)
- `connection` (host/port/user/pass)
- `mongodbConnection` (extends connection, adds db/authDb/connectTimeout + dsn)
- `mysqlConnection` (extends connection, adds dbname)
- `redisConnection` (extends connection, adds db/keyPrefix)

### withNest(moduleCls, fn)
Creates a NestJS application context, runs your function, then closes the app unless you call `preventClosing`.

```ts
import {withNest} from '@jsnw/srv-utils';
import {AppModule} from './app.module';

await withNest(AppModule, async (app, preventClosing) => {
  // use app.get(...) etc.
  // preventClosing(); // if you want to keep it open
});
```

## Types

`ResolvedConfig` is exported from `@jsnw/srv-utils` for typed config results.
npm package: @jsoc/grid-core
Description: Framework agnostic config generator for grid components.
Latest version: 0.0.1

# @jsoc/grid-core

Framework agnostic config generator and manager for data grid components.

## Features

- Fully framework-agnostic (React, Vue, Angular, Svelte, etc)
- Grid Schema Store: Manage multiple grid schemas and their configurations
- Dynamic Column and Row generation: Generate columns and rows directly from the JSON data.

## Installation

```bash
npm install @jsoc/grid-core
```
npm package: @jsoc/react-grid
Description: Dynamic columns/rows generator for popular React grid components
Latest version: 0.0.2

# @jsoc/react-grid

Package for generating runtime props for a React Grid Component such as AG-Grid, MUI DataGrid, etc. directly from a response data (JSON).

## Installation

```bash
npm install @jsoc/react-grid
```

## Peer Dependencies (required)

- `react`
- `react-dom`

> [!TIP]
> Refer to `package.json` for exact version ranges.

## Peer Dependencies (optional)

- `@mui/x-data-grid`
- `@tanstack/react-table`
- `ag-grid-react`
- `ag-grid-community`
- `mantine-react-table`
- ...and others

> [!IMPORTANT]
> These dependencies are **optional**.
> This package **does NOT have any runtime dependency** on them. They are used in this package only for creating **TypeScript types**.
>
> However, if your project uses TypeScript, you will need to install the specific package(s) for your chosen grid plugin to ensure successful compilation.
>
> For example: If you are using plugin for AG-Grid then you need to install `ag-grid-react` + `ag-grid-community`. Or if you are using plugin for MUI DataGrid then you need to install `@mui/x-data-grid` and so on.
npm package: @jsoffice/jsoffice
Description: Microsoft Office but in javascript
Author: KoalasBruder
Latest version: 1.2.5

# @jsoffice/jsoffice [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![CodeFactor](https://www.codefactor.io/repository/github/jsoffice/jsoffice/badge)](https://www.codefactor.io/repository/github/jsoffice/jsoffice)

Microsoft Office but in javascript
npm package: @json-api/knex-adapter
Description: Knex adapter for the json-api library
Author: Carl Bennett
Latest version: 1.0.0-beta.10

# `@json-api/knex-adapter`

Serve resources from your SQL database using [`json-api@3`](https://github.com/ethanresnick/json-api).

## Installation

```
npm i --save json-api@latest @json-api/knex-adapter
```

## How to Use

```js
// index.js
const { ResourceTypeRegistry, ResourceController } = require('json-api');
const KnexAdapter = require('@json-api/knex-adapter');
const express = require('express');
const knex = require('knex');
const models = require('./models');

const connection = knex(config);
const dbAdapter = new Adapter(models, connection);

const defaults: ResourceTypeDescription = { dbAdapter, urlTemplates };
const registry = new ResourceTypeRegistry(resourceTypes, defaults);
const controller = new APIController(registry);

// This library doesn't yet support reflection of model data for documentation, but json-api requires
// that we provide a DocumentationController regardless. The solution for now is to provide a
// fake controller with an empty ResourceTypeRegistery.
const docsController = new DocumentationController(new ResourceTypeRegistry({}), { name: 'My API' });

const Front = new ExpressStrategy(controller, docsController, { host: 'http://localhost:3000' });
const handler = Front.apiRequest;

const app = express();

app.get('/:type', handler);

app.listen(3000);
```

```js
// models.js
module.exports = {
  posts: {
    table: 'post',
    idKey: '_id',
    attrs: [ 'title', 'date' ],
    relationships: [
      // Direct many-to-one relationship, with the foreign key stored in this resource's row.
      {
        type: 'authors',
        key: 'author'
      },

      // Linked many-to-many relationship, with the foreign keys stored in a linking table.
      {
        type: 'tags',
        key: 'tags',
        via: {
          table: 'post_tag',
          fk: 'post',
          pk: 'tag'
        }
      },

      // Linked one-to-many relationship, with the foreign keys stored in a normal table.
      {
        type: 'readers',
        key: 'favouriteOf',
        via: {
          table: 'reader',
          fk: 'favouritePost',
          pk: '_id'
        }
      }
    ]
  }
}
```
npm package: @json-canvas-viewer/preact
Description: An extensible web-based viewer for JSON Canvas in the form of a Preact component, easy to embed into websites.
Author: Hēsperus
Latest version: 1.0.2

<h1 align="center">
    <img src="../../assets/logo.svg" alt="JSON Canvas Viewer logo" width="280px">
    <br />
    JSON Canvas Viewer Preact
    <br />
</h1>

<h4 align="center">JSON Canvas Viewer as a Preact component</h4>

<p align="center">
    <a href="https://github.com/hesprs/json-canvas-viewer/wiki">
        <strong>Documentation</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/json-canvas-viewer">
        <strong>Vanilla</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/vite-plugin-json-canvas">
        <strong>Vite Plugin</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/react">
        <strong>React Component</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/vue">
        <strong>Vue Component</strong>
    </a> • 
    <strong>Preact Component</strong>
</p>

## ✏️ Description

This is the Preact component of JSON Canvas Viewer, it wraps around the vanilla viewer class to provide a seamless integration with Preact. This package additionally re-exports everything from the core package, so you do not need to install the core package separately.

Install this package if you want to use JSON Canvas Viewer in a **Preact** project. If you are not using it, please head to the corresponding package in the navigation bar above.

## 📦 Installation

Install with your favorite package manager:

```bash
npm add @json-canvas-viewer/preact

# or
pnpm add @json-canvas-viewer/preact

# or
yarn add @json-canvas-viewer/preact

# or
bun add @json-canvas-viewer/preact
```

Now you have two options: **build-time** canvas parsing or **client-side** canvas parsing.

### Build-time Canvas Parsing

This is the recommended way to parse canvas data, it will result in significantly smaller bundle size and faster load times.

Firstly, you need a bundler. JSON Canvas Viewer currently supports [Vite](https://vitejs.dev/) only. Please install [Vite Plugin](https://www.npmjs.com/package/vite-plugin-json-canvas) and setup it.

After bundler setup, you can directly import a canvas file and use it in viewer instantiation:

```tsx
import { JSONCanvasViewerComponent } from '@json-canvas-viewer/preact';
import canvas from 'path/to/your.canvas';

export function App() {
  return <JSONCanvasViewerComponent canvas={canvas} />;
}
```

### Client-side Canvas Parsing

This method doesn't require any bundler setup. You just need to import the parser and fetch the canvas file:

```tsx
import { JSONCanvasViewerComponent, fetchCanvas, parser } from '@json-canvas-viewer/preact';

export async function App() {
  return (
    <JSONCanvasViewerComponent
      canvas={await fetchCanvas('path/to/your.canvas')}
      options={{ parser }}
    />
  );
}
```

Refer to the [documentation](https://github.com/hesprs/json-canvas-viewer/wiki/) for more details.

## 📝 Copyright & License

Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [MIT License](https://mit-license.org/)
npm package: @json-canvas-viewer/react
Description: An extensible web-based viewer for JSON Canvas in the form of a React component, easy to embed into websites.
Author: Hēsperus
Latest version: 1.0.2

<h1 align="center">
    <img src="../../assets/logo.svg" alt="JSON Canvas Viewer logo" width="280px">
    <br />
    JSON Canvas Viewer React
    <br />
</h1>

<h4 align="center">JSON Canvas Viewer as a React component</h4>

<p align="center">
    <a href="https://github.com/hesprs/json-canvas-viewer/wiki">
        <strong>Documentation</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/json-canvas-viewer">
        <strong>Vanilla</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/vite-plugin-json-canvas">
        <strong>Vite Plugin</strong>
    </a> • 
    <strong>React Component</strong> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/vue">
        <strong>Vue Component</strong>
    </a> • 
    <a href="https://www.npmjs.com/package/@json-canvas-viewer/preact">
        <strong>Preact Component</strong>
    </a>
</p>

## ✏️ Description

This is the React component of JSON Canvas Viewer, it wraps around the vanilla viewer class to provide a seamless integration with React. This package additionally re-exports everything from the core package, so you do not need to install the core package separately.

Install this package if you want to use JSON Canvas Viewer in a **React** project. If you are not using it, please head to the corresponding package in the navigation bar above.

## 📦 Installation

Install with your favorite package manager:

```bash
npm add @json-canvas-viewer/react

# or
pnpm add @json-canvas-viewer/react

# or
yarn add @json-canvas-viewer/react

# or
bun add @json-canvas-viewer/react
```

Now you have two options: **build-time** canvas parsing or **client-side** canvas parsing.

### Build-time Canvas Parsing

This is the recommended way to parse canvas data, it will result in significantly smaller bundle size and faster load times.

Firstly, you need a bundler. JSON Canvas Viewer currently supports [Vite](https://vitejs.dev/) only. Please install [Vite Plugin](https://www.npmjs.com/package/vite-plugin-json-canvas) and setup it.

After bundler setup, you can directly import a canvas file and use it in viewer instantiation:

```tsx
import { JSONCanvasViewerComponent } from '@json-canvas-viewer/react';
import canvas from 'path/to/your.canvas';

export function App() {
  return <JSONCanvasViewerComponent canvas={canvas} />;
}
```

### Client-side Canvas Parsing

This method doesn't require any bundler setup. You just need to import the parser and fetch the canvas file:

```tsx
import { JSONCanvasViewerComponent, fetchCanvas, parser } from '@json-canvas-viewer/react';

export async function App() {
  return (
    <JSONCanvasViewerComponent
      canvas={await fetchCanvas('path/to/your.canvas')}
      options={{ parser }}
    />
  );
}
```

Refer to the [documentation](https://github.com/hesprs/json-canvas-viewer/wiki/) for more details.

## 📝 Copyright & License

Copyright ©️ 2025-2026 Hesprs (Hēsperus) | [MIT License](https://mit-license.org/)
npm package: @json-edit/json-edit
Description: This module give you ability to manipulate JSON Object.
Author: Onkar Kore
Latest version: 1.0.2

# json-edit
This module give you ability to manipulate JSON Object.

**Features:**
- Delete json node (recursive/non-recursive/)
- Delete json node nested inside array
- Replace key with new value
- Delete json node (key contains given vale)


**Install**
```
npm i @json-edit/json-edit
```

**Initialize**
```
const jsonEdit = require('@json-edit/json-edit');
```

**How to use**
1. Delete Node
```
jsonEdit.deleteNode(json, keyToDelete, isRecursive = true);
```

2. Replace Key with New Value
```
jsonEdit.replaceValue(json, keyToReplace, newValue);
```

3. Delete Value in nested array
```
jsonEdit.deleteValueInStringArray(json, keyToMatch, valueToDelete);
```
npm package: @json-formost/bootstrap4
Description: A set of Angular components that convert a JSON Schema (v7) into an Angular Reactive Form built with Bootstrap 4.x CSS (getbootstrap.com).
Author: Daniel McFarland
Latest version: 0.0.6

# JSON Formost - Bootstrap4

JSON Formost for Bootstrap4 is a set of Angular components that convert a JSON Schema (v7) into an Angular Reactive Form.

*This tool is functional but **unfinished** and subject to significant refactoring with breaking changes as of July 31, 2020.*

## Example Angular Html
```
<form [formGroup]="demoForm" (ngSubmit)="onSubmit()">
    <formost-form [schema]="schemaString" formControlName="subform"></formost-form>
    <button type="submit" class="btn btn-primary">Save</button>
</form>
```

## Example Angular TypeScript
```
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-bootstrap4-demo',
  templateUrl: './bootstrap4-demo.component.html',
  styleUrls: ['./bootstrap4-demo.component.scss']
})
export class Bootstrap4DemoComponent implements OnInit {
  demoForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.loadDemoForm();
  }

  loadDemoForm() {

    this.demoForm = this.fb.group({
      subform: [null],
    });

  }

  onSubmit() {
    console.info('demoForm Data', this.demoForm.value);
  }

  schemaString = `{
    "title": "People",
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "minLength": 3,
        "description": "Please enter your name"
      },
      "vegetarian": {
        "type": "boolean",
        "title": "Are you a vegetarian?"
      },
      "birthDate": {
        "type": "string",
        "format": "date"
      },
      "nationality": {
        "type": "string",
        "enum": [
          "DE",
          "IT",
          "JP",
          "US",
          "RU",
          "Other"
        ]
      },
    },
    "required": [
      "nationality"
    ]
  }`;
}
```
npm package: @json-formost/bulma
Description: A set of Angular components that convert a JSON Schema (v7) into an Angular Reactive Form built with Bulma CSS (bulma.io).
Author: Daniel McFarland
Latest version: 0.0.3

# JsonFormostBulma

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.5.

## Code scaffolding

Run `ng generate component component-name --project json-formost-bulma` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project json-formost-bulma`.
> Note: Don't forget to add `--project json-formost-bulma` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build json-formost-bulma` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build json-formost-bulma`, go to the dist folder `cd dist/json-formost-bulma` and run `npm publish`.

## Running unit tests

Run `ng test json-formost-bulma` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @json-formost/core
Description: A library to serve as a peer dependency for each specific JSON Formost implementation. Not intended to stand alone.
Author: Daniel McFarland
Latest version: 0.0.3

# JSONFormost Core

A library to serve as a peer dependency for each specific JSON Formost implementation. 

**Not intended to stand alone.** Also install @json-formost/bootstrap4 or @json-formost/bulma, as appropriate.
npm package: @json-forms/core
Description: Core module of JSON Forms
Latest version: 3.0.0-gamma.3

# JSON Forms - More Forms. Less Code

*Complex forms in the blink of an eye*

JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

## Core Package

This is the JSON Forms core package. It provides the basic functionality needed to render forms.

In order to use JSON Forms Core you need to decide which UI framework you would like to use.

JSON Forms currently supports [React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react), [Angular](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular) and [Vue](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue).

The following seeds are available:
- [React Seed](https://github.com/eclipsesource/jsonforms-react-seed)
- [Angular Seed](https://github.com/eclipsesource/jsonforms-angular-seed)
- [Vue Seed](https://github.com/eclipsesource/jsonforms-vue-seed)

See the official [documentation](https://jsonforms.io/) and the [Example Package](https://github.com/eclipsesource/jsonforms/blob/master/packages/examples) on how to integrate JSON Forms with your application.

Check <https://www.npmjs.com/search?q=%40jsonforms> for all published JSON Forms packages.

## License

The JSON Forms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.

## Roadmap

Our current roadmap is available [here](https://github.com/eclipsesource/jsonforms/blob/master/ROADMAP.md).

## Feedback, Help and Support

JSON Forms is developed by [EclipseSource](https://eclipsesource.com).

If you encounter any problems feel free to [open an issue](https://github.com/eclipsesource/jsonforms/issues/new/choose) on the repo.
For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group).
You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms).
In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms.
npm package: @json-forms/material-renderers
Description: Material Renderer Set for JSON Forms
Latest version: 3.0.0-gamma.3

# JSON Forms - More Forms. Less Code

*Complex forms in the blink of an eye*

JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

## Material Renderers Package

This is the JSON Forms Material Renderers Package. This package only contains renderers and must be combined with [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react).

See the official [documentation](https://jsonforms.io/docs/integrations/react/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application.

You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers).

Check <https://www.npmjs.com/search?q=%40jsonforms> for all published JSONForms packages.

### Quick start

Install JSON Forms Core, React and React Material Renderers

```bash
npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
```

Use the `JsonForms` component for each form you want to render and hand over the renderer set.

```js
import React, { useState } from 'react';
import { JsonForms } from '@json-forms/react';
import { materialCells, materialRenderers } from '@json-forms/material-renderers';

function App() {
  const [data, setData] = useState(initialData);
  return (
    <div className='App'>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, _errors }) => setData(data)}
      />
    </div>
  );
}
```

## License

The JSON Forms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.

## Roadmap

Our current roadmap is available [here](https://github.com/eclipsesource/jsonforms/blob/master/ROADMAP.md).

## Feedback, Help and Support

JSON Forms is developed by [EclipseSource](https://eclipsesource.com).

If you encounter any problems feel free to [open an issue](https://github.com/eclipsesource/jsonforms/issues/new/choose) on the repo.
For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group).
You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms).
In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms.
npm package: @json-qs/json-qs
Description: A query string encoder and decoder with full JSON compatibility, no wasteful repetition of keys, and minimal percent-encoding bloat.
Author: Alec Larson
Latest version: 1.2.0

# json-qs

A query string encoder and decoder with full JSON compatibility, no wasteful repetition of keys, and minimal percent-encoding bloat.

#### Requirements

- Must be human-readable.
- Must be fully compatible with JSON.
- Must not rely on percent-encoding. In other words, there must be zero ambiguity after `URLSearchParams` has decoded the query string.
- Must have deterministic key order (for reliable caching).

#### Why make this?

The status quo for query strings is unfriendly to JSON objects and arrays, or at best, overly verbose with repeated keys. Also, backend developers are required to manually decode the string values into their intended types.

Okay, so why not avoid query strings for complex data, and just POST some JSON instead? Network-level caching of POST requests is not possible, so you'd need to implement your own application-level caching. By using GET with a query string, you can leverage the browser's built-in caching mechanism, as well as edge caching.

The `json-qs` approach is to keep query strings human-readable (unlike many others, who compress JSON to make it URI-safe) while still being fully compatible with JSON.

### Specification

See the [specification](./spec.md) for more details or the [test cases](./test/cases.ts) for examples.

### Install

```sh
pnpm add @json-qs/json-qs
```

### Encoding

```ts
import { encode } from '@json-qs/json-qs'

const params = encode({ a: { b: 0 } })
// => 'a={b:0}'
```

### Decoding

Note that the `json-qs` decoder works _in tandem_ with `URLSearchParams`, which is the standard JavaScript API for working with query strings. Percent encoding is handled by `URLSearchParams`, and `json-qs` simply ensures that the query string is fully compatible with JSON in a human-readable way.

```ts
import { decode } from '@json-qs/json-qs'

const url = new URL(request.url)
const params = decode(url.searchParams)
```