vxrn 1.12.8 → 1.13.0

package/src/config/getReactNativeBuildConfig.ts

@@ -1,349 +0,0 @@
-import nodeResolve from '@rollup/plugin-node-resolve'
-import { createVXRNCompilerPlugin } from '@vxrn/compiler'
-import { resolvePath } from '@vxrn/resolve'
-import { stat } from 'node:fs/promises'
-import { dirname, join } from 'node:path'
-import {
-  createLogger,
-  type InlineConfig,
-  type Logger,
-  type Plugin,
-  resolveConfig,
-  type ResolvedConfig,
-  type UserConfig,
-} from 'vite'
-import { DEFAULT_ASSET_EXTS } from '../constants/defaults'
-import { nativeClientInjectPlugin } from '../plugins/clientInjectPlugin'
-import { reactNativeCommonJsPlugin } from '../plugins/reactNativeCommonJsPlugin'
-import { reactNativeDevAssetPlugin } from '../plugins/reactNativeDevAssetPlugin'
-import { dedupe } from './getBaseViteConfigOnly'
-import { getOptimizeDeps } from './getOptimizeDeps'
-import type { VXRNOptionsFilled } from './getOptionsFilled'
-import { swapPrebuiltReactModules } from '../utils/swapPrebuiltReactModules'
-
-// Suppress these logs:
-// * Use of eval in "(...)/react-native-prebuilt/vendor/react-native-0.74.1/index.js" is strongly discouraged as it poses security risks and may cause issues with minification.
-// * Use of eval in "(...)/one/dist/esm/useLoader.native.js" is strongly discouraged as it poses security risks and may cause issues with minification.
-// (not an exhaustive list)
-const IGNORE_ROLLUP_LOGS_RE =
-  /vite-native-client\/dist\/esm\/client|node_modules\/\.vxrn\/react-native|react-native-prebuilt\/vendor|one\/dist/
-
-/**
- * This is not the config that you merge into the general Vite config.
- *
- * It is only for building native React Native bundles, while passed directly
- * to Vite's `createBuilder` function.
- *
- * Mainly used by the `getReactNativeBundle` function.
- */
-export async function getReactNativeBuildConfig(
-  options: Pick<VXRNOptionsFilled, 'root' | 'cacheDir'> & {
-    server: Pick<VXRNOptionsFilled['server'], 'url' | 'port'>
-    entries: Pick<VXRNOptionsFilled['entries'], 'native'>
-  },
-  internal: { mode?: 'dev' | 'prod'; assetsDest?: string } = { mode: 'dev' },
-  platform: 'ios' | 'android'
-) {
-  const {
-    root,
-    server: { port },
-  } = options
-  const { optimizeDeps } = getOptimizeDeps('build')
-
-  const { mode } = internal
-  const serverUrl = process.env.ONE_SERVER_URL || options.server.url
-
-  const defaultLogger = createLogger()
-
-  let disableLogging = false
-  const customLogger = {
-    ...defaultLogger,
-    info(msg, options) {
-      if (disableLogging) {
-        if (msg.includes(`built in`)) {
-          disableLogging = false
-          defaultLogger.info(msg, options)
-        }
-        return
-      }
-      // this is a super noisy and large log on most react native apps
-      // actually slows down compile-time significantly
-      if (msg.includes('modules transformed.')) {
-        disableLogging = true
-        // safeguard, re-enable after a beat
-        setTimeout(() => {
-          disableLogging = false
-        }, 2000)
-      }
-      defaultLogger.info(msg, options)
-    },
-  } satisfies Logger
-
-  // build app
-  let nativeBuildConfig = {
-    plugins: [
-      ...(globalThis.__vxrnAddNativePlugins || []),
-
-      ...(mode === 'dev' ? [nativeClientInjectPlugin()] : []),
-
-      {
-        name: 'native-special-case-resolver',
-        enforce: 'pre',
-
-        /**
-         * WORKAROUND: Since currently RN is considered as a "server" environment,
-         * and [in such environment](https://github.com/vitejs/vite/blob/v6.0.5/packages/vite/src/node/plugins/resolve.ts#L385-L389), Node.js built-in modules such as `buffer` are [forced to be externalized](https://github.com/vitejs/vite/blob/v6.0.5/packages/vite/src/node/plugins/resolve.ts#L420),
-         * even if there are available packages that can be resolved.
-         *
-         * But we also need RN to be a "server" environment so that other Node.js built-in modules we actually want to ignore [are externalized](https://github.com/vitejs/vite/blob/v6.0.5/packages/vite/src/node/plugins/resolve.ts#L428-L449) but not [polyfilled](https://github.com/vitejs/vite/blob/v6.0.5/packages/vite/src/node/plugins/resolve.ts#L462-L464), since currently we didn't filter out API routes in the RN bundle.
-         *
-         * Either doing one of the following can make this workaroud go away:
-         *
-         * 1. Filter out API routes in the RN bundle, so that we don't actually need to worry about Node.js built-ins used in the API routes not being externalized and ignored.
-         * 2. Make Vite support a new environment type that is not a "server" nor a "client" (browser).
-         */
-        async resolveId(id, _importer, options) {
-          // Skip during Vite's dependency optimization scan
-          // @see https://github.com/remix-run/remix/discussions/8917
-          // @ts-expect-error - scan is not in Vite's types but exists at runtime
-          if (options?.scan) return
-
-          // Only run this plugin for iOS and Android bundles
-          if (this.environment.name !== 'ios' && this.environment.name !== 'android') {
-            return
-          }
-
-          switch (id) {
-            case 'buffer': {
-              return findModulePath(join('buffer', 'index.js'), root)
-            }
-            case 'punycode': {
-              return findModulePath(join('punycode', 'punycode.es6.js'), root)
-            }
-          }
-        },
-      } satisfies Plugin,
-
-      {
-        name: 'one:native-no-external',
-        enforce: 'pre',
-        config() {
-          const noExternalsEnvConfig = {
-            consumer: 'server',
-            resolve: {
-              noExternal: true,
-            },
-          } as const
-
-          return {
-            environments: {
-              ios: noExternalsEnvConfig,
-              android: noExternalsEnvConfig,
-            },
-          }
-        },
-      } satisfies Plugin,
-
-      nodeResolve(),
-
-      await swapPrebuiltReactModules(options.cacheDir, {
-        // TODO: a better way to pass the mode (dev/prod) to PrebuiltReactModules
-        mode: internal.mode || 'dev',
-        platform,
-      }),
-
-      reactNativeDevAssetPlugin({
-        mode: internal.mode,
-        assetsDest: internal.assetsDest,
-        assetExts: DEFAULT_ASSET_EXTS,
-      }),
-
-      reactNativeCommonJsPlugin({
-        root,
-        port,
-        mode: 'build',
-      }),
-
-      // Avoid "failed to read input source map: failed to parse inline source map url" errors on certain packages, such as react-native-reanimated.
-      {
-        name: 'remove-inline-source-maps',
-        transform: {
-          order: 'pre',
-          async handler(code, id) {
-            if (!id.includes('react-native-reanimated')) {
-              return null
-            }
-
-            const inlineSourceMapIndex = code.lastIndexOf('//# sourceMappingURL=')
-            if (inlineSourceMapIndex >= 0) {
-              return code.slice(0, inlineSourceMapIndex).trimEnd()
-            }
-
-            return null
-          },
-        },
-      },
-
-      createVXRNCompilerPlugin({
-        mode: 'build',
-        environment: 'ios',
-      }),
-
-      {
-        // FIXME: This is a workaround to "tree-shake" things that will cause problems away before we have Rollup tree-shaking configured properly (https://github.com/onejs/one/pull/340).
-        name: 'vxrn:manual-tree-shake',
-        enforce: 'post',
-        async renderChunk(code, chunk, options, meta) {
-          if (chunk.name.endsWith('packages/one/dist/esm/createApp.native')) {
-            // What we want to do here is to "tree-shake" `require('react-scan/native')` away if it's value is not assigned to anything (i.e. not used).
-            // However, `react-scan/native` will be wrapped with a "commonjs-es-import" virtual module by the `@rollup/plugin-commonjs` plugin (Vite built-in) so that import won't have `react-scan/native` in it's name. The only thing for sure is that it's path will contain `_virtual`.
-            // As in `createApp.native` the only "side-effect modules" we are currently using are './polyfills-mobile' and './setup', which won't be wrapped with a virtual module, this won't remove unintended things for now.
-            return { code: code.replace(/^require\(.+_virtual.+\);/gm, '') }
-          }
-        },
-      } satisfies Plugin,
-    ].filter(Boolean),
-
-    appType: 'custom',
-    root,
-    clearScreen: false,
-    esbuild: false,
-
-    // the huge logs actually add quite a bit of time to build
-    customLogger,
-
-    optimizeDeps: {
-      ...optimizeDeps,
-      rolldownOptions: {
-        moduleTypes: { '.js': 'jsx' },
-      },
-    },
-
-    resolve: {
-      dedupe,
-
-      alias: {
-        'react-native-css-interop/jsx-dev-runtime': join(
-          resolvePath('react-native-css-interop'),
-          '..',
-          '..',
-          'dist',
-          'runtime',
-          'jsx-dev-runtime.js'
-        ),
-      },
-    },
-
-    mode: mode === 'dev' ? 'development' : 'production',
-
-    define: {
-      'process.env.NODE_ENV': mode === 'dev' ? `"development"` : `"production"`,
-      'process.env.ONE_SERVER_URL': JSON.stringify(serverUrl),
-    },
-
-    build: {
-      ssr: true,
-      minify: false,
-      rolldownOptions: {
-        input: options.entries.native,
-        treeshake: false,
-        preserveEntrySignatures: 'strict',
-        output: {
-          preserveModules: true,
-          format: 'cjs',
-        },
-
-        onwarn(message, warn) {
-          // Suppress "Module level directives cause errors when bundled" warnings
-          if (!process.env.DEBUG?.startsWith('vxrn')) {
-            if (
-              message.code === 'MODULE_LEVEL_DIRECTIVE' ||
-              message.code === 'INVALID_ANNOTATION' ||
-              message.code === 'MISSING_EXPORT' ||
-              message.code === 'SOURCEMAP_ERROR'
-            ) {
-              warnAboutSuppressingLogsOnce()
-              return
-            }
-          }
-          warn(message)
-        },
-
-        onLog(level, log, handler) {
-          if (!process.env.DEBUG?.startsWith('vxrn')) {
-            if (IGNORE_ROLLUP_LOGS_RE.test(log.message)) {
-              warnAboutSuppressingLogsOnce()
-              return
-            }
-          }
-
-          handler(level, log)
-        },
-      },
-    },
-  } satisfies InlineConfig
-
-  // TODO
-  // if (options.nativeConfig) {
-  //   nativeBuildConfig = mergeConfig(nativeBuildConfig, options.nativeConfig) as any
-  // }
-
-  // // this fixes my swap-react-native plugin not being called pre 😳
-  resolvedConfig = await resolveConfig(nativeBuildConfig, 'build')
-
-  // The `resolveConfig` function will load user's `vite.config.*` (by calling `loadConfigFromFile`).
-  // Here we do this to make user defined global constant replacements (https://vite.dev/config/shared-options#define) to take effect in RN.
-  // TODO: Ultimately, we should make all the user defined config options to take effect in RN.
-  if (resolvedConfig.define) {
-    nativeBuildConfig.define = {
-      ...nativeBuildConfig.define,
-      ...resolvedConfig.define,
-    }
-  }
-
-  return nativeBuildConfig satisfies UserConfig
-}
-
-let resolvedConfig: ResolvedConfig | null = null
-/** Use by things such as the reactNativeHMRPlugin to get the config after the initial build. */
-export function getReactNativeResolvedConfig() {
-  return resolvedConfig
-}
-
-let didWarnSuppressingLogs = false
-function warnAboutSuppressingLogsOnce() {
-  if (!didWarnSuppressingLogs) {
-    didWarnSuppressingLogs = true
-    // honestly they are harmdless so no need to warn, but it would be nice to do it once ever and then save that we did to disk
-    // console.warn(` [vxrn] Suppressing mostly harmless logs, enable with DEBUG=vxrn`)
-  }
-}
-
-/**
- * Recursively search for a path in node_modules directories until file system root is reached.
- */
-async function findModulePath(
-  modulePath: string,
-  currentDir: string,
-  triedPaths?: Array<string>
-): Promise<string | null> {
-  const currentModulePath = join(currentDir, 'node_modules', modulePath)
-
-  try {
-    await stat(currentModulePath)
-    return currentModulePath
-  } catch {
-    const parentDir = dirname(currentDir)
-
-    if (parentDir === currentDir) {
-      throw new Error(
-        `Could not find module in any of these paths: ${triedPaths?.join(', ')}`
-      )
-    }
-
-    return findModulePath(modulePath, parentDir, [
-      ...(triedPaths || []),
-      currentModulePath,
-    ])
-  }
-}

package/src/plugins/reactNativeHMRPlugin.ts

@@ -1,237 +0,0 @@
-import { transformSWC, transformSWCStripJSX } from '@vxrn/compiler'
-import { parse } from 'es-module-lexer'
-import FSExtra from 'fs-extra'
-import { createIdResolver, type ResolvedConfig, type Plugin, type ResolveFn } from 'vite'
-import { connectedNativeClients } from '../utils/connectedNativeClients'
-import { filterPluginsForNative } from '../utils/filterPluginsForNative'
-import type { VXRNOptionsFilled } from '../config/getOptionsFilled'
-import { entryRoot } from '../utils/getReactNativeBundle'
-import { getReactNativeResolvedConfig } from '../config/getReactNativeBuildConfig'
-import { getVitePath } from '../utils/getVitePath'
-import { hotUpdateCache } from '../utils/hotUpdateCache'
-import { isWithin } from '../utils/isWithin'
-import { conditions } from './reactNativeCommonJsPlugin'
-
-export function reactNativeHMRPlugin({
-  assetExts,
-  root: rootIn,
-  mode: modeIn,
-}: Partial<Pick<VXRNOptionsFilled, 'root' | 'mode'>> & { assetExts: string[] }) {
-  let idResolver: ReturnType<typeof createIdResolver>
-
-  const assetExtsRegExp = new RegExp(`\\.(${assetExts.join('|')})$`)
-  const isAssetFile = (id: string) => assetExtsRegExp.test(id)
-
-  let config: ResolvedConfig
-
-  return {
-    name: 'vxrn:native-hmr-transform',
-
-    configResolved(resolvedConfig) {
-      config = resolvedConfig
-    },
-
-    // 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, server }) {
-      const root = rootIn || config.root
-      const mode = modeIn || config.mode
-      const environment = server.environments.ios // TODO: android? How can we get the current environment here?
-
-      if (!idResolver) {
-        const rnConfig = getReactNativeResolvedConfig()
-        if (!rnConfig) {
-          // they are only running web app not native
-          return
-        }
-
-        // for some reason rnConfig.resolve.conditions is empty array
-        const resolverConfig = {
-          conditions,
-          mainFields: rnConfig.resolve.mainFields,
-          extensions: rnConfig.resolve.extensions,
-        }
-        idResolver = createIdResolver(rnConfig, resolverConfig)
-      }
-
-      try {
-        if (!isWithin(root, file)) {
-          return
-        }
-        if (!connectedNativeClients) {
-          return
-        }
-
-        const [module] = modules
-        if (!module) return
-
-        const fullId = module?.url || file
-
-        let id = fullId.replace(root, '').replace('/@id', '')
-        if (id[0] !== '/') {
-          id = `/${id}`
-        }
-
-        if (isAssetFile(id)) {
-          // TODO: Handle asset updates.
-          return
-        }
-
-        const code = await read()
-
-        // got a weird pre compiled file on startup
-        if (code.startsWith(`'use strict';`)) {
-          return
-        }
-
-        if (!code) {
-          return
-        }
-
-        let source = code
-
-        // we have to remove jsx before we can parse imports...
-        try {
-          // We create a new plugin container to ensure some plugins are filtered out,
-          // since `pluginContainer.getSortedPlugins()` is using a cached that we
-          // can't access thus can't make sure the cached plugins are filtered.
-          const pluginContainerForTransform: typeof environment.pluginContainer = new (
-            environment.pluginContainer.constructor as any
-          )(
-            environment,
-            filterPluginsForNative(environment.plugins, { isNative: true }).filter(
-              (p) =>
-                p.name !==
-                'vite:import-analysis' /* will cause `ERR_OUTDATED_OPTIMIZED_DEP` error */
-            ),
-            server.watcher
-          )
-
-          const transformResult = await pluginContainerForTransform.transform(
-            source,
-            `vxrn-swc-preprocess:${file}`
-          )
-
-          source = transformResult.code
-        } catch (e) {
-          console.warn(
-            `Error transforming source for HMR: ${e}. Retrying without plugins.`
-          )
-          source = (await transformSWCStripJSX(id, source))?.code || ''
-        }
-
-        // TODO: This is a hacky way to make HMR route files work, since if we don't run through the `clientTreeShakePlugin`, the source code might include imports to server side stuff (typically used inside `loader` functions) that will break the HMR update. Ideally, we should go though all user plugins for HMR updates.
-        const clientTreeShakePlugin = environment.plugins.find((p) =>
-          p.name.endsWith('client-tree-shake')
-        )
-        if (clientTreeShakePlugin) {
-          let clientTreeShakePluginTransformFn = (clientTreeShakePlugin as any).transform
-          if (typeof clientTreeShakePluginTransformFn === 'function') {
-            try {
-              clientTreeShakePluginTransformFn = clientTreeShakePluginTransformFn.bind({
-                environment,
-              })
-              const result = await clientTreeShakePluginTransformFn(source, id, {})
-              if (result) {
-                source = result.code
-              }
-            } catch (e) {
-              console.warn(`client-tree-shake failed on HMR: ${e}`)
-            }
-          }
-        }
-
-        const importsMap = {}
-
-        // 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)
-
-        let accumulatedSliceOffset = 0
-
-        for (const specifier of imports) {
-          const { n: importName, s: start } = specifier
-
-          if (importName) {
-            // TODO: maybe we only need `resolverWithPlugins`?
-            const resolver: ResolveFn = idResolver.bind(null, environment)
-            const resolverWithPlugins: ResolveFn = async (id, importer) => {
-              // Need this since `idResolver` will not run through user plugins, but we might need plugins like `vite-tsconfig-paths` to work if they are used
-              const resolvedIdData = await environment.pluginContainer.resolveId(
-                id,
-                importer
-              )
-              return resolvedIdData?.id
-            }
-
-            let id = await getVitePath(
-              entryRoot,
-              file,
-              importName,
-              resolver,
-              resolverWithPlugins
-            )
-            if (!id) {
-              console.warn('???')
-              continue
-            }
-
-            // It seems that it's not possible for Vite to use customized extensions for resolving imports from package.json entry (see: https://github.com/vitejs/vite/blob/v6.0.0-beta.2/packages/vite/src/node/plugins/resolve.ts#L1018),
-            // so we need to manually check if the file with `.native.js` extension exists, and use it if it does.
-            // @zetavg: We need to check how this is done during bundling, make sure it's consistent and probably merge the logic.
-            const nativePath = id.replace(/(.m?js)/, '.native.js')
-            try {
-              if (nativePath !== id && (await FSExtra.stat(nativePath)).isFile()) {
-                id = nativePath
-              }
-            } catch (e) {}
-
-            importsMap[id] = id.replace(/^(\.\.\/)+/, '')
-
-            // 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
-          }
-        }
-
-        // then we have to convert to commonjs..
-        source =
-          (
-            await transformSWC(file, source, {
-              mode: 'serve-cjs',
-              environment: 'ios',
-              production: mode === 'production',
-            })
-          )?.code || ''
-
-        if (!source) {
-          throw '❌ no source'
-        }
-
-        const hotUpdateSource = `exports = ((exports) => {
-          const require = createRequire("${id}", ${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`, id, hotUpdateSource)
-        }
-
-        hotUpdateCache.set(id, hotUpdateSource)
-      } catch (err) {
-        console.error(`Error processing hmr update:`, err)
-      }
-    },
-  } satisfies Plugin
-}

package/src/utils/filterPluginsForNative.ts

@@ -1,55 +0,0 @@
-import type { Plugin } from 'vite'
-
-/**
- * Filter out plugins and plugin hooks that are not needed for (or will even break) React Native.
- */
-export function filterPluginsForNative(
-  plugins: readonly Plugin[],
-  { isNative }: { isNative: boolean }
-): Plugin[] {
-  return plugins
-    .flatMap((p) => {
-      if (!p.name) {
-        return p
-      }
-
-      if (p.name.endsWith('-web-only')) {
-        return null
-      }
-
-      if (p.name === 'vite:reporter') {
-        return {
-          ...p,
-          // Printing out bundle details such as all the files that are included in the bundle and their sizes will cutter the terminal and also waste time.
-          writeBundle: undefined,
-        }
-      }
-
-      // Filter out unnecessary `renderChunk` hooks that are not needed for RN
-      if (
-        isNative /* See: https://github.com/universal-future/one/pull/23#issuecomment-2381402764 */ &&
-        p.renderChunk
-      ) {
-        if (
-          [
-            'vite:build-metadata', // Inserts asset and CSS related metadata which is not needed for RN (see: https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/plugins/metadata.ts#L10-L16)
-            'vite:worker', // See: https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/plugins/worker.ts#L383-L429
-            'vite:asset', // Seems not needed since with RN we have our own asset handling logic (see: https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/plugins/asset.ts#L214-L227)
-            'vite:css-post', // Seems not needed since we are not using CSS-in-JS for RN (see: https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/plugins/css.ts#L560-L830)
-            'vite:force-systemjs-wrap-complete', // Not needed since we are not using SystemJS (see: https://github.com/vitejs/vite/blob/v6.0.0-alpha.18/packages/vite/src/node/plugins/completeSystemWrap.ts#L12-L21)
-            // 'vite:build-import-analysis',
-            'vite:esbuild-transpile', // Seems to be ok to remove.
-            'vite:reporter',
-          ].includes(p.name)
-        ) {
-          return {
-            ...p,
-            renderChunk: undefined,
-          }
-        }
-      }
-
-      return p
-    })
-    .filter((p) => p !== null)
-}