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

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:

npm i @agney/jc-transform-json

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

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

npm i
npm start

npm i
npm run test

npm run lint