feat: broken rnweb support

this is not final but others might want to play around with it/get it working properly

babel.config.js

@@ -3,6 +3,7 @@ module.exports = {
   env: {
     production: {
       plugins: [
+        'react-native-web',
         [
           'transform-remove-console',
           {
@@ -19,6 +20,7 @@ module.exports = {
         alias: {
           '@rvmob': './src',
           '@rvmob-i18n': './i18n',
+          "^react-native$": "react-native-web",
         },
       },
     ],

index.js

@@ -2,11 +2,15 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import {AppRegistry, Platform} from 'react-native';
 
 import {App} from './App';
 import './i18n/i18n';
 
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
+
+if (Platform.OS == "web") {
+    AppRegistry.runApplication(appName, {rootTag: document.getElementById('root')});
+}

package.json

@@ -10,7 +10,7 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
-    "windows": "react-native run-windows",
+    "web": "yarn webpack-dev-server --config webpack.config.js --hot --mode=development",
     "postinstall": "patch-package"
   },
   "dependencies": {
@@ -52,7 +52,7 @@
     "react-native-document-picker": "^9.1.0",
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.18.0",
-    "react-native-gesture-handler": "^2.13.2",
+    "react-native-gesture-handler": "^2.14.1",
     "react-native-get-random-values": "^1.10.0",
     "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-level-fs": "^3.0.1",
@@ -62,6 +62,7 @@
     "react-native-svg": "^14.1.0",
     "react-native-tcp-socket": "^6.0.6",
     "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "^0.19.10",
     "readable-stream": "^4.5.1",
     "reanimated-color-picker": "^2.4.2",
     "revkit": "^1.1.14",
@@ -75,6 +76,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",
+    "@babel/plugin-transform-export-namespace-from": "^7.23.4",
     "@babel/preset-env": "^7.23.6",
     "@babel/runtime": "^7.23.6",
     "@react-native/babel-preset": "^0.74.0",
@@ -93,8 +95,11 @@
     "@types/react-test-renderer": "^18.0.7",
     "@types/readable-stream": "^4.0.10",
     "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-react-native-web": "^0.19.10",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.56.0",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "patch-package": "^8.0.0",
     "prettier": "^2.8.8",
@@ -103,7 +108,11 @@
     "react-native-svg-transformer": "^1.2.0",
     "react-test-renderer": "^18.2.0",
     "rn-nodeify": "^10.3.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "react-native": {
     "zlib": "browserify-zlib",

src/Generic.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import {Linking, View} from 'react-native';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import FastImage from 'react-native-fast-image';
 
 import {API, Channel, Client, Message, Server} from 'revolt.js';
 
 import {setLanguage} from '@rvmob-i18n/i18n';
 import {languages} from '@rvmob-i18n/languages';
+import {Image} from '@rvmob/crossplat/Image';
 import {setTheme, themes} from '@rvmob/Theme';
 import {
   DEFAULT_API_URL,
@@ -26,7 +26,6 @@ import {
   Setting,
   TextEditingModalProps,
 } from '@rvmob/lib/types';
-const Image = FastImage;
 
 export const app = {
   version: '0.6.0',

src/MessageBox.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import {Pressable, View, TextInput} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import DocumentPicker, {
-  DocumentPickerResponse,
-} from 'react-native-document-picker';
+// FIXME: uncomment once rndp is excluded on web
+// import DocumentPicker, {
+//  DocumentPickerResponse,
+// } from 'react-native-document-picker';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 

src/Profile.tsx

@@ -3,13 +3,11 @@ import React from 'react';
 import {client, app} from './Generic';
 import {currentTheme} from './Theme';
 import {Pressable, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
 import {Server, User, Channel} from 'revolt.js';
 import {Text, Username} from './components/common/atoms';
+import {Image} from '@rvmob/crossplat/Image';
 import {DEFAULT_MAX_SIDE} from './lib/consts';
 
-const Image = FastImage;
-
 type AvatarProps = {
   channel?: Channel;
   user?: User;

src/components/common/messaging/Emoji.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import FastImage from 'react-native-fast-image';
 import {SvgUri} from 'react-native-svg';
 
 import {EmojiPacks, RevoltEmojiDictionary, unicodeEmojiURL} from 'revkit';
 
+import {Image} from '@rvmob/crossplat/Image';
 import {client, app} from '../../../Generic';
 import {styles} from '../../../Theme';
 import {Text} from '../atoms';
@@ -39,7 +39,7 @@ export const CustomEmoji = ({id}: {id: string}) => {
     return <Text>{`:${id}:`}</Text>;
   }
   return (
-    <FastImage
+    <Image
       style={styles.emoji}
       source={{
         uri: `${client.configuration?.features.autumn.url}/emojis/${id}`,

src/components/common/messaging/Message.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import {Dimensions, Pressable, TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
-
 import {formatRelative} from 'date-fns';
 import {enGB, enUS} from 'date-fns/locale';
 import {Message as RevoltMessage} from 'revolt.js';
@@ -19,11 +17,11 @@ import {
 import {app, client, openUrl} from '../../../Generic';
 import {Avatar} from '../../../Profile';
 import {currentTheme, styles} from '../../../Theme';
+import {Image} from '@rvmob/crossplat/Image';
 import {Text, Username} from '../atoms';
 import {MarkdownView} from '../MarkdownView';
 import {RE_INVITE, USER_IDS} from '../../../lib/consts';
 import {getReadableFileSize, parseRevoltNodes} from '../../../lib/utils';
-const Image = FastImage;
 
 type MessageProps = {
   message: RevoltMessage;
@@ -393,7 +391,7 @@ export const Message = observer((props: MessageProps) => {
                         onPress={() => app.openImage(a)}>
                         <Image
                           source={{uri: client.generateFileURL(a)}}
-                          resizeMode={FastImage.resizeMode.contain}
+                          resizeMode={'contain'}
                           style={{
                             width: width,
                             height: height,

src/components/common/messaging/MessageEmbed.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import {Dimensions, Pressable, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
-
 import {API} from 'revolt.js';
 
+import {Image} from '@rvmob/crossplat/Image';
 import {app, client} from '../../../Generic';
 import {currentTheme} from '../../../Theme';
 import {MarkdownView} from '../MarkdownView';
 import {Link, Text} from '../atoms';
-const Image = FastImage;
 
 export const MessageEmbed = observer((eRaw: API.Embed) => {
   // @ts-expect-error This seems to be necessary even though it clashses with the API types

src/components/common/messaging/MessageReactions.tsx

@@ -3,15 +3,13 @@ import {Pressable, View} from 'react-native';
 import {action} from 'mobx';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
-
 import {Message} from 'revolt.js';
 
+import {Image} from '@rvmob/crossplat/Image';
 import {client} from '../../../Generic';
 import {showToast} from '../../../lib/utils';
 import {currentTheme} from '../../../Theme';
 import {Text} from '../atoms';
-const Image = FastImage;
 
 type ReactionPile = {
   emoji: string;

src/components/common/settings/sections/server/EmojiSettingsSection.tsx

@@ -3,16 +3,15 @@ import {Pressable, View} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import {Server} from 'revolt.js';
 
 import {client} from '@rvmob/Generic';
 import {currentTheme, styles} from '@rvmob/Theme';
 import {Text} from '@rvmob/components/common/atoms';
+import {Image} from '@rvmob/crossplat/Image';
 import {showToast} from '@rvmob/lib/utils';
-const Image = FastImage;
 
 export const EmojiSettingsSection = observer(({server}: {server: Server}) => {
   const {t} = useTranslation();

src/components/navigation/ChannelIcon.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 
-import FastImage from 'react-native-fast-image';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {Channel} from 'revolt.js';
 
+import {Image} from '@rvmob/crossplat/Image';
 import {DEFAULT_MAX_SIDE} from '@rvmob/lib/consts';
 import {currentTheme} from '@rvmob/Theme';
 
-const Image = FastImage;
-
 interface CIChannel {
   type: 'channel';
   channel: Channel;

src/components/navigation/ChannelList.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {Channel, Server} from 'revolt.js';
 
 import {app, client} from '../../Generic';
 import {currentTheme, styles} from '../../Theme';
 import {ChannelButton, Text} from '../common/atoms';
-const Image = FastImage;
+import {Image} from '@rvmob/crossplat/Image';
 
 type ChannelListProps = {
   onChannelClick: Function;

src/components/navigation/ServerList.tsx

@@ -2,18 +2,16 @@ import React from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {decodeTime} from 'ulid';
 
 import {client, openUrl} from '../../Generic';
 import {currentTheme, styles} from '../../Theme';
 import {Text} from '../common/atoms';
+import {Image} from '@rvmob/crossplat/Image';
 import {DEFAULT_MAX_SIDE} from '../../lib/consts';
 
-const Image = FastImage;
-
 export const ServerList = observer(
   ({
     onServerPress,

src/components/sheets/ServerInfoSheet.tsx

@@ -4,7 +4,6 @@ import {observer} from 'mobx-react-lite';
 
 import BottomSheetCore from '@gorhom/bottom-sheet';
 import {useBackHandler} from '@react-native-community/hooks';
-import FastImage from 'react-native-fast-image';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
@@ -17,8 +16,7 @@ import {currentTheme, styles} from '../../Theme';
 import {ContextButton, CopyIDButton, Text} from '../common/atoms';
 import {BottomSheet} from '../common/BottomSheet';
 import {MarkdownView} from '../common/MarkdownView';
-
-const Image = FastImage;
+import {Image} from '@rvmob/crossplat/Image';
 
 export const ServerInfoSheet = observer(() => {
   const [server, setServer] = React.useState(null as Server | null);

src/components/sheets/ServerInviteSheet.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import {Pressable, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {API} from 'revolt.js';
 
 import {app, client, GeneralAvatar} from '../../Generic';
 import {currentTheme} from '../../Theme';
 import {Button, Text} from '../common/atoms';
-
-const Image = FastImage;
+import {Image} from '@rvmob/crossplat/Image';
 
 export const ServerInviteSheet = observer(
   ({

src/components/sheets/ServerSettingsSheet.tsx

@@ -3,13 +3,13 @@ import {Pressable, ScrollView, View} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {observer} from 'mobx-react-lite';
 
-import FastImage from 'react-native-fast-image';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import {Server} from 'revolt.js';
 
 import {app, client} from '../../Generic';
+import {Image} from '@rvmob/crossplat/Image';
 import {MAX_SIDE_HQ} from '../../lib/consts';
 import {SettingsSection} from '../../lib/types';
 import {currentTheme, styles} from '../../Theme';
@@ -24,7 +24,6 @@ import {
   EmojiSettingsSection,
 } from '../common/settings/sections/server';
 import {GapView} from '../layout';
-const Image = FastImage;
 
 export const ServerSettingsSheet = observer(
   ({server, setState}: {server: Server; setState: Function}) => {

src/crossplat/Image.ts

@@ -0,0 +1,5 @@
+import {Image as CoreImage, Platform} from 'react-native';
+// import FastImage from 'react-native-fast-image';
+
+// FIXME: this needs to use fastimage on other platforms
+export const Image = Platform.OS !== 'web' ? CoreImage : CoreImage;

web/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Aberdeen Demo</title>
+        <style>
+            /* These styles make the body full-height */
+            html, body { height: 100%; }
+            /* These styles disable body scrolling if you are using <ScrollView> */
+            body { overflow: hidden; }
+            /* These styles make the root element full-height */
+            #root { display: flex; height: 100%; }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="/bundle.web.js"></script>
+    </body>
+</html>