@tamagui/metro-plugin 2.7.7 → 3.0.0-beta.643.1

package/src/index.ts

@@ -1,20 +1,56 @@
-import { loadTamaguiBuildConfigSync, type TamaguiOptions } from '@tamagui/static'
+import { createRequire } from 'node:module'
+import { isAbsolute, join } from 'node:path'
+
+import Static from '@tamagui/static'
+import type { TamaguiOptions } from '@tamagui/static'
+
+import { defaultMetroCompilerCacheRoot } from './compilerCache'
+import { applyMetroZeroRuntime } from './zeroSerializer'
+import { createMetroZeroController } from './zeroRuntime'
+import { formatMetroCompilerDiagnostic } from './diagnostics'
+import { MetroCompilerFrontend } from './frontend'
+import { writeMetroCompilerTransformerBridge } from './transformer'
+import { composeMetroGetTransformOptions } from './transformOptions'
 
 export type MetroTamaguiOptions = TamaguiOptions & {
+  /** Override the ignored on-disk handoff used by Metro transform workers. */
+  compilerCacheRoot?: string
   /**
-   * @deprecated CSS interop is no longer supported. Use `tamagui generate` instead.
+   * Set by the zero-runtime island bundle request. An island is a second Metro
+   * bundle with `TAMAGUI_RUNTIME='full'` and its own entry, so this invocation
+   * keeps the full runtime and only contributes its CSS fragment.
    */
-  cssInterop?: boolean
+  zeroIslandBuild?: string
+  /**
+   * Directory the zero CSS artifact and island bundles are published from,
+   * relative to the project root.
+   *
+   * @default 'public'
+   */
+  zeroPublicDir?: string
 }
 
 // Use a loose type for metro config to avoid version-specific type incompatibilities
 type MetroConfigInput = {
+  projectRoot?: string
   resolver?: any
   transformer?: any
   transformerPath?: string
   [key: string]: any
 }
 
+const frontends = new WeakMap<object, MetroCompilerFrontend>()
+const { loadTamaguiBuildConfigSync } = Static
+const requireFromPlugin = createRequire(
+  typeof __filename === 'string' ? __filename : import.meta.url
+)
+
+export function getMetroCompilerFrontend(
+  metroConfig: MetroConfigInput
+): MetroCompilerFrontend | null {
+  return frontends.get(metroConfig) ?? null
+}
+
 /**
  * Configure Metro for Tamagui.
  *
@@ -42,18 +78,14 @@ export function withTamagui(
   metroConfig: MetroConfigInput,
   optionsIn?: MetroTamaguiOptions
 ): MetroConfigInput {
-  const { cssInterop, ...tamaguiOptionsIn } = optionsIn || {}
-
-  if (cssInterop) {
-    console.warn(
-      '[@tamagui/metro-plugin] cssInterop option is deprecated. Use `tamagui generate` to pre-generate CSS instead.'
-    )
-  }
+  const {
+    compilerCacheRoot,
+    zeroIslandBuild,
+    zeroPublicDir = 'public',
+    ...tamaguiOptionsIn
+  } = optionsIn || {}
 
-  const options = {
-    ...tamaguiOptionsIn,
-    ...loadTamaguiBuildConfigSync(tamaguiOptionsIn),
-  }
+  const options = loadTamaguiBuildConfigSync(tamaguiOptionsIn)
 
   // Ensure CSS files can be resolved
   metroConfig.resolver = {
@@ -67,5 +99,76 @@ export function withTamagui(
     tamagui: options,
   }
 
+  const zeroProjectRoot = metroConfig.projectRoot ?? process.cwd()
+  const zero = createMetroZeroController(
+    options,
+    zeroProjectRoot,
+    zeroIslandBuild ?? null,
+    zeroPublicDir
+  )
+
+  // `report` runs the analysis through the frontend and changes nothing else,
+  // so it never installs the serializer that owns the artifact and the gate.
+  if (zero?.isEnforcing) {
+    applyMetroZeroRuntime(metroConfig, zero)
+  }
+
+  if (!options.disable) {
+    const projectRoot = metroConfig.projectRoot ?? process.cwd()
+    const requireFromProject = createRequire(join(projectRoot, 'package.json'))
+    // getDefaultConfig sets this to the bare specifier 'metro-babel-transformer',
+    // and createRequire needs an absolute path, so resolve either shape here
+    const configuredBabelTransformerPath =
+      metroConfig.transformer.babelTransformerPath ?? 'metro-babel-transformer'
+    const originalBabelTransformerPath = isAbsolute(configuredBabelTransformerPath)
+      ? configuredBabelTransformerPath
+      : requireFromProject.resolve(configuredBabelTransformerPath)
+    const cacheBaseRoot = compilerCacheRoot ?? defaultMetroCompilerCacheRoot(projectRoot)
+    const frontend = new MetroCompilerFrontend({
+      projectRoot,
+      resolver: metroConfig.resolver,
+      transformer: metroConfig.transformer,
+      tamaguiOptions: options,
+      originalBabelTransformerPath,
+      cacheRoot: cacheBaseRoot,
+      zero,
+      reportDiagnostic(diagnostic) {
+        console.warn(formatMetroCompilerDiagnostic(diagnostic, projectRoot))
+      },
+    })
+    const transformerFactoryPath = requireFromPlugin.resolve(
+      '@tamagui/metro-plugin/transformer'
+    )
+    metroConfig.transformer.babelTransformerPath = writeMetroCompilerTransformerBridge(
+      transformerFactoryPath,
+      {
+        cacheBaseRoot,
+        originalBabelTransformerPath,
+        projectRoot,
+        // an integration-owned literal, never an ambient shell value
+        runtimeLiteral: zero?.isEnforcing && !zero.islandBuild ? 'zero' : 'full',
+      }
+    )
+    const userGetTransformOptions = metroConfig.transformer.getTransformOptions
+    metroConfig.transformer.getTransformOptions = composeMetroGetTransformOptions(
+      frontend,
+      userGetTransformOptions
+    )
+    frontends.set(metroConfig, frontend)
+  }
+
   return metroConfig
 }
+
+export {
+  METRO_COMPILER_CACHE_VERSION,
+  MetroCompilerCache,
+  MetroCompilerCacheError,
+  defaultMetroCompilerCacheRoot,
+} from './compilerCache'
+export type { MetroCompilerDiagnostic } from './diagnostics'
+export type {
+  MetroCompilerGeneration,
+  MetroCompilerScanOptions,
+  MetroCompilerUpdate,
+} from './frontend'

package/src/lowering.ts

@@ -0,0 +1,136 @@
+import {
+  applyLoweredModule,
+  resolvedModuleId,
+  type LoweredModulePlan,
+  type LoweredModuleStats,
+} from '@tamagui/compiler-core'
+import {
+  GREATEST_LOWER_BOUND,
+  TraceMap,
+  originalPositionFor,
+} from '@jridgewell/trace-mapping'
+
+import {
+  compileWithUserBabel,
+  type CompiledMetroModule,
+  type MetroBabelTransformArgs,
+} from './babel'
+
+export interface MetroCompilerLoweringResult {
+  applied: boolean
+  diagnostics: LoweredModulePlan['diagnostics']
+  sourceMapComposed: boolean
+  stats: LoweredModuleStats
+}
+
+interface Position {
+  line: number
+  column: number
+}
+
+function lineStarts(source: string): number[] {
+  const starts = [0]
+  for (let index = 0; index < source.length; index++) {
+    if (source.charCodeAt(index) === 10) starts.push(index + 1)
+  }
+  return starts
+}
+
+function sourceIndex(starts: readonly number[], position: Position): number {
+  return (starts[position.line - 1] ?? starts.at(-1) ?? 0) + position.column
+}
+
+function tracePosition(loweredMap: TraceMap, position: Position): Position | null {
+  const original = originalPositionFor(loweredMap, {
+    line: position.line,
+    column: position.column,
+    bias: GREATEST_LOWER_BOUND,
+  })
+  return original.line == null || original.column == null
+    ? null
+    : { line: original.line, column: original.column }
+}
+
+function remapAstLocations(
+  ast: Record<string, any>,
+  loweredMap: TraceMap,
+  source: string,
+  filename: string
+): void {
+  const starts = lineStarts(source)
+  const seen = new Set<object>()
+  const visit = (value: unknown) => {
+    if (!value || typeof value !== 'object' || seen.has(value as object)) return
+    seen.add(value as object)
+    if (Array.isArray(value)) {
+      for (const child of value) visit(child)
+      return
+    }
+    const node = value as Record<string, any>
+    const loc = node.loc
+    if (loc?.start && loc?.end) {
+      const start = tracePosition(loweredMap, loc.start)
+      const end = tracePosition(loweredMap, loc.end)
+      if (start && end) {
+        node.start = sourceIndex(starts, start)
+        node.end = sourceIndex(starts, end)
+        node.loc = {
+          ...loc,
+          start,
+          end,
+          filename,
+        }
+      }
+    }
+    for (const [key, child] of Object.entries(node)) {
+      if (key === 'loc' || key === 'tokens') continue
+      visit(child)
+    }
+  }
+  visit(ast)
+}
+
+/**
+ * Applies the cacheable E3 plan to the raw module source, then runs the user's
+ * Babel transformer once over the lowered source. Plans carry spans into raw
+ * source, so this process's Babel output never needs to match the planning
+ * process's byte for byte — Babel options can differ freely between them.
+ */
+export async function applyMetroCompilerPlan(
+  args: MetroBabelTransformArgs,
+  plan: LoweredModulePlan,
+  transformerPath: string
+): Promise<{ compiled: CompiledMetroModule; lowering: MetroCompilerLoweringResult }> {
+  const output = applyLoweredModule(args.src, resolvedModuleId(args.filename), plan)
+  if (!output.changed || !output.map) {
+    return {
+      compiled: await compileWithUserBabel(transformerPath, args),
+      lowering: {
+        applied: false,
+        diagnostics: plan.diagnostics,
+        sourceMapComposed: false,
+        stats: plan.stats,
+      },
+    }
+  }
+
+  const compiled = await compileWithUserBabel(transformerPath, {
+    ...args,
+    src: output.code,
+  })
+  remapAstLocations(
+    compiled.result.ast,
+    new TraceMap(output.map as any),
+    args.src,
+    args.filename
+  )
+  return {
+    compiled,
+    lowering: {
+      applied: true,
+      diagnostics: plan.diagnostics,
+      sourceMapComposed: true,
+      stats: plan.stats,
+    },
+  }
+}

package/src/metroResolver.ts

@@ -0,0 +1,209 @@
+import { existsSync, lstatSync, readFileSync, realpathSync, statSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, extname, isAbsolute, join, parse, relative, resolve } from 'node:path'
+
+export interface MetroResolverConfig {
+  projectRoot: string
+  resolver?: Record<string, any>
+}
+
+export interface MetroResolvedDependency {
+  specifier: string
+  resolvedId: string
+  external: boolean
+}
+
+export interface MetroModuleSpecifier {
+  specifier: string
+  isESMImport: boolean
+}
+
+type MetroResolve = (
+  context: Record<string, any>,
+  specifier: string,
+  platform: string | null
+) => { type: string; filePath?: string }
+
+function compareCodeUnits(left: string, right: string): number {
+  return left < right ? -1 : left > right ? 1 : 0
+}
+
+function findClosestPackage(path: string): {
+  rootPath: string
+  packageJson: Record<string, any>
+  packageRelativePath: string
+} | null {
+  let directory = existsSync(path) && statSync(path).isDirectory() ? path : dirname(path)
+  const root = parse(directory).root
+  while (true) {
+    const packagePath = join(directory, 'package.json')
+    if (existsSync(packagePath)) {
+      try {
+        return {
+          rootPath: directory,
+          packageJson: JSON.parse(readFileSync(packagePath, 'utf8')),
+          packageRelativePath: relative(directory, path),
+        }
+      } catch {
+        return null
+      }
+    }
+    if (directory === root || directory.endsWith(`${join('node_modules')}`)) {
+      return null
+    }
+    directory = dirname(directory)
+  }
+}
+
+function lookup(projectRoot: string, path: string) {
+  const absolutePath = isAbsolute(path) ? path : resolve(projectRoot, path)
+  try {
+    const stat = lstatSync(absolutePath)
+    const realPath = realpathSync(absolutePath)
+    return {
+      exists: true as const,
+      type: (stat.isDirectory() ? 'd' : 'f') as 'd' | 'f',
+      realPath,
+    }
+  } catch {
+    return { exists: false as const }
+  }
+}
+
+export function moduleSpecifiersFromAst(ast: unknown): MetroModuleSpecifier[] {
+  const specifiers = new Map<string, boolean>()
+  const seen = new Set<object>()
+
+  function add(value: unknown, isESMImport: boolean): void {
+    if (typeof value !== 'string') return
+    specifiers.set(value, (specifiers.get(value) ?? false) || isESMImport)
+  }
+
+  function visit(value: unknown): void {
+    if (!value || typeof value !== 'object') return
+    if (seen.has(value)) return
+    seen.add(value)
+    if (Array.isArray(value)) {
+      for (const child of value) visit(child)
+      return
+    }
+    const node = value as Record<string, any>
+    if (
+      node.type === 'ImportDeclaration' ||
+      node.type === 'ExportAllDeclaration' ||
+      node.type === 'ExportNamedDeclaration'
+    ) {
+      add(node.source?.value, true)
+    } else if (node.type === 'CallExpression') {
+      const first = node.arguments?.[0]
+      if (node.callee?.type === 'Import') {
+        add(first?.value, true)
+      } else if (node.callee?.type === 'Identifier' && node.callee.name === 'require') {
+        add(first?.value, false)
+      }
+    }
+    for (const [key, child] of Object.entries(node)) {
+      if (key === 'loc' || key === 'comments' || key === 'tokens') continue
+      visit(child)
+    }
+  }
+
+  visit(ast)
+  return [...specifiers]
+    .sort(([left], [right]) => compareCodeUnits(left, right))
+    .map(([specifier, isESMImport]) => ({ specifier, isESMImport }))
+}
+
+export function createMetroCompilerResolver(config: MetroResolverConfig): {
+  version: string
+  resolve(
+    importer: string,
+    dependency: MetroModuleSpecifier,
+    platform: string | null
+  ): MetroResolvedDependency | null
+} {
+  const requireFromProject = createRequire(join(config.projectRoot, 'package.json'))
+  const resolverPackage = requireFromProject('metro-resolver/package.json') as {
+    version: string
+  }
+  if (!resolverPackage.version.startsWith('0.84.')) {
+    throw new Error(
+      `@tamagui/metro-plugin requires the Metro 0.84 resolver contract, found ${resolverPackage.version}`
+    )
+  }
+  const resolverModule = requireFromProject('metro-resolver')
+  const metroResolve: MetroResolve = resolverModule.resolve
+  const createDefaultContextModule = requireFromProject(
+    'metro-resolver/private/createDefaultContext'
+  )
+  const createDefaultContext =
+    createDefaultContextModule.default ?? createDefaultContextModule
+  const resolver = config.resolver ?? {}
+  const fileSystemLookup = (path: string) => lookup(config.projectRoot, path)
+  const getPackage = (packagePath: string) => {
+    try {
+      return JSON.parse(readFileSync(packagePath, 'utf8'))
+    } catch {
+      return null
+    }
+  }
+
+  return {
+    version: resolverPackage.version,
+    resolve(importer, dependency, platform) {
+      const dependencyDescriptor = {
+        name: dependency.specifier,
+        data: {
+          asyncType: null,
+          isESMImport: dependency.isESMImport,
+          key: dependency.specifier,
+          locs: [],
+        },
+      }
+      const context = createDefaultContext(
+        {
+          allowHaste: false,
+          assetExts: new Set(resolver.assetExts ?? []),
+          customResolverOptions: {},
+          dev: true,
+          disableHierarchicalLookup: resolver.disableHierarchicalLookup ?? false,
+          doesFileExist: (path: string) => fileSystemLookup(path).type === 'f',
+          extraNodeModules: resolver.extraNodeModules ?? null,
+          fileSystemLookup,
+          getPackage,
+          getPackageForModule: findClosestPackage,
+          isESMImport: dependency.isESMImport,
+          mainFields: resolver.resolverMainFields ?? ['react-native', 'browser', 'main'],
+          nodeModulesPaths: resolver.nodeModulesPaths ?? [],
+          originModulePath: importer,
+          preferNativePlatform: true,
+          projectRoot: config.projectRoot,
+          resolveAsset: () => null,
+          resolveHasteModule: () => null,
+          resolveHastePackage: () => null,
+          resolveRequest: resolver.resolveRequest ?? null,
+          sourceExts: resolver.sourceExts ?? ['js', 'jsx', 'json', 'ts', 'tsx'],
+          unstable_conditionNames: resolver.unstable_conditionNames ?? [],
+          unstable_conditionsByPlatform: resolver.unstable_conditionsByPlatform ?? {},
+          unstable_enablePackageExports: resolver.unstable_enablePackageExports ?? true,
+          unstable_logWarning: (message: string) =>
+            config.resolver?.unstable_logWarning?.(message),
+        },
+        dependencyDescriptor
+      )
+      const result = metroResolve(context, dependency.specifier, platform)
+      if (result.type === 'empty') return null
+      if (result.type !== 'sourceFile' || !result.filePath) return null
+      const resolvedId = realpathSync(result.filePath)
+      return {
+        specifier: dependency.specifier,
+        resolvedId,
+        external: resolvedId.includes(`${join('node_modules')}`),
+      }
+    },
+  }
+}
+
+export function isCompilerSourceFile(path: string): boolean {
+  return ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx'].includes(extname(path))
+}

package/src/transformOptions.ts

@@ -0,0 +1,36 @@
+import type { MetroCompilerFrontend } from './frontend'
+
+export interface MetroGetTransformOptionsContext {
+  dev: boolean
+  hot: boolean
+  platform: string | null
+}
+
+export type MetroGetTransformOptions = (
+  this: unknown,
+  entryFiles: string[],
+  transformOptions: MetroGetTransformOptionsContext,
+  getDependencies: (path: string) => Promise<string[]>
+) => Promise<{ transform?: Record<string, any>; [key: string]: any }>
+
+export function composeMetroGetTransformOptions(
+  frontend: Pick<MetroCompilerFrontend, 'ensureValidCache'>,
+  userGetTransformOptions?: MetroGetTransformOptions
+): MetroGetTransformOptions {
+  return async function (this: unknown, entryFiles, transformOptions, getDependencies) {
+    const userOptions = userGetTransformOptions
+      ? await userGetTransformOptions.call(
+          this,
+          entryFiles,
+          transformOptions,
+          getDependencies
+        )
+      : { transform: {} }
+    await frontend.ensureValidCache({
+      ...transformOptions,
+      entryFiles,
+      transform: userOptions.transform ?? {},
+    })
+    return userOptions
+  }
+}