feat: access sharedProps from custom renderers

You don't need to call `useSharedProps` in custom renderers anymore.
meliorence · Jun 4, 2021 · 0d2199e · 0d2199e
1 parent 63caa4d
commit 0d2199e
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 21 deletions.
diff --git a/packages/render-html/src/RenderHTMLFragment.tsx b/packages/render-html/src/RenderHTMLFragment.tsx
@@ -54,7 +54,8 @@ export const renderHtmlFragmentPropTypes: RenderHTMLFragmentPropTypes = {
   onTTreeChange: PropTypes.func,
   onHTMLLoaded: PropTypes.func,
   WebView: PropTypes.any,
-  defaultWebViewProps: PropTypes.object
+  defaultWebViewProps: PropTypes.object,
+  setMarkersForTNode: PropTypes.func
 };
 
 export const renderHTMLFragmentDefaultProps: {

diff --git a/packages/render-html/src/TBlockRenderer.tsx b/packages/render-html/src/TBlockRenderer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { TBlock } from '@native-html/transient-render-engine';
 import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
-import { TDefaultRenderer, TNodeRendererProps } from './shared-types';
+import { TDefaultRenderer, TNodeSubRendererProps } from './shared-types';
 import GenericPressable from './GenericPressable';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
 
@@ -40,7 +40,7 @@ export const TDefaultBlockRenderer: TDefaultRenderer<TBlock> = ({
   return React.createElement(View, commonProps, children);
 };
 
-const TBlockRenderer = (props: TNodeRendererProps<TBlock>) => {
+const TBlockRenderer = (props: TNodeSubRendererProps<TBlock>) => {
   const { assembledProps, Renderer } = useAssembledCommonProps(
     props,
     TDefaultBlockRenderer

diff --git a/packages/render-html/src/TNodeRenderer.tsx b/packages/render-html/src/TNodeRenderer.tsx
@@ -18,9 +18,12 @@ const TNodeRenderer = function TNodeRenderer(
   props: Omit<TNodeRendererProps<any>, 'markers'> & { parentMarkers: Markers }
 ) {
   const { tnode } = props;
-  const { setMarkersForTNode } = useSharedProps();
+  const sharedProps = useSharedProps();
   const markers = getMarkersFromTNode(tnode, props.parentMarkers);
-  const customMarkers = setMarkersForTNode(tnode, props.parentMarkers);
+  const customMarkers = sharedProps.setMarkersForTNode(
+    tnode,
+    props.parentMarkers
+  );
   const resolvedMarkers =
     markers && !customMarkers
       ? markers
@@ -31,6 +34,7 @@ const TNodeRenderer = function TNodeRenderer(
       : null;
   const tnodeProps = {
     ...props,
+    sharedProps,
     markers: resolvedMarkers || props.parentMarkers
   };
   if (tnode instanceof TBlock) {

diff --git a/packages/render-html/src/TPhrasingRenderer.tsx b/packages/render-html/src/TPhrasingRenderer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import { TPhrasing } from '@native-html/transient-render-engine';
 import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
-import { TDefaultRenderer, TNodeRendererProps } from './shared-types';
+import { TDefaultRenderer, TNodeSubRendererProps } from './shared-types';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
 
 export const TDefaultPhrasingRenderer: TDefaultRenderer<TPhrasing> = ({
@@ -37,7 +37,7 @@ export const TDefaultPhrasingRenderer: TDefaultRenderer<TPhrasing> = ({
   );
 };
 
-const TPhrasingRenderer = (props: TNodeRendererProps<TPhrasing>) => {
+const TPhrasingRenderer = (props: TNodeSubRendererProps<TPhrasing>) => {
   const { assembledProps, Renderer } = useAssembledCommonProps(
     props,
     TDefaultPhrasingRenderer

diff --git a/packages/render-html/src/TTextRenderer.tsx b/packages/render-html/src/TTextRenderer.tsx
@@ -4,7 +4,7 @@ import { TText } from '@native-html/transient-render-engine';
 import {
   TDefaultRenderer,
   TDefaultRendererProps,
-  TNodeRendererProps
+  TNodeSubRendererProps
 } from './shared-types';
 import { useInternalTextRenderer } from './context/RenderRegistryProvider';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
@@ -28,15 +28,15 @@ export const TDefaultTextRenderer: TDefaultRenderer<TText> = ({
   );
 };
 
-function TStandardTextRenderer(props: TNodeRendererProps<TText>) {
+function TStandardTextRenderer(props: TNodeSubRendererProps<TText>) {
   const { assembledProps, Renderer } = useAssembledCommonProps(
     props,
     TDefaultTextRenderer
   );
   return React.createElement(Renderer, assembledProps);
 }
 
-export default function TTextRenderer(props: TNodeRendererProps<TText>) {
+export default function TTextRenderer(props: TNodeSubRendererProps<TText>) {
   const InternalTextRenderer = useInternalTextRenderer(props.tnode);
   if (InternalTextRenderer) {
     return React.createElement(InternalTextRenderer, { key: props.key });

diff --git a/packages/render-html/src/hooks/useAssembledCommonProps.ts b/packages/render-html/src/hooks/useAssembledCommonProps.ts
@@ -10,7 +10,7 @@ import {
   NativeStyleProp,
   TDefaultRenderer,
   TDefaultRendererProps,
-  TNodeRendererProps
+  TNodeSubRendererProps
 } from '../shared-types';
 import mergeCollapsedMargins from '../helpers/mergeCollapsedMargins';
 import { useRendererConfig } from '../context/RenderRegistryProvider';
@@ -35,7 +35,13 @@ function getStylesForTnode<T extends TNode>(tnode: T): NativeStyleProp<T> {
 }
 
 export default function useAssembledCommonProps<T extends TNode>(
-  { tnode, key, propsFromParent, markers }: TNodeRendererProps<T>,
+  {
+    tnode,
+    key,
+    propsFromParent,
+    markers,
+    sharedProps
+  }: TNodeSubRendererProps<T>,
   TDefault: TDefaultRenderer<T>
 ): {
   assembledProps: CustomTagRendererProps<T> & TDefaultRendererProps<T>;
@@ -48,6 +54,7 @@ export default function useAssembledCommonProps<T extends TNode>(
     tnode,
     markers,
     propsFromParent,
+    sharedProps,
     TDefaultRenderer: TDefault,
     style: mergeCollapsedMargins(
       propsFromParent.collapsedMarginTop,

diff --git a/packages/render-html/src/renderers/ARenderer.tsx b/packages/render-html/src/renderers/ARenderer.tsx
@@ -8,7 +8,6 @@ import {
   defaultHTMLElementModels,
   DocumentContext
 } from '@native-html/transient-render-engine';
-import { useSharedProps } from '../context/SharedPropsContext';
 import {
   DefaultTagRendererProps,
   RenderHTMLSharedProps
@@ -44,8 +43,10 @@ function useAnchorOnLinkPress(
 export function useAElementProps<T extends TNode>(
   props: DefaultTagRendererProps<T>
 ): DefaultTagRendererProps<T> {
-  const { tnode } = props;
-  const { onLinkPress } = useSharedProps();
+  const {
+    tnode,
+    sharedProps: { onLinkPress }
+  } = props;
   const syntheticAnchorOnLinkPress = useAnchorOnLinkPress(tnode, onLinkPress);
   if (typeof syntheticAnchorOnLinkPress !== 'function') {
     return props;

diff --git a/packages/render-html/src/renderers/IMGRenderer.tsx b/packages/render-html/src/renderers/IMGRenderer.tsx
@@ -2,10 +2,7 @@ import React, { ClassAttributes } from 'react';
 import { TBlock } from '@native-html/transient-render-engine';
 import IMGElement, { IMGElementProps } from '../elements/IMGElement';
 import { DefaultBlockRenderer } from '../render/render-types';
-import {
-  useComputeMaxWidthForTag,
-  useSharedProps
-} from '../context/SharedPropsContext';
+import { useComputeMaxWidthForTag } from '../context/SharedPropsContext';
 import { ImageStyle } from 'react-native';
 import { defaultHTMLElementModels } from '@native-html/transient-render-engine';
 import { DefaultTagRendererProps } from '../shared-types';
@@ -14,12 +11,12 @@ import useNormalizedUrl from '../hooks/useNormalizedUrl';
 export function useIMGElementProps(
   props: DefaultTagRendererProps<TBlock>
 ): IMGElementProps & ClassAttributes<any> {
-  const { style, tnode, onPress, key } = props;
+  const { style, tnode, onPress, key, sharedProps } = props;
   const {
     contentWidth,
     enableExperimentalPercentWidth,
     imagesInitialDimensions
-  } = useSharedProps();
+  } = sharedProps;
   const computeImagesMaxWidth = useComputeMaxWidthForTag('img');
   const src = tnode.attributes.src || '';
   return {

diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -496,6 +496,14 @@ export interface TNodeRendererProps<T extends TNode> {
   propsFromParent: PropsFromParent;
 }
 
+export interface TNodeSubRendererProps<T extends TNode>
+  extends TNodeRendererProps<T> {
+  /**
+   * Props shared across the whole render tree.
+   */
+  sharedProps: Required<RenderHTMLSharedProps<any>>;
+}
+
 export interface TRendererBaseProps<T extends TNode>
   extends TNodeRendererProps<T> {
   /**
@@ -544,6 +552,10 @@ export interface DefaultTagRendererProps<T extends TNode>
    * Styles extracted from tnode.style
    */
   style: NativeStyleProp<T>;
+  /**
+   * Props shared across the whole render tree.
+   */
+  sharedProps: Required<RenderHTMLSharedProps<any>>;
   /**
    * Default renderer for this tnode.
    */