vxrn 1.1.166 → 1.1.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxrn",
-  "version": "1.1.166",
+  "version": "1.1.168",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "type": "module",
@@ -40,11 +40,11 @@
     "@babel/core": "^7.21.8",
     "@hono/node-server": "^1.11.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "@vxrn/react-native-prebuilt": "1.1.166",
-    "@vxrn/safe-area": "1.1.166",
-    "@vxrn/vendor": "1.1.166",
-    "@vxrn/vite-flow": "1.1.166",
-    "@vxrn/vite-native-swc": "1.1.166",
+    "@vxrn/react-native-prebuilt": "1.1.168",
+    "@vxrn/safe-area": "1.1.168",
+    "@vxrn/vendor": "1.1.168",
+    "@vxrn/vite-flow": "1.1.168",
+    "@vxrn/vite-native-swc": "1.1.168",
     "citty": "^0.1.6",
     "crossws": "^0.2.4",
     "es-module-lexer": "^1.3.0",
@@ -56,6 +56,7 @@
     "h3-proxy": "^1.13.0",
     "hono": "^4.3.10",
     "import-meta-resolve": "^4.1.0",
+    "lightningcss": "^1.26.0",
     "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "vite": "6.0.0-alpha.18",
@@ -65,7 +66,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "@tamagui/build": "^1.108.3",
+    "@tamagui/build": "^1.108.4",
     "@types/find-node-modules": "^2.1.2",
     "@types/node": "^22.1.0",
     "@types/ws": "^8.5.10",

package/src/exports/dev.ts

@@ -60,8 +60,8 @@ export const dev = async (optionsIn: VXRNOptions & { clean?: boolean }) => {
   const serverConfig = await getViteServerConfig(options)
   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()
+  // we pass resolved config into client inject to get the final port etc to use
+  // probably can be done better
   const resolvedConfig = await resolveConfig(serverConfig, 'serve')
   const viteRNClientPlugin = clientInjectionsPlugin(resolvedConfig)
 

package/src/utils/assert.ts

@@ -3,3 +3,9 @@ export function assertIsError(error: unknown): asserts error is Error {
     throw error
   }
 }
+
+export function assertString(thing: any): asserts thing is string {
+  if (typeof thing !== 'string') {
+    throw `expected string, got ${typeof thing}`
+  }
+}

package/src/utils/getBaseViteConfig.ts

@@ -50,6 +50,16 @@ export function getBaseViteConfig({ mode }: { mode: 'development' | 'production'
       reactSwcPlugin({}),
     ],
 
+    // TODO make this documented / configurable through the plugins
+    css: {
+      transformer: 'lightningcss',
+      lightningcss: {
+        targets: {
+          safari: (15 << 16) | (2 << 8),
+        },
+      },
+    },
+
     define: {
       __DEV__: `${mode === 'development'}`,
       'process.env.NODE_ENV': `"${mode}"`,

package/src/utils/getReactNativeBundle.ts

@@ -67,6 +67,16 @@ export async function getReactNativeBundle(options: VXRNOptionsFilled, viteRNCli
           )
         }
 
+        let code = outputModule.code
+
+        // A hacky way to exclude node-fetch from the bundle.
+        //
+        // Some part of Supabase SDK will import node-fetch statically (https://github.com/supabase/supabase-js/blob/v2.45.1/src/lib/fetch.ts#L2), or dynamically (https://github.com/supabase/auth-js/blob/8222ee198a0ab10570e8b4c31ffb2aeafef86392/src/lib/helpers.ts#L99), causing the node-fetch to be included in the bundle, and while imported statically it will throw a runtime error when running on React Native.
+        if (outputModule.facadeModuleId?.includes('@supabase/node-fetch')) {
+          // This should be safe since the imported '@supabase/node-fetch' will not actually be used in Supabase SDK as there's already a global `fetch` in React Native.
+          code = ''
+        }
+
         return `
 // id: ${id}
 // name: ${outputModule.name}
@@ -76,7 +86,7 @@ ___vxrnAbsoluteToRelative___["${outputModule.facadeModuleId}"] = "${id}"
 ___modules___["${id}"] = ((exports, module) => {
 const require = createRequire("${id}", ${JSON.stringify(importsMap, null, 2)})
 
-${outputModule.code}
+${code}
 })
 
 ${

package/src/utils/getReactNativeConfig.ts

@@ -56,6 +56,26 @@ export async function getReactNativeConfig(options: VXRNOptionsFilled, viteRNCli
         mode: 'build',
       }),
 
+      // Avoid "failed to read input source map: failed to parse inline source map url" errors on certain packages, such as react-native-reanimated.
+      {
+        name: 'remove-inline-source-maps',
+        transform: {
+          order: 'pre',
+          async handler(code, id) {
+            if (!id.includes('react-native-reanimated')) {
+              return null
+            }
+
+            const inlineSourceMapIndex = code.lastIndexOf('//# sourceMappingURL=')
+            if (inlineSourceMapIndex >= 0) {
+              return code.slice(0, inlineSourceMapIndex).trimEnd();
+            }
+
+            return null;
+          },
+        },
+      },
+
       viteNativeSWC({
         tsDecorators: true,
         mode: 'build',

package/src/utils/patches.ts

@@ -2,24 +2,150 @@ import findNodeModules from 'find-node-modules'
 import { join } from 'node:path'
 import FSExtra from 'fs-extra'
 import type { VXRNOptionsFilled } from './getOptionsFilled'
+import { assertString } from './assert'
 
-const patches = [
+type Patch = {
+  module: string
+  patchFiles: {
+    [key: string]: (contents?: string) => string | Promise<string>
+  }
+}
+
+class Bail extends Error {}
+
+function bailIfExists(haystack: string, needle: string) {
+  if (haystack.includes(needle)) {
+    throw new Bail()
+  }
+}
+
+// TODO has no concept of version range checking, or patch versions
+
+const patches: Patch[] = [
   {
     module: 'h3',
-    patchFile: 'h3+1.11.1.patch',
+    patchFiles: {
+      'dist/index.mjs': (contents) => {
+        assertString(contents)
+        bailIfExists(contents, '/** patch-version-1 **/')
+
+        const insertPoint = contents.indexOf(`   return headers;`)
+        return (
+          contents.slice(0, insertPoint) +
+          `
+  /** patch-version-1 **/
+  // 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;
+  }
+
+` +
+          contents.slice(insertPoint)
+        )
+      },
+    },
   },
+
   {
     module: 'react',
-    patchFile: 'react+18.3.1.patch',
+    patchFiles: {
+      'index.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-19');`
+      },
+      'jsx-dev-runtime.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-jsx-dev-19');`
+      },
+      'jsx-runtime.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-jsx-19');`
+      },
+      'package.json': (contents) => {
+        assertString(contents)
+        bailIfExists(contents, 'index.web.js')
+
+        const pkg = JSON.parse(contents)
+
+        if (!pkg.exports['.']) {
+          throw new Error(`Expected a version of React that has package.json exports defined`)
+        }
+
+        pkg.exports['.'] = {
+          'react-server': './react.shared-subset.js',
+          'react-native': './index.js',
+          default: './index.web.js',
+        }
+
+        pkg.exports['./jsx-runtime'] = {
+          'react-native': './jsx-runtime.js',
+          default: './jsx-runtime.web.js',
+        }
+
+        pkg.exports['./jsx-dev-runtime'] = {
+          'react-native': './jsx-dev-runtime.js',
+          default: './jsx-dev-runtime.web.js',
+        }
+
+        return JSON.stringify(pkg, null, 2)
+      },
+    },
   },
+
   {
     module: 'react-dom',
-    patchFile: 'react-dom+18.3.1.patch',
+    patchFiles: {
+      'client.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-dom-client-19')`
+      },
+
+      'index.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-dom-19')`
+      },
+
+      'server.browser.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-dom-server.browser-19')`
+      },
+
+      'test-utils.web.js': () => {
+        return `module.exports = require('@vxrn/vendor/react-dom-test-utils-19')`
+      },
+
+      'package.json': (contents) => {
+        assertString(contents)
+        bailIfExists(contents, 'index.web.js')
+
+        const pkg = JSON.parse(contents)
+
+        if (!pkg.exports['.']) {
+          throw new Error(`Expected a version of React that has package.json exports defined`)
+        }
+
+        pkg.exports['.'] = {
+          'react-native': './index.js',
+          default: './index.web.js',
+        }
+
+        pkg.exports['./client'] = {
+          'react-native': './client.js',
+          default: './client.web.js',
+        }
+
+        pkg.exports['./server.browser'] = {
+          'react-native': './server.browser.js',
+          default: './server.browser.web.js',
+        }
+
+        pkg.exports['./test-utils'] = {
+          'react-native': './test-utils.js',
+          default: './test-utils.web.js',
+        }
+
+        return JSON.stringify(pkg, null, 2)
+      },
+    },
   },
 ]
 
-type Patch = (typeof patches)[0]
-
 export async function checkPatches(options: VXRNOptionsFilled) {
   if (options.state.applyPatches === false) {
     return
@@ -29,47 +155,48 @@ export async function checkPatches(options: VXRNOptionsFilled) {
     cwd: options.root,
   }).map((relativePath) => join(options.root, relativePath))
 
-  const patchesToCopy: { patch: Patch; dir: string }[] = []
-
   await Promise.all(
     patches.flatMap((patch) => {
       return nodeModulesDirs.flatMap(async (dir) => {
-        if (await FSExtra.pathExists(join(dir, patch.module))) {
-          patchesToCopy.push({ patch, dir })
-        }
-      })
-    })
-  )
+        const nodeModuleDir = join(dir, patch.module)
 
-  let didCopy = false
+        if (await FSExtra.pathExists(nodeModuleDir)) {
+          for (const file in patch.patchFiles) {
+            const log = () => {
+              console.info(` Applying patch to ${patch.module}`)
+            }
 
-  for (const { patch, dir } of patchesToCopy) {
-    const patchesDir = join(dir, '..', 'patches')
+            try {
+              const fullPath = join(nodeModuleDir, file)
+              const patchFn = patch.patchFiles[file]
 
-    if (!(await FSExtra.pathExists(patchesDir))) {
-      await FSExtra.mkdir(patchesDir)
-    }
+              // create
+              if (!(await FSExtra.pathExists(fullPath))) {
+                log()
+                await FSExtra.writeFile(fullPath, await patchFn())
+                return
+              }
 
-    const src = join(options.internalPatchesDir, patch.patchFile)
-    const dest = join(patchesDir, patch.patchFile)
-    const patchContents = await FSExtra.readFile(src, 'utf-8')
+              // if its a create function (takes no arg), bail if it exists already
+              if (patchFn.length === 0) {
+                return
+              }
 
-    if (
-      !(await FSExtra.pathExists(dest)) ||
-      (await FSExtra.readFile(dest, 'utf-8')) !== patchContents
-    ) {
-      didCopy = true
-      console.info(` 🩹 Adding patch ${patch.module}`)
-      await FSExtra.copy(src, dest)
-    }
-  }
-
-  if (didCopy) {
-    console.info(
-      `\nWe've added patches to support running React 19 and 18 in parallel. Please run "npx patch-package" and re-run.
-  
-      You'll want to add "patch-package" to your devDependencies and scripts.postinstall in your package.json.\n`
-    )
-    process.exit(0)
-  }
+              log()
+              // update
+              await FSExtra.writeFile(
+                fullPath,
+                await patchFn(await FSExtra.readFile(fullPath, 'utf-8'))
+              )
+            } catch (err) {
+              if (err instanceof Bail) {
+                return
+              }
+              throw err
+            }
+          }
+        }
+      })
+    })
+  )
 }

package/types/utils/assert.d.ts

@@ -1,2 +1,3 @@
 export declare function assertIsError(error: unknown): asserts error is Error;
+export declare function assertString(thing: any): asserts thing is string;
 //# sourceMappingURL=assert.d.ts.map

package/types/utils/assert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"assert.d.ts","sourceRoot":"","sources":["../../src/utils/assert.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,KAAK,CAIpE"}
+{"version":3,"file":"assert.d.ts","sourceRoot":"","sources":["../../src/utils/assert.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,KAAK,CAIpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAIhE"}

package/types/utils/getBaseViteConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseViteConfig.d.ts","sourceRoot":"","sources":["../../src/utils/getBaseViteConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAKxC,eAAO,MAAM,MAAM,UAWlB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,GAAG,YAAY,CAAA;CAAE,GAAG,YAAY,CAsDhG"}
+{"version":3,"file":"getBaseViteConfig.d.ts","sourceRoot":"","sources":["../../src/utils/getBaseViteConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAKxC,eAAO,MAAM,MAAM,UAWlB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,GAAG,YAAY,CAAA;CAAE,GAAG,YAAY,CAgEhG"}

package/types/utils/getReactNativeBundle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getReactNativeBundle.d.ts","sourceRoot":"","sources":["../../src/utils/getReactNativeBundle.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAS3D,eAAO,IAAI,SAAS,QAAK,CAAA;AAEzB,wBAAsB,oBAAoB,CAAC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,mBAuG7F"}
+{"version":3,"file":"getReactNativeBundle.d.ts","sourceRoot":"","sources":["../../src/utils/getReactNativeBundle.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAS3D,eAAO,IAAI,SAAS,QAAK,CAAA;AAEzB,wBAAsB,oBAAoB,CAAC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,mBAiH7F"}

package/types/utils/getReactNativeConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getReactNativeConfig.d.ts","sourceRoot":"","sources":["../../src/utils/getReactNativeConfig.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAG3D,wBAAsB,oBAAoB,CAAC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2H7F"}
+{"version":3,"file":"getReactNativeConfig.d.ts","sourceRoot":"","sources":["../../src/utils/getReactNativeConfig.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAG3D,wBAAsB,oBAAoB,CAAC,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I7F"}

package/types/utils/patches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"patches.d.ts","sourceRoot":"","sources":["../../src/utils/patches.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAmB3D,wBAAsB,YAAY,CAAC,OAAO,EAAE,iBAAiB,iBAoD5D"}
+{"version":3,"file":"patches.d.ts","sourceRoot":"","sources":["../../src/utils/patches.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAiJ3D,wBAAsB,YAAY,CAAC,OAAO,EAAE,iBAAiB,iBAqD5D"}