vxrn 1.1.134 → 1.1.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxrn",
-  "version": "1.1.134",
+  "version": "1.1.136",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "type": "module",
@@ -35,10 +35,10 @@
     "@babel/core": "^7.21.8",
     "@hono/node-server": "^1.11.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vxrn/react-native-prebuilt": "1.1.134",
-    "@vxrn/safe-area": "1.1.134",
-    "@vxrn/vite-flow": "1.1.134",
-    "@vxrn/vite-native-swc": "1.1.134",
+    "@vxrn/react-native-prebuilt": "1.1.136",
+    "@vxrn/safe-area": "1.1.136",
+    "@vxrn/vite-flow": "1.1.136",
+    "@vxrn/vite-native-swc": "1.1.136",
     "citty": "^0.1.6",
     "crossws": "^0.2.4",
     "es-module-lexer": "^1.3.0",

package/patches/h3+1.11.1.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/h3/dist/index.mjs b/node_modules/h3/dist/index.mjs
+index 16294ff..03b54b9 100644
+--- a/node_modules/h3/dist/index.mjs
++++ b/node_modules/h3/dist/index.mjs
+@@ -1229,6 +1229,14 @@ function getProxyRequestHeaders(event) {
+       headers[name] = reqHeaders[name];
+     }
+   }
++
++  // The expoManifestRequestHandlerPlugin (Vite plugin) needs the original request host so that it can compose URLs that can be accessed by physical devices. This won't be needed once we retire h3 and use the Vite Dev Server directly.
++  // This may not work if one installed vxrn from NPM since this patch may not apply.
++  const originalHost = reqHeaders.host;
++  if (originalHost) {
++    headers['X-Forwarded-Host'] = originalHost;
++  }
++
+   return headers;
+ }
+ function fetchWithEvent(event, req, init, options) {

package/src/exports/dev.ts

@@ -10,9 +10,7 @@ import {
   toNodeListener,
 } from 'h3'
 import { createProxyEventHandler } from 'h3-proxy'
-import { rm } from 'node:fs/promises'
 import { createServer as nodeCreateServer } from 'node:http'
-import { join } from 'node:path'
 import { createServer, resolveConfig } from 'vite'
 import { WebSocket } from 'ws'
 import { clientInjectionsPlugin } from '../plugins/clientInjectPlugin'
@@ -22,13 +20,13 @@ import {
   addConnectedNativeClient,
   removeConnectedNativeClient,
 } from '../utils/connectedNativeClients'
-import { getIndexJsonResponse } from '../utils/getIndexJsonResponse'
 import { getOptionsFilled } from '../utils/getOptionsFilled'
 import { getReactNativeBundle } from '../utils/getReactNativeBundle'
 import { getViteServerConfig } from '../utils/getViteServerConfig'
 import { hotUpdateCache } from '../utils/hotUpdateCache'
 import { checkPatches } from '../utils/patches'
 import { clean } from './clean'
+import { TLSSocket } from 'node:tls'
 
 const { ensureDir } = FSExtra
 
@@ -64,10 +62,12 @@ export const dev = async (optionsIn: VXRNOptions & { clean?: boolean }) => {
   const viteServer = await createServer(serverConfig)
 
   // first resolve config so we can pass into client plugin, then add client plugin:
+  // TODO do we need this really? seems like we don't, can check if we can do this without the resolveConfig()
   const resolvedConfig = await resolveConfig(serverConfig, 'serve')
   const viteRNClientPlugin = clientInjectionsPlugin(resolvedConfig)
 
   // this fakes vite into thinking its loading files, so it hmrs in native mode despite not us never requesting the url
+  // TODO we can check if any native clients are connected to avoid some work here
   viteServer.watcher.addListener('change', async (path) => {
     const id = path.replace(process.cwd(), '')
     if (!id.endsWith('tsx') && !id.endsWith('jsx')) {
@@ -139,21 +139,6 @@ export const dev = async (optionsIn: VXRNOptions & { clean?: boolean }) => {
 
   app.use(router)
 
-  // TODO move these to router.get():
-  app.use(
-    defineEventHandler(async ({ node: { req } }) => {
-      if (!req.headers['expo-platform']) {
-        if (!req.headers['user-agent']?.match(/Expo|React/)) {
-          return
-        }
-      }
-
-      if (req.url === '/' || req.url?.startsWith('/?platform=')) {
-        return getIndexJsonResponse({ port, root })
-      }
-    })
-  )
-
   const clients = new Set<Peer>()
   let socket: WebSocket | null = null
 

package/src/plugins/expoManifestRequestHandlerPlugin.ts

@@ -0,0 +1,162 @@
+import { join } from 'node:path'
+import module from 'node:module'
+import { TLSSocket } from 'node:tls'
+
+import type { Plugin } from 'vite'
+
+// Can support more [options](https://github.com/expo/expo/blob/sdk-50/packages/%40expo/cli/src/start/server/middleware/ManifestMiddleware.ts#L113-L121) in the future.
+type ExpoManifestRequestHandlerPluginConfig = {
+  /** The root of the Expo project. */
+  projectRoot: string
+  port: number
+}
+
+/**
+ * Let the Vite dev server support handling [Expo Manifest Request](https://github.com/expo/expo/blob/sdk-50/docs/pages/archive/technical-specs/expo-updates-0.mdx#manifest-request), which is required for Expo Go to work.
+ */
+export function expoManifestRequestHandlerPlugin(
+  options: ExpoManifestRequestHandlerPluginConfig
+): Plugin {
+  const { projectRoot } = options
+  return {
+    name: 'vxrn:expo-manifest-request-handler',
+
+    configureServer(server) {
+      // Add a middleware to Vite's internal Connect server to handle the Expo Manifest Request.
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.headers['expo-platform']) {
+          // Not an Expo manifest request, skip this middleware and proceed.
+          return next()
+        }
+
+        const protocol = req.socket instanceof TLSSocket && req.socket.encrypted ? 'https' : 'http'
+        const host = `${req.headers['x-forwarded-host']}` || req.headers.host
+
+        // Try to dynamically import the internal Expo manifest handler from expo packages installed in the user's project.
+        let ExpoGoManifestHandlerMiddleware
+        let expoGoManifestHandlerMiddlewareImportError
+        try {
+          // Import Expo from the user's project instead of from where vxrn is installed, since vxrn may be installed globally or at the root workspace.
+          const require = module.createRequire(projectRoot)
+          const importPath = require.resolve(
+            '@expo/cli/build/src/start/server/middleware/ExpoGoManifestHandlerMiddleware.js',
+            { paths: [projectRoot] }
+          )
+          ExpoGoManifestHandlerMiddleware = (await import(importPath)).default
+            .ExpoGoManifestHandlerMiddleware
+        } catch (e) {
+          expoGoManifestHandlerMiddlewareImportError = e
+        }
+
+        // If we failed to import the Expo manifest handler, show a warning and ignore the error.
+        if (!ExpoGoManifestHandlerMiddleware) {
+          if (
+            expoGoManifestHandlerMiddlewareImportError instanceof Error &&
+            (expoGoManifestHandlerMiddlewareImportError as any).code === 'MODULE_NOT_FOUND'
+          ) {
+            console.warn(
+              `Failed to locate Expo SDK in your project: ${expoGoManifestHandlerMiddlewareImportError}`
+            )
+          } else {
+            console.warn(
+              `Failed to import Expo SDK from your project: ${expoGoManifestHandlerMiddlewareImportError}`
+            )
+          }
+
+          console.warn(
+            'Ignoring the error and proceeding without handling the Expo manifest request.'
+          )
+          console.warn(
+            `Is this a Expo project, or are you using a supported version of Expo SDK? (${projectRoot})`
+          )
+
+          const json = getIndexJsonResponse(options)
+
+          res.setHeader('content-type', 'application/json')
+          res.write(JSON.stringify(json))
+          res.end()
+
+          // fallback to our preset index json for now
+          return
+        }
+
+        const manifestHandlerMiddleware = new ExpoGoManifestHandlerMiddleware(projectRoot, {
+          constructUrl: () => {
+            return `${protocol}://${host}`
+          },
+        })
+
+        // Override the `_getBundleUrl` method ensure the same host and protocol are used for the bundle URL.
+        const origGetBundleUrl =
+          manifestHandlerMiddleware._getBundleUrl.bind(manifestHandlerMiddleware)
+        manifestHandlerMiddleware._getBundleUrl = (...args) => {
+          /** Will be something like `http://127.0.0.1:8081/index.bundle?platform=ios&dev=true&hot=false&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app`. */
+          const origBundleUrl = origGetBundleUrl(...args)
+
+          let url = new URL(origBundleUrl)
+          if (host) url.host = host
+          url.protocol = protocol
+
+          // For now, vxrn will always serve the React Native bundle at `/index.bundle`, while Expo may use something like `/src/App.tsx.bundle`.
+          url.pathname = '/index.bundle'
+
+          return url.toString()
+        }
+
+        // Handle the Expo manifest request.
+        manifestHandlerMiddleware.handleRequestAsync(req, res, next)
+      })
+    },
+  }
+}
+
+function getIndexJsonResponse({ port, projectRoot }: ExpoManifestRequestHandlerPluginConfig) {
+  return {
+    name: 'myapp',
+    slug: 'myapp',
+    scheme: 'myapp',
+    version: '1.0.0',
+    jsEngine: 'jsc',
+    orientation: 'portrait',
+    icon: './assets/icon.png',
+    userInterfaceStyle: 'light',
+    splash: {
+      image: './assets/splash.png',
+      resizeMode: 'contain',
+      backgroundColor: '#ffffff',
+      imageUrl: 'http://127.0.0.1:8081/assets/./assets/splash.png',
+    },
+    updates: { fallbackToCacheTimeout: 0 },
+    assetBundlePatterns: ['**/*'],
+    ios: { supportsTablet: true, bundleIdentifier: 'com.natew.myapp' },
+    android: {
+      package: 'com.tamagui.myapp',
+      adaptiveIcon: {
+        foregroundImage: './assets/adaptive-icon.png',
+        backgroundColor: '#FFFFFF',
+        foregroundImageUrl: 'http://127.0.0.1:8081/assets/./assets/adaptive-icon.png',
+      },
+    },
+    web: { favicon: './assets/favicon.png' },
+    extra: { eas: { projectId: '061b4470-78c7-4d6a-b850-8167fb0a3434' } },
+    _internal: {
+      isDebug: false,
+      projectRoot: projectRoot,
+      dynamicConfigPath: null,
+      staticConfigPath: join(projectRoot, 'app.json'),
+      packageJsonPath: join(projectRoot, 'package.json'),
+    },
+    sdkVersion: '50.0.0',
+    platforms: ['ios', 'android', 'web'],
+    iconUrl: `http://127.0.0.1:${port}/assets/./assets/icon.png`,
+    debuggerHost: `127.0.0.1:${port}`,
+    logUrl: `http://127.0.0.1:${port}/logs`,
+    developer: { tool: 'expo-cli', projectRoot: projectRoot },
+    packagerOpts: { dev: true },
+    mainModuleName: 'index',
+    __flipperHack: 'React Native packager is running',
+    hostUri: `127.0.0.1:${port}`,
+    bundleUrl: `http://127.0.0.1:${port}/index.bundle?platform=ios&dev=true&hot=false&lazy=true`,
+    id: '@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78',
+  }
+}

package/src/plugins/fixDependenciesPlugin.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Some fixes for known bad dependencies with Vite
+ */
+export function fixDependenciesPlugin(): Plugin {
+  // uh this isn't runnning at all?
+  return {
+    name: 'vxrn:fix-dependencies-plugin',
+    enforce: 'pre',
+
+    resolveId(source, importer, options) {
+      console.log('resolve', source, importer)
+    },
+
+    load(id) {
+      console.log('load', id)
+    },
+
+    transform(code, id) {
+      console.log('go?', id)
+    },
+  }
+}

package/src/utils/getBaseViteConfig.ts

@@ -1,5 +1,6 @@
 import reactSwcPlugin from '@vitejs/plugin-react-swc'
-import type { InlineConfig, UserConfig } from 'vite'
+import type { InlineConfig } from 'vite'
+import { fixDependenciesPlugin } from '../plugins/fixDependenciesPlugin'
 
 // essentially base web config not base everything
 
@@ -12,6 +13,7 @@ export const dedupe = [
   'react-native-web',
   '@tamagui/core',
   '@tamagui/web',
+  'react-native-reanimated',
 ]
 
 export function getBaseViteConfig({ mode }: { mode: 'development' | 'production' }): InlineConfig {

package/src/utils/getReactNativeBundle.ts

@@ -38,22 +38,6 @@ export async function getReactNativeBundle(options: VXRNOptionsFilled, viteRNCli
     })
   )
 
-  async function babelReanimated(input: string, filename: string) {
-    return await new Promise<string>((res, rej) => {
-      babel.transform(
-        input,
-        {
-          plugins: ['react-native-reanimated/plugin'],
-          filename,
-        },
-        (err: any, result) => {
-          if (!result || err) rej(err || 'no res')
-          res(result!.code!)
-        }
-      )
-    })
-  }
-
   // build app
   const nativeBuildConfig = await getReactNativeConfig(options, viteRNClientPlugin)
 

package/src/utils/getReactNativeConfig.ts

@@ -87,7 +87,7 @@ export async function getReactNativeConfig(options: VXRNOptionsFilled, viteRNCli
     },
 
     resolve: {
-      dedupe: dedupe,
+      dedupe,
       extensions: nativeExtensions,
     },
 

package/src/utils/getViteServerConfig.ts

@@ -1,5 +1,6 @@
 import { loadConfigFromFile, mergeConfig, type InlineConfig, type UserConfig } from 'vite'
 import { reactNativeHMRPlugin } from '../plugins/reactNativeHMRPlugin'
+import { expoManifestRequestHandlerPlugin } from '../plugins/expoManifestRequestHandlerPlugin'
 import { coerceToArray } from './coerceToArray'
 import { getBaseViteConfig } from './getBaseViteConfig'
 import { getOptimizeDeps } from './getOptimizeDeps'
@@ -8,7 +9,7 @@ import { uniq } from './uniq'
 import mkcert from 'vite-plugin-mkcert'
 
 export async function getViteServerConfig(config: VXRNOptionsFilled) {
-  const { root, host, https } = config
+  const { root, host, https, port } = config
   const { optimizeDeps } = getOptimizeDeps('serve')
   const { config: userViteConfig } =
     (await loadConfigFromFile({
@@ -30,6 +31,12 @@ export async function getViteServerConfig(config: VXRNOptionsFilled) {
 
         reactNativeHMRPlugin(config),
 
+        expoManifestRequestHandlerPlugin({
+          projectRoot: root,
+          port,
+        }),
+
+        // TODO very hacky/arbitrary
         {
           name: 'process-env-ssr',
           transform(code, id, options) {
@@ -112,10 +119,5 @@ export async function getViteServerConfig(config: VXRNOptionsFilled) {
     console.debug('merged config is', JSON.stringify(serverConfig, null, 2))
   }
 
-  serverConfig = {
-    ...serverConfig,
-    plugins: [...serverConfig.plugins!],
-  }
-
   return serverConfig
 }

package/src/utils/patches.ts

@@ -8,7 +8,16 @@ const patches = [
     module: 'react-native-screens',
     patchFile: 'react-native-screens+3.22.1.patch',
   },
+  {
+    module: 'h3',
+    patchFile: 'h3+1.11.1.patch',
+  },
+  // {
+  //   module: 'react-native-reanimated',
+  //   patchFile: 'react-native-reanimated+3.14.0.patch',
+  // },
 ]
+
 type Patch = (typeof patches)[0]
 
 export async function checkPatches(options: VXRNOptionsFilled) {

package/src/utils/prependMiddleware.ts

@@ -0,0 +1,14 @@
+import type { Connect } from 'vite'
+
+/**
+ * Prepends a middleware to a Connect server's middleware stack.
+ */
+export function prependMiddleware(
+  /** The Connect app server instance to prepend the middleware to. */
+  connectServer: Connect.Server,
+  /** The middleware to prepend. */
+  middleware: Connect.NextHandleFunction
+) {
+  connectServer.use(middleware);
+  connectServer.stack.unshift(connectServer.stack.pop()!);
+}

package/types/plugins/expoManifestRequestHandlerPlugin.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite';
+type ExpoManifestRequestHandlerPluginConfig = {
+    /** The root of the Expo project. */
+    projectRoot: string;
+    port: number;
+};
+/**
+ * Let the Vite dev server support handling [Expo Manifest Request](https://github.com/expo/expo/blob/sdk-50/docs/pages/archive/technical-specs/expo-updates-0.mdx#manifest-request), which is required for Expo Go to work.
+ */
+export declare function expoManifestRequestHandlerPlugin(options: ExpoManifestRequestHandlerPluginConfig): Plugin;
+export {};
+//# sourceMappingURL=expoManifestRequestHandlerPlugin.d.ts.map

package/types/plugins/fixDependenciesPlugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+/**
+ * Some fixes for known bad dependencies with Vite
+ */
+export declare function fixDependenciesPlugin(): Plugin;
+//# sourceMappingURL=fixDependenciesPlugin.d.ts.map

package/types/utils/prependMiddleware.d.ts

@@ -0,0 +1,10 @@
+import type { Connect } from 'vite';
+/**
+ * Prepends a middleware to a Connect server's middleware stack.
+ */
+export declare function prependMiddleware(
+/** The Connect app server instance to prepend the middleware to. */
+connectServer: Connect.Server, 
+/** The middleware to prepend. */
+middleware: Connect.NextHandleFunction): void;
+//# sourceMappingURL=prependMiddleware.d.ts.map

package/src/utils/getIndexJsonResponse.ts

@@ -1,52 +0,0 @@
-import { join } from 'node:path'
-
-export function getIndexJsonResponse({ port, root }: { port: number | string; root }) {
-  return {
-    name: 'myapp',
-    slug: 'myapp',
-    scheme: 'myapp',
-    version: '1.0.0',
-    jsEngine: 'jsc',
-    orientation: 'portrait',
-    icon: './assets/icon.png',
-    userInterfaceStyle: 'light',
-    splash: {
-      image: './assets/splash.png',
-      resizeMode: 'contain',
-      backgroundColor: '#ffffff',
-      imageUrl: 'http://127.0.0.1:8081/assets/./assets/splash.png',
-    },
-    updates: { fallbackToCacheTimeout: 0 },
-    assetBundlePatterns: ['**/*'],
-    ios: { supportsTablet: true, bundleIdentifier: 'com.natew.myapp' },
-    android: {
-      package: 'com.tamagui.myapp',
-      adaptiveIcon: {
-        foregroundImage: './assets/adaptive-icon.png',
-        backgroundColor: '#FFFFFF',
-        foregroundImageUrl: 'http://127.0.0.1:8081/assets/./assets/adaptive-icon.png',
-      },
-    },
-    web: { favicon: './assets/favicon.png' },
-    extra: { eas: { projectId: '061b4470-78c7-4d6a-b850-8167fb0a3434' } },
-    _internal: {
-      isDebug: false,
-      projectRoot: root,
-      dynamicConfigPath: null,
-      staticConfigPath: join(root, 'app.json'),
-      packageJsonPath: join(root, 'package.json'),
-    },
-    sdkVersion: '50.0.0',
-    platforms: ['ios', 'android', 'web'],
-    iconUrl: `http://127.0.0.1:${port}/assets/./assets/icon.png`,
-    debuggerHost: `127.0.0.1:${port}`,
-    logUrl: `http://127.0.0.1:${port}/logs`,
-    developer: { tool: 'expo-cli', projectRoot: root },
-    packagerOpts: { dev: true },
-    mainModuleName: 'index',
-    __flipperHack: 'React Native packager is running',
-    hostUri: `127.0.0.1:${port}`,
-    bundleUrl: `http://127.0.0.1:${port}/index.bundle?platform=ios&dev=true&hot=false&lazy=true`,
-    id: '@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78',
-  }
-}