perf: bypass anonymous TPhrasing nodes with one child or less

meliorence · Jun 4, 2021 · dad450d · dad450d
1 parent 11a1d3e
commit dad450d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/packages/render-html/src/TDocumentRenderer.tsx b/packages/render-html/src/TDocumentRenderer.tsx
@@ -2,8 +2,8 @@ import React, { memo, useEffect, useMemo } from 'react';
 import { TDocument } from '@native-html/transient-render-engine';
 import { DocumentMetadata, RenderHTMLFragmentProps } from './shared-types';
 import DocumentMetadataProvider from './context/DocumentMetadataProvider';
-import { useTNodeChildrenRenderer } from './context/TChildrenRendererContext';
 import { defaultMarkers } from './helpers/getMarkersFromTNode';
+import TNodeRenderer from './TNodeRenderer';
 
 const TDocumentRenderer = memo(
   ({
@@ -15,7 +15,6 @@ const TDocumentRenderer = memo(
     baseUrl?: string;
     onDocumentMetadataLoaded?: RenderHTMLFragmentProps['onDocumentMetadataLoaded'];
   }) => {
-    const TNodeChildrenRenderer = useTNodeChildrenRenderer();
     const metadata: DocumentMetadata = useMemo(() => {
       const {
         baseHref,
@@ -49,7 +48,7 @@ const TDocumentRenderer = memo(
     );
     return (
       <DocumentMetadataProvider value={metadata}>
-        <TNodeChildrenRenderer parentMarkers={parentMarkers} tnode={tdoc} />
+        <TNodeRenderer parentMarkers={parentMarkers} tnode={tdoc} />
       </DocumentMetadataProvider>
     );
   }

diff --git a/packages/render-html/src/TNodeRenderer.tsx b/packages/render-html/src/TNodeRenderer.tsx
@@ -1,16 +1,22 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import TBlockRenderer from './TBlockRenderer';
 import TPhrasingRenderer from './TPhrasingRenderer';
 import TTextRenderer from './TTextRenderer';
-import { Markers, TNodeRendererProps } from './shared-types';
+import {
+  Markers,
+  PropsFromParent,
+  TNodeRendererProps,
+  TNodeSubRendererProps
+} from './shared-types';
 import { getMarkersFromTNode } from './helpers/getMarkersFromTNode';
 import { useSharedProps } from './context/SharedPropsProvider';
+import { TNode } from '@native-html/transient-render-engine';
 
 export type { TNodeRendererProps } from './shared-types';
 
 const TNodeRenderer = function TNodeRenderer(
   props: Omit<TNodeRendererProps<any>, 'markers'> & { parentMarkers: Markers }
-) {
+): ReactElement<TNodeSubRendererProps<TNode, PropsFromParent>> | null {
   const { tnode } = props;
   const sharedProps = useSharedProps();
   const markers = getMarkersFromTNode(tnode, props.parentMarkers);
@@ -31,7 +37,7 @@ const TNodeRenderer = function TNodeRenderer(
     sharedProps,
     markers: resolvedMarkers || props.parentMarkers
   };
-  if (tnode.type === 'block') {
+  if (tnode.type === 'block' || tnode.type === 'document') {
     return React.createElement(TBlockRenderer, tnodeProps);
   }
   if (tnode.type === 'phrasing') {

diff --git a/packages/render-html/src/TPhrasingRenderer.ts b/packages/render-html/src/TPhrasingRenderer.ts
@@ -21,12 +21,25 @@ export const TDefaultPhrasingRenderer: TDefaultRenderer<TPhrasing> = ({
   return React.createElement(TDefaultTextualRenderer, props, resolvedChildren);
 };
 
-export default function TPhrasingRenderer(
-  props: TNodeSubRendererProps<TPhrasing>
-) {
+function InnerTPhrasingRenderer(props: TNodeSubRendererProps<TPhrasing>) {
   const { assembledProps, Renderer } = useAssembledCommonProps(
     props,
     TDefaultPhrasingRenderer
   );
   return React.createElement(Renderer, assembledProps);
 }
+
+export default function TPhrasingRenderer(
+  props: TNodeSubRendererProps<TPhrasing>
+) {
+  const TNodeChildrenRenderer = useTNodeChildrenRenderer();
+  // When a TPhrasing node is anonymous and has only one child, its
+  // rendering amounts to rendering its only child.
+  if (props.tnode.tagName == null && props.tnode.children.length <= 1) {
+    return React.createElement(TNodeChildrenRenderer, {
+      parentMarkers: props.markers,
+      tnode: props.tnode
+    });
+  }
+  return React.createElement(InnerTPhrasingRenderer, props);
+}