refactor: use expo dom component

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

@@ -4,7 +4,7 @@ import * as Clipboard from 'expo-clipboard'
 import { Stack, useLocalSearchParams, useNavigation, useRouter } from 'expo-router'
 import * as Sharing from 'expo-sharing'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { FlatList, Pressable, View } from 'react-native'
 import ContextMenu from 'react-native-context-menu-view'
 import PagerView from 'react-native-pager-view'
@@ -18,7 +18,7 @@ import { apiClient } from '~/api/client'
 import { flagEntryReadStatus, loadEntryContent } from '~/api/entry'
 import { showFooterAtom } from '~/atom/entry-list'
 import { Column, Container, Iconify, Row, Text } from '~/components'
-import { FeedContent } from '~/components/feed-content'
+import HtmlRender from '~/components/dom/html-render'
 import { Image } from '~/components/image'
 import { READ_USER_AVATAR_COUNT } from '~/consts/limit'
 import type { Entry, Feed, User } from '~/db/schema'
@@ -321,6 +321,8 @@ function EntryDetail({ entry, readHistories }: { entry: Entry & { feed: Feed },
     },
   })
 
+  const [height, setHeight] = useState(UnistylesRuntime.screen.height)
+
   return (
     <Animated.ScrollView
       scrollEventThrottle={8}
@@ -451,7 +453,18 @@ function EntryDetail({ entry, readHistories }: { entry: Entry & { feed: Feed },
           </Column>
         )}
       </Column>
-      <FeedContent html={entry?.content ?? ''} />
+      <HtmlRender
+        onLayout={async (size) => {
+          if (size[1] !== height) {
+            setHeight(size[1])
+          }
+        }}
+        dom={{
+          scrollEnabled: false,
+          style: { height, width: UnistylesRuntime.screen.width },
+        }}
+        content={entry.content ?? ''}
+      />
     </Animated.ScrollView>
   )
 }

components/dom/html-render.tsx

@@ -0,0 +1,43 @@
+'use dom'
+
+import './main.css'
+
+import { useEffect } from 'react'
+
+function useSize(callback: (size: [number, number]) => void) {
+  useEffect(() => {
+    // Observe window size changes
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect
+        callback([width, height])
+      }
+    })
+
+    observer.observe(document.body)
+
+    callback([document.body.clientWidth, document.body.clientHeight])
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [callback])
+}
+
+export default function HtmlRender({
+  onLayout,
+  content,
+}: {
+  dom: import('expo/dom').DOMProps
+  onLayout: (size: [number, number]) => any
+  content: string
+}) {
+  useSize(onLayout)
+
+  return (
+    <div
+      className="prose w-full p-6 dark:prose-invert"
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  )
+}

components/dom/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

metro.config.js

@@ -6,4 +6,88 @@ const config = getDefaultConfig(__dirname)
 
 config.resolver.sourceExts.push('sql')
 
+// https://github.com/expo/expo/issues/22482
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (platform === 'web') {
+    if (
+      moduleName.endsWith('./Platform')
+      || moduleName.endsWith('../Utilities/Platform')
+      || moduleName.endsWith('../Libraries/Utilities/Platform')
+    ) {
+      return {
+        filePath: require.resolve('react-native-web/dist/exports/Platform'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('../Components/AccessibilityInfo/legacySendAccessibilityEvent')) {
+      return {
+        filePath: require.resolve('react-native-web/dist/exports/AccessibilityInfo'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('./PlatformColorValueTypes')) {
+      return {
+        filePath: require.resolve('react-native-web/dist/exports/StyleSheet'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('RCTNetworking')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('./RCTAlertManager')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('DevToolsSettings/DevToolsSettingsManager')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('Utilities/BackHandler')) {
+      return {
+        filePath: require.resolve('react-native-web/dist/exports/BackHandler'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('BaseViewConfig')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('../Image/Image')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    if (moduleName.endsWith('./StyleSheet/PlatformColorValueTypes')) {
+      return {
+        filePath: require.resolve('identity-obj-proxy'),
+        type: 'sourceFile',
+      }
+    }
+
+    // Logic to resolve the module name to a file path...
+    // NOTE: Throw an error if there is no resolution.
+  }
+  // Optionally, chain to the standard Metro resolver.
+  return context.resolveRequest(context, moduleName, platform)
+}
+
 module.exports = config

package.json

@@ -28,47 +28,49 @@
     "@shopify/flash-list": "1.6.4",
     "date-fns": "^3.6.0",
     "drizzle-orm": "^0.32.2",
-    "expo": "^51.0.28",
-    "expo-av": "~14.0.6",
-    "expo-background-fetch": "~12.0.1",
-    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.23",
+    "expo": "^52.0.0-canary-20240814-ce0f7d5",
+    "expo-av": "15.0.0-canary-20240814-ce0f7d5",
+    "expo-background-fetch": "13.0.0-canary-20240814-ce0f7d5",
+    "expo-clipboard": "7.0.0-canary-20240814-ce0f7d5",
+    "expo-constants": "17.0.0-canary-20240814-ce0f7d5",
+    "expo-dev-client": "5.0.0-canary-20240814-ce0f7d5",
     "expo-drizzle-studio-plugin": "^0.0.2",
-    "expo-font": "~12.0.9",
-    "expo-image": "~1.12.13",
-    "expo-linking": "~6.3.1",
-    "expo-navigation-bar": "~3.0.7",
-    "expo-notifications": "~0.28.15",
-    "expo-router": "~3.5.23",
-    "expo-sharing": "~12.0.1",
-    "expo-sqlite": "~14.0.6",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-task-manager": "~11.8.2",
-    "expo-web-browser": "~13.0.3",
+    "expo-font": "13.0.0-canary-20240814-ce0f7d5",
+    "expo-image": "2.0.0-canary-20240814-ce0f7d5",
+    "expo-linking": "7.0.0-canary-20240814-ce0f7d5",
+    "expo-navigation-bar": "3.0.8-canary-20240814-ce0f7d5",
+    "expo-notifications": "1.0.0-canary-20240814-ce0f7d5",
+    "expo-router": "4.0.0-canary-20240814-ce0f7d5",
+    "expo-sharing": "13.0.0-canary-20240814-ce0f7d5",
+    "expo-sqlite": "15.0.0-canary-20240814-ce0f7d5",
+    "expo-status-bar": "1.12.2-canary-20240814-ce0f7d5",
+    "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",
     "html-react-parser": "^5.1.12",
+    "identity-obj-proxy": "^3.0.0",
     "jotai": "^2.9.3",
     "jotai-effect": "^1.0.0",
     "ofetch": "^1.3.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.75.0-rc.7",
     "react-native-background-fetch": "^4.2.5",
     "react-native-context-menu-view": "^1.16.0",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
+    "react-native-safe-area-context": "4.10.7",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-toast-notifications": "^3.4.0",
     "react-native-track-player": "^4.1.1",
     "react-native-unistyles": "^2.9.1",
     "react-native-web": "~0.19.12",
     "react-native-webview": "13.8.6",
+    "shaka-player": "^4.10.10",
     "swr": "^2.2.5",
     "tldts": "^6.1.39",
     "zod": "^3.23.8"
@@ -79,15 +81,19 @@
     "@iconify/json": "^2.2.237",
     "@iconify/tools": "^4.0.5",
     "@iconify/utils": "^2.1.30",
+    "@tailwindcss/typography": "^0.5.14",
     "@types/react": "~18.2.79",
+    "autoprefixer": "^10.4.20",
     "babel-plugin-inline-import": "^3.0.0",
     "drizzle-kit": "^0.23.2",
     "eas-cli": "^10.2.3",
     "eslint": "^9.9.0",
     "eslint-config-hyoban": "^3.1.3",
-    "hono": "^4.5.1",
+    "hono": "4.5.1",
     "lint-staged": "^15.2.9",
+    "postcss": "^8.4.41",
     "simple-git-hooks": "^2.11.1",
+    "tailwindcss": "^3.4.10",
     "typescript": "5.5.4"
   },
   "pnpm": {