@tamagui/static 2.7.7 → 3.0.0-beta.1093.1

package/src/componentDiscovery.ts

@@ -0,0 +1,105 @@
+import type { MaterializedModule } from '@tamagui/compiler-core'
+import path from 'node:path'
+
+import type { CompilerComponentRegistry } from './compilerHost'
+import {
+  getComponentStaticConfigByName,
+  type LoadedComponents,
+} from './extractor/bundleConfig'
+
+/**
+ * Evaluate a host-resolved module and return its exports, or null when the
+ * host cannot run it. Frontends supply this from their bundler's module runner
+ * (Vite) or the static-evaluation require hooks (`evaluateComponentModule`).
+ */
+export type ComponentModuleEvaluator = (module: {
+  id: string
+  specifier: string
+}) => Promise<Record<string, unknown> | null>
+
+// `pkg`, `@scope/pkg`, and their subpaths. `@/x` and `~/x` are path aliases
+const packageSpecifier = /^(?:@[^/@\s]+\/)?[^./~@\s][^/\s]*(?:\/|$)/
+
+function isPackageSpecifier(specifier: string): boolean {
+  return packageSpecifier.test(specifier)
+}
+
+/**
+ * Finds the component modules a file uses that the configured `components`
+ * list does not cover, evaluates each once, and registers what it exports so
+ * lowering resolves them like configured ones. Owned by a frontend for the
+ * life of a project generation; `prepare` runs between materialize and lower.
+ */
+export class ComponentDiscovery {
+  /** null records a module that had no components or could not evaluate */
+  readonly #discovered = new Map<string, LoadedComponents | null>()
+
+  clear(): void {
+    this.#discovered.clear()
+  }
+
+  /** host-resolved ids of every module discovery found components in */
+  ids(): string[] {
+    return [...this.#discovered]
+      .filter(([, loaded]) => loaded !== null)
+      .map(([id]) => id)
+      .sort()
+  }
+
+  /** re-register everything found so far into a freshly built registry */
+  seed(registry: CompilerComponentRegistry): void {
+    for (const [id, loaded] of this.#discovered) {
+      if (!loaded) continue
+      registry.modulesById.set(id, id)
+      registry.componentsByModule.set(id, loaded)
+    }
+  }
+
+  async prepare(
+    module: MaterializedModule,
+    registry: CompilerComponentRegistry,
+    evaluate: ComponentModuleEvaluator | undefined
+  ): Promise<void> {
+    if (!evaluate) return
+    const seen = new Set<string>()
+    const provenances = [
+      ...module.elements.map((element) => element.component.provenance),
+      ...module.styledDefinitions.map((definition) => definition.base.provenance),
+    ]
+    for (const provenance of provenances) {
+      // a relative or aliased import is the app's own module: the graph
+      // already models its styled definitions, and evaluating app code at
+      // build time runs its side effects
+      if (!provenance || !isPackageSpecifier(provenance.specifier)) continue
+      const id = provenance.resolvedId.split(/[?#]/, 1)[0]
+      if (seen.has(id) || registry.modulesById.has(id) || this.#discovered.has(id)) {
+        continue
+      }
+      seen.add(id)
+      if (!path.isAbsolute(id)) {
+        this.#discovered.set(id, null)
+        continue
+      }
+      let loaded: LoadedComponents | null = null
+      try {
+        const exports = await evaluate({ id, specifier: provenance.specifier })
+        if (exports) {
+          const nameToInfo = getComponentStaticConfigByName(
+            id,
+            (exports as { default?: unknown }).default ?? exports
+          )
+          if (Object.keys(nameToInfo).length) loaded = { moduleName: id, nameToInfo }
+        }
+      } catch (error) {
+        if (process.env.DEBUG === 'tamagui') {
+          console.info(`[tamagui] component discovery skipped ${id}:`, error)
+        }
+      }
+      this.#discovered.set(id, loaded)
+      if (loaded) {
+        registry.modulesById.set(id, id)
+        registry.componentsByModule.set(id, loaded)
+      }
+    }
+  }
+}

package/src/constants.ts

@@ -1,13 +1,8 @@
-import findCacheDir from 'find-cache-dir'
-
 export const CSS_FILE_NAME = '__snack.css'
 
 // ENSURE THIS ISNT THE SAME AS THE SEPARATOR USED FOR STYLE KEYS
 export const MEDIA_SEP = '_'
 
-// ensure cache dir
-export const cacheDir = findCacheDir({ name: 'tamagui', create: true })
-
 export const FAILED_EVAL = Symbol('failed_style_eval')
 
 export const SHOULD_DEBUG =

package/src/domStructuralPass.ts

@@ -0,0 +1,190 @@
+import {
+  ATTRIBUTES,
+  EVENTS,
+  NATIVE_BACKING,
+  TAGS,
+  type PropTags,
+  type TagName,
+} from '@tamagui/dom'
+import {
+  localBailout,
+  type BailoutReason,
+  type MaterializedElement,
+  type MaterializedModule,
+  type SourceEdit,
+  type StructuralModulePass,
+} from '@tamagui/compiler-core'
+import { createHash } from 'node:crypto'
+
+const DOM_FRONTENDS = new Set([
+  'tamagui',
+  'tamagui/dom',
+  '@tamagui/core',
+  '@tamagui/core/dom',
+  '@tamagui/tailwind',
+])
+
+const RUNTIME_STYLE_FRONTENDS = new Set(['tamagui', '@tamagui/core', '@tamagui/web'])
+
+const acceptsTag = (accepted: PropTags, tag: TagName) =>
+  accepted === '*' || accepted.includes(tag)
+
+function isDOMElement(element: MaterializedElement) {
+  const provenance = element.component.provenance
+  return provenance?.importedName === 'html' && DOM_FRONTENDS.has(provenance.specifier)
+}
+
+const versionHash = createHash('sha256')
+  .update(
+    JSON.stringify({
+      ATTRIBUTES,
+      EVENTS,
+      NATIVE_BACKING,
+      TAGS,
+    })
+  )
+  .digest('hex')
+
+export const domStructuralPass: StructuralModulePass = {
+  versionHash: `dom-structural-v4-${versionHash}`,
+  transform({ module, source, target }) {
+    const edits: SourceEdit[] = []
+    const diagnostics: BailoutReason[] = []
+    const domElements = module.elements.filter(isDOMElement)
+    const supportedDOMElements = domElements.filter(
+      (
+        element
+      ): element is MaterializedElement & {
+        component: MaterializedElement['component'] & { name: TagName }
+      } => element.component.name in TAGS
+    )
+    const domBySpan = new Map(
+      supportedDOMElements.map((element) => [
+        `${element.span.start}:${element.span.end}`,
+        element,
+      ])
+    )
+
+    for (const element of domElements) {
+      const tagName = element.component.name as TagName
+      if (!(tagName in TAGS)) {
+        diagnostics.push(
+          localBailout(
+            'local/unsupported-target',
+            element.component.span,
+            `html.${element.component.name} is not part of the Tamagui DOM contract`
+          )
+        )
+        continue
+      }
+      const tag = TAGS[tagName]
+      if (target === 'native' && tag.native === 'none') {
+        diagnostics.push(
+          localBailout(
+            'local/unsupported-target',
+            element.component.span,
+            `html.${tagName} is not supported on native: ${tag.note ?? 'no native backing'}`
+          )
+        )
+        continue
+      }
+
+      for (const entry of element.entries) {
+        if (entry.kind !== 'prop') continue
+        const attribute =
+          (entry.name in ATTRIBUTES ? ATTRIBUTES[entry.name] : undefined) ??
+          (entry.name.startsWith('data-') ? ATTRIBUTES['data-*'] : undefined)
+        const event = entry.name in EVENTS ? EVENTS[entry.name] : undefined
+        const row = attribute ?? event
+        if (!row) continue
+        if (!acceptsTag(row.tags, tagName)) {
+          diagnostics.push(
+            localBailout(
+              'local/unsupported-prop-key',
+              entry.span,
+              `${entry.name} is not supported on html.${tagName}`
+            )
+          )
+          continue
+        }
+        if (target === 'native' && row.native === 'none') {
+          if (event) continue
+          diagnostics.push(
+            localBailout(
+              'local/unsupported-prop-key',
+              entry.span,
+              `${entry.name} is not supported on native html.${tagName}: ${row.note ?? 'no native equivalent'}`
+            )
+          )
+        }
+      }
+
+      for (const entry of element.entries) {
+        if (entry.kind !== 'child' || entry.value.kind !== 'element') continue
+        const child = domBySpan.get(`${entry.value.span.start}:${entry.value.span.end}`)
+        if (!child) continue
+        const childTag = child.component.name
+        const invalid =
+          tag.content === 'void' ||
+          tag.content === 'text' ||
+          (tag.content === 'phrasing' && TAGS[childTag].display === 'block') ||
+          (tag.content === 'tags' && !tag.childTags?.includes(childTag))
+        if (invalid) {
+          diagnostics.push(
+            localBailout(
+              'local/unsupported-child',
+              child.component.span,
+              `html.${childTag} cannot be nested directly inside html.${tagName}`
+            )
+          )
+        }
+      }
+    }
+
+    for (const definition of module.domStyleDefinitions) {
+      if (definition.value.kind !== 'static') {
+        diagnostics.push(
+          localBailout(
+            'local/dynamic-style-value',
+            definition.value.span,
+            `style() definition ${definition.name} must be statically evaluable`
+          )
+        )
+        continue
+      }
+      const isRuntimeStyle = RUNTIME_STYLE_FRONTENDS.has(definition.factory.specifier)
+      if (
+        isRuntimeStyle &&
+        (!definition.value.value ||
+          typeof definition.value.value !== 'object' ||
+          Array.isArray(definition.value.value))
+      ) {
+        diagnostics.push(
+          localBailout(
+            'local/dynamic-style-value',
+            definition.value.span,
+            `style() definition ${definition.name} must be an object literal`
+          )
+        )
+        continue
+      }
+      edits.push({
+        start: definition.span.start,
+        end: definition.span.end,
+        content: isRuntimeStyle
+          ? `({ className: "", [Symbol.for("tamagui.stylePiece")]: { byKey: {}, styleObject: ${JSON.stringify(definition.value.value)} } })`
+          : 'undefined',
+        origin: definition.span,
+      })
+    }
+
+    const nextModule: MaterializedModule = module
+    return {
+      module: nextModule,
+      edits,
+      imports: [],
+      diagnostics,
+      dependencies: [],
+    }
+  },
+}

package/src/exports.ts

@@ -1,16 +1,15 @@
 export * from './checkDeps'
+export * from './compilerHost'
+export * from './compiler'
 export * from './types'
-export { createExtractor } from './extractor/createExtractor'
-export { literalToAst } from './extractor/literalToAst'
 export * from './constants'
-export * from './extractor/extractToClassNames'
 export * from './extractor/concatClassName'
-export * from './extractor/extractToNative'
-export * from './extractor/extractHelpers'
 export * from './extractor/loadTamagui'
+export { evaluateComponentModule } from './extractor/bundleConfig'
+export * from './componentDiscovery'
 export * from './extractor/watchTamaguiConfig'
-export * from './extractor/createLogger'
 export * from './registerRequire'
 export { detectModuleFormat, clearFormatCache } from './extractor/detectModuleFormat'
 export { esbundleTamaguiConfig } from './extractor/bundle'
 export * from './getPragmaOptions'
+export * from './zero'

package/src/extractor/addLocalExports.ts

@@ -0,0 +1,49 @@
+import {
+  childNode,
+  childNodes,
+  identifierName,
+  parseModuleAst,
+} from '@tamagui/compiler-core'
+
+function declarationName(node: ReturnType<typeof childNode>): string | null {
+  return identifierName(node ? childNode(node, 'id') : null)
+}
+
+/** Adds exports used only while evaluating local component modules. */
+export function addLocalExports(source: string, id?: string): string {
+  const program = parseModuleAst(source, id)
+  const usedNames = new Set<string>()
+  const candidates: string[] = []
+
+  for (const statement of childNodes(program, 'body')) {
+    if (statement.type === 'ExportNamedDeclaration') {
+      for (const specifier of childNodes(statement, 'specifiers')) {
+        const exported = childNode(specifier, 'exported')
+        const name = identifierName(exported)
+        if (name) usedNames.add(name)
+      }
+      const declaration = childNode(statement, 'declaration')
+      if (declaration?.type === 'VariableDeclaration') {
+        for (const declarator of childNodes(declaration, 'declarations')) {
+          const name = declarationName(declarator)
+          if (name) usedNames.add(name)
+        }
+      } else {
+        const name = declarationName(declaration)
+        if (name) usedNames.add(name)
+      }
+      continue
+    }
+
+    if (statement.type !== 'VariableDeclaration') continue
+    const declarations = childNodes(statement, 'declarations')
+    if (declarations.length !== 1) continue
+    const declaration = declarations[0]!
+    const name = declarationName(declaration)
+    if (!name || !childNode(declaration, 'init') || usedNames.has(name)) continue
+    candidates.push(name)
+  }
+
+  const names = candidates.filter((name) => !usedNames.has(name))
+  return names.length ? `${source}\nexport { ${names.join(', ')} }\n` : source
+}

package/src/extractor/bundle.ts

@@ -1,13 +1,19 @@
+import { randomBytes } from 'node:crypto'
 import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import esbuild from 'esbuild'
-import * as FS from 'fs-extra'
+import FS from 'fs-extra'
 import type { TamaguiPlatform } from '../types'
+import { staticEvaluationIgnorePlugin } from '../staticEvaluationIgnoredModules'
 import { detectModuleFormat } from './detectModuleFormat'
 import { esbuildAliasPlugin } from './esbuildAliasPlugin'
-import { hasTopLevelAwait } from './hasTopLevelAwait'
 import { resolveWebOrNativeSpecificEntry } from './loadTamagui'
 import { TsconfigPathsPlugin } from './esbuildTsconfigPaths'
 
+const nodeRequire = createRequire(
+  typeof __filename === 'string' ? __filename : import.meta.url
+)
+
 export const esbuildLoaderConfig = {
   '.js': 'jsx',
   '.png': 'dataurl',
@@ -50,12 +56,14 @@ type Props = Omit<Partial<esbuild.BuildOptions>, 'entryPoints'> & {
   outfile: string
   entryPoints: string[]
   resolvePlatformSpecificEntries?: boolean
+  dangerouslyIgnoreStaticEvaluationModules?: string[]
 }
 
 function getESBuildConfig(
   {
     entryPoints,
     resolvePlatformSpecificEntries,
+    dangerouslyIgnoreStaticEvaluationModules = [],
     define: callerDefine,
     ...options
   }: Props,
@@ -101,10 +109,16 @@ function getESBuildConfig(
       ...platformDefines,
       ...callerDefine,
     },
+    ...(platform === 'native'
+      ? {
+          conditions: ['react-native'],
+          mainFields: ['react-native', 'module', 'main'],
+        }
+      : {}),
     // for ESM: prefer "module" field for resolution, add require() shim for bundled CJS deps
     ...(detectedFormat === 'esm'
       ? {
-          mainFields: ['module', 'main'],
+          ...(platform === 'web' ? { mainFields: ['module', 'main'] } : {}),
           banner: {
             js: 'import { createRequire as __cr } from "module"; const require = __cr(import.meta.url);',
           },
@@ -134,6 +148,7 @@ function getESBuildConfig(
     logLevel: 'warning',
     plugins: [
       TsconfigPathsPlugin(),
+      staticEvaluationIgnorePlugin(dangerouslyIgnoreStaticEvaluationModules),
 
       // handle ESM-only features that can't be used with CJS output
       {
@@ -175,19 +190,6 @@ function getESBuildConfig(
               modified = true
             }
 
-            // stub files with top-level await - they're typically runtime-only
-            if (hasTopLevelAwait(contents, args.path)) {
-              if (process.env.DEBUG?.startsWith('tamagui')) {
-                console.info(`[tamagui] stubbing file with top-level await: ${args.path}`)
-              }
-              return {
-                // Keep this as an ESM-shaped stub so esbuild doesn't inline a
-                // top-level `module.exports = {}` into the parent bundle.
-                contents: `// stubbed - contains top-level await\nexport default {}`,
-                loader: 'js',
-              }
-            }
-
             if (modified) {
               return {
                 contents,
@@ -209,10 +211,8 @@ function getESBuildConfig(
       {
         name: 'external',
         setup(build) {
-          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
+          // other @tamagui/* packages (like @tamagui/config/v6) 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') {
@@ -231,25 +231,13 @@ function getESBuildConfig(
             }
           })
 
-          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, () => {
+          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, (args) => {
             return {
-              path: '@tamagui/react-native-web-lite',
+              path: args.path.replace(/^react-native/, '@tamagui/react-native-web-lite'),
               external: true,
             }
           })
 
-          build.onResolve({ filter: /^react-native-reanimated(?:\/.*)?$/ }, () => {
-            return {
-              path: proxyWormPath,
-            }
-          })
-
-          build.onResolve({ filter: /^react-native-worklets(?:\/.*)?$/ }, () => {
-            return {
-              path: proxyWormPath,
-            }
-          })
-
           // externalize animation libraries - not needed for static extraction
           build.onResolve({ filter: /^(framer-motion|motion)/ }, (args) => {
             return {
@@ -276,7 +264,7 @@ function detectEntryFormat(entryPoint: string): esbuild.BuildOptions['format'] {
   }
   // bare module specifier - check package.json type field
   try {
-    const pkgJsonPath = require.resolve(entryPoint + '/package.json')
+    const pkgJsonPath = nodeRequire.resolve(entryPoint + '/package.json')
     const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'))
     return pkg.type === 'module' ? 'esm' : 'cjs'
   } catch {
@@ -292,12 +280,22 @@ export async function esbundleTamaguiConfig(
   const config = getESBuildConfig(props, platform, aliases)
 
   // 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,
-  })
+  // to prevent other threads from reading partially-written files.
+  // The suffix is per call, not per process: two bundles of the same config in
+  // one process (or one worker thread) shared a temp path, and whichever
+  // renamed first left the other renaming a file that no longer existed.
+  const tmpFile = `${props.outfile}.tmp.${process.pid}-${randomBytes(6).toString('hex')}`
+
+  const result = await esbuild
+    .build({
+      ...config,
+      outfile: tmpFile,
+    })
+    .catch(async (err) => {
+      // a failed build can still leave a partial temp file behind
+      await FS.remove(tmpFile).catch(() => {})
+      throw err
+    })
 
   // atomic rename prevents other threads from reading partial files
   await FS.rename(tmpFile, props.outfile)