@neeleshyadav/react-native-html-renderer 1.1.0

package/src/renderer/NodeRenderer.tsx

@@ -0,0 +1,345 @@
+import { Fragment, type ReactNode } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import type {
+  DOMNode,
+  DOMElement,
+  HtmlRendererContextValue,
+  RNStyle,
+} from '../types';
+import { getDefaultTagStyles, mergeStylesForElement } from '../styles';
+import { INLINE_TAGS, TEXT_BLOCK_TAGS, isInlineContent } from '../utils';
+import { getAccessibilityProps } from '../utils/accessibility';
+import {
+  TextBlock,
+  renderInlineNodes,
+  ImageTag,
+  LinkTag,
+  ListTag,
+  TableTag,
+  BlockTag,
+  InputTag,
+  TextareaTag,
+  ButtonTag,
+  SelectTag,
+  VideoTag,
+  AudioTag,
+} from './tags';
+
+/**
+ * Recursively render an array of DOMNodes into React Native components.
+ */
+export function renderNodes(
+  nodes: DOMNode[],
+  ctx: HtmlRendererContextValue,
+  keyPrefix: string
+): ReactNode[] {
+  const defaults = getDefaultTagStyles(ctx.emSize);
+
+  return nodes
+    .map((node, index) => {
+      const key = `${keyPrefix}_${index}`;
+
+      // --- Text node ---
+      if (node.type === 'text') {
+        return (
+          <Text
+            key={key}
+            allowFontScaling={ctx.allowFontScaling}
+            maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+            {...ctx.defaultTextProps}
+          >
+            {node.data}
+          </Text>
+        );
+      }
+
+      if (node.type !== 'element') return null;
+
+      // --- Ignored tags ---
+      if (ctx.ignoredTags.has(node.tag)) return null;
+
+      // --- Compute merged style ---
+      const style = mergeStylesForElement(
+        node,
+        defaults,
+        ctx.tagsStyles,
+        ctx.classesStyles,
+        ctx.idsStyles,
+        ctx.ignoredStyles.size > 0 ? ctx.ignoredStyles : undefined,
+        ctx.allowedStyles
+      );
+
+      // --- Debug logging ---
+      if (ctx.debug) {
+        console.log(`[HtmlRenderer] <${node.tag}>`, {
+          attributes: node.attributes,
+          style,
+        });
+      }
+
+      // --- Custom renderer ---
+      const customRenderer = ctx.customRenderers[node.tag];
+      if (customRenderer) {
+        try {
+          const passProps = ctx.renderersProps[node.tag] ?? {};
+          const result = customRenderer({
+            node,
+            children: renderNodes(node.children, ctx, key),
+            style,
+            attributes: node.attributes,
+            passProps,
+            renderChildren: (childNodes) => renderNodes(childNodes, ctx, key),
+            contentWidth: ctx.contentWidth,
+          });
+          return <Fragment key={key}>{result}</Fragment>;
+        } catch (e) {
+          if (ctx.debug) {
+            console.error(
+              `[HtmlRenderer] Custom renderer for <${node.tag}> threw:`,
+              e
+            );
+          }
+          return null;
+        }
+      }
+
+      // --- Built-in tag handling ---
+      try {
+        return renderElement(node, style, key, ctx);
+      } catch (e) {
+        if (ctx.debug) {
+          console.error(`[HtmlRenderer] Error rendering <${node.tag}>:`, e);
+        }
+        return null;
+      }
+    })
+    .filter((n) => n != null);
+}
+
+function renderElement(
+  node: DOMElement,
+  style: RNStyle,
+  key: string,
+  ctx: HtmlRendererContextValue
+): ReactNode {
+  const { tag } = node;
+  const a11y = getAccessibilityProps(node);
+
+  // Debug: red border around every node
+  const debugStyle: ViewStyle | undefined = ctx.debug
+    ? { borderWidth: 1, borderColor: 'red' }
+    : undefined;
+
+  // Self-closing tags
+  if (tag === 'br') {
+    return (
+      <Text
+        key={key}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {'\n'}
+      </Text>
+    );
+  }
+
+  if (tag === 'hr') {
+    return (
+      <View
+        key={key}
+        style={[hrBaseStyle, style as ViewStyle, debugStyle]}
+        {...a11y}
+      />
+    );
+  }
+
+  // Image
+  if (tag === 'img') {
+    return (
+      <ImageTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+
+  // Link (block-level — inline links handled in renderInlineNodes)
+  if (tag === 'a') {
+    return (
+      <LinkTag
+        key={key}
+        node={node}
+        style={style}
+        nodeKey={key}
+        ctx={ctx}
+        renderNodes={renderNodes}
+      />
+    );
+  }
+
+  // Lists
+  if (tag === 'ul' || tag === 'ol') {
+    return (
+      <ListTag
+        key={key}
+        node={node}
+        style={style}
+        nodeKey={key}
+        ctx={ctx}
+        renderNodes={renderNodes}
+      />
+    );
+  }
+
+  // Table
+  if (tag === 'table') {
+    return (
+      <TableTag
+        key={key}
+        node={node}
+        style={style}
+        nodeKey={key}
+        ctx={ctx}
+        renderNodes={renderNodes}
+      />
+    );
+  }
+
+  // Table row
+  if (tag === 'tr') {
+    return (
+      <View
+        key={key}
+        style={[style as ViewStyle, { flexDirection: 'row' }]}
+        {...a11y}
+      >
+        {renderNodes(node.children, ctx, key)}
+      </View>
+    );
+  }
+
+  // Form elements (read-only)
+  if (tag === 'input') {
+    return (
+      <InputTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+  if (tag === 'textarea') {
+    return (
+      <TextareaTag
+        key={key}
+        node={node}
+        style={style}
+        nodeKey={key}
+        ctx={ctx}
+      />
+    );
+  }
+  if (tag === 'button') {
+    return (
+      <ButtonTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+  if (tag === 'select') {
+    return (
+      <SelectTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+
+  // Media placeholders
+  if (tag === 'video') {
+    return (
+      <VideoTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+  if (tag === 'audio') {
+    return (
+      <AudioTag key={key} node={node} style={style} nodeKey={key} ctx={ctx} />
+    );
+  }
+
+  // Inline tags at top level — wrap in Text
+  if (INLINE_TAGS.has(tag)) {
+    return (
+      <Text
+        key={key}
+        style={
+          debugStyle ? [style as TextStyle, debugStyle] : (style as TextStyle)
+        }
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...a11y}
+        {...ctx.defaultTextProps}
+      >
+        {renderInlineNodes(node.children, ctx, key, renderNodes)}
+      </Text>
+    );
+  }
+
+  // Text-block tags (p, h1-h6, li, td, th, pre, label)
+  if (TEXT_BLOCK_TAGS.has(tag)) {
+    return (
+      <TextBlock
+        key={key}
+        tag={tag}
+        node={node}
+        style={style}
+        children={node.children}
+        nodeKey={key}
+        ctx={ctx}
+        renderNodes={renderNodes}
+      />
+    );
+  }
+
+  // Unknown tag — log warning in debug mode
+  if (ctx.debug) {
+    console.warn(`[HtmlRenderer] Unknown tag <${tag}>, rendering children.`);
+  }
+
+  // Unknown / generic block elements — render children, never crash
+  if (node.children.length === 0) {
+    return null;
+  }
+
+  // If all children are inline, render as text
+  if (isInlineContent(node.children)) {
+    return (
+      <Text
+        key={key}
+        style={
+          debugStyle ? [style as TextStyle, debugStyle] : (style as TextStyle)
+        }
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...a11y}
+        {...ctx.defaultTextProps}
+      >
+        {renderInlineNodes(node.children, ctx, key, renderNodes)}
+      </Text>
+    );
+  }
+
+  // Otherwise render as a block container
+  return (
+    <BlockTag
+      key={key}
+      node={node}
+      style={debugStyle ? ({ ...style, ...debugStyle } as RNStyle) : style}
+      children={node.children}
+      nodeKey={key}
+      ctx={ctx}
+      renderNodes={renderNodes}
+    />
+  );
+}
+
+const hrBaseStyle: ViewStyle = {
+  width: '100%',
+  height: StyleSheet.hairlineWidth,
+  backgroundColor: '#ccc',
+};

package/src/renderer/index.tsx

@@ -0,0 +1,2 @@
+export { renderNodes } from './NodeRenderer';
+export { ErrorBoundary } from './ErrorBoundary';

package/src/renderer/tags/BlockTags.tsx

@@ -0,0 +1,49 @@
+import { memo, type ReactNode } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import type {
+  DOMNode,
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+import { getAccessibilityProps } from '../../utils/accessibility';
+
+interface BlockTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  children: DOMNode[];
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+  renderNodes: (
+    nodes: DOMNode[],
+    ctx: HtmlRendererContextValue,
+    keyPrefix: string
+  ) => ReactNode[];
+}
+
+/**
+ * Generic block-level tag renderer.
+ * Used for `<div>`, `<section>`, `<article>`, `<header>`, `<footer>`,
+ * `<main>`, `<nav>`, `<aside>`, `<blockquote>`, `<figure>`, etc.
+ */
+export const BlockTag = memo(function BlockTag({
+  node,
+  style,
+  children,
+  nodeKey,
+  ctx,
+  renderNodes,
+}: BlockTagProps) {
+  const a11y = getAccessibilityProps(node);
+
+  return (
+    <View
+      key={nodeKey}
+      style={style as ViewStyle}
+      {...a11y}
+      {...ctx.defaultViewProps}
+    >
+      {renderNodes(children, ctx, nodeKey)}
+    </View>
+  );
+});

package/src/renderer/tags/FormTags.tsx

@@ -0,0 +1,169 @@
+import { memo } from 'react';
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
+import type {
+  DOMElement,
+  RNStyle,
+  HtmlRendererContextValue,
+} from '../../types';
+import { extractTextContent } from '../../utils';
+import { getAccessibilityProps } from '../../utils/accessibility';
+
+interface FormTagProps {
+  node: DOMElement;
+  style: RNStyle;
+  nodeKey: string;
+  ctx: HtmlRendererContextValue;
+}
+
+/**
+ * Read-only renderers for form elements.
+ */
+export const InputTag = memo(function InputTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: FormTagProps) {
+  const type = node.attributes.type ?? 'text';
+  const value = node.attributes.value ?? node.attributes.placeholder ?? '';
+  const a11y = getAccessibilityProps(node);
+
+  if (type === 'hidden') return null;
+
+  if (type === 'checkbox' || type === 'radio') {
+    const checked = 'checked' in node.attributes;
+    return (
+      <Text
+        key={nodeKey}
+        style={style as TextStyle}
+        accessibilityRole={type === 'checkbox' ? 'checkbox' : 'radio'}
+        accessibilityState={{ checked }}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {type === 'checkbox'
+          ? checked
+            ? '\u2611 '
+            : '\u2610 '
+          : checked
+            ? '\u25C9 '
+            : '\u25CB '}
+      </Text>
+    );
+  }
+
+  return (
+    <View key={nodeKey} style={style as ViewStyle} {...a11y}>
+      <Text
+        style={inputText}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {value}
+      </Text>
+    </View>
+  );
+});
+
+export const TextareaTag = memo(function TextareaTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: FormTagProps) {
+  const text =
+    extractTextContent(node.children) || node.attributes.placeholder || '';
+  const a11y = getAccessibilityProps(node);
+
+  return (
+    <View key={nodeKey} style={style as ViewStyle} {...a11y}>
+      <Text
+        style={inputText}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+});
+
+export const ButtonTag = memo(function ButtonTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: FormTagProps) {
+  const label =
+    extractTextContent(node.children) || node.attributes.value || 'Button';
+
+  return (
+    <View
+      key={nodeKey}
+      style={style as ViewStyle}
+      accessibilityRole="button"
+      accessibilityLabel={node.attributes['aria-label'] ?? label}
+    >
+      <Text
+        style={buttonText}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+});
+
+export const SelectTag = memo(function SelectTag({
+  node,
+  style,
+  nodeKey,
+  ctx,
+}: FormTagProps) {
+  const options = node.children.filter(
+    (c) => c.type === 'element' && c.tag === 'option'
+  );
+  let label = '';
+  for (const opt of options) {
+    if (opt.type === 'element') {
+      if ('selected' in opt.attributes) {
+        label = extractTextContent(opt.children);
+        break;
+      }
+      if (!label) {
+        label = extractTextContent(opt.children);
+      }
+    }
+  }
+  const a11y = getAccessibilityProps(node);
+
+  return (
+    <View key={nodeKey} style={style as ViewStyle} {...a11y}>
+      <Text
+        style={inputText}
+        allowFontScaling={ctx.allowFontScaling}
+        maxFontSizeMultiplier={ctx.maxFontSizeMultiplier}
+        {...ctx.defaultTextProps}
+      >
+        {label || '\u2014'}
+      </Text>
+    </View>
+  );
+});
+
+const inputText: TextStyle = {
+  fontSize: 14,
+  color: '#333',
+};
+
+const buttonText: TextStyle = {
+  fontSize: 14,
+  color: '#fff',
+  fontWeight: '600',
+  textAlign: 'center',
+};