RegistrySearchPage

tcmts.registry.pages.RegistrySearchPage · #upzpxnly · term · runs on the server

is an async component

Search: by name, words in docs, or a type (:(s: Shape) => number), across every library's newest version, grouped by library; only what reaches nothing outside itself, what's in a reviewed library, or what runs in the browser, if asked; and, by type, the close matches after.

import { looksLikeType } from "#codebase/tcmts/cli/pages";
import { everyone, libraryHref, libraryKey, said, searchLibraries, shownAttestations } from "#codebase/tcmts/registry";
import type { LibraryHits } from "#codebase/tcmts/registry";
import { RegistryFrame, RegistrySearchForm, SearchFilters } from "#codebase/tcmts/registry/pages";
import type { SearchAsked } from "#codebase/tcmts/registry/pages";
import { Place } from "#codebase/tcmts/share";

export async function RegistrySearchPage({ q, asked }: { q: string; asked: SearchAsked }) {
  const who = await everyone();
  const query = q.trim();
  const mode =
    asked.by === "name" || asked.by === "docs" || asked.by === "type"
      ? asked.by
      : looksLikeType(query)
        ? "type"
        : "name";
  const found = await searchLibraries(q, asked.by);
  const said_ = asked.reviewed ? await shownAttestations() : [];
  const reviewed = (g: LibraryHits) =>
    said_.some((a) => a.kind === "review" && g.l.versions.some((v) => v.namespace === a.namespace));
  const keep = (h: LibraryHits["hits"][number]) =>
    (!asked.pure || !h.reaches) &&
    (!asked.browser || h.place === "browser" || h.place === "anywhere");
  const kept = found.filter((g) => !asked.reviewed || reviewed(g));
  const groups = kept
    .map((g) => ({ l: g.l, hits: g.hits.filter((h) => keep(h) && !h.close) }))
    .filter((g) => g.hits.length);
  const close = kept.flatMap((g) =>
    g.hits.filter((h) => keep(h) && h.close).map((h) => ({ l: g.l, h })),
  );
  const n = groups.reduce((k, g) => k + g.hits.length, 0);
  return (
    <RegistryFrame tab="libraries" title={q ? `${q} · Search` : "Search"}>
      <div className="narrow">
        <div className="pagehead">
          <RegistrySearchForm q={q} asked={asked} mode={mode} />
          {query && (
            <span className="muted right">
              {n} definition{n === 1 ? "" : "s"} in {groups.length} librar
              {groups.length === 1 ? "y" : "ies"}
            </span>
          )}
        </div>
        <SearchFilters q={q} asked={asked} />
        {groups.map(({ l, hits }) => {
          const w = who.get(l.did) ?? { did: l.did };
          return (
            <div className="box" key={libraryKey(l)}>
              <div className="boxhead">
                <a className="mono" href={libraryHref(w, l.package)}>
                  <b>
                    {said(w)}/{l.package}
                  </b>
                </a>
                <span className="mono muted">{l.latest.version}</span>
                <span className="muted right">used by {l.dependents}</span>
              </div>
              {hits.slice(0, 20).map((h) => (
                <div className="drow" key={h.path}>
                  <Place place={h.place} />
                  <a className="mono" href={h.href}>
                    {h.name}
                  </a>
                  <span className="sig mono">{h.signature}</span>
                  <span className="doc">{h.detail}</span>
                </div>
              ))}
            </div>
          );
        })}
        {close.length > 0 && (
          <div className="box">
            <div className="boxhead">
              <b>Close matches</b>
              <span className="muted">a more general or more specific type</span>
            </div>
            {close.slice(0, 20).map(({ l, h }) => (
              <div className="drow" key={h.path}>
                <Place place={h.place} />
                <a className="mono" href={h.href}>
                  {said(who.get(l.did) ?? { did: l.did })}/{h.name}
                </a>
                <span className="sig mono">{h.signature}</span>
                <span className="doc">{h.detail}</span>
              </div>
            ))}
          </div>
        )}
        {query && !groups.length && !close.length && (
          <div className="empty">Nothing matches {q}.</div>
        )}
      </div>
    </RegistryFrame>
  );
}

uses

used by