From 1797c43ba1dbd5437c568191e0ea8ec74aef2d48 Mon Sep 17 00:00:00 2001 From: Weronika Grzybowska Date: Wed, 12 Nov 2025 14:46:21 +0100 Subject: [PATCH 1/3] fix(doc-tools): fix build errors --- doc-tools/doc-mdx-gen-cli/build.js | 2 +- doc-tools/doc-mdx-gen-cli/package.json | 1 + .../doc-mdx-gen-cli/src/render/MDXRenderer.ts | 44 ++++++++++++++----- .../doc-mdx-gen-cli/src/render/renderMdx.ts | 6 +-- doc-tools/doc-mdx-gen-cli/tsconfig.json | 3 +- doc-tools/doc-pages/tsconfig.json | 7 +-- yarn.lock | 17 +++++++ 7 files changed, 58 insertions(+), 22 deletions(-) diff --git a/doc-tools/doc-mdx-gen-cli/build.js b/doc-tools/doc-mdx-gen-cli/build.js index 5a91d431..0d8ad55a 100644 --- a/doc-tools/doc-mdx-gen-cli/build.js +++ b/doc-tools/doc-mdx-gen-cli/build.js @@ -8,7 +8,7 @@ esbuild.build({ platform: 'node', minify: false, define: { - __DEV__: false + __DEV__: 'false' }, plugins: [ alias({ diff --git a/doc-tools/doc-mdx-gen-cli/package.json b/doc-tools/doc-mdx-gen-cli/package.json index ad11dfd4..022b2dbf 100644 --- a/doc-tools/doc-mdx-gen-cli/package.json +++ b/doc-tools/doc-mdx-gen-cli/package.json @@ -19,6 +19,7 @@ "devDependencies": { "@tsconfig/react-native": "^3.0.7", "@types/fbjs": "^3.0.11", + "@types/node": "22.19.1", "@types/react": "~19.1.0", "@types/react-reconciler": "^0.32.2", "esbuild": "^0.25.11", diff --git a/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts b/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts index c8b57e5d..e2320b43 100644 --- a/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts +++ b/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts @@ -1,4 +1,5 @@ import Reconciler from 'react-reconciler'; +import { DefaultEventPriority } from 'react-reconciler/constants'; import emptyObject from 'fbjs/lib/emptyObject'; import { createElement } from './createElement'; @@ -15,6 +16,7 @@ const MDXRenderer = Reconciler< any, any, any, + any, any >({ appendInitialChild(parentInstance, child) { @@ -46,10 +48,6 @@ const MDXRenderer = Reconciler< return null; }, - prepareUpdate() { - return true; - }, - resetAfterCommit() { // noop }, @@ -73,7 +71,7 @@ const MDXRenderer = Reconciler< preparePortalMount() {}, - supportsHydration: true, + supportsHydration: false, supportsPersistence: false, @@ -85,12 +83,6 @@ const MDXRenderer = Reconciler< noTimeout: -1, - // eslint-disable-next-line no-undef - queueMicrotask: queueMicrotask, - - //@ts-ignore - now: () => {}, - // Setting to false leads to crash... supportsMutation: true, @@ -136,6 +128,36 @@ const MDXRenderer = Reconciler< commitTextUpdate(textInstance, oldText, newText) { textInstance.children = newText; + }, + + resolveUpdatePriority() { + return DefaultEventPriority; + }, + + NotPendingTransition: undefined, + + HostTransitionContext: undefined, + + setCurrentUpdatePriority: function ( + newPriority: Reconciler.EventPriority + ): void { + // noop + }, + + getCurrentUpdatePriority: function (): Reconciler.EventPriority { + return DefaultEventPriority; + }, + + trackSchedulerEvent: function (): void { + // noop + }, + + resolveEventType: function (): null | string { + return null; + }, + + resolveEventTimeStamp: function (): number { + return -1; } }); diff --git a/doc-tools/doc-mdx-gen-cli/src/render/renderMdx.ts b/doc-tools/doc-mdx-gen-cli/src/render/renderMdx.ts index 03eb3395..6f1affb7 100644 --- a/doc-tools/doc-mdx-gen-cli/src/render/renderMdx.ts +++ b/doc-tools/doc-mdx-gen-cli/src/render/renderMdx.ts @@ -20,10 +20,10 @@ async function renderMdx( //@ts-ignore const node = MDXRenderer.createContainer(container, undefined, false); - //@ts-ignore - MDXRenderer.updateContainer(element, node, null); - try { + await new Promise((resolve) => { + MDXRenderer.updateContainer(element, node, null, resolve); + }); await fs.writeFile(filePath, container.toMdx()); } catch (e) { console.error( diff --git a/doc-tools/doc-mdx-gen-cli/tsconfig.json b/doc-tools/doc-mdx-gen-cli/tsconfig.json index ea606215..da084320 100644 --- a/doc-tools/doc-mdx-gen-cli/tsconfig.json +++ b/doc-tools/doc-mdx-gen-cli/tsconfig.json @@ -6,7 +6,8 @@ "noEmit": false, "noImplicitAny": false, "lib": ["ES2019"], - "jsx": "react" + "jsx": "react", + "types": ["node"] }, "exclude": ["node_modules", "**/__tests__", "lib", "types"] } diff --git a/doc-tools/doc-pages/tsconfig.json b/doc-tools/doc-pages/tsconfig.json index e237eb2d..1526a7f3 100644 --- a/doc-tools/doc-pages/tsconfig.json +++ b/doc-tools/doc-pages/tsconfig.json @@ -4,12 +4,7 @@ "outDir": "./lib", "target": "ESNext", "noEmit": false, - "jsx": "react", - "paths": { - "@native-html/css-processor": ["../../packages/css-processor/src"], - "@native-html/transient-render-engine": ["../../packages/transient-render-engine/src"], - "react-native-render-html": ["../../packages/render-html/src"], - } + "jsx": "react" }, "include": ["src/"], "exclude": ["**/__tests__"] diff --git a/yarn.lock b/yarn.lock index a4d36df0..f49cd89b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2827,6 +2827,7 @@ __metadata: "@doc/pages": "workspace:*" "@tsconfig/react-native": "npm:^3.0.7" "@types/fbjs": "npm:^3.0.11" + "@types/node": "npm:22.19.1" "@types/react": "npm:~19.1.0" "@types/react-reconciler": "npm:^0.32.2" commander: "npm:^14.0.1" @@ -7252,6 +7253,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:22.19.1": + version: 22.19.1 + resolution: "@types/node@npm:22.19.1" + dependencies: + undici-types: "npm:~6.21.0" + checksum: 10/40d5368faa6d9be6c27ebca2362734bc9e035a742e0b5cafee40ba3b355d7cfcaedbc93618c76465451e53f1af0c811b4b85ee9b85e2e942f34a4c5310fa047b + languageName: node + linkType: hard + "@types/node@npm:^17.0.5": version: 17.0.45 resolution: "@types/node@npm:17.0.45" @@ -26944,6 +26954,13 @@ __metadata: languageName: node linkType: hard +"undici-types@npm:~6.21.0": + version: 6.21.0 + resolution: "undici-types@npm:6.21.0" + checksum: 10/ec8f41aa4359d50f9b59fa61fe3efce3477cc681908c8f84354d8567bb3701fafdddf36ef6bff307024d3feb42c837cf6f670314ba37fc8145e219560e473d14 + languageName: node + linkType: hard + "undici-types@npm:~7.16.0": version: 7.16.0 resolution: "undici-types@npm:7.16.0" From e0301e3f0d510bd8c2a99d39c50bda1d20bd769c Mon Sep 17 00:00:00 2001 From: Weronika Grzybowska Date: Thu, 13 Nov 2025 16:54:18 +0100 Subject: [PATCH 2/3] fix(doc-tools): fix type and linter errors in @doc/mdx-gen-cli --- doc-tools/doc-mdx-gen-cli/package.json | 3 + .../src/MdxToolkitProvider.tsx | 190 +++++++++--------- doc-tools/doc-mdx-gen-cli/src/genPage.tsx | 3 +- doc-tools/doc-mdx-gen-cli/src/index.tsx | 2 +- .../doc-mdx-gen-cli/src/render/MDXRenderer.ts | 2 + .../src/render/createElement.ts | 3 +- doc-tools/doc-mdx-gen-cli/src/render/index.ts | 3 +- 7 files changed, 105 insertions(+), 101 deletions(-) diff --git a/doc-tools/doc-mdx-gen-cli/package.json b/doc-tools/doc-mdx-gen-cli/package.json index 022b2dbf..90115105 100644 --- a/doc-tools/doc-mdx-gen-cli/package.json +++ b/doc-tools/doc-mdx-gen-cli/package.json @@ -6,6 +6,9 @@ "doc-mdx-gen-cli": "bin/bundle.js" }, "scripts": { + "test": "yarn test:ts && yarn test:lint", + "test:ts": "tsc --noEmit", + "test:lint": "eslint --ext ts,tsx src/", "build": "node ./build.js", "prepack": "yarn build" }, diff --git a/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx b/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx index a685df0b..2ec3b293 100644 --- a/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx +++ b/doc-tools/doc-mdx-gen-cli/src/MdxToolkitProvider.tsx @@ -22,103 +22,103 @@ function normalizeUrl(url: string, fragment?: string) { return WEBSITE_BASE + url + normalizedFragment; } +const config: UIToolkitConfig = { + Chapter, + Section: ({ children, title }) => ( + +

{title}

+ {children} + + ), + Header, + List: ({ children, type = 'decimal' }) => ( +
    {children}
+ ), + ListItem: ({ children }) =>
  • {children}
    • , + Paragraph: ({ children }) =>

    {children}

    , + Bold: ({ children }) => {children}, + RenderHtmlCard: ({ + caption, + snippet, + expoSource, + title, + props, + preferHtmlSrc, + extraneousDeps, + snapshot + }) => { + const html = (props.source as HTMLSourceInline).html; + return ( + + ); + }, + SourceDisplay: (props) => , + TNodeTransformDisplay: ({ snaphost, ...props }) => { + return ; + }, + Admonition: ({ children, type, title }) => ( + + {children} + + ), + RefBuilder: ({ name, url, type }) => { + return ; + }, + RefDoc: ({ target, children, fragment }) => { + const linkFragments = + target.group === 'root' + ? ['/docs', target.id] + : ['/docs', target.group, target.id]; + return ( + + ); + }, + Acronym: ({ fullName, name, definition }) => ( + + ), + SvgFigure: ({ asset, description, title }) => ( + + ), + InlineCode: ({ children }) => {children}, + Hyperlink: ({ children, url }) => {children}, + RefAPI: ({ library, name, url, member, full, plural }) => { + const isRNProp = url.match(/^\/api\/renderhtmlprops/); + return ( + + ); + }, + DList: ({ children }) =>
    {children}
    , + DListTitle: ({ children }) =>
    {children}
    , + DListItem: ({ children }) =>
    {children}
    , + Conditional: ({ platform, children }) => + platform === 'web' ? {children} : null +}; + export default function MdxToolkitProvider({ children: toolkitChildren }: PropsWithChildren<{}>) { - const config: UIToolkitConfig = { - Chapter, - Section: ({ children, title }) => ( - -

    {title}

    - {children} -     - ), - Header, - List: ({ children, type = 'decimal' }) => ( -
      {children}
    - ), - ListItem: ({ children }) =>
  • {children}
    • , - Paragraph: ({ children }) =>

    {children}

    , - Bold: ({ children }) => {children}, - RenderHtmlCard: ({ - caption, - snippet, - expoSource, - title, - props, - preferHtmlSrc, - extraneousDeps, - snapshot - }) => { - const html = (props.source as HTMLSourceInline).html; - return ( - - ); - }, - SourceDisplay: (props) => , - TNodeTransformDisplay: ({ snaphost, ...props }) => { - return ; - }, - Admonition: ({ children, type, title }) => ( - - {children} - - ), - RefBuilder: ({ name, url, type }) => { - return ; - }, - RefDoc: ({ target, children, fragment }) => { - const linkFragments = - target.group === 'root' - ? ['/docs', target.id] - : ['/docs', target.group, target.id]; - return ( - - ); - }, - Acronym: ({ fullName, name, definition }) => ( - - ), - SvgFigure: ({ asset, description, title }) => ( - - ), - InlineCode: ({ children }) => {children}, - Hyperlink: ({ children, url }) => {children}, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - RefAPI: ({ library, name, url, member, full, plural }) => { - const isRNProp = url.match(/^\/api\/renderhtmlprops/); - return ( - - ); - }, - DList: ({ children }) =>
    {children}
    , - DListTitle: ({ children }) =>
    {children}
    , - DListItem: ({ children }) =>
    {children}
    , - Conditional: ({ platform, children }) => - platform === 'web' ? {children} : null - }; return {toolkitChildren}; } diff --git a/doc-tools/doc-mdx-gen-cli/src/genPage.tsx b/doc-tools/doc-mdx-gen-cli/src/genPage.tsx index 46b7ef72..ff4cef04 100644 --- a/doc-tools/doc-mdx-gen-cli/src/genPage.tsx +++ b/doc-tools/doc-mdx-gen-cli/src/genPage.tsx @@ -10,8 +10,7 @@ export default async function genPage(pageSpecs: PageSpecs, genFolder: string) { ? [genFolder, `${pageSpecs.id}.mdx`] : [genFolder, pageSpecs.group, `${pageSpecs.id}.mdx`]; return renderMdx( - + {React.createElement(pageSpecs.component)} , pageSpecs, diff --git a/doc-tools/doc-mdx-gen-cli/src/index.tsx b/doc-tools/doc-mdx-gen-cli/src/index.tsx index c7aa08d3..8e8ce7b1 100644 --- a/doc-tools/doc-mdx-gen-cli/src/index.tsx +++ b/doc-tools/doc-mdx-gen-cli/src/index.tsx @@ -9,7 +9,7 @@ async function docMdxGen(outDir: string) { try { const dir = await fs.opendir(dirPath); await dir.close(); - } catch (e) { + } catch { console.warn(`${outDir} cannot be read or isn't a directory.`); process.exit(1); } diff --git a/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts b/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts index e2320b43..c53ababa 100644 --- a/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts +++ b/doc-tools/doc-mdx-gen-cli/src/render/MDXRenderer.ts @@ -136,9 +136,11 @@ const MDXRenderer = Reconciler< NotPendingTransition: undefined, + // @ts-ignore HostTransitionContext: undefined, setCurrentUpdatePriority: function ( + // eslint-disable-next-line @typescript-eslint/no-unused-vars newPriority: Reconciler.EventPriority ): void { // noop diff --git a/doc-tools/doc-mdx-gen-cli/src/render/createElement.ts b/doc-tools/doc-mdx-gen-cli/src/render/createElement.ts index 56c9e054..9a23e63e 100644 --- a/doc-tools/doc-mdx-gen-cli/src/render/createElement.ts +++ b/doc-tools/doc-mdx-gen-cli/src/render/createElement.ts @@ -1,3 +1,4 @@ +import React from 'react'; import AdmonitionElement from './components/AdmonitionElement'; import CodeBlockElement from './components/CodeBlockElement'; import RenderHTMLCardElement from './components/RenderHTMLCardElement'; @@ -13,7 +14,7 @@ import H3Element from './components/H3Element'; import TNodeTransformDisplayElement from './components/TNodeTransformDisplayElement'; import ReferenceElement from './components/ReferenceElement'; -export type NodeType = 'ROOT' | keyof JSX.IntrinsicElements; +export type NodeType = 'ROOT' | keyof React.JSX.IntrinsicElements; /** * Creates an element for a document diff --git a/doc-tools/doc-mdx-gen-cli/src/render/index.ts b/doc-tools/doc-mdx-gen-cli/src/render/index.ts index 4615b096..0382b22c 100644 --- a/doc-tools/doc-mdx-gen-cli/src/render/index.ts +++ b/doc-tools/doc-mdx-gen-cli/src/render/index.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import { AdmonitionProps } from './components/AdmonitionElement'; import { CodeBlockElementProps } from './components/CodeBlockElement'; import { ReferenceElementProps } from './components/ReferenceElement'; @@ -7,7 +6,7 @@ import { SvgFigureElementProps } from './components/SvgFigureElement'; import { TNodeTransformDisplayElementProps } from './components/TNodeTransformDisplayElement'; export { default as renderMdx } from './renderMdx'; -declare global { +declare module 'react' { namespace JSX { interface IntrinsicElements { admonition: AdmonitionProps; From b4752d2c1671f9df58b4ba929ca34047684ace88 Mon Sep 17 00:00:00 2001 From: Weronika Grzybowska Date: Fri, 14 Nov 2025 11:52:40 +0100 Subject: [PATCH 3/3] fix(website): fix build-docs and docusaurus build errors --- apps/discovery/assets/svg/.gitignore | 2 - apps/discovery/assets/svg/data-flow.svg | 90 +++ ...usaurus.config.js => docusaurus.config.ts} | 17 +- apps/website/package.json | 9 +- .../website/src/components/DiscoveryFrame.tsx | 5 +- apps/website/src/components/ExpoSnippet.tsx | 4 +- .../src/components/RenderHTMLCard.module.scss | 2 +- apps/website/src/svg/.gitignore | 1 - apps/website/src/svg/data-flow.svg | 90 +++ apps/website/tsconfig.json | 4 +- assets/doc/svg/data-flow.svg | 562 ------------------ yarn.lock | 20 +- 12 files changed, 215 insertions(+), 591 deletions(-) delete mode 100644 apps/discovery/assets/svg/.gitignore create mode 100644 apps/discovery/assets/svg/data-flow.svg rename apps/website/{docusaurus.config.js => docusaurus.config.ts} (94%) delete mode 100644 apps/website/src/svg/.gitignore create mode 100644 apps/website/src/svg/data-flow.svg delete mode 100644 assets/doc/svg/data-flow.svg diff --git a/apps/discovery/assets/svg/.gitignore b/apps/discovery/assets/svg/.gitignore deleted file mode 100644 index de4fcf9b..00000000 --- a/apps/discovery/assets/svg/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -*.svg -!logo.svg \ No newline at end of file diff --git a/apps/discovery/assets/svg/data-flow.svg b/apps/discovery/assets/svg/data-flow.svg new file mode 100644 index 00000000..eed0937d --- /dev/null +++ b/apps/discovery/assets/svg/data-flow.svg @@ -0,0 +1,90 @@ + + + + + + + image/svg+xml + + + + + + + + Document Object Model (DOM) + <Element tagName="p" style={{ color: "blue" }}> <TextNode data="Hello World!"/></Element> + + + + Transient Render Tree + <TBlock tagName="p"> <TPhrasing style={{ color: "blue" }}> <TText data="Hello World!" /> </TPhrasing></TBlock> + + + + React Native VDOM + <View> <Text style={{ color: "blue" }}> Hello World! </Text></View> + + + + HTML Markup + <p style="color:blue;"> Hello World!</p> + + + + with RenderTTree component fromreact-native-render-html + C. TTree isrendered intoVDOM. + + + + + + + with TRenderEngine.buildTTreemethod from @native-html/transient-render-engine + B. TransientRender Tree isassembled. + + + + + + + with TRenderEngine.parseDocumentmethod from @native-html/transient-render-engine + A. HTML markupis parsedinto DOM. + + + + + + parseDocument() + + + + + + + + buildTTree() + + + + + + <RenderTTree /> + + + + + + diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.ts similarity index 94% rename from apps/website/docusaurus.config.js rename to apps/website/docusaurus.config.ts index 00f70ae5..897b1dd0 100644 --- a/apps/website/docusaurus.config.js +++ b/apps/website/docusaurus.config.ts @@ -1,6 +1,8 @@ -const { WEBSITE_ROOT, WEBSITE_BASE } = require('@doc/constants'); -const version = require('react-native-render-html/package.json').version; -const { existsSync } = require('fs'); +import type { Config } from '@docusaurus/types'; +import type * as Preset from '@docusaurus/preset-classic'; +import { WEBSITE_ROOT, WEBSITE_BASE } from '@doc/constants'; +import { version } from 'react-native-render-html/package.json'; +import { existsSync } from 'node:fs'; const apisidebarPath = './apisidebar.json'; let hasAPIsidebar = existsSync(apisidebarPath); @@ -45,8 +47,7 @@ const plugins = [ ] ].filter((c) => c !== null); -/** @type {import('@docusaurus/types').DocusaurusConfig} */ -module.exports = { +const config: Config = { title: 'React Native Render HTML', tagline: 'The hackable, full-featured Open Source HTML rendering solution for React Native.', @@ -243,7 +244,7 @@ module.exports = { ], copyright: `Copyright © ${new Date().getFullYear()} Meliorence, Inc and Jules Sam. Randolph.` } - }, + } satisfies Preset.ThemeConfig, presets: [ [ '@docusaurus/preset-classic', @@ -269,7 +270,9 @@ module.exports = { trackingID: 'G-CYR1XDV25N', anonymizeIP: true } - } + } satisfies Preset.Options ] ] }; + +export default config; diff --git a/apps/website/package.json b/apps/website/package.json index 1c8e28a1..b6b9f6cd 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -13,13 +13,17 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "api-gendoc": "docusaurus api:gen" + "api-gendoc": "docusaurus api:gen", + "test": "yarn test:ts && yarn test:lint", + "test:ts": "tsc --noEmit", + "test:lint": "eslint --ext ts,tsx src/" }, "dependencies": { "@doc/constants": "workspace:*", "@doc/svg-component": "workspace:*", "@docusaurus/core": "^3.9.2", "@docusaurus/preset-classic": "^3.9.2", + "@docusaurus/theme-common": "^3.9.2", "@mdx-js/react": "^3.1.1", "clsx": "^2.1.1", "copy-text-to-clipboard": "^3.2.2", @@ -35,7 +39,8 @@ "@doc/pages": "workspace:*", "@doc/svgr-conf": "workspace:*", "@docusaurus/module-type-aliases": "^3.9.2", - "@tsconfig/docusaurus": "^2.0.4", + "@docusaurus/tsconfig": "^3.9.2", + "@docusaurus/types": "^3.9.2", "@types/react": "~19.1.0", "@types/react-helmet": "^6.1.11", "@types/react-modal": "^3.16.3", diff --git a/apps/website/src/components/DiscoveryFrame.tsx b/apps/website/src/components/DiscoveryFrame.tsx index 89a2bbb4..6474fe9d 100644 --- a/apps/website/src/components/DiscoveryFrame.tsx +++ b/apps/website/src/components/DiscoveryFrame.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-undef */ import React, { useRef, useCallback } from 'react'; //@ts-ignore import discoveryVideoUrl from '@site/static/video/discovery.webm'; @@ -7,7 +6,7 @@ import clsx from 'clsx'; import IPhoneFrame from './IPhoneFrame'; export default function DiscoveryFrame({ scale }: { scale?: number }) { - const videoRef = useRef(); + const videoRef = useRef(null); const playPause = useCallback(() => { if (videoRef.current?.paused) { videoRef.current?.play(); @@ -16,7 +15,7 @@ export default function DiscoveryFrame({ scale }: { scale?: number }) { } }, []); return ( -
    +