Create a JSON Crew Plugin

JSON Crew is an open source, in place editor, viewer, formatter and validator for JSON data. It is build with Monaco Editor and React. It has a support for plugins based on web components.

Over the course of this post, we will create a web component, publish an NPM package and list it on JSON Crew with a PR.

We will start with a starter from Github.

Objective:

• Create a JC Plugin that will remove all null values.

Let's get started.

1. Clone repository

Click on Use this template on Github and let it generate a fork by your name. Clone the repository locally.

2. Run web component

npm install
npm start

3. Input

The web component receives a data property from JC which would render your component with:

<jc-json-utils .data='{"thing": "nothing" }'>
</jc-json-utils>

As seen in the demo folder. This is the JSON that is currently entered by the user.

4. Transform function

Now inside the component, add a transform button inside the render function. Clicking on this button should trigger our function.

 render() {
   return html`
     <pre>${this.data}</pre>
     <button @click=${this.__transformJson}>Transform</button>
   `;
 }

5. Output

Now for the crux, the transformJson function.

   const data = JSON.parse(this.data);
   const newData = Object.entries(data)
     .filter(([key, value]) => (value))
     .map(([key,value]) => ({
       [key]: value
     }));

   const event = new CustomEvent('json-transform', {
     detail: {
       message: newData,
     },
   });
   this.dispatchEvent(event);

PS: This removes only the null values in the first level. The rest is an assignment.

The custom event for json-transform is the most important part here. This is what communicates back to the JSON Crew and shows the transformation UI. The detail key represents the data to be transmitted back.

6. Publishing as npm package

Publishing as an NPM package is the easiest way to host the web component and provide a link to JC. From inside the web component, you can run:

npm run release

to release component to npm.

If you are new to publishing to npm, checkout docs

7. Get the URL from unpkg

If your npm package is @agney/jc-json-utils, then the url would be https://unpkg.com/@agney/jc-json-utils

8. Pull Request

agneym / json-formatter

An extensible JSON Viewer, Editor, Formatter, Validator based on Monaco Editor

JSON Crew

An extensible JSON Viewer, Editor, Formatter and Validator that works completely on the client side.

Features

1. JSON Viewer & Editor
2. JSON Formatting with options.
3. JSON Validation with respect to readily available schemas (with option to bring your own schema)
4. PWA - You can install this directly from your browser.
5. Upload JSON from your system or load directly from URL
6. Download formatted JSON
7. Share JSON with peer to peer
8. Search & Replace words/expressions with support for case matching, regular expressions
9. Multi-cursor editing support
10. Editor theming support
11. Supports Plugins to extend Functionality.

How to create a JC Plugin

JSON Crew Plugin system is based on Web Components.

It gives the JSON data entered by the user as input to the web component and allows it to render the UI for plugin area. From here, you can transform the JSON and emit a custom event json-transform with transformed JSON as the…

View on GitHub

Add a PR to JSON Crew with your plugin details.

{
    name: "Remove NULL",
    description: "Remove nulls from JSON.",
    url: "https://unpkg.com/js-remove-json",
    tagName: "jc-remove-json",
},

The tag name has to be same as the web component name.

And you are done! 👏

Sample:

agneym / jc-transform-json

Transform JSON using JavaScript

Transform JSON - JSON Crew Plugin

To be used with JSON Crew

Installation

npm i @agney/jc-transform-json

Usage

<script type="module">
  import '@agney/jc-transform-json/jc-transform-json.js';
</script>

<jc-transform-json .data=${'{ "thing": "nothing" }'}>
</jc-transform-json>

Run Demo

npm i
npm start

Testing using karma

npm i
npm run test

Linting

npm run lint

View on GitHub