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

package/src/checkDeps.ts

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { existsSync, readFileSync, readdirSync, realpathSync } from 'node:fs'
+import { join, relative } from 'node:path'
 import { CDVC } from './check-dep-versions'
 
 export enum DEPENDENCY_TYPE {
@@ -21,113 +21,350 @@ export type Options = {
   ignorePathPattern?: readonly string[]
 }
 
-type PackageJson = {
-  dependencies?: Record<string, string>
-  devDependencies?: Record<string, string>
-  optionalDependencies?: Record<string, string>
-}
+// critical packages that must not be duplicated at runtime
+const CRITICAL_PACKAGES = ['@tamagui/web', '@tamagui/core', 'tamagui']
 
 /**
- * Checks if @tamagui/* packages within a single package.json have mismatched versions.
- * Returns a summary of mismatches or empty string if all versions match.
+ * Walks node_modules to find duplicate physical copies of critical tamagui packages.
+ * Detects nested node_modules that would cause multiple runtime instances.
  */
-function checkTamaguiPackageVersions(root: string): string {
-  const packageJsonPath = join(root, 'package.json')
-  if (!existsSync(packageJsonPath)) {
-    return ''
+function checkDuplicateInstalls(root: string): string {
+  const nodeModules = join(root, 'node_modules')
+  if (!existsSync(nodeModules)) return ''
+
+  const duplicates = new Map<string, string[]>()
+
+  for (const pkg of CRITICAL_PACKAGES) {
+    const locations = findAllInstances(nodeModules, pkg)
+    if (locations.length > 1) {
+      // resolve symlinks to find truly distinct copies
+      const realPaths = new Set<string>()
+      const distinctLocations: string[] = []
+      for (const loc of locations) {
+        try {
+          const real = realpathSync(loc)
+          if (!realPaths.has(real)) {
+            realPaths.add(real)
+            distinctLocations.push(relative(root, loc))
+          }
+        } catch {
+          distinctLocations.push(relative(root, loc))
+        }
+      }
+      if (distinctLocations.length > 1) {
+        duplicates.set(pkg, distinctLocations)
+      }
+    }
   }
 
-  const packageJson: PackageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
+  if (duplicates.size === 0) return ''
 
-  // Collect all @tamagui/* dependencies and their versions
-  const tamaguiDeps: { name: string; version: string }[] = []
+  const lines: string[] = [
+    'Found duplicate tamagui installations in node_modules:',
+    '',
+    'This causes multiple runtime instances, which breaks theme/config detection.',
+    '',
+  ]
 
-  const allDeps = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies,
-    ...packageJson.optionalDependencies,
+  for (const [pkg, locations] of duplicates) {
+    // read versions from each location
+    lines.push(`  ${pkg}:`)
+    for (const loc of locations) {
+      const pkgJsonPath = join(root, loc, 'package.json')
+      let version = '?'
+      try {
+        version = JSON.parse(readFileSync(pkgJsonPath, 'utf8')).version
+      } catch {}
+      lines.push(`    ${version} at ${loc}`)
+    }
+    lines.push('')
   }
 
-  for (const [name, version] of Object.entries(allDeps)) {
-    if (name === 'tamagui' || name.startsWith('@tamagui/')) {
-      tamaguiDeps.push({ name, version })
-    }
+  lines.push("Fix: run your package manager's dedupe command:")
+  lines.push('  bun install  (bun auto-dedupes)')
+  lines.push('  npx yarn-deduplicate && yarn install')
+  lines.push('  npm dedupe')
+  lines.push('')
+  lines.push("If that doesn't help, delete node_modules and lockfile, then reinstall.")
+
+  return lines.join('\n')
+}
+
+/**
+ * Recursively find all instances of a package in node_modules.
+ * Handles both scoped (@tamagui/web) and unscoped (tamagui) packages.
+ */
+function findAllInstances(
+  nodeModulesDir: string,
+  packageName: string,
+  found: string[] = [],
+  depth = 0
+): string[] {
+  // don't go too deep, typical hoisting issues show up within a few levels
+  if (depth > 4 || !existsSync(nodeModulesDir)) return found
+
+  const pkgDir = join(nodeModulesDir, ...packageName.split('/'))
+  if (existsSync(join(pkgDir, 'package.json'))) {
+    found.push(pkgDir)
   }
 
-  if (tamaguiDeps.length <= 1) {
+  // scan nested node_modules inside direct children
+  try {
+    const entries = readdirSync(nodeModulesDir)
+    for (const entry of entries) {
+      if (entry.startsWith('.')) continue
+
+      if (entry.startsWith('@')) {
+        // scoped packages have another level
+        const scopeDir = join(nodeModulesDir, entry)
+        try {
+          const scopeEntries = readdirSync(scopeDir)
+          for (const scopeEntry of scopeEntries) {
+            const nested = join(scopeDir, scopeEntry, 'node_modules')
+            if (existsSync(nested)) {
+              findAllInstances(nested, packageName, found, depth + 1)
+            }
+          }
+        } catch {}
+      } else {
+        const nested = join(nodeModulesDir, entry, 'node_modules')
+        if (existsSync(nested)) {
+          findAllInstances(nested, packageName, found, depth + 1)
+        }
+      }
+    }
+  } catch {}
+
+  return found
+}
+
+/**
+ * Checks lockfile for multiple resolved versions of tamagui packages.
+ * Supports bun.lock, yarn.lock, and package-lock.json.
+ */
+function checkLockfileDuplicates(root: string): string {
+  const bunLock = join(root, 'bun.lock')
+  const yarnLock = join(root, 'yarn.lock')
+  const npmLock = join(root, 'package-lock.json')
+
+  if (existsSync(bunLock)) return checkBunLockDuplicates(bunLock)
+  if (existsSync(yarnLock)) return checkYarnLockDuplicates(yarnLock)
+  if (existsSync(npmLock)) return checkNpmLockDuplicates(npmLock)
+
+  return ''
+}
+
+function checkBunLockDuplicates(lockPath: string): string {
+  try {
+    const content = readFileSync(lockPath, 'utf8')
+    const duplicates = new Map<string, Set<string>>()
+    const criticalSet = new Set(CRITICAL_PACKAGES)
+
+    // match patterns like "@tamagui/web@version" or "tamagui@version" in resolved entries
+    // bun.lock format: "package@version": ["resolved-url", ...]
+    const packagePattern = /["'](@tamagui\/[\w-]+|tamagui)@([^"'\s,]+)["']/g
+    let match: RegExpExecArray | null
+    while ((match = packagePattern.exec(content)) !== null) {
+      const name = match[1]
+      const version = match[2]
+      if (version.startsWith('workspace:')) continue
+      // only flag critical packages — leaf packages can safely differ
+      if (!criticalSet.has(name)) continue
+      if (!duplicates.has(name)) duplicates.set(name, new Set())
+      duplicates.get(name)!.add(version)
+    }
+
+    return formatLockfileDuplicates(duplicates, 'bun.lock')
+  } catch {
     return ''
   }
+}
 
-  // Normalize versions by removing prefixes like ^, ~, >=, etc.
-  const normalizeVersion = (v: string): string => {
-    // Handle workspace: protocol
-    if (v.startsWith('workspace:')) {
-      return v
+function checkYarnLockDuplicates(lockPath: string): string {
+  try {
+    const content = readFileSync(lockPath, 'utf8')
+    const duplicates = new Map<string, Set<string>>()
+    const criticalSet = new Set(CRITICAL_PACKAGES)
+
+    // yarn.lock format:
+    //   "@tamagui/web@^1.0.0":
+    //     version "1.0.1"
+    const entryPattern = /^"?(@tamagui\/[\w-]+|tamagui)@[^":\n]+[":]?\s*$/gm
+    const versionPattern = /^\s+version\s+"([^"]+)"/gm
+
+    let entryMatch: RegExpExecArray | null
+    while ((entryMatch = entryPattern.exec(content)) !== null) {
+      const name = entryMatch[1]
+      if (!criticalSet.has(name)) continue
+      versionPattern.lastIndex = entryMatch.index
+      const verMatch = versionPattern.exec(content)
+      if (verMatch) {
+        if (!duplicates.has(name)) duplicates.set(name, new Set())
+        duplicates.get(name)!.add(verMatch[1])
+      }
     }
-    return v.replace(/^[\^~>=<]+/, '')
+
+    return formatLockfileDuplicates(duplicates, 'yarn.lock')
+  } catch {
+    return ''
   }
+}
+
+function checkNpmLockDuplicates(lockPath: string): string {
+  try {
+    const lock = JSON.parse(readFileSync(lockPath, 'utf8'))
+    const duplicates = new Map<string, Set<string>>()
+    const criticalSet = new Set(CRITICAL_PACKAGES)
 
-  // Group by normalized version
-  const versionGroups = new Map<string, string[]>()
-  for (const dep of tamaguiDeps) {
-    const normalized = normalizeVersion(dep.version)
-    if (!versionGroups.has(normalized)) {
-      versionGroups.set(normalized, [])
+    // package-lock.json v2/v3 uses "packages" map with path keys
+    const packages = lock.packages || {}
+    for (const [path, info] of Object.entries(packages) as [string, any][]) {
+      if (!path) continue // skip root
+      const name = info.name || path.split('node_modules/').pop()
+      if (!name) continue
+      if (!criticalSet.has(name)) continue
+      const version = info.version
+      if (version) {
+        if (!duplicates.has(name)) duplicates.set(name, new Set())
+        duplicates.get(name)!.add(version)
+      }
     }
-    versionGroups.get(normalized)!.push(`${dep.name}@${dep.version}`)
-  }
 
-  // If all packages have the same normalized version, no mismatch
-  if (versionGroups.size <= 1) {
+    return formatLockfileDuplicates(duplicates, 'package-lock.json')
+  } catch {
     return ''
   }
+}
 
-  // Build mismatch summary
-  const lines: string[] = [
-    'Found mismatched @tamagui/* package versions in package.json:',
-    '',
-  ]
-
-  for (const [version, packages] of versionGroups) {
-    lines.push(`  ${version}:`)
-    for (const pkg of packages.sort()) {
-      lines.push(`    - ${pkg}`)
+function formatLockfileDuplicates(
+  duplicates: Map<string, Set<string>>,
+  lockfileName: string
+): string {
+  // filter to only packages with multiple versions
+  const multiVersion = new Map<string, string[]>()
+  for (const [name, versions] of duplicates) {
+    if (versions.size > 1) {
+      multiVersion.set(name, [...versions].sort())
     }
   }
 
+  if (multiVersion.size === 0) return ''
+
+  const lines: string[] = [`Found multiple resolved versions in ${lockfileName}:`, '']
+
+  for (const [name, versions] of multiVersion) {
+    lines.push(`  ${name}: ${versions.join(', ')}`)
+  }
+
   lines.push('')
   lines.push(
-    'All @tamagui/* packages should use the same version to avoid runtime issues.'
+    'Multiple versions cause duplicate runtime instances, breaking config/theme detection.'
   )
-  lines.push('Run `npx tamagui upgrade` to sync all packages to the latest version.')
+  lines.push('Fix: ensure all tamagui packages use the same version range, then dedupe.')
 
   return lines.join('\n')
 }
 
+/**
+ * Checks that a tamagui config file exists in common locations.
+ */
+function checkConfigExists(root: string): string {
+  const configNames = [
+    'tamagui.config.ts',
+    'tamagui.config.tsx',
+    'tamagui.config.js',
+    'tamagui.config.mjs',
+    'tamagui.config.cjs',
+  ]
+
+  const searchDirs = [root, join(root, 'src'), join(root, 'app'), join(root, 'config')]
+
+  for (const dir of searchDirs) {
+    for (const name of configNames) {
+      if (existsSync(join(dir, name))) {
+        return ''
+      }
+    }
+  }
+
+  // check if tamagui.build.ts references a config path
+  const buildConfigNames = [
+    'tamagui.build.ts',
+    'tamagui.build.js',
+    'tamagui.build.mjs',
+    'tamagui.build.cjs',
+  ]
+  for (const name of buildConfigNames) {
+    const buildPath = join(root, name)
+    if (existsSync(buildPath)) {
+      try {
+        const content = readFileSync(buildPath, 'utf8')
+        const match = content.match(/config\s*:\s*['"`]([^'"`]+)['"`]/)
+        if (match) {
+          const configPath = join(root, match[1])
+          if (existsSync(configPath)) return ''
+        }
+      } catch {}
+    }
+  }
+
+  // also check if there's a tamagui config referenced in package.json
+  const pkgJsonPath = join(root, 'package.json')
+  if (existsSync(pkgJsonPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf8'))
+      if (pkg.tamagui?.config) {
+        const configPath = join(root, pkg.tamagui.config)
+        if (existsSync(configPath)) return ''
+      }
+    } catch {}
+  }
+
+  // check if this is a monorepo root (has workspaces) - skip config check for root
+  if (existsSync(pkgJsonPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf8'))
+      if (pkg.workspaces) return ''
+    } catch {}
+  }
+
+  return [
+    'No tamagui.config file found.',
+    '',
+    'Tamagui requires a config file (e.g. tamagui.config.ts) that calls createTamagui().',
+    'Without it, components will throw "Can\'t find Tamagui configuration" at runtime.',
+    '',
+    'See: https://tamagui.dev/docs/core/configuration',
+  ].join('\n')
+}
+
 export async function checkDeps(root: string) {
-  // Check for @tamagui/* version mismatches within the same package.json
-  const tamaguiMismatchSummary = checkTamaguiPackageVersions(root)
+  const issues: string[] = []
 
-  // Check for dependency version mismatches across workspace packages
+  // 1. check for dependency version mismatches across workspace packages
   const workspaceMismatchSummary = new CDVC(root).toMismatchSummary()
+  if (workspaceMismatchSummary) issues.push(workspaceMismatchSummary)
+
+  // 2. check lockfile for duplicate resolved versions of critical packages
+  const lockfileSummary = checkLockfileDuplicates(root)
+  if (lockfileSummary) issues.push(lockfileSummary)
 
-  const hasTamaguiMismatch = Boolean(tamaguiMismatchSummary)
-  const hasWorkspaceMismatch = Boolean(workspaceMismatchSummary)
+  // 3. check for duplicate physical installations in node_modules
+  const duplicatesSummary = checkDuplicateInstalls(root)
+  if (duplicatesSummary) issues.push(duplicatesSummary)
 
-  if (!hasTamaguiMismatch && !hasWorkspaceMismatch) {
+  // 4. check that a config file exists
+  const configSummary = checkConfigExists(root)
+  if (configSummary) issues.push(configSummary)
+
+  if (issues.length === 0) {
     console.info(`Tamagui dependencies look good ✅`)
     process.exit(0)
   }
 
-  if (hasTamaguiMismatch) {
-    console.error(tamaguiMismatchSummary)
-  }
-
-  if (hasWorkspaceMismatch) {
-    if (hasTamaguiMismatch) {
-      console.error('') // Add spacing between error sections
-    }
-    console.error(workspaceMismatchSummary)
+  for (let i = 0; i < issues.length; i++) {
+    if (i > 0) console.error('')
+    console.error(issues[i])
   }
 
   process.exit(1)

package/src/exports.ts

@@ -11,4 +11,5 @@ export * from './extractor/loadTamagui'
 export * from './extractor/watchTamaguiConfig'
 export * from './extractor/createLogger'
 export * from './registerRequire'
+export { detectModuleFormat, clearFormatCache } from './extractor/detectModuleFormat'
 export * from './getPragmaOptions'

package/src/extractor/bundle.ts

@@ -1,7 +1,8 @@
-import { basename, dirname, join } from 'node:path'
+import { readFileSync } from 'node:fs'
 import esbuild from 'esbuild'
 import * as FS from 'fs-extra'
 import type { TamaguiPlatform } from '../types'
+import { detectModuleFormat } from './detectModuleFormat'
 import { esbuildAliasPlugin } from './esbuildAliasPlugin'
 import { resolveWebOrNativeSpecificEntry } from './loadTamagui'
 import { TsconfigPathsPlugin } from './esbuildTsconfigPaths'
@@ -63,11 +64,23 @@ function getESBuildConfig(
     ? entryPoints
     : entryPoints.map(resolveWebOrNativeSpecificEntry)
 
+  // detect format from entry points if not explicitly provided by caller
+  const detectedFormat = options.format || detectEntryFormat(resolvedEntryPoints[0])
+
   const res: esbuild.BuildOptions = {
     bundle: true,
     entryPoints: resolvedEntryPoints,
-    format: 'cjs',
-    target: 'node20',
+    format: detectedFormat,
+    // for ESM: prefer "module" field for resolution, add require() shim for bundled CJS deps
+    ...(detectedFormat === 'esm'
+      ? {
+          mainFields: ['module', 'main'],
+          banner: {
+            js: 'import { createRequire as __cr } from "module"; const require = __cr(import.meta.url);',
+          },
+        }
+      : {}),
+    target: 'node24',
     jsx: 'transform',
     jsxFactory: 'react',
     allowOverwrite: true,
@@ -92,38 +105,126 @@ function getESBuildConfig(
     plugins: [
       TsconfigPathsPlugin(),
 
+      // handle ESM-only features that can't be used with CJS output
+      {
+        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
+          })
+        },
+      },
+
       {
         name: 'external',
         setup(build) {
-          build.onResolve({ filter: /@tamagui\/core/ }, (args) => {
+          const proxyWormPath = require.resolve('@tamagui/proxy-worm')
+
+          // only externalize @tamagui/core and @tamagui/web - these are provided at runtime
+          // other @tamagui/* packages (like @tamagui/config/v3) must be bundled in to avoid
+          // ESM race conditions when multiple threads require() them concurrently
+          build.onResolve({ filter: /^@tamagui\/(core|web)$/ }, (args) => {
+            if (args.kind === 'entry-point') {
+              return null
+            }
             return {
-              path: platform === 'native' ? '@tamagui/core/native' : '@tamagui/core',
+              path: platform === 'native' ? '@tamagui/core/native' : args.path,
               external: true,
             }
           })
-          build.onResolve({ filter: /react-native\/package.json$/ }, (args) => {
+
+          build.onResolve({ filter: /react-native\/package.json$/ }, () => {
             return {
               path: 'react-native/package.json',
               external: true,
             }
           })
-          build.onResolve({ filter: /@tamagui\/web/ }, (args) => {
+
+          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, () => {
             return {
-              path: platform === 'native' ? '@tamagui/core/native' : '@tamagui/core',
+              path: '@tamagui/react-native-web-lite',
               external: true,
             }
           })
 
-          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, (args) => {
+          build.onResolve({ filter: /^react-native-reanimated(?:\/.*)?$/ }, () => {
             return {
-              path: '@tamagui/react-native-web-lite',
-              external: true,
+              path: proxyWormPath,
             }
           })
 
-          build.onResolve({ filter: /react-native-reanimated/ }, (args) => {
+          build.onResolve({ filter: /^react-native-worklets(?:\/.*)?$/ }, () => {
             return {
-              path: 'react-native-reanimated',
+              path: proxyWormPath,
+            }
+          })
+
+          // externalize animation libraries - not needed for static extraction
+          build.onResolve({ filter: /^(framer-motion|motion)/ }, (args) => {
+            return {
+              path: args.path,
               external: true,
             }
           })
@@ -139,36 +240,38 @@ function getESBuildConfig(
   return res
 }
 
+function detectEntryFormat(entryPoint: string): esbuild.BuildOptions['format'] {
+  // file path - detect from file/package.json
+  if (entryPoint.startsWith('/') || entryPoint.startsWith('.')) {
+    return detectModuleFormat(entryPoint)
+  }
+  // bare module specifier - check package.json type field
+  try {
+    const pkgJsonPath = require.resolve(entryPoint + '/package.json')
+    const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'))
+    return pkg.type === 'module' ? 'esm' : 'cjs'
+  } catch {
+    return 'cjs'
+  }
+}
+
 export async function esbundleTamaguiConfig(
   props: Props,
   platform: TamaguiPlatform,
   aliases?: Record<string, string>
 ) {
-  await asyncLock(props)
   const config = getESBuildConfig(props, platform, aliases)
-  return await esbuild.build(config)
-}
 
-// until i do fancier things w plugins:
-async function asyncLock(props: Props) {
-  const lockFile = join(dirname(props.outfile), basename(props.outfile, '.lock'))
-  const lockStat = await FS.stat(lockFile).catch(() => {
-    /* ok */
+  // build to memory first, then write atomically (temp file + rename)
+  // to prevent other threads from reading partially-written files
+  const tmpFile = props.outfile + '.tmp.' + process.pid
+  const result = await esbuild.build({
+    ...config,
+    outfile: tmpFile,
   })
-  const lockedMsAgo = !lockStat
-    ? Number.POSITIVE_INFINITY
-    : new Date().getTime() - new Date(lockStat.mtime).getTime()
-  if (lockedMsAgo < 500) {
-    if (process.env.DEBUG?.startsWith('tamagui')) {
-      console.info(`Waiting for existing build`, props.entryPoints)
-    }
-    let tries = 5
-    while (tries--) {
-      if (await FS.pathExists(props.outfile)) {
-        return
-      }
-      await new Promise((res) => setTimeout(res, 50))
-    }
-  }
-  void FS.writeFile(lockFile, '')
+
+  // atomic rename prevents other threads from reading partial files
+  await FS.rename(tmpFile, props.outfile)
+
+  return result
 }