Merge pull request #187 from 10play/expo-web-support

expo-web support

README.md

@@ -46,6 +46,11 @@ Otherwise you will need to setup [Expo Dev Client](https://docs.expo.dev/develop
 
 Now you ready to add tentap to your app!
 
+### Expo Web
+
+TenTap supports expo web!
+See setup [here](https://10play.github.io/10tap-editor/docs/setup/expoWeb)
+
 ## Usage
 
 ```tsx

website/docs/setup/expoWeb.md

@@ -0,0 +1,97 @@
+---
+sidebar_position: 3
+---
+
+# Expo Web Setup (Beta)
+
+Some additional steps are necessary for supporting expo web - see working example [here](https://github.com/10play/10tap-web-example)
+
+### Step 1 - Install required deps
+
+`npx expo install @10play/react-native-web-webview expo-crypto`
+
+### Step 2 - Configuring your bundler
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Which bundler are you using?
+
+<Tabs>
+  <TabItem value="metro" label="Metro">
+Create config file if not already `npx expo customize metro.config.js`
+
+Into your `metro.config.js` add the following configuration
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+const webAliases = {
+  'react-native': 'react-native-web',
+  'react-native-webview': '@10play/react-native-web-webview',
+  'react-native/Libraries/Utilities/codegenNativeComponent':
+    '@10play/react-native-web-webview/shim',
+  'crypto': 'expo-crypto',
+};
+
+config.resolver.resolveRequest = (
+  context,
+  realModuleName,
+  platform,
+  moduleName
+) => {
+  if (platform === 'web') {
+    const alias = webAliases[realModuleName];
+    if (alias) {
+      return {
+        filePath: require.resolve(alias),
+        type: 'sourceFile',
+      };
+    }
+  }
+  return context.resolveRequest(context, realModuleName, platform, moduleName);
+};
+
+module.exports = config;
+```
+
+  </TabItem>
+  <TabItem value="webpack" label="Webpack">
+Create config file if not already `npx expo customize webpack.config.js`
+
+Into your `webpack.config.js` add the following configuration
+
+```js
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv);
+
+  // Alias react-native-webview and crypto
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'react-native': 'react-native-web',
+    'react-native-webview': '@10play/react-native-web-webview',
+    'crypto': 'expo-crypto',
+  };
+
+  // Shim codegenNativeComponent
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    'react-native/Libraries/Utilities/codegenNativeComponent':
+      '@10play/react-native-web-webview/shim',
+  };
+
+  return config;
+};
+```
+
+  </TabItem>
+</Tabs>
+
+### Step 3 - Restart Metro
+
+Restart metro for changes to take effect and the editor should load

website/docs/setup/installation.md

@@ -21,3 +21,7 @@ Now you ready to add tentap to your app!
 :::note
 On Android, API level 29+ is required.
 :::
+
+### Expo Web
+
+For expo-web support follow this [guide](./expoWeb)

website/sidebars.ts

@@ -10,7 +10,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Setup',
-      items: ['setup/installation', 'setup/advancedSetup'],
+      items: ['setup/installation', 'setup/advancedSetup', 'setup/expoWeb'],
     },
     {
       type: 'category',