presentation/renderers/source.renderer.ts

presentation/renderers/source.renderer.ts is a file in Bane's Lab Site. 60 lines of code and 10 definitions.

import { LANGUAGE_ATTRIBUTE, TEXT_LANGUAGE } from "#configuration/constants/code.constants";
import { SOURCE_LOADING, SOURCE_MISSING, SOURCE_SERVED_LEAD } from "#configuration/strings/walk.strings";
import type { SourceBody, SourceNodeLink } from "#types/page.types";
import { enableSourceNavigation, markReferences } from "#presentation/components/source.component";
import { loadReferences, loadSource } from "#core/loaders/walk.loader";
import { NO_CLASS } from "#configuration/constants/element.constants";
import { SOURCE_LOADED_EVENT } from "#configuration/constants/anatomy.constants";
import type { SourceBlock } from "#types/block.types";
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 { sourceLocation } from "#core/assets/walk.assets";

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" });
};

const nodeLinkOf = function nodeLinkOf(link: SourceNodeLink): HTMLAnchorElement {
    return createElement("a", { attributes: { href: link.path }, text: link.label });
};

export const renderSourceBody = function renderSourceBody(body: SourceBody, text: string | null): Element {
    const { subject } = body;
    const language = { [LANGUAGE_ATTRIBUTE]: subject.language ?? TEXT_LANGUAGE };
    const block = (source: string): Element =>
        createElement("pre", { attributes: language, children: [createElement("code", { text: source })], className: "code-block code-plain" });
    const code = text === null ? [] : [block(text)];
    const children = body.children.map((link) => createElement("li", { children: [nodeLinkOf(link)] }));
    return createElement("article", {
        children: [
            createElement("nav", { children: [nodeLinkOf(body.parent)] }),
            createElement("h1", { text: subject.name }),
            createElement("p", { text: subject.description }),
            ...code,
            ...(children.length === 0 ? [] : [createElement("ul", { children })]),
        ],
        className: "source-page",
    });
};

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 Promise.all([loadSource(block.source), loadReferences(block.references)]).then(([text, references]) => {
        const code = createPlainCodeBlock(
            text ?? SOURCE_MISSING,
            block.title,
            text === null ? TEXT_LANGUAGE : block.language,
        );
        if (text !== null) {
            markReferences(code, references);
        }
        holder.replaceChildren(code);
        holder.dispatchEvent(new Event(SOURCE_LOADED_EVENT, { bubbles: true }));
    });
    return holder;
};