CONTRIBUTING.md

Contributing to Foxglove Studio

Supported development environments: Linux, Windows, macOS

Dependencies:

• Node.js v16.10+
• Git LFS

Getting started

1. Clone repo
2. Run git lfs pull to ensure Git LFS objects are up to date
3. Run corepack enable and yarn install
   • If you still get errors about corepack after running corepack enable, try uninstalling and reinstalling Node.js. Ensure that Yarn is not separately installed from another source, but is installed via corepack.
4. Launch the development environment:

# To launch the desktop app (run both scripts concurrently):
$ yarn desktop:serve        # start webpack
$ yarn desktop:start        # launch electron

# To launch the browser app:
$ yarn web:serve

# To launch the storybook:
$ yarn storybook

# Advanced usage: running webpack and electron on different computers (or VMs) on the same network
$ yarn desktop:serve --host 192.168.xxx.yyy         # the address where electron can reach the webpack dev server
$ yarn dlx [email protected] .webpack # launch the version of electron for the current computer's platform

Other useful commands

$ yarn run          # list available commands
$ yarn lint         # lint all files
$ yarn test         # run all tests
$ yarn test:watch   # run tests on changed files

Localization

At this time, first-class support for Foxglove Studio is provided in English only. Localization into other languages is available on a best-effort basis, with translations provided by community volunteers. Current community supported-languages are:

• Chinese
• Japanese

Translation support is implemented using react-i18next.

Add translations

• We value having high-quality translations over having all translations for a given component or view. Though every PR must have up-to-date English translations, updating other languages is completely optional.
• If you update an English translation and cannot provide updated non-English translations, delete the non-English versions in that PR. Optionally, open follow-up PRs to add accurate non-English translations.

Add translations to the i18n directory

The i18n directory contains translated (localized) strings for all languages supported by Foxglove Studio.

Translated strings are organized into namespaces — e.g. i18n/[language]/appSettings.ts contains translations for the app's Settings tab.

Use useTranslation() and t() to access translated strings

1. Call the useTranslation(namespace) hook inside a React component to access strings in a given namespace. The hook returns a function called t.

2. Call the t function to get the translation for a string.

For example:

const { t } = useTranslation("myComponent");
return <p>{t("hello")}</p>;

Add localization support to a component

1. Move English strings out of the component code, and into the i18n folder. Use a new namespace for logical groups of components or app views.

2. Replace strings hard-coded in source code with calls to the t() function. Use camelCase for new localization keys.

Before	After
function MyComponent() { return <p>Hello!</p>; }	function MyComponent() { const { t } = useTranslation("myComponent"); return <p>{t("hello")}</p>; } // i18n/en/myComponent.ts export const myComponent = { hello: "Hello!", };

Complete example

// MyComponent.ts

import { useTranslation } from "react-i18next";

function MyComponent(props: Props): JSX.Element {
  const { t } = useTranslation("myComponent");

  return <p>{t("hello")}</p>;
}

// i18n/en/myComponent.ts
export const myComponent = {
  hello: "Hello!",
};

// i18n/en/index.ts
export * from "./myComponent";

// i18n/zh/myComponent.ts
export const myComponent: Partial<TypeOptions["resources"]["myComponent"]> = {
  hello: "你好！",
};

// i18n/zh/index.ts
export * from "./myComponent";

Result:

English	Chinese
<p>Hello!</p>	<p>你好！</p>