vxrn 0.0.6 → 0.1.0

package/src/create.ts

@@ -1,59 +1,256 @@
-import { readFile, writeFile } from 'fs/promises'
-import { dirname, join, relative } from 'path'
+import wsAdapter from 'crossws/adapters/node'
+import { readFile } from 'fs/promises'
+import {
+  createApp,
+  createRouter,
+  defineEventHandler,
+  defineWebSocketHandler,
+  eventHandler,
+  getQuery,
+  toNodeListener,
+} from 'h3'
+import { createProxyEventHandler } from 'h3-proxy'
+import { createServer as nodeCreateServer } from 'node:http'
+import { dirname, join, relative, resolve } from 'node:path'
+import readline from 'readline'
+import viteInspectPlugin from 'vite-plugin-inspect'
+import { WebSocket } from 'ws'
 
 import * as babel from '@babel/core'
-import viteReactPlugin, { swcTransform, transformForBuild } from '@vxrn/vite-native-swc'
 import react from '@vitejs/plugin-react-swc'
+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 { pathExists } from 'fs-extra'
-import { InlineConfig, build, createServer, mergeConfig, resolveConfig } from 'vite'
-
+import FSExtra from 'fs-extra'
+import {
+  build,
+  createServer,
+  mergeConfig,
+  resolveConfig,
+  transformWithEsbuild,
+  type InlineConfig,
+  type PluginOption,
+  type UserConfig,
+} from 'vite'
+
+import type { Peer } from 'crossws'
+import { resolve as importMetaResolve } from 'import-meta-resolve'
 import { clientInjectionsPlugin } from './dev/clientInjectPlugin'
-import { createDevServer } from './dev/createDevServer'
-import { HMRListener } from './types'
-import { StartOptions } from './types'
-import { nativePlugin } from './nativePlugin'
 import { getVitePath } from './getVitePath'
+import { nativePlugin } from './nativePlugin'
+import type { HMRListener, VXRNConfig } from './types'
 
-export const create = async (options: StartOptions) => {
-  const { root } = options
+const resolveFile = (path: string) => {
+  try {
+    return importMetaResolve(path, import.meta.url).replace('file://', '')
+  } catch {
+    return require.resolve(path)
+  }
+}
+
+const nativeExtensions = [
+  '.native.tsx',
+  '.native.jsx',
+  '.native.js',
+  '.tsx',
+  '.ts',
+  '.js',
+  '.css',
+  '.json',
+]
+
+const extensions = [
+  '.web.tsx',
+  '.tsx',
+  '.web.ts',
+  '.ts',
+  '.web.jsx',
+  '.jsx',
+  '.web.js',
+  '.js',
+  '.css',
+  '.json',
+]
+
+const { ensureDir, pathExists, pathExistsSync } = FSExtra
+
+export const create = async (options: VXRNConfig) => {
+  const { host = '127.0.0.1', root = process.cwd(), port = 8081 } = options
+
+  // TODO move somewhere
+  bindKeypressInput()
 
   // used for normalizing hot reloads
   let entryRoot = ''
 
-  const packageRootDir = join(__dirname, '..')
-  const templateFile = join(packageRootDir, 'react-native-template.js')
+  const packageRootDir = join(import.meta.url ?? __filename, '..')
+
+  const cacheDir = join(root, 'node_modules', '.cache', 'vxrn')
+
+  await ensureDir(cacheDir)
+
+  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,
+      }),
+    ])
+  }
+
+  const templateFile = resolveFile('vxrn/react-native-template.js')
 
   // react native port (it scans 19000 +5)
-  const port = options.port || 8081
   const hmrListeners: HMRListener[] = []
   const hotUpdatedCJSFiles = new Map<string, string>()
+  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
+
+  const swapRnPlugin: PluginOption = {
+    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 (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:', '')
+        return `const val = __cachedModules["${idOut}"]
+          export const PressabilityDebugView = val.PressabilityDebugView
+          export default val ? val.default || val : val`
+      }
+
+      for (const targetId in virtualModules) {
+        const info = virtualModules[targetId as keyof typeof virtualModules]
+        if (id === info.alias) {
+          return info.contents
+        }
+      }
+    },
+  } as const
+
+  const depsToOptimize = ['react', 'react-dom', '@react-native/normalize-color']
 
-  let serverConfig = {
+  let serverConfig: UserConfig = {
     root,
     mode: 'development',
     clearScreen: false,
+    define: {
+      __DEV__: 'true',
+      'process.env.NODE_ENV': `"development"`,
+    },
 
     resolve: {
-      dedupe: ['react', 'react-dom'],
+      // dedupe: ['react', 'react-dom'],
       alias: {
-        'react-native': 'react-native-web',
+        // ...Object.fromEntries(Object.entries(virtualModules).map(([k, v]) => [k, v.alias])),
+        'react-native': resolveFile('react-native-web-lite'),
       },
     },
-
     optimizeDeps: {
-      include: ['react'],
+      include: depsToOptimize,
+      exclude: Object.values(virtualModules).map((v) => v.alias),
+      force: true,
+      esbuildOptions: {
+        resolveExtensions: extensions,
+      },
+    },
+    build: {
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
     },
-
     plugins: [
+      // this breaks web, but for native maybe we need to manually run in the native handleHotUpdate below
+      // swapRnPlugin,
+
       react(),
+      // viteReactPlugin({
+      //   tsDecorators: true,
+      //   mode: 'serve',
+      // }),
 
       {
-        name: 'tamagui-client-transform',
+        name: 'client-transform',
 
         async handleHotUpdate({ read, modules, file }) {
           try {
-            if (!file.includes('/src/')) {
+            if (!isWithin(root, file)) {
               return
             }
 
@@ -124,30 +321,27 @@ export const create = async (options: StartOptions) => {
               ${source
                 .replace(`import.meta.hot.accept(() => {})`, ``)
                 // replace import.meta.glob with empty array in hot reloads
-                .replaceAll(
-                  /import.meta.glob\(.*\)/gi,
-                  `globalThis['__importMetaGlobbed'] || {}`
-                )};
+                .replaceAll(/import.meta.glob\(.*\)/gi, `globalThis['__importMetaGlobbed'] || {}`)};
               return exports })({})`
 
-            if (process.env.DEBUG === 'vxrn') {
-              // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-              console.log(`Sending hot update`, hotUpdateSource)
+            if (process.env.DEBUG) {
+              console.info(`Sending hot update`, hotUpdateSource)
             }
 
             hotUpdatedCJSFiles.set(id, hotUpdateSource)
           } catch (err) {
-            // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-            console.log(`Error processing hmr update:`, err)
+            console.error(`Error processing hmr update:`, err)
           }
         },
       },
     ],
 
     server: {
+      hmr: {
+        path: '/__vxrnhmr',
+      },
       cors: true,
-      port: options.port,
-      host: options.host || '127.0.0.1',
+      host,
     },
   } satisfies InlineConfig
 
@@ -162,7 +356,7 @@ export const create = async (options: StartOptions) => {
 
   serverConfig = {
     ...serverConfig,
-    plugins: [...serverConfig.plugins],
+    plugins: [...serverConfig.plugins!],
   }
 
   const viteServer = await createServer(serverConfig)
@@ -178,28 +372,205 @@ export const create = async (options: StartOptions) => {
       void viteServer.transformRequest(id)
     } catch (err) {
       // ok
-      // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-      console.log('err', err)
+      console.info('err', err)
     }
   })
 
   let isBuilding: Promise<string> | null = null
 
-  const nativeServer = await createDevServer(options, {
-    hotUpdatedCJSFiles,
-    listenForHMR(cb) {
-      hmrListeners.push(cb)
+  await viteServer.listen()
+  const vitePort = viteServer.config.server.port
+
+  console.info('vite running on', vitePort)
+
+  const router = createRouter()
+  const app = createApp({
+    onError: (error) => {
+      console.error(error)
+    },
+    onRequest: (event) => {
+      console.info(' →', event.path)
     },
-    getIndexBundle: getBundleCode,
-    indexJson: getIndexJsonReponse({ port, root }),
   })
 
+  router.get(
+    '/file',
+    defineEventHandler((e) => {
+      const query = getQuery(e)
+      if (typeof query.file === 'string') {
+        const source = hotUpdatedCJSFiles.get(query.file)
+        return new Response(source, {
+          headers: {
+            'content-type': 'text/javascript',
+          },
+        })
+      }
+    })
+  )
+
+  router.get(
+    '/index.bundle',
+    defineEventHandler(async (e) => {
+      return new Response(await getBundleCode(), {
+        headers: {
+          'content-type': 'text/javascript',
+        },
+      })
+    })
+  )
+
+  router.get(
+    '/status',
+    defineEventHandler(() => `packager-status:running`)
+  )
+
+  app.use(router)
+
+  // TODO move these to router.get():
+  app.use(
+    defineEventHandler(async ({ node: { req } }) => {
+      if (!req.headers['user-agent']?.match(/Expo|React/)) {
+        return
+      }
+
+      if (req.url === '/' || req.url?.startsWith('/?platform=')) {
+        return getIndexJsonResponse({ port, root })
+      }
+    })
+  )
+
+  const { handleUpgrade } = wsAdapter(app.websocket)
+
+  // vite hmr two way bridge:
+  if (vitePort) {
+    const clients = new Set<Peer>()
+    const socket = new WebSocket(`ws://localhost:${vitePort}/__vxrnhmr`, 'vite-hmr')
+
+    console.info(`connecting to vite...`)
+    socket.on('open', () => {
+      console.info('...connected to vite!')
+    })
+
+    socket.on('message', (msg) => {
+      const message = msg.toString()
+      console.info(clients.size, 'message', message)
+
+      for (const listener of [...clients]) {
+        listener.send(message)
+      }
+    })
+
+    socket.on('error', (err) => {
+      console.info('err', err)
+    })
+
+    // vite hmr:
+    app.use(
+      '/__vxrnhmr',
+      defineWebSocketHandler({
+        open(peer) {
+          console.debug('[hmr:web] open', peer)
+          clients.add(peer)
+        },
+
+        message(peer, message) {
+          socket.send(message.rawData)
+        },
+
+        close(peer, event) {
+          console.info('[hmr:web] close', peer, event)
+          clients.delete(peer)
+        },
+
+        error(peer, error) {
+          console.error('[hmr:web] error', peer, error)
+        },
+      })
+    )
+  }
+
+  // react native hmr:
+  app.use(
+    '/__hmr',
+    defineWebSocketHandler({
+      open(peer) {
+        console.debug('[hmr] open', peer)
+      },
+
+      message(peer, message) {
+        console.info('[hmr] message', peer, message)
+        if (message.text().includes('ping')) {
+          peer.send('pong')
+        }
+      },
+
+      close(peer, event) {
+        console.info('[hmr] close', peer, event)
+      },
+
+      error(peer, error) {
+        console.error('[hmr] error', peer, error)
+      },
+    })
+  )
+
+  type ClientMessage = {
+    type: 'client-log'
+    level: 'log' | 'error' | 'info' | 'debug' | 'warn'
+    data: string[]
+  }
+
+  app.use(
+    '/__client',
+    defineWebSocketHandler({
+      open(peer) {
+        console.info('[client] open', peer)
+      },
+
+      message(peer, messageRaw) {
+        const message = JSON.parse(messageRaw.text()) as any as ClientMessage
+
+        switch (message.type) {
+          case 'client-log': {
+            console.info(`🪵 [${message.level}]`, ...message.data)
+            return
+          }
+
+          default: {
+            console.warn(`[client] Unknown message type`, message)
+          }
+        }
+      },
+
+      close(peer, event) {
+        console.info('[client] close', peer, event)
+      },
+
+      error(peer, error) {
+        console.error('[client] error', peer, error)
+      },
+    })
+  )
+
+  // Define proxy event handler
+  const proxyEventHandler = createProxyEventHandler({
+    target: `http://127.0.0.1:${vitePort}`,
+    enableLogger: !!process.env.DEBUG,
+  })
+  app.use(eventHandler(proxyEventHandler))
+
+  const server = nodeCreateServer(toNodeListener(app))
+
+  server.on('upgrade', handleUpgrade)
+
   return {
-    nativeServer: nativeServer.instance,
+    nativeServer: server,
     viteServer,
 
     async start() {
-      await Promise.all([viteServer.listen(), nativeServer.start()])
+      server.listen(port)
+
+      console.info(`Server running on http://localhost:${port}`)
 
       return {
         closePromise: new Promise((res) => viteServer.httpServer?.on('close', res)),
@@ -207,7 +578,7 @@ export const create = async (options: StartOptions) => {
     },
 
     stop: async () => {
-      await Promise.all([nativeServer.stop(), viteServer.close()])
+      await Promise.all([server.close(), viteServer.close()])
     },
   }
 
@@ -216,11 +587,7 @@ export const create = async (options: StartOptions) => {
       // for easier quick testing things:
       const tmpBundle = join(process.cwd(), 'bundle.tmp.js')
       if (await pathExists(tmpBundle)) {
-        // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-        console.log(
-          '⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ returning temp bundle ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️',
-          tmpBundle
-        )
+        console.info('⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ returning temp bundle ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️', tmpBundle)
         return await readFile(tmpBundle, 'utf-8')
       }
     }
@@ -235,64 +602,6 @@ export const create = async (options: StartOptions) => {
       done = res
     })
 
-    const jsxRuntime = {
-      alias: 'virtual:react-jsx',
-      contents: await readFile(
-        require.resolve('@vxrn/react-native-prebuilt/jsx-runtime'),
-        'utf-8'
-      ),
-    } as const
-
-    const virtualModules = {
-      'react-native': {
-        alias: 'virtual:react-native',
-        contents: await readFile(require.resolve('@vxrn/react-native-prebuilt'), 'utf-8'),
-      },
-      react: {
-        alias: 'virtual:react',
-        contents: await readFile(
-          require.resolve('@vxrn/react-native-prebuilt/react'),
-          'utf-8'
-        ),
-      },
-      'react/jsx-runtime': jsxRuntime,
-      'react/jsx-dev-runtime': jsxRuntime,
-    } as const
-
-    const swapRnPlugin = {
-      name: `swap-react-native`,
-      enforce: 'pre',
-
-      resolveId(id) {
-        if (id.startsWith('react-native/Libraries')) {
-          return `virtual:rn-internals:${id}`
-        }
-
-        for (const targetId in virtualModules) {
-          if (id === targetId || id.includes(`node_modules/${targetId}/`)) {
-            const info = virtualModules[targetId]
-            return info.alias
-          }
-        }
-      },
-
-      load(id) {
-        if (id.startsWith('virtual:rn-internals')) {
-          const idOut = id.replace('virtual:rn-internals:', '')
-          return `const val = __cachedModules["${idOut}"]
-          export const PressabilityDebugView = val.PressabilityDebugView
-          export default val ? val.default || val : val`
-        }
-
-        for (const targetId in virtualModules) {
-          const info = virtualModules[targetId as keyof typeof virtualModules]
-          if (id === info.alias) {
-            return info.contents
-          }
-        }
-      },
-    } as const
-
     async function babelReanimated(input: string, filename: string) {
       return await new Promise<string>((res, rej) => {
         babel.transform(
@@ -328,7 +637,7 @@ export const create = async (options: StartOptions) => {
         viteRNClientPlugin,
 
         nativePlugin({
-          root: options.root,
+          root,
           port,
           mode: 'build',
         }),
@@ -337,11 +646,47 @@ export const create = async (options: StartOptions) => {
           tsDecorators: true,
           mode: 'build',
         }),
+
+        viteInspectPlugin({
+          build: true,
+          outputDir: '.vite-inspect',
+        }),
+
+        {
+          name: 'treat-js-files-as-jsx',
+          async transform(code, id) {
+            if (!id.match(/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',
+            })
+          },
+        },
+
+        {
+          name: 'native-extensions',
+
+          // async config(config) {
+          //   config.resolve!.extensions = nativeExtensions
+          //   config.optimizeDeps!.esbuildOptions!.resolveExtensions = nativeExtensions
+
+          //   return config
+          // },
+        },
       ],
       appType: 'custom',
       root,
       clearScreen: false,
 
+      optimizeDeps: {
+        include: depsToOptimize,
+        esbuildOptions: {
+          jsx: 'automatic',
+        },
+      },
+
       build: {
         ssr: false,
         minify: false,
@@ -358,6 +703,10 @@ export const create = async (options: StartOptions) => {
         },
       },
 
+      resolve: {
+        extensions: nativeExtensions,
+      },
+
       mode: 'development',
       define: {
         'process.env.NODE_ENV': `"development"`,
@@ -421,9 +770,19 @@ __require("${outputModule.fileName}")
     appCode = appCode
       // this can be done in the individual file transform
       .replaceAll('undefined.accept(() => {})', '')
-      .replaceAll('undefined.accept(function() {});', '') // swc
+      .replaceAll('undefined.accept(function() {});', '')
+      .replaceAll('(void 0).accept(() => {})', '')
+      .replaceAll('(void 0).accept(function() {});', '')
+
+    // TODO this is not stable based on cwd
+    const appRootParent = join(root, '..', '..')
 
-    const out = (await readFile(templateFile, 'utf-8')) + appCode
+    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)
     isBuilding = null
@@ -432,7 +791,7 @@ __require("${outputModule.fileName}")
   }
 }
 
-function getIndexJsonReponse({ port, root }: { port: number | string; root }) {
+function getIndexJsonResponse({ port, root }: { port: number | string; root }) {
   return {
     name: 'myapp',
     slug: 'myapp',
@@ -482,3 +841,53 @@ function getIndexJsonReponse({ port, root }: { port: number | string; root }) {
     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 !== '..'
+}