vxrn 0.1.50 → 0.1.52

package/src/exports/dev.ts

@@ -1,4 +1,6 @@
+import type { Peer } from 'crossws'
 import wsAdapter from 'crossws/adapters/node'
+import FSExtra from 'fs-extra'
 import {
   createApp,
   createRouter,
@@ -8,56 +10,26 @@ import {
   toNodeListener,
 } from 'h3'
 import { createProxyEventHandler } from 'h3-proxy'
-import { readFile, rm } from 'node:fs/promises'
+import { rm } from 'node:fs/promises'
 import { createServer as nodeCreateServer } from 'node:http'
-import { dirname, join, relative, resolve } from 'node:path'
-import readline from 'node:readline'
+import { join } from 'node:path'
+import { createServer, resolveConfig } from 'vite'
 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'
-import { parse } from 'es-module-lexer'
-import FSExtra from 'fs-extra'
-import {
-  build,
-  createServer,
-  mergeConfig,
-  resolveConfig,
-  transformWithEsbuild,
-  type InlineConfig,
-  type PluginOption,
-  type UserConfig,
-} from 'vite'
-
-import createViteFlow from '@vxrn/vite-flow'
-import type { Peer } from 'crossws'
-import { resolve as importMetaResolve } from 'import-meta-resolve'
-import { nativeExtensions } from '../constants'
 import { clientInjectionsPlugin } from '../plugins/clientInjectPlugin'
-import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
 import type { VXRNConfig } from '../types'
-import { getBaseViteConfig } from '../utils/getBaseViteConfig'
-import { getOptionsFilled, type VXRNConfigFilled } from '../utils/getOptionsFilled'
-import { getVitePath } from '../utils/getVitePath'
+import { bindKeypressInput } from '../utils/bindKeypressInput'
+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 { 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://', '')
-  } catch {
-    return require.resolve(path)
-  }
-}
 
-const { ensureDir, pathExists, pathExistsSync } = FSExtra
+const { ensureDir } = FSExtra
 
 export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean }) => {
   const options = await getOptionsFilled(rest)
@@ -218,7 +190,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
       websocket: {
         open(peer) {
           console.debug('[hmr] open', peer)
-          connectedNativeClients++
+          addConnectedNativeClient()
         },
 
         message(peer, message) {
@@ -230,7 +202,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
 
         close(peer, event) {
           console.info('[hmr] close', peer, event)
-          connectedNativeClients--
+          removeConnectedNativeClient()
         },
 
         error(peer, error) {
@@ -344,603 +316,3 @@ 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:
-    const tmpBundle = join(process.cwd(), 'bundle.tmp.js')
-    if (await pathExists(tmpBundle)) {
-      console.info('⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ returning temp bundle ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️', tmpBundle)
-      return await readFile(tmpBundle, 'utf-8')
-    }
-  }
-
-  if (isBuildingNativeBundle) {
-    const res = await isBuildingNativeBundle
-    return res
-  }
-
-  let done
-  isBuildingNativeBundle = new Promise((res) => {
-    done = res
-  })
-
-  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!)
-        }
-      )
-    })
-  }
-
-  const viteFlow = options.flow ? createViteFlow(options.flow) : null
-
-  // build app
-  let nativeBuildConfig = {
-    plugins: [
-      viteFlow,
-
-      swapPrebuiltReactModules(cacheDir),
-
-      {
-        name: 'reanimated',
-        async transform(code, id) {
-          if (code.includes('worklet')) {
-            const out = await babelReanimated(code, id)
-            return out
-          }
-        },
-      },
-
-      viteRNClientPlugin,
-
-      reactNativeCommonJsPlugin({
-        root,
-        port,
-        mode: 'build',
-      }),
-
-      viteReactPlugin({
-        tsDecorators: true,
-        mode: 'build',
-      }),
-
-      {
-        name: 'treat-js-files-as-jsx',
-        async transform(code, id) {
-          if (!id.includes(`expo-status-bar`)) return null
-          // Use the exposed transform from vite, instead of directly
-          // transforming with esbuild
-          return transformWithEsbuild(code, id, {
-            loader: 'jsx',
-            jsx: 'automatic',
-          })
-        },
-      },
-    ].filter(Boolean),
-
-    appType: 'custom',
-    root,
-    clearScreen: false,
-
-    optimizeDeps: {
-      include: depsToOptimize,
-      esbuildOptions: {
-        jsx: 'automatic',
-      },
-    },
-
-    resolve: {
-      extensions: nativeExtensions,
-    },
-
-    mode: 'development',
-
-    define: {
-      'process.env.NODE_ENV': `"development"`,
-    },
-
-    build: {
-      ssr: false,
-      minify: false,
-      commonjsOptions: {
-        transformMixedEsModules: true,
-      },
-      rollupOptions: {
-        input: options.entries.native,
-        treeshake: false,
-        preserveEntrySignatures: 'strict',
-        output: {
-          preserveModules: true,
-          format: 'cjs',
-        },
-      },
-    },
-  } satisfies InlineConfig
-
-  if (options.nativeConfig) {
-    nativeBuildConfig = mergeConfig(nativeBuildConfig, options.nativeConfig) as any
-  }
-
-  // // this fixes my swap-react-native plugin not being called pre 😳
-  await resolveConfig(nativeBuildConfig, 'build')
-
-  const buildOutput = await build(nativeBuildConfig)
-
-  if (!('output' in buildOutput)) {
-    throw `❌`
-  }
-
-  let appCode = buildOutput.output
-    // entry last
-    .sort((a, b) => (a['isEntry'] ? 1 : -1))
-    .map((outputModule) => {
-      if (outputModule.type == 'chunk') {
-        const importsMap = {
-          currentPath: outputModule.fileName,
-        }
-        for (const imp of outputModule.imports) {
-          const relativePath = relative(dirname(outputModule.fileName), imp)
-          importsMap[relativePath[0] === '.' ? relativePath : './' + relativePath] = imp
-        }
-
-        if (outputModule.isEntry) {
-          entryRoot = dirname(outputModule.fileName)
-        }
-
-        return `
-___modules___["${outputModule.fileName}"] = ((exports, module) => {
-const require = createRequire(${JSON.stringify(importsMap, null, 2)})
-
-${outputModule.code}
-})
-
-${
-  outputModule.isEntry
-    ? `
-// run entry
-const __require = createRequire({})
-__require("react-native")
-__require("${outputModule.fileName}")
-`
-    : ''
-}
-`
-      }
-    })
-    .join('\n')
-
-  if (!appCode) {
-    throw `❌`
-  }
-
-  appCode = appCode
-    // TEMP FIX for router tamagui thing since expo router 3 upgrade
-    .replaceAll('dist/esm/index.mjs"', 'dist/esm/index.js"')
-
-  // TODO this is not stable based on cwd
-  const appRootParent = join(root, '..', '..')
-
-  const prebuilds = {
-    reactJSX: join(cacheDir, 'react-jsx-runtime.js'),
-    react: join(cacheDir, 'react.js'),
-    reactNative: join(cacheDir, 'react-native.js'),
-  }
-
-  const templateFile = resolveFile('vxrn/react-native-template.js')
-  const template = (await readFile(templateFile, 'utf-8'))
-    .replace('_virtual/virtual_react-native.js', relative(appRootParent, prebuilds.reactNative))
-    .replace('_virtual/virtual_react.js', relative(appRootParent, prebuilds.react))
-    .replaceAll('_virtual/virtual_react-jsx.js', relative(appRootParent, prebuilds.reactJSX))
-
-  const out = template + appCode
-
-  done(out)
-  isBuildingNativeBundle = null
-
-  return out
-}
-
-// we should just detect or whitelist and use flow to convert instead of this but i did a
-// few things to the prebuilts to make them work, we may need to account for
-async function swapPrebuiltReactModules(cacheDir: string) {
-  const prebuilds = {
-    reactJSX: join(cacheDir, 'react-jsx-runtime.js'),
-    react: join(cacheDir, 'react.js'),
-    reactNative: join(cacheDir, 'react-native.js'),
-  }
-
-  if (!(await pathExists(prebuilds.reactNative))) {
-    console.info('Pre-building react, react-native react/jsx-runtime (one time cost)...')
-    await Promise.all([
-      buildReactNative({
-        entryPoints: [resolveFile('react-native')],
-        outfile: prebuilds.reactNative,
-      }),
-      buildReact({
-        entryPoints: [resolveFile('react')],
-        outfile: prebuilds.react,
-      }),
-      buildReactJSX({
-        entryPoints: [resolveFile('react/jsx-dev-runtime')],
-        outfile: prebuilds.reactJSX,
-      }),
-    ])
-  }
-
-  // react native port (it scans 19000 +5)
-  const jsxRuntime = {
-    // alias: 'virtual:react-jsx',
-    alias: prebuilds.reactJSX,
-    contents: await readFile(prebuilds.reactJSX, 'utf-8'),
-  } as const
-
-  const virtualModules = {
-    'react-native': {
-      // alias: 'virtual:react-native',
-      alias: prebuilds.reactNative,
-      contents: await readFile(prebuilds.reactNative, 'utf-8'),
-    },
-    react: {
-      // alias: 'virtual:react',
-      alias: prebuilds.react,
-      contents: await readFile(prebuilds.react, 'utf-8'),
-    },
-    'react/jsx-runtime': jsxRuntime,
-    'react/jsx-dev-runtime': jsxRuntime,
-  } as const
-
-  return {
-    name: `swap-react-native`,
-    enforce: 'pre',
-
-    resolveId(id, importer = '') {
-      if (id.startsWith('react-native/Libraries')) {
-        return `virtual:rn-internals:${id}`
-      }
-
-      // this will break web support, we need a way to somehow switch between?
-      if (id === 'react-native-web') {
-        return prebuilds.reactNative
-      }
-
-      for (const targetId in virtualModules) {
-        if (id === targetId || id.includes(`node_modules/${targetId}/`)) {
-          const info = virtualModules[targetId]
-
-          return info.alias
-        }
-      }
-
-      // TODO this is terrible and slow, we should be able to get extensions working:
-      // having trouble getting .native.js to be picked up via vite
-      // tried adding packages to optimizeDeps, tried resolveExtensions + extensions...
-      // tried this but seems to not be called for node_modules
-      if (isBuildingNativeBundle) {
-        if (id[0] === '.') {
-          const absolutePath = resolve(dirname(importer), id)
-          const nativePath = absolutePath.replace(/(.m?js)/, '.native.js')
-          if (nativePath === id) return
-          try {
-            const directoryPath = absolutePath + '/index.native.js'
-            const directoryNonNativePath = absolutePath + '/index.js'
-            if (pathExistsSync(directoryPath)) {
-              return directoryPath
-            }
-            if (pathExistsSync(directoryNonNativePath)) {
-              return directoryNonNativePath
-            }
-            if (pathExistsSync(nativePath)) {
-              return nativePath
-            }
-          } catch (err) {
-            console.warn(`error probably fine`, err)
-          }
-        }
-      }
-    },
-
-    load(id) {
-      if (id.startsWith('virtual:rn-internals')) {
-        const idOut = id.replace('virtual:rn-internals:', '')
-        let out = `const ___val = __cachedModules["${idOut}"]
-        const ___defaultVal = ___val ? ___val.default || ___val : ___val
-        export default ___defaultVal`
-        return out
-      }
-
-      for (const targetId in virtualModules) {
-        const info = virtualModules[targetId as keyof typeof virtualModules]
-        if (id === info.alias) {
-          return info.contents
-        }
-      }
-    },
-  } satisfies PluginOption
-}
-
-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',
-  }
-}
-
-export function bindKeypressInput() {
-  if (!process.stdin.setRawMode) {
-    console.warn({
-      msg: 'Interactive mode is not supported in this environment',
-    })
-    return
-  }
-
-  readline.emitKeypressEvents(process.stdin)
-  process.stdin.setRawMode(true)
-
-  process.stdin.on('keypress', (_key, data) => {
-    const { ctrl, name } = data
-    if (ctrl === true) {
-      switch (name) {
-        // biome-ignore lint/suspicious/noFallthroughSwitchClause: <explanation>
-        case 'c':
-          process.exit()
-        case 'z':
-          process.emit('SIGTSTP', 'SIGTSTP')
-          break
-      }
-    } else {
-      switch (name) {
-        case 'r':
-          // ctx.broadcastToMessageClients({ method: 'reload' })
-          // ctx.log.info({
-          //   msg: 'Reloading app',
-          // })
-          break
-        case 'd':
-          // ctx.broadcastToMessageClients({ method: 'devMenu' })
-          // ctx.log.info({
-          //   msg: 'Opening developer menu',
-          // })
-          break
-        case 'c':
-          process.stdout.write('\u001b[2J\u001b[0;0H')
-          // TODO: after logging we should print information about port and host
-          break
-      }
-    }
-  })
-}
-
-function isWithin(outer: string, inner: string) {
-  const rel = relative(outer, inner)
-  return !rel.startsWith('../') && rel !== '..'
-}
-
-// used for normalizing hot reloads
-let entryRoot = ''
-
-async function getViteServerConfig(config: VXRNConfigFilled) {
-  const { root, host, webConfig } = config
-  const { optimizeDeps } = getOptimizeDeps('serve')
-
-  let serverConfig: UserConfig = mergeConfig(
-    getBaseViteConfig({
-      mode: 'development',
-    }),
-    {
-      root,
-      clearScreen: false,
-      plugins: [
-        reactNativeHMRPlugin(config),
-
-        {
-          name: 'process-env-ssr',
-          transform(code, id, options) {
-            if (id.includes('node_modules')) return
-            if (code.includes('process.env.TAMAGUI_IS_SERVER')) {
-              return code.replaceAll('process.env.TAMAGUI_IS_SERVER', `${!!options?.ssr}`)
-            }
-          },
-        },
-      ],
-
-      optimizeDeps,
-
-      ssr: {
-        // 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',
-        },
-        cors: true,
-        host,
-      },
-    } satisfies UserConfig
-  ) satisfies InlineConfig
-
-  if (webConfig) {
-    serverConfig = mergeConfig(serverConfig, webConfig) as any
-    // it doesnt override true with array which youd expect
-    const theirNoExternal = webConfig.ssr?.noExternal
-    if (theirNoExternal != null && theirNoExternal !== true) {
-      serverConfig.ssr!.noExternal = theirNoExternal
-    }
-  }
-
-  if (process.env.DEBUG) {
-    console.debug('server config is', serverConfig)
-    console.debug('server ssr\n', JSON.stringify(serverConfig.ssr, null, 2))
-  }
-
-  serverConfig = {
-    ...serverConfig,
-    plugins: [...serverConfig.plugins!],
-  }
-
-  return serverConfig
-}
-
-function reactNativeHMRPlugin({ root }: VXRNConfigFilled) {
-  return {
-    name: 'client-transform',
-
-    async handleHotUpdate({ read, modules, file }) {
-      try {
-        if (!isWithin(root, file)) {
-          return
-        }
-        if (!connectedNativeClients) {
-          return
-        }
-
-        const [module] = modules
-        if (!module) return
-
-        const id = module?.url || file.replace(root, '')
-
-        const code = await read()
-
-        // got a weird pre compiled file on startup
-        if (code.startsWith(`'use strict';`)) return
-
-        if (!code) {
-          return
-        }
-
-        let source = code
-
-        // we have to remove jsx before we can parse imports...
-        source = (await transformForBuild(id, source))?.code || ''
-
-        const importsMap = {}
-
-        // parse imports of modules into ids:
-        // eg `import x from '@tamagui/core'` => `import x from '/me/node_modules/@tamagui/core/index.js'`
-        const [imports] = parse(source)
-
-        let accumulatedSliceOffset = 0
-
-        for (const specifier of imports) {
-          const { n: importName, s: start } = specifier
-
-          if (importName) {
-            const id = await getVitePath(entryRoot, file, importName)
-            if (!id) {
-              console.warn('???')
-              continue
-            }
-
-            importsMap[id] = id.replace(/^(\.\.\/)+/, '')
-
-            // replace module name with id for hmr
-            const len = importName.length
-            const extraLen = id.length - len
-            source =
-              source.slice(0, start + accumulatedSliceOffset) +
-              id +
-              source.slice(start + accumulatedSliceOffset + len)
-            accumulatedSliceOffset += extraLen
-          }
-        }
-
-        // then we have to convert to commonjs..
-        source =
-          (
-            await swcTransform(id, source, {
-              mode: 'serve-cjs',
-            })
-          )?.code || ''
-
-        if (!source) {
-          throw '❌ no source'
-        }
-
-        importsMap['currentPath'] = id
-
-        const hotUpdateSource = `exports = ((exports) => {
-          const require = createRequire(${JSON.stringify(importsMap, null, 2)})
-          ${source
-            .replace(`import.meta.hot.accept(() => {})`, ``)
-            // replace import.meta.glob with empty array in hot reloads
-            .replaceAll(/import.meta.glob\(.*\)/gi, `globalThis['__importMetaGlobbed'] || {}`)};
-          return exports })({})`
-
-        if (process.env.DEBUG) {
-          console.info(`Sending hot update`, hotUpdateSource)
-        }
-
-        hotUpdateCache.set(id, hotUpdateSource)
-      } catch (err) {
-        console.error(`Error processing hmr update:`, err)
-      }
-    },
-  }
-}

package/src/exports/serve.ts

@@ -13,6 +13,10 @@ export const serve = async (optionsIn: VXRNConfig) => {
     gzip: true,
   })
 
+  if (options.serve) {
+    options.serve(options, app)
+  }
+
   app.use(
     defineEventHandler(async ({ node: { req, res } }) => {
       await new Promise<void>((response) => {