<fleshy-jsoneditor>

LitElement custom element that wraps josdejong/jsoneditor.

It is an updated version of juicy-jsoneditor

This webcomponent follows the open-wc recommendation.

Demo

Check it live!

Installation

npm i fleshy-jsoneditor

Usage

<script type="module">
  import 'fleshy-jsoneditor/fleshy-jsoneditor.js';
</script>

<fleshy-jsoneditor></fleshy-jsoneditor>

Development

It uses josdejong/jsoneditor as devDependency, as jsoneditor does not export a ES module. So, for build, it is necessary primary to use rollup and generate jsoneditor files with ES module exports. It also copy some style and svg files, as it needs them to render the editor.

To update the files (located in /lib folder), run

npm run build-deps

Linting with ESLint, Prettier, and Types

To scan the project for linting errors, run

npm run lint

You can lint with ESLint and Prettier individually as well

npm run lint:eslint

npm run lint:prettier

To automatically fix many linting errors, run

npm run format

You can format using ESLint and Prettier individually as well

npm run format:eslint

npm run format:prettier

Testing with Karma

To run the suite of karma tests, run

npm run test

To run the tests in watch mode (for TDD, for example), run

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Local Demo with es-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html

Release

To release a new version, once all PRs were merged into master, it is just necessary to execute:

npm run release

This script will generate new tag, update version in package.json and update changelog file with latest changes.

Once finish, it is just necessary to push the new commit to master. You can do it manually (but remember to push the tags also) or use the script

npm run push

Once the origin master branch is updated, a GitHubAction will take care of it. It will deploy the storybook in Netlify and publish the package in NPM.