`@legumeinfo/taxon-symbology`

This repository contains a library for consistently coloring Legume taxa developed for the Legume Information System and other AgBio databases. The library is built using chroma.ts, a TypeScript reimplementation of chroma-js.

This readme is intended for developers. For user documentation, see the NPM readme.

Setup

Install dependencies:

npm i

Build

This project uses the TypeScript compiler to produce JavaScript that runs in modern browsers.

To build the JavaScript version of the library:

npm run build

To watch files and rebuild when the files are modified, run the following command in a separate shell:

npm run build:watch

All built files will be placed in the lib/ directory.

Testing

This project uses Jest for testing. See the modern-web.dev testing documentation for more information.

Tests can be run with the test script:

npm test

For local testing during development, the test:dev:watch command will run tests in development mode (with verbose errors) on every change to the source files:

npm test:watch

Dev Server

This project uses modern-web.dev's @web/dev-server for previewing the project without additional build steps. Web Dev Server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers. See modern-web.dev's Web Dev Server documentation for more information.

To run the dev server and open the project in a new browser tab:

npm run serve

There is a development HTML file located at index.html that can be viewed at http://localhost:8000/index.html. Note that this command will serve the code using development mode (with more verbose errors). To serve the code in production mode, use npm run serve:prod.

Linting

Linting of TypeScript files is provided by ESLint and TypeScript ESLint. The rules are mostly the recommended rules from ESLint, but some have been turned to be compatible with Prettier.

To lint the project run:

npm run lint

Formatting

Prettier is used for code formatting. Prettier has not been configured to run when committing files so be sure to run it before pushing any changes.

Bundling and minification

Bundling and minification is performed in a single step using Rollup. The follow commands will bundle and minify whatever code is already in the lib/ directory and place the bundled code in the file dist/taxon-symbology.min.js.

To bundle and minify the code, run:

npm run bundle

To automatically re-bundle when the code in the lib/ directory changes, run:

npm run bundle:watch

legumeinfo / taxon-symbology