refactor: introduce unified

app/(app)/feed/detail/[entryId].tsx

@@ -462,6 +462,28 @@ function EntryDetail({ entry, readHistories }: { entry: Entry & { feed: Feed },
         dom={{
           scrollEnabled: false,
           style: { height, width: UnistylesRuntime.screen.width },
+          injectedJavaScript: `
+            // prevent links from opening in the webview
+            document.addEventListener('click', function(e) {
+              if (e.target.tagName === 'A') {
+                e.preventDefault()
+                window.ReactNativeWebView.postMessage(JSON.stringify({ external_url_open: e.target.href }))
+              }
+            })
+          `,
+          onMessage: (e) => {
+            let message: any = e.nativeEvent.data
+            try {
+              message = JSON.parse(message)
+            }
+            catch {
+              return
+            }
+            if ('object' == typeof message && message.external_url_open) {
+              openExternalUrl(message.external_url_open)
+                .catch(console.error)
+            }
+          },
         }}
         content={entry.content ?? ''}
       />

components/dom/html-render.tsx

@@ -2,7 +2,14 @@
 
 import './main.css'
 
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import type { Root } from 'hast-util-to-jsx-runtime/lib'
 import { useEffect } from 'react'
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
+import rehypeParse from 'rehype-parse'
+import rehypeStringify from 'rehype-stringify'
+import { unified } from 'unified'
+import { VFile } from 'vfile'
 
 function useSize(callback: (size: [number, number]) => void) {
   useEffect(() => {
@@ -29,15 +36,33 @@ export default function HtmlRender({
   content,
 }: {
   dom: import('expo/dom').DOMProps
-  onLayout: (size: [number, number]) => any
+  onLayout: (size: [number, number]) => Promise<void>
   content: string
 }) {
   useSize(onLayout)
 
+  const file = new VFile(content)
+
+  const pipeline = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeStringify)
+
+  const tree = pipeline.parse(content)
+
+  const hastTree = pipeline.runSync(tree, file) as Root
+  const result = toJsxRuntime(hastTree, {
+    Fragment,
+    ignoreInvalidStyle: true,
+    jsx: (type, props, key) => jsx(type as any, props, key),
+    jsxs: (type, props, key) => jsxs(type as any, props, key),
+    passNode: true,
+  })
+
   return (
     <div
       className="prose w-full p-6 dark:prose-invert"
-      dangerouslySetInnerHTML={{ __html: content }}
-    />
+    >
+      {result}
+    </div>
   )
 }

package.json

@@ -47,6 +47,7 @@
     "expo-system-ui": "4.0.0-canary-20240814-ce0f7d5",
     "expo-task-manager": "12.0.0-canary-20240814-ce0f7d5",
     "expo-web-browser": "14.0.0-canary-20240814-ce0f7d5",
+    "hast-util-to-jsx-runtime": "^2.3.0",
     "html-react-parser": "^5.1.12",
     "identity-obj-proxy": "^3.0.0",
     "jotai": "^2.9.3",
@@ -70,9 +71,13 @@
     "react-native-unistyles": "^2.9.1",
     "react-native-web": "~0.19.12",
     "react-native-webview": "13.8.6",
+    "rehype-parse": "^9.0.0",
+    "rehype-stringify": "^10.0.0",
     "shaka-player": "^4.10.10",
     "swr": "^2.2.5",
     "tldts": "^6.1.39",
+    "unified": "^11.0.5",
+    "vfile": "^5.3.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -99,7 +104,11 @@
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "devlop": "patches/devlop.patch"
+    },
+    "overrides": {
+      "vfile": "5.3.7"
     }
   },
   "simple-git-hooks": {

patches/devlop.patch

@@ -0,0 +1,12 @@
+diff --git a/package.json b/package.json
+index 8319d8d58af116e5c7ae2b30ac214b05763b85f4..c543163bbf68f391349f53d661dd9a5e61370487 100644
+--- a/package.json
++++ b/package.json
+@@ -26,6 +26,7 @@
+     "development": "./lib/development.js",
+     "default": "./lib/default.js"
+   },
++  "main": "./lib/development.js",
+   "files": [
+     "lib/"
+   ],