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 ( -
+