vxrn 0.1.50 → 0.1.52

package/src/index.ts

@@ -1,4 +1,9 @@
 export { build } from './exports/build'
 export { dev } from './exports/dev'
 
+export * from './utils/getHtml'
+export * from './utils/getOptionsFilled'
+export * from './utils/getOptimizeDeps'
+export * from './utils/getBaseViteConfig'
+
 export * from './types'

package/src/plugins/reactNativeCommonJsPlugin.ts

@@ -1,9 +1,7 @@
 import { dirname } from 'node:path'
-
 import { parse } from 'es-module-lexer'
 import type { OutputOptions } from 'rollup'
 import type { Plugin } from 'vite'
-
 import { getVitePath } from '../utils/getVitePath'
 
 const extensions = [

package/src/plugins/reactNativeHMRPlugin.ts

@@ -0,0 +1,105 @@
+import { swcTransform, transformForBuild } from '@vxrn/vite-native-swc'
+import { parse } from 'es-module-lexer'
+import { connectedNativeClients } from '../utils/connectedNativeClients'
+import type { VXRNConfigFilled } from '../utils/getOptionsFilled'
+import { entryRoot } from '../utils/getReactNativeBundle'
+import { getVitePath } from '../utils/getVitePath'
+import { hotUpdateCache } from '../utils/hotUpdateCache'
+import { isWithin } from '../utils/isWithin'
+
+export 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/types.ts

@@ -1,4 +1,6 @@
 import type { Options as FlowOptions } from '@vxrn/vite-flow'
+import type { App } from 'h3'
+import type { OutputAsset, OutputChunk } from 'rollup'
 import type { InlineConfig } from 'vite'
 
 export type VXRNConfig = {
@@ -19,6 +21,13 @@ export type VXRNConfig = {
   webConfig?: InlineConfig
   nativeConfig?: InlineConfig
   flow?: FlowOptions
+
+  afterBuild?: (
+    options: VXRNConfig,
+    output: [OutputChunk, ...(OutputChunk | OutputAsset)[]]
+  ) => void | Promise<void>
+
+  serve?: (options: VXRNConfig, app: App) => void
 }
 
 export type HMRListener = (update: { file: string; contents: string }) => void

package/src/utils/bindKeypressInput.ts

@@ -0,0 +1,46 @@
+import readline from 'node:readline'
+
+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
+      }
+    }
+  })
+}

package/src/utils/coerceToArray.ts

@@ -0,0 +1,3 @@
+export function coerceToArray<A>(thing: A | A[]): A[] {
+  return Array.isArray(thing) ? thing : [thing]
+}

package/src/utils/connectedNativeClients.ts

@@ -0,0 +1,9 @@
+export let connectedNativeClients = 0
+
+export function addConnectedNativeClient() {
+  connectedNativeClients++
+}
+
+export function removeConnectedNativeClient() {
+  connectedNativeClients--
+}

package/src/utils/getIndexJsonResponse.ts

@@ -0,0 +1,52 @@
+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',
+  }
+}

package/src/utils/getOptimizeDeps.ts

@@ -1,15 +1,15 @@
-import { optimizeDeps, type UserConfig } from 'vite'
+import type { UserConfig } from 'vite'
 import { webExtensions } from '../constants'
 
 export function getOptimizeDeps(mode: 'build' | 'serve') {
   const needsInterop = [
     'react',
-    'react/jsx-runtime',
-    'react/jsx-dev-runtime',
     'react-native-web-internals',
     'react-dom',
     'react-native-web',
     'react-dom/server',
+    'react/jsx-runtime',
+    'react/jsx-dev-runtime',
     'react-dom/client',
     'url-parse',
     '@vxrn/safe-area',
@@ -26,11 +26,6 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
     'expo-constants',
     'expo-linking',
     'uuid',
-    '@react-navigation/core',
-    '@react-navigation/native',
-    '@react-navigation/elements',
-    '@react-navigation/bottom-tabs',
-    '@react-navigation/native-stack',
     'inline-style-prefixer',
     '@docsearch/react',
     '@algolia/autocomplete-core',
@@ -42,6 +37,11 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
 
   const depsToOptimize = [
     ...needsInterop,
+    '@react-navigation/core',
+    '@react-navigation/native',
+    '@react-navigation/elements',
+    '@react-navigation/bottom-tabs',
+    '@react-navigation/native-stack',
     'requires-port',
     'querystringify',
     'compare-versions',
@@ -62,6 +62,7 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
     '@tamagui/linear-gradient',
     '@react-native/normalize-color',
     '@vxrn/router',
+    '@vxrn/router/server-render',
     'expo-modules-core',
     'expo-status-bar',
     'react-native-web',

package/src/utils/getOptionsFilled.ts

@@ -19,7 +19,6 @@ export async function getOptionsFilled(options: VXRNConfig) {
   })
 
   const packageRootDir = join(require.resolve('vxrn'), '../../..')
-
   const cacheDir = join(root, 'node_modules', '.vxrn')
   const internalPatchesDir = join(packageRootDir, 'patches')
   const userPatchesDir = join(root, 'patches')

package/src/utils/getReactNativeBundle.ts

@@ -0,0 +1,228 @@
+import * as babel from '@babel/core'
+import createViteFlow from '@vxrn/vite-flow'
+import viteReactPlugin from '@vxrn/vite-native-swc'
+import { readFile } from 'node:fs/promises'
+import { dirname, join, relative } from 'node:path'
+import { build, mergeConfig, resolveConfig, transformWithEsbuild, type InlineConfig } from 'vite'
+import { nativeExtensions } from '../constants'
+import { resolveFile } from './resolveFile'
+import { isBuildingNativeBundle, setIsBuildingNativeBundle } from './isBuildingNativeBundle'
+import { swapPrebuiltReactModules } from './swapPrebuiltReactModules'
+import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
+import { getOptimizeDeps } from './getOptimizeDeps'
+import type { VXRNConfigFilled } from './getOptionsFilled'
+import FSExtra from 'fs-extra'
+
+const { pathExists } = FSExtra
+
+// used for normalizing hot reloads
+export let entryRoot = ''
+
+export 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
+  setIsBuildingNativeBundle(
+    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)
+  setIsBuildingNativeBundle(null)
+
+  return out
+}

package/src/utils/getVitePath.ts

@@ -1,7 +1,6 @@
 import { join, relative, dirname } from 'node:path'
+import { createRequire } from 'node:module'
 
-// @ts-ignore
-import resolve from 'esm-resolve'
 import FSExtra from 'fs-extra'
 
 export async function getVitePath(
@@ -31,7 +30,8 @@ export async function getVitePath(
   }
 
   const sourceFile = join(process.cwd(), 'index.js')
-  const resolved = resolve(sourceFile)(moduleName)
+  const require = createRequire(moduleName)
+  const resolved = require.resolve(sourceFile)
   // figure out symlinks
   if (!resolved) {
     throw new Error(

package/src/utils/getViteServerConfig.ts

@@ -0,0 +1,104 @@
+import { mergeConfig, type InlineConfig, type UserConfig } from 'vite'
+import { getBaseViteConfig } from './getBaseViteConfig'
+import type { VXRNConfigFilled } from './getOptionsFilled'
+import { getOptimizeDeps } from './getOptimizeDeps'
+import { uniq } from './uniq'
+import { coerceToArray } from './coerceToArray'
+import { reactNativeHMRPlugin } from '../plugins/reactNativeHMRPlugin'
+
+export 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: {
+        optimizeDeps,
+      },
+
+      server: {
+        hmr: {
+          path: '/__vxrnhmr',
+        },
+        cors: true,
+        host,
+      },
+    } satisfies UserConfig
+  ) satisfies InlineConfig
+
+  if (webConfig) {
+    serverConfig = mergeConfig(serverConfig, webConfig) as any
+  }
+
+  if (serverConfig.ssr?.noExternal && !Array.isArray(serverConfig.ssr?.noExternal)) {
+    throw new Error(`ssr.noExternal must be array`)
+  }
+
+  // vite doesnt merge arrays but we want that
+  serverConfig.ssr ||= {}
+  serverConfig.ssr.noExternal = [
+    ...coerceToArray((serverConfig.ssr?.noExternal as string[]) || []),
+    ...optimizeDeps.include,
+    'react',
+    'react-dom',
+    'react-dom/server',
+    'react-dom/client',
+  ]
+
+  serverConfig.ssr.optimizeDeps = {}
+  serverConfig.ssr.optimizeDeps.exclude = uniq([
+    ...(serverConfig.ssr?.optimizeDeps.exclude || []),
+    ...optimizeDeps.exclude,
+  ])
+
+  serverConfig.ssr.optimizeDeps.include = uniq([
+    ...(serverConfig.ssr?.optimizeDeps.include || []),
+    ...optimizeDeps.include,
+  ])
+
+  serverConfig.ssr.optimizeDeps.needsInterop = uniq([
+    ...(serverConfig.ssr?.optimizeDeps.needsInterop || []),
+    ...optimizeDeps.needsInterop,
+  ])
+
+  serverConfig.ssr.optimizeDeps.esbuildOptions = {
+    ...(serverConfig.ssr?.optimizeDeps.esbuildOptions || {}),
+    ...optimizeDeps.esbuildOptions,
+  }
+
+  // manually merge
+  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!],
+  }
+
+  console.log(`final server config ssr`, serverConfig.ssr)
+
+  return serverConfig
+}

package/src/utils/hotUpdateCache.ts

@@ -0,0 +1 @@
+export const hotUpdateCache = new Map<string, string>()

package/src/utils/isBuildingNativeBundle.ts

@@ -0,0 +1,7 @@
+// sorry for the mess, exploring before abstracting
+
+export let isBuildingNativeBundle: Promise<string> | null = null
+
+export function setIsBuildingNativeBundle(val: Promise<string> | null = null) {
+  isBuildingNativeBundle = val
+}

package/src/utils/isWithin.ts

@@ -0,0 +1,6 @@
+import { relative } from 'node:path'
+
+export function isWithin(outer: string, inner: string) {
+  const rel = relative(outer, inner)
+  return !rel.startsWith('../') && rel !== '..'
+}