Contributing

This document contains details on the workflow used to develop the component if you want to improve it, and contribute.

If you have a question or a suggestion, you are encouraged to share it in the GitHub issues, after checking if it has already been mentioned.

ℹ️ Introduction

This repository contains multiple libraries (aka. "monorepo"), we use nx to manage the different libraries as whole.

We recommend to run the yarn commands directly from the root of the project to run them for all libraries at the same time, and make sure libraries dependencies are updating properly (e.g. display depends on utils).

You can also run the commands directly in the folder of a specific library if you just want to work with this one.

Checkout the scripts in each package.json to better understand which commands can be run in their respective folder.

📥️ Install for development

Clone the repository:

git clone https://github.com/Nanopublication/nanopub-js
cd nanopub-js

Install dependencies:

yarn

If you use VS Code, we highly recommend the lit-plugin extension, which enables some extremely useful features for lit-html templates.

🧑‍💻 Development

Start the component in development mode, it will automatically reload when the code is changed:

yarn dev

🛠️ Access the development page of nanopub-utils on http://localhost:3000

🧬 Access the development page of nanopub-display on http://localhost:3001

⚛️ Access the development page of display-react on http://localhost:3002 (to test @nanopub/display optimized for ReactJS)

📦️ Build

To build the JavaScript version of your component:

yarn build

This sample uses the TypeScript compiler and rollup to produce JavaScript that runs in modern browsers.

☑️ Testing

Tests can be run with the test script:

yarn test

Alternatively the test:prod command will run your tests in Lit's production mode.

This project uses modern-web.dev's @web/test-runner for testing. See the modern-web.dev testing documentation for more information.

✒️ Formatting

Prettier is used for code formatting:

yarn fmt

You can change the configuration in the package.json. Prettier has not been configured to run when committing files, but this can be added with Husky and pretty-quick. See the prettier.io site for instructions.

✅ Linting

To check if the project does not break any linting rule run:

yarn lint

Linting of TypeScript files is provided by ESLint and TypeScript ESLint. In addition, lit-analyzer is used to type-check and lint lit-html templates with the same engine and rules as lit-plugin.

📖 Documentation website

To build and run the documentation website, run:

yarn docs

To build the website for deployment, run:

yarn docs:build

🧹 Clean

To completely reset the caches of the different packages (requires to reinstall the workspace with yarn after reset):

yarn clean
yarn

📬️ Publish

@nanopub/display depends on @nanopub/utils, so you will probably want to publish the 2 if you made changes in utils that are used in display

The first time you might need to login with your NPM account:

npm login

To publish a new version of each package to NPM:

Edit the package.json files for each package to update them to the new version.

yarn bump --patch

# If you are using yarn v1, to prevent auto commit run:
yarn config set version-git-tag false

Run yarn publish from the root to build and publish all libraries:
```
yarn publish
```

You can also run publish from a specific package folder to only publish this package

🔗 More information

🔨 Built with Lit and N3.js

Vite TS starter: https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit-ts

Official lit TS starter: https://github.com/lit/lit-element-starter-ts

RDFJS components: https://github.com/zazuko/rdfjs-elements

Lit element React integration: https://github.com/lit/lit/tree/main/packages/labs/react