Object reflection, indentation, proper type styling, imports

Author: kossnocorp

src/ui/components/DocReturns/index.tsx

@@ -1,5 +1,6 @@
 import { ComponentChildren, Fragment, FunctionComponent, h } from 'preact'
 import { Markdown } from '~/ui/components/Markdown'
+import { InlineCode } from '../InlineCode'
 import { SectionHeader } from '../SectionHeader'
 
 interface ReturnType {
@@ -33,7 +34,9 @@ export const DocReturns: FunctionComponent<DocReturnsProps> = ({
         <tbody>
           {returns.map((returnData, index) => (
             <tr key={index}>
-              <td>{returnData.type}</td>
+              <td>
+                <InlineCode>{returnData.type}</InlineCode>
+              </td>
               <td>
                 <Markdown value={returnData.description} />
               </td>

src/ui/components/InlineCode/index.tsx

@@ -0,0 +1,10 @@
+import { ComponentChildren, Fragment, FunctionComponent, h } from 'preact'
+import * as styles from './styles.css'
+
+interface InlineCodeProps {
+  children: ComponentChildren
+}
+
+export const InlineCode: FunctionComponent<InlineCodeProps> = ({
+  children,
+}) => <span class={styles.code}>{children}</span>

src/ui/components/InlineCode/styles.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css'
+
+export const code = style({
+  fontFamily: 'monospace',
+  display: 'block',
+  textIndent: '-10px',
+  paddingLeft: '10px',
+})

src/ui/components/TypeDocInterface/index.tsx

@@ -9,6 +9,7 @@ import type {
 import { InlineTypeContext } from '~/ui/contexts/InlineTypeContext'
 import { findSource, ParentTypesMap } from '~/utils/docs'
 import { IdHightlight } from '../IdHighlight'
+import { InlineCode } from '../InlineCode'
 import { Markdown } from '../Markdown'
 import { SourceLink } from '../SourceLink'
 import { TypeDocType } from '../TypeDocType'
@@ -58,7 +59,11 @@ export function TypeDocInterface<
               </td>
 
               <td style={styles.code}>
-                {item.type && <TypeDocType type={item.type} />}
+                {item.type && (
+                  <InlineCode>
+                    <TypeDocType type={item.type} />
+                  </InlineCode>
+                )}
               </td>
 
               <td>

src/ui/components/TypeDocReflection/Object/index.tsx

@@ -0,0 +1,34 @@
+import { Fragment, FunctionComponent, h } from 'preact'
+import { useContext } from 'preact/hooks'
+import type { DeclarationReflection } from 'typedoc'
+import { TypeIndentContext } from '~/ui/contexts/TypeIndentContext'
+import { Debug } from '../../Debug'
+import { TypeDocSignature } from '../../TypeDocSignature'
+import { TypeDocType } from '../../TypeDocType'
+
+interface TypeDocReflectionObjectProps {
+  declaration: DeclarationReflection
+}
+
+export const TypeDocReflectionObject: FunctionComponent<TypeDocReflectionObjectProps> = ({
+  declaration,
+}) => {
+  const indent = useContext(TypeIndentContext)
+  const localIndent = indent + 2
+
+  return (
+    <TypeIndentContext.Provider value={localIndent}>
+      {'{'}
+      {declaration.children?.map((child) => (
+        <>
+          <br />
+          {' '.repeat(localIndent)}
+          {child.name}
+          {child.flags.isOptional && '?'}: <TypeDocType type={child.type!} />
+        </>
+      ))}
+      <br />
+      {' '.repeat(indent) + '}'}
+    </TypeIndentContext.Provider>
+  )
+}

src/ui/components/TypeDocReflection/Signature/styles.css.ts renamed to src/ui/components/TypeDocReflection/Object/styles.css.ts

@@ -2,12 +2,12 @@ import { Fragment, FunctionComponent, h } from 'preact'
 import type { SignatureReflection } from 'typedoc'
 import { TypeDocSignature } from '../../TypeDocSignature'
 
-interface TypeDocReflectionProps {
+interface TypeDocReflectionSignatureProps {
   signature: SignatureReflection
   listed: boolean | undefined
 }
 
-export const TypeDocReflectionSignature: FunctionComponent<TypeDocReflectionProps> = ({
+export const TypeDocReflectionSignature: FunctionComponent<TypeDocReflectionSignatureProps> = ({
   signature,
   listed,
 }) => {

src/ui/components/TypeDocReflection/Signature/index.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, h } from 'preact'
 import type { ReflectionType } from 'typedoc'
-import { ParentTypesMap } from '~/utils/docs'
 import { Missing } from '../Missing'
+import { TypeDocReflectionObject } from './Object'
 import { TypeDocReflectionSignature } from './Signature'
 
 interface TypeDocReflection {
@@ -27,5 +27,6 @@ export const TypeDocReflection: FunctionComponent<TypeDocReflection> = ({
       />
     )
   }
-  return <Missing data={reflection} />
+
+  return <TypeDocReflectionObject declaration={reflection.declaration} />
 }

src/ui/components/TypeDocReflection/index.tsx

@@ -1,5 +1,7 @@
 import { Fragment, FunctionComponent, h } from 'preact'
+import { useContext } from 'preact/hooks'
 import type { ParameterReflection } from 'typedoc'
+import { TypeIndentContext } from '~/ui/contexts/TypeIndentContext'
 import { ParentTypesMap } from '~/utils/docs'
 import { TypeDocType } from '../../TypeDocType'
 
@@ -10,13 +12,16 @@ interface TypeDocSignatureArgumentsProps {
 export const TypeDocSignatureArguments: FunctionComponent<TypeDocSignatureArgumentsProps> = ({
   args,
 }) => {
+  const indent = useContext(TypeIndentContext)
+  const localIndent = indent + 2
+
   return (
-    <>
+    <TypeIndentContext.Provider value={localIndent}>
       {args.map((arg, index) => (
         <>
           <br />
           <span>
-            {'  '}
+            {' '.repeat(localIndent)}
             {arg.name}
             {arg.flags.isOptional && '?'}
             {arg.type && (
@@ -29,6 +34,6 @@ export const TypeDocSignatureArguments: FunctionComponent<TypeDocSignatureArgume
           </span>
         </>
       ))}
-    </>
+    </TypeIndentContext.Provider>
   )
 }

src/ui/components/TypeDocSignature/Arguments/index.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, h } from 'preact'
+import { FunctionComponent, h, Fragment } from 'preact'
 import { useContext } from 'preact/hooks'
 import type { TypeParameterReflection } from 'typedoc'
 import { InlineTypeContext } from '~/ui/contexts/InlineTypeContext'
@@ -16,12 +16,12 @@ export const TypeDocSignatureGenerics: FunctionComponent<TypeDocSignatureGeneric
   const inline = useContext(InlineTypeContext)
 
   return (
-    <span>
+    <>
       {'<'}
       {params.map((param, index) => {
         const id = inline.buildId?.(param)
         return (
-          <span>
+          <>
             {inline ? (
               <span id={id}>
                 <IdHightlight id={id} match={inline.idHighlightMatch}>
@@ -33,22 +33,22 @@ export const TypeDocSignatureGenerics: FunctionComponent<TypeDocSignatureGeneric
             )}
 
             {param.type && (
-              <span>
+              <>
                 {' '}
                 extends <TypeDocType type={param.type} />
-              </span>
+              </>
             )}
             {param.default && (
-              <span>
+              <>
                 {' '}
                 = <TypeDocType type={param.default} />
-              </span>
+              </>
             )}
             {index < params.length - 1 && ', '}
-          </span>
+          </>
         )
       })}
       {'>'}
-    </span>
+    </>
   )
 }