From 8d582db1cefa48386da183f7b97d59f825630023 Mon Sep 17 00:00:00 2001 From: Surya Kant Bansal Date: Wed, 8 May 2024 09:26:53 +0530 Subject: [PATCH 1/2] remove defaultProps & propTypes --- .../src/RenderHTMLConfigProvider.tsx | 29 -------- packages/render-html/src/RenderHTMLSource.tsx | 34 --------- .../render-html/src/TChildrenRenderer.tsx | 12 ---- .../render-html/src/TNodeChildrenRenderer.tsx | 6 -- packages/render-html/src/TNodeRenderer.tsx | 11 +-- .../render-html/src/TRenderEngineProvider.tsx | 70 ------------------- .../render-html/src/elements/IMGElement.tsx | 44 ------------ .../src/elements/useIMGElementState.ts | 6 +- .../elements/useImageSpecifiedDimensions.ts | 2 +- .../render-html/src/hooks/useTRenderEngine.ts | 36 ++++++---- packages/render-html/src/index.ts | 1 - packages/render-html/src/renderChildren.tsx | 2 +- 12 files changed, 32 insertions(+), 221 deletions(-) diff --git a/packages/render-html/src/RenderHTMLConfigProvider.tsx b/packages/render-html/src/RenderHTMLConfigProvider.tsx index 0df5375f7..925062a4f 100644 --- a/packages/render-html/src/RenderHTMLConfigProvider.tsx +++ b/packages/render-html/src/RenderHTMLConfigProvider.tsx @@ -1,5 +1,4 @@ import React, { PropsWithChildren, ReactElement, useMemo } from 'react'; -import PropTypes from 'prop-types'; import RenderersPropsProvider from './context/RenderersPropsProvider'; import SharedPropsProvider from './context/SharedPropsProvider'; import TChildrenRenderersContext from './context/TChildrenRendererContext'; @@ -20,29 +19,6 @@ const childrenRendererContext = { TNodeChildrenRenderer }; -export type RenderHTMLConfigPropTypes = Record; - -export const renderHTMLConfigPropTypes: RenderHTMLConfigPropTypes = { - bypassAnonymousTPhrasingNodes: PropTypes.bool, - defaultTextProps: PropTypes.object, - defaultViewProps: PropTypes.object, - enableExperimentalBRCollapsing: PropTypes.bool, - enableExperimentalGhostLinesPrevention: PropTypes.bool, - enableExperimentalMarginCollapsing: PropTypes.bool, - remoteErrorView: PropTypes.func, - remoteLoadingView: PropTypes.func, - debug: PropTypes.bool, - computeEmbeddedMaxWidth: PropTypes.func, - renderersProps: PropTypes.object, - WebView: PropTypes.any, - GenericPressable: PropTypes.any, - defaultWebViewProps: PropTypes.object, - pressableHightlightColor: PropTypes.string, - customListStyleSpecs: PropTypes.object, - renderers: PropTypes.object, - provideEmbeddedHeaders: PropTypes.func -}; - /** * A component to provide configuration for {@link RenderHTMLSource} * descendants, to be used in conjunction with {@link TRenderEngineProvider}. @@ -85,8 +61,3 @@ export default function RenderHTMLConfigProvider( ); } - -/** - * @ignore - */ -RenderHTMLConfigProvider.propTypes = renderHTMLConfigPropTypes; diff --git a/packages/render-html/src/RenderHTMLSource.tsx b/packages/render-html/src/RenderHTMLSource.tsx index c91da52a1..f71fea73c 100644 --- a/packages/render-html/src/RenderHTMLSource.tsx +++ b/packages/render-html/src/RenderHTMLSource.tsx @@ -1,7 +1,6 @@ import equals from 'ramda/src/equals'; import React, { memo, ReactElement, useMemo } from 'react'; import { Dimensions } from 'react-native'; -import PropTypes from 'prop-types'; import ttreeEventsContext from './context/ttreeEventsContext'; import isUriSource from './helpers/isUriSource'; import { SourceLoaderProps, TTreeEvents } from './internal-types'; @@ -20,34 +19,6 @@ import contentWidthContext from './context/contentWidthContext'; import isDomSource from './helpers/isDomSource'; import useProfiler from './hooks/useProfiler'; -export type RenderHTMLSourcePropTypes = Record< - keyof RenderHTMLSourceProps, - any ->; - -export const renderSourcePropTypes: RenderHTMLSourcePropTypes = { - source: PropTypes.oneOfType([ - PropTypes.shape({ - html: PropTypes.string.isRequired, - baseUrl: PropTypes.string - }), - PropTypes.shape({ - dom: PropTypes.object.isRequired, - baseUrl: PropTypes.string - }), - PropTypes.shape({ - uri: PropTypes.string.isRequired, - method: PropTypes.string, - body: PropTypes.any, - headers: PropTypes.object - }) - ]), - onTTreeChange: PropTypes.func, - onHTMLLoaded: PropTypes.func, - onDocumentMetadataLoaded: PropTypes.func, - contentWidth: PropTypes.number -}; - function isEmptySource(source: undefined | HTMLSource) { return ( !source || @@ -136,9 +107,4 @@ const RenderHTMLSource = memo( } ); -/** - * @ignore - */ -(RenderHTMLSource as any).propTypes = renderSourcePropTypes; - export default RenderHTMLSource; diff --git a/packages/render-html/src/TChildrenRenderer.tsx b/packages/render-html/src/TChildrenRenderer.tsx index 618a59268..e12888e58 100644 --- a/packages/render-html/src/TChildrenRenderer.tsx +++ b/packages/render-html/src/TChildrenRenderer.tsx @@ -9,16 +9,4 @@ import renderChildren from './renderChildren'; const TChildrenRenderer: FunctionComponent = renderChildren.bind(null); -export const tchildrenRendererDefaultProps: Pick< - TChildrenRendererProps, - 'propsForChildren' -> = { - propsForChildren: {} -}; - -/** - * @ignore - */ -TChildrenRenderer.defaultProps = tchildrenRendererDefaultProps; - export default TChildrenRenderer; diff --git a/packages/render-html/src/TNodeChildrenRenderer.tsx b/packages/render-html/src/TNodeChildrenRenderer.tsx index bf5aef648..b820de0be 100644 --- a/packages/render-html/src/TNodeChildrenRenderer.tsx +++ b/packages/render-html/src/TNodeChildrenRenderer.tsx @@ -1,7 +1,6 @@ import { ReactElement } from 'react'; import { TNode } from '@native-html/transient-render-engine'; import { useSharedProps } from './context/SharedPropsProvider'; -import { tchildrenRendererDefaultProps } from './TChildrenRenderer'; import { TChildrenRendererProps, TNodeChildrenRendererProps @@ -73,9 +72,4 @@ function TNodeChildrenRenderer( return renderChildren(useTNodeChildrenProps(props)); } -/** - * @ignore - */ -TNodeChildrenRenderer.defaultProps = tchildrenRendererDefaultProps; - export default TNodeChildrenRenderer; diff --git a/packages/render-html/src/TNodeRenderer.tsx b/packages/render-html/src/TNodeRenderer.tsx index d32140ff3..0804ba73d 100644 --- a/packages/render-html/src/TNodeRenderer.tsx +++ b/packages/render-html/src/TNodeRenderer.tsx @@ -49,6 +49,7 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer( const renderRegistry = useRendererRegistry(); const TNodeChildrenRenderer = useTNodeChildrenRenderer(); const tnodeProps = { + propsFromParent: { collapsedMarginTop: null }, ...props, TNodeChildrenRenderer, sharedProps @@ -120,16 +121,6 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer( : React.createElement(Renderer as any, assembledProps); }); -const defaultProps: Required, 'propsFromParent'>> = - { - propsFromParent: { - collapsedMarginTop: null - } - }; - -// @ts-expect-error default props must be defined -TNodeRenderer.defaultProps = defaultProps; - export { TDefaultBlockRenderer, TDefaultPhrasingRenderer, diff --git a/packages/render-html/src/TRenderEngineProvider.tsx b/packages/render-html/src/TRenderEngineProvider.tsx index 95b60df62..96604c89f 100644 --- a/packages/render-html/src/TRenderEngineProvider.tsx +++ b/packages/render-html/src/TRenderEngineProvider.tsx @@ -1,73 +1,13 @@ import TRenderEngine from '@native-html/transient-render-engine'; import React, { PropsWithChildren, ReactElement } from 'react'; -import { Platform } from 'react-native'; -import PropTypes from 'prop-types'; import useTRenderEngine from './hooks/useTRenderEngine'; import { TRenderEngineConfig } from './shared-types'; -import defaultSystemFonts from './defaultSystemFonts'; const defaultTRenderEngine = {} as any; const TRenderEngineContext = React.createContext(defaultTRenderEngine); -export const tRenderEngineProviderPropTypes: Record< - keyof TRenderEngineConfig, - any -> = { - customHTMLElementModels: PropTypes.object.isRequired, - enableCSSInlineProcessing: PropTypes.bool, - enableUserAgentStyles: PropTypes.bool, - idsStyles: PropTypes.object, - ignoredDomTags: PropTypes.array, - ignoreDomNode: PropTypes.func, - domVisitors: PropTypes.object, - ignoredStyles: PropTypes.array.isRequired, - allowedStyles: PropTypes.array, - htmlParserOptions: PropTypes.object, - tagsStyles: PropTypes.object, - classesStyles: PropTypes.object, - emSize: PropTypes.number.isRequired, - baseStyle: PropTypes.object, - systemFonts: PropTypes.arrayOf(PropTypes.string), - fallbackFonts: PropTypes.shape({ - serif: PropTypes.string, - 'sans-serif': PropTypes.string, - monospace: PropTypes.string - }), - setMarkersForTNode: PropTypes.func, - dangerouslyDisableHoisting: PropTypes.bool, - dangerouslyDisableWhitespaceCollapsing: PropTypes.bool, - selectDomRoot: PropTypes.func -}; - -/** - * Default fallback font for special keys such as 'sans-serif', 'monospace', - * 'serif', based on current platform. - */ -export const defaultFallbackFonts = { - 'sans-serif': Platform.select({ ios: 'system', default: 'sans-serif' }), - monospace: Platform.select({ ios: 'Menlo', default: 'monospace' }), - serif: Platform.select({ ios: 'Times New Roman', default: 'serif' }) -}; - -export const defaultTRenderEngineProviderProps: TRenderEngineConfig = { - htmlParserOptions: { - decodeEntities: true - }, - emSize: 14, - ignoredDomTags: [], - ignoredStyles: [], - baseStyle: { fontSize: 14 }, - tagsStyles: {}, - classesStyles: {}, - enableUserAgentStyles: true, - enableCSSInlineProcessing: true, - customHTMLElementModels: {}, - fallbackFonts: defaultFallbackFonts, - systemFonts: defaultSystemFonts -}; - /** * Use the ambient transient render engine. * @@ -106,13 +46,3 @@ export default function TRenderEngineProvider({ ); } - -/** - * @ignore - */ -TRenderEngineProvider.defaultProps = defaultTRenderEngineProviderProps; - -/** - * @ignore - */ -TRenderEngineProvider.propTypes = tRenderEngineProviderPropTypes; diff --git a/packages/render-html/src/elements/IMGElement.tsx b/packages/render-html/src/elements/IMGElement.tsx index 573e7c15b..a6fc90b6c 100644 --- a/packages/render-html/src/elements/IMGElement.tsx +++ b/packages/render-html/src/elements/IMGElement.tsx @@ -1,19 +1,13 @@ import React, { ReactElement, ReactNode } from 'react'; -import PropTypes from 'prop-types'; import useIMGElementState from './useIMGElementState'; import IMGElementContentSuccess from './IMGElementContentSuccess'; import IMGElementContainer from './IMGElementContainer'; import IMGElementContentLoading from './IMGElementContentLoading'; import IMGElementContentError from './IMGElementContentError'; import type { IMGElementProps } from './img-types'; -import defaultImageInitialDimensions from './defaultInitialImageDimensions'; export type { IMGElementProps } from './img-types'; -function identity(arg: any) { - return arg; -} - /** * A component to render images based on an internal loading state. * @@ -44,42 +38,4 @@ function IMGElement(props: IMGElementProps): ReactElement { ); } -const imgDimensionsType = PropTypes.shape({ - width: PropTypes.number, - height: PropTypes.number -}); - -const propTypes: Record = { - source: PropTypes.object.isRequired, - alt: PropTypes.string, - altColor: PropTypes.string, - height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - computeMaxWidth: PropTypes.func.isRequired, - contentWidth: PropTypes.number, - enableExperimentalPercentWidth: PropTypes.bool, - initialDimensions: imgDimensionsType, - onPress: PropTypes.func, - testID: PropTypes.string, - objectFit: PropTypes.string, - cachedNaturalDimensions: imgDimensionsType, - containerProps: PropTypes.object -}; - -/** - * @ignore - */ -IMGElement.propTypes = propTypes; - -/** - * @ignore - */ -IMGElement.defaultProps = { - enableExperimentalPercentWidth: false, - computeMaxWidth: identity, - imagesInitialDimensions: defaultImageInitialDimensions, - style: {} -}; - export default IMGElement; diff --git a/packages/render-html/src/elements/useIMGElementState.ts b/packages/render-html/src/elements/useIMGElementState.ts index 6590d2168..4a5603e63 100644 --- a/packages/render-html/src/elements/useIMGElementState.ts +++ b/packages/render-html/src/elements/useIMGElementState.ts @@ -100,6 +100,10 @@ function useFetchedNaturalDimensions(props: { }; } +function identity(arg: any) { + return arg; +} + /** * This hook will compute concrete dimensions from image natural dimensions and * constraints. It will fetch the image and get its dimensions. @@ -116,7 +120,7 @@ export default function useIMGElementState( altColor, source, contentWidth, - computeMaxWidth, + computeMaxWidth = identity, objectFit, initialDimensions = defaultImageInitialDimensions, cachedNaturalDimensions diff --git a/packages/render-html/src/elements/useImageSpecifiedDimensions.ts b/packages/render-html/src/elements/useImageSpecifiedDimensions.ts index 5d6271b48..ef945b09d 100644 --- a/packages/render-html/src/elements/useImageSpecifiedDimensions.ts +++ b/packages/render-html/src/elements/useImageSpecifiedDimensions.ts @@ -71,7 +71,7 @@ function deriveSpecifiedDimensionsFromProps({ export default function useImageSpecifiedDimensions( props: UseIMGElementStateProps ) { - const { contentWidth, enableExperimentalPercentWidth, style, width, height } = + const { contentWidth, enableExperimentalPercentWidth = false, style = {}, width, height } = props; const flatStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]); const specifiedDimensions = useMemo( diff --git a/packages/render-html/src/hooks/useTRenderEngine.ts b/packages/render-html/src/hooks/useTRenderEngine.ts index 6f706aa47..a0450dc36 100644 --- a/packages/render-html/src/hooks/useTRenderEngine.ts +++ b/packages/render-html/src/hooks/useTRenderEngine.ts @@ -1,32 +1,44 @@ import { useMemo } from 'react'; +import { Platform } from 'react-native'; import { TRenderEngineConfig } from '../shared-types'; import buildTREFromConfig from '../helpers/buildTREFromConfig'; import useProfiler from './useProfiler'; +import defaultSystemFonts from '../defaultSystemFonts'; + +/** + * Default fallback font for special keys such as 'sans-serif', 'monospace', + * 'serif', based on current platform. + */ +export const defaultFallbackFonts = { + 'sans-serif': Platform.select({ ios: 'system', default: 'sans-serif' }), + monospace: Platform.select({ ios: 'Menlo', default: 'monospace' }), + serif: Platform.select({ ios: 'Times New Roman', default: 'serif' }) +}; /** * @internal */ export default function useTRenderEngine({ allowedStyles, - baseStyle, - classesStyles, - customHTMLElementModels, + baseStyle = { fontSize: 14 }, + classesStyles = {}, + customHTMLElementModels = {}, dangerouslyDisableHoisting, dangerouslyDisableWhitespaceCollapsing, domVisitors, - emSize, - enableCSSInlineProcessing, - enableUserAgentStyles, - fallbackFonts, - htmlParserOptions, + emSize = 14, + enableCSSInlineProcessing = true, + enableUserAgentStyles = true, + fallbackFonts = defaultFallbackFonts, + htmlParserOptions = { decodeEntities: true }, idsStyles, ignoreDomNode, - ignoredDomTags, - ignoredStyles, + ignoredDomTags = [], + ignoredStyles = [], selectDomRoot, setMarkersForTNode, - systemFonts, - tagsStyles + systemFonts = defaultSystemFonts, + tagsStyles = {} }: TRenderEngineConfig) { const profile = useProfiler({ name: 'TRenderEngineProvider' }); return useMemo(() => { diff --git a/packages/render-html/src/index.ts b/packages/render-html/src/index.ts index 856958372..b59ec49eb 100644 --- a/packages/render-html/src/index.ts +++ b/packages/render-html/src/index.ts @@ -128,7 +128,6 @@ export { export { default as TNodeRenderer } from './TNodeRenderer'; export { default as TRenderEngineProvider, - defaultFallbackFonts, useAmbientTRenderEngine } from './TRenderEngineProvider'; export { default as RenderHTMLConfigProvider } from './RenderHTMLConfigProvider'; diff --git a/packages/render-html/src/renderChildren.tsx b/packages/render-html/src/renderChildren.tsx index a66940282..d5550b6b5 100644 --- a/packages/render-html/src/renderChildren.tsx +++ b/packages/render-html/src/renderChildren.tsx @@ -39,7 +39,7 @@ const mapCollapsibleChildren = ( export default function renderChildren({ tchildren, - propsForChildren = empty, + propsForChildren = {}, disableMarginCollapsing, renderChild }: TChildrenRendererProps): ReactElement { From 19723e0c0f02f42ba237d6fd0001392e8957577a Mon Sep 17 00:00:00 2001 From: Surya Kant Bansal Date: Wed, 8 May 2024 20:12:09 +0530 Subject: [PATCH 2/2] use stable object defaultConfig --- .../render-html/src/hooks/useTRenderEngine.ts | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/render-html/src/hooks/useTRenderEngine.ts b/packages/render-html/src/hooks/useTRenderEngine.ts index a0450dc36..23db376b8 100644 --- a/packages/render-html/src/hooks/useTRenderEngine.ts +++ b/packages/render-html/src/hooks/useTRenderEngine.ts @@ -15,30 +15,45 @@ export const defaultFallbackFonts = { serif: Platform.select({ ios: 'Times New Roman', default: 'serif' }) }; +const defaultConfig = { + baseStyle: { fontSize: 14 }, + classesStyles: {}, + customHTMLElementModels: {}, + emSize: 14, + enableCSSInlineProcessing: true, + enableUserAgentStyles: true, + fallbackFonts: defaultFallbackFonts, + htmlParserOptions: { decodeEntities: true }, + ignoredDomTags: [], + ignoredStyles: [], + systemFonts: defaultSystemFonts, + tagsStyles: {} +} + /** * @internal */ export default function useTRenderEngine({ allowedStyles, - baseStyle = { fontSize: 14 }, - classesStyles = {}, - customHTMLElementModels = {}, + baseStyle = defaultConfig.baseStyle, + classesStyles = defaultConfig.classesStyles, + customHTMLElementModels = defaultConfig.customHTMLElementModels, dangerouslyDisableHoisting, dangerouslyDisableWhitespaceCollapsing, domVisitors, - emSize = 14, - enableCSSInlineProcessing = true, - enableUserAgentStyles = true, - fallbackFonts = defaultFallbackFonts, - htmlParserOptions = { decodeEntities: true }, + emSize = defaultConfig.emSize, + enableCSSInlineProcessing = defaultConfig.enableCSSInlineProcessing, + enableUserAgentStyles = defaultConfig.enableUserAgentStyles, + fallbackFonts = defaultConfig.fallbackFonts, + htmlParserOptions = defaultConfig.htmlParserOptions, idsStyles, ignoreDomNode, - ignoredDomTags = [], - ignoredStyles = [], + ignoredDomTags = defaultConfig.ignoredDomTags, + ignoredStyles = defaultConfig.ignoredStyles, selectDomRoot, setMarkersForTNode, - systemFonts = defaultSystemFonts, - tagsStyles = {} + systemFonts = defaultConfig.systemFonts, + tagsStyles = defaultConfig.tagsStyles }: TRenderEngineConfig) { const profile = useProfiler({ name: 'TRenderEngineProvider' }); return useMemo(() => {