@nikpnevmatikos/html-renderer 0.1.0-alpha.3 → 0.1.0-alpha.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Html-Renderer contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Html-Renderer contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,279 +1,282 @@
-# Html-Renderer
-
-[![npm version](https://img.shields.io/npm/v/@nikpnevmatikos/html-renderer?color=blue&label=npm)](https://www.npmjs.com/package/@nikpnevmatikos/html-renderer)
-[![CI](https://github.com/NikPnevmatikos/Html-Renderer/actions/workflows/ci.yml/badge.svg)](https://github.com/NikPnevmatikos/Html-Renderer/actions/workflows/ci.yml)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
-
-A modern React Native HTML renderer, written in TypeScript with **zero native modules**. Built from scratch as a maintained alternative to the abandoned `react-native-render-html`.
-
-> **Status:** currently in alpha (`0.1.0-alpha.2`). Install with `@alpha` tag — see below.
-
-- **Zero native code** — works on iOS, Android, Web (via `react-native-web`), and Expo Go without a dev build.
-- **Fabric (new architecture) compatible** out of the box.
-- **Real CSS stylesheet support** — a `stylesheet` prop that accepts actual CSS with selectors and specificity.
-- Transient render tree model: HTML → DOM → resolved render tree → `<Text>` / `<View>` / `<Image>`.
-- Full style inheritance, CSS cascade, and the box-model basics.
-- Extensible via custom renderers, custom element models, DOM transform hooks, and per-renderer config.
-- 100+ unit tests, typed end-to-end.
-
-## Install
-
-```bash
-npm install @nikpnevmatikos/html-renderer@alpha
-```
-
-Peer dependencies: `react >= 18`, `react-native >= 0.73`.
-
-## Quick start
-
-```tsx
-import { HtmlRenderer } from '@nikpnevmatikos/html-renderer';
-
-export default function Screen() {
-  return (
-    <HtmlRenderer
-      html={`<h1>Hello</h1><p>This is <strong>bold</strong> and <a href="https://x.dev">a link</a>.</p>`}
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Description |
-|---|---|---|
-| `html` | `string` | The HTML source to render. |
-| `baseStyle` | `ResolvedStyle` | Root style inherited by all content. |
-| `stylesheet` | `string` | A CSS stylesheet with real selectors (type, class, id, descendant, child). |
-| `tagsStyles` | `Record<tag, StyleInput>` | Per-tag style override (`{ h1: {...} }`). |
-| `classesStyles` | `Record<class, StyleInput>` | Style by `class` attribute. |
-| `idsStyles` | `Record<id, StyleInput>` | Style by `id` attribute. |
-| `customRenderers` | `Record<tag, CustomRenderer>` | Replace or wrap the renderer for any tag. |
-| `customHTMLElementModels` | `Record<tag, HTMLElementModel>` | Define new tags with custom block/inline semantics and default styles. |
-| `renderersProps` | `Record<tag, Record<string, unknown>>` | Per-renderer config. Built-in consumers: `ol.startIndex`, `ul/ol.markerTextStyle`, `img.initialDimensions`. |
-| `contentWidth` | `number` | Max render width. Images wider than this scale down proportionally. |
-| `transformDom` | `(dom: DomNode[]) => DomNode[]` | Runs after parse, before build. Use for sanitization or tag rewrites. |
-| `onLinkPress` | `(href, attribs) => void` | Override the default `Linking.openURL` link handler. |
-| `ignoredDomTags` | `string[]` | Tags to drop during parse (subtree removed). |
-| `ignoredStyles` | `string[]` | CSS properties to drop. Accepts kebab-case (`background-color`) or camelCase (`backgroundColor`). |
-| `defaultTextProps` | `TextProps` | Spread onto every `<Text>`. |
-| `defaultViewProps` | `ViewProps` | Spread onto every `<View>`. |
-| `textSelectable` | `boolean` | Shortcut for `defaultTextProps.selectable = true`. |
-
-`StyleInput` is `ResolvedStyle | string` — every style map accepts either an RN-style object *or* a CSS declarations string:
-
-```tsx
-tagsStyles={{
-  h1: { color: 'red', fontSize: 24 },
-  h2: 'color: blue; font-size: 20px',   // CSS string works too
-}}
-```
-
-## Supported tags
-
-**Block:** `p`, `div`, `h1–h6`, `ul`, `ol`, `li`, `pre`, `blockquote`, `hr`, `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `caption`.
-
-**Inline:** `span`, `strong`/`b`, `em`/`i`, `u`, `s`/`del`/`strike`, `ins`, `mark`, `small`, `code`, `a`, `br`, `img`.
-
-## Supported CSS
-
-- Typography: `color`, `font-size` (px), `font-family`, `font-weight`, `font-style`, `text-align`, `text-decoration`, `line-height` (px)
-- Box model: `margin` (shorthand + individual sides), `padding` (shorthand + individual sides), `background-color`
-- Colors: hex, `rgb()`, `rgba()`, `hsl()`, named (passed through to RN's color system)
-- Units: **`px` only** for now — `em`/`rem`/`%` are not resolved yet
-
-## Examples
-
-### `stylesheet` — real CSS with selectors
-
-```tsx
-const css = `
-  article.card {
-    background-color: #fafbfc;
-    padding: 12px;
-  }
-  article.card h3 {
-    color: #1a73e8;
-  }
-  .highlight {
-    background-color: #fff3a3;
-  }
-  h1 > span {
-    font-weight: bold;
-  }
-`;
-
-<HtmlRenderer html={html} stylesheet={css} />;
-```
-
-Supports: type (`h1`), class (`.foo`), id (`#bar`), universal (`*`), compound (`h1.big#hero`), descendant (`article span`), child (`h1 > span`), selector lists (`h1, h2`). Specificity and source order work per the CSS spec.
-
-Not supported: pseudo-classes, pseudo-elements, attribute selectors, sibling combinators (`+`, `~`), `@media` queries.
-
-### Custom renderer
-
-```tsx
-import { type CustomRenderer } from '@nikpnevmatikos/html-renderer';
-
-const customRenderers: Record<string, CustomRenderer> = {
-  h1: (node, defaultRender) => (
-    <View style={{ borderBottomWidth: 2, borderBottomColor: 'blue' }}>
-      {defaultRender()}
-    </View>
-  ),
-};
-
-<HtmlRenderer html={html} customRenderers={customRenderers} />;
-```
-
-### Custom HTML element models
-
-Define your own tags that behave like real HTML:
-
-```tsx
-import { type HTMLElementModel } from '@nikpnevmatikos/html-renderer';
-
-const customHTMLElementModels: Record<string, HTMLElementModel> = {
-  'my-card': {
-    display: 'block',
-    tagDefaultStyle: { backgroundColor: '#eef', padding: 12 },
-  },
-  'x-spacer': {
-    display: 'block',
-    isVoid: true,  // ignore any children
-    tagDefaultStyle: { height: 20 },
-  },
-};
-
-<HtmlRenderer
-  html="<my-card>hello</my-card>"
-  customHTMLElementModels={customHTMLElementModels}
-/>;
-```
-
-### DOM transform hook
-
-```tsx
-import { type TransformDom } from '@nikpnevmatikos/html-renderer';
-
-const sanitize: TransformDom = (dom) => walk(dom);
-
-function walk(nodes) {
-  return nodes.map((n) => {
-    if (n.type === 'element') {
-      return { ...n, attribs: { ...n.attribs, onclick: '' }, children: walk(n.children) };
-    }
-    return n;
-  });
-}
-
-<HtmlRenderer html={html} transformDom={sanitize} />;
-```
-
-### Link handling
-
-```tsx
-import { type OnLinkPress } from '@nikpnevmatikos/html-renderer';
-
-const onLinkPress: OnLinkPress = (href, attribs) => {
-  if (attribs.target === '_blank') {
-    void Linking.openURL(href);
-  } else {
-    navigation.navigate('InAppBrowser', { url: href });
-  }
-};
-
-<HtmlRenderer html={html} onLinkPress={onLinkPress} />;
-```
-
-### Auto-fit images
-
-```tsx
-import { Dimensions } from 'react-native';
-
-const contentWidth = Dimensions.get('window').width - 32;
-
-<HtmlRenderer html={html} contentWidth={contentWidth} />;
-```
-
-### Renderers props (per-renderer config)
-
-```tsx
-<HtmlRenderer
-  html={html}
-  renderersProps={{
-    ol: { startIndex: 5, markerTextStyle: { color: '#888' } },
-    ul: { markerTextStyle: { color: 'red' } },
-    img: { initialDimensions: { width: 300, height: 200 } },
-  }}
-/>
-```
-
-## Cascade order
-
-From lowest to highest priority:
-
-```
-1. baseStyle                         (HtmlRenderer prop — root defaults)
-2. Built-in tag defaults             (h1 bold, strong bold, etc.)
-3. stylesheet matches                (by selector specificity + source order)
-4. tagsStyles                        (per-tag programmatic override)
-5. classesStyles                     (by matched class)
-6. idsStyles                         (by matched id)
-7. Inline style="..."                (highest — HTML inline always wins)
-```
-
-## How it works
-
-```
-HTML string
-  └─ parseHtml (htmlparser2)         → DOM tree
-    └─ transformDom? (optional)      → DOM tree
-      └─ buildRenderTree             → Render tree
-        └─ resolveStyles               (full cascade per element)
-          └─ hoistBlocks               (fragment inline-wrapping-block)
-            └─ collapseWhitespace      (CSS whitespace rules)
-              └─ Renderer            → <View> / <Text> / <Image>
-```
-
-Styles resolve at build time into a single `ResolvedStyle` per element. At render time, `splitStyle` partitions each style into View-applicable and Text-applicable halves and applies them to the correct component.
-
-## Current limitations
-
-Actively on the roadmap:
-
-- **No `rowspan`** on tables (colspan works).
-- **CSS units** beyond `px` — `em`, `rem`, `%` not resolved yet.
-- **Forms** — `<input>`, `<textarea>`, `<button>`, `<select>` not yet rendered (planned for core, pure-JS via RN's `TextInput` / `Pressable`).
-- **Stylesheet features** — pseudo-classes (`:first-child`, `:nth-child`), attribute selectors (`[type="text"]`), and `@media` queries not yet supported.
-- **Advanced CSS** — transforms, opacity, individual `border-*` sides, `border-radius`, flex/grid display modes.
-- **Intrinsic table column widths** — columns render equal-width (`flex: 1`); `width` on `<col>` / cells is ignored.
-
-## Plugin packages (planned)
-
-Features that need native dependencies ship as separate packages so the core stays zero-native-modules. Each uses the core's `customRenderers` and `customHTMLElementModels` APIs — no core changes needed to add them.
-
-| Tags | Planned package | Native peer dep |
-|---|---|---|
-| `<iframe>` | `@nikpnevmatikos/html-renderer-webview` | `react-native-webview` |
-| `<video>`, `<audio>` | `@nikpnevmatikos/html-renderer-video` | `expo-video` or `react-native-video` |
-| `<svg>` | `@nikpnevmatikos/html-renderer-svg` | `react-native-svg` |
-
-Until these ship, you can wire any of these tags yourself via `customRenderers` — the same API the plugins will use. See the "Custom renderer" and "Custom HTML element models" examples above.
-
-## Development
-
-```bash
-npm install           # installs all workspace deps
-npm run dev           # tsc --watch on core
-npm test              # jest — 100+ tests
-npm run typecheck     # tsc --noEmit on core
-npm run build         # build core to dist
-
-# live example app
-cd example && npm start
-```
-
-## License
-
-MIT — see [LICENSE](./LICENSE).
+# Html-Renderer
+
+[![npm version](https://img.shields.io/npm/v/@nikpnevmatikos/html-renderer?color=blue&label=npm)](https://www.npmjs.com/package/@nikpnevmatikos/html-renderer)
+[![CI](https://github.com/NikPnevmatikos/Html-Renderer/actions/workflows/ci.yml/badge.svg)](https://github.com/NikPnevmatikos/Html-Renderer/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+A modern React Native HTML renderer, written in TypeScript with **zero native modules**. Built from scratch as a maintained alternative to the abandoned `react-native-render-html`.
+
+> **Status:** currently in alpha (`0.1.0-alpha.4`). Install with `@alpha` tag — see below.
+
+- **Zero native code** — works on iOS, Android, Web (via `react-native-web`), and Expo Go without a dev build.
+- **Fabric (new architecture) compatible** out of the box.
+- **Real CSS stylesheet support** — a `stylesheet` prop that accepts actual CSS with selectors and specificity.
+- Transient render tree model: HTML → DOM → resolved render tree → `<Text>` / `<View>` / `<Image>`.
+- Full style inheritance, CSS cascade, and the box-model basics.
+- Extensible via custom renderers, custom element models, DOM transform hooks, and per-renderer config.
+- **Entity-encoded HTML** (`&lt;p&gt;hello&lt;/p&gt;` from CMS/API backends, even double-encoded) is auto-detected and rendered as HTML — no pre-decoding needed.
+- 100+ unit tests, typed end-to-end.
+
+## Install
+
+```bash
+npm install @nikpnevmatikos/html-renderer@alpha
+```
+
+Peer dependencies: `react >= 18`, `react-native >= 0.73`.
+
+> The `@alpha` tag is needed while the package is in prerelease. Once `0.1.0` stable is published, plain `npm install @nikpnevmatikos/html-renderer` will work.
+
+## Quick start
+
+```tsx
+import { HtmlRenderer } from '@nikpnevmatikos/html-renderer';
+
+export default function Screen() {
+  return (
+    <HtmlRenderer
+      html={`<h1>Hello</h1><p>This is <strong>bold</strong> and <a href="https://x.dev">a link</a>.</p>`}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `html` | `string` | The HTML source to render. |
+| `baseStyle` | `ResolvedStyle` | Root style inherited by all content. |
+| `stylesheet` | `string` | A CSS stylesheet with real selectors (type, class, id, descendant, child). |
+| `tagsStyles` | `Record<tag, StyleInput>` | Per-tag style override (`{ h1: {...} }`). |
+| `classesStyles` | `Record<class, StyleInput>` | Style by `class` attribute. |
+| `idsStyles` | `Record<id, StyleInput>` | Style by `id` attribute. |
+| `customRenderers` | `Record<tag, CustomRenderer>` | Replace or wrap the renderer for any tag. |
+| `customHTMLElementModels` | `Record<tag, HTMLElementModel>` | Define new tags with custom block/inline semantics and default styles. |
+| `renderersProps` | `Record<tag, Record<string, unknown>>` | Per-renderer config. Built-in consumers: `ol.startIndex`, `ul/ol.markerTextStyle`, `img.initialDimensions`. |
+| `contentWidth` | `number` | Max render width. Images wider than this scale down proportionally. |
+| `transformDom` | `(dom: DomNode[]) => DomNode[]` | Runs after parse, before build. Use for sanitization or tag rewrites. |
+| `onLinkPress` | `(href, attribs) => void` | Override the default `Linking.openURL` link handler. |
+| `ignoredDomTags` | `string[]` | Tags to drop during parse (subtree removed). |
+| `ignoredStyles` | `string[]` | CSS properties to drop. Accepts kebab-case (`background-color`) or camelCase (`backgroundColor`). |
+| `defaultTextProps` | `TextProps` | Spread onto every `<Text>`. |
+| `defaultViewProps` | `ViewProps` | Spread onto every `<View>`. |
+| `textSelectable` | `boolean` | Shortcut for `defaultTextProps.selectable = true`. |
+
+`StyleInput` is `ResolvedStyle | string` — every style map accepts either an RN-style object *or* a CSS declarations string:
+
+```tsx
+tagsStyles={{
+  h1: { color: 'red', fontSize: 24 },
+  h2: 'color: blue; font-size: 20px',   // CSS string works too
+}}
+```
+
+## Supported tags
+
+**Block:** `p`, `div`, `h1–h6`, `ul`, `ol`, `li`, `pre`, `blockquote`, `hr`, `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `caption`.
+
+**Inline:** `span`, `strong`/`b`, `em`/`i`, `u`, `s`/`del`/`strike`, `ins`, `mark`, `small`, `code`, `a`, `br`, `img`.
+
+## Supported CSS
+
+- Typography: `color`, `font-size` (px), `font-family`, `font-weight`, `font-style`, `text-align`, `text-decoration`, `line-height` (px)
+- Box model: `margin` (shorthand + individual sides), `padding` (shorthand + individual sides), `background-color`
+- Colors: hex, `rgb()`, `rgba()`, `hsl()`, named (passed through to RN's color system)
+- Units: **`px` only** for now — `em`/`rem`/`%` are not resolved yet
+
+## Examples
+
+### `stylesheet` — real CSS with selectors
+
+```tsx
+const css = `
+  article.card {
+    background-color: #fafbfc;
+    padding: 12px;
+  }
+  article.card h3 {
+    color: #1a73e8;
+  }
+  .highlight {
+    background-color: #fff3a3;
+  }
+  h1 > span {
+    font-weight: bold;
+  }
+`;
+
+<HtmlRenderer html={html} stylesheet={css} />;
+```
+
+Supports: type (`h1`), class (`.foo`), id (`#bar`), universal (`*`), compound (`h1.big#hero`), descendant (`article span`), child (`h1 > span`), selector lists (`h1, h2`). Specificity and source order work per the CSS spec.
+
+Not supported: pseudo-classes, pseudo-elements, attribute selectors, sibling combinators (`+`, `~`), `@media` queries.
+
+### Custom renderer
+
+```tsx
+import { type CustomRenderer } from '@nikpnevmatikos/html-renderer';
+
+const customRenderers: Record<string, CustomRenderer> = {
+  h1: (node, defaultRender) => (
+    <View style={{ borderBottomWidth: 2, borderBottomColor: 'blue' }}>
+      {defaultRender()}
+    </View>
+  ),
+};
+
+<HtmlRenderer html={html} customRenderers={customRenderers} />;
+```
+
+### Custom HTML element models
+
+Define your own tags that behave like real HTML:
+
+```tsx
+import { type HTMLElementModel } from '@nikpnevmatikos/html-renderer';
+
+const customHTMLElementModels: Record<string, HTMLElementModel> = {
+  'my-card': {
+    display: 'block',
+    tagDefaultStyle: { backgroundColor: '#eef', padding: 12 },
+  },
+  'x-spacer': {
+    display: 'block',
+    isVoid: true,  // ignore any children
+    tagDefaultStyle: { height: 20 },
+  },
+};
+
+<HtmlRenderer
+  html="<my-card>hello</my-card>"
+  customHTMLElementModels={customHTMLElementModels}
+/>;
+```
+
+### DOM transform hook
+
+```tsx
+import { type TransformDom } from '@nikpnevmatikos/html-renderer';
+
+const sanitize: TransformDom = (dom) => walk(dom);
+
+function walk(nodes) {
+  return nodes.map((n) => {
+    if (n.type === 'element') {
+      return { ...n, attribs: { ...n.attribs, onclick: '' }, children: walk(n.children) };
+    }
+    return n;
+  });
+}
+
+<HtmlRenderer html={html} transformDom={sanitize} />;
+```
+
+### Link handling
+
+```tsx
+import { type OnLinkPress } from '@nikpnevmatikos/html-renderer';
+
+const onLinkPress: OnLinkPress = (href, attribs) => {
+  if (attribs.target === '_blank') {
+    void Linking.openURL(href);
+  } else {
+    navigation.navigate('InAppBrowser', { url: href });
+  }
+};
+
+<HtmlRenderer html={html} onLinkPress={onLinkPress} />;
+```
+
+### Auto-fit images
+
+```tsx
+import { Dimensions } from 'react-native';
+
+const contentWidth = Dimensions.get('window').width - 32;
+
+<HtmlRenderer html={html} contentWidth={contentWidth} />;
+```
+
+### Renderers props (per-renderer config)
+
+```tsx
+<HtmlRenderer
+  html={html}
+  renderersProps={{
+    ol: { startIndex: 5, markerTextStyle: { color: '#888' } },
+    ul: { markerTextStyle: { color: 'red' } },
+    img: { initialDimensions: { width: 300, height: 200 } },
+  }}
+/>
+```
+
+## Cascade order
+
+From lowest to highest priority:
+
+```
+1. baseStyle                         (HtmlRenderer prop — root defaults)
+2. Built-in tag defaults             (h1 bold, strong bold, etc.)
+3. stylesheet matches                (by selector specificity + source order)
+4. tagsStyles                        (per-tag programmatic override)
+5. classesStyles                     (by matched class)
+6. idsStyles                         (by matched id)
+7. Inline style="..."                (highest — HTML inline always wins)
+```
+
+## How it works
+
+```
+HTML string
+  └─ parseHtml (htmlparser2)         → DOM tree
+    └─ transformDom? (optional)      → DOM tree
+      └─ buildRenderTree             → Render tree
+        └─ resolveStyles               (full cascade per element)
+          └─ hoistBlocks               (fragment inline-wrapping-block)
+            └─ collapseWhitespace      (CSS whitespace rules)
+              └─ Renderer            → <View> / <Text> / <Image>
+```
+
+Styles resolve at build time into a single `ResolvedStyle` per element. At render time, `splitStyle` partitions each style into View-applicable and Text-applicable halves and applies them to the correct component.
+
+## Current limitations
+
+Actively on the roadmap:
+
+- **No `rowspan`** on tables (colspan works).
+- **CSS units** beyond `px` — `em`, `rem`, `%` not resolved yet.
+- **Forms** — `<input>`, `<textarea>`, `<button>`, `<select>` not yet rendered (planned for core, pure-JS via RN's `TextInput` / `Pressable`).
+- **Stylesheet features** — pseudo-classes (`:first-child`, `:nth-child`), attribute selectors (`[type="text"]`), and `@media` queries not yet supported.
+- **Advanced CSS** — transforms, opacity, individual `border-*` sides, `border-radius`, flex/grid display modes.
+- **Intrinsic table column widths** — columns render equal-width (`flex: 1`); `width` on `<col>` / cells is ignored.
+
+## Plugin packages (planned)
+
+Features that need native dependencies ship as separate packages so the core stays zero-native-modules. Each uses the core's `customRenderers` and `customHTMLElementModels` APIs — no core changes needed to add them.
+
+| Tags | Planned package | Native peer dep |
+|---|---|---|
+| `<iframe>` | `@nikpnevmatikos/html-renderer-webview` | `react-native-webview` |
+| `<video>`, `<audio>` | `@nikpnevmatikos/html-renderer-video` | `expo-video` or `react-native-video` |
+| `<svg>` | `@nikpnevmatikos/html-renderer-svg` | `react-native-svg` |
+
+Until these ship, you can wire any of these tags yourself via `customRenderers` — the same API the plugins will use. See the "Custom renderer" and "Custom HTML element models" examples above.
+
+## Development
+
+```bash
+npm install           # installs all workspace deps
+npm run dev           # tsc --watch on core
+npm test              # jest — 100+ tests
+npm run typecheck     # tsc --noEmit on core
+npm run build         # build core to dist
+
+# live example app
+cd example && npm start
+```
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/dist/parser/parse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../src/parser/parse.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAKjD"}
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../src/parser/parse.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAUxC,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAKjD"}

package/dist/parser/parse.js

@@ -1,10 +1,31 @@
 import { parseDocument } from 'htmlparser2';
+import { decodeHTML } from 'entities';
+// An entity-encoded tag opening, e.g. "<p", "</span", "<div".
+// "(?:amp;)*" also catches double-encoded input such as "<p".
+const ENCODED_TAG = /&(?:amp;)*(?:lt|#0*60|#x0*3c);[a-zA-Z!/]/i;
+// A real tag opening, e.g. "<p" or "</span".
+const REAL_TAG = /<[a-zA-Z!/]/;
+// Bound on decode passes so nested encoding resolves without looping forever.
+const MAX_DECODE_PASSES = 3;
 export function parseHtml(html) {
-    const doc = parseDocument(html, { decodeEntities: true });
+    const doc = parseDocument(decodeIfEncoded(html), { decodeEntities: true });
     return doc.children
         .map(toDomNode)
         .filter((n) => n !== null);
 }
+/**
+ * Some backends deliver HTML entity-escaped ("&lt;p&gt;hello&lt;/p&gt;").
+ * Parsed directly that yields a single text node of literal markup, so when
+ * the input contains encoded tags but no real ones, decode it first. Input
+ * with any real tag is left untouched — there "&lt;" is intentional text.
+ */
+function decodeIfEncoded(html) {
+    let out = html;
+    for (let pass = 0; pass < MAX_DECODE_PASSES && !REAL_TAG.test(out) && ENCODED_TAG.test(out); pass++) {
+        out = decodeHTML(out);
+    }
+    return out;
+}
 function toDomNode(n) {
     if (n.type === 'text') {
         const t = n;

package/dist/parser/parse.js.map

@@ -1 +1 @@
-{"version":3,"file":"parse.js","sourceRoot":"","sources":["../../src/parser/parse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,MAAM,GAAG,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,OAAO,GAAG,CAAC,QAAQ;SAChB,GAAG,CAAC,SAAS,CAAC;SACd,MAAM,CAAC,CAAC,CAAC,EAAgB,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,SAAS,CAAC,CAAO;IACxB,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACtB,MAAM,CAAC,GAAG,CAAS,CAAC;QACpB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IACD,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACrB,MAAM,EAAE,GAAG,CAAY,CAAC;QACxB,OAAO;YACL,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE;YAC1B,QAAQ,EAAE,EAAE,CAAC,QAAQ;iBAClB,GAAG,CAAC,SAAS,CAAC;iBACd,MAAM,CAAC,CAAC,CAAC,EAAgB,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;SAC3C,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"parse.js","sourceRoot":"","sources":["../../src/parser/parse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,wEAAwE;AACxE,qEAAqE;AACrE,MAAM,WAAW,GAAG,2CAA2C,CAAC;AAChE,6CAA6C;AAC7C,MAAM,QAAQ,GAAG,aAAa,CAAC;AAC/B,8EAA8E;AAC9E,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAE5B,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,MAAM,GAAG,GAAG,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3E,OAAO,GAAG,CAAC,QAAQ;SAChB,GAAG,CAAC,SAAS,CAAC;SACd,MAAM,CAAC,CAAC,CAAC,EAAgB,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;GAKG;AACH,SAAS,eAAe,CAAC,IAAY;IACnC,IAAI,GAAG,GAAG,IAAI,CAAC;IACf,KACE,IAAI,IAAI,GAAG,CAAC,EACZ,IAAI,GAAG,iBAAiB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EACxE,IAAI,EAAE,EACN,CAAC;QACD,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAS,SAAS,CAAC,CAAO;IACxB,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACtB,MAAM,CAAC,GAAG,CAAS,CAAC;QACpB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IACD,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACrB,MAAM,EAAE,GAAG,CAAY,CAAC;QACxB,OAAO;YACL,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE;YAC1B,QAAQ,EAAE,EAAE,CAAC,QAAQ;iBAClB,GAAG,CAAC,SAAS,CAAC;iBACd,MAAM,CAAC,CAAC,CAAC,EAAgB,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;SAC3C,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/renderer/RenderedImage.js

@@ -30,8 +30,8 @@ export function RenderedImage({ node, contentWidth, initialDimensions, }) {
         return <View style={styles.placeholder}/>;
     }
     if (resolvedSize.w === 0 || resolvedSize.h === 0) {
-        return (<View style={styles.broken}>
-        <Text style={styles.brokenLabel}>{node.alt ?? '[broken image]'}</Text>
+        return (<View style={styles.broken}>
+        <Text style={styles.brokenLabel}>{node.alt ?? '[broken image]'}</Text>
       </View>);
     }
     const fitted = fit(resolvedSize.w, resolvedSize.h, contentWidth);

package/dist/renderer/Renderer.js

@@ -52,8 +52,8 @@ export function HtmlRenderer({ html, baseStyle, tagsStyles, classesStyles, idsSt
         defaultViewProps: mergedViewProps,
     };
     const parentStyle = { ...ROOT_STYLE, ...(baseStyle ?? {}) };
-    return (<View {...mergedViewProps}>
-      {renderBlockChildren(tree, parentStyle, ctx)}
+    return (<View {...mergedViewProps}>
+      {renderBlockChildren(tree, parentStyle, ctx)}
     </View>);
 }
 function groupBlockChildren(children) {
@@ -95,8 +95,8 @@ function renderSegment(seg, parentStyle, key, ctx) {
             return renderBlockElement(seg.node, key, ctx);
         case 'run': {
             const { text: tStyle } = splitStyle(parentStyle);
-            return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
-          {seg.nodes.map((n, i) => renderInline(n, i, ctx))}
+            return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
+          {seg.nodes.map((n, i) => renderInline(n, i, ctx))}
         </Text>);
         }
     }
@@ -108,8 +108,8 @@ function renderBlockElement(el, key, ctx) {
             renderersProps: ctx.renderersProps,
             contentWidth: ctx.contentWidth,
         };
-        return (<React.Fragment key={key}>
-        {custom(el, () => renderBlockDefault(el, undefined, ctx), info)}
+        return (<React.Fragment key={key}>
+        {custom(el, () => renderBlockDefault(el, undefined, ctx), info)}
       </React.Fragment>);
     }
     return renderBlockDefault(el, key, ctx);
@@ -120,41 +120,41 @@ function renderBlockDefault(el, key, ctx) {
         return (<View key={key} {...ctx.defaultViewProps} style={[styles.hr, vStyle]}/>);
     }
     if (el.tag === 'ul' || el.tag === 'ol') {
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.list, vStyle]}>
-        {renderBlockChildren(el.children, el.style, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.list, vStyle]}>
+        {renderBlockChildren(el.children, el.style, ctx)}
       </View>);
     }
     if (el.tag === 'li' && el.listMarker !== undefined) {
         const listKey = el.listOrdered ? 'ol' : 'ul';
         const listProps = ctx.renderersProps[listKey];
         const markerStyleOverride = listProps?.markerTextStyle;
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.listItem, vStyle]}>
-        <Text {...ctx.defaultTextProps} style={[tStyle, styles.listMarker, markerStyleOverride]}>
-          {el.listMarker}
-        </Text>
-        <View {...ctx.defaultViewProps} style={styles.listItemContent}>
-          {renderBlockChildren(el.children, el.style, ctx)}
-        </View>
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.listItem, vStyle]}>
+        <Text {...ctx.defaultTextProps} style={[tStyle, styles.listMarker, markerStyleOverride]}>
+          {el.listMarker}
+        </Text>
+        <View {...ctx.defaultViewProps} style={styles.listItemContent}>
+          {renderBlockChildren(el.children, el.style, ctx)}
+        </View>
       </View>);
     }
     if (el.tag === 'pre') {
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.preBlock, vStyle]}>
-        {renderBlockChildren(el.children, el.style, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.preBlock, vStyle]}>
+        {renderBlockChildren(el.children, el.style, ctx)}
       </View>);
     }
     if (el.tag === 'blockquote') {
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.blockquote, vStyle]}>
-        {renderBlockChildren(el.children, el.style, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, styles.blockquote, vStyle]}>
+        {renderBlockChildren(el.children, el.style, ctx)}
       </View>);
     }
     if (el.tag === 'table') {
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.table, vStyle]}>
-        {renderTableChildren(el.children, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.table, vStyle]}>
+        {renderTableChildren(el.children, ctx)}
       </View>);
     }
     if (el.tag === 'thead' || el.tag === 'tbody' || el.tag === 'tfoot') {
-        return (<View key={key} {...ctx.defaultViewProps}>
-        {renderTableChildren(el.children, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps}>
+        {renderTableChildren(el.children, ctx)}
       </View>);
     }
     if (el.tag === 'tr') {
@@ -164,14 +164,14 @@ function renderBlockDefault(el, key, ctx) {
         return renderTableCell(el, key, ctx);
     }
     if (el.tag === 'caption') {
-        return (<View key={key} {...ctx.defaultViewProps} style={[styles.tableCaption, vStyle]}>
-        {renderBlockChildren(el.children, el.style, ctx)}
+        return (<View key={key} {...ctx.defaultViewProps} style={[styles.tableCaption, vStyle]}>
+        {renderBlockChildren(el.children, el.style, ctx)}
       </View>);
     }
     const a11yRole = blockA11yRole(el.tag);
     const a11yLevel = HEADING_LEVEL[el.tag];
-    return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, vStyle]} accessibilityRole={a11yRole} {...(a11yLevel !== undefined ? { 'aria-level': a11yLevel } : {})}>
-      {renderBlockChildren(el.children, el.style, ctx)}
+    return (<View key={key} {...ctx.defaultViewProps} style={[styles.block, vStyle]} accessibilityRole={a11yRole} {...(a11yLevel !== undefined ? { 'aria-level': a11yLevel } : {})}>
+      {renderBlockChildren(el.children, el.style, ctx)}
     </View>);
 }
 function blockA11yRole(tag) {
@@ -195,22 +195,22 @@ function renderTableRow(tr, key, ctx) {
             cells.push(c);
         }
     }
-    return (<View key={key} {...ctx.defaultViewProps} style={styles.tr}>
-      {cells.map((cell, i) => renderTableCell(cell, i, ctx))}
+    return (<View key={key} {...ctx.defaultViewProps} style={styles.tr}>
+      {cells.map((cell, i) => renderTableCell(cell, i, ctx))}
     </View>);
 }
 function renderTableCell(cell, key, ctx) {
     const { view: vStyle } = splitStyle(cell.style);
     const flex = cell.colSpan ?? 1;
-    return (<View key={key} {...ctx.defaultViewProps} style={[styles.tableCell, { flex }, vStyle]}>
-      {renderBlockChildren(cell.children, cell.style, ctx)}
+    return (<View key={key} {...ctx.defaultViewProps} style={[styles.tableCell, { flex }, vStyle]}>
+      {renderBlockChildren(cell.children, cell.style, ctx)}
     </View>);
 }
 function renderInline(node, key, ctx) {
     if (node.kind === 'text') {
         const { text: tStyle } = splitStyle(node.style);
-        return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
-        {node.text}
+        return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
+        {node.text}
       </Text>);
     }
     if (node.kind === 'image') {
@@ -225,8 +225,8 @@ function renderInlineElement(el, key, ctx) {
             renderersProps: ctx.renderersProps,
             contentWidth: ctx.contentWidth,
         };
-        return (<React.Fragment key={key}>
-        {custom(el, () => renderInlineDefault(el, undefined, ctx), info)}
+        return (<React.Fragment key={key}>
+        {custom(el, () => renderInlineDefault(el, undefined, ctx), info)}
       </React.Fragment>);
     }
     return renderInlineDefault(el, key, ctx);
@@ -244,12 +244,12 @@ function renderInlineDefault(el, key, ctx) {
                 else {
                     void Linking.openURL(href);
                 }
-            }}>
-        {children}
+            }}>
+        {children}
       </Text>);
     }
-    return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
-      {children}
+    return (<Text key={key} {...ctx.defaultTextProps} style={tStyle}>
+      {children}
     </Text>);
 }
 const styles = StyleSheet.create({

package/package.json

@@ -1,74 +1,75 @@
-{
-  "name": "@nikpnevmatikos/html-renderer",
-  "version": "0.1.0-alpha.3",
-  "description": "React Native HTML renderer in TypeScript — zero native modules, Fabric/Expo compatible. Supports tagsStyles, stylesheet with CSS selectors, custom renderers, and more.",
-  "author": "NikPnevmatikos",
-  "license": "MIT",
-  "homepage": "https://github.com/NikPnevmatikos/Html-Renderer#readme",
-  "bugs": {
-    "url": "https://github.com/NikPnevmatikos/Html-Renderer/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NikPnevmatikos/Html-Renderer.git",
-    "directory": "packages/core"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "react-native": "./dist/index.js",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=20"
-  },
-  "sideEffects": false,
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch --preserveWatchOutput",
-    "typecheck": "tsc --noEmit",
-    "test": "jest",
-    "clean": "rimraf dist"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "node",
-    "testMatch": [
-      "<rootDir>/src/**/*.test.ts"
-    ]
-  },
-  "keywords": [
-    "react-native",
-    "html",
-    "renderer",
-    "expo",
-    "fabric",
-    "typescript",
-    "stylesheet",
-    "css",
-    "react-native-web"
-  ],
-  "peerDependencies": {
-    "react": ">=18",
-    "react-native": ">=0.73"
-  },
-  "dependencies": {
-    "domhandler": "^5.0.3",
-    "htmlparser2": "^10.0.0"
-  },
-  "devDependencies": {
-    "@types/jest": "^29.5.14",
-    "@types/react": "~19.1.0",
-    "jest": "^29.7.0",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "ts-jest": "^29.4.9",
-    "typescript": "~5.9.2"
-  }
-}
+{
+  "name": "@nikpnevmatikos/html-renderer",
+  "version": "0.1.0-alpha.4",
+  "description": "React Native HTML renderer in TypeScript — zero native modules, Fabric/Expo compatible. Supports tagsStyles, stylesheet with CSS selectors, custom renderers, and more.",
+  "author": "NikPnevmatikos",
+  "license": "MIT",
+  "homepage": "https://github.com/NikPnevmatikos/Html-Renderer#readme",
+  "bugs": {
+    "url": "https://github.com/NikPnevmatikos/Html-Renderer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NikPnevmatikos/Html-Renderer.git",
+    "directory": "packages/core"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch --preserveWatchOutput",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "clean": "rimraf dist"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "testMatch": [
+      "<rootDir>/src/**/*.test.ts"
+    ]
+  },
+  "keywords": [
+    "react-native",
+    "html",
+    "renderer",
+    "expo",
+    "fabric",
+    "typescript",
+    "stylesheet",
+    "css",
+    "react-native-web"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73"
+  },
+  "dependencies": {
+    "domhandler": "^5.0.3",
+    "entities": "^7.0.1",
+    "htmlparser2": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/react": "~19.1.0",
+    "jest": "^29.7.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "ts-jest": "^29.4.9",
+    "typescript": "~5.9.2"
+  }
+}