vxrn 0.1.44 → 0.1.46

package/src/exports/dev.ts

@@ -8,7 +8,7 @@ import {
   toNodeListener,
 } from 'h3'
 import { createProxyEventHandler } from 'h3-proxy'
-import { readFile } from 'node:fs/promises'
+import { readFile, rm } from 'node:fs/promises'
 import { createServer as nodeCreateServer } from 'node:http'
 import { dirname, join, relative, resolve } from 'node:path'
 import readline from 'node:readline'
@@ -33,7 +33,7 @@ import {
 import createViteFlow from '@vxrn/vite-flow'
 import type { Peer } from 'crossws'
 import { resolve as importMetaResolve } from 'import-meta-resolve'
-import { depsToOptimize, nativeExtensions, optimizeDeps, webExtensions } from '../constants'
+import { depsToOptimize, nativeExtensions, optimizeDeps } from '../constants'
 import { clientInjectionsPlugin } from '../plugins/clientInjectPlugin'
 import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
 import type { VXRNConfig } from '../types'
@@ -57,10 +57,27 @@ export const resolveFile = (path: string) => {
 
 const { ensureDir, pathExists, pathExistsSync } = FSExtra
 
-export const dev = async (_options: VXRNConfig) => {
-  const options = await getOptionsFilled(_options)
+export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean }) => {
+  const options = await getOptionsFilled(rest)
   const { host, port, root, cacheDir } = options
 
+  if (clean) {
+    try {
+      console.info(` [vxrn] cleaning node_modules/.vite`)
+      await rm(join(root, 'node_modules', '.vite'), {
+        recursive: true,
+        force: true,
+      })
+    } catch (err) {
+      if (err instanceof Error) {
+        // @ts-expect-error wtf
+        if (err.code !== 'ENOENT') {
+          throw Error
+        }
+      }
+    }
+  }
+
   // TODO move somewhere
   bindKeypressInput()
 
@@ -369,7 +386,6 @@ async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugi
 
       {
         name: 'reanimated',
-
         async transform(code, id) {
           if (code.includes('worklet')) {
             const out = await babelReanimated(code, id)
@@ -394,7 +410,7 @@ async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugi
       {
         name: 'treat-js-files-as-jsx',
         async transform(code, id) {
-          if (!id.match(/expo-status-bar/)) return null
+          if (!id.includes(`expo-status-bar`)) return null
           // Use the exposed transform from vite, instead of directly
           // transforming with esbuild
           return transformWithEsbuild(code, id, {
@@ -404,6 +420,7 @@ async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugi
         },
       },
     ].filter(Boolean),
+
     appType: 'custom',
     root,
     clearScreen: false,
@@ -432,6 +449,7 @@ async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugi
         transformMixedEsModules: true,
       },
       rollupOptions: {
+        input: options.entries.native,
         treeshake: false,
         preserveEntrySignatures: 'strict',
         output: {
@@ -446,13 +464,9 @@ async function getReactNativeBundle(options: VXRNConfigFilled, viteRNClientPlugi
     nativeBuildConfig = mergeConfig(nativeBuildConfig, options.nativeConfig) as any
   }
 
-  // this fixes my swap-react-native plugin not being called pre 😳
+  // // this fixes my swap-react-native plugin not being called pre 😳
   await resolveConfig(nativeBuildConfig, 'build')
 
-  // seems to be not working but needed to put it after the resolve or else it was cleared
-  // @ts-ignore
-  // nativeBuildConfig.build.rollupOptions.input = join(root, buildInput)
-
   const buildOutput = await build(nativeBuildConfig)
 
   if (!('output' in buildOutput)) {
@@ -503,11 +517,6 @@ __require("${outputModule.fileName}")
   }
 
   appCode = appCode
-    // this can be done in the individual file transform
-    .replaceAll('undefined.accept(() => {})', '')
-    .replaceAll('undefined.accept(function() {});', '')
-    .replaceAll('(void 0).accept(() => {})', '')
-    .replaceAll('(void 0).accept(function() {});', '')
     // TEMP FIX for router tamagui thing since expo router 3 upgrade
     .replaceAll('dist/esm/index.mjs"', 'dist/esm/index.js"')
 
@@ -756,6 +765,21 @@ function isWithin(outer: string, inner: string) {
 // used for normalizing hot reloads
 let entryRoot = ''
 
+// function watchNodeModules(modules: string[]): PluginOption {
+//   return {
+//     name: 'watch-node-modules',
+//     config() {
+//       return {
+//         server: {
+//           watch: {
+//             ignored: modules.map((m) => `!**/packages/${m}/**`),
+//           },
+//         },
+//       }
+//     },
+//   }
+// }
+
 async function getViteServerConfig(config: VXRNConfigFilled) {
   const { root, host, webConfig, cacheDir } = config
 
@@ -766,7 +790,20 @@ async function getViteServerConfig(config: VXRNConfigFilled) {
     {
       root,
       clearScreen: false,
-      plugins: [reactNativeHMRPlugin(config)],
+      plugins: [
+        reactNativeHMRPlugin(config),
+        // watchNodeModules(['@tamagui/popper'])
+
+        {
+          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: {
         noExternal: true,

package/src/plugins/reactNativeCommonJsPlugin.ts

@@ -87,8 +87,6 @@ export function reactNativeCommonJsPlugin(options: {
 
       config.build.rollupOptions ??= {}
 
-      config.build.rollupOptions.input = config.root
-
       config.build.rollupOptions.output ??= {}
 
       config.build.rollupOptions.plugins ??= []

package/src/types.ts

@@ -2,7 +2,17 @@ import type { Options as FlowOptions } from '@vxrn/vite-flow'
 import type { InlineConfig } from 'vite'
 
 export type VXRNConfig = {
-  entryNative?: string
+  /**
+   * The entry points to your app. For web, it uses your `root` and looks for an index.html
+   *
+   * Defaults:
+   *   native: ./src/entry-native.tsx
+   *   server: ./src/entry-server.tsx
+   */
+  entries?: {
+    native?: string
+    server?: string
+  }
   root?: string
   host?: string
   port?: number

package/src/utils/getBaseViteConfig.ts

@@ -13,12 +13,14 @@ export function getBaseViteConfig({ mode }: { mode: 'development' | 'production'
       __DEV__: `${mode === 'development'}`,
       'process.env.NODE_ENV': `"${mode}"`,
     },
+
     resolve: {
       alias: {
         'react-native': 'react-native-web',
         'react-native-safe-area-context': '@vxrn/safe-area',
       },
     },
+
     build: {
       commonjsOptions: {
         transformMixedEsModules: true,

package/src/utils/getHtml.ts

@@ -1,12 +1,20 @@
 export function getHtml({
   template,
-  props,
+  loaderData,
   appHtml,
   headHtml,
   css,
-}: { css?: string; template: string; props: Object; appHtml: string; headHtml: string }) {
-  const propsHtml = `\n<script>globalThis['__vxrnProps']=${JSON.stringify(props)}</script>`
+}: { css?: string; template: string; loaderData: Object; appHtml: string; headHtml: string }) {
+  if (!template.includes(`<!--ssr-outlet-->`)) {
+    throw new Error(`No <!--ssr-outlet--> found in html to inject SSR contents`)
+  }
+  if (!template.includes(`<!--head-outlet-->`)) {
+    throw new Error(`No <!--head-outlet--> found in html to inject SSR contents`)
+  }
+  const loaderDataString = `\n<script>globalThis['__vxrnLoaderData__']=${JSON.stringify(
+    loaderData
+  )}</script>`
   return template
-    .replace(`<!--ssr-outlet-->`, appHtml + propsHtml)
+    .replace(`<!--ssr-outlet-->`, appHtml + loaderDataString)
     .replace(`<!--head-outlet-->`, `${headHtml}\n${css ? `<style>${css}</style>` : ``}`)
 }

package/src/utils/getOptionsFilled.ts

@@ -10,7 +10,7 @@ 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() } = options
+  const { host = '127.0.0.1', root = process.cwd(), entries } = options
 
   const defaultPort = options.port || 8081
   const port = await getPort({
@@ -20,7 +20,7 @@ export async function getOptionsFilled(options: VXRNConfig) {
 
   const packageRootDir = join(require.resolve('vxrn'), '../../..')
 
-  const cacheDir = join(root, 'node_modules', '.cache', 'vxrn')
+  const cacheDir = join(root, 'node_modules', '.vxrn')
   const internalPatchesDir = join(packageRootDir, 'patches')
   const userPatchesDir = join(root, 'patches')
   const [state, packageJSON] = await Promise.all([
@@ -30,6 +30,11 @@ export async function getOptionsFilled(options: VXRNConfig) {
   ])
   return {
     ...options,
+    entries: {
+      native: './src/entry-native.tsx',
+      server: './src/entry-server.tsx',
+      ...entries,
+    },
     packageJSON,
     state,
     packageRootDir,

package/src/utils/readVXRNConfig.ts

@@ -8,6 +8,14 @@ export async function readVXRNConfig(): Promise<VXRNConfig> {
     return {}
   }
 
+  if (process.env.VXRN_CJS) {
+    const requireFile = jiti(process.cwd(), {
+      esmResolve: true,
+    })
+    const userConfig = requireFile('./vxrn.config.ts')
+    return resolveOptionalAsyncFunction(userConfig?.default ?? {})
+  }
+
   // try esm load
   try {
     // somewhat hacky creating a server just to read config?
@@ -21,17 +29,21 @@ export async function readVXRNConfig(): Promise<VXRNConfig> {
     })
 
     await vite.close()
-    return userConfig?.default ?? {}
+    return resolveOptionalAsyncFunction(userConfig?.default ?? {})
   } catch (err) {
-    console.info(`Error loading config via ESM, attempting CJS, DEBUG=1 to see logs`)
-    if (process.env.DEBUG) {
-      console.info(err)
-    }
+    console.info(
+      ` [vxrn] Error loading config via ESM, attempting CJS, set VXRN_CJS=1 to run in cjs mode`
+    )
+    throw err
+  }
+}
 
-    const requireFile = jiti(process.cwd(), {
-      esmResolve: true,
-    })
-    const userConfig = requireFile('./vxrn.config.ts')
-    return userConfig?.default ?? {}
+async function resolveOptionalAsyncFunction(value: any) {
+  if (typeof value === 'function') {
+    value = value()
+  }
+  if (value instanceof Promise) {
+    value = await value
   }
+  return value
 }

package/types/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const DEFAULT_PORT = 8081;
+export declare const EMPTY_LOADER_STRING = "function loader() {/* \u2737\u2737\u2737 */};";
 export declare const nativeExtensions: string[];
 export declare const webExtensions: string[];
 export declare const depsToOptimize: string[];

package/types/exports/dev.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="node" />
 import type { VXRNConfig } from '../types';
 export declare const resolveFile: (path: string) => string;
-export declare const dev: (_options: VXRNConfig) => Promise<{
+export declare const dev: ({ clean, ...rest }: VXRNConfig & {
+    clean?: boolean;
+}) => Promise<{
     server: import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>;
     viteServer: import("vite").ViteDevServer;
     start(): Promise<{

package/types/types.d.ts

@@ -1,7 +1,17 @@
 import type { Options as FlowOptions } from '@vxrn/vite-flow';
 import type { InlineConfig } from 'vite';
 export type VXRNConfig = {
-    entryNative?: string;
+    /**
+     * The entry points to your app. For web, it uses your `root` and looks for an index.html
+     *
+     * Defaults:
+     *   native: ./src/entry-native.tsx
+     *   server: ./src/entry-server.tsx
+     */
+    entries?: {
+        native?: string;
+        server?: string;
+    };
     root?: string;
     host?: string;
     port?: number;

package/types/utils/getHtml.d.ts

@@ -1,7 +1,7 @@
-export declare function getHtml({ template, props, appHtml, headHtml, css, }: {
+export declare function getHtml({ template, loaderData, appHtml, headHtml, css, }: {
     css?: string;
     template: string;
-    props: Object;
+    loaderData: Object;
     appHtml: string;
     headHtml: string;
 }): string;

package/types/utils/getOptionsFilled.d.ts

@@ -1,6 +1,10 @@
 import type { VXRNConfig } from '../types';
 export type VXRNConfigFilled = Awaited<ReturnType<typeof getOptionsFilled>>;
 export declare function getOptionsFilled(options: VXRNConfig): Promise<{
+    entries: {
+        native: string;
+        server: string;
+    };
     packageJSON: import("pkg-types").PackageJson;
     state: State;
     packageRootDir: string;
@@ -10,7 +14,6 @@ export declare function getOptionsFilled(options: VXRNConfig): Promise<{
     host: string;
     root: string;
     port: number;
-    entryNative?: string | undefined;
     webConfig?: import("vite").InlineConfig | undefined;
     nativeConfig?: import("vite").InlineConfig | undefined;
     flow?: import("@vxrn/vite-flow").Options | undefined;