vxrn 0.1.16 → 0.1.18

package/src/build.ts

@@ -0,0 +1,96 @@
+import { InlineConfig, mergeConfig, build as viteBuild, type UserConfig } from 'vite'
+
+import { resolve as importMetaResolve } from 'import-meta-resolve'
+import type { VXRNConfig } from './types'
+import { getBaseViteConfig } from './utils/getBaseViteConfig'
+import { getOptionsFilled } from './utils/getOptionsFilled'
+
+export const resolveFile = (path: string) => {
+  try {
+    return importMetaResolve(path, import.meta.url).replace('file://', '')
+  } catch {
+    return require.resolve(path)
+  }
+}
+
+const extensions = [
+  '.web.tsx',
+  '.tsx',
+  '.web.ts',
+  '.ts',
+  '.web.jsx',
+  '.jsx',
+  '.web.js',
+  '.js',
+  '.css',
+  '.json',
+]
+
+export const build = async (optionsIn: VXRNConfig) => {
+  const options = await getOptionsFilled(optionsIn)
+  const depsToOptimize = [
+    'react',
+    'react-dom',
+    '@react-native/normalize-color',
+    '@react-navigation/native',
+    'expo-constants',
+    'expo-modules-core',
+    'expo-status-bar',
+  ]
+
+  let buildConfig = mergeConfig(
+    getBaseViteConfig({
+      mode: 'production',
+    }),
+    {
+      root: options.root,
+      clearScreen: false,
+      optimizeDeps: {
+        include: depsToOptimize,
+        esbuildOptions: {
+          resolveExtensions: extensions,
+        },
+      },
+    }
+  ) satisfies UserConfig
+
+  if (options.webConfig) {
+    buildConfig = mergeConfig(buildConfig, options.webConfig) as any
+  }
+
+  console.info(`build client`)
+  await viteBuild(
+    mergeConfig(buildConfig, {
+      build: {
+        ssrManifest: true,
+        outDir: 'dist/client',
+      },
+    } satisfies UserConfig)
+  )
+
+  console.info(`build server`)
+  await viteBuild(
+    mergeConfig(buildConfig, {
+      resolve: {
+        alias: {
+          'react-native': 'react-native-web-lite',
+        },
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          format: 'cjs',
+        },
+      },
+      ssr: {
+        noExternal: true,
+      },
+      build: {
+        ssr: 'src/entry-server.tsx',
+        outDir: 'dist/server',
+        rollupOptions: {
+          external: [],
+        },
+      },
+    } satisfies UserConfig)
+  )
+}

package/src/commands/cli-build.ts

@@ -0,0 +1,25 @@
+import { defineCommand } from 'citty'
+import { build } from '../build'
+import { readVXRNConfig } from '../utils/readVXRNConfig'
+
+export default defineCommand({
+  meta: {
+    name: 'build',
+    version: '0.0.0',
+    description: 'Build your app',
+  },
+  args: {},
+  async run({ args }) {
+    const userConfig = await readVXRNConfig()
+
+    process.on('uncaughtException', (err) => {
+      console.error(err?.message || err)
+    })
+
+    const results = await build(userConfig)
+
+    if (process.env.DEBUG) {
+      console.info('results', results)
+    }
+  },
+})

package/src/commands/cli-dev.ts

@@ -1,6 +1,6 @@
 import { defineCommand } from 'citty'
 import { readVXRNConfig } from '../utils/readVXRNConfig'
-import { create } from '../create'
+import { createDevServer } from '../createDevServer'
 
 export default defineCommand({
   meta: {
@@ -12,7 +12,7 @@ export default defineCommand({
   async run({ args }) {
     const userConfig = await readVXRNConfig()
 
-    const { start, stop } = await create({
+    const { start, stop } = await createDevServer({
       root: process.cwd(),
       host: '127.0.0.1',
       webConfig: {

package/src/commands/index.ts

@@ -5,5 +5,6 @@ const runDefault = (r: any) => (r.default || r) as Promise<CommandDef>
 export const commands = {
   // @ts-ignore
   dev: () => import('./cli-dev.mjs').then(runDefault),
+  // @ts-ignore
+  build: () => import('./cli-build.mjs').then(runDefault),
 }
-  

package/src/{create.ts → createDevServer.ts}

@@ -1,5 +1,5 @@
 import wsAdapter from 'crossws/adapters/node'
-import { readFile } from 'node:fs/promises'
+import findNodeModules from 'find-node-modules'
 import {
   createApp,
   createRouter,
@@ -10,16 +10,14 @@ import {
   toNodeListener,
 } from 'h3'
 import { createProxyEventHandler } from 'h3-proxy'
+import { readFile } 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 viteInspectPlugin from 'vite-plugin-inspect'
 import { WebSocket } from 'ws'
-import { readPackageJSON } from 'pkg-types'
-import findNodeModules from 'find-node-modules'
 
 import * as babel from '@babel/core'
-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'
@@ -35,15 +33,17 @@ import {
   type UserConfig,
 } from 'vite'
 
+import createViteFlow from '@vxrn/vite-flow'
 import type { Peer } from 'crossws'
 import { resolve as importMetaResolve } from 'import-meta-resolve'
 import { clientInjectionsPlugin } from './dev/clientInjectPlugin'
-import { getVitePath } from './getVitePath'
 import { nativePlugin } from './nativePlugin'
-import createViteFlow from '@vxrn/vite-flow'
-import type { HMRListener, VXRNConfig } from './types'
+import type { VXRNConfig } from './types'
+import { getBaseViteConfig } from './utils/getBaseViteConfig'
+import { getOptionsFilled, type VXRNConfigFilled } from './utils/getOptionsFilled'
+import { getVitePath } from './utils/getVitePath'
 
-const resolveFile = (path: string) => {
+export const resolveFile = (path: string) => {
   try {
     return importMetaResolve(path, import.meta.url).replace('file://', '')
   } catch {
@@ -75,45 +75,6 @@ const extensions = [
   '.json',
 ]
 
-type State = {
-  applyPatches?: boolean
-}
-
-async function readState(cacheDir: string) {
-  const statePath = join(cacheDir, 'state.json')
-  const state: State = (await FSExtra.pathExists(statePath))
-    ? await FSExtra.readJSON(statePath)
-    : {}
-  return state
-}
-
-async function getOptionsFilled(options: VXRNConfig) {
-  const { host = '127.0.0.1', root = process.cwd(), port = 8081 } = options
-  const packageRootDir = join(import.meta.url ?? __filename, '..', '..', '..').replace('file:', '')
-  const cacheDir = join(root, 'node_modules', '.cache', 'vxrn')
-  const internalPatchesDir = join(packageRootDir, 'patches')
-  const userPatchesDir = join(root, 'patches')
-  const [state, packageJSON] = await Promise.all([
-    //
-    readState(cacheDir),
-    readPackageJSON(),
-  ])
-  return {
-    ...options,
-    packageJSON,
-    state,
-    packageRootDir,
-    cacheDir,
-    userPatchesDir,
-    internalPatchesDir,
-    host,
-    root,
-    port,
-  }
-}
-
-type VXRNConfigFilled = Awaited<ReturnType<typeof getOptionsFilled>>
-
 const { ensureDir, pathExists, pathExistsSync } = FSExtra
 
 const patches = [
@@ -167,7 +128,7 @@ async function checkPatches(options: VXRNConfigFilled) {
   }
 }
 
-export const create = async (optionsIn: VXRNConfig) => {
+export const createDevServer = async (optionsIn: VXRNConfig) => {
   const options = await getOptionsFilled(optionsIn)
   const { host, port, root, cacheDir } = options
 
@@ -303,147 +264,123 @@ export const create = async (optionsIn: VXRNConfig) => {
 
   const depsToOptimize = ['react', 'react-dom', '@react-native/normalize-color']
 
-  let serverConfig: UserConfig = {
-    root,
-    mode: 'development',
-    clearScreen: false,
-    define: {
-      __DEV__: 'true',
-      'process.env.NODE_ENV': `"development"`,
-    },
+  const reactNativeHMRPlugin = {
+    name: 'client-transform',
 
-    resolve: {
-      // dedupe: ['react', 'react-dom'],
-      alias: {
-        // ...Object.fromEntries(Object.entries(virtualModules).map(([k, v]) => [k, v.alias])),
-        'react-native': resolveFile('react-native-web-lite'),
-      },
-    },
-    optimizeDeps: {
-      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,
-
-      viteFlow,
-      react(),
-      // viteReactPlugin({
-      //   tsDecorators: true,
-      //   mode: 'serve',
-      // }),
-
-      {
-        name: 'client-transform',
-
-        async handleHotUpdate({ read, modules, file }) {
-          try {
-            if (!isWithin(root, file)) {
-              return
-            }
-
-            const [module] = modules
-            if (!module) return
-
-            const id = module?.url || file.replace(root, '')
+    async handleHotUpdate({ read, modules, file }) {
+      try {
+        if (!isWithin(root, file)) {
+          return
+        }
 
-            const code = await read()
+        const [module] = modules
+        if (!module) return
 
-            // got a weird pre compiled file on startup
-            if (code.startsWith(`'use strict';`)) return
+        const id = module?.url || file.replace(root, '')
 
-            if (!code) {
-              return
-            }
+        const code = await read()
 
-            let source = code
+        // got a weird pre compiled file on startup
+        if (code.startsWith(`'use strict';`)) return
 
-            // we have to remove jsx before we can parse imports...
-            source = (await transformForBuild(id, source))?.code || ''
+        if (!code) {
+          return
+        }
 
-            const importsMap = {}
+        let source = code
 
-            // 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)
+        // we have to remove jsx before we can parse imports...
+        source = (await transformForBuild(id, source))?.code || ''
 
-            let accumulatedSliceOffset = 0
+        const importsMap = {}
 
-            for (const specifier of imports) {
-              const { n: importName, s: start } = specifier
+        // 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)
 
-              if (importName) {
-                const id = await getVitePath(entryRoot, file, importName)
-                if (!id) {
-                  console.warn('???')
-                  continue
-                }
+        let accumulatedSliceOffset = 0
 
-                importsMap[id] = id.replace(/^(\.\.\/)+/, '')
+        for (const specifier of imports) {
+          const { n: importName, s: start } = specifier
 
-                // 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
-              }
+          if (importName) {
+            const id = await getVitePath(entryRoot, file, importName)
+            if (!id) {
+              console.warn('???')
+              continue
             }
 
-            // then we have to convert to commonjs..
+            importsMap[id] = id.replace(/^(\.\.\/)+/, '')
+
+            // replace module name with id for hmr
+            const len = importName.length
+            const extraLen = id.length - len
             source =
-              (
-                await swcTransform(id, source, {
-                  mode: 'serve-cjs',
-                })
-              )?.code || ''
-
-            if (!source) {
-              throw '❌ no source'
-            }
+              source.slice(0, start + accumulatedSliceOffset) +
+              id +
+              source.slice(start + accumulatedSliceOffset + len)
+            accumulatedSliceOffset += extraLen
+          }
+        }
 
-            importsMap['currentPath'] = id
+        // then we have to convert to commonjs..
+        source =
+          (
+            await swcTransform(id, source, {
+              mode: 'serve-cjs',
+            })
+          )?.code || ''
 
-            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 (!source) {
+          throw '❌ no source'
+        }
 
-            if (process.env.DEBUG) {
-              console.info(`Sending hot update`, hotUpdateSource)
-            }
+        importsMap['currentPath'] = id
 
-            hotUpdatedCJSFiles.set(id, hotUpdateSource)
-          } catch (err) {
-            console.error(`Error processing hmr update:`, err)
-          }
+        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)
+        }
+
+        hotUpdatedCJSFiles.set(id, hotUpdateSource)
+      } catch (err) {
+        console.error(`Error processing hmr update:`, err)
+      }
+    },
+  }
+
+  let serverConfig: UserConfig = mergeConfig(
+    getBaseViteConfig({
+      mode: 'development',
+    }),
+    {
+      root,
+      clearScreen: false,
+      plugins: [reactNativeHMRPlugin],
+      optimizeDeps: {
+        include: depsToOptimize,
+        exclude: Object.values(virtualModules).map((v) => v.alias),
+        force: true,
+        esbuildOptions: {
+          resolveExtensions: extensions,
         },
       },
-    ],
-
-    server: {
-      hmr: {
-        path: '/__vxrnhmr',
+      server: {
+        hmr: {
+          path: '/__vxrnhmr',
+        },
+        cors: true,
+        host,
       },
-      cors: true,
-      host,
-    },
-  } satisfies InlineConfig
+    }
+  ) satisfies InlineConfig
 
   if (options.webConfig) {
     serverConfig = mergeConfig(serverConfig, options.webConfig) as any
@@ -718,6 +655,8 @@ export const create = async (optionsIn: VXRNConfig) => {
       })
     }
 
+    const buildInput = options.entryNative || 'index.jsx'
+
     // build app
     let buildConfig = {
       plugins: [
@@ -748,10 +687,10 @@ export const create = async (optionsIn: VXRNConfig) => {
           mode: 'build',
         }),
 
-        viteInspectPlugin({
-          build: true,
-          outputDir: '.vite-inspect',
-        }),
+        // viteInspectPlugin({
+        //   build: true,
+        //   outputDir: '.vite-inspect',
+        // }),
 
         {
           name: 'treat-js-files-as-jsx',
@@ -765,7 +704,7 @@ export const create = async (optionsIn: VXRNConfig) => {
             })
           },
         },
-      ],
+      ].filter(Boolean),
       appType: 'custom',
       root,
       clearScreen: false,
@@ -777,6 +716,14 @@ export const create = async (optionsIn: VXRNConfig) => {
         },
       },
 
+      resolve: {
+        extensions: nativeExtensions,
+      },
+
+      mode: 'development',
+      define: {
+        'process.env.NODE_ENV': `"development"`,
+      },
       build: {
         ssr: false,
         minify: false,
@@ -792,15 +739,6 @@ export const create = async (optionsIn: VXRNConfig) => {
           },
         },
       },
-
-      resolve: {
-        extensions: nativeExtensions,
-      },
-
-      mode: 'development',
-      define: {
-        'process.env.NODE_ENV': `"development"`,
-      },
     } satisfies InlineConfig
 
     if (options.buildConfig) {
@@ -810,6 +748,10 @@ export const create = async (optionsIn: VXRNConfig) => {
     // this fixes my swap-react-native plugin not being called pre 😳
     await resolveConfig(buildConfig, 'build')
 
+    // seems to be not working but needed to put it after the resolve or else it was cleared
+    // @ts-ignore
+    // buildConfig.build.rollupOptions.input = join(root, buildInput)
+
     const buildOutput = await build(buildConfig)
 
     if (!('output' in buildOutput)) {

package/src/index.ts

@@ -1,3 +1,4 @@
-export { create } from './create'
+export { createDevServer as create } from './createDevServer'
+export { build } from './build'
 export { nativePlugin } from './nativePlugin'
 export * from './types'

package/src/nativePlugin.ts

@@ -4,7 +4,7 @@ import { parse } from 'es-module-lexer'
 import type { OutputOptions } from 'rollup'
 import type { Plugin } from 'vite'
 
-import { getVitePath } from './getVitePath'
+import { getVitePath } from './utils/getVitePath'
 
 const extensions = [
   '.ios.js',

package/src/types.ts

@@ -1,7 +1,8 @@
-import type { FilterPattern, InlineConfig } from 'vite'
 import type { Options as FlowOptions } from '@vxrn/vite-flow'
+import type { InlineConfig } from 'vite'
 
 export type VXRNConfig = {
+  entryNative?: string
   root?: string
   host?: string
   port?: number

package/src/utils/getBaseViteConfig.ts

@@ -0,0 +1,22 @@
+import type { UserConfig } from 'vite'
+import { resolveFile } from '../createDevServer'
+
+export function getBaseViteConfig({ mode }: { mode: 'development' | 'production' }): UserConfig {
+  return {
+    mode,
+    define: {
+      __DEV__: `${mode === 'development'}`,
+      'process.env.NODE_ENV': `"${mode}"`,
+    },
+    resolve: {
+      alias: {
+        'react-native': resolveFile('react-native-web-lite'),
+      },
+    },
+    build: {
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+    },
+  }
+}

package/src/utils/getOptionsFilled.ts

@@ -0,0 +1,43 @@
+import { join } from 'node:path'
+import { readPackageJSON } from 'pkg-types'
+import FSExtra from 'fs-extra'
+import type { VXRNConfig } from '../types'
+
+export type VXRNConfigFilled = Awaited<ReturnType<typeof getOptionsFilled>>
+
+export async function getOptionsFilled(options: VXRNConfig) {
+  const { host = '127.0.0.1', root = process.cwd(), port = 8081 } = options
+  const packageRootDir = join(import.meta.url ?? __filename, '..', '..', '..').replace('file:', '')
+  const cacheDir = join(root, 'node_modules', '.cache', 'vxrn')
+  const internalPatchesDir = join(packageRootDir, 'patches')
+  const userPatchesDir = join(root, 'patches')
+  const [state, packageJSON] = await Promise.all([
+    //
+    readState(cacheDir),
+    readPackageJSON(),
+  ])
+  return {
+    ...options,
+    packageJSON,
+    state,
+    packageRootDir,
+    cacheDir,
+    userPatchesDir,
+    internalPatchesDir,
+    host,
+    root,
+    port,
+  }
+}
+
+type State = {
+  applyPatches?: boolean
+}
+
+async function readState(cacheDir: string) {
+  const statePath = join(cacheDir, 'state.json')
+  const state: State = (await FSExtra.pathExists(statePath))
+    ? await FSExtra.readJSON(statePath)
+    : {}
+  return state
+}