Developer README

Install

`pnpm`

Install pnpm globally:

npm i -g pnpm
pnpm i
pnpm setup

After setting up pnpm, close and reopen VSCode before continuing to the next step.

Nx

Install Nx globally:

pnpm add -g nx

(If you choose not to install Nx globally, you will have to prefix pnpm to all nx [...] commands in this README. For example, nx test lang-font-picker becomes pnpm nx test lang-font-picker.)

Developer tasks

Project-specific tasks are generally executed with Nx using

nx <target> <project> <...options>

where <target> is one of

build
lint
preview
serve
static-serve
test

and <project> is one of

headless-lfp
lang-font-picker
unstyled-lfp

Build projects

For a specific <project> (e.g., lang-font-picker):

nx build <project>

To run on all projects:

pnpm build

The build artifacts are stored in the output directory dist/.

Formatting and Linting

To check formatting on all projects:

pnpm format:check

To fix formatting on all projects:

pnpm format:write

To lint a specific <project> (e.g., lang-font-picker):

nx lint <project>

To lint all projects:

pnpm lint

Run tests

For a specific <project> (e.g., lang-font-picker):

nx test <project>

To run on all projects:

pnpm test

Visualize Nx projects

nx graph

To see the targets available for a specific <project> (e.g., lang-font-picker):

nx show project <project> --web

Create a new React project

Library

For a new project with a library (e.g. an internal utility or reusable component) named <library>:

nx g @nx/react:library --bundler=vite --component=false --directory=libs/<library> --unitTestRunner=vitest <library>

In the new project's folder, in package.json:

change the version line to match the version of the other projects;

and in project.json:

change the sourceRoot line to "sourceRoot": "{projectRoot}/src",;
delete the // targets line.

Add React content to a project

You can use Nx generators to jump-start a new application, component, hook, etc., such as with https://nx.dev/nx-api/react/generators/component. When first executing a nx generate ... or nx g ... command, use the --dry-run flag to see what files will be created or modified.

Versions and Releases

See https://nx.dev/features/manage-releases for how to use nx release to:

Update version number across all projects;
Auto-update the CHANGELOG;
Release the new version of all projects.

Development workflow

For now, development next-steps and goals can be added to and updated in the Development To-Do List. After the first release, move dev steps to issues which can be closed with targeted pull requests. For broader goals, consider coordinating work with a GitHub project.

sillsdev / lang-font-picker