@tamagui/static 2.0.0-rc.3 → 2.0.0-rc.31

package/src/extractor/bundleConfig.ts

@@ -1,15 +1,13 @@
 import generate from '@babel/generator'
 import traverse from '@babel/traverse'
 import * as t from '@babel/types'
-import { existsSync, readFileSync } from 'node:fs'
+import { createHash } from 'node:crypto'
+import { existsSync, readFileSync, unlinkSync } from 'node:fs'
 import { basename, dirname, extname, join, relative, sep } from 'node:path'
+import { pathToFileURL } from 'node:url'
 // @ts-ignore why
 import { Color, colorLog } from '@tamagui/cli-color'
-import {
-  createTamagui,
-  type StaticConfig,
-  type TamaguiInternalConfig,
-} from '@tamagui/web'
+import { type StaticConfig, type TamaguiInternalConfig } from '@tamagui/web'
 import esbuild from 'esbuild'
 import * as FS from 'fs-extra'
 import { readFile } from 'node:fs/promises'
@@ -19,6 +17,72 @@ import { babelParse } from './babelParse'
 import { esbuildLoaderConfig, esbundleTamaguiConfig } from './bundle'
 import { getTamaguiConfigPathFromOptionsConfig } from './getTamaguiConfigPathFromOptionsConfig'
 import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
+import { detectModuleFormat } from './detectModuleFormat'
+
+// track temp files for cleanup on exit
+const activeTempFiles = new Set<string>()
+
+function getDynamicEvalOutfile(name: string, format: 'esm' | 'cjs', contents: string) {
+  const ext = format === 'esm' ? 'mjs' : 'cjs'
+  const hash = createHash('sha1')
+    .update(name)
+    .update('\0')
+    .update(format)
+    .update('\0')
+    .update(contents)
+    .digest('hex')
+    .slice(0, 10)
+  return join(process.cwd(), '.tamagui', `dynamic-eval-${hash}-${basename(name)}.${ext}`)
+}
+
+function getEsbuildStdinLoader(filePath: string): esbuild.Loader {
+  if (filePath.endsWith('.tsx')) return 'tsx'
+  if (filePath.endsWith('.ts')) return 'ts'
+  if (filePath.endsWith('.jsx')) return 'jsx'
+  return 'js'
+}
+
+function resolvePackageEntry(packageName: string, format: 'esm' | 'cjs') {
+  if (format === 'cjs') {
+    return require.resolve(packageName)
+  }
+
+  const packageJsonPath = require.resolve(`${packageName}/package.json`)
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
+  const packageRoot = dirname(packageJsonPath)
+  const exportEntry = packageJson.exports?.['.']
+
+  const esmEntry =
+    exportEntry?.import ||
+    exportEntry?.module ||
+    exportEntry?.browser ||
+    packageJson.module
+
+  if (typeof esmEntry === 'string') {
+    return join(packageRoot, esmEntry)
+  }
+
+  return require.resolve(packageName)
+}
+
+function cleanupTempFiles() {
+  for (const f of activeTempFiles) {
+    try {
+      unlinkSync(f)
+    } catch {}
+  }
+  activeTempFiles.clear()
+}
+
+process.on('exit', cleanupTempFiles)
+process.on('SIGINT', () => {
+  cleanupTempFiles()
+  process.exit()
+})
+process.on('SIGTERM', () => {
+  cleanupTempFiles()
+  process.exit()
+})
 
 type NameToPaths = {
   [key: string]: Set<string>
@@ -55,12 +119,95 @@ const esbuildExtraOptions = {
   },
 }
 
-export const esbuildOptions = {
-  target: 'es2018',
+// plugin to handle ESM-only features when bundling to CJS
+const handleEsmFeaturesPlugin: esbuild.Plugin = {
+  name: 'handle-esm-features',
+  setup(build) {
+    // only apply transforms for CJS output - ESM supports these natively
+    const isCjs = build.initialOptions.format === 'cjs' || !build.initialOptions.format
+
+    build.onLoad({ filter: /\.(ts|tsx|js|jsx|mjs)$/ }, (args) => {
+      // skip if ESM output - import.meta and top-level await work natively
+      if (!isCjs) {
+        return null
+      }
+
+      // skip most node_modules
+      if (args.path.includes('node_modules') && !args.path.includes('@tamagui')) {
+        return null
+      }
+
+      let contents = readFileSync(args.path, 'utf8')
+      let modified = false
+
+      // transform import.meta.env -> process.env (Vite-style env vars)
+      if (contents.includes('import.meta.env')) {
+        contents = contents.replace(/import\.meta\.env/g, 'process.env')
+        modified = true
+      }
+
+      // transform import.meta.url -> "" (not needed for static extraction)
+      if (contents.includes('import.meta.url')) {
+        contents = contents.replace(/import\.meta\.url/g, '""')
+        modified = true
+      }
+
+      // transform import.meta.main -> false
+      if (contents.includes('import.meta.main')) {
+        contents = contents.replace(/import\.meta\.main/g, 'false')
+        modified = true
+      }
+
+      // stub files with top-level await - they're typically runtime-only
+      if (
+        /^\s*(?:const|let|var|export)\s+[^=]*=\s*await\b/m.test(contents) ||
+        /^await\s/m.test(contents)
+      ) {
+        if (process.env.DEBUG?.startsWith('tamagui')) {
+          console.info(`[tamagui] stubbing file with top-level await: ${args.path}`)
+        }
+        return {
+          contents: `// stubbed - contains top-level await\nmodule.exports = {}`,
+          loader: 'js',
+        }
+      }
+
+      if (modified) {
+        return {
+          contents,
+          loader: args.path.endsWith('.tsx')
+            ? 'tsx'
+            : args.path.endsWith('.ts')
+              ? 'ts'
+              : args.path.endsWith('.jsx')
+                ? 'jsx'
+                : 'js',
+        }
+      }
+
+      return null
+    })
+  },
+}
+
+// base options for transformSync (no plugins)
+const esbuildTransformOptions = {
+  target: 'es2022',
   format: 'cjs',
   jsx: 'automatic',
   platform: 'node',
   ...esbuildExtraOptions,
+} satisfies esbuild.TransformOptions
+
+// options for buildSync - NO plugins (buildSync doesn't support plugins)
+export const esbuildOptions = {
+  ...esbuildTransformOptions,
+} satisfies esbuild.BuildOptions
+
+// options for async build (with plugins)
+export const esbuildOptionsWithPlugins = {
+  ...esbuildTransformOptions,
+  plugins: [handleEsmFeaturesPlugin],
 } satisfies esbuild.BuildOptions
 
 export type BundledConfig = Exclude<Awaited<ReturnType<typeof bundleConfig>>, undefined>
@@ -122,17 +269,31 @@ export async function bundleConfig(props: TamaguiOptions) {
       ? getTamaguiConfigPathFromOptionsConfig(props.config)
       : ''
     const tmpDir = join(process.cwd(), '.tamagui')
-    const configOutPath = join(tmpDir, `tamagui.config.cjs`)
+    // detect module format from config entry point
+    const configFormat = configEntry ? detectModuleFormat(configEntry) : 'cjs'
+    const configExt = configFormat === 'esm' ? '.mjs' : '.cjs'
+    const configOutPath = join(tmpDir, `tamagui.config${configExt}`)
     const baseComponents = (props.components || []).filter((x) => x !== '@tamagui/core')
-    const componentOutPaths = baseComponents.map((componentModule) =>
-      join(
+    // detect format per component module
+    const componentFormats: Array<'esm' | 'cjs'> = baseComponents.map((mod) => {
+      try {
+        const pkgJson = require.resolve(mod + '/package.json')
+        const pkg = JSON.parse(readFileSync(pkgJson, 'utf-8'))
+        return pkg.type === 'module' ? 'esm' : 'cjs'
+      } catch {
+        return 'cjs'
+      }
+    })
+    const componentOutPaths = baseComponents.map((componentModule, i) => {
+      const ext = componentFormats[i] === 'esm' ? '.mjs' : '.cjs'
+      return join(
         tmpDir,
         `${componentModule
           .split(sep)
           .join('-')
-          .replace(/[^a-z0-9]+/gi, '')}-components.config.cjs`
+          .replace(/[^a-z0-9]+/gi, '')}-components.config${ext}`
       )
-    )
+    })
 
     if (
       process.env.NODE_ENV === 'development' &&
@@ -141,7 +302,29 @@ export async function bundleConfig(props: TamaguiOptions) {
       console.info(`Building config entry`, configEntry)
     }
 
-    if (!props.disableInitialBuild) {
+    // check if ALL output files (config + components) already exist and are recent
+    // (built by another worker) - this prevents duplicate builds across worker threads
+    // we must check ALL files, not just the config, to avoid a race where another
+    // worker has written the config but not yet finished writing component files
+    let shouldBuild = !props.disableInitialBuild
+    if (shouldBuild && props.config) {
+      const allOutFiles = [configOutPath, ...componentOutPaths]
+      try {
+        const stats = await Promise.all(
+          allOutFiles.map((f) => FS.stat(f).catch(() => null))
+        )
+        const allExistAndRecent = stats.every(
+          (s) => s !== null && Date.now() - s.mtimeMs < 3000
+        )
+        if (allExistAndRecent) {
+          shouldBuild = false
+        }
+      } catch {
+        // something went wrong checking files, just build
+      }
+    }
+
+    if (shouldBuild) {
       // build them to node-compat versions
       try {
         await FS.ensureDir(tmpDir)
@@ -158,7 +341,8 @@ export async function bundleConfig(props: TamaguiOptions) {
                 entryPoints: [configEntry],
                 external,
                 outfile: configOutPath,
-                target: 'node20',
+                target: 'node24',
+                format: configFormat,
                 ...esbuildExtraOptions,
               },
               props.platform || 'web'
@@ -171,7 +355,8 @@ export async function bundleConfig(props: TamaguiOptions) {
               resolvePlatformSpecificEntries: true,
               external,
               outfile: componentOutPaths[i],
-              target: 'node20',
+              target: 'node24',
+              format: componentFormats[i],
               ...esbuildExtraOptions,
             },
             props.platform || 'web'
@@ -201,25 +386,32 @@ export async function bundleConfig(props: TamaguiOptions) {
       }
     }
 
-    let out
-    const { unregister } = registerRequire(props.platform || 'web')
-    try {
-      if (hasBundledOnce) {
-        // this did cause mini-css-extract plugin to freak out
-        // clear cache to get new files
-        for (const key in require.cache) {
-          // avoid clearing core/web it seems to break things
-          if (!/(core|web)[/\\]dist/.test(key)) {
-            delete require.cache[key]
-          }
+    // clear specific output file caches so we pick up the fresh (or newly discovered) build
+    // only clear the built output files - not all require.cache entries, since that breaks
+    // external requires like @tamagui/config/v3 that are externalized in the bundled CJS
+    if (hasBundledOnce) {
+      try {
+        delete require.cache[require.resolve(configOutPath)]
+      } catch {
+        // file may not exist yet
+      }
+      for (const p of componentOutPaths) {
+        try {
+          delete require.cache[require.resolve(p)]
+        } catch {
+          // file may not exist yet
         }
-      } else {
-        hasBundledOnce = true
       }
+    } else {
+      hasBundledOnce = true
+    }
 
+    let out: any
+    if (configFormat === 'esm') {
+      // use file:// URL for proper ESM resolution
+      out = await import(pathToFileURL(configOutPath).href)
+    } else {
       out = require(configOutPath)
-    } finally {
-      unregister()
     }
 
     // try and find .config, even if on .default
@@ -232,6 +424,13 @@ export async function bundleConfig(props: TamaguiOptions) {
       throw new Error(`No config: ${config}`)
     }
 
+    // check for ProxyWorm - indicates a module loading error
+    if (config._isProxyWorm) {
+      throw new Error(
+        `Got a proxied config - likely a module loading error. Set DEBUG=tamagui for details.`
+      )
+    }
+
     loadedConfig = config
 
     if (!config.parsed) {
@@ -244,7 +443,7 @@ export async function bundleConfig(props: TamaguiOptions) {
       await writeTamaguiCSS(props.outputCSS, config)
     }
 
-    let components = loadComponents({
+    let components = await loadComponents({
       ...props,
       components: componentOutPaths,
     })
@@ -322,14 +521,20 @@ export async function writeTamaguiCSS(outputCSS: string, config: TamaguiInternal
   }
 }
 
-export function loadComponents(props: TamaguiOptions, forceExports = false) {
-  const coreComponents = getCoreComponents(props)
-  const otherComponents = loadComponentsInner(props, forceExports)
+export async function loadComponents(props: TamaguiOptions, forceExports = false) {
+  const coreComponents = getCoreComponentsSync(props)
+  const otherComponents = await loadComponentsInner(props, forceExports)
   return [...coreComponents, ...(otherComponents || [])]
 }
 
-function getCoreComponents(props: TamaguiOptions) {
-  const loaded = loadComponentsInner({
+export function loadComponentsSync(props: TamaguiOptions, forceExports = false) {
+  const coreComponents = getCoreComponentsSync(props)
+  const otherComponents = loadComponentsInnerSync(props, forceExports)
+  return [...coreComponents, ...(otherComponents || [])]
+}
+
+function getCoreComponentsSync(props: TamaguiOptions) {
+  const loaded = loadComponentsInnerSync({
     ...props,
     components: ['@tamagui/core'],
   })
@@ -347,13 +552,172 @@ function getCoreComponents(props: TamaguiOptions) {
   ]
 }
 
-export function loadComponentsInner(
+export async function loadComponentsInner(
+  props: TamaguiOptions,
+  forceExports = false
+): Promise<null | LoadedComponents[]> {
+  const componentsModules = props.components || []
+
+  const key = componentsModules.join('\0')
+
+  if (!forceExports && cacheComponents[key]) {
+    return cacheComponents[key]
+  }
+
+  const { unregister } = registerRequire(props.platform || 'web', {
+    proxyWormImports: forceExports,
+  })
+
+  try {
+    const results: LoadedComponents[] = []
+
+    for (const name of componentsModules) {
+      const extension = extname(name)
+      const isLocal = Boolean(extension)
+      const isDynamic = isLocal && forceExports
+      const format = isLocal ? detectModuleFormat(name) : ('cjs' as const)
+
+      const fileContents = isDynamic ? readFileSync(name, 'utf-8') : ''
+      let loadModule = name
+      let writtenContents = fileContents
+      let didBabel = false
+
+      const attemptLoad = async ({ forceExports = false } = {}) => {
+        if (isDynamic) {
+          writtenContents = forceExports
+            ? transformAddExports(babelParse(esbuildit(fileContents, 'modern'), name))
+            : fileContents
+          loadModule = getDynamicEvalOutfile(name, format, writtenContents)
+
+          FS.ensureDirSync(dirname(loadModule))
+          activeTempFiles.add(loadModule)
+
+          await esbuild.build({
+            ...esbuildOptionsWithPlugins,
+            format,
+            outfile: loadModule,
+            stdin: {
+              contents: writtenContents,
+              resolveDir: dirname(name),
+              sourcefile: name,
+              loader: getEsbuildStdinLoader(name),
+            },
+            alias: {
+              'react-native': resolvePackageEntry(
+                '@tamagui/react-native-web-lite',
+                format
+              ),
+              '@tamagui/react-native-web-lite': resolvePackageEntry(
+                '@tamagui/react-native-web-lite',
+                format
+              ),
+              '@tamagui/react-native-web-internals': resolvePackageEntry(
+                '@tamagui/react-native-web-internals',
+                format
+              ),
+            },
+            bundle: true,
+            packages: 'external',
+            allowOverwrite: true,
+            sourcemap: false,
+            loader: esbuildLoaderConfig,
+          })
+        }
+
+        if (process.env.DEBUG === 'tamagui') {
+          console.info(`loadModule`, loadModule, format)
+        }
+
+        let moduleResult: any
+        if (format === 'esm') {
+          // use file:// URL for proper ESM resolution
+          moduleResult = await import(pathToFileURL(loadModule).href)
+        } else {
+          moduleResult = require(loadModule)
+        }
+
+        if (!forceExports) {
+          setRequireResult(name, moduleResult)
+        }
+
+        const nameToInfo = getComponentStaticConfigByName(
+          name,
+          interopDefaultExport(moduleResult)
+        )
+
+        return {
+          moduleName: name,
+          nameToInfo,
+        }
+      }
+
+      const dispose = () => {
+        if (isDynamic) {
+          FS.removeSync(loadModule)
+          activeTempFiles.delete(loadModule)
+        }
+      }
+
+      let loaded: LoadedComponents | LoadedComponents[] | undefined
+
+      try {
+        loaded = await attemptLoad({ forceExports: true })
+        didBabel = true
+      } catch (err) {
+        console.info('babel err', err, writtenContents)
+        writtenContents = fileContents
+        if (process.env.DEBUG?.startsWith('tamagui')) {
+          console.info(`Error parsing babel likely`, err)
+        }
+
+        try {
+          loaded = await attemptLoad({ forceExports: false })
+        } catch (err2) {
+          if (process.env.TAMAGUI_ENABLE_WARN_DYNAMIC_LOAD) {
+            console.info(
+              `\nTamagui attempted but failed to dynamically optimize components in:\n  ${name}\n`
+            )
+            console.info(err2)
+            console.info(
+              `At: ${loadModule}`,
+              `\ndidBabel: ${didBabel}`,
+              `\nIn:`,
+              writtenContents,
+              `\nisDynamic: `,
+              isDynamic
+            )
+          }
+          loaded = []
+        }
+      } finally {
+        dispose()
+      }
+
+      if (Array.isArray(loaded)) {
+        results.push(...loaded)
+      } else if (loaded) {
+        results.push(loaded)
+      }
+    }
+
+    cacheComponents[key] = results
+    return results
+  } catch (err: any) {
+    console.info(`Tamagui error bundling components`, err.message, err.stack)
+    return null
+  } finally {
+    unregister()
+  }
+}
+
+// sync version - uses cjs format for buildSync (no plugin support)
+export function loadComponentsInnerSync(
   props: TamaguiOptions,
   forceExports = false
 ): null | LoadedComponents[] {
   const componentsModules = props.components || []
 
-  const key = componentsModules.join('')
+  const key = componentsModules.join('\0')
 
   if (!forceExports && cacheComponents[key]) {
     return cacheComponents[key]
@@ -370,32 +734,46 @@ export function loadComponentsInner(
       const isDynamic = isLocal && forceExports
 
       const fileContents = isDynamic ? readFileSync(name, 'utf-8') : ''
-      const loadModule = isDynamic
-        ? join(dirname(name), `.tamagui-dynamic-eval-${basename(name)}.tsx`)
-        : name
+      let loadModule = name
       let writtenContents = fileContents
       let didBabel = false
 
       function attemptLoad({ forceExports = false } = {}) {
-        // need to write to tsx to enable reading it properly (:/ esbuild-register)
         if (isDynamic) {
           writtenContents = forceExports
             ? transformAddExports(babelParse(esbuildit(fileContents, 'modern'), name))
             : fileContents
+          loadModule = getDynamicEvalOutfile(name, 'cjs', writtenContents)
 
-          FS.writeFileSync(loadModule, writtenContents)
+          FS.ensureDirSync(dirname(loadModule))
+          activeTempFiles.add(loadModule)
 
           esbuild.buildSync({
             ...esbuildOptions,
-            entryPoints: [loadModule],
             outfile: loadModule,
+            stdin: {
+              contents: writtenContents,
+              resolveDir: dirname(name),
+              sourcefile: name,
+              loader: getEsbuildStdinLoader(name),
+            },
             alias: {
-              'react-native': require.resolve('@tamagui/react-native-web-lite'),
+              'react-native': resolvePackageEntry(
+                '@tamagui/react-native-web-lite',
+                'esm'
+              ),
+              '@tamagui/react-native-web-lite': resolvePackageEntry(
+                '@tamagui/react-native-web-lite',
+                'esm'
+              ),
+              '@tamagui/react-native-web-internals': resolvePackageEntry(
+                '@tamagui/react-native-web-internals',
+                'esm'
+              ),
             },
             bundle: true,
             packages: 'external',
             allowOverwrite: true,
-            // logLevel: 'silent',
             sourcemap: false,
             loader: esbuildLoaderConfig,
           })
@@ -423,18 +801,18 @@ export function loadComponentsInner(
       }
 
       const dispose = () => {
-        isDynamic && FS.removeSync(loadModule)
+        if (isDynamic) {
+          FS.removeSync(loadModule)
+          activeTempFiles.delete(loadModule)
+        }
       }
 
       try {
-        const res = attemptLoad({
-          forceExports: true,
-        })
+        const res = attemptLoad({ forceExports: true })
         didBabel = true
         return res
       } catch (err) {
         console.info('babel err', err, writtenContents)
-        // ok
         writtenContents = fileContents
         if (process.env.DEBUG?.startsWith('tamagui')) {
           console.info(`Error parsing babel likely`, err)
@@ -444,16 +822,12 @@ export function loadComponentsInner(
       }
 
       try {
-        return attemptLoad({
-          forceExports: false,
-        })
+        return attemptLoad({ forceExports: false })
       } catch (err) {
         if (process.env.TAMAGUI_ENABLE_WARN_DYNAMIC_LOAD) {
-          console.info(`
-
-Tamagui attempted but failed to dynamically optimize components in:
-  ${name}
-`)
+          console.info(
+            `\nTamagui attempted but failed to dynamically optimize components in:\n  ${name}\n`
+          )
           console.info(err)
           console.info(
             `At: ${loadModule}`,
@@ -481,7 +855,7 @@ Tamagui attempted but failed to dynamically optimize components in:
 
 const esbuildit = (src: string, target?: 'modern') => {
   return esbuild.transformSync(src, {
-    ...esbuildOptions,
+    ...esbuildTransformOptions,
     ...(target === 'modern' && {
       target: 'es2022',
       jsx: 'automatic',