@roots/bud-dashboard
Version:
bud.js core module
53 lines (52 loc) • 4.04 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@roots/bud-support/jsx-runtime";
import { relative } from 'node:path';
import Messages from '@roots/bud-dashboard/components/messages';
import View from '@roots/bud-dashboard/components/view';
import { useCompilationColor } from '@roots/bud-dashboard/hooks/useCompilationColor';
import { duration } from '@roots/bud-support/human-readable';
import { Box, Text, useEffect, useState } from '@roots/bud-support/ink';
import isNumber from '@roots/bud-support/isNumber';
import Assets from './assets.js';
import Entrypoints from './entrypoints.js';
const Compilation = ({ basedir, compact, compilation, displayAssets, displayEntrypoints, id, total, }) => {
const [current, setCurrent] = useState(compilation);
const compilationColor = useCompilationColor(compilation);
useEffect(() => {
if (!current) {
setCurrent(compilation);
return;
}
if (!compilation.hash)
return;
if (compilation.hash === current?.hash)
return;
setCurrent(compilation);
}, [current, compilation]);
return (_jsx(View, { borderColor: compilationColor, footer: _jsx(Footer, { compilation: current }), head: _jsx(Head, { basedir: basedir, compilation: current, id: id, total: total }), paddingY: compact ? 0 : 1, children: _jsxs(Box, { flexDirection: "column", gap: compact ? 0 : 1, children: [_jsx(Messages, { color: "red", messages: current?.errors }), _jsx(Messages, { color: "yellow", messages: current?.warnings }), current.errorsCount === 0 && (_jsxs(_Fragment, { children: [_jsx(Entrypoints, { compact: compact, compilation: current, displayEntrypoints: displayEntrypoints }), _jsx(Assets, { compact: compact, compilation: current, displayAssets: displayAssets })] }))] }) }));
};
const Head = ({ basedir, compilation, id, total }) => {
const color = useCompilationColor(compilation);
if (!compilation)
return _jsx(Text, { dimColor: true, children: "Loading" });
return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", overflow: "hidden", width: "100%", children: [_jsxs(Box, { flexDirection: "row", overflow: "hidden", children: [_jsx(Text, { color: color, wrap: "truncate", children: compilation.name?.split(`/`).pop() ?? `compilation` }), total && total > 1 && (_jsxs(Text, { dimColor: true, wrap: "truncate", children: [` `, "[", id, "/", total, "]"] })), compilation.hash && (_jsxs(Text, { dimColor: true, wrap: "truncate", children: [` `, "[", compilation.hash, "]"] }))] }), basedir && compilation.outputPath && (_jsxs(Text, { wrap: "truncate", children: ["./", relative(`${basedir}`, `${compilation.outputPath}`)] }))] }));
};
const Footer = ({ compilation }) => {
if (!compilation || !compilation?.assets)
return _jsx(Text, { dimColor: true, children: "..." });
const errorsCount = isNumber(compilation.errorsCount)
? compilation.errorsCount
: 0;
const formattedErrorCount = errorsCount > 1 ? `${errorsCount} errors` : `${errorsCount} error`;
const cachedModuleCount = compilation.modules?.filter(mod => mod?.cached)?.length ?? 0;
const totalModuleCount = compilation.modules?.filter(mod => mod && mod.hasOwnProperty(`cached`))
?.length ?? 0;
const formattedModuleCount = `${cachedModuleCount}/${totalModuleCount} modules cached`;
const formattedTime = compilation.time
? `${duration(compilation.time)} `
: ``;
if (errorsCount > 0) {
return (_jsx(Box, { flexDirection: "row", gap: 1, overflowX: "hidden", width: "100%", children: _jsx(Text, { wrap: "truncate-end", children: formattedErrorCount }) }));
}
return (_jsx(Box, { flexDirection: "row", gap: 1, overflowX: "hidden", width: "100%", children: _jsxs(Text, { wrap: "truncate-end", children: [formattedTime, _jsx(Text, { dimColor: true, children: `${totalModuleCount} modules` }), _jsx(Text, { dimColor: true, children: ` [${formattedModuleCount}]` })] }) }));
};
export default Compilation;