# presentation/renderers/source.renderer.ts

> 38 lines of code and 5 definitions.

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

## Definitions

- `renderServedSource` (lexical_declaration, line 15, exported)
- `renderSource` (lexical_declaration, line 19, exported)
- `NO_CLASS` (lexical_declaration, line 13)
- `holder` (lexical_declaration, line 23, exported)
- `code` (lexical_declaration, line 29, exported)

## Uses

- [core/assets/walk.assets.ts](https://banes-lab.com/source/tree/core/assets/walk.assets.ts.md)
- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [core/loaders/walk.loader.ts](https://banes-lab.com/source/tree/core/loaders/walk.loader.ts.md)
- [core/predicates/document.predicate.ts](https://banes-lab.com/source/tree/core/predicates/document.predicate.ts.md)
- [presentation/components/link.component.ts](https://banes-lab.com/source/tree/presentation/components/link.component.ts.md)
- [presentation/components/source.component.ts](https://banes-lab.com/source/tree/presentation/components/source.component.ts.md)

## Used by

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

## Source

```typescript
import { SOURCE_LOADING, SOURCE_MISSING, SOURCE_SERVED_LEAD } from "#configuration/strings/walk.strings";
import { enableSourceNavigation, markReferences } from "#presentation/components/source.component";
import { SOURCE_LOADED_EVENT } from "#configuration/constants/anatomy.constants";
import type { SourceBlock } from "#types/block.types";
import { TEXT_LANGUAGE } from "#configuration/constants/code.constants";
import { createElement } from "#core/factories/element.factory";
import { createLink } from "#presentation/components/link.component";
import { createPlainCodeBlock } from "#presentation/components/code.component";
import { isStaticRender } from "#core/predicates/document.predicate";
import { loadSource } from "#core/loaders/walk.loader";
import { sourceLocation } from "#assets/walk.assets";

const NO_CLASS = "";

export const renderServedSource = function renderServedSource(lead: string, href: string, label: string): Element {
    return createElement("p", { children: [lead, createLink(href, NO_CLASS, [label])], className: "source-served" });
};

export const renderSource = function renderSource(block: SourceBlock): Element {
    if (isStaticRender()) {
        return renderServedSource(SOURCE_SERVED_LEAD, sourceLocation(block.source), block.title);
    }
    const holder = createElement("div", {
        children: [createPlainCodeBlock(SOURCE_LOADING, block.title, TEXT_LANGUAGE)],
        className: "source-holder",
    });
    enableSourceNavigation(holder);
    void loadSource(block.source).then((text) => {
        const code = createPlainCodeBlock(
            text ?? SOURCE_MISSING,
            block.title,
            text === null ? TEXT_LANGUAGE : block.language,
        );
        if (text !== null) {
            markReferences(code, block.path);
        }
        holder.replaceChildren(code);
        holder.dispatchEvent(new Event(SOURCE_LOADED_EVENT, { bubbles: true }));
    });
    return holder;
};
```