From 3bdf6004ca74dd9eb380aa61cf9e69c47725116a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 1 Aug 2018 17:36:37 +0200 Subject: Start refactoring docs to remove unnecessary configs given more concise TypeDoc JSON --- .../react-docs/src/components/documentation.tsx | 44 +++---- .../react-docs/src/components/property_block.tsx | 70 +++++++++++ packages/react-docs/src/components/type.tsx | 29 ++--- .../react-docs/src/components/type_definition.tsx | 3 - packages/react-docs/src/docs_info.ts | 56 +++------ packages/react-docs/src/index.ts | 10 +- packages/react-docs/src/types.ts | 19 ++- packages/react-docs/src/utils/typedoc_utils.ts | 135 +++++++++++---------- 8 files changed, 206 insertions(+), 160 deletions(-) create mode 100644 packages/react-docs/src/components/property_block.tsx (limited to 'packages/react-docs') diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index ff33220d2..4f776b237 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -1,7 +1,9 @@ import { + AnchorTitle, colors, constants as sharedConstants, EtherscanLinkSuffixes, + HeaderSizes, MarkdownSection, NestedSidebarMenu, Networks, @@ -32,8 +34,7 @@ import { Badge } from './badge'; import { Comment } from './comment'; import { EventDefinition } from './event_definition'; import { SignatureBlock } from './signature_block'; -import { SourceLink } from './source_link'; -import { Type } from './type'; +import { PropertyBlock } from './property_block'; import { TypeDefinition } from './type_definition'; const networkNameToColor: { [network: string]: string } = { @@ -129,7 +130,7 @@ export class Documentation extends React.Component @@ -172,7 +173,7 @@ export class Documentation extends React.Component {docSection.comment && } - {!_.isEmpty(docSection.constructors) && - this.props.docsInfo.isVisibleConstructor(sectionName) && ( -
-

Constructor

- {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} -
- )} + {!_.isEmpty(docSection.constructors) && ( +
+

Constructor

+ {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)} +
+ )} {!_.isEmpty(docSection.properties) && (

Properties

@@ -345,20 +345,14 @@ export class Documentation extends React.Component - - {property.name}:{' '} - - - {property.source && ( - - )} - {property.comment && } -
+ ); } private _renderSignatureBlocks( diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx new file mode 100644 index 000000000..6e7f90c6c --- /dev/null +++ b/packages/react-docs/src/components/property_block.tsx @@ -0,0 +1,70 @@ +import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { Property } from '../types'; +import { constants } from '../utils/constants'; + +import { Comment } from './comment'; +import { Type } from './type'; +import { SourceLink } from './source_link'; + +export interface PropertyBlockProps { + property: Property; + sectionName: string; + docsInfo: DocsInfo; + sourceUrl: string; + selectedVersion: string; +} + +export interface PropertyBlockState { + shouldShowAnchor: boolean; +} + +export class PropertyBlock extends React.Component { + constructor(props: PropertyBlockProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render(): React.ReactNode { + const property = this.props.property; + const sectionName = this.props.sectionName; + return ( +
+
+ +
+ + {property.name}:{' '} + + + {property.source && ( + + )} + {property.comment && } +
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean): void { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 04fcd9998..3504be303 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -9,6 +9,7 @@ import { DocsInfo } from '../docs_info'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types'; import { Signature } from './signature'; +import { constants } from '../utils/constants'; import { TypeDefinition } from './type_definition'; export interface TypeProps { @@ -43,7 +44,7 @@ export function Type(props: TypeProps): any { - {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? ( - - {typeName} - + {sharedUtils.isUserOnMobile() ? ( + {typeName} ) : ( { - const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName]; - if (!_.isUndefined(versionIntroducedIfExists)) { - const doesExistInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0; - return doesExistInSelectedVersion; - } else { - return true; - } - }); - return finalMenu; + return this._docsInfo.menu; } public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { const menuSubsectionsBySection = {} as MenuSubsectionsBySection; @@ -96,12 +67,18 @@ export class DocsInfo { const sortedEventNames = _.sortBy(docSection.events, 'name'); eventNames = _.map(sortedEventNames, m => m.name); } - const sortedMethodNames = _.sortBy(docSection.methods, 'name'); - const methodNames = _.map(sortedMethodNames, m => m.name); - menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames]; + const propertiesSortedByName = _.sortBy(docSection.properties, 'name'); + const propertyNames = _.map(propertiesSortedByName, m => m.name); + const methodsSortedByName = _.sortBy(docSection.methods, 'name'); + const methodNames = _.map(methodsSortedByName, m => m.name); const sortedFunctionNames = _.sortBy(docSection.functions, 'name'); const functionNames = _.map(sortedFunctionNames, m => m.name); - menuSubsectionsBySection[sectionName] = [...eventNames, ...functionNames, ...methodNames]; + menuSubsectionsBySection[sectionName] = [ + ...eventNames, + ...propertyNames, + ...functionNames, + ...methodNames, + ]; } }); return menuSubsectionsBySection; @@ -115,14 +92,11 @@ export class DocsInfo { const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any; return typeDefinitionByName; } - public isVisibleConstructor(sectionName: string): boolean { - return _.includes(this._docsInfo.visibleConstructors, sectionName); - } - public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat { + public convertToDocAgnosticFormat(docObj: DoxityDocObj | GeneratedDocJson): DocAgnosticFormat { if (this.type === SupportedDocJson.Doxity) { return doxityUtils.convertToDocAgnosticFormat(docObj as DoxityDocObj); } else { - return typeDocUtils.convertToDocAgnosticFormat(docObj as TypeDocNode, this); + return typeDocUtils.convertToDocAgnosticFormat(docObj as GeneratedDocJson, this); } } } diff --git a/packages/react-docs/src/index.ts b/packages/react-docs/src/index.ts index 30f5011b7..e4424f679 100644 --- a/packages/react-docs/src/index.ts +++ b/packages/react-docs/src/index.ts @@ -15,6 +15,14 @@ export { Type } from './components/type'; export { DocsInfo } from './docs_info'; -export { DocsInfoConfig, DocAgnosticFormat, DoxityDocObj, DocsMenu, SupportedDocJson, TypeDocNode } from './types'; +export { + DocsInfoConfig, + DocAgnosticFormat, + DoxityDocObj, + DocsMenu, + SupportedDocJson, + TypeDocNode, + GeneratedDocJson, +} from './types'; export { constants } from './utils/constants'; diff --git a/packages/react-docs/src/types.ts b/packages/react-docs/src/types.ts index cbc774c2e..83ad157d1 100644 --- a/packages/react-docs/src/types.ts +++ b/packages/react-docs/src/types.ts @@ -10,18 +10,13 @@ export interface DocsInfoConfig { menu: DocsMenu; sections: SectionsMap; sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion; - visibleConstructors: string[]; - sectionNameToModulePath?: { [sectionName: string]: string[] }; - menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string }; contractsByVersionByNetworkId?: ContractsByVersionByNetworkId; typeConfigs?: DocsInfoTypeConfigs; } export interface DocsInfoTypeConfigs { typeNameToExternalLink?: { [typeName: string]: string }; - publicTypes?: string[]; typeNameToPrefix?: { [typeName: string]: string }; - typeNameToDocSection?: { [typeName: string]: string }; } export interface DocsMenu { @@ -292,3 +287,17 @@ export enum AbiTypes { Function = 'function', Event = 'event', } + +export interface ExportNameToTypedocName { + [exportName: string]: string; +} + +export interface Metadata { + exportPathToTypedocName: ExportNameToTypedocName; + exportPathOrder: string[]; +} + +export interface GeneratedDocJson { + metadata: Metadata; + typedocJson: TypeDocNode; +} diff --git a/packages/react-docs/src/utils/typedoc_utils.ts b/packages/react-docs/src/utils/typedoc_utils.ts index a6d938e94..1e7c29ce8 100644 --- a/packages/react-docs/src/utils/typedoc_utils.ts +++ b/packages/react-docs/src/utils/typedoc_utils.ts @@ -19,8 +19,11 @@ import { TypeParameter, TypescriptFunction, TypescriptMethod, + GeneratedDocJson, } from '../types'; +import { constants } from './constants'; + export const typeDocUtils = { isType(entity: TypeDocNode): boolean { return ( @@ -55,62 +58,68 @@ export const typeDocUtils = { }); return moduleDefinitions; }, - convertToDocAgnosticFormat(typeDocJson: TypeDocNode, docsInfo: DocsInfo): DocAgnosticFormat { - const subMenus = _.values(docsInfo.getMenu()); - const orderedSectionNames = _.flatten(subMenus); + convertToDocAgnosticFormat(generatedDocJson: GeneratedDocJson, docsInfo: DocsInfo): DocAgnosticFormat { + const exportPathOrder = generatedDocJson.metadata.exportPathOrder; + const exportPathToTypedocName = generatedDocJson.metadata.exportPathToTypedocName; + const typeDocJson = generatedDocJson.typedocJson; + + const typeDocNameOrder = _.map(exportPathOrder, exportPath => { + return exportPathToTypedocName[exportPath]; + }); + const docAgnosticFormat: DocAgnosticFormat = {}; - _.each(orderedSectionNames, sectionName => { - const modulePathsIfExists = docsInfo.getModulePathsIfExists(sectionName); - if (_.isUndefined(modulePathsIfExists)) { - return; // no-op - } - const packageDefinitions = typeDocUtils.getModuleDefinitionsBySectionName(typeDocJson, modulePathsIfExists); - let packageDefinitionWithMergedChildren; - if (_.isEmpty(packageDefinitions)) { - return; // no-op - } else if (packageDefinitions.length === 1) { - packageDefinitionWithMergedChildren = packageDefinitions[0]; - } else { - // HACK: For now, if there are two modules to display in a single section, - // we simply concat the children. This works for our limited use-case where - // we want to display types stored in two files under a single section - packageDefinitionWithMergedChildren = packageDefinitions[0]; - for (let i = 1; i < packageDefinitions.length; i++) { - packageDefinitionWithMergedChildren.children = [ - ...packageDefinitionWithMergedChildren.children, - ...packageDefinitions[i].children, - ]; + const typeEntities: TypeDocNode[] = []; + _.each(typeDocNameOrder, typeDocName => { + const fileChildIndex = _.findIndex(typeDocJson.children, child => child.name === typeDocName); + const fileChild = typeDocJson.children[fileChildIndex]; + let sectionName: string; + _.each(fileChild.children, (child, j) => { + switch (child.kindString) { + case KindString.Class: + case KindString.ObjectLiteral: { + sectionName = child.name; + docsInfo.sections[sectionName] = sectionName; + docsInfo.menu[sectionName] = [sectionName]; + const entities = child.children; + const commentObj = child.comment; + const sectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; + const docSection = typeDocUtils._convertEntitiesToDocSection(entities, docsInfo, sectionName); + docSection.comment = sectionComment; + docAgnosticFormat[sectionName] = docSection; + break; + } + case KindString.Function: { + sectionName = child.name; + docsInfo.sections[sectionName] = sectionName; + docsInfo.menu[sectionName] = [sectionName]; + const entities = [child]; + const commentObj = child.comment; + const SectionComment = !_.isUndefined(commentObj) ? commentObj.shortText : ''; + const docSection = typeDocUtils._convertEntitiesToDocSection(entities, docsInfo, sectionName); + docSection.comment = SectionComment; + docAgnosticFormat[sectionName] = docSection; + break; + } + case KindString.Interface: + case KindString.Variable: + case KindString.Enumeration: + case KindString.TypeAlias: + typeEntities.push(child); + break; + default: + throw errorUtils.spawnSwitchErr('kindString', child.kindString); } - } - - let entities; - let packageComment = ''; - // HACK: We assume 1 exported class per file - const classChildren = _.filter(packageDefinitionWithMergedChildren.children, (child: TypeDocNode) => { - return child.kindString === KindString.Class; }); - if (classChildren.length > 1 && sectionName !== 'types') { - throw new Error('`react-docs` only supports projects with 1 exported class per file'); - } - const isClassExport = packageDefinitionWithMergedChildren.children[0].kindString === KindString.Class; - const isObjectLiteralExport = - packageDefinitionWithMergedChildren.children[0].kindString === KindString.ObjectLiteral; - if (isClassExport) { - entities = packageDefinitionWithMergedChildren.children[0].children; - const commentObj = packageDefinitionWithMergedChildren.children[0].comment; - packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment; - } else if (isObjectLiteralExport) { - entities = packageDefinitionWithMergedChildren.children[0].children; - const commentObj = packageDefinitionWithMergedChildren.children[0].comment; - packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment; - } else { - entities = packageDefinitionWithMergedChildren.children; - } - - const docSection = typeDocUtils._convertEntitiesToDocSection(entities, docsInfo, sectionName); - docSection.comment = packageComment; - docAgnosticFormat[sectionName] = docSection; }); + docsInfo.sections[constants.TYPES_SECTION_NAME] = constants.TYPES_SECTION_NAME; + docsInfo.menu[constants.TYPES_SECTION_NAME] = [constants.TYPES_SECTION_NAME]; + const docSection = typeDocUtils._convertEntitiesToDocSection( + typeEntities, + docsInfo, + constants.TYPES_SECTION_NAME, + ); + docAgnosticFormat[constants.TYPES_SECTION_NAME] = docSection; + return docAgnosticFormat; }, _convertEntitiesToDocSection(entities: TypeDocNode[], docsInfo: DocsInfo, sectionName: string): DocSection { @@ -175,18 +184,16 @@ export const typeDocUtils = { case KindString.Variable: case KindString.Enumeration: case KindString.TypeAlias: - if (docsInfo.isPublicType(entity.name)) { - const customType = typeDocUtils._convertCustomType( - entity, - docsInfo.sections, - sectionName, - docsInfo.id, - ); - const seenTypeNames = _.map(docSection.types, t => t.name); - const isUnseen = !_.includes(seenTypeNames, customType.name); - if (isUnseen) { - docSection.types.push(customType); - } + const customType = typeDocUtils._convertCustomType( + entity, + docsInfo.sections, + sectionName, + docsInfo.id, + ); + const seenTypeNames = _.map(docSection.types, t => t.name); + const isUnseen = !_.includes(seenTypeNames, customType.name); + if (isUnseen) { + docSection.types.push(customType); } break; -- cgit v1.2.3