vxrn 0.1.46 → 0.1.48

package/dist/esm/utils/readVXRNConfig.native.js

@@ -177,7 +177,11 @@ function _readVXRNConfig() {
             resolveOptionalAsyncFunction((_userConfig_default1 = userConfig1 == null ? void 0 : userConfig1.default) !== null && _userConfig_default1 !== void 0 ? _userConfig_default1 : {})
           ];
         case 6:
-          throw err = _state.sent(), console.info(" [vxrn] Error loading config via ESM, attempting CJS, set VXRN_CJS=1 to run in cjs mode"), err;
+          throw err = _state.sent(), console.info(` [vxrn] Error loading config via ESM:
+
+`.concat(err.stack, `
+    
+ To load as CommonJS, set VXRN_CJS=1`)), err;
         case 7:
           return [
             2

package/dist/esm/utils/readVXRNConfig.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/Users/n8/vxrn/packages/vxrn/src/utils/readVXRNConfig.ts"],
-  "mappings": "AAAA,OAAOA,aAAa;AAEpB,SAASC,oBAAoB;AAC7B,OAAOC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjB,SAAsBC,iBAAAA;SAAAA,gBAAAA,MAAAA,MAAAA,SAAAA;;SAAAA,kBAAAA;AAAAA,2BAAf,oBAAA,WAAA;QAMGC,aAGAC,YAC8BA,qBAM9BC,MAKAD,aAK8BA,sBAC7BE;;;;AA1BH,iBAAA;;YAAMP,QAAQQ,WAAW,gBAAA;;;AAA/B,cAAI,CAAE,OAAA,KAAA;AACJ,mBAAA;;cAAO,CAAC;;AAGV,cAAIC,QAAQC,IAAIC;AACRP,iCAAcF,KAAKO,QAAQG,IAAG,GAAI;cACtCC,YAAY;YACd,CAAA,GACMR,aAAaD,YAAY,kBAAA,GAC/B;;cAAOU,8BAA6BT,sBAAAA,cAAAA,OAAAA,SAAAA,WAAYU,aAAO,QAAnBV,wBAAAA,SAAAA,sBAAuB,CAAC,CAAA;;;;;;;;;cAM/C;;YAAMJ,aAAa;cAC9Be,UAAU;cACVC,SAAS;YACX,CAAA;;;AAHMX,wBAAO,OAAA,KAAA,GAKM;;YAAMA,KAAKY,cAAc,oBAAoB;cAC9DC,eAAe;YACjB,CAAA;;;AAFMd,+BAAa,OAAA,KAAA,GAInB;;YAAMC,KAAKc,MAAK;;;AAAhB,wBAAA,KAAA,GACA;;YAAON,8BAA6BT,uBAAAA,eAAAA,OAAAA,SAAAA,YAAYU,aAAO,QAAnBV,yBAAAA,SAAAA,uBAAuB,CAAC,CAAA;;;AACrDE,sBAAAA,OAAAA,KAAAA,GACPc,QAAQC,KACL,yFAAA,GAEGf;;;;;;;EAEV,CAAA,GAjCsBJ,gBAAAA,MAAAA,MAAAA,SAAAA;;SAmCPW,6BAA6BS,OAAU;SAAvCT,8BAAAA,MAAAA,MAAAA,SAAAA;;SAAAA,gCAAAA;AAAAA,yCAAf,oBAAA,SAA4CS,OAAU;;;;iBAChD,OAAOA,SAAU,eACnBA,QAAQA,MAAAA,IAED,YAALA,OAAiBC,OAAAA,IACX;;YAAMD;cADZA;;;;;AACFA,kBAAQ,OAAA,KAAA;;AAEV,iBAAA;;YAAOA;;;;EACT,CAAA,GAReT,8BAAAA,MAAAA,MAAAA,SAAAA;;",
-  "names": ["FSExtra", "createServer", "jiti", "readVXRNConfig", "requireFile", "userConfig", "vite", "err", "pathExists", "process", "env", "VXRN_CJS", "cwd", "esmResolve", "resolveOptionalAsyncFunction", "default", "logLevel", "appType", "ssrLoadModule", "fixStacktrace", "close", "console", "info", "value", "Promise"]
+  "mappings": "AAAA,OAAOA,aAAa;AAEpB,SAASC,oBAAoB;AAC7B,OAAOC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjB,SAAsBC,iBAAAA;SAAAA,gBAAAA,MAAAA,MAAAA,SAAAA;;SAAAA,kBAAAA;AAAAA,2BAAf,oBAAA,WAAA;QAMGC,aAGAC,YAC8BA,qBAM9BC,MAKAD,aAK8BA,sBAC7BE;;;;AA1BH,iBAAA;;YAAMP,QAAQQ,WAAW,gBAAA;;;AAA/B,cAAI,CAAE,OAAA,KAAA;AACJ,mBAAA;;cAAO,CAAC;;AAGV,cAAIC,QAAQC,IAAIC;AACRP,iCAAcF,KAAKO,QAAQG,IAAG,GAAI;cACtCC,YAAY;YACd,CAAA,GACMR,aAAaD,YAAY,kBAAA,GAC/B;;cAAOU,8BAA6BT,sBAAAA,cAAAA,OAAAA,SAAAA,WAAYU,aAAO,QAAnBV,wBAAAA,SAAAA,sBAAuB,CAAC,CAAA;;;;;;;;;cAM/C;;YAAMJ,aAAa;cAC9Be,UAAU;cACVC,SAAS;YACX,CAAA;;;AAHMX,wBAAO,OAAA,KAAA,GAKM;;YAAMA,KAAKY,cAAc,oBAAoB;cAC9DC,eAAe;YACjB,CAAA;;;AAFMd,+BAAa,OAAA,KAAA,GAInB;;YAAMC,KAAKc,MAAK;;;AAAhB,wBAAA,KAAA,GACA;;YAAON,8BAA6BT,uBAAAA,eAAAA,OAAAA,SAAAA,YAAYU,aAAO,QAAnBV,yBAAAA,SAAAA,uBAAuB,CAAC,CAAA;;;AACrDE,sBAAAA,OAAAA,KAAAA,GACPc,QAAQC,KAAM;;EAEN,OAAVf,IAAIgB,OAAM;;qCAAA,CAAA,GAGFhB;;;;;;;EAEV,CAAA,GAnCsBJ,gBAAAA,MAAAA,MAAAA,SAAAA;;SAqCPW,6BAA6BU,OAAU;SAAvCV,8BAAAA,MAAAA,MAAAA,SAAAA;;SAAAA,gCAAAA;AAAAA,yCAAf,oBAAA,SAA4CU,OAAU;;;;iBAChD,OAAOA,SAAU,eACnBA,QAAQA,MAAAA,IAED,YAALA,OAAiBC,OAAAA,IACX;;YAAMD;cADZA;;;;;AACFA,kBAAQ,OAAA,KAAA;;AAEV,iBAAA;;YAAOA;;;;EACT,CAAA,GAReV,8BAAAA,MAAAA,MAAAA,SAAAA;;",
+  "names": ["FSExtra", "createServer", "jiti", "readVXRNConfig", "requireFile", "userConfig", "vite", "err", "pathExists", "process", "env", "VXRN_CJS", "cwd", "esmResolve", "resolveOptionalAsyncFunction", "default", "logLevel", "appType", "ssrLoadModule", "fixStacktrace", "close", "console", "info", "stack", "value", "Promise"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxrn",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "type": "module",
@@ -29,13 +29,13 @@
     "@babel/code-frame": "^7.21.4",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vxrn/react-native-prebuilt": "0.1.46",
-    "@vxrn/router": "0.1.46",
-    "@vxrn/safe-area": "0.1.46",
-    "@vxrn/vite-flow": "0.1.46",
-    "@vxrn/vite-native-client": "0.1.46",
-    "@vxrn/vite-native-hmr": "0.1.46",
-    "@vxrn/vite-native-swc": "0.1.46",
+    "@vxrn/react-native-prebuilt": "0.1.48",
+    "@vxrn/router": "0.1.48",
+    "@vxrn/safe-area": "0.1.48",
+    "@vxrn/vite-flow": "0.1.48",
+    "@vxrn/vite-native-client": "0.1.48",
+    "@vxrn/vite-native-hmr": "0.1.48",
+    "@vxrn/vite-native-swc": "0.1.48",
     "citty": "^0.1.6",
     "crossws": "^0.2.4",
     "es-module-lexer": "^1.3.0",
@@ -47,7 +47,7 @@
     "get-port-please": "^3.1.2",
     "glob": "^10.3.12",
     "h3": "^1.11.1",
-    "h3-proxy": "^1.12.0",
+    "h3-proxy": "^1.13.0",
     "import-meta-resolve": "^4.0.0",
     "jiti": "^1.21.0",
     "metro-inspector-proxy": "^0.71.0",
@@ -60,7 +60,7 @@
     "sirv": "^2.0.4",
     "source-map": "^0.7.3",
     "url": "^0.11.0",
-    "vite": "^5.2.10",
+    "vite": "^5.2.11",
     "ws": "^8.7.0"
   },
   "devDependencies": {

package/src/cli.ts

@@ -59,7 +59,17 @@ const build = defineCommand({
     version: '0.0.0',
     description: 'Build your app',
   },
-  args: {},
+  args: {
+    step: {
+      type: 'string',
+      required: false,
+    },
+    // always wanted to be able to just generate one-off pages
+    // page: {
+    //   type: 'string',
+    //   required: false,
+    // },
+  },
   async run({ args }) {
     const userConfig = await readVXRNConfig()
     const { build } = await import(
@@ -71,7 +81,7 @@ const build = defineCommand({
       console.error(err?.message || err)
     })
 
-    const results = await build(userConfig)
+    const results = await build(userConfig, args)
 
     if (process.env.DEBUG) {
       console.info('results', results)

package/src/constants.ts

@@ -1,10 +1,5 @@
-import type { UserConfig } from 'vite'
-
 export const DEFAULT_PORT = 8081
 
-// TODO move to router
-export const EMPTY_LOADER_STRING = `function loader() {/* ✷✷✷ */};`
-
 export const nativeExtensions = [
   '.native.tsx',
   '.native.jsx',
@@ -30,75 +25,3 @@ export const webExtensions = [
   '.css',
   '.json',
 ]
-
-const needsInterop = [
-  'react',
-  'react/jsx-runtime',
-  'react/jsx-dev-runtime',
-  'react-native-web-internals',
-  'react-dom',
-  'react-native-web',
-  'react-dom/server',
-  'react-dom/client',
-
-  'url-parse',
-  '@vxrn/safe-area',
-  'query-string',
-  'escape-string-regexp',
-  'use-latest-callback',
-  'react-is',
-  'fast-deep-equal',
-  '@react-navigation/native',
-  'tamagui/linear-gradient',
-  'react-native-svg',
-  '@supabase/auth-helpers-react',
-  'parse-numeric-range',
-  'use-sync-external-store',
-  'use-sync-external-store/shim',
-  'swr',
-]
-
-export const depsToOptimize = [
-  ...needsInterop,
-  '@react-native/normalize-color',
-  '@vxrn/router',
-  'expo-modules-core',
-  'expo-status-bar',
-  'react-native-web',
-  'react-native-web-lite',
-  'react-native',
-  '@tamagui/alert-dialog',
-  '@tamagui/avatar',
-  '@tamagui/core',
-  '@tamagui/dialog',
-  '@tamagui/group',
-  '@tamagui/helpers-icon',
-  '@tamagui/helpers',
-  '@tamagui/image',
-  '@tamagui/lucide-icons',
-  '@tamagui/popover',
-  '@tamagui/popper',
-  '@tamagui/scroll-view',
-  '@tamagui/select',
-  '@tamagui/sheet',
-  '@tamagui/switch',
-  '@tamagui/tabs',
-  '@tamagui/toast',
-  '@tamagui/toggle-group',
-  '@tamagui/tooltip',
-  '@tamagui/use-window-dimensions',
-  '@tamagui/web',
-  'tamagui',
-  'react-native-web',
-  'react-native-web-lite',
-  'reforest',
-]
-
-export const optimizeDeps = {
-  include: depsToOptimize,
-  needsInterop,
-  exclude: ['util'],
-  esbuildOptions: {
-    resolveExtensions: webExtensions,
-  },
-} satisfies UserConfig['optimizeDeps']

package/src/exports/build.ts

@@ -2,16 +2,17 @@ import { build as esbuild } from 'esbuild'
 import { resolve as importMetaResolve } from 'import-meta-resolve'
 import fs from 'node:fs'
 import { tmpdir } from 'node:os'
-import path, { dirname, resolve } from 'node:path'
+import path from 'node:path'
 import { mergeConfig, build as viteBuild, type UserConfig } from 'vite'
-
 import FSExtra from 'fs-extra'
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
 import type { VXRNConfig } from '../types'
 import { getBaseViteConfig } from '../utils/getBaseViteConfig'
 import { getHtml } from '../utils/getHtml'
+import { getOptimizeDeps } from '../utils/getOptimizeDeps'
 import { getOptionsFilled, type VXRNConfigFilled } from '../utils/getOptionsFilled'
-import { optimizeDeps } from '../constants'
+
+Error.stackTraceLimit = Infinity
 
 export const resolveFile = (path: string) => {
   try {
@@ -23,6 +24,8 @@ export const resolveFile = (path: string) => {
 
 const { ensureDir, existsSync, readFile, pathExists } = FSExtra
 
+type BuildOptions = { step?: string; page?: string }
+
 // web only for now
 
 // TODO:
@@ -30,12 +33,14 @@ const { ensureDir, existsSync, readFile, pathExists } = FSExtra
 //  - move router stuff into router package
 //  - generateStaticPages becomes a vite 'post' postbuild callback in router plugin
 
-export const build = async (optionsIn: VXRNConfig) => {
+export const build = async (optionsIn: VXRNConfig, buildOptions: BuildOptions = {}) => {
   const options = await getOptionsFilled(optionsIn)
 
   // TODO?
   process.env.NODE_ENV = 'production'
 
+  const { optimizeDeps } = getOptimizeDeps('build')
+
   let webBuildConfig = mergeConfig(
     getBaseViteConfig({
       mode: 'production',
@@ -51,54 +56,29 @@ export const build = async (optionsIn: VXRNConfig) => {
     webBuildConfig = mergeConfig(webBuildConfig, options.webConfig) as any
   }
 
-  console.info(`build client`)
-  await viteBuild(
-    mergeConfig(webBuildConfig, {
-      build: {
-        ssrManifest: true,
-        outDir: 'dist/client',
-      },
-    } satisfies UserConfig)
-  )
+  if (buildOptions.step !== 'generate') {
+    console.info(`build client`)
+    await viteBuild(
+      mergeConfig(webBuildConfig, {
+        build: {
+          ssrManifest: true,
+          outDir: 'dist/client',
+        },
+      } satisfies UserConfig)
+    )
+  }
 
   console.info(`build server`)
   const { output } = (await viteBuild(
     mergeConfig(webBuildConfig, {
-      plugins: [
-        {
-          name: 'test',
-          enforce: 'pre',
-          async resolveId(id, importer = '') {
-            if (id[0] === '.') {
-              const absolutePath = resolve(dirname(importer), id)
-              const webPath = absolutePath.replace(/(.m?js)/, '') + '.web.js'
-              if (webPath === id) return
-              try {
-                const directoryPath = absolutePath + '/index.web.js'
-                if (await pathExists(directoryPath)) {
-                  console.info(`temp fix found ${directoryPath}`)
-                  return directoryPath
-                }
-                if (await pathExists(webPath)) {
-                  console.info(`temp fix found ${webPath}`)
-                  return webPath
-                }
-              } catch (err) {
-                console.warn(`error probably fine`, err)
-              }
-            }
-          },
-        },
-      ],
-
-      optimizeDeps: {
-        esbuildOptions: {
-          format: 'cjs',
-        },
-      },
+      // optimizeDeps: {
+      //   esbuildOptions: {
+      //     format: 'cjs',
+      //   },
+      // },
 
       ssr: {
-        noExternal: true,
+        noExternal: optimizeDeps.include,
         optimizeDeps,
       },
 
@@ -111,7 +91,7 @@ export const build = async (optionsIn: VXRNConfig) => {
           external: [],
         },
       },
-    })
+    } satisfies UserConfig)
   )) as RollupOutput
 
   console.info(`generating static pages`)
@@ -137,58 +117,70 @@ async function generateStaticPages(
 
   const assets: OutputAsset[] = []
 
-  const allRoutes = (
-    await Promise.all(
-      serverOutput.flatMap(async (output) => {
-        if (output.type === 'asset') {
-          assets.push(output)
-          return []
-        }
-
-        const id = output.facadeModuleId || ''
-        const file = path.basename(id)
-        const name = file.replace(/\.[^/.]+$/, '')
-
-        if (!id || file[0] === '_' || file.includes('entry-server')) {
-          return []
-        }
-        if (id.includes('+api')) {
-          return []
-        }
-
-        const endpointPath = path.join(options.root, 'dist/server', output.fileName)
-        const exported = await import(endpointPath)
-
-        const paramsList = ((await exported.generateStaticParams?.()) ?? [{}]) as Object[]
-
-        return await Promise.all(
-          paramsList.map(async (params) => {
-            const path = getUrl(params)
-            const loaderData = (await exported.loader?.({ path: getUrl(params), params })) ?? {}
-            return { path, loaderData }
-          })
-        )
-
-        function getUrl(_params = {}) {
-          return name === 'index'
-            ? '/'
-            : `/${name
-                .split('/')
-                .map((part) => {
-                  if (part[0] === '[') {
-                    const found = _params[part.slice(1, part.length - 1)]
-                    if (!found) {
-                      console.warn('not found', { _params, part })
-                    }
-                    return found
-                  }
-                  return part
-                })
-                .join('/')}`
-        }
-      })
-    )
-  ).flat()
+  const allRoutes: {
+    path: string
+    params: Object
+    loaderData: any
+  }[] = []
+
+  for (const output of serverOutput) {
+    if (output.type === 'asset') {
+      assets.push(output)
+      continue
+    }
+
+    const id = output.facadeModuleId || ''
+    const file = path.basename(id)
+    const name = file.replace(/\.[^/.]+$/, '')
+
+    if (!id || file[0] === '_' || file.includes('entry-server')) {
+      continue
+    }
+    if (id.includes('+api')) {
+      continue
+    }
+
+    const endpointPath = path.join(options.root, 'dist/server', output.fileName)
+
+    const exported = await import(endpointPath)
+
+    const paramsList = ((await exported.generateStaticParams?.()) ?? [{}]) as Object[]
+
+    for (const params of paramsList) {
+      const path = getUrl(params)
+      const loaderData = (await exported.loader?.({ path, params })) ?? {}
+      allRoutes.push({ path, params, loaderData })
+    }
+
+    function getUrl(_params = {}) {
+      if (name === 'index') {
+        return '/'
+      }
+      if (name.startsWith('[...')) {
+        const part = name.replace('[...', '').replace(']', '')
+        return `/${_params[part]}`
+      }
+      return `/${name
+        .split('/')
+        .map((part) => {
+          if (part[0] === '[') {
+            const found = _params[part.slice(1, part.length - 1)]
+            if (!found) {
+              console.warn('not found', { _params, part })
+            }
+            return found
+          }
+          return part
+        })
+        .join('/')}`
+    }
+  }
+
+  // can build them in parallel
+  // const allRoutes = (
+  //   await Promise.all(
+  //   )
+  // ).flat()
 
   // for now just inline
   const cssStringRaw = assets
@@ -211,7 +203,10 @@ async function generateStaticPages(
   const cssString = await FSExtra.readFile(tmpCssFile, 'utf-8')
 
   // pre-render each route...
-  for (const { path, loaderData } of allRoutes) {
+  for (const { path, loaderData, params } of allRoutes) {
+    const loaderProps = { params }
+    globalThis['__vxrnLoaderProps__'] = loaderProps
+    console.info(`render`, path)
     const { appHtml, headHtml } = await render({ path })
     const slashFileName = `${path === '/' ? '/index' : path}.html`
     const clientHtmlPath = toAbsolute(`dist/client${slashFileName}`)
@@ -221,6 +216,7 @@ async function generateStaticPages(
       appHtml,
       headHtml,
       loaderData,
+      loaderProps,
       css: cssString,
     })
     const filePath = toAbsolute(`dist/static${slashFileName}`)

package/src/exports/dev.ts

@@ -13,7 +13,6 @@ import { createServer as nodeCreateServer } from 'node:http'
 import { dirname, join, relative, resolve } from 'node:path'
 import readline from 'node:readline'
 import { WebSocket } from 'ws'
-
 import * as babel from '@babel/core'
 import { buildReact, buildReactJSX, buildReactNative } from '@vxrn/react-native-prebuilt'
 import viteReactPlugin, { swcTransform, transformForBuild } from '@vxrn/vite-native-swc'
@@ -33,7 +32,7 @@ import {
 import createViteFlow from '@vxrn/vite-flow'
 import type { Peer } from 'crossws'
 import { resolve as importMetaResolve } from 'import-meta-resolve'
-import { depsToOptimize, nativeExtensions, optimizeDeps } from '../constants'
+import { nativeExtensions } from '../constants'
 import { clientInjectionsPlugin } from '../plugins/clientInjectPlugin'
 import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
 import type { VXRNConfig } from '../types'
@@ -41,12 +40,15 @@ import { getBaseViteConfig } from '../utils/getBaseViteConfig'
 import { getOptionsFilled, type VXRNConfigFilled } from '../utils/getOptionsFilled'
 import { getVitePath } from '../utils/getVitePath'
 import { checkPatches } from '../utils/patches'
+import { getOptimizeDeps } from '../utils/getOptimizeDeps'
 
 // sorry for the mess, exploring before abstracting
 
 let isBuildingNativeBundle: Promise<string> | null = null
 const hotUpdateCache = new Map<string, string>()
 
+let connectedNativeClients = 0
+
 export const resolveFile = (path: string) => {
   try {
     return importMetaResolve(path, import.meta.url).replace('file://', '')
@@ -176,7 +178,6 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
   const { handleUpgrade } = wsAdapter(app.websocket)
 
   // vite hmr two way bridge:
-  // vite hmr:
   app.use(
     '/__vxrnhmr',
     defineEventHandler({
@@ -217,6 +218,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
       websocket: {
         open(peer) {
           console.debug('[hmr] open', peer)
+          connectedNativeClients++
         },
 
         message(peer, message) {
@@ -228,6 +230,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
 
         close(peer, event) {
           console.info('[hmr] close', peer, event)
+          connectedNativeClients--
         },
 
         error(peer, error) {
@@ -291,11 +294,14 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
   )
 
   // Define proxy event handler
-  const proxyEventHandler = createProxyEventHandler({
-    target: `http://127.0.0.1:${vitePort}`,
-    enableLogger: !!process.env.DEBUG,
-  })
-  app.use(eventHandler(proxyEventHandler))
+  app.use(
+    eventHandler(
+      createProxyEventHandler({
+        target: `http://127.0.0.1:${vitePort}`,
+        enableLogger: process.env.DEBUG?.startsWith('vxrn'),
+      })
+    )
+  )
 
   const server = nodeCreateServer(toNodeListener(app))
 
@@ -310,21 +316,23 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
 
       console.info(`Server running on http://localhost:${port}`)
 
-      // bridge socket between vite
-      if (vitePort) {
-        socket = new WebSocket(`ws://localhost:${vitePort}/__vxrnhmr`, 'vite-hmr')
+      server.once('listening', () => {
+        // bridge socket between vite
+        if (vitePort) {
+          socket = new WebSocket(`ws://127.0.0.1:${vitePort}/__vxrnhmr`, 'vite-hmr')
 
-        socket.on('message', (msg) => {
-          const message = msg.toString()
-          for (const listener of [...clients]) {
-            listener.send(message)
-          }
-        })
+          socket.on('message', (msg) => {
+            const message = msg.toString()
+            for (const listener of [...clients]) {
+              listener.send(message)
+            }
+          })
 
-        socket.on('error', (err) => {
-          console.info('error bridging socket to vite', err)
-        })
-      }
+          socket.on('error', (err) => {
+            console.info('error bridging socket to vite', err)
+          })
+        }
+      })
 
       return {
         closePromise: new Promise((res) => viteServer.httpServer?.on('close', res)),
@@ -339,6 +347,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
 
 async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugin: any) {
   const { root, port, cacheDir } = options
+  const { depsToOptimize } = getOptimizeDeps('build')
 
   if (process.env.LOAD_TMP_BUNDLE) {
     // for easier quick testing things:
@@ -765,23 +774,9 @@ function isWithin(outer: string, inner: string) {
 // used for normalizing hot reloads
 let entryRoot = ''
 
-// function watchNodeModules(modules: string[]): PluginOption {
-//   return {
-//     name: 'watch-node-modules',
-//     config() {
-//       return {
-//         server: {
-//           watch: {
-//             ignored: modules.map((m) => `!**/packages/${m}/**`),
-//           },
-//         },
-//       }
-//     },
-//   }
-// }
-
 async function getViteServerConfig(config: VXRNConfigFilled) {
-  const { root, host, webConfig, cacheDir } = config
+  const { root, host, webConfig } = config
+  const { optimizeDeps } = getOptimizeDeps('serve')
 
   let serverConfig: UserConfig = mergeConfig(
     getBaseViteConfig({
@@ -792,7 +787,6 @@ async function getViteServerConfig(config: VXRNConfigFilled) {
       clearScreen: false,
       plugins: [
         reactNativeHMRPlugin(config),
-        // watchNodeModules(['@tamagui/popper'])
 
         {
           name: 'process-env-ssr',
@@ -804,11 +798,24 @@ async function getViteServerConfig(config: VXRNConfigFilled) {
           },
         },
       ],
+
       optimizeDeps,
+
       ssr: {
-        noExternal: true,
+        // noExternal true causes many incompat issues because we need things on disk to work
+        // eg generally node uses .cjs extensions to "switch" back to cjs mode on import, but once bundled
+        // this wont happen, breaking many things
+        // but we need react related things always so they dont duplicate
+        noExternal: [
+          ...optimizeDeps.include,
+          'react',
+          'react-dom',
+          'react-dom/server',
+          'react-dom/client',
+        ],
         optimizeDeps,
       },
+
       server: {
         hmr: {
           path: '/__vxrnhmr',
@@ -850,6 +857,9 @@ function reactNativeHMRPlugin({ root }: VXRNConfigFilled) {
         if (!isWithin(root, file)) {
           return
         }
+        if (!connectedNativeClients) {
+          return
+        }
 
         const [module] = modules
         if (!module) return