[Fix, Improve] Doc-gen issues and automation #3145
Conversation
Codecov Report
@@ Coverage Diff @@
## next #3145 +/- ##
=======================================
Coverage 83.91% 83.92%
=======================================
Files 80 80
Lines 1654 1655 +1
Branches 693 693
=======================================
+ Hits 1388 1389 +1
Misses 262 262
Partials 4 4
Continue to review full report at Codecov.
|
|
✔️ Deploy Preview for react-native-elements ready! 🔨 Explore the source changes: 34e97a2 🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native-elements/deploys/611d3e6eac75f80008ba1478 😎 Browse the preview: https://deploy-preview-3145--react-native-elements.netlify.app |
5e4ca15 to
4defcea
Compare
8e1fa6f to
855cb34
Compare
…ative-elements into khushal87-dev4
| const parserOptions = { | ||
| savePropValueAsString: true, | ||
| propFilter: (prop, component) => { | ||
| // This removes the theme props(theme, updateTheme, replaceTheme) from the documentation as they are common to all | ||
| if (themeProps.includes(prop.name)) { | ||
| return false; | ||
| } | ||
|
|
||
| // To replace all the '|' in props with 'or' | ||
| // Input - TouchableOpacity | View | ||
| // Output - TouchableOpacity or View | ||
| if (prop.type && prop.type.name && prop.type.name.includes('|')) { | ||
| prop.type.name = prop.type.name.replace(/\|/g, 'or'); | ||
| } | ||
|
|
||
| // To replace all the '&' in props with 'and' | ||
| // Input - TouchableOpacity & View | ||
| // Output - TouchableOpacity and View | ||
| if (prop.type && prop.type.name && prop.type.name.includes('&')) { | ||
| prop.type.name = prop.type.name.replace(/&/g, 'and'); | ||
| } | ||
|
|
||
| // To deal with the props of type StyleProp<ViewStyle> and StyleProp<TextStyle> which breaks the markdown | ||
| // Input - StyleProp<ViewStyle> | ||
| // Output - View style(Object) | ||
| if (prop.type && prop.type.name && prop.type.name.includes('StyleProp')) { | ||
| if (prop.type.name.includes('TextStyle')) { | ||
| prop.type.name = 'Text Style(Object)'; | ||
| } else { | ||
| prop.type.name = 'View style(Object)'; | ||
| } | ||
| } | ||
|
|
||
| // To deal with the props of type Partial<> which breaks the markdown | ||
| // Input - Partial<ImageProps> | ||
| // Output - ImageProps(Object) | ||
| if (prop.type && prop.type.name && prop.type.name.includes('Partial')) { | ||
| const propName = prop.type.name; | ||
| prop.type.name = | ||
| propName.substring( | ||
| propName.lastIndexOf('<') + 1, | ||
| propName.lastIndexOf('>') | ||
| ) + '(Object)'; | ||
| } | ||
|
|
||
| // Replace the occurances of type Component/ViewComponent to React Component | ||
| // Input - Component/ViewComponent | ||
| // Output - React Component | ||
| if (prop.name === 'Component' || prop.name === 'ViewComponent') { | ||
| prop.type.name = 'React Component'; | ||
| } | ||
|
|
||
| // To replace the containerStyle props with 'typeof styles'(Object) to Style Object | ||
| // Input - typeof styles | ||
| // Output - Style Object | ||
| if (component.name === 'Slider' && prop.name === 'containerStyle') { | ||
| prop.type.name = 'Style Object'; | ||
| } | ||
|
|
||
| // To replace the animation prop to a valid type of ListItem.Accordion | ||
| // Input - { | ||
| // type?: 'timing' | 'spring'; | ||
| // duration?: number; | ||
| // } | ||
| // | boolean; | ||
| // Output - Boolean or Object | ||
| if (component.name === 'ListItem.Accordion' && prop.name == 'animation') { | ||
| prop.type.name = 'Boolean or Object'; | ||
| } | ||
|
|
||
| // To deal with the platform specific props default value in ButtonGroup | ||
| // Input - Platform.select<typeof React.Component>({ | ||
| // android: TouchableNativeFeedback, | ||
| // default: TouchableOpacity, | ||
| // }) | ||
| // Output - TouchableOpacity(ios),TouchableNativeFeedback(android),TouchableOpacity(web) | ||
| if (component.name === 'ButtonGroup' && prop.name === 'Component') { | ||
| prop.defaultValue.value = platformMappingHandler(prop.defaultValue.value); | ||
| } | ||
|
|
||
| // To replace '\r\n' which breaks the markdown for certain props to '' | ||
| if ( | ||
| prop.defaultValue && | ||
| prop.defaultValue.value && | ||
| prop.defaultValue.value.includes('\r\n') | ||
| ) { | ||
| prop.defaultValue.value = prop.defaultValue.value.replace(/\r\n/g, ''); | ||
| } | ||
|
|
||
| // To deal with the platform specific props default value in Icon | ||
| // Image - onPress ? Platform.select<typeof React.Component>({ | ||
| // android: TouchableNativeFeedback, | ||
| // default: TouchableHighlight, | ||
| // }) | View | ||
| // Output - TouchableHighlight(ios),TouchableNativeFeedback(android),TouchableHighlight(web) | View | ||
| if (component.name === 'Icon' && prop.name === 'Component') { | ||
| prop.defaultValue.value = | ||
| platformMappingHandler(prop.defaultValue.value) + ' | View'; | ||
| } | ||
|
|
||
| // To deal with the ViewComponent prop default value in Header | ||
| // linearGradientProps || !backgroundImage | ||
| // ? View | ||
| // : ImageBackground | ||
| // Output - ImageBackground or View Component | ||
| if (component.name === 'Header' && prop.name === 'ViewComponent') { | ||
| prop.defaultValue.value = 'ImageBackground or View Component'; | ||
| } | ||
|
|
||
| // Replace all the props with default value theme?.colors?.primary to Color(Primary) | ||
| // Input - theme?.colors?.primary | ||
| // Output - Color(Primary) | ||
| if ( | ||
| prop.defaultValue && | ||
| prop.defaultValue.value === 'theme?.colors?.primary' | ||
| ) { | ||
| prop.defaultValue.value = 'Color(Primary)'; | ||
| } | ||
|
|
||
| // To deal with the prop of default value onPress || onLongPress ? TouchableOpacity : View in Avatar | ||
| // Input - onPress || onLongPress ? TouchableOpacity : View | ||
| // Output - TouchableOpacity or View | ||
| if ( | ||
| prop.defaultValue && | ||
| prop.defaultValue.value === | ||
| 'onPress || onLongPress ? TouchableOpacity : View' | ||
| ) { | ||
| prop.defaultValue.value = 'TouchableOpacity or View'; | ||
| } | ||
|
|
||
| // Filter to show the props of the components only related to the src and ignore the props of the noe modules | ||
| if ( | ||
| prop.declarations !== undefined && | ||
| prop.declarations.length > 0 && | ||
| !componentsWithParentsTypeToBeParsed.includes(component.name) | ||
| ) { | ||
| return Boolean( | ||
| prop.declarations.find((declaration) => { | ||
| return declaration.fileName.includes(component.name); | ||
| }) | ||
| ); | ||
| } | ||
| return true; | ||
| }, |
There was a problem hiding this comment.
I am not sure whether this is maintainable in the long run.
There was a problem hiding this comment.
I know, but if we don't do this, the markdown is not parsed well with docusaurus. If we want to improve this we will have to change the code base of Typescript files such that they are parsed will with the scripts. Do you have any other solution in mind? @pranshuchittora
There was a problem hiding this comment.
I was not informed regarding this change the code base of Typescript files such that they are parsed will with the scripts 😞
There was a problem hiding this comment.
How much effort is required to make the following changes.
There was a problem hiding this comment.
This will take time, as we have to directly change the typescript logic such that code also works and auto generation of docs also works.
There was a problem hiding this comment.
@pranshuchittora We've already evaluated looking at how we can minimize adding custom props filter. @khushal87 has fixed certain things in the source code to minimize these but for some of these props, it's difficult / not possible to fix in the source code.
Anyway, let's relook into this separately & not block this PR. @khushal87
We've made sure to document these things well so it's easier for maintenance.
|
Can you pls document the process of
Create a blog inside the website. |
Update Documentation [update] khushal87 test workflow [fix] khushal87 build-workflow [fix] khushal87 build-workflow [add] khushal87 docs autogen test
7c48810 to
16086ed
Compare
|
Ready to merge. Pls resolve the conflicts |
|
@pranshuchittora done. |
This PR fixes existing issues and covers the document generation tasks which include the following:
Issues:
SpeedDialstructured to parse it as a Compound Component.Features
package.jsonto run the docgen scripts.2.0.0-beta.4.childrensarray.Eg: ListItem.Accordion
The JSON for the Accordion will be inside the ListItem
childrenskey.docgenParser.tsto fix issues with the broken markdown. These issues were due to the presence of improper JSX in markdown, irrelevant props which would be difficult to understand for users.Tags
#gsoc #docs-autogen #khushal87