@nanogiants/react-native-render-html 1.0.0

package/src/RenderHTML.spec.tsx

@@ -0,0 +1,435 @@
+/**
+ * Snapshot tests for the RenderHTML renderer.
+ *
+ * Each test renders a specific HTML fragment via React Native Testing Library
+ * and records the component tree as a snapshot. When you refactor the renderers
+ * the snapshots will tell you exactly what changed, making regressions
+ * immediately visible.
+ *
+ * Rules:
+ * - One focused HTML snippet per test (easy to understand diffs).
+ * - `renderImage` is a simple stub that renders nothing — we test structure,
+ *   not image library integration.
+ * - `renderAsync` is used (React 19 ready) so all async state updates from
+ *   Image.getSize are properly flushed inside act().
+ */
+
+import { renderAsync, screen } from '@testing-library/react-native';
+
+import { RenderHTML } from './RenderHTML';
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+const renderImage = () => null;
+
+// ---------------------------------------------------------------------------
+// Snapshots
+// ---------------------------------------------------------------------------
+
+describe('RenderHTML snapshots', () => {
+  // ── empty / trivial ───────────────────────────────────────────────────────
+
+  it('renders empty string without crashing', async () => {
+    await renderAsync(<RenderHTML html="" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a plain text node', async () => {
+    await renderAsync(<RenderHTML html="Hello world" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── headings ─────────────────────────────────────────────────────────────
+
+  it('renders h1', async () => {
+    await renderAsync(<RenderHTML html="<h1>Heading 1</h1>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders h2', async () => {
+    await renderAsync(<RenderHTML html="<h2>Heading 2</h2>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders h3', async () => {
+    await renderAsync(<RenderHTML html="<h3>Heading 3</h3>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders h4', async () => {
+    await renderAsync(<RenderHTML html="<h4>Heading 4</h4>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders h5', async () => {
+    await renderAsync(<RenderHTML html="<h5>Heading 5</h5>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders h6', async () => {
+    await renderAsync(<RenderHTML html="<h6>Heading 6</h6>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── paragraph & inline formatting ────────────────────────────────────────
+
+  it('renders a paragraph', async () => {
+    await renderAsync(<RenderHTML html="<p>A simple paragraph.</p>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders bold text', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<p><b>Bold</b> and <strong>strong</strong></p>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders italic text', async () => {
+    await renderAsync(
+      <RenderHTML html="<p><i>Italic</i> and <em>emphasis</em></p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders underline text', async () => {
+    await renderAsync(<RenderHTML html="<p><u>Underlined</u></p>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders strikethrough text', async () => {
+    await renderAsync(
+      <RenderHTML html="<p><s>Strike</s> and <del>deleted</del></p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders mark (highlight)', async () => {
+    await renderAsync(
+      <RenderHTML html="<p><mark>Highlighted</mark></p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders small text', async () => {
+    await renderAsync(
+      <RenderHTML html="<p><small>Tiny text</small></p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders superscript and subscript', async () => {
+    await renderAsync(
+      <RenderHTML html="<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders span', async () => {
+    await renderAsync(
+      <RenderHTML html="<p>Normal <span>span</span> text</p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── links ─────────────────────────────────────────────────────────────────
+
+  it('renders an internal link', async () => {
+    await renderAsync(
+      <RenderHTML html='<a href="/about">About us</a>' renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders an external link', async () => {
+    await renderAsync(
+      <RenderHTML html='<a href="https://example.com">External</a>' renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a link with no href', async () => {
+    await renderAsync(<RenderHTML html="<a>No href</a>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── div ───────────────────────────────────────────────────────────────────
+
+  it('renders a div with mixed content', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<div><p>Paragraph</p><span>Inline</span></div>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── semantic sectioning ───────────────────────────────────────────────────
+
+  it('renders main', async () => {
+    await renderAsync(
+      <RenderHTML html="<main><p>Main content</p></main>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders section', async () => {
+    await renderAsync(
+      <RenderHTML html="<section><p>Section content</p></section>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders article', async () => {
+    await renderAsync(
+      <RenderHTML html="<article><p>Article content</p></article>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders aside', async () => {
+    await renderAsync(
+      <RenderHTML html="<aside><p>Aside content</p></aside>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders nav', async () => {
+    await renderAsync(
+      <RenderHTML
+        html='<nav><a href="/home">Home</a><a href="/about">About</a></nav>'
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders header', async () => {
+    await renderAsync(
+      <RenderHTML html="<header><h1>Site Title</h1></header>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders footer', async () => {
+    await renderAsync(
+      <RenderHTML html="<footer><p>Copyright 2026</p></footer>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies tagStyles to section', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<section><p>Styled section</p></section>"
+        renderImage={renderImage}
+        tagStyles={{ section: { block: { backgroundColor: 'lightyellow', padding: 12 } } }}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── blockquote ────────────────────────────────────────────────────────────
+
+  it('renders a blockquote', async () => {
+    await renderAsync(
+      <RenderHTML html="<blockquote><p>Quoted text</p></blockquote>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── horizontal rule & line break ──────────────────────────────────────────
+
+  it('renders hr', async () => {
+    await renderAsync(
+      <RenderHTML html="<p>Before</p><hr /><p>After</p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders br between text nodes', async () => {
+    await renderAsync(
+      <RenderHTML html="<p>Line one<br />Line two</p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── code / pre ────────────────────────────────────────────────────────────
+
+  it('renders inline code', async () => {
+    await renderAsync(
+      <RenderHTML html="<p>Run <code>npm install</code> first</p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a pre block', async () => {
+    await renderAsync(<RenderHTML html="<pre>const x = 1;</pre>" renderImage={renderImage} />);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── lists ─────────────────────────────────────────────────────────────────
+
+  it('renders an unordered list', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders an ordered list', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<ol><li>First</li><li>Second</li><li>Third</li></ol>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a nested list', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<ul><li>Item 1<ul><li>Sub A</li><li>Sub B</li></ul></li><li>Item 2</li></ul>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── definition list ───────────────────────────────────────────────────────
+
+  it('renders a definition list', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<dl><dt>Term</dt><dd>Definition of the term</dd></dl>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── table ─────────────────────────────────────────────────────────────────
+
+  it('renders a simple table', async () => {
+    await renderAsync(
+      <RenderHTML
+        html={
+          '<table>' +
+          '<thead><tr><th>Name</th><th>Age</th></tr></thead>' +
+          '<tbody><tr><td>Alice</td><td>30</td></tr><tr><td>Bob</td><td>25</td></tr></tbody>' +
+          '<tfoot><tr><td>Total</td><td>2</td></tr></tfoot>' +
+          '</table>'
+        }
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── image ─────────────────────────────────────────────────────────────────
+
+  it('renders img (after Image.getSize resolves)', async () => {
+    // renderAsync flushes all async state updates (including Image.getSize
+    // callbacks) inside act(), so we get the stable post-load snapshot.
+    await renderAsync(
+      <RenderHTML
+        html='<img src="https://example.com/photo.jpg" alt="Photo" />'
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── style overrides ───────────────────────────────────────────────────────
+
+  it('applies baseStyle to text', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<p>Styled text</p>"
+        renderImage={renderImage}
+        baseStyle={{ fontSize: 18, color: 'navy' }}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies tagStyles overrides', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<h1>Custom heading</h1>"
+        renderImage={renderImage}
+        tagStyles={{ h1: { text: { color: 'red', fontSize: 40 }, block: { marginTop: 0 } } }}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies classesStyles', async () => {
+    await renderAsync(
+      <RenderHTML
+        html='<p class="highlight">Highlighted paragraph</p>'
+        renderImage={renderImage}
+        classesStyles={{
+          highlight: { text: { color: 'green' }, block: { backgroundColor: 'yellow' } },
+        }}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies listGap', async () => {
+    await renderAsync(
+      <RenderHTML html="<ul><li>A</li><li>B</li></ul>" renderImage={renderImage} listGap={8} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── unsupported / ignored tags ────────────────────────────────────────────
+
+  it('ignores script tags', async () => {
+    await renderAsync(
+      <RenderHTML
+        html="<p>Visible</p><script>alert(1)</script><p>Also visible</p>"
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('ignores style tags', async () => {
+    await renderAsync(
+      <RenderHTML html="<style>body{color:red}</style><p>Text</p>" renderImage={renderImage} />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  // ── complex document ──────────────────────────────────────────────────────
+
+  it('renders a realistic article fragment', async () => {
+    await renderAsync(
+      <RenderHTML
+        html={
+          '<h1>Article Title</h1>' +
+          '<p>An introductory paragraph with <b>bold</b>, <i>italic</i> and an ' +
+          '<a href="https://example.com">external link</a>.</p>' +
+          '<h2>Section</h2>' +
+          '<ul><li>Point one</li><li>Point two</li></ul>' +
+          '<blockquote><p>A notable quote.</p></blockquote>' +
+          '<pre>code block</pre>'
+        }
+        renderImage={renderImage}
+      />,
+    );
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+});

package/src/RenderHTML.tsx

@@ -0,0 +1,47 @@
+import { parseDocument } from 'htmlparser2';
+import { type ComponentType, type FunctionComponent, type ReactNode, useMemo } from 'react';
+import {
+  type ColorValue,
+  type ImageProps,
+  type TextProps,
+  type TextStyle,
+  View,
+} from 'react-native';
+
+import { HtmlProvider, type OnHTMLLinkPress } from './context/HtmlProvider';
+import { HTMLValidator } from './HTMLValidator';
+import { NodesRenderer } from './renderers/_NodesRenderer';
+import type { CommonProps, HtmlStyle, TagStyles } from './types';
+
+export interface RenderHTMLProps extends CommonProps {
+  html: string;
+}
+
+export const RenderHTML: FunctionComponent<RenderHTMLProps> = (props) => {
+  const nodes = useMemo(() => {
+    if (!props.html) {
+      return [];
+    }
+    const cleaned = props.html.replace(/\n/g, '');
+    const n = parseDocument(cleaned);
+    return new HTMLValidator(n.children).cleanup();
+  }, [props.html]);
+
+  return (
+    <View>
+      <HtmlProvider
+        tagStyles={props.tagStyles}
+        baseStyle={props.baseStyle}
+        classesStyles={props.classesStyles}
+        listGap={props.listGap}
+        overrideExternalLinkTintColor={props.overrideExternalLinkTintColor}
+        markerColor={props.markerColor}
+        onLinkPress={props.onLinkPress}
+        renderImage={props.renderImage}
+        renderTextComponent={props.renderTextComponent}
+      >
+        <NodesRenderer nodes={nodes} />
+      </HtmlProvider>
+    </View>
+  );
+};