vxrn 0.1.96 → 0.1.98

package/src/exports/build.ts

@@ -1,7 +1,13 @@
 import FSExtra from 'fs-extra'
 import { rm } from 'node:fs/promises'
 import type { RollupOutput } from 'rollup'
-import { mergeConfig, build as viteBuild, type Plugin, type UserConfig } from 'vite'
+import {
+  loadConfigFromFile,
+  mergeConfig,
+  build as viteBuild,
+  type Plugin,
+  type UserConfig,
+} from 'vite'
 import { analyzer } from 'vite-bundle-analyzer'
 import type { BuildArgs, VXRNConfig } from '../types'
 import { getBaseViteConfig } from '../utils/getBaseViteConfig'
@@ -31,7 +37,13 @@ const disableOptimizationConfig = {
 } satisfies UserConfig
 
 export const build = async (optionsIn: VXRNConfig, buildArgs: BuildArgs = {}) => {
-  const options = await getOptionsFilled(optionsIn)
+  const [options, viteConfig] = await Promise.all([
+    getOptionsFilled(optionsIn),
+    loadConfigFromFile({
+      command: 'build',
+      mode: 'prod',
+    }).then((_) => _?.config),
+  ])
 
   // clean
   await Promise.all([
@@ -74,8 +86,8 @@ export const build = async (optionsIn: VXRNConfig, buildArgs: BuildArgs = {}) =>
     },
   } satisfies Plugin
 
-  if (options.webConfig) {
-    webBuildConfig = mergeConfig(webBuildConfig, options.webConfig) as any
+  if (viteConfig) {
+    webBuildConfig = mergeConfig(webBuildConfig, viteConfig) as any
   }
 
   let clientOutput
@@ -145,19 +157,16 @@ export const build = async (optionsIn: VXRNConfig, buildArgs: BuildArgs = {}) =>
   // }
 
   const { output: serverOutput } = (await viteBuild(serverBuildConfig)) as RollupOutput
+  const clientManifest = await FSExtra.readJSON('dist/client/.vite/manifest.json')
 
-  if (options.afterBuild) {
-    const clientManifest = await FSExtra.readJSON('dist/client/.vite/manifest.json')
-
-    await options.afterBuild({
-      options,
-      buildArgs,
-      clientOutput,
-      serverOutput,
-      webBuildConfig,
-      clientManifest,
-    })
-  }
+  console.info(`\n ✔️ vxrn build complete\n`)
 
-  console.info(`\n ✔️ build complete\n`)
+  return {
+    options,
+    buildArgs,
+    clientOutput,
+    serverOutput,
+    webBuildConfig,
+    clientManifest,
+  }
 }

package/src/exports/createServer.ts

@@ -17,10 +17,6 @@ export const createProdServer = async (options: VXRNConfig) => {
     })
   )
 
-  if (options.serve) {
-    options.serve(options, app)
-  }
-
   // app.get(
   //   '*',
   //   cache({

package/src/exports/dev.ts

@@ -33,7 +33,7 @@ const { ensureDir } = FSExtra
 
 export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean }) => {
   const options = await getOptionsFilled(rest)
-  const { host, port, root, cacheDir } = options
+  const { port, root, cacheDir } = options
 
   if (clean) {
     try {
@@ -134,8 +134,10 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
   // TODO move these to router.get():
   app.use(
     defineEventHandler(async ({ node: { req } }) => {
-      if (!req.headers['user-agent']?.match(/Expo|React/)) {
-        return
+      if (!req.headers['expo-platform']) {
+        if (!req.headers['user-agent']?.match(/Expo|React/)) {
+          return
+        }
       }
 
       if (req.url === '/' || req.url?.startsWith('/?platform=')) {

package/src/exports/serve.ts

@@ -7,6 +7,9 @@ import { getOptionsFilled } from '../utils/getOptionsFilled'
 export const serve = async (optionsIn: VXRNConfig) => {
   const options = await getOptionsFilled(optionsIn, { mode: 'prod' })
   const app = await createProdServer(options)
+  if (options.onServe) {
+    options.onServe(options, app)
+  }
   // strange prevents a cant listen on port issue
   await new Promise((res) => setTimeout(res, 1))
   const server = honoServe({

package/src/index.ts

@@ -6,4 +6,6 @@ export * from './utils/getOptionsFilled'
 export * from './utils/getOptimizeDeps'
 export * from './utils/getBaseViteConfig'
 
+export * from './utils/environmentUtils'
+
 export * from './types'

package/src/plugins/clientInjectPlugin.ts

@@ -1,6 +1,7 @@
 import path from 'node:path'
 
 import type { HmrOptions, Plugin, ResolvedConfig, UserConfig } from 'vite'
+import { isNativeEnvironment } from '../utils/environmentUtils'
 
 const process_env_NODE_ENV_RE = /(\bglobal(This)?\.)?\bprocess\.env\.NODE_ENV\b/g
 
@@ -78,9 +79,11 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
       }
     },
 
-    transform(code, id, options) {
-      if (id.includes('vite-native-client/dist/esm/client.')) {
-        return injectConfigValues(code)
+    transform(code, id) {
+      if (isNativeEnvironment(this.environment!)) {
+        if (id.includes('vite-native-client/dist/esm/client.')) {
+          return injectConfigValues(code)
+        }
       }
     },
   }

package/src/plugins/reactNativeCommonJsPlugin.ts

@@ -1,21 +1,25 @@
-import { dirname } from 'node:path'
 import { parse } from 'es-module-lexer'
-import type { OutputOptions } from 'rollup'
-import type { Plugin } from 'vite'
+import { dirname } from 'node:path'
+import { mergeConfig, type Plugin, type UserConfig } from 'vite'
 import { getVitePath } from '../utils/getVitePath'
 
-const extensions = [
-  '.ios.js',
-  '.native.js',
-  '.native.ts',
-  '.native.tsx',
-  '.js',
-  '.jsx',
-  '.json',
-  '.ts',
-  '.tsx',
-  '.mjs',
-]
+const getNativeExtensions = (platform: 'ios' | 'android') => {
+  return [
+    `.${platform}.tsx`,
+    `.${platform}.ts`,
+    `.${platform}.jsx`,
+    `.${platform}.js`,
+    '.native.js',
+    '.native.ts',
+    '.native.tsx',
+    '.tsx',
+    '.ts',
+    '.js',
+    '.jsx',
+    '.json',
+    '.mjs',
+  ]
+}
 
 export function reactNativeCommonJsPlugin(options: {
   root: string
@@ -26,151 +30,160 @@ export function reactNativeCommonJsPlugin(options: {
     name: 'native',
     enforce: 'pre',
 
-    config: async (config) => {
-      config.define ||= {}
-      config.define['process.env.REACT_NATIVE_SERVER_PUBLIC_PORT'] = JSON.stringify(
-        `${options.port}`
-      )
-      config.define['process.env.REACT_NATIVE_PLATFORM'] = JSON.stringify(`ios`)
-
-      if (!config.build) config.build = {}
-
-      config.build.modulePreload = { polyfill: false }
-      // Ensures that even very large assets are inlined in your JavaScript.
-      config.build.assetsInlineLimit = 100000000
-      // Avoid warnings about large chunks.
-      config.build.chunkSizeWarningLimit = 100000000
-      // Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline.
-      config.build.cssCodeSplit = false
-      // Avoids the extra step of testing Brotli compression, which isn't really pertinent to a file served locally.
-      config.build.reportCompressedSize = false
-      // Subfolder bases are not supported, and shouldn't be needed because we're embedding everything.
-      config.base = undefined
-
-      config.resolve ??= {}
+    config: async () => {
+      const sharedNativeConfig = {
+        // Subfolder bases are not supported, and shouldn't be needed because we're embedding everything
+        base: undefined,
 
-      config.resolve.extensions = extensions
-
-      config.resolve.conditions = ['react-native', 'require', 'default', 'import']
-
-      config.optimizeDeps ??= {}
-
-      config.optimizeDeps.noDiscovery = true
-      config.optimizeDeps.include = undefined
+        define: {
+          'process.env.REACT_NATIVE_SERVER_PUBLIC_PORT': JSON.stringify(`${options.port}`),
+        },
 
-      config.optimizeDeps.esbuildOptions ??= {}
-      config.optimizeDeps.esbuildOptions.resolveExtensions = extensions
+        build: {
+          modulePreload: {
+            polyfill: false,
+          },
+          // Ensures that even very large assets are inlined in your JavaScript.
+          assetsInlineLimit: 100000000,
+          // Avoid warnings about large chunks
+          chunkSizeWarningLimit: 100000000,
+          // Emit all CSS as a single file, which `vite-plugin-singlefile` can then inline
+          cssCodeSplit: false,
+          // Avoids the extra step of testing Brotli compression, which isn't really pertinent to a file served locally
+          reportCompressedSize: false,
+
+          rollupOptions: {
+            output: {
+              preserveModules: true,
+              manualChunks: undefined,
+              // Ensure that as many resources as possible are inlined.
+              // inlineDynamicImports: true,
+              // this fixes some warnings but breaks import { default as config }
+              exports: 'named',
+              // ensures we have clean names for our require paths
+              entryFileNames: () => `[name].js`,
+            },
 
-      config.optimizeDeps.esbuildOptions.plugins ??= []
+            plugins: [
+              {
+                name: `force-export-all`,
+
+                async transform(code, id) {
+                  // if (!id.includes('/node_modules/')) {
+                  //   return
+                  // }
+
+                  try {
+                    const [imports, exports] = parse(code)
+
+                    let forceExports = ''
+
+                    // note that es-module-lexer parses export * from as an import (twice) for some reason
+                    let counts = {}
+                    for (const imp of imports) {
+                      if (imp.n && imp.n[0] !== '.') {
+                        counts[imp.n] ||= 0
+                        counts[imp.n]++
+                        if (counts[imp.n] == 2) {
+                          // star export
+                          const path = await getVitePath(options.root, dirname(id), imp.n)
+                          forceExports += `Object.assign(exports, require("${path}"));`
+                        }
+                      }
+                    }
+
+                    forceExports += exports
+                      .map((e) => {
+                        if (e.n === 'default') {
+                          return ''
+                        }
+                        let out = ''
+                        if (e.ln !== e.n) {
+                          // forces the "as x" to be referenced so it gets exported
+                          out += `__ignore = typeof ${e.n} === 'undefined' ? 0 : 0;`
+                        }
+                        out += `globalThis.____forceExport = ${e.ln}`
+                        return out
+                      })
+                      .join(';')
+
+                    return code + '\n' + forceExports
+                  } catch (err) {
+                    console.warn(`Error forcing exports, probably ok`, id)
+                  }
+                },
+              },
+            ],
+          },
+        },
 
-      config.optimizeDeps.esbuildOptions.loader ??= {}
-      config.optimizeDeps.esbuildOptions.loader['.js'] = 'jsx'
+        optimizeDeps: {
+          noDiscovery: true,
+          include: undefined,
 
-      config.optimizeDeps.esbuildOptions.plugins.push({
-        name: 'react-native-assets',
-        setup(build) {
-          build.onResolve(
-            {
-              filter: /\.(png|jpg|gif|webp)$/,
+          esbuildOptions: {
+            loader: {
+              '.js': 'jsx',
             },
-            async ({ path, namespace }) => {
-              return {
-                path: '',
-                external: true,
-              }
-            }
-          )
+          },
         },
-      })
-
-      config.build.rollupOptions ??= {}
-
-      config.build.rollupOptions.output ??= {}
-
-      config.build.rollupOptions.plugins ??= []
-
-      if (!Array.isArray(config.build.rollupOptions.plugins)) {
-        throw `x`
-      }
+      } satisfies UserConfig
 
-      if (options.mode === 'build') {
-        config.plugins ||= []
+      // per-enviroment config:
 
-        config.build.rollupOptions.plugins.push({
-          name: `force-export-all`,
-
-          async transform(code, id) {
-            // if (!id.includes('/node_modules/')) {
-            //   return
-            // }
-
-            try {
-              const [imports, exports] = parse(code)
-
-              let forceExports = ''
-
-              // note that es-module-lexer parses export * from as an import (twice) for some reason
-              let counts = {}
-              for (const imp of imports) {
-                if (imp.n && imp.n[0] !== '.') {
-                  counts[imp.n] ||= 0
-                  counts[imp.n]++
-                  if (counts[imp.n] == 2) {
-                    // star export
-                    const path = await getVitePath(options.root, dirname(id), imp.n)
-                    forceExports += `Object.assign(exports, require("${path}"));`
-                  }
-                }
-              }
-
-              forceExports += exports
-                .map((e) => {
-                  if (e.n === 'default') {
-                    return ''
-                  }
-                  let out = ''
-                  if (e.ln !== e.n) {
-                    // forces the "as x" to be referenced so it gets exported
-                    out += `__ignore = typeof ${e.n} === 'undefined' ? 0 : 0;`
-                  }
-                  out += `globalThis.____forceExport = ${e.ln}`
-                  return out
-                })
-                .join(';')
-
-              return code + '\n' + forceExports
-            } catch (err) {
-              console.warn(`Error forcing exports, probably ok`, id)
-            }
-          },
-        })
-      }
-
-      if (process.env.DEBUG) {
-        console.info('config..', config)
-      }
+      return {
+        environments: {
+          ios: mergeConfig(sharedNativeConfig, {
+            define: {
+              'process.env.REACT_NATIVE_PLATFORM': JSON.stringify(`ios`),
+            },
 
-      const updateOutputOptions = (out: OutputOptions) => {
-        out.preserveModules = true
+            resolve: {
+              extensions: getNativeExtensions('ios'),
+            },
 
-        // this fixes some warnings but breaks import { default as config }
-        // out.exports = 'named'
+            optimizeDeps: {
+              esbuildOptions: {
+                resolveExtensions: getNativeExtensions('ios'),
+
+                plugins: [
+                  {
+                    name: 'react-native-assets',
+                    setup(build) {
+                      build.onResolve(
+                        {
+                          filter: /\.(png|jpg|gif|webp)$/,
+                        },
+                        async ({ path, namespace }) => {
+                          return {
+                            path: '',
+                            external: true,
+                          }
+                        }
+                      )
+                    },
+                  },
+                ],
+              },
+            },
+          } satisfies UserConfig),
 
-        out.entryFileNames = (chunkInfo) => {
-          // ensures we have clean names for our require paths
-          return '[name].js'
-        }
-        // Ensure that as many resources as possible are inlined.
-        // out.inlineDynamicImports = true
+          android: mergeConfig(sharedNativeConfig, {
+            define: {
+              'process.env.REACT_NATIVE_PLATFORM': JSON.stringify(`android`),
+            },
 
-        // added by me (nate):
-        out.manualChunks = undefined
-      }
+            resolve: {
+              extensions: getNativeExtensions('android'),
+            },
 
-      if (Array.isArray(config.build.rollupOptions.output)) {
-        for (const o in config.build.rollupOptions.output) updateOutputOptions(o as OutputOptions)
-      } else {
-        updateOutputOptions(config.build.rollupOptions.output as OutputOptions)
+            optimizeDeps: {
+              esbuildOptions: {
+                resolveExtensions: getNativeExtensions('android'),
+              },
+            },
+          } satisfies UserConfig),
+        },
       }
     },
   }

package/src/plugins/reactNativeHMRPlugin.ts

@@ -6,11 +6,14 @@ import { entryRoot } from '../utils/getReactNativeBundle'
 import { getVitePath } from '../utils/getVitePath'
 import { hotUpdateCache } from '../utils/hotUpdateCache'
 import { isWithin } from '../utils/isWithin'
+import type { Plugin } from 'vite'
 
 export function reactNativeHMRPlugin({ root }: VXRNConfigFilled) {
   return {
     name: 'client-transform',
 
+    // TODO see about moving to hotUpdate
+    // https://deploy-preview-16089--vite-docs-main.netlify.app/guide/api-vite-environment.html#the-hotupdate-hook
     async handleHotUpdate({ read, modules, file }) {
       try {
         if (!isWithin(root, file)) {
@@ -101,5 +104,5 @@ export function reactNativeHMRPlugin({ root }: VXRNConfigFilled) {
         console.error(`Error processing hmr update:`, err)
       }
     },
-  }
+  } satisfies Plugin
 }

package/src/types.ts

@@ -43,13 +43,11 @@ export type VXRNConfig = {
   root?: string
   host?: string
   port?: number
-  webConfig?: InlineConfig
-  nativeConfig?: InlineConfig
   flow?: FlowOptions
 
+  // for hooking into things
   afterBuild?: (props: AfterBuildProps) => void | Promise<void>
-
-  serve?: (options: VXRNConfig, app: Hono) => void
+  onServe?: (options: VXRNConfig, app: Hono) => void
 }
 
 export type HMRListener = (update: { file: string; contents: string }) => void

package/src/utils/environmentUtils.ts

@@ -0,0 +1,17 @@
+import type { Environment } from 'vite'
+
+export function isWebEnvironment(environment: Environment) {
+  return environment.name === 'client' || environment.name === 'ssr'
+}
+
+export function isNativeEnvironment(environment: Environment) {
+  return environment.name === 'ios' || environment.name === 'android'
+}
+
+export function isIOSEnvironment(environment: Environment) {
+  return environment.name === 'ios'
+}
+
+export function isAndroidEnvironment(environment: Environment) {
+  return environment.name === 'android'
+}

package/src/utils/getBaseViteConfig.ts

@@ -4,6 +4,15 @@ import type { UserConfig } from 'vite'
 // essentially base web config not base everything
 
 export function getBaseViteConfig({ mode }: { mode: 'development' | 'production' }): UserConfig {
+  const sharedWebConfig = {
+    resolve: {
+      alias: {
+        'react-native': 'react-native-web',
+        'react-native-safe-area-context': '@vxrn/safe-area',
+      },
+    },
+  } satisfies UserConfig
+
   return {
     mode,
 
@@ -17,7 +26,6 @@ export function getBaseViteConfig({ mode }: { mode: 'development' | 'production'
     resolve: {
       alias: {
         'react-native': 'react-native-web',
-        'react-native-safe-area-context': '@vxrn/safe-area',
       },
 
       // TODO auto dedupe all include optimize deps?
@@ -38,5 +46,15 @@ export function getBaseViteConfig({ mode }: { mode: 'development' | 'production'
         transformMixedEsModules: true,
       },
     },
+
+    environments: {
+      web: {
+        ...sharedWebConfig,
+      },
+
+      ssr: {
+        ...sharedWebConfig,
+      },
+    },
   }
 }

package/src/utils/getOptimizeDeps.ts

@@ -42,6 +42,9 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
     '@react-navigation/elements',
     '@react-navigation/bottom-tabs',
     '@react-navigation/native-stack',
+    'vxs',
+    'vxs/server-render',
+    'vxs/headers',
     'requires-port',
     'querystringify',
     'compare-versions',
@@ -61,8 +64,6 @@ export function getOptimizeDeps(mode: 'build' | 'serve') {
     'tamagui/linear-gradient',
     '@tamagui/linear-gradient',
     '@react-native/normalize-color',
-    'vxs',
-    'vxs/server-render',
     'expo-modules-core',
     'expo-status-bar',
     'react-native-web',

package/src/utils/getReactNativeBundle.ts

@@ -3,7 +3,14 @@ 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 {
+  build,
+  createBuilder,
+  mergeConfig,
+  resolveConfig,
+  transformWithEsbuild,
+  type InlineConfig,
+} from 'vite'
 import { nativeExtensions } from '../constants'
 import { resolveFile } from './resolveFile'
 import { isBuildingNativeBundle, setIsBuildingNativeBundle } from './isBuildingNativeBundle'
@@ -20,7 +27,7 @@ export let entryRoot = ''
 
 export async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugin: any) {
   const { root, port, cacheDir } = options
-  const { depsToOptimize } = getOptimizeDeps('build')
+  const { depsToOptimize, needsInterop } = getOptimizeDeps('build')
 
   if (process.env.LOAD_TMP_BUNDLE) {
     // for easier quick testing things:
@@ -111,6 +118,7 @@ export async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClie
 
     optimizeDeps: {
       include: depsToOptimize,
+      needsInterop,
       esbuildOptions: {
         jsx: 'automatic',
       },
@@ -144,14 +152,17 @@ export async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClie
     },
   } satisfies InlineConfig
 
-  if (options.nativeConfig) {
-    nativeBuildConfig = mergeConfig(nativeBuildConfig, options.nativeConfig) as any
-  }
+  // TODO
+  // 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)
+  const builder = await createBuilder(nativeBuildConfig)
+
+  const buildOutput = await builder.build(builder.environments.ios)
 
   if (!('output' in buildOutput)) {
     throw `❌`