refactor: move RenderDOM to RenderTTree

packages/render-html/src/InlineSourceLoader.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { SourceLoaderProps } from './internal-types';
+import RenderTTree from './RenderTTree';
 import { RenderHTMLSourceInline } from './shared-types';
 
 export type InlineSourceLoaderProps = {
@@ -18,11 +19,9 @@ function useInlineSourceLoader({
 }
 
 export default function InlineSourceLoader(props: InlineSourceLoaderProps) {
-  const { ResolvedHtmlRenderer: ChildrenRenderer, tamperDOM } = props;
   const { html } = useInlineSourceLoader(props);
-  return React.createElement(ChildrenRenderer, {
+  return React.createElement(RenderTTree, {
     html,
-    tamperDOM,
     baseUrl: props.source.baseUrl
   });
 }

packages/render-html/src/RenderHTMLFragment.tsx

@@ -1,21 +1,15 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { RenderHTMLFragmentProps } from './shared-types';
-import {
-  DOMProps,
-  SourceLoaderProps,
-  ResolvedHtmlRendererProps
-} from './internal-types';
+import { DOMProps, SourceLoaderProps } from './internal-types';
 import TChildrenRenderersContext from './context/TChildrenRendererContext';
 import TNodeChildrenRenderer from './TNodeChildrenRenderer';
 import RenderHTMLFragmentDebug from './RenderHTMLFragmentDebug';
 import SourceLoader from './SourceLoader';
 import TChildrenRenderer from './TChildrenRenderer';
-import RenderDOM from './RenderDOM';
 import SharedPropsProvider from './context/SharedPropsProvider';
 import defaultSharedProps from './context/defaultSharedProps';
 import RenderersPropsProvider from './context/RenderersPropsProvider';
-import { useAmbientTRenderEngine } from './TRenderEngineProvider';
 import domContext from './context/domContext';
 
 export type RenderHTMLFragmentPropTypes = Record<
@@ -53,8 +47,7 @@ export const renderHtmlFragmentPropTypes: RenderHTMLFragmentPropTypes = {
   setMarkersForTNode: PropTypes.func,
   onDocumentMetadataLoaded: PropTypes.func,
   pressableHightlightColor: PropTypes.string,
-  customListStyleSpecs: PropTypes.object,
-  tamperDOM: PropTypes.func
+  customListStyleSpecs: PropTypes.object
 };
 
 export const renderHTMLFragmentDefaultProps: {
@@ -69,20 +62,6 @@ const childrenRendererContext = {
   TNodeChildrenRenderer
 };
 
-function ResolvedHtmlRenderer({
-  baseUrl,
-  html,
-  tamperDOM
-}: ResolvedHtmlRendererProps) {
-  const engine = useAmbientTRenderEngine();
-  const dom = useMemo(() => engine.parseDocument(html, tamperDOM), [
-    engine,
-    html,
-    tamperDOM
-  ]);
-  return <RenderDOM dom={dom} baseUrl={baseUrl} />;
-}
-
 /**
  * Render a HTML snippet, given that there is a `TRenderEngineProvider` up in
  * the render tree.
@@ -101,7 +80,6 @@ export default function RenderHTMLFragment(props: RenderHTMLFragmentProps) {
     onDocumentMetadataLoaded,
     renderersProps,
     debug,
-    tamperDOM,
     ...sharedProps
   } = props;
   const domProps: DOMProps = useMemo(
@@ -116,9 +94,7 @@ export default function RenderHTMLFragment(props: RenderHTMLFragmentProps) {
     source,
     onHTMLLoaded,
     remoteErrorView,
-    remoteLoadingView,
-    tamperDOM,
-    ResolvedHtmlRenderer
+    remoteLoadingView
   };
   return (
     <RenderHTMLFragmentDebug {...props}>

packages/render-html/src/RenderDOM.tsx → packages/render-html/src/RenderTTree.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import domContext from './context/domContext';
 import useTTree from './hooks/useTTree';
-import { RenderDOMProps } from './internal-types';
+import { RenderTTreeProps } from './internal-types';
 import TDocumentRenderer from './TDocumentRenderer';
 
-export default function RenderDOM(props: RenderDOMProps) {
+export default function RenderTTree(props: RenderTTreeProps) {
   const ttree = useTTree(props);
   const { onDocumentMetadataLoaded } = useContext(domContext);
   return (

packages/render-html/src/TRenderEngineProvider.tsx

@@ -21,14 +21,12 @@ export const tRenderEngineProviderPropTypes: Record<
   enableCSSInlineProcessing: PropTypes.bool,
   enableUserAgentStyles: PropTypes.bool,
   idsStyles: PropTypes.object,
-  ignoredTags: PropTypes.array.isRequired,
+  ignoredDomTags: PropTypes.array,
+  ignoreDomNode: PropTypes.func,
+  domVisitors: PropTypes.object,
   ignoredStyles: PropTypes.array.isRequired,
   allowedStyles: PropTypes.array,
   htmlParserOptions: PropTypes.object,
-  ignoreDOMNode: PropTypes.func,
-  alterDOMData: PropTypes.func,
-  alterDOMChildren: PropTypes.func,
-  alterDOMElement: PropTypes.func,
   tagsStyles: PropTypes.object,
   classesStyles: PropTypes.object,
   emSize: PropTypes.number.isRequired,
@@ -57,7 +55,7 @@ export const defaultTRenderEngineProviderProps: TransientRenderEngineConfig = {
     decodeEntities: true
   },
   emSize: 14,
-  ignoredTags: [],
+  ignoredDomTags: [],
   ignoredStyles: [],
   baseStyle: { fontSize: 14 },
   tagsStyles: {},

packages/render-html/src/UriSourceLoader.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { RenderHTMLSourceUri } from './shared-types';
 import { SourceLoaderProps } from './internal-types';
+import RenderTTree from './RenderTTree';
 
 interface LoaderInternalState {
   loading: boolean;
@@ -74,21 +75,15 @@ function useUriSourceLoader({ source, onHTMLLoaded }: UriSourceLoaderProps) {
 }
 
 export default function UriSourceLoader(props: UriSourceLoaderProps) {
-  const {
-    remoteErrorView,
-    remoteLoadingView,
-    ResolvedHtmlRenderer: ChildrenRenderer,
-    tamperDOM
-  } = props;
+  const { remoteErrorView, remoteLoadingView } = props;
   const { resolvedHTML, error, loading } = useUriSourceLoader(props);
   if (error) {
     return remoteErrorView!.call(null, props);
   }
   if (loading) {
     return remoteLoadingView!.call(null, props);
   }
-  return React.createElement(ChildrenRenderer, {
-    tamperDOM,
+  return React.createElement(RenderTTree, {
     html: resolvedHTML!,
     baseUrl: props.source.uri
   });

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

@@ -3,8 +3,7 @@ import TRenderEngine, {
   HTMLContentModel,
   HTMLElementModel,
   HTMLModelRecord,
-  TagName,
-  DOMElement
+  TagName
 } from '@native-html/transient-render-engine';
 import { TransientRenderEngineConfig } from '../shared-types';
 import { CustomRendererSpecs } from '../render/render-types';
@@ -17,11 +16,9 @@ export default function useTRenderEngine(props: TransientRenderEngineConfig) {
   const {
     allowedStyles,
     ignoredStyles,
-    ignoredTags,
-    ignoreDOMNode,
-    alterDOMChildren,
-    alterDOMData,
-    alterDOMElement,
+    ignoredDomTags,
+    ignoreDomNode,
+    domVisitors,
     htmlParserOptions,
     baseStyle,
     classesStyles,
@@ -57,7 +54,7 @@ export default function useTRenderEngine(props: TransientRenderEngineConfig) {
     const customRenderersKeys = Object.keys(renderers) as Array<
       keyof typeof renderers
     >;
-    if (!customRenderersKeys.length && !ignoredTags?.length) {
+    if (!customRenderersKeys.length && !ignoredDomTags?.length) {
       return defaultModels;
     }
     customRenderersKeys.forEach((key) => {
@@ -124,19 +121,9 @@ export default function useTRenderEngine(props: TransientRenderEngineConfig) {
           idsStyles,
           tagsStyles
         },
-        alterDOMParams: {
-          ignoreDOMNode(node) {
-            return (
-              ((ignoredTags?.indexOf((node as DOMElement).tagName) ?? -1) !==
-                -1 ||
-                ignoreDOMNode?.call(null, node)) ??
-              false
-            );
-          },
-          alterDOMChildren,
-          alterDOMData,
-          alterDOMElement
-        }
+        ignoredDomTags,
+        ignoreDomNode,
+        domVisitors
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...tbuilderDeps, isFontSupported]

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

@@ -1,21 +1,20 @@
-import { DOMDocument } from '@native-html/transient-render-engine';
 import { useMemo, useEffect, useRef, useContext } from 'react';
 import domContext from '../context/domContext';
-import { RenderDOMProps } from '../internal-types';
+import { RenderTTreeProps } from '../internal-types';
 import { useAmbientTRenderEngine } from '../TRenderEngineProvider';
 
 /**
  * @internal
  */
-export default function useTTree(props: RenderDOMProps) {
-  const { dom } = props;
+export default function useTTree(props: RenderTTreeProps) {
+  const { html } = props;
   const { onTTreeChange, debug } = useContext(domContext);
   const updateNumber = useRef(0);
   const trenderEngine = useAmbientTRenderEngine();
-  const ttree = useMemo(
-    () => trenderEngine.buildTTreeFromDoc(dom as DOMDocument),
-    [dom, trenderEngine]
-  );
+  const ttree = useMemo(() => trenderEngine.buildTTree(html), [
+    html,
+    trenderEngine
+  ]);
   useEffect(() => {
     onTTreeChange?.call(null, ttree);
     if (debug && __DEV__) {

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

@@ -1,29 +1,16 @@
-import { DOMNode } from '@native-html/transient-render-engine';
 import { RenderHTMLProps } from './shared-types';
 
-export type ResolvedHtmlRendererProps = {
-  html: string;
-  baseUrl?: string;
-} & Pick<RenderHTMLProps, 'tamperDOM'>;
-
-export interface SourceLoaderProps
-  extends Pick<
-    RenderHTMLProps,
-    | 'source'
-    | 'remoteLoadingView'
-    | 'remoteErrorView'
-    | 'onHTMLLoaded'
-    | 'tamperDOM'
-  > {
-  ResolvedHtmlRenderer: (resource: ResolvedHtmlRendererProps) => any;
-}
+export type SourceLoaderProps = Pick<
+  RenderHTMLProps,
+  'source' | 'remoteLoadingView' | 'remoteErrorView' | 'onHTMLLoaded'
+>;
 
-export interface RenderDOMProps {
-  dom: DOMNode;
+export interface RenderTTreeProps {
+  html: string;
   baseUrl?: string;
 }
 
 export type DOMProps = Pick<
   RenderHTMLProps,
-  'onTTreeChange' | 'onDocumentMetadataLoaded' | 'debug' | 'tamperDOM'
+  'onTTreeChange' | 'onDocumentMetadataLoaded' | 'debug'
 >;