Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-13 10:03:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): Show constructor information (#8540)

Browse Source
This commit is contained in:
Suneet Tipirneni
2022-08-22 03:45:53 -04:00
committed by GitHub
parent dd44e8b6ec
commit e42fd16369
66 changed files with 689 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/website/src/components/CodeListing.tsx
View File

@@ -3,8 +3,7 @@ import type { ReactNode } from 'react';
import { HyperlinkedText } from './HyperlinkedText';
import { InheritanceText } from './InheritanceText';
import { TSDoc } from './tsdoc/TSDoc';
import type { DocItem } from '~/DocModel/DocItem';
import type { InheritanceData } from '~/DocModel/DocMethod';
import type { ApiItemJSON, InheritanceData } from '~/DocModel/ApiNodeJSONEncoder';
import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
import type { TokenDocumentation } from '~/util/parse.server';
@@ -30,7 +29,7 @@ export function CodeListing({
typeTokens: TokenDocumentation[];
readonly?: boolean;
optional?: boolean;
summary?: ReturnType<DocItem['toJSON']>['summary'];
summary?: ApiItemJSON['summary'];
comment?: AnyDocNodeJSON | null;
children?: ReactNode;
deprecation?: AnyDocNodeJSON | null;

7
packages/website/src/components/DocContainer.tsx
View File

@@ -9,8 +9,7 @@ import { Section } from './Section';
import { TableOfContentsItems } from './TableOfContentsItems';
import { TypeParamTable } from './TypeParamTable';
import { TSDoc } from './tsdoc/TSDoc';
import type { DocClass } from '~/DocModel/DocClass';
import type { DocItem } from '~/DocModel/DocItem';
import type { ApiClassJSON, ApiItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
import { generateIcon } from '~/util/icon';
@@ -20,13 +19,13 @@ export interface DocContainerProps {
name: string;
kind: string;
excerpt: string;
summary?: ReturnType<DocItem['toJSON']>['summary'];
summary?: ApiItemJSON['summary'];
children?: ReactNode;
extendsTokens?: TokenDocumentation[] | null;
implementsTokens?: TokenDocumentation[][];
typeParams?: TypeParameterData[];
comment?: AnyDocNodeJSON | null;
methods?: ReturnType<DocClass['toJSON']>['methods'] | null;
methods?: ApiClassJSON['methods'] | null;
}
export function DocContainer({

2
packages/website/src/components/InheritanceText.tsx
View File

@@ -1,6 +1,6 @@
import { Anchor, Text } from '@mantine/core';
import Link from 'next/link';
import type { InheritanceData } from '~/DocModel/DocMethod';
import type { InheritanceData } from '~/DocModel/ApiNodeJSONEncoder';
export function InheritanceText({ data }: { data: InheritanceData }) {
return (

8
packages/website/src/components/MethodItem.tsx
View File

@@ -3,11 +3,10 @@ import { HyperlinkedText } from './HyperlinkedText';
import { InheritanceText } from './InheritanceText';
import { ParameterTable } from './ParameterTable';
import { TSDoc } from './tsdoc/TSDoc';
import type { DocMethod } from '~/DocModel/DocMethod';
import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '~/DocModel/ApiNodeJSONEncoder';
import { Visibility } from '~/DocModel/Visibility';
type MethodResolvable = ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>;
type MethodResolvable = ApiMethodJSON | ApiMethodSignatureJSON;
function getShorthandName(data: MethodResolvable) {
return `${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
@@ -20,7 +19,8 @@ function getShorthandName(data: MethodResolvable) {
}
export function MethodItem({ data }: { data: MethodResolvable }) {
const method = data as ReturnType<DocMethod['toJSON']>;
const method = data as ApiMethodJSON;
return (
<Stack
id={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`}

9
packages/website/src/components/MethodList.tsx
View File

@@ -1,14 +1,9 @@
import { Divider, Stack } from '@mantine/core';
import { Fragment } from 'react';
import { MethodItem } from './MethodItem';
import type { DocMethod } from '~/DocModel/DocMethod';
import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
import type { ApiMethodJSON, ApiMethodSignatureJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function MethodList({
data,
}: {
data: (ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>)[];
}) {
export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignatureJSON)[] }) {
return (
<Stack>
{data.map((method) => (

4
packages/website/src/components/PropertyList.tsx
View File

@@ -1,8 +1,8 @@
import { Stack } from '@mantine/core';
import { CodeListing } from './CodeListing';
import type { DocProperty } from '~/DocModel/DocProperty';
import type { ApiPropertyItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function PropertyList({ data }: { data: ReturnType<DocProperty['toJSON']>[] }) {
export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
return (
<Stack>
{data.map((prop) => (

63
packages/website/src/components/Sections.tsx
View File

@@ -1,18 +1,16 @@
import { Stack, Group, Badge, Title } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
import { MethodList } from './MethodList';
import { ParameterTable } from './ParameterTable';
import { PropertyList } from './PropertyList';
import { Section } from './Section';
import type { DocClass } from '~/DocModel/DocClass';
import type { DocInterface } from '~/DocModel/DocInterface';
import { TSDoc } from './tsdoc/TSDoc';
import type { ApiClassJSON, ApiConstructorJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
import type { ParameterDocumentation } from '~/util/parse.server';
export function PropertiesSection({
data,
}: {
data: ReturnType<DocClass['toJSON']>['properties'] | ReturnType<DocInterface['toJSON']>['properties'];
}) {
export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] }) {
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
@@ -22,11 +20,7 @@ export function PropertiesSection({
) : null;
}
export function MethodsSection({
data,
}: {
data: ReturnType<DocClass['toJSON']>['methods'] | ReturnType<DocInterface['toJSON']>['methods'];
}) {
export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] }) {
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
@@ -45,3 +39,48 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
</Section>
) : null;
}
export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
function getShorthandName(): string {
return `constructor(${data.parameters.reduce((prev, cur, index) => {
if (index === 0) {
return `${prev}${cur.isOptional ? `[${cur.name}]` : cur.name}`;
}
return `${prev}, ${cur.isOptional ? `[${cur.name}]` : cur.name}`;
}, '')})`;
}
return data.parameters.length ? (
<Section title="Constructor" icon={<VscSymbolMethod />} padded dense={matches}>
<Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs">
<Group>
<Stack>
<Group>
{data.deprecated ? (
<Badge variant="filled" color="red">
Deprecated
</Badge>
) : null}
{data.protected ? <Badge variant="filled">Protected</Badge> : null}
<Title sx={{ wordBreak: 'break-all' }} order={4} className="font-mono">
{getShorthandName()}
</Title>
</Group>
</Stack>
</Group>
<Group sx={{ display: data.summary || data.parameters.length ? 'block' : 'none' }} mb="lg">
<Stack>
{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
{data.summary ? <TSDoc node={data.summary} /> : null}
{data.remarks ? <TSDoc node={data.remarks} /> : null}
{data.comment ? <TSDoc node={data.comment} /> : null}
{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
</Stack>
</Group>
</Stack>
</Section>
) : null;
}

4
packages/website/src/components/SidebarLayout.tsx
View File

@@ -25,7 +25,7 @@ import { type PropsWithChildren, useState } from 'react';
import { VscChevronDown, VscPackage } from 'react-icons/vsc';
import { WiDaySunny, WiNightClear } from 'react-icons/wi';
import { SidebarItems } from './SidebarItems';
import type { DocItem } from '~/DocModel/DocItem';
import type { ApiItemJSON } from '~/DocModel/ApiNodeJSONEncoder';
import type { findMember } from '~/util/model.server';
import type { getMembers } from '~/util/parse.server';
@@ -36,7 +36,7 @@ export interface SidebarLayoutProps {
member: ReturnType<typeof findMember>;
};
selectedMember?: ReturnType<DocItem['toJSON']> | undefined;
selectedMember?: ApiItemJSON | undefined;
}
export type Members = SidebarLayoutProps['data']['members'];

9
packages/website/src/components/TableOfContentsItems.tsx
View File

@@ -1,7 +1,6 @@
import { createStyles, Group, Text, Box } from '@mantine/core';
import { VscListSelection } from 'react-icons/vsc';
import type { DocClass } from '~/DocModel/DocClass';
import type { DocInterface } from '~/DocModel/DocInterface';
import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
const useStyles = createStyles((theme) => ({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -25,11 +24,7 @@ const useStyles = createStyles((theme) => ({
},
}));
export function TableOfContentsItems({
members,
}: {
members: ReturnType<DocClass['toJSON']>['methods'] | ReturnType<DocInterface['toJSON']>['methods'];
}) {
export function TableOfContentsItems({ members }: { members: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] }) {
const { classes } = useStyles();
const items = members.map((member) => {

9
packages/website/src/components/model/Class.tsx
View File

@@ -1,20 +1,21 @@
import { DocContainer } from '../DocContainer';
import { MethodsSection, PropertiesSection } from '../Sections';
import type { DocClass } from '~/DocModel/DocClass';
import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';
import type { ApiClassJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Class({ data }: { data: ReturnType<DocClass['toJSON']> }) {
export function Class({ data }: { data: ApiClassJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameterData}
typeParams={data.typeParameters}
extendsTokens={data.extendsTokens}
implementsTokens={data.implementsTokens}
comment={data.comment}
methods={data.methods}
>
{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
<PropertiesSection data={data.properties} />
<MethodsSection data={data.methods} />
</DocContainer>

4
packages/website/src/components/model/Enum.tsx
View File

@@ -4,9 +4,9 @@ import { VscSymbolEnumMember } from 'react-icons/vsc';
import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
import { DocContainer } from '../DocContainer';
import { Section } from '../Section';
import type { DocEnum } from '~/DocModel/DocEnum';
import type { ApiEnumJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Enum({ data }: { data: ReturnType<DocEnum['toJSON']> }) {
export function Enum({ data }: { data: ApiEnumJSON }) {
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return (

6
packages/website/src/components/model/Function.tsx
View File

@@ -1,15 +1,15 @@
import { DocContainer } from '../DocContainer';
import { ParametersSection } from '../Sections';
import type { DocFunction } from '~/DocModel/DocFunction';
import type { ApiFunctionJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Function({ data }: { data: ReturnType<DocFunction['toJSON']> }) {
export function Function({ data }: { data: ApiFunctionJSON }) {
return (
<DocContainer
name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameterData}
typeParams={data.typeParameters}
>
<ParametersSection data={data.parameters} />
</DocContainer>

6
packages/website/src/components/model/Interface.tsx
View File

@@ -1,15 +1,15 @@
import { DocContainer } from '../DocContainer';
import { MethodsSection, PropertiesSection } from '../Sections';
import type { DocInterface } from '~/DocModel/DocInterface';
import type { ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Interface({ data }: { data: ReturnType<DocInterface['toJSON']> }) {
export function Interface({ data }: { data: ApiInterfaceJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameterData}
typeParams={data.typeParameters}
>
<PropertiesSection data={data.properties} />
<MethodsSection data={data.methods} />

6
packages/website/src/components/model/TypeAlias.tsx
View File

@@ -1,14 +1,14 @@
import { DocContainer } from '../DocContainer';
import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
import type { ApiTypeAliasJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function TypeAlias({ data }: { data: ReturnType<DocTypeAlias['toJSON']> }) {
export function TypeAlias({ data }: { data: ApiTypeAliasJSON }) {
return (
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameterData}
typeParams={data.typeParameters}
/>
);
}

4
packages/website/src/components/model/Variable.tsx
View File

@@ -1,6 +1,6 @@
import { DocContainer } from '../DocContainer';
import type { DocVariable } from '~/DocModel/DocVariable';
import type { ApiVariableJSON } from '~/DocModel/ApiNodeJSONEncoder';
export function Variable({ data }: { data: ReturnType<DocVariable['toJSON']> }) {
export function Variable({ data }: { data: ApiVariableJSON }) {
return <DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary} />;
}