vxrn 0.1.45 → 0.1.47

package/src/constants.ts

@@ -1,4 +1,4 @@
-import type { SSROptions, UserConfig } from 'vite'
+import type { UserConfig } from 'vite'
 
 export const DEFAULT_PORT = 8081
 
@@ -46,17 +46,18 @@ const needsInterop = [
   'react-is',
   'fast-deep-equal',
   '@react-navigation/native',
-  'tamagui/linear-gradient',
   'react-native-svg',
   '@supabase/auth-helpers-react',
   'parse-numeric-range',
   'use-sync-external-store',
   'use-sync-external-store/shim',
-  'swr',
 ]
 
 export const depsToOptimize = [
   ...needsInterop,
+  'swr',
+  'tamagui/linear-gradient',
+  '@tamagui/linear-gradient',
   '@react-native/normalize-color',
   '@vxrn/router',
   'expo-modules-core',
@@ -93,8 +94,8 @@ export const depsToOptimize = [
 
 export const optimizeDeps = {
   include: depsToOptimize,
+  exclude: ['util', '@swc/wasm', '@swc/core-darwin-arm64'],
   needsInterop,
-  exclude: ['util'],
   esbuildOptions: {
     resolveExtensions: webExtensions,
   },

package/src/exports/build.ts

@@ -2,16 +2,16 @@ import { build as esbuild } from 'esbuild'
 import { resolve as importMetaResolve } from 'import-meta-resolve'
 import fs from 'node:fs'
 import { tmpdir } from 'node:os'
-import path, { dirname, resolve } from 'node:path'
+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 { optimizeDeps } from '../constants'
 import type { VXRNConfig } from '../types'
 import { getBaseViteConfig } from '../utils/getBaseViteConfig'
 import { getHtml } from '../utils/getHtml'
 import { getOptionsFilled, type VXRNConfigFilled } from '../utils/getOptionsFilled'
-import { optimizeDeps } from '../constants'
 
 export const resolveFile = (path: string) => {
   try {
@@ -25,7 +25,12 @@ const { ensureDir, existsSync, readFile, pathExists } = FSExtra
 
 // web only for now
 
-export const build = async (optionsIn: VXRNConfig) => {
+// TODO:
+//  - make this only build native or web bundles
+//  - move router stuff into router package
+//  - generateStaticPages becomes a vite 'post' postbuild callback in router plugin
+
+export const build = async (optionsIn: VXRNConfig, { step }: { step?: string } = {}) => {
   const options = await getOptionsFilled(optionsIn)
 
   // TODO?
@@ -46,56 +51,31 @@ export const build = async (optionsIn: VXRNConfig) => {
     webBuildConfig = mergeConfig(webBuildConfig, options.webConfig) as any
   }
 
-  console.info(`build client`)
-  await viteBuild(
-    mergeConfig(webBuildConfig, {
-      build: {
-        ssrManifest: true,
-        outDir: 'dist/client',
-      },
-    } satisfies UserConfig)
-  )
+  if (step !== 'generate') {
+    console.info(`build client`)
+    await viteBuild(
+      mergeConfig(webBuildConfig, {
+        build: {
+          ssrManifest: true,
+          outDir: 'dist/client',
+        },
+      } satisfies UserConfig)
+    )
+  }
 
   console.info(`build server`)
   const { output } = (await viteBuild(
     mergeConfig(webBuildConfig, {
-      plugins: [
-        {
-          name: 'test',
-          enforce: 'pre',
-          async resolveId(id, importer = '') {
-            if (id[0] === '.') {
-              const absolutePath = resolve(dirname(importer), id)
-              const webPath = absolutePath.replace(/(.m?js)/, '') + '.web.js'
-              if (webPath === id) return
-              try {
-                const directoryPath = absolutePath + '/index.web.js'
-                if (await pathExists(directoryPath)) {
-                  console.info(`temp fix found ${directoryPath}`)
-                  return directoryPath
-                }
-                if (await pathExists(webPath)) {
-                  console.info(`temp fix found ${webPath}`)
-                  return webPath
-                }
-              } catch (err) {
-                console.warn(`error probably fine`, err)
-              }
-            }
-          },
-        },
-      ],
+      // optimizeDeps: {
+      //   esbuildOptions: {
+      //     format: 'cjs',
+      //   },
+      // },
 
-      optimizeDeps: {
-        esbuildOptions: {
-          format: 'cjs',
-        },
-      },
-
-      ssr: {
-        noExternal: true,
-        optimizeDeps,
-      },
+      // ssr: {
+      //   noExternal: true,
+      //   optimizeDeps,
+      // },
 
       build: {
         // we want one big file of css
@@ -159,9 +139,8 @@ async function generateStaticPages(
         return await Promise.all(
           paramsList.map(async (params) => {
             const path = getUrl(params)
-            const props =
-              (await exported.generateStaticProps?.({ path: getUrl(params), params })) ?? {}
-            return { path, props }
+            const loaderData = (await exported.loader?.({ path, params })) ?? {}
+            return { path, params, loaderData }
           })
         )
 
@@ -207,8 +186,10 @@ async function generateStaticPages(
   const cssString = await FSExtra.readFile(tmpCssFile, 'utf-8')
 
   // pre-render each route...
-  for (const { path, props } of allRoutes) {
-    const { appHtml, headHtml } = await render({ path, props })
+  for (const { path, loaderData, params } of allRoutes) {
+    const loaderProps = { params }
+    globalThis['__vxrnLoaderProps__'] = loaderProps
+    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
@@ -216,7 +197,8 @@ async function generateStaticPages(
       template: clientHtml || template,
       appHtml,
       headHtml,
-      props,
+      loaderData,
+      loaderProps,
       css: cssString,
     })
     const filePath = toAbsolute(`dist/static${slashFileName}`)

package/src/exports/dev.ts

@@ -47,6 +47,8 @@ import { checkPatches } from '../utils/patches'
 let isBuildingNativeBundle: Promise<string> | null = null
 const hotUpdateCache = new Map<string, string>()
 
+let connectedNativeClients = 0
+
 export const resolveFile = (path: string) => {
   try {
     return importMetaResolve(path, import.meta.url).replace('file://', '')
@@ -217,6 +219,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
       websocket: {
         open(peer) {
           console.debug('[hmr] open', peer)
+          connectedNativeClients++
         },
 
         message(peer, message) {
@@ -228,6 +231,7 @@ export const dev = async ({ clean, ...rest }: VXRNConfig & { clean?: boolean })
 
         close(peer, event) {
           console.info('[hmr] close', peer, event)
+          connectedNativeClients--
         },
 
         error(peer, error) {
@@ -765,23 +769,8 @@ 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
+  const { root, host, webConfig } = config
 
   let serverConfig: UserConfig = mergeConfig(
     getBaseViteConfig({
@@ -792,7 +781,6 @@ async function getViteServerConfig(config: VXRNConfigFilled) {
       clearScreen: false,
       plugins: [
         reactNativeHMRPlugin(config),
-        // watchNodeModules(['@tamagui/popper'])
 
         {
           name: 'process-env-ssr',
@@ -805,10 +793,22 @@ async function getViteServerConfig(config: VXRNConfigFilled) {
         },
       ],
       optimizeDeps,
+
       ssr: {
-        noExternal: true,
+        // noExternal true causes many incompat issues because we need things on disk to work
+        // eg generally node uses .cjs extensions to "switch" back to cjs mode on import, but once bundled
+        // this wont happen, breaking many things
+        // but we need react related things always so they dont duplicate
+        noExternal: [
+          ...optimizeDeps.include,
+          'react',
+          'react-dom',
+          'react-dom/server',
+          'react-dom/client',
+        ],
         optimizeDeps,
       },
+
       server: {
         hmr: {
           path: '/__vxrnhmr',
@@ -850,6 +850,9 @@ function reactNativeHMRPlugin({ root }: VXRNConfigFilled) {
         if (!isWithin(root, file)) {
           return
         }
+        if (!connectedNativeClients) {
+          return
+        }
 
         const [module] = modules
         if (!module) return

package/src/utils/getHtml.ts

@@ -1,12 +1,35 @@
+// TODO merge with the other one
 export function getHtml({
   template,
-  props,
+  loaderData,
+  loaderProps,
   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
+  loaderProps?: any
+  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 loaderDataJS = `globalThis['__vxrnLoaderData__']=${JSON.stringify(loaderData)}`
+  const loaderPropsJS = `globalThis['__vxrnLoaderProps__']=${JSON.stringify(loaderProps || null)}`
+  const loaderDataString = `\n<script>
+    ${loaderDataJS};
+    ${loaderPropsJS};
+  </script>`
+
   return template
-    .replace(`<!--ssr-outlet-->`, appHtml + propsHtml)
-    .replace(`<!--head-outlet-->`, `${headHtml}\n${css ? `<style>${css}</style>` : ``}`)
+    .replace(/\s*<!--ssr-outlet-->\s*/, appHtml)
+    .replace(`<!--head-outlet-->`, `${headHtml}\n${css ? `<style>${css}</style>\n` : ``}`)
+    .replace('</body>', loaderDataString)
 }

package/src/utils/getOptionsFilled.ts

@@ -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([

package/src/utils/getVitePath.ts

@@ -34,7 +34,9 @@ export async function getVitePath(
   const resolved = resolve(sourceFile)(moduleName)
   // figure out symlinks
   if (!resolved) {
-    throw new Error(`❌ cant find`)
+    throw new Error(
+      ` ❌ Path not found ${sourceFile} (rootPath ${rootPath}, importer ${importer}, moduleName ${moduleName})`
+    )
   }
   const real = await FSExtra.realpath(resolved)
   let id = real

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,23 @@ export async function readVXRNConfig(): Promise<VXRNConfig> {
     })
 
     await vite.close()
-    return 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)
-    }
+    return resolveOptionalAsyncFunction(userConfig?.default ?? {})
+  } catch (err: any) {
+    console.info(` [vxrn] Error loading config via ESM:
 
-    const requireFile = jiti(process.cwd(), {
-      esmResolve: true,
-    })
-    const userConfig = requireFile('./vxrn.config.ts')
-    return userConfig?.default ?? {}
+${err.stack}
+    
+ To load as CommonJS, set VXRN_CJS=1`)
+    throw err
+  }
+}
+
+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

@@ -4,8 +4,8 @@ export declare const webExtensions: string[];
 export declare const depsToOptimize: string[];
 export declare const optimizeDeps: {
     include: string[];
-    needsInterop: string[];
     exclude: string[];
+    needsInterop: string[];
     esbuildOptions: {
         resolveExtensions: string[];
     };

package/types/exports/build.d.ts

@@ -1,4 +1,6 @@
 import type { VXRNConfig } from '../types';
 export declare const resolveFile: (path: string) => string;
-export declare const build: (optionsIn: VXRNConfig) => Promise<void>;
+export declare const build: (optionsIn: VXRNConfig, { step }?: {
+    step?: string;
+}) => Promise<void>;
 //# sourceMappingURL=build.d.ts.map

package/types/utils/getHtml.d.ts

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