# presentation/renderers/definition.renderer.ts

> 48 lines of code and 6 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-definition-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.557cee7869b678f3e484eb0d63de4f67587a35b8ea9a4c810623dc6f30eb0060.generated.txt

## Definitions

- `renderDefinition` (lexical_declaration, line 25, exported)
- `focusLine` (lexical_declaration, line 16)
- `span` (lexical_declaration, line 17)
- `holder` (lexical_declaration, line 29, exported)
- `cited` (lexical_declaration, line 34, exported)
- `source` (lexical_declaration, line 39, exported)

## Uses

- [core/predicates/document.predicate.ts](https://banes-lab.com/source/tree/core/predicates/document.predicate.ts.md)
- [domain/converters/source.converter.ts](https://banes-lab.com/source/tree/domain/converters/source.converter.ts.md)
- [presentation/components/code.component.ts](https://banes-lab.com/source/tree/presentation/components/code.component.ts.md)
- [presentation/renderers/source.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/source.renderer.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import {
    CODE_LINE_ATTRIBUTE,
    CODE_LINE_CLASS,
    CODE_LINE_MARKED_CLASS,
} from "#configuration/constants/syntax.constants";
import { DEFINITION_CITED_LEAD, DEFINITION_MISSING, SOURCE_LOADING } from "#configuration/strings/walk.strings";
import { renderServedSource, renderSource } from "#presentation/renderers/source.renderer";
import type { DefinitionBlock } from "#types/block.types";
import { SOURCE_LOADED_EVENT } from "#configuration/constants/anatomy.constants";
import { TEXT_LANGUAGE } from "#configuration/constants/code.constants";
import { createElement } from "#core/factories/element.factory";
import { createPlainCodeBlock } from "#presentation/components/code.component";
import { definitionHref } from "#domain/converters/source.converter";
import { isStaticRender } from "#core/predicates/document.predicate";

const focusLine = function focusLine(holder: HTMLElement, line: number): void {
    const span = holder.querySelector<HTMLElement>(`.${CODE_LINE_CLASS}[${CODE_LINE_ATTRIBUTE}="${String(line)}"]`);
    if (span === null) {
        return;
    }
    span.classList.add(CODE_LINE_MARKED_CLASS);
    holder.scrollTop = span.offsetTop;
};

export const renderDefinition = function renderDefinition(block: DefinitionBlock): Element {
    if (isStaticRender()) {
        return renderServedSource(DEFINITION_CITED_LEAD, definitionHref(block.name, block.file), block.title);
    }
    const holder = createElement("div", {
        children: [createPlainCodeBlock(SOURCE_LOADING, block.title, TEXT_LANGUAGE)],
        className: "definition-holder",
    });
    void import("#domain/loaders/anatomy.loader").then((loader) => {
        const cited = loader.citedSource(block);
        if (cited === null) {
            holder.replaceChildren(createPlainCodeBlock(DEFINITION_MISSING, block.title, TEXT_LANGUAGE));
            return;
        }
        const source = renderSource(cited.block);
        source.addEventListener(
            SOURCE_LOADED_EVENT,
            () => {
                focusLine(holder, cited.location.line);
            },
            { once: true },
        );
        holder.replaceChildren(source);
    });
    return holder;
};
```