### Run @fluent/react React Example

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/example/README.md

Changes the directory to the example app, installs its dependencies, installs the locally built @fluent/react package from the tarball, and starts the development server for the example application.

```Shell
cd fluent-react/example/
npm install
npm install --no-save ../../fluent-react-*.tgz
pm start
```

--------------------------------

### Install Build Tools for fluent.js

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/example/README.md

Navigates to the root directory of the fluent.js project and installs the necessary build tools and dependencies using npm.

```Shell
cd fluent.js/
npm install
```

--------------------------------

### Installing All Fluent.js Dependencies with npm Workspaces

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Installs dependencies for all packages in the Fluent.js monorepo using npm workspaces.

```Shell
npm install
```

--------------------------------

### Installing @fluent/react with npm

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/README.md

Installs the @fluent/react library using the npm package manager. This command adds the package to the project's dependencies, making it available for use in the application.

```Shell
npm install @fluent/react
```

--------------------------------

### Installing @fluent/dom via npm

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dom/README.md

Provides the command to install the @fluent/dom package using the npm package manager.

```shell
npm install @fluent/dom
```

--------------------------------

### Build and Package @fluent/react

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/example/README.md

Executes the distribution build script for the @fluent/react package and then creates a local tarball (.tgz) of the built package using npm pack.

```Shell
npm run dist
npm pack -w fluent-react
```

--------------------------------

### Installing a Specific Fluent.js Package via npm

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Shows how to install an individual package from the Fluent.js monorepo using the npm package manager.

```Shell
npm install @fluent/react
```

--------------------------------

### Installing @fluent/dedent via npm

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dedent/README.md

Command to install the @fluent/dedent package using npm. This is the standard way to add the library as a dependency to a Node.js project or for front-end bundling.

```shell
npm install @fluent/dedent
```

--------------------------------

### Generating Fluent.js Documentation

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Generates documentation for the Fluent.js project, typically API docs or guides.

```Shell
npm run docs
```

--------------------------------

### Parameterized Term Example - Fluent Syntax

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Shows how to define and use a parameterized term (-thing) with a call expression, passing a variable ($article) to control its value based on variants.

```Fluent Syntax
# A parametrized Term with a Pattern as a value.
-thing = { $article ->
   *[definite] the thing
    [indefinite] a thing
}

this = This is { -thing(article: "indefinite") }.
```

--------------------------------

### Fluent Syntax 0.8 Parameterized Term Example (properties)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

Example showing a parameterized term ('-thing') defined with a select expression and how it is referenced with an argument ('article: "indefinite"') in another message ('this'). This syntax was introduced in Fluent Syntax 0.8.

```properties
# A parametrized Term with a Pattern as a value.
-thing = { $article ->
   *[definite] the thing
    [indefinite] a thing
}

this = This is { -thing(article: "indefinite") }.
```

--------------------------------

### Serializing Multiline Fluent Patterns (Inline Start)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

Shows a multiline Fluent pattern where the first line starts inline with the identifier, including a special character (*). This is the original layout that should be preserved.

```Fluent Properties
key = *Foo
    Bar
```

--------------------------------

### Serializing Multiline Fluent Patterns

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

Demonstrates the default serialization behavior of FluentSerializer for multiline patterns, where the pattern starts on a new line after the identifier.

```Fluent Properties
key =
    Foo
    Bar
```

--------------------------------

### Fluent Properties with Markup

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Example of a Fluent translation string containing simple HTML-like markup elements (`<confirm>`, `<cancel>`). These elements serve as placeholders for React components that will be interpolated during localization.

```properties
send-comment = <confirm>Send</confirm> or <cancel>go back</cancel>.
```

--------------------------------

### React JSX (Pre-0.6.0) - Example Before Migration

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows the fluent-react code structure used before version 0.6.0, where React elements intended for translation interpolation were passed as $-prefixed arguments, often wrapped in additional <Localized> components.

```jsx
// BEFORE (fluent-react 0.4.1)
<Localized
  id="send-comment"
  $confirmButton={
    <Localized id="send-comment-button">
      <button onClick={sendComment}>{"Send"}</button>
    </Localized>
  }
  $cancelLink={
    <Localized id="send-comment-cancel">
      <Link to="/">{"go back"}</Link>
    </Localized>
  }
>
  <p>{"{\u0020$confirmButton\u0020}\u0020or\u0020{\u0020$cancelLink}."}</p>
</Localized>
```

--------------------------------

### Serialize AST using fluent-syntax JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

This JavaScript function demonstrates how to use the `parse` and `serialize` functions from the fluent-syntax library to parse a Fluent string into an Abstract Syntax Tree (AST) and then serialize it back into a string. It serves as a simple example of a 'pretty-printing' operation.

```javascript
import { parse } from "../src/parser";
import { serialize } from "../src/serializer";

function pretty(text) {
  const ast = parse(text);
  return serialize(ast);
}
```

--------------------------------

### React JSX (Post-0.6.0) - Example After Migration

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows the updated fluent-react code structure for version 0.6.0+, where React elements are passed as regular props to the <Localized> component, corresponding to markup tags in the Fluent message.

```jsx
// AFTER (fluent-react 0.6.0)
<Localized
  id="send-comment"
  confirm={<button onClick={sendComment}></button>}
  cancel={<Link to="/"></Link>}
>
  <p>{"<confirm>Send</confirm> or <cancel>go back</cancel>."}</p>
</Localized>
```

--------------------------------

### Incorrect Serialization of Multiline Fluent Patterns

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

Illustrates an incorrect serialization of a multiline Fluent pattern that starts with a special character (*) on a new line, which results in a syntax error.

```Fluent Properties
# Syntax Error
key =
    *Foo
    Bar
```

--------------------------------

### Example of Buggy Fluent Translation (Properties)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows a Fluent translation string (.ftl) that attempts to place text content (invalid text content) inside a placeholder (<text-input>) corresponding to a void element. This is used to illustrate the issue addressed by the void element protection feature.

```properties
hello = Hello, <text-input>invalid text content</text-input>.
```

--------------------------------

### Using mapContextSync to Get Translation (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Demonstrates how to use `mapContextSync` with an iterable of `MessageContext` instances to find and format the best available translation for a given identifier and arguments. It falls back to the identifier if no translation is found.

```JavaScript
getString(id, args) {
    const bundle = mapContextSync(bundles, id);

    if (bundle === null) {
        return id;
    }

    const msg = bundle.getMessage(id);
    return bundle.format(msg, args);
}
```

--------------------------------

### Fluent Syntax 0.8 Multiline Pattern Indent Removal (properties)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

Example demonstrating how common indent is removed from indented lines in multiline patterns in Fluent Syntax 0.8. The two spaces of indent on the second line are removed from the final value.

```properties
multiline =
    This message has 2 spaces of indent
      on the second line of its value.
```

--------------------------------

### Migration: Localized Component Before attrs (fluent-react 0.4.1) (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Example showing how localized attributes were applied implicitly in fluent-react 0.4.1 without the `attrs` prop. All attributes found in the translation would be applied by default, which could lead to unexpected behavior.

```jsx
// BEFORE (fluent-react 0.4.1)
<Localized id="type-name">
    <input
        type="text"
        placeholder="Localizable placeholder"
        value={name}
        onChange={…}
    />
</Localized>
```

--------------------------------

### Migration: Localized Component After attrs (fluent-react 0.6.0) (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Example showing the required change in fluent-react 0.6.0+ to explicitly allow localized attributes using the `attrs={{attributeName: true}}` prop. This provides better control over which attributes are localized and prevents accidental overwrites.

```jsx
// AFTER (fluent-react 0.6.0)
<Localized id="type-name" attrs={{placeholder: true}}>
    <input
        type="text"
        placeholder="Localizable placeholder"
        value={name}
        onChange={…}
    />
</Localized>
```

--------------------------------

### Using FluentBundle for Basic Formatting - JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/README.md

Demonstrates how to initialize a FluentBundle, load an FTL resource, retrieve a message, and format it with variables. Requires the FluentBundle and FluentResource classes from the @fluent/bundle library. The code loads an FTL string, adds it to the bundle, retrieves the 'welcome' message, and formats its pattern using a 'name' variable.

```javascript
import { FluentBundle, FluentResource } from "@fluent/bundle";

let resource = new FluentResource(`
-brand-name = Foo 3000
welcome = Welcome, {$name}, to {-brand-name}!
`);

let bundle = new FluentBundle("en-US");
let errors = bundle.addResource(resource);
if (errors.length) {
  // Syntax errors are per-message and don't break the whole resource
}

let welcome = bundle.getMessage("welcome");
if (welcome.value) {
  bundle.formatPattern(welcome.value, { name: "Anna" });
  // → "Welcome, Anna, to Foo 3000!"
}
```

--------------------------------

### Building and Testing All Fluent.js Packages

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Runs the main script to clean, build, lint, test, and generate docs for all packages in the monorepo.

```Shell
npm run dist
```

--------------------------------

### Testing Fluent.js Project

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Runs the test suite for the Fluent.js project to verify functionality.

```Shell
npm run test
```

--------------------------------

### Changing Directory to Fluent.js Repository

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Command to navigate into the cloned Fluent.js repository directory after cloning.

```Shell
cd fluent.js
```

--------------------------------

### Run Fluent.js Performance Test (Output Raw JSON)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Executes the performance test and redirects the raw JSON output to a file named reference.js in the user's home directory.

```shell
./test.js --raw > ~/reference.js
```

--------------------------------

### Building Fluent.js Workspaces

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Builds all packages within the Fluent.js monorepo using npm workspaces.

```Shell
npm run build --workspaces
```

--------------------------------

### Cloning the Fluent.js Repository

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Provides the command to clone the Fluent.js Git repository from GitHub to your local machine.

```Shell
git clone https://github.com/projectfluent/fluent.js.git
```

--------------------------------

### Compare Fluent.js Performance with Reference

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Runs the performance test and compares the results statistically against a previously saved raw JSON reference file.

```shell
./test.js --compare ~/reference.js
```

--------------------------------

### Linting Fluent.js Project

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Runs the linting checks for the Fluent.js project to ensure code quality and style consistency.

```Shell
npm run lint
```

--------------------------------

### Using DOMLocalization for DOM Localization

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dom/README.md

Demonstrates how to initialize DOMLocalization with file paths and a bundle generator, connect it to the document root, translate existing elements, and dynamically update element attributes to trigger re-translation.

```javascript
import { DOMLocalization } from "@fluent/dom";

const l10n = new DOMLocalization(
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

l10n.connectRoot(document.documentElement);

l10n.translateRoots();

const h1 = document.querySelector("h1");

// Sets `data-l10n-id` and `data-l10n-args` which triggers
// the `MutationObserver` from `DOMLocalization` and translates the
// element.
l10n.setAttributes(h1, "welcome", { user: "Anna" });
```

--------------------------------

### Defining a Simple FTL Message

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Illustrates a basic message definition in FTL syntax, including a variable placeholder for dynamic content.

```FTL
hello-user = Hello, { $username }!
```

--------------------------------

### Format FTL File with format.mjs (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Formats an FTL file specified as a command-line argument using the format.mjs utility, showing how to process content from a file.

```shell
./format.mjs file.ftl
```

--------------------------------

### Run Fluent.js Performance Test (Default)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Executes the performance test script with default options (Node.js engine, sample size 30).

```shell
./test.js
```

--------------------------------

### Cleaning Fluent.js Project

Source: https://github.com/projectfluent/fluent.js/blob/main/README.md

Runs the clean script for the Fluent.js project, typically removing build artifacts.

```Shell
npm run clean
```

--------------------------------

### Fuzz Test FTL String with fuzz.mjs (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Runs a fuzz test on a simple FTL string piped directly into the fuzz.mjs utility, demonstrating basic usage for testing inline content.

```shell
echo "foo = Foo" | ./fuzz.mjs
```

--------------------------------

### Fuzz Test FTL File with Repetitions (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Runs a fuzz test on an FTL file using the fuzz.mjs utility, specifying the number of repetitions (1000) via the -i option.

```shell
./fuzz.mjs -i 1000 file.ftl
```

--------------------------------

### Parse FTL File with parse.mjs (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Parses an FTL file specified as a command-line argument using the parse.mjs utility, showing how to process content from a file.

```shell
./parse.mjs file.ftl
```

--------------------------------

### Format FTL String with format.mjs (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Formats a simple FTL string piped directly into the format.mjs utility, demonstrating basic usage for formatting inline content.

```shell
echo "foo = Foo" | ./format.mjs
```

--------------------------------

### Run Fluent.js Performance Test (Custom Sample Size & Progress)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Runs the performance test with a larger sample size (1000) and displays progress during execution.

```shell
./test.js --sample 1000 --progress
```

--------------------------------

### Format FTL File with External Args (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Formats an FTL file using the format.mjs utility, providing external arguments from a specified JSON file (data.json) via the -e option.

```shell
./format.mjs -e data.json file.ftl
```

--------------------------------

### Run Fluent.js Performance Test (Custom Command)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Executes the performance test by spawning a custom command via child_process.exec, allowing for specific engine or script execution.

```shell
./test.js "~/src/jsshell/js benchmark.jsshell.js"
```

--------------------------------

### Instantiating ReactLocalization with Custom Markup Parser in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows how to create a ReactLocalization instance and provide a custom markup parsing function as the second argument.

```JavaScript
let l10n = new ReactLocalization(bundlesIterable, parseMarkup);
```

--------------------------------

### Run Fluent.js Performance Test (JSShell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/perf/README.md

Executes the performance test script using the SpiderMonkey JSShell engine instead of the default Node.js.

```shell
./test.js --engine jsshell
```

--------------------------------

### Parsing Fluent Syntax with @fluent/syntax in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/README.md

This snippet demonstrates how to use the `parse` function from `@fluent/syntax` to parse a Fluent syntax string into a `Resource` object. It imports the necessary functions and asserts the type of the result.

```javascript
import { parse, Resource } from "@fluent/syntax";

const res = parse(`
-brand-name = Foo 3000
welcome = Welcome, {$name}, to {-brand-name}!
`);

assert(res instanceof Resource);
```

--------------------------------

### Using Localization for Imperative Message Formatting

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dom/README.md

Shows how to use the Localization class for formatting messages directly within JavaScript code. It requires a document reference and a bundle generator function, demonstrating how to asynchronously format a message value.

```javascript
import { Localization } from "@fluent/dom";

function* generateBundles() {
  // Some lazy logic for yielding FluentBundles.
  yield* [bundle1, bundle2];
}

const l10n = new Localization(
  document,
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

async function main() {
  const msg = await l10n.formatValue("welcome", { name: "Anna" });
  // → 'Welcome, Anna!'
}
```

--------------------------------

### Recommended Message Access (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Shows the new, recommended way to access raw messages using the `MessageContext.getMessage` method, replacing direct access to the internal `messages` map.

```JavaScript
const msg = bundle.getMessage(id);
const txt = bundle.format(msg);
```

--------------------------------

### Handling formatPattern Errors with Try-Catch (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Shows how to use a try-catch block to handle errors that occur when calling formatPattern without providing an errors array. The method will throw on the first encountered error.

```JavaScript
try {
  bundle.formatPattern(message.value, args);
} catch (err) {
  // Handle the error yourself.
}
```

--------------------------------

### Parse FTL String with parse.mjs (Shell)

Source: https://github.com/projectfluent/fluent.js/blob/main/tools/README.md

Parses a simple FTL string piped directly into the parse.mjs utility, demonstrating basic usage for parsing inline content.

```shell
echo "foo = Foo" | ./parse.mjs
```

--------------------------------

### Negotiating Languages with Default Strategy (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-langneg/README.md

This snippet demonstrates the basic usage of the `negotiateLanguages` function from `@fluent/langneg`. It takes the user's requested locales (from `navigator.languages`), a list of available locales, and an options object (here specifying a `defaultLocale`). It returns an array of supported locales based on the default 'filtering' strategy.

```javascript
import { negotiateLanguages } from "@fluent/langneg";

const supportedLocales = negotiateLanguages(
  navigator.languages, // requested locales
  ["de", "en-US", "pl"], // available locales
  { defaultLocale: "en-US" }
);
```

--------------------------------

### Using useLocalization Hook in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates how to use the useLocalization hook to access the ReactLocalization instance and format a string imperatively using the getString API.

```JavaScript
let { l10n } = useLocalization();
alert(l10n.getString("hello"));
```

--------------------------------

### New LocalizationProvider API in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Illustrates the updated method for configuring LocalizationProvider, requiring an instance of ReactLocalization to be passed via the 'l10n' prop.

```JSX
// The new API
let l10n = new ReactLocalization(bundlesIterable);
<LocalizationProvider l10n={l10n}>
  <App />
</LocalizationProvider>;
```

--------------------------------

### Old LocalizationProvider API in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows the previous way of configuring the LocalizationProvider component by passing a bundles iterable directly as a prop.

```JSX
// The old API
<LocalizationProvider bundles={bundlesIterable}>
  <App />
</LocalizationProvider>
```

--------------------------------

### Negotiating Languages with Specific Strategy (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-langneg/README.md

This snippet shows how to use the `negotiateLanguages` function with a specific negotiation strategy. It takes requested and available locales and an options object where the `strategy` property is set to "matching". This overrides the default 'filtering' strategy.

```javascript
let supported = negotiateLanguages(requested, available, {
  strategy: "matching"
});
```

--------------------------------

### Localized Component with Markup Props (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates how to use the `<Localized>` component to interpolate React elements (a button and a Link) into a translation string containing corresponding markup tags (`<confirm>`, `<cancel>`). The elements are passed as props matching the tag names.

```jsx
<Localized
  id="send-comment"
  confirm={<button onClick={sendComment}></button>}
  cancel={<Link to="/"></Link>}
>
  <p>{"<confirm>Send</confirm> or <cancel>go back</cancel>."}</p>
</Localized>
```

--------------------------------

### Comparing @fluent/dedent Output with String Literal in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dedent/README.md

Compares the output of the `ftl` tag with a standard string literal to show that the tag correctly dedents the content, removing leading and trailing blank lines and common indentation.

```javascript
import ftl from "@fluent/dedent";

let message1 = "hello = Hello, world!";
let message2 = ftl`
    hello = Hello, world!
    `;

assert(message1 === message2);
```

--------------------------------

### Formatting Translations using Fluent.js Sequence JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-sequence/README.md

This JavaScript function demonstrates how to use mapBundleSync from @fluent/sequence to find the appropriate FluentBundle for a given identifier within an iterable sequence of bundles and format the corresponding message. It takes an identifier and optional arguments, searches the bundles, and returns the formatted string or the original identifier if no bundle contains the message.

```JavaScript
import { mapBundleSync } from "@fluent/sequence";

function formatString(id, args) {
  // contexts is a negotiated iterable of FluentBundle instances.
  let ctx = mapBundleSync(contexts, id);

  if (ctx === null) {
    return id;
  }

  let msg = ctx.getMessage(id);
  return ctx.format(msg, args);
}
```

--------------------------------

### Formatting a FluentBundle Message Value (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Demonstrates how to retrieve a message from a FluentBundle using getMessage and then format its value using the new formatPattern method. It checks if the message value exists before attempting to format.

```JavaScript
let message = bundle.getMessage("hello");
if (message.value) {
  bundle.formatPattern(message.value, { userName: "Alex" });
}
```

--------------------------------

### Multiline Pattern Indentation - Fluent Syntax

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Demonstrates how common indentation is removed from indented lines in multiline patterns according to Fluent Syntax 0.8.

```Fluent Syntax
multiline =
    This message has 2 spaces of indent
      on the second line of its value.
```

--------------------------------

### Parsing Fluent String to Resource - JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Demonstrates how to parse a string containing Fluent translations into a FluentResource object using the static fromString method and then add it to a FluentBundle instance using the addResource method. This is useful for caching parsed resources.

```javascript
let resource = FluentResource.fromString(text);
bundle.addResource(resource);
```

--------------------------------

### Including Leading/Trailing Newlines with @fluent/dedent in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dedent/README.md

Shows how to preserve leading or trailing newlines in the output by adding extra blank lines within the `ftl` template literal. This allows for more control over the final string format.

```javascript
import ftl from "@fluent/dedent";

let message = ftl`

    hello = Hello, world!

    `;

assert(message === "\nhello = Hello, world!\n");
```

--------------------------------

### Fluent Properties (Post-0.6.0) - Using Markup Tags

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Defines the Fluent message using markup tags (<confirm>, <cancel>) instead of $-prefixed arguments. This is the recommended approach in fluent-react 0.6.0+ for interpolating elements.

```properties
send-comment = <confirm>Send</confirm> or <cancel>go back</cancel>.
```

--------------------------------

### Handling Insufficient Indentation with @fluent/dedent in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dedent/README.md

Illustrates what happens when lines within the template literal have insufficient indentation relative to the closing backtick. Shows that a RangeError is thrown to indicate the issue.

```javascript
import ftl from "@fluent/dedent";

let messages = ftl`
    hello = Hello, world!
  welcome = Welcome, {$userName}!
    `;

// → RangeError("Insufficient indentation in line 2.")
```

--------------------------------

### Basic Usage of @fluent/dedent Tag in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-dedent/README.md

Demonstrates the basic usage of the `ftl` template literal tag to define Fluent messages within JavaScript code. The tag automatically removes common indentation based on the closing backtick's position.

```javascript
import ftl from "@fluent/dedent";

let messages = ftl`
    hello = Hello, world!
    welcome = Welcome, {$userName}!
    `;
```

--------------------------------

### Collecting formatPattern Errors with Errors Array (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Illustrates how to pass an errors array as the third argument to formatPattern. Errors encountered during formatting will be appended to this array instead of throwing, allowing for collection and reporting of multiple errors.

```JavaScript
let errorrs = [];
bundle.formatPattern(message.value, args, errors);
for (let error of errors) {
  // Report errors.
}
```

--------------------------------

### Deprecated Message Access (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Illustrates the old, deprecated way of accessing raw messages directly from the `MessageContext.messages` map before the introduction of dedicated `hasMessage` and `getMessage` methods.

```JavaScript
const msg = bundle.messages.get(id);
const txt = bundle.format(msg);
```

--------------------------------

### Fluent Properties (Pre-0.6.0) - Using $ Arguments

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Defines Fluent messages using $-prefixed arguments to represent elements. This approach is deprecated in fluent-react 0.6.0+ and will not work as intended.

```properties
send-comment-confirm = Send
send-comment-cancel = go back
send-comment = { $confirmButton } or { $cancelLink }.
```

--------------------------------

### Formatting String with mapContextAsync in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

This asynchronous function demonstrates how to use `mapContextAsync` to find the appropriate `MessageContext` (bundle) for a given message `id` within an iterable of bundles. It retrieves the message from the found bundle and formats it with provided arguments. If no bundle is found, it returns the original `id`. Requires `mapContextAsync` and an iterable of `MessageContext` instances.

```js
async formatString(id, args) {
    const bundle = await mapContextAsync(bundles, id);

    if (bundle === null) {
        return id;
    }

    const msg = bundle.getMessage(id);
    return bundle.format(msg, args);
}
```

--------------------------------

### Using Localized Component with Void Element (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates the use of the <Localized> React component with a void element like <input>. The surrounding text explains how the library prevents invalid translated text content from being inserted into such elements.

```jsx
<Localized id="hello" text-input={<input type="text" />}>
  <div />
</Localized>
```

--------------------------------

### New Localized Component Element Passing in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates the updated way to pass elements for React Overlays logic to the Localized component using the 'elems' prop, which accepts a dictionary of element names and components.

```JSX
// The new API
<Localized id="privacy-policy" elems={{ a: <a href="…" /> }}>
  {"Read the <a>Privacy Policy</a>."}
</Localized>
```

--------------------------------

### React JSX (Pre-0.6.0) - Passing Elements as $ Arguments

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates the deprecated practice in fluent-react (pre-0.6.0) of passing nested <Localized> components as $-prefixed arguments to the parent <Localized> component. This pattern is no longer supported in 0.6.0+.

```jsx
// Bad practice. This won't work in fluent-react 0.6.0.
<Localized
  id="send-comment"
  $confirmButton={
    <Localized id="send-comment-confirm">
      <button onClick={sendComment}>{"Send"}</button>
    </Localized>
  }
  $cancelLink={
    <Localized id="send-comment-cancel">
      <Link to="/">{"go back"}</Link>
    </Localized>
  }
>
  <p>{"{\u0020$confirmButton\u0020}\u0020or\u0020{\u0020$cancelLink}."}</p>
</Localized>
```

--------------------------------

### Rendered Output with Interpolated Elements (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows the expected HTML output after the `<Localized>` component processes the translation and interpolates the provided React elements into the corresponding markup positions within the translated text.

```jsx
<p>
  <button onClick={sendComment}>Send</button> or <Link to="/">go back</Link>.
</p>
```

--------------------------------

### Old Localized Component Variable Passing in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Demonstrates the previous method of passing variables to the Localized component using dollar-prefixed props.

```JSX
// The old API
<Localized id="hello" $userName="Alice">
  {"Hello, {$userName}!"}
</Localized>
```

--------------------------------

### Wrapping Iterator with CachedIterable (JavaScript)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

Shows how to wrap a generator function or iterator with `CachedIterable` to allow multiple passes over the `MessageContext` instances without exhausting the iterator, useful when using methods like `mapContextSync` repeatedly.

```JavaScript
function *generateMessages() {
    // Some lazy logic for yielding MessageContexts.
    yield *[bundle1, bundle2];
}

const bundles = new CachedIterable(generateMessages());
const bundle = mapContextSync(bundles, id);
```

--------------------------------

### Old Localized Component Element Passing in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Illustrates the previous method of passing elements for React Overlays logic to the Localized component using regular props.

```JSX
// The old API
<Localized id="privacy-policy" a={<a href="…" />}>
  {"Read the <a>Privacy Policy</a>."}
</Localized>
```

--------------------------------

### New Localized Component Variable Passing in JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Shows the updated way to pass variables to the Localized component using the 'vars' prop, which accepts a dictionary of variable names and values.

```JSX
// The new API
<Localized id="hello" vars={{ userName: "Alice" }}>
  {"Hello, {$userName}!"}
</Localized>
```

--------------------------------

### Adding FTL Messages with ftl Template Literal in JavaScript

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-bundle/CHANGELOG.md

This snippet shows how to use the `ftl` template literal tag to define FTL (Fluent Translation List) messages directly within JavaScript code. The tag automatically strips common indentation, making the FTL syntax readable within indented code blocks. It's used here to add messages to a `bundle`.

```js
bundle.addMessages(ftl`
    foo = Foo
    bar = Bar
`);
```

--------------------------------

### Localized Component with attrs Prop (JSX)

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

Illustrates the use of the `attrs` prop on the `<Localized>` component to explicitly allow specific attributes (like `placeholder`) from the translation to be applied to the wrapped element (`<input>`). This is required in fluent-react 0.6.0+ for security and control.

```jsx
<Localized id="type-name" attrs={{placeholder: true}}>
    <input
        type="text"
        placeholder="Localizable placeholder"
        value={name}
        onChange={…}
    />
</Localized>
```

--------------------------------

### Using Localized Component with String Fallback - JSX

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-react/CHANGELOG.md

This snippet demonstrates how to use the <Localized> component with a simple string literal as a fallback. Previously, the fallback string needed to be wrapped in an HTML element like <span>, but this is no longer required.

```JSX
<Localized id="message">
    String fallback.
</Localized>
```

--------------------------------

### Fluent Syntax 0.7 Select Expression Indentation

Source: https://github.com/projectfluent/fluent.js/blob/main/fluent-syntax/CHANGELOG.md

This snippet demonstrates the relaxed indentation requirement for non-text elements in Fluent Syntax 0.7, specifically showing a select expression where the closing brace is not indented.

```Fluent Syntax
emails = { $unread_email_count ->
    [one] You have one unread email.
   *[other] You have { $unread_email_count } unread emails.
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.