feat: implement useInternalRenderer hook to reuse internal renderin…

…g logic

packages/render-html/src/elements/IMGElement.tsx

@@ -29,14 +29,14 @@ export interface IMGElementProps {
   alt?: string;
   height?: string | number;
   width?: string | number;
-  style: StyleProp<ImageStyle>;
+  style?: StyleProp<ImageStyle>;
   testID?: string;
   computeImagesMaxWidth?: (containerWidth: number) => number;
   onPress?: PressableProps['onPress'];
   altColor?: string;
-  contentWidth: number;
+  contentWidth?: number;
   enableExperimentalPercentWidth?: boolean;
-  imagesInitialDimensions: ImgDimensions;
+  imagesInitialDimensions?: ImgDimensions;
 }
 
 const defaultImageStyle: ImageStyle = { resizeMode: 'cover' };
@@ -337,7 +337,7 @@ const IMGElement = class HTMLImageElement extends PureComponent<
     testID: PropTypes.string
   };
 
-  static defaultProps: Partial<IMGElementProps> = {
+  static defaultProps = {
     enableExperimentalPercentWidth: false,
     computeImagesMaxWidth: identity,
     imagesInitialDimensions: {
@@ -484,10 +484,10 @@ const IMGElement = class HTMLImageElement extends PureComponent<
           {
             height:
               imageBoxDimensions?.height ||
-              this.props.imagesInitialDimensions.height,
+              this.props.imagesInitialDimensions?.height,
             width:
               imageBoxDimensions?.width ||
-              this.props.imagesInitialDimensions.width
+              this.props.imagesInitialDimensions?.width
           }
         ]}
         testID="image-error">
@@ -535,6 +535,6 @@ const IMGElement = class HTMLImageElement extends PureComponent<
     }
     return <View style={style}>{this.renderContent(imgStyles)}</View>;
   }
-} as ComponentClass<Partial<IMGElementProps>>;
+} as ComponentClass<IMGElementProps>;
 
 export default IMGElement;

packages/render-html/src/hooks/useInternalRenderer.ts

@@ -0,0 +1,66 @@
+import { TagName } from '@native-html/transient-render-engine';
+import { ComponentType } from 'react';
+import AElement from '../elements/AElement';
+import IMGElement from '../elements/IMGElement';
+import OLElement from '../elements/OLElement';
+import ULElement from '../elements/ULElement';
+import lookupRecord from '../helpers/lookupRecord';
+import { useAElementProps } from '../renderers/ARenderer';
+import { useIMGElementProps } from '../renderers/IMGRenderer';
+import { useOLElementProps } from '../renderers/OLRenderer';
+import { useULElementProps } from '../renderers/ULRenderer';
+import {
+  DefaultTagRendererProps,
+  TDefaultRendererProps
+} from '../shared-types';
+
+const specialRenderersConfig = {
+  img: {
+    hook: useIMGElementProps,
+    Element: IMGElement
+  },
+  ol: {
+    hook: useOLElementProps,
+    Element: OLElement
+  },
+  ul: {
+    hook: useULElementProps,
+    Element: ULElement
+  },
+  a: {
+    hook: useAElementProps,
+    Element: AElement
+  }
+};
+
+export type InternalSpecialRenderedTag = keyof typeof specialRenderersConfig;
+
+function hasSpecialInternalRenderer(
+  tagName: TagName
+): tagName is keyof typeof specialRenderersConfig {
+  return lookupRecord(specialRenderersConfig, tagName);
+}
+
+export interface InternalRendererConfig<P> {
+  Renderer: ComponentType<P>;
+  rendererProps: P;
+}
+
+export default function useInternalRenderer<T extends TagName>(
+  tagName: T,
+  props: DefaultTagRendererProps<any>
+): T extends InternalSpecialRenderedTag
+  ? InternalRendererConfig<ReturnType<typeof specialRenderersConfig[T]['hook']>>
+  : InternalRendererConfig<TDefaultRendererProps<any>> {
+  const { TDefaultRenderer, ...rendererProps } = props;
+  if (hasSpecialInternalRenderer(tagName)) {
+    return {
+      Renderer: specialRenderersConfig[tagName].Element,
+      rendererProps: specialRenderersConfig[tagName].hook(props)
+    } as any;
+  }
+  return {
+    Renderer: TDefaultRenderer,
+    rendererProps
+  } as any;
+}

packages/render-html/src/index.ts

@@ -18,6 +18,11 @@ export type { TNodeChildrenRendererProps } from './TNodeChildrenRenderer';
 export { default as TNodeRenderer } from './TNodeRenderer';
 export { default as useTRenderEngine } from './hooks/useTRenderEngine';
 export { default as useTTree } from './hooks/useTTree';
+export { default as useInternalRenderer } from './hooks/useInternalRenderer';
+export type {
+  InternalSpecialRenderedTag,
+  InternalRendererConfig
+} from './hooks/useInternalRenderer';
 export { default as defaultRenderers } from './render/defaultRenderers';
 export { default as extendDefaultRenderer } from './render/extendDefaultRenderer';
 export { default as splitBoxModelStyle } from './helpers/splitBoxModelStyle';
@@ -26,15 +31,3 @@ export {
   useRendererProps,
   useComputeMaxWidthForTag
 } from './context/SharedPropsContext';
-
-// Exports to reuse default renderers logic
-export { useAElementProps } from './renderers/ARenderer';
-export { useIMGElementProps } from './renderers/IMGRenderer';
-export { useOLElementProps } from './renderers/OLRenderer';
-export { useULElementProps } from './renderers/ULRenderer';
-
-// Exports to reuse element components
-export { default as AElement } from './elements/AElement';
-export { default as IMGElement } from './elements/IMGElement';
-export { default as OLElement } from './elements/OLElement';
-export { default as ULElement } from './elements/ULElement';