vxrn 0.1.19 → 0.1.21

package/src/exports/build.ts

@@ -0,0 +1,197 @@
+import { resolve as importMetaResolve } from 'import-meta-resolve'
+import fs from 'node:fs'
+import path from 'node:path'
+import { mergeConfig, build as viteBuild, type UserConfig } from 'vite'
+
+import FSExtra from 'fs-extra'
+import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
+import { clientBundleTreeShakePlugin } from '../plugins/clientBundleTreeShakePlugin'
+import type { VXRNConfig } from '../types'
+import { getBaseViteConfig } from '../utils/getBaseViteConfig'
+import { getOptionsFilled, type VXRNConfigFilled } from '../utils/getOptionsFilled'
+
+export const resolveFile = (path: string) => {
+  try {
+    return importMetaResolve(path, import.meta.url).replace('file://', '')
+  } catch {
+    return require.resolve(path)
+  }
+}
+
+const { ensureDir, existsSync, readFile } = FSExtra
+
+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, {
+      plugins: [clientBundleTreeShakePlugin({})],
+      build: {
+        ssrManifest: true,
+        outDir: 'dist/client',
+      },
+    } satisfies UserConfig)
+  )
+
+  console.info(`build server`)
+  const { output } = (await viteBuild(
+    mergeConfig(buildConfig, {
+      resolve: {
+        alias: {
+          'react-native': 'react-native-web-lite',
+        },
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          format: 'cjs',
+        },
+      },
+      ssr: {
+        noExternal: true,
+      },
+      build: {
+        // we want one big file of css
+        cssCodeSplit: false,
+        ssr: 'src/entry-server.tsx',
+        outDir: 'dist/server',
+        rollupOptions: {
+          external: [],
+        },
+      },
+    } satisfies UserConfig)
+  )) as RollupOutput
+
+  console.info(`generating static pages`)
+  await generateStaticPages(options, output)
+}
+
+async function generateStaticPages(
+  options: VXRNConfigFilled,
+  serverOutput: (OutputChunk | OutputAsset)[]
+) {
+  const toAbsolute = (p) => path.resolve(options.root, p)
+
+  const staticDir = toAbsolute(`dist/static`)
+  await ensureDir(staticDir)
+  const template = fs.readFileSync(toAbsolute('index.html'), 'utf-8')
+
+  const render = (await import(`${options.root}/dist/server/entry-server.js`)).render
+
+  // load routes
+  const entry = serverOutput.find(
+    (x) => x.type === 'chunk' && x.facadeModuleId?.includes('entry-server')
+  )
+
+  const assets: OutputAsset[] = []
+
+  const allRoutes = (
+    await Promise.all(
+      serverOutput.flatMap(async (output) => {
+        if (output.type === 'asset') {
+          assets.push(output)
+          return []
+        }
+
+        const id = output.facadeModuleId || ''
+        const file = path.basename(id)
+        const name = file.replace(/\.[^/.]+$/, '')
+
+        if (!id || file[0] === '_' || file.includes('entry-server')) {
+          return []
+        }
+
+        const endpointPath = path.join(options.root, 'dist/server', output.fileName)
+        const exported = await import(endpointPath)
+        const staticParams = await exported.generateStaticParams?.()
+        const result = (staticParams || [{}]).map((params) => {
+          return getUrl(params)
+        })
+
+        function getUrl(params = {}) {
+          return name === 'index'
+            ? '/'
+            : `/${name
+                .split('/')
+                .map((part) => {
+                  if (part[0] === '[') {
+                    const found = params[part.slice(1, part.length - 1)]
+                    if (!found) {
+                      console.warn('not found', { params, part })
+                    }
+                    return found
+                  }
+                  return part
+                })
+                .join('/')}`
+        }
+
+        return result
+      })
+    )
+  ).flat()
+
+  // for now just inline
+  const cssString = assets
+    .filter((x) => x.name?.endsWith('.css'))
+    .map((x) => x.source)
+    .join('\n\n')
+
+  // pre-render each route...
+  for (const path of allRoutes) {
+    const { appHtml, headHtml } = await render({ path })
+    const slashFileName = `${path === '/' ? '/index' : path}.html`
+    const clientHtmlPath = toAbsolute(`dist/client${slashFileName}`)
+    const clientHtml = existsSync(clientHtmlPath) ? await readFile(clientHtmlPath, 'utf-8') : null
+    const html = (clientHtml || template)
+      .replace(`<!--ssr-outlet-->`, appHtml)
+      .replace(
+        `<!--head-outlet-->`,
+        `${headHtml}\n${cssString ? `<style>${cssString}</style>` : ``}`
+      )
+    const filePath = toAbsolute(`dist/static${slashFileName}`)
+    fs.writeFileSync(toAbsolute(filePath), html)
+  }
+}

package/src/{createDevServer.ts → exports/dev.ts}

@@ -1,5 +1,4 @@
 import wsAdapter from 'crossws/adapters/node'
-import findNodeModules from 'find-node-modules'
 import {
   createApp,
   createRouter,
@@ -14,7 +13,6 @@ 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 * as babel from '@babel/core'
@@ -36,12 +34,15 @@ import {
 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 { nativePlugin } from './nativePlugin'
-import type { VXRNConfig } from './types'
-import { getBaseViteConfig } from './utils/getBaseViteConfig'
-import { getOptionsFilled, type VXRNConfigFilled } from './utils/getOptionsFilled'
-import { getVitePath } from './utils/getVitePath'
+import { clientBundleTreeShakePlugin } from '../plugins/clientBundleTreeShakePlugin'
+import { clientInjectionsPlugin } from '../plugins/clientInjectPlugin'
+import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
+import type { VXRNConfig } from '../types'
+import { getBaseViteConfig } from '../utils/getBaseViteConfig'
+import { getOptionsFilled } from '../utils/getOptionsFilled'
+import { getVitePath } from '../utils/getVitePath'
+import { checkPatches } from '../utils/patches'
+import { createExpoServer } from '../vendor/createExpoServer'
 
 export const resolveFile = (path: string) => {
   try {
@@ -77,58 +78,7 @@ const extensions = [
 
 const { ensureDir, pathExists, pathExistsSync } = FSExtra
 
-const patches = [
-  {
-    module: 'react-native-screens',
-    patchFile: 'react-native-screens+3.22.1.patch',
-  },
-]
-
-type Patch = (typeof patches)[0]
-
-async function checkPatches(options: VXRNConfigFilled) {
-  if (options.state.applyPatches === false) {
-    return
-  }
-
-  const nodeModulesDirs = findNodeModules({
-    cwd: options.root,
-  }).map((relativePath) => join(options.root, relativePath))
-
-  const patchesToCopy = new Set<Patch>()
-
-  await Promise.all(
-    patches.flatMap((patch) => {
-      return nodeModulesDirs.flatMap(async (dir) => {
-        if (await FSExtra.pathExists(join(dir, patch.module))) {
-          patchesToCopy.add(patch)
-        }
-      })
-    })
-  )
-
-  let didCopy = false
-
-  for (const patch of [...patchesToCopy]) {
-    const dest = join(options.userPatchesDir, patch.patchFile)
-    if (!(await pathExists(dest))) {
-      didCopy = true
-      console.info(`Copying patch ${patch.module}`)
-      const src = join(options.internalPatchesDir, patch.patchFile)
-      await FSExtra.copy(src, dest)
-    }
-  }
-
-  if (didCopy) {
-    console.info(
-      `\nPlease restart after applying the patch by running "npx patch-package".
-  Ideally add it to your devDependencies and as a postinstall script.\n`
-    )
-    process.exit(0)
-  }
-}
-
-export const createDevServer = async (optionsIn: VXRNConfig) => {
+export const dev = async (optionsIn: VXRNConfig) => {
   const options = await getOptionsFilled(optionsIn)
   const { host, port, root, cacheDir } = options
 
@@ -363,7 +313,11 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
     {
       root,
       clearScreen: false,
-      plugins: [reactNativeHMRPlugin],
+      plugins: [
+        reactNativeHMRPlugin,
+
+        clientBundleTreeShakePlugin({}),
+      ],
       optimizeDeps: {
         include: depsToOptimize,
         exclude: Object.values(virtualModules).map((v) => v.alias),
@@ -379,7 +333,7 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
         cors: true,
         host,
       },
-    }
+    } satisfies UserConfig
   ) satisfies InlineConfig
 
   if (options.webConfig) {
@@ -430,6 +384,8 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
     },
   })
 
+  createExpoServer(root, app)
+
   router.get(
     '/file',
     defineEventHandler((e) => {
@@ -557,6 +513,7 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
     data: string[]
   }
 
+  // react native log bridge
   app.use(
     '/__client',
     defineWebSocketHandler({
@@ -601,7 +558,7 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
   server.on('upgrade', handleUpgrade)
 
   return {
-    nativeServer: server,
+    server,
     viteServer,
 
     async start() {
@@ -655,8 +612,6 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
       })
     }
 
-    const buildInput = options.entryNative || 'index.jsx'
-
     // build app
     let buildConfig = {
       plugins: [
@@ -674,9 +629,10 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
           },
         },
 
+        clientBundleTreeShakePlugin({}),
         viteRNClientPlugin,
 
-        nativePlugin({
+        reactNativeCommonJsPlugin({
           root,
           port,
           mode: 'build',
@@ -687,11 +643,6 @@ export const createDevServer = async (optionsIn: VXRNConfig) => {
           mode: 'build',
         }),
 
-        // viteInspectPlugin({
-        //   build: true,
-        //   outputDir: '.vite-inspect',
-        // }),
-
         {
           name: 'treat-js-files-as-jsx',
           async transform(code, id) {
@@ -807,6 +758,8 @@ __require("${outputModule.fileName}")
       .replaceAll('undefined.accept(function() {});', '')
       .replaceAll('(void 0).accept(() => {})', '')
       .replaceAll('(void 0).accept(function() {});', '')
+      // TEMP FIX for expo-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, '..', '..')
@@ -861,7 +814,7 @@ function getIndexJsonResponse({ port, root }: { port: number | string; root }) {
       staticConfigPath: join(root, 'app.json'),
       packageJsonPath: join(root, 'package.json'),
     },
-    sdkVersion: '47.0.0',
+    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}`,

package/src/exports/serve.ts

@@ -0,0 +1,51 @@
+import sirv from 'sirv'
+import type { VXRNConfig } from '../types'
+import { getOptionsFilled } from '../utils/getOptionsFilled'
+import { createApp, defineEventHandler } from 'h3'
+
+export const serve = async (optionsIn: VXRNConfig) => {
+  const options = await getOptionsFilled(optionsIn)
+
+  const app = createApp()
+
+  const sirvStaticMiddleware = sirv('dist/static', {
+    gzip: true,
+  })
+
+  app.use(
+    defineEventHandler(async ({ node: { req, res } }) => {
+      await new Promise<void>((response) => {
+        sirvStaticMiddleware(req, res, () => {
+          response()
+        })
+      })
+    })
+  )
+
+  const sirvMiddleware = sirv('dist/client', {
+    gzip: true,
+  })
+
+  app.use(
+    defineEventHandler(async ({ node: { req, res } }) => {
+      await new Promise<void>((response) => {
+        sirvMiddleware(req, res, () => {
+          response()
+        })
+      })
+    })
+  )
+}
+
+// app.use(
+//   defineEventHandler(async ({ node: { req, res } }) => {
+//     const url = req.originalUrl
+//     const template = fs.readFileSync(path.resolve('dist/client/index.html'), 'utf-8')
+//     // @ts-ignore
+//     const render = (await import('./dist/server/entry-server.js')).render
+//     const appHtml = await render({ path: url })
+//     const html = template.replace(`<!--ssr-outlet-->`, appHtml)
+//     res.setHeader('Content-Type', 'text/html')
+//     return html
+//   })
+// )

package/src/index.ts

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

package/src/plugins/clientBundleTreeShakePlugin.tsx

@@ -0,0 +1,105 @@
+import type { Node, Program } from 'estree'
+import { walk } from 'estree-walker'
+import MagicString from 'magic-string'
+import type { Plugin } from 'vite'
+
+interface TreeShakeTemplatePluginOptions {
+  sourcemap?: boolean
+}
+
+type AcornNode<N extends Node> = N & { start: number; end: number }
+
+export const clientBundleTreeShakePlugin = (options: TreeShakeTemplatePluginOptions) => {
+  return {
+    name: 'vxrn:client-tree-shake',
+    enforce: 'post',
+    transform(code, id) {
+      if (id.includes('node_modules')) {
+        return
+      }
+      if (!code.includes(`generateStaticParams`)) {
+        return
+      }
+
+      const s = new MagicString(code)
+      const codeAst = this.parse(code) as AcornNode<Program>
+
+      walk(codeAst, {
+        enter: (node) => {
+          if (node.type === 'ExportNamedDeclaration' || node.type === 'VariableDeclaration') {
+            let declarators = (
+              'declarations' in node
+                ? node.declarations
+                : 'declaration' in node
+                  ? [node.declaration]
+                  : []
+            ) as any[]
+
+            let shouldRemove = false
+
+            declarators.forEach((declarator) => {
+              if (
+                declarator.id.type === 'Identifier' &&
+                declarator.id.name === 'generateStaticParams'
+              ) {
+                shouldRemove = true
+              }
+            })
+
+            const replaceStr = `function generateStaticParams() {};`
+            const length = node['end'] - node['start']
+
+            if (shouldRemove) {
+              // @ts-ignore
+              // s.remove(node.start, node.end + 1)
+              s.update(node.start, node.end + 1, replaceStr.padEnd(length - replaceStr.length))
+              // make sure it doesnt error with forceExports
+              // s.append(`function generateStaticParams {}`)
+
+              if (node.type === 'ExportNamedDeclaration') {
+                // remove import declaration if it exists
+                // @ts-ignore
+                removeImportDeclaration(codeAst, node, s)
+              }
+            }
+          }
+        },
+      })
+
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: options.sourcemap ? s.generateMap({ hires: true }) : undefined,
+        }
+      }
+    },
+  } satisfies Plugin
+}
+
+function removeImportDeclaration(
+  ast: Program,
+  importName: string,
+  magicString: MagicString
+): boolean {
+  for (const node of ast.body) {
+    if (node.type === 'ImportDeclaration') {
+      const specifier = node.specifiers.find((s) => s.local.name === importName)
+      if (specifier) {
+        if (node.specifiers.length > 1) {
+          const specifierIndex = node.specifiers.findIndex((s) => s.local.name === importName)
+          if (specifierIndex > -1) {
+            magicString.remove(
+              (node.specifiers[specifierIndex] as AcornNode<Node>).start,
+              (node.specifiers[specifierIndex] as AcornNode<Node>).end + 1
+            )
+            node.specifiers.splice(specifierIndex, 1)
+          }
+        } else {
+          magicString.remove((node as AcornNode<Node>).start, (node as AcornNode<Node>).end)
+        }
+        return true
+      }
+    }
+  }
+  return false
+}

package/src/{dev → plugins}/clientInjectPlugin.ts

@@ -81,15 +81,6 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
     transform(code, id, options) {
       if (id.includes('vite-native-client/dist/esm/client.')) {
         return injectConfigValues(code)
-      } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
-        // replace process.env.NODE_ENV instead of defining a global
-        // for it to avoid shimming a `process` object during dev,
-        // avoiding inconsistencies between dev and build
-        // return code.replace(
-        //   process_env_NODE_ENV_RE,
-        //   config.define?.['process.env.NODE_ENV'] ||
-        //     JSON.stringify(process.env.NODE_ENV || config.mode)
-        // )
       }
     },
   }
@@ -104,9 +95,7 @@ function serializeDefine(define: Record<string, any>): string {
   let res = `{`
   for (const key in define) {
     const val = define[key]
-    res += `${JSON.stringify(key)}: ${
-      typeof val === 'string' ? `(${val})` : JSON.stringify(val)
-    }, `
+    res += `${JSON.stringify(key)}: ${typeof val === 'string' ? `(${val})` : JSON.stringify(val)}, `
   }
   return res + `}`
 }

package/src/{nativePlugin.ts → plugins/reactNativeCommonJsPlugin.ts}

@@ -1,10 +1,10 @@
-import { dirname } from 'path'
+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'
+import { getVitePath } from '../utils/getVitePath'
 
 const extensions = [
   '.ios.js',
@@ -19,7 +19,7 @@ const extensions = [
   '.mjs',
 ]
 
-export function nativePlugin(options: {
+export function reactNativeCommonJsPlugin(options: {
   root: string
   port: number
   mode: 'build' | 'serve'
@@ -93,13 +93,6 @@ export function nativePlugin(options: {
 
       config.build.rollupOptions.plugins ??= []
 
-      // config.build.rollupOptions.external = [
-      //   'react-native',
-      //   'react',
-      //   'react/jsx-runtime',
-      //   'react/jsx-dev-runtime',
-      // ]
-
       if (!Array.isArray(config.build.rollupOptions.plugins)) {
         throw `x`
       }
@@ -107,22 +100,6 @@ export function nativePlugin(options: {
       if (options.mode === 'build') {
         config.plugins ||= []
 
-        // https://vitejs.dev/config/dep-optimization-options.html
-        // config.build.commonjsOptions ||= {}
-        // config.build.commonjsOptions.include = []
-
-        // CANT DO THIS BECAUSE TAMAGUI PLUGIN DOES THIS! they clobber each other!
-        // config.plugins.push(
-        //   viteCommonjs({
-        //     include: ['escape-string-regexp'],
-        //   })
-        // )
-
-        // config.resolve.alias = {
-        //   ...config.resolve.alias,
-        //   'react-native': virtualModuleId,
-        // }
-
         config.build.rollupOptions.plugins.push({
           name: `force-export-all`,
 

package/src/utils/getBaseViteConfig.ts

@@ -1,5 +1,5 @@
 import type { UserConfig } from 'vite'
-import { resolveFile } from '../createDevServer'
+import { resolveFile } from '../exports/dev'
 
 export function getBaseViteConfig({ mode }: { mode: 'development' | 'production' }): UserConfig {
   return {

package/src/utils/getOptionsFilled.ts

@@ -1,13 +1,18 @@
 import { join } from 'node:path'
 import { readPackageJSON } from 'pkg-types'
+import { createRequire } from 'module'
 import FSExtra from 'fs-extra'
 import type { VXRNConfig } from '../types'
 
+const require = createRequire(import.meta.url)
+
 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 packageRootDir = join(require.resolve('vxrn'), '../../..')
+
   const cacheDir = join(root, 'node_modules', '.cache', 'vxrn')
   const internalPatchesDir = join(packageRootDir, 'patches')
   const userPatchesDir = join(root, 'patches')