PackageBox

tcmts.share.PackageBox · #66gwpcyp · term · runs on the server

uses tcmts.share.shareNow, which uses process

A package, on its manifest's page: what it is and its releases, the commands it runs, what it exports, and the apps, files and end-to-end tests it ships, each a link to what it names.

import { at, codeHref, namesNow, packageFileName, shareNow } from "#codebase/tcmts/share";
import type { PackageInfo } from "#codebase/tcmts/share";
import type { ReactNode } from "react";

export function PackageBox({ pkg }: { pkg: PackageInfo }) {
  const s = shareNow();
  const rows = namesNow(s);
  const has = (n: string) => rows.some((r) => r.path === n || r.path.startsWith(`${n}.`));
  const link = (n: string, label = n) =>
    n && has(n) ? (
      <a className="mono" href={codeHref(n)}>
        {label}
      </a>
    ) : (
      <span className="mono">{label}</span>
    );
  const releases = s.cb.store
    .releases()
    .filter((r) => r.package === pkg.name)
    .sort((a, b) => b.ts - a.ts);
  const fields: { k: string; v: ReactNode }[] = [
    {
      k: "Namespace",
      v: pkg.namespace ? link(pkg.namespace) : <span className="muted">the whole codebase</span>,
    },
    {
      k: "Releases",
      v: releases.length ? (
        releases.slice(0, 5).map((r, i) => (
          <span key={r.version}>
            {i > 0 && ", "}
            <a href={at(`/releases#${r.package}@${r.version}`)}>{r.version}</a>
          </span>
        ))
      ) : (
        <span className="muted">
          none yet: <code>tcm release {pkg.name}</code>
        </span>
      ),
    },
  ];
  const bins = Object.entries(pkg.bin);
  if (bins.length)
    fields.push({
      k: "Commands",
      v: bins.map(([c, n]) => (
        <div key={c}>
          <code>{c}</code> <span className="muted">runs</span> {link(n)}
        </div>
      )),
    });
  for (const [sub, names] of Object.entries(pkg.exports))
    fields.push({
      k: `Exports ${sub === "." ? pkg.name : `${pkg.name}${sub.replace(/^\./, "")}`}`,
      v: names.map((n) => <div key={n}>{link(n)}</div>),
    });
  const apps = Object.entries(pkg.apps);
  if (apps.length)
    fields.push({
      k: "Apps",
      v: apps.map(([a, n]) => (
        <div key={a}>
          <code>{a}</code> <span className="muted">is</span> {link(n)}
        </div>
      )),
    });
  if (pkg.files.length)
    fields.push({
      k: "Files",
      v: pkg.files.map((f) => {
        const n = packageFileName(rows, pkg.namespace, f);
        return (
          <div key={f}>
            {n ? link(n) : <span className="mono">{f}</span>}
            {n && !n.endsWith(f) && <span className="muted"> as {f}</span>}
          </div>
        );
      }),
    });
  if (pkg.packageJson) fields.push({ k: "package.json from", v: link(pkg.packageJson) });
  const suites = Object.entries(pkg.suites).flatMap(([c, names]) =>
    names.map((n) => [c, n] as const),
  );
  if (suites.length)
    fields.push({
      k: "Tests",
      v: suites.map(([c, n]) => (
        <div key={`${c} ${n}`}>
          {link(n)} <span className="muted">run</span> <code>{c}</code>
        </div>
      )),
    });
  if (pkg.with.length)
    fields.push({ k: "Also installs", v: <span className="mono">{pkg.with.join(", ")}</span> });
  return (
    <div className="box" style={{ marginTop: 14 }}>
      <div className="boxhead">
        <b>Package</b>
        <span className="mono">{pkg.name}</span>
        {pkg.description && <span className="muted">{pkg.description}</span>}
      </div>
      <div className="boxbody">
        <dl className="kv">
          {fields.flatMap(({ k, v }) => [<dt key={`${k} t`}>{k}</dt>, <dd key={`${k} d`}>{v}</dd>])}
        </dl>
      </div>
    </div>
  );
}

uses

used by