diff --git a/apps/website/src/components/Badges.tsx b/apps/website/src/components/Badges.tsx new file mode 100644 index 000000000..b965664d8 --- /dev/null +++ b/apps/website/src/components/Badges.tsx @@ -0,0 +1,37 @@ +import type { ApiDocumentedItem } from '@microsoft/api-extractor-model'; +import { ApiAbstractMixin, ApiProtectedMixin, ApiReadonlyMixin, ApiStaticMixin } from '@microsoft/api-extractor-model'; +import type { PropsWithChildren } from 'react'; + +export enum BadgeColor { + Danger = 'bg-red-500', + Primary = 'bg-blurple', + Warning = 'bg-yellow-500', +} + +export function Badge({ children, color = BadgeColor.Primary }: PropsWithChildren<{ color?: BadgeColor | undefined }>) { + return ( + + {children} + + ); +} + +export function Badges({ item }: { item: ApiDocumentedItem }) { + const isStatic = ApiStaticMixin.isBaseClassOf(item) && item.isStatic; + const isProtected = ApiProtectedMixin.isBaseClassOf(item) && item.isProtected; + const isReadonly = ApiReadonlyMixin.isBaseClassOf(item) && item.isReadonly; + const isAbstract = ApiAbstractMixin.isBaseClassOf(item) && item.isAbstract; + const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock); + + return ( +
+ {isDeprecated ? Deprecated : null} + {isProtected ? Protected : null} + {isStatic ? Static : null} + {isAbstract ? Abstract : null} + {isReadonly ? Readonly : null} +
+ ); +} diff --git a/apps/website/src/components/ExcerptText.tsx b/apps/website/src/components/ExcerptText.tsx index 5ee6e714c..661a9758b 100644 --- a/apps/website/src/components/ExcerptText.tsx +++ b/apps/website/src/components/ExcerptText.tsx @@ -20,7 +20,7 @@ export interface ExcerptTextProps { */ export function ExcerptText({ model, excerpt }: ExcerptTextProps) { return ( - <> + {excerpt.spannedTokens.map((token, idx) => { if (token.kind === ExcerptTokenKind.Reference) { const source = token.canonicalReference?.source; @@ -59,6 +59,6 @@ export function ExcerptText({ model, excerpt }: ExcerptTextProps) { return token.text; })} - + ); } diff --git a/apps/website/src/components/Property.tsx b/apps/website/src/components/Property.tsx index a5e9b803c..7f7dc2ae8 100644 --- a/apps/website/src/components/Property.tsx +++ b/apps/website/src/components/Property.tsx @@ -5,59 +5,29 @@ import type { ApiPropertySignature, } from '@microsoft/api-extractor-model'; import type { PropsWithChildren } from 'react'; +import { Badges } from './Badges'; import { CodeHeading } from './CodeHeading'; import { ExcerptText } from './ExcerptText'; import { InheritanceText } from './InheritanceText'; import { TSDoc } from './documentation/tsdoc/TSDoc'; -export enum PropertySeparatorType { - Type = ':', - Value = '=', -} - export function Property({ item, children, - separator, inheritedFrom, }: PropsWithChildren<{ inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined; item: ApiProperty | ApiPropertySignature; - separator?: PropertySeparatorType; }>) { - const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock); const hasSummary = Boolean(item.tsdocComment?.summarySection); return (
- {isDeprecated || item.isReadonly || item.isOptional || (item as ApiProperty).isStatic ? ( -
- {isDeprecated ? ( -
- Deprecated -
- ) : null} - {(item as ApiProperty).isStatic ? ( -
- Static -
- ) : null} - {item.isReadonly ? ( -
- Readonly -
- ) : null} - {item.isOptional ? ( -
- Optional -
- ) : null} -
- ) : null} + {`${item.displayName}${item.isOptional ? '?' : ''}`} - {separator} + : {item.propertyTypeExcerpt.text ? ( ) : null} diff --git a/apps/website/src/components/PropertyList.tsx b/apps/website/src/components/PropertyList.tsx index 8dd72ef8f..2b97fb5dc 100644 --- a/apps/website/src/components/PropertyList.tsx +++ b/apps/website/src/components/PropertyList.tsx @@ -7,7 +7,7 @@ import type { } from '@microsoft/api-extractor-model'; import { ApiItemKind } from '@microsoft/api-extractor-model'; import { Fragment, useMemo } from 'react'; -import { Property, PropertySeparatorType } from './Property'; +import { Property } from './Property'; import { resolveMembers } from '~/util/members'; export function isPropertyLike(item: ApiItem): item is ApiProperty | ApiPropertySignature { @@ -25,7 +25,6 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
diff --git a/apps/website/src/components/documentation/Header.tsx b/apps/website/src/components/documentation/Header.tsx index b492088f8..c0205bd85 100644 --- a/apps/website/src/components/documentation/Header.tsx +++ b/apps/website/src/components/documentation/Header.tsx @@ -38,7 +38,7 @@ export function Header({ {name} {sourceURL ? ( - + ) : null} diff --git a/apps/website/src/components/documentation/MemberContainerDocumentation.tsx b/apps/website/src/components/documentation/MemberContainerDocumentation.tsx deleted file mode 100644 index c91f3507e..000000000 --- a/apps/website/src/components/documentation/MemberContainerDocumentation.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { ApiDeclaredItem, ApiItemContainerMixin, ApiTypeParameterListMixin } from '@microsoft/api-extractor-model'; -import type { ReactNode } from 'react'; -// import { Outline } from '../Outline'; -import { SyntaxHighlighter } from '../SyntaxHighlighter'; -import { Documentation } from './Documentation'; -import { MethodsSection } from './section/MethodsSection'; -import { PropertiesSection } from './section/PropertiesSection'; -import { SummarySection } from './section/SummarySection'; -import { TypeParameterSection } from './section/TypeParametersSection'; -import { hasProperties, hasMethods /* , serializeMembers */ } from './util'; - -export function MemberContainerDocumentation({ - item, - subheading, -}: { - item: ApiDeclaredItem & ApiItemContainerMixin & ApiTypeParameterListMixin; - subheading?: ReactNode; -}) { - return ( - - {subheading} - {/* @ts-expect-error async component */} - - - {item.typeParameters.length ? : null} - {hasProperties(item) ? : null} - {hasMethods(item) ? : null} - - {/* */} - - ); -} diff --git a/apps/website/src/components/documentation/section/ConstructorSection.tsx b/apps/website/src/components/documentation/section/ConstructorSection.tsx index 56762bb86..b9e767b2e 100644 --- a/apps/website/src/components/documentation/section/ConstructorSection.tsx +++ b/apps/website/src/components/documentation/section/ConstructorSection.tsx @@ -2,23 +2,15 @@ import type { ApiConstructor } from '@microsoft/api-extractor-model'; import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod'; import { ParameterTable } from '../../ParameterTable'; import { TSDoc } from '../tsdoc/TSDoc'; +import { parametersString } from '../util'; import { DocumentationSection } from './DocumentationSection'; - -function getShorthandName(ctor: ApiConstructor) { - return `constructor(${ctor.parameters.reduce((prev, cur, index) => { - if (index === 0) { - return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`; - } - - return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`; - }, '')})`; -} +import { CodeHeading } from '~/components/CodeHeading'; export function ConstructorSection({ item }: { item: ApiConstructor }) { return ( } padded title="Constructor">
-

{getShorthandName(item)}

+ {`constructor(${parametersString(item)})`} {item.tsdocComment ? : null}
diff --git a/apps/website/src/components/documentation/util.ts b/apps/website/src/components/documentation/util.ts index 10561ab29..b6984016b 100644 --- a/apps/website/src/components/documentation/util.ts +++ b/apps/website/src/components/documentation/util.ts @@ -6,10 +6,13 @@ import type { ApiMethodSignature, ApiProperty, ApiPropertySignature, + ApiDocumentedItem, + ApiParameterListMixin, } from '@microsoft/api-extractor-model'; import type { TableOfContentsSerialized } from '../TableOfContentItems'; import { METHOD_SEPARATOR, OVERLOAD_SEPARATOR } from '~/util/constants'; import { resolveMembers } from '~/util/members'; +import { resolveParameters } from '~/util/model'; export function hasProperties(item: ApiItemContainerMixin) { return resolveMembers(item, memberPredicate).some( @@ -56,3 +59,13 @@ export function serializeMembers(clazz: ApiItemContainerMixin): TableOfContentsS } }); } + +export function parametersString(item: ApiDocumentedItem & ApiParameterListMixin) { + return resolveParameters(item).reduce((prev, cur, index) => { + if (index === 0) { + return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`; + } + + return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`; + }, ''); +} diff --git a/apps/website/src/components/model/Class.tsx b/apps/website/src/components/model/Class.tsx index f2054905d..ff791a033 100644 --- a/apps/website/src/components/model/Class.tsx +++ b/apps/website/src/components/model/Class.tsx @@ -1,6 +1,7 @@ import type { ApiClass, ApiConstructor } from '@microsoft/api-extractor-model'; import { ApiItemKind } from '@microsoft/api-extractor-model'; // import { Outline } from '../Outline'; +import { Badges } from '../Badges'; import { Documentation } from '../documentation/Documentation'; import { HierarchyText } from '../documentation/HierarchyText'; import { Members } from '../documentation/Members'; @@ -16,6 +17,7 @@ export function Class({ clazz }: { clazz: ApiClass }) { return ( + diff --git a/apps/website/src/components/model/method/MethodHeader.tsx b/apps/website/src/components/model/method/MethodHeader.tsx index 0e7fd6077..6c39095f8 100644 --- a/apps/website/src/components/model/method/MethodHeader.tsx +++ b/apps/website/src/components/model/method/MethodHeader.tsx @@ -1,25 +1,11 @@ import type { ApiMethod, ApiMethodSignature } from '@microsoft/api-extractor-model'; -import { ApiItemKind } from '@microsoft/api-extractor-model'; import { useMemo } from 'react'; +import { Badges } from '~/components/Badges'; import { CodeHeading } from '~/components/CodeHeading'; import { ExcerptText } from '~/components/ExcerptText'; -import { resolveParameters } from '~/util/model'; - -function getShorthandName(method: ApiMethod | ApiMethodSignature) { - const params = resolveParameters(method); - - return `${method.name}${method.isOptional ? '?' : ''}(${params.reduce((prev, cur, index) => { - if (index === 0) { - return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`; - } - - return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`; - }, '')})`; -} +import { parametersString } from '~/components/documentation/util'; export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignature }) { - const isDeprecated = Boolean(method.tsdocComment?.deprecatedBlock); - const key = useMemo( () => `${method.displayName}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`, [method.displayName, method.overloadIndex], @@ -28,29 +14,9 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur return (
- {isDeprecated || - (method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected) || - (method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic) ? ( -
- {isDeprecated ? ( -
- Deprecated -
- ) : null} - {method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected ? ( -
- Protected -
- ) : null} - {method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic ? ( -
- Static -
- ) : null} -
- ) : null} + - {getShorthandName(method)} + {`${method.name}(${parametersString(method)})`} :