refactor: simplify types / suggest module augmentation for extensibility

BREAKING CHANGE: A few TypeScript types names have been changed and
some type parameters have been removed for simplicity. Use module
augmentation if you need to specify `RenderersProps` or
`PropsFromParent`.

packages/render-html/src/RenderHTMLConfigProvider.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import RenderersPropsProvider from './context/RenderersPropsProvider';
 import SharedPropsProvider from './context/SharedPropsProvider';
 import TChildrenRenderersContext from './context/TChildrenRendererContext';
-import { RenderHTMLConfig, RenderersPropsBase } from './shared-types';
+import { RenderHTMLConfig } from './shared-types';
 import TNodeChildrenRenderer from './TNodeChildrenRenderer';
 import TChildrenRenderer from './TChildrenRenderer';
 import sourceLoaderContext from './context/sourceLoaderContext';
@@ -34,9 +34,13 @@ export const renderHTMLConfigPropTypes: RenderHTMLConfigPropTypes = {
   renderers: PropTypes.object
 };
 
-export default function RenderHTMLConfigProvider<
-  P extends RenderersPropsBase = RenderersPropsBase
->(props: PropsWithChildren<RenderHTMLConfig<P>>): ReactElement {
+/**
+ * A component to provide configuration for {@link RenderHTMLSource}
+ * descendants, to be used in conjunction with {@link TRenderEngineProvider}.
+ */
+export default function RenderHTMLConfigProvider(
+  props: PropsWithChildren<RenderHTMLConfig>
+): ReactElement {
   const {
     remoteErrorView,
     remoteLoadingView,

packages/render-html/src/RenderHTMLDebug.tsx

@@ -1,10 +1,10 @@
 import React, { Fragment, PropsWithChildren } from 'react';
 import debugMessage from './debugMessages';
-import { RenderersPropsBase, RenderHTMLProps } from './shared-types';
+import { RenderHTMLProps } from './shared-types';
 
-const RenderHTMLDebug = function RenderHTMLDebug<
-  P extends RenderersPropsBase = RenderersPropsBase
->(props: PropsWithChildren<RenderHTMLProps<P>>) {
+const RenderHTMLDebug = function RenderHTMLDebug(
+  props: PropsWithChildren<RenderHTMLProps>
+) {
   if (__DEV__) {
     if (typeof props.contentWidth !== 'number') {
       console.warn(debugMessage.contentWidth);

packages/render-html/src/TBlockRenderer.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { View } from 'react-native';
 import { TBlock } from '@native-html/transient-render-engine';
 import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
-import { TDefaultRenderer, TNodeSubRendererProps } from './shared-types';
+import { TDefaultRenderer } from './shared-types';
+import { TNodeSubRendererProps } from './internal-types';
 import GenericPressable from './GenericPressable';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
 

packages/render-html/src/TPhrasingRenderer.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TPhrasing } from '@native-html/transient-render-engine';
 import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
-import { TDefaultRenderer, TNodeSubRendererProps } from './shared-types';
+import { TDefaultRenderer } from './shared-types';
+import { TNodeSubRendererProps } from './internal-types';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
 import TDefaultTextualRenderer from './TDefaultTextualRenderer';
 

packages/render-html/src/TTextRenderer.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 import { TText } from '@native-html/transient-render-engine';
-import {
-  TDefaultRenderer,
-  TDefaultRendererProps,
-  TNodeSubRendererProps
-} from './shared-types';
+import { TDefaultRenderer, TDefaultRendererProps } from './shared-types';
+import { TNodeSubRendererProps } from './internal-types';
 import { useInternalTextRenderer } from './context/RenderRegistryProvider';
 import useAssembledCommonProps from './hooks/useAssembledCommonProps';
 import TDefaultTextualRenderer from './TDefaultTextualRenderer';

packages/render-html/src/__tests__/component.render-html.test.tsx

@@ -218,7 +218,9 @@ describe('RenderHTML', () => {
       const SpanRenderer: CustomTextualRenderer = ({
         TDefaultRenderer,
         ...props
-      }) => <TDefaultRenderer {...props} propsForChildren={{ test: 1 }} />;
+      }) => (
+        <TDefaultRenderer {...props} propsForChildren={{ test: 1 } as any} />
+      );
       const EmRenderer: CustomTextualRenderer = ({
         TDefaultRenderer,
         ...props
@@ -240,7 +242,9 @@ describe('RenderHTML', () => {
       const SpanRenderer: CustomTextualRenderer = ({
         TDefaultRenderer,
         ...props
-      }) => <TDefaultRenderer {...props} propsForChildren={{ test: 1 }} />;
+      }) => (
+        <TDefaultRenderer {...props} propsForChildren={{ test: 1 } as any} />
+      );
       const EmRenderer: CustomTextualRenderer = ({
         TDefaultRenderer,
         ...props

packages/render-html/src/__tests__/utils.tsx

@@ -25,7 +25,7 @@ export function expectTranslatedInlineCSSRuleTo({
   cssInlineRules: string;
   test: (v: any) => void;
   render: typeof renderTestingLib;
-  extraProps?: Partial<RenderHTMLProps<any>>;
+  extraProps?: Partial<RenderHTMLProps>;
 }) {
   const { getByText } = render(
     <RenderHTML
@@ -69,7 +69,7 @@ export function expectTranslatedInlineCSSValueToEqual({
   reactNativePropStyleName: string;
   render: typeof renderTestingLib;
   value: any;
-  extraProps?: Partial<RenderHTMLProps<any>>;
+  extraProps?: Partial<RenderHTMLProps>;
 }) {
   expectTranslatedInlineCSSRuleTo({
     cssInlineRules,

packages/render-html/src/context/RenderersPropsProvider.tsx

@@ -29,7 +29,7 @@ export function useRendererProps<
  * @internal
  */
 export default function RenderersPropsProvider(
-  props: PropsWithChildren<RenderHTMLPassedProps<RenderersPropsBase>>
+  props: PropsWithChildren<RenderHTMLPassedProps>
 ) {
   const mergedRenderersProps = useMemo(
     () => mergeDeepRight(defaultRendererProps, props.renderersProps || {}),

packages/render-html/src/context/SharedPropsProvider.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useCallback, useMemo } from 'react';
 import defaultListStyleSpecs from '../elements/defaultListStyleSpecs';
 import selectSharedProps from '../helpers/selectSharedProps';
-import { RenderHTMLSharedProps, TRendererBaseProps } from '../shared-types';
+import { RenderHTMLSharedProps, RendererBaseProps } from '../shared-types';
 import defaultSharedProps from './defaultSharedProps';
 
 const SharedPropsContext = React.createContext<Required<RenderHTMLSharedProps>>(
@@ -23,7 +23,7 @@ export function useSharedProps() {
  * @internal
  */
 export function useDefaultContainerProps(): Pick<
-  TRendererBaseProps<any>,
+  RendererBaseProps<any>,
   'viewProps' | 'textProps'
 > {
   const sharedProps = useSharedProps();

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TBlock, TPhrasing, TText } from '@native-html/transient-render-engine';
-import { DefaultTagRendererProps } from '../shared-types';
+import { InternalRendererProps } from '../shared-types';
 
 export default function AElement({
   TDefaultRenderer,
   ...props
-}: DefaultTagRendererProps<TBlock | TPhrasing | TText>) {
+}: InternalRendererProps<TBlock | TPhrasing | TText>) {
   return React.createElement(TDefaultRenderer, props);
 }

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

@@ -9,7 +9,7 @@ import {
 } from '@jsamr/react-native-li';
 import type {
   DefaultSupportedListStyleType,
-  DefaultTagRendererProps,
+  InternalRendererProps,
   ListElementConfig,
   ListStyleSpec,
   TChildProps,
@@ -20,7 +20,7 @@ import { DEFAULT_TEXT_COLOR } from '../constants';
 import pick from 'ramda/src/pick';
 
 export interface ListElementProps<T extends 'ol' | 'ul'>
-  extends DefaultTagRendererProps<TBlock>,
+  extends InternalRendererProps<TBlock>,
     ListElementConfig {
   listType: T;
   listStyleSpecs: Record<string, ListStyleSpec>;

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

@@ -1,11 +1,11 @@
 import { TNode } from '@native-html/transient-render-engine';
 import {
-  CustomTagRenderer,
-  CustomTagRendererProps,
+  CustomRenderer,
+  CustomRendererProps,
   TDefaultRenderer,
-  TDefaultRendererProps,
-  TNodeSubRendererProps
+  TDefaultRendererProps
 } from '../shared-types';
+import { TNodeSubRendererProps } from '../internal-types';
 import mergeCollapsedMargins from '../helpers/mergeCollapsedMargins';
 import { useRendererConfig } from '../context/RenderRegistryProvider';
 import { useDefaultContainerProps } from '../context/SharedPropsProvider';
@@ -17,12 +17,12 @@ export default function useAssembledCommonProps<T extends TNode>(
   { tnode, key, propsFromParent, sharedProps }: TNodeSubRendererProps<T>,
   TDefault: TDefaultRenderer<T>
 ): {
-  assembledProps: CustomTagRendererProps<T> & TDefaultRendererProps<T>;
-  Renderer: CustomTagRenderer<T>;
+  assembledProps: CustomRendererProps<T> & TDefaultRendererProps<T>;
+  Renderer: CustomRenderer<T>;
 } {
   const { Default, Custom } = useRendererConfig(tnode);
   const containerProps = useDefaultContainerProps();
-  const assembledProps: CustomTagRendererProps<T> & TDefaultRendererProps<T> = {
+  const assembledProps: CustomRendererProps<T> & TDefaultRendererProps<T> = {
     key,
     tnode,
     propsFromParent,

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

@@ -8,10 +8,7 @@ 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';
+import { InternalRendererProps, TDefaultRendererProps } from '../shared-types';
 
 const specialRenderersConfig = {
   img: {
@@ -60,7 +57,7 @@ export interface InternalRendererConfig<P> {
  */
 export default function useInternalRenderer<T extends TagName>(
   tagName: T,
-  props: DefaultTagRendererProps<any>
+  props: InternalRendererProps<any>
 ): T extends InternalSpecialRenderedTag
   ? InternalRendererConfig<ReturnType<typeof specialRenderersConfig[T]['hook']>>
   : InternalRendererConfig<TDefaultRendererProps<any>> {

packages/render-html/src/internal-types.ts

@@ -1,5 +1,10 @@
+import { TNode } from '@native-html/transient-render-engine';
 import { DOMDocument, DOMElement } from '@native-html/transient-render-engine';
-import { RenderHTMLProps } from './shared-types';
+import {
+  RenderHTMLProps,
+  TNodeRendererProps,
+  RenderHTMLSharedProps
+} from './shared-types';
 
 export type SourceLoaderProps = Pick<
   RenderHTMLProps,
@@ -15,3 +20,11 @@ export type TTreeEvents = Pick<
   RenderHTMLProps,
   'onTTreeChange' | 'onDocumentMetadataLoaded'
 >;
+
+export interface TNodeSubRendererProps<T extends TNode>
+  extends TNodeRendererProps<T> {
+  /**
+   * Props shared across the whole render tree.
+   */
+  sharedProps: Required<RenderHTMLSharedProps>;
+}

packages/render-html/src/render/RenderRegistry.ts

@@ -1,11 +1,11 @@
 import { TNode } from '@native-html/transient-render-engine';
 import { ComponentType } from 'react';
-import { CustomTagRendererProps } from '..';
+import { CustomRendererProps } from '..';
 import lookupRecord from '../helpers/lookupRecord';
 import BRRenderer from '../renderers/BRRenderer';
 import WBRRenderer from '../renderers/WBRRenderer';
 import {
-  CustomTagRenderer,
+  CustomRenderer,
   HTMLElementModelRecord,
   InternalRenderer
 } from '../shared-types';
@@ -22,7 +22,7 @@ const internalTextRenderers: Record<string, InternalTextContentRenderer> = {
 
 export interface RendererConfig<T extends TNode> {
   Default: InternalRenderer<T> | null;
-  Custom: CustomTagRenderer<T> | null;
+  Custom: CustomRenderer<T> | null;
 }
 
 export default class RenderRegistry {
@@ -63,7 +63,7 @@ export default class RenderRegistry {
 
   private getCustomRendererForTNode<T extends TNode>(
     tnode: T
-  ): ComponentType<CustomTagRendererProps<T>> | null {
+  ): ComponentType<CustomRendererProps<T>> | null {
     if (tnode.tagName! in this.customRenderers) {
       const renderer = this.customRenderers[tnode.tagName!];
       if (__DEV__) {

packages/render-html/src/render/render-types.tsx

@@ -1,10 +1,6 @@
 import { TBlock, TPhrasing, TText } from '@native-html/transient-render-engine';
 import { ComponentType } from 'react';
-import {
-  CustomTagRenderer,
-  InternalRenderer,
-  PropsFromParent
-} from '../shared-types';
+import { CustomRenderer, InternalRenderer } from '../shared-types';
 
 /**
  * Special internal renderers for non-printable text (wbr, br).
@@ -35,30 +31,22 @@ export type InternalTextualRenderer = InternalRenderer<TPhrasing | TText>;
 /**
  * Block renderers can only render tnodes of type TBlock.
  */
-export type CustomBlockRenderer<
-  P extends PropsFromParent = PropsFromParent
-> = CustomTagRenderer<TBlock, P>;
+export type CustomBlockRenderer = CustomRenderer<TBlock>;
 
 /**
  * Textual renderers can render tnodes of type TText or TPhrasing.
  */
-export type CustomTextualRenderer<
-  P extends PropsFromParent = PropsFromParent
-> = CustomTagRenderer<TText | TPhrasing, P>;
+export type CustomTextualRenderer = CustomRenderer<TText | TPhrasing>;
 
 /**
  * Mixed renderers can can render tnodes of type TText, TPhrasing or TBlock.
  */
-export type CustomMixedRenderer<
-  P extends PropsFromParent = PropsFromParent
-> = CustomTagRenderer<TBlock | TPhrasing | TText, P>;
+export type CustomMixedRenderer = CustomRenderer<TBlock | TPhrasing | TText>;
 
 /**
  * A record of custom renderers.
  */
 export type CustomTagRendererRecord = Record<
   string,
-  | CustomBlockRenderer<any>
-  | CustomTextualRenderer<any>
-  | CustomMixedRenderer<any>
+  CustomBlockRenderer | CustomTextualRenderer | CustomMixedRenderer
 >;

packages/render-html/src/renderers/ARenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InternalMixedRenderer } from '../render/render-types';
 import { TNode, DocumentContext } from '@native-html/transient-render-engine';
-import { DefaultTagRendererProps, RenderersPropsBase } from '../shared-types';
+import { InternalRendererProps, RenderersPropsBase } from '../shared-types';
 import { AccessibilityProps, GestureResponderEvent } from 'react-native';
 import AElement from '../elements/AElement';
 import useNormalizedUrl from '../hooks/useNormalizedUrl';
@@ -32,8 +32,8 @@ function useAnchorOnLinkPress(
 }
 
 export function useAElementProps<T extends TNode>(
-  props: DefaultTagRendererProps<T>
-): DefaultTagRendererProps<T> {
+  props: InternalRendererProps<T>
+): InternalRendererProps<T> {
   const { tnode } = props;
   const { onPress } = useRendererProps('a');
   const syntheticAnchorOnLinkPress = useAnchorOnLinkPress(tnode, onPress);

packages/render-html/src/renderers/IMGRenderer.tsx

@@ -4,13 +4,13 @@ import IMGElement, { IMGElementProps } from '../elements/IMGElement';
 import { InternalBlockRenderer } from '../render/render-types';
 import { useComputeMaxWidthForTag } from '../context/SharedPropsProvider';
 import { ImageStyle } from 'react-native';
-import { DefaultTagRendererProps } from '../shared-types';
+import { InternalRendererProps } from '../shared-types';
 import useNormalizedUrl from '../hooks/useNormalizedUrl';
 import { useRendererProps } from '../context/RenderersPropsProvider';
 import useContentWidth from '../hooks/useContentWidth';
 
 export function useIMGElementProps(
-  props: DefaultTagRendererProps<TBlock>
+  props: InternalRendererProps<TBlock>
 ): IMGElementProps & ClassAttributes<any> {
   const { style, tnode, onPress, key } = props;
   const contentWidth = useContentWidth();

packages/render-html/src/renderers/OLRenderer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TBlock } from '@native-html/transient-render-engine';
 import { InternalBlockRenderer } from '../render/render-types';
 import {
-  DefaultTagRendererProps,
+  InternalRendererProps,
   DefaultSupportedListStyleType
 } from '../shared-types';
 import OLElement, { OLElementProps } from '../elements/OLElement';
@@ -22,7 +22,7 @@ function getFallbackListStyleTypeFromNestLevel(
 }
 
 export function useOLElementProps(
-  props: DefaultTagRendererProps<TBlock>
+  props: InternalRendererProps<TBlock>
 ): OLElementProps {
   const listStyleSpecs = props.sharedProps.customListStyleSpecs;
   const config = useRendererProps('ol');

packages/render-html/src/renderers/ULRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InternalBlockRenderer } from '../render/render-types';
 import {
-  DefaultTagRendererProps,
+  InternalRendererProps,
   DefaultSupportedListStyleType
 } from '../shared-types';
 import { TBlock } from '@native-html/transient-render-engine';
@@ -22,7 +22,7 @@ function getFallbackListStyleTypeFromNestLevel(
 }
 
 export function useULElementProps(
-  props: DefaultTagRendererProps<TBlock>
+  props: InternalRendererProps<TBlock>
 ): ULElementProps {
   const listStyleSpecs = props.sharedProps.customListStyleSpecs;
   const config = useRendererProps('ul');