# core/formatters/viewport.formatter.ts

> 38 lines of code and 10 definitions.

Tree: Project Scripts
Language: typescript
Layer: processing
Canonical: https://banes-lab.com/anatomy/scripts#file-scripts-core-formatters-viewport-formatter-ts
Source text: https://banes-lab.com/source/scripts/core/formatters/viewport.formatter.ts.txt

Listed in [core/formatters](https://banes-lab.com/api/source/scripts/core/formatters.md), after [core/formatters/snapshot.formatter.ts](https://banes-lab.com/source/scripts/core/formatters/snapshot.formatter.ts.md).

## Definitions

- `resultLines` (lexical_declaration, line 13, exported)
- `reportJson` (lexical_declaration, line 23, exported)
- `FINDING_KEYS` (lexical_declaration, line 11)
- `{ audit }` (lexical_declaration, line 14, exported)
- `sections` (lexical_declaration, line 15, exported)
- `sideways` (lexical_declaration, line 18, exported)
- `body` (lexical_declaration, line 19, exported)
- `scrollExpression` (lexical_declaration, line 27, exported)
- `auditExpression` (lexical_declaration, line 34, exported)
- `helpers` (lexical_declaration, line 39, exported)

## Contained in

- [core/formatters](https://banes-lab.com/anatomy/scripts/folder-scripts-core-formatters.md)

## Uses

- [configuration/strings/viewport.strings.ts](https://banes-lab.com/source/scripts/configuration/strings/viewport.strings.ts.md)

## Used by

- [core/coordinators/viewport.coordinator.ts](https://banes-lab.com/source/scripts/core/coordinators/viewport.coordinator.ts.md)
- [core/persistence/viewport.persistence.ts](https://banes-lab.com/source/scripts/core/persistence/viewport.persistence.ts.md)

## Linked from

- [configuration/strings](https://banes-lab.com/anatomy/scripts/folder-scripts-configuration-strings.md)
- [core/coordinators](https://banes-lab.com/anatomy/scripts/folder-scripts-core-coordinators.md)
- [core/persistence](https://banes-lab.com/anatomy/scripts/folder-scripts-core-persistence.md)

## Source

```typescript
import {
    CLEAN_LINE,
    FINDING_LABELS,
    findingHeading,
    findingLine,
    routeHeading,
    sidewaysLine,
} from "#configuration/strings/viewport.strings";
import type { ProbePage, ViewportAudit, ViewportProbe, ViewportResult, ViewportRules } from "#types/viewport.types";

const FINDING_KEYS = ["overflow", "inputs", "text", "targets", "clipped"] as const;

export const resultLines = function resultLines(result: ViewportResult): string {
    const { audit } = result;
    const sections = FINDING_KEYS.filter((key) => audit[key].length > 0).map(
        (key) => findingHeading(FINDING_LABELS[key], audit[key].length) + audit[key].map(findingLine).join(""),
    );
    const sideways = audit.scrollsSideways ? sidewaysLine : "";
    const body = sideways + sections.join("");
    return routeHeading(result.route, audit.viewport) + (body.length === 0 ? CLEAN_LINE : body);
};

export const reportJson = function reportJson(results: readonly ViewportResult[]): string {
    return `${JSON.stringify(results, null, 4)}\n`;
};

export const scrollExpression = function scrollExpression(
    scroll: (page: ProbePage, rules: ViewportRules) => Promise<number>,
    rules: ViewportRules,
): string {
    return `(${String(scroll)})(window, ${JSON.stringify(rules)})`;
};

export const auditExpression = function auditExpression(
    audit: (page: ProbePage, rules: ViewportRules, probe: ViewportProbe) => ViewportAudit,
    rules: ViewportRules,
    probe: ViewportProbe,
): string {
    const helpers = Object.entries(probe).map(
        ([name, helper]: readonly [string, unknown]) => `${name}: ${String(helper)}`,
    );
    return `(${String(audit)})(window, ${JSON.stringify(rules)}, { ${helpers.join(", ")} })`;
};
```