Fix formatting

thefrontside · Jan 20, 2025 · c662980 · c662980
1 parent 990596f
commit c662980
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 137 deletions.
diff --git a/components/api/api-page.tsx b/components/api/api-page.tsx
@@ -53,23 +53,21 @@ export function* ApiPage({
 
   return (
     <>
-      {
-        yield* ApiReference({
-          pages,
-          current,
-          ref,
-          content: (
-            <>
-              <>{banner}</>
-              {yield* SymbolHeader({ pkg, page })}
-              {yield* ApiBody({ page, linkResolver })}
-            </>
-          ),
-          linkResolver: function* (symbol) {
-            return yield* createSibling(symbol);
-          },
-        })
-      }
+      {yield* ApiReference({
+        pages,
+        current,
+        ref,
+        content: (
+          <>
+            <>{banner}</>
+            {yield* SymbolHeader({ pkg, page })}
+            {yield* ApiBody({ page, linkResolver })}
+          </>
+        ),
+        linkResolver: function* (symbol) {
+          return yield* createSibling(symbol);
+        },
+      })}
     </>
   );
 }
@@ -100,12 +98,10 @@ export function* ApiBody({
             </a>
           </div>
           <div class="[&>hr]:my-5 [&>p]:mb-0">
-            {
-              yield* useMarkdown(section.markdown, {
-                linkResolver,
-                slugPrefix: section.id,
-              })
-            }
+            {yield* useMarkdown(section.markdown, {
+              linkResolver,
+              slugPrefix: section.id,
+            })}
           </div>
         </section>,
       );
@@ -128,8 +124,9 @@ export function* ApiReference({
   pages: DocPage[];
   linkResolver: ResolveLinkFunction;
 }) {
-  const version =
-    extractVersion(ref.name) === "0.0.0" ? ref.name : extractVersion(ref.name);
+  const version = extractVersion(ref.name) === "0.0.0"
+    ? ref.name
+    : extractVersion(ref.name);
 
   return (
     <section class="min-h-0 mx-auto w-full justify-items-normal md:grid md:grid-cols-[225px_auto] lg:grid-cols-[225px_auto_200px] md:gap-4">
@@ -165,12 +162,10 @@ export function* SymbolHeader({ page, pkg }: { page: DocPage; pkg: Package }) {
         </Keyword>{" "}
         {page.name}
       </h1>
-      {
-        yield* GithubPill({
-          url: pkg.source.toString(),
-          text: pkg.ref.repository.nameWithOwner,
-        })
-      }
+      {yield* GithubPill({
+        url: pkg.source.toString(),
+        text: pkg.ref.repository.nameWithOwner,
+      })}
     </header>
   );
 }
@@ -188,20 +183,22 @@ function* Menu({
   for (const page of pages.sort((a, b) => a.name.localeCompare(b.name))) {
     elements.push(
       <li>
-        {current === page.name ? (
-          <span class="rounded px-2 block w-full py-2 bg-gray-100 cursor-default ">
-            <Icon kind={page.kind} />
-            {page.name}
-          </span>
-        ) : (
-          <a
-            class="rounded px-2 block w-full py-2 hover:bg-gray-100"
-            href={yield* linkResolver(page.name)}
-          >
-            <Icon kind={page.kind} />
-            {page.name}
-          </a>
-        )}
+        {current === page.name
+          ? (
+            <span class="rounded px-2 block w-full py-2 bg-gray-100 cursor-default ">
+              <Icon kind={page.kind} />
+              {page.name}
+            </span>
+          )
+          : (
+            <a
+              class="rounded px-2 block w-full py-2 hover:bg-gray-100"
+              href={yield* linkResolver(page.name)}
+            >
+              <Icon kind={page.kind} />
+              {page.name}
+            </a>
+          )}
       </li>,
     );
   }

diff --git a/components/package/exports.tsx b/components/package/exports.tsx
@@ -48,22 +48,24 @@ function* PackageExport({
 }: PackageExportOptions): Operation<JSXElement> {
   const exports: JSXChild[] = [];
 
-  for (const page of docPages
-    .flatMap((page) => (page.kind === "import" ? [] : [page]))
-    .sort((a, b) => a.name.localeCompare(b.name))) {
+  for (
+    const page of docPages
+      .flatMap((page) => (page.kind === "import" ? [] : [page]))
+      .sort((a, b) => a.name.localeCompare(b.name))
+  ) {
     exports.push(
       ...[
         <a
           class="no-underline text-slate-300 hover:underline underline-offset-4"
           href={yield* linkResolver(page.kind, "_", page.name)}
         >
           {["enum", "typeAlias", "namespace", "interface"].includes(
-            page.kind,
-          ) ? (
-            <Keyword>{"type "}</Keyword>
-          ) : (
-            ""
-          )}
+              page.kind,
+            )
+            ? <Keyword>{"type "}</Keyword>
+            : (
+              ""
+            )}
           {page.name}
         </a>,
         ", ",

diff --git a/components/type/icon.tsx b/components/type/icon.tsx
@@ -1,26 +1,42 @@
-export function Icon(props: { kind: string, class?: string }) {
+export function Icon(props: { kind: string; class?: string }) {
   switch (props.kind) {
     case "function":
       return (
-        <span class={`${props.class ? props.class : ""} rounded-full bg-sky-100 inline-block w-6 h-full mr-1 text-center`}>
+        <span
+          class={`${
+            props.class ? props.class : ""
+          } rounded-full bg-sky-100 inline-block w-6 h-full mr-1 text-center`}
+        >
           f
         </span>
       );
     case "interface":
       return (
-        <span class={`${props.class ? props.class : ""} rounded-full bg-orange-50 text-orange-600 inline-block w-6 h-full mr-1 text-center`}>
+        <span
+          class={`${
+            props.class ? props.class : ""
+          } rounded-full bg-orange-50 text-orange-600 inline-block w-6 h-full mr-1 text-center`}
+        >
           I
         </span>
       );
     case "typeAlias":
       return (
-        <span class={`${props.class ? props.class : ""} rounded-full bg-red-50 text-red-600 inline-block w-6 h-full mr-1 text-center`}>
+        <span
+          class={`${
+            props.class ? props.class : ""
+          } rounded-full bg-red-50 text-red-600 inline-block w-6 h-full mr-1 text-center`}
+        >
           T
         </span>
       );
     case "variable": {
       return (
-        <span class={`${props.class ? props.class : ""} rounded-full bg-purple-200 text-violet-600 inline-block w-6 h-full mr-1 text-center`}>
+        <span
+          class={`${
+            props.class ? props.class : ""
+          } rounded-full bg-purple-200 text-violet-600 inline-block w-6 h-full mr-1 text-center`}
+        >
           v
         </span>
       );

diff --git a/components/type/markdown.tsx b/components/type/markdown.tsx
@@ -10,9 +10,12 @@ import { toHtml } from "npm:hast-util-to-html@9.0.0";
 import { DocPage } from "../../hooks/use-deno-doc.tsx";
 import { Icon } from "./icon.tsx";
 
-const NEW = `<span class="inline-block bg-violet-100 rounded px-2 text-sm text-violet-900 mx-1">new</span>`;
-const OPTIONAL = `<span class="inline-block bg-sky-100 rounded px-2 text-sm text-sky-900 mx-1">optional</span>`;
-const READONLY = `<span class="inline-block bg-orange-100 rounded px-2 text-sm text-orange-900 mx-1">readonly</span>`;
+const NEW =
+  `<span class="inline-block bg-violet-100 rounded px-2 text-sm text-violet-900 mx-1">new</span>`;
+const OPTIONAL =
+  `<span class="inline-block bg-sky-100 rounded px-2 text-sm text-sky-900 mx-1">optional</span>`;
+const READONLY =
+  `<span class="inline-block bg-orange-100 rounded px-2 text-sm text-orange-900 mx-1">readonly</span>`;
 
 export const NO_DOCS_AVAILABLE = "*No documentation available.*";
 
@@ -28,8 +31,7 @@ export function* extract(
     lines.push(node.jsDoc.doc);
   }
 
-  const deprecated =
-    node.jsDoc &&
+  const deprecated = node.jsDoc &&
     node.jsDoc.tags?.flatMap((tag) => (tag.kind === "deprecated" ? [tag] : []));
   if (deprecated && deprecated.length > 0) {
     lines.push(``);
@@ -48,8 +50,7 @@ export function* extract(
     }
   }
 
-  const examples =
-    node.jsDoc &&
+  const examples = node.jsDoc &&
     node.jsDoc.tags?.flatMap((tag) => (tag.kind === "example" ? [tag] : []));
   if (examples && examples?.length > 0) {
     lines.push("### Examples");
@@ -64,9 +65,11 @@ export function* extract(
       lines.push(`### Constructors`, "<dl>");
       for (const constructor of node.classDef.constructors) {
         lines.push(
-          `<dt>${NEW} **${node.name}**(${constructor.params
-            .map(Param)
-            .join(", ")})</dt>`,
+          `<dt>${NEW} **${node.name}**(${
+            constructor.params
+              .map(Param)
+              .join(", ")
+          })</dt>`,
           `<dd>`,
           constructor.jsDoc,
           `</dd>`,
@@ -96,10 +99,9 @@ export function* extract(
   }
 
   if (node.kind === "namespace") {
-    const variables =
-      node.namespaceDef.elements.flatMap((node) =>
-        node.kind === "variable" ? [node] : [],
-      ) ?? [];
+    const variables = node.namespaceDef.elements.flatMap((node) =>
+      node.kind === "variable" ? [node] : []
+    ) ?? [];
     if (variables.length > 0) {
       lines.push("### Variables");
       lines.push("<dl>");
@@ -144,7 +146,9 @@ export function* extract(
         const typeDef = property.tsType ? TypeDef(property.tsType) : "";
         const description = property.jsDoc?.doc || NO_DOCS_AVAILABLE;
         lines.push(
-          `<dt class="border-dotted [&:not(:first-child)]:border-t-2 [&:not(:first-child)]:pt-3 [&:not(:first-child)]:mt-2">**${property.name}**${property.readonly ? READONLY : ""}${property.optional ? OPTIONAL : ""}: ${typeDef}</dt>`,
+          `<dt class="border-dotted [&:not(:first-child)]:border-t-2 [&:not(:first-child)]:pt-3 [&:not(:first-child)]:mt-2">**${property.name}**${
+            property.readonly ? READONLY : ""
+          }${property.optional ? OPTIONAL : ""}: ${typeDef}</dt>`,
           `<dd class="flex flex-col [&>pre]:mb-3">`,
           description,
           "</dd>",
@@ -183,10 +187,9 @@ export function* extract(
     const { params } = node.functionDef;
     if (params.length > 0) {
       lines.push("### Parameters");
-      const jsDocs =
-        node.jsDoc?.tags?.flatMap((tag) =>
-          tag.kind === "param" ? [tag] : [],
-        ) ?? [];
+      const jsDocs = node.jsDoc?.tags?.flatMap((tag) =>
+        tag.kind === "param" ? [tag] : []
+      ) ?? [];
       let i = 0;
       for (const param of params) {
         lines.push("\n", Param(param));
@@ -245,10 +248,9 @@ export function TypeParams(typeParams: TsTypeParamDef[], node: DocNode) {
   let lines = [];
   if (typeParams.length > 0) {
     lines.push("### Type Parameters");
-    const jsDocs =
-      node.jsDoc?.tags?.flatMap((tag) =>
-        tag.kind === "template" ? [tag] : [],
-      ) ?? [];
+    const jsDocs = node.jsDoc?.tags?.flatMap((tag) =>
+      tag.kind === "template" ? [tag] : []
+    ) ?? [];
     let i = 0;
     for (const typeParam of typeParams) {
       lines.push(TypeParam(typeParam));
@@ -269,9 +271,11 @@ export function TypeDef(typeDef: TsTypeDef): string {
       const tparams = typeDef.fnOrConstructor.typeParams
         .map(TypeParam)
         .join(", ");
-      return `(${params})${tparams.length > 0 ? `<${tparams}>` : ""} => ${TypeDef(
-        typeDef.fnOrConstructor.tsType,
-      )}`;
+      return `(${params})${tparams.length > 0 ? `<${tparams}>` : ""} => ${
+        TypeDef(
+          typeDef.fnOrConstructor.tsType,
+        )
+      }`;
     }
     case "typeRef": {
       const tparams = typeDef.typeRef.typeParams?.map(TypeDef).join(", ");
@@ -289,9 +293,11 @@ export function TypeDef(typeDef: TsTypeDef): string {
       return `${TypeDef(typeDef.array)}&lbrack;&rbrack;`;
     }
     case "typeOperator": {
-      return `${typeDef.typeOperator.operator} ${TypeDef(
-        typeDef.typeOperator.tsType,
-      )}`;
+      return `${typeDef.typeOperator.operator} ${
+        TypeDef(
+          typeDef.typeOperator.tsType,
+        )
+      }`;
     }
     case "tuple": {
       return `&lbrack;${typeDef.tuple.map(TypeDef).join(", ")}&rbrack;`;
@@ -312,16 +318,22 @@ export function TypeDef(typeDef: TsTypeDef): string {
       }`;
     }
     case "conditional": {
-      return `${TypeDef(typeDef.conditionalType.checkType)} extends ${TypeDef(
-        typeDef.conditionalType.extendsType,
-      )} ? ${TypeDef(
-        typeDef.conditionalType.trueType,
-      )} : ${TypeDef(typeDef.conditionalType.falseType)}`;
+      return `${TypeDef(typeDef.conditionalType.checkType)} extends ${
+        TypeDef(
+          typeDef.conditionalType.extendsType,
+        )
+      } ? ${
+        TypeDef(
+          typeDef.conditionalType.trueType,
+        )
+      } : ${TypeDef(typeDef.conditionalType.falseType)}`;
     }
     case "indexedAccess": {
-      return `${TypeDef(typeDef.indexedAccess.objType)}[${TypeDef(
-        typeDef.indexedAccess.indexType,
-      )}]`;
+      return `${TypeDef(typeDef.indexedAccess.objType)}[${
+        TypeDef(
+          typeDef.indexedAccess.indexType,
+        )
+      }]`;
     }
     case "literal": {
       return `*${typeDef.repr}*`;

diff --git a/hooks/use-description-parse.tsx b/hooks/use-description-parse.tsx
@@ -30,6 +30,6 @@ export function* useMarkdownFile(markdown: string): Operation<VFile> {
         inferDescriptionHast: true,
         truncateSize: 200,
       })
-      .process(markdown),
+      .process(markdown)
   );
 }
diff --git a/hooks/use-markdown.tsx b/hooks/use-markdown.tsx
@@ -92,8 +92,11 @@ export function* useMarkdown(
       const result = await mod.default();
       return result;
     } catch (e) {
-      console.error(`Failed to convert markdown to JSXElement for ${markdown}`, e);
-      return <></>
+      console.error(
+        `Failed to convert markdown to JSXElement for ${markdown}`,
+        e,
+      );
+      return <></>;
     }
   });
 }