PackagesPage

tcmts.studio.PackagesPage · #gr4ukcd5 · term · runs on the server

is an async component

The npm packages the codebase runs (as tcm packages lists them): each at each range, its locked version and how many definitions use it.

import { packageList } from "#codebase/tcmts/cli/package_pages";
import { at, shareNow } from "#codebase/tcmts/share";
import { StudioFrame, studioShare } from "#codebase/tcmts/studio";

export async function PackagesPage() {
  studioShare();
  const s = shareNow();
  if (!s.signedIn)
    return (
      <StudioFrame tab="packages" title="Sign in">
        {null}
      </StudioFrame>
    );
  const list = packageList(s.cb);
  return (
    <StudioFrame tab="packages" title="Packages">
      <div className="pagehead">
        <h2 className="title">Packages</h2>
        <span className="muted">the npm packages the codebase runs, each pinned by range</span>
      </div>
      <div className="box">
        {list.length ? (
          list.flatMap((p) =>
            p.ranges.map((r) => (
              <a
                className="lrow tracerow"
                key={`${p.name}@${r.range}`}
                href={at(
                  `/packages/${encodeURIComponent(p.name)}?range=${encodeURIComponent(r.range)}`,
                )}
              >
                <div>
                  <span className="mono">{p.name}</span> <span className="muted">{r.range}</span>
                </div>
                <span className="muted">
                  <span className="mono">{r.version}</span>
                  {` · ${r.users} definition${r.users === 1 ? "" : "s"}`}
                </span>
              </a>
            )),
          )
        ) : (
          <div className="empty">
            None yet: importing a package is all it takes; tcm provides it.
          </div>
        )}
      </div>
    </StudioFrame>
  );
}

uses

used by