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

package/src/extractor/createExtractor.ts

@@ -12,7 +12,9 @@ import {
   type StaticConfig,
   type TamaguiComponentState,
 } from '@tamagui/web'
-import { basename, relative } from 'node:path'
+import { existsSync, readFileSync } from 'node:fs'
+import { basename, dirname, resolve, relative } from 'node:path'
+import { nodeModuleNameResolver, sys } from 'typescript'
 import type { ViewStyle } from 'react-native'
 
 import { FAILED_EVAL } from '../constants'
@@ -26,7 +28,7 @@ import type {
   TamaguiOptionsWithFileInfo,
   Ternary,
 } from '../types'
-import type { TamaguiProjectInfo } from './bundleConfig'
+import type { LoadedComponents, TamaguiProjectInfo } from './bundleConfig'
 import { createEvaluator, createSafeEvaluator } from './createEvaluator'
 import { evaluateAstNode } from './evaluateAstNode'
 import {
@@ -49,6 +51,7 @@ import { setPropsToFontFamily } from './propsToFontFamilyCache'
 import { timer } from './timer'
 import { validHTMLAttributes } from './validHTMLAttributes'
 import { BailOptimizationError } from './errors'
+import { loadCompilerOptionsFromTsconfig } from './esbuildTsconfigPaths'
 
 const UNTOUCHED_PROPS = {
   key: true,
@@ -85,6 +88,29 @@ export function createExtractor(
       onPressIn: 'onMouseDown',
       onPressOut: 'onMouseUp',
     }),
+    ...(platform === 'native' && {
+      // native view props that should pass through without preventing flattening
+      testID: 'testID',
+      nativeID: 'nativeID',
+      accessibilityLabel: 'accessibilityLabel',
+      accessibilityHint: 'accessibilityHint',
+      accessibilityRole: 'accessibilityRole',
+      accessibilityState: 'accessibilityState',
+      accessibilityValue: 'accessibilityValue',
+      accessibilityActions: 'accessibilityActions',
+      accessibilityLabelledBy: 'accessibilityLabelledBy',
+      accessibilityLiveRegion: 'accessibilityLiveRegion',
+      accessibilityElementsHidden: 'accessibilityElementsHidden',
+      accessibilityViewIsModal: 'accessibilityViewIsModal',
+      importantForAccessibility: 'importantForAccessibility',
+      collapsable: 'collapsable',
+      needsOffscreenAlphaCompositing: 'needsOffscreenAlphaCompositing',
+      removeClippedSubviews: 'removeClippedSubviews',
+      renderToHardwareTextureAndroid: 'renderToHardwareTextureAndroid',
+      shouldRasterizeIOS: 'shouldRasterizeIOS',
+      hitSlop: 'hitSlop',
+      pointerEvents: 'pointerEvents',
+    }),
   }
 
   const componentState: TamaguiComponentState = {
@@ -113,6 +139,83 @@ export function createExtractor(
 
   let projectInfo: TamaguiProjectInfo | null = null
 
+  // cache of dynamically discovered styled components, keyed by absolute file path
+  // persists across files within the same worker/extractor instance
+  const dynamicComponentCache = new Map<string, LoadedComponents>()
+  const dynamicLoadingInProgress = new Set<string>()
+
+  // lazily loaded tsconfig compiler options for path alias resolution
+  let _compilerOptions: any = null
+  function getCompilerOptions() {
+    if (!_compilerOptions) {
+      try {
+        _compilerOptions = loadCompilerOptionsFromTsconfig()
+      } catch {
+        _compilerOptions = {}
+      }
+    }
+    return _compilerOptions
+  }
+
+  function resolveImportPath(fromFile: string, importPath: string): string | null {
+    if (importPath.startsWith('.')) {
+      // relative path resolution
+      const dir = dirname(fromFile)
+      const base = resolve(dir, importPath)
+      const extensions = ['.tsx', '.ts', '.jsx', '.js']
+      for (const ext of extensions) {
+        const full = base + ext
+        if (existsSync(full)) return full
+      }
+      // try index files
+      for (const ext of extensions) {
+        const full = resolve(base, `index${ext}`)
+        if (existsSync(full)) return full
+      }
+      return null
+    }
+
+    // tsconfig path alias resolution (e.g. ~/foo, @/bar)
+    const compilerOptions = getCompilerOptions()
+    if (compilerOptions.paths) {
+      try {
+        const { resolvedModule } = nodeModuleNameResolver(
+          importPath,
+          fromFile,
+          compilerOptions,
+          sys
+        )
+        if (
+          resolvedModule &&
+          !resolvedModule.resolvedFileName.endsWith('.d.ts') &&
+          !resolvedModule.isExternalLibraryImport
+        ) {
+          return resolvedModule.resolvedFileName
+        }
+      } catch {
+        // fallback - tsconfig resolution failed
+      }
+    }
+
+    return null
+  }
+
+  const styledCheckCache = new Map<string, boolean>()
+
+  function mightHaveStyledComponents(filePath: string): boolean {
+    const cached = styledCheckCache.get(filePath)
+    if (cached !== undefined) return cached
+    try {
+      const content = readFileSync(filePath, 'utf-8')
+      const result = content.includes('styled(')
+      styledCheckCache.set(filePath, result)
+      return result
+    } catch {
+      styledCheckCache.set(filePath, false)
+      return false
+    }
+  }
+
   // we load tamagui delayed because we need to set some global/env stuff before importing
   // otherwise we'd import `rnw` and cause it to evaluate react-native-web which causes errors
 
@@ -178,6 +281,12 @@ export function createExtractor(
       ...restProps
     } = options
 
+    // invalidate dynamic cache for this file on re-parse (HMR)
+    if (sourcePath && dynamicComponentCache.has(sourcePath)) {
+      dynamicComponentCache.delete(sourcePath)
+      styledCheckCache.delete(sourcePath)
+    }
+
     if (sourcePath.includes('.tamagui-dynamic-eval')) {
       return null
     }
@@ -375,12 +484,12 @@ export function createExtractor(
         logger.info(` - import via ${moduleName} ${valid}`)
       }
 
-      if (extractStyledDefinitions) {
-        if (valid) {
-          if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
-            doesUseValidImport = true
-            break
-          }
+      if (extractStyledDefinitions && enableDynamicEvaluation) {
+        // check all imports for `styled`, not just valid packages
+        // styled( is basically guaranteed to be tamagui regardless of source
+        if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
+          doesUseValidImport = true
+          // don't break - need to collect all import declarations for the styled() handler
         }
       }
 
@@ -400,7 +509,7 @@ export function createExtractor(
         }
         if (isValidComponent) {
           doesUseValidImport = true
-          break
+          if (!(extractStyledDefinitions && enableDynamicEvaluation)) break
         }
       }
     }
@@ -411,6 +520,35 @@ export function createExtractor(
       )
     }
 
+    if (
+      !doesUseValidImport &&
+      extractStyledDefinitions &&
+      enableDynamicEvaluation &&
+      sourcePath
+    ) {
+      // check if any local import is in the dynamic cache or has styled components
+      for (const bodyPath of body) {
+        if (bodyPath.type !== 'ImportDeclaration') continue
+        const node = (
+          'node' in bodyPath ? bodyPath.node : bodyPath
+        ) as t.ImportDeclaration
+        const moduleName = node.source.value
+
+        const resolved = resolveImportPath(sourcePath, moduleName)
+        if (!resolved) continue
+
+        if (dynamicComponentCache.has(resolved)) {
+          doesUseValidImport = true
+          break
+        }
+
+        if (mightHaveStyledComponents(resolved)) {
+          doesUseValidImport = true
+          break
+        }
+      }
+    }
+
     if (!doesUseValidImport) {
       return null
     }
@@ -484,6 +622,10 @@ export function createExtractor(
             ? path.parent.id.name
             : 'unknown'
 
+        if (shouldPrintDebug) {
+          logger.info(` [styled] Found styled(${variableName})`)
+        }
+
         const parentNode = path.node.arguments[0]
 
         if (!t.isIdentifier(parentNode)) {
@@ -496,10 +638,12 @@ export function createExtractor(
           return
         }
 
-        let Component = getValidImportedComponent(variableName)
+        // look up by parent first (e.g. View in `styled(View, {...})`), then by self
+        let Component =
+          getValidImportedComponent(parentName) || getValidImportedComponent(variableName)
 
         if (!Component) {
-          if (enableDynamicEvaluation !== true) {
+          if (!enableDynamicEvaluation) {
             return
           }
 
@@ -583,6 +727,7 @@ export function createExtractor(
         // for now dont parse variants, spreads, etc
         const skipped = new Set<t.ObjectProperty | t.SpreadElement | t.ObjectMethod>()
         const styles = {}
+        const staticDefaultProps = {}
 
         // Generate scope object at this level
         const staticNamespace = getStaticBindingsForScope(
@@ -604,6 +749,19 @@ export function createExtractor(
         const attemptEvalSafe = createSafeEvaluator(attemptEval)
 
         for (const property of definition.properties) {
+          if (
+            t.isObjectProperty(property) &&
+            (t.isIdentifier(property.key) || t.isStringLiteral(property.key))
+          ) {
+            const key = t.isIdentifier(property.key)
+              ? property.key.name
+              : property.key.value
+            const defaultPropValue = attemptEvalSafe(property.value)
+            if (defaultPropValue !== FAILED_EVAL) {
+              staticDefaultProps[key] = defaultPropValue
+            }
+          }
+
           if (
             !t.isObjectProperty(property) ||
             !t.isIdentifier(property.key) ||
@@ -667,23 +825,9 @@ export function createExtractor(
           )
         }
 
-        // leave only un-parsed props...
-        // preserve original order
-        definition.properties = definition.properties.map((prop) => {
-          if (
-            skipped.has(prop) ||
-            !t.isObjectProperty(prop) ||
-            !t.isIdentifier(prop.key)
-          ) {
-            return prop
-          }
-          const key = prop.key.name
-          const value = classNames[key]
-          if (value) {
-            return t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))
-          }
-          return prop
-        })
+        // don't replace definition values with class name strings -
+        // the runtime needs real values for animations, context, and group styles.
+        // we only emit the CSS rules so they're available if the runtime uses classNames.
 
         if (out.rulesToInsert) {
           for (const key in out.rulesToInsert) {
@@ -697,6 +841,34 @@ export function createExtractor(
 
         res.styled++
 
+        // register so JSX handler can find this component (same-file and cross-file)
+        if (extractStyledDefinitions && enableDynamicEvaluation && Component) {
+          const dynamicStaticConfig = {
+            ...Component.staticConfig,
+            defaultProps: {
+              ...Component.staticConfig.defaultProps,
+              ...staticDefaultProps,
+            },
+          }
+
+          // add to allLoadedComponents with '' so getValidComponent matches when moduleName is ''
+          // (same-file styled components have '' as moduleName in JSX handler)
+          propsWithFileInfo.allLoadedComponents.push({
+            moduleName: '',
+            nameToInfo: { [variableName]: { staticConfig: dynamicStaticConfig } },
+          })
+
+          // also cache by file path so other files importing from this path can find it
+          if (sourcePath) {
+            let existing = dynamicComponentCache.get(sourcePath)
+            if (!existing) {
+              existing = { moduleName: sourcePath, nameToInfo: {} }
+              dynamicComponentCache.set(sourcePath, existing)
+            }
+            existing.nameToInfo[variableName] = { staticConfig: dynamicStaticConfig }
+          }
+        }
+
         if (shouldPrintDebug) {
           logger.info(`Extracted styled(${variableName})`)
         }
@@ -725,22 +897,77 @@ export function createExtractor(
         // validate its a proper import from tamagui (or internally inside tamagui)
         const binding = traversePath.scope.getBinding(node.name.name)
         let moduleName = ''
+        let dynamicComponent: { staticConfig: any } | null = null
 
         if (binding) {
           if (t.isImportDeclaration(binding.path.parent)) {
             moduleName = binding.path.parent.source.value
             if (!isValidImport(propsWithFileInfo, moduleName, binding.identifier.name)) {
-              if (shouldPrintDebug) {
-                logger.info(
-                  ` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}\n`
-                )
+              // fallback: try dynamic component cache for local imports (relative or tsconfig alias)
+              if (enableDynamicEvaluation && sourcePath) {
+                const resolved = resolveImportPath(sourcePath, moduleName)
+                if (resolved) {
+                  // check cache first
+                  const cached = dynamicComponentCache.get(resolved)
+                  if (cached?.nameToInfo[binding.identifier.name]) {
+                    dynamicComponent = cached.nameToInfo[binding.identifier.name]
+                  } else if (
+                    !dynamicLoadingInProgress.has(resolved) &&
+                    mightHaveStyledComponents(resolved)
+                  ) {
+                    // proactively load the file
+                    dynamicLoadingInProgress.add(resolved)
+                    try {
+                      const out = loadTamaguiSync({
+                        forceExports: true,
+                        components: [resolved],
+                      })
+                      if (out?.components) {
+                        for (const comp of out.components) {
+                          // merge into cache
+                          let existing = dynamicComponentCache.get(resolved)
+                          if (!existing) {
+                            existing = { moduleName: resolved, nameToInfo: {} }
+                            dynamicComponentCache.set(resolved, existing)
+                          }
+                          Object.assign(existing.nameToInfo, comp.nameToInfo)
+                          // also add to allLoadedComponents so getValidComponent works
+                          propsWithFileInfo.allLoadedComponents.push({
+                            moduleName: resolved,
+                            nameToInfo: comp.nameToInfo,
+                          })
+                        }
+                        const cachedNow = dynamicComponentCache.get(resolved)
+                        if (cachedNow?.nameToInfo[binding.identifier.name]) {
+                          dynamicComponent = cachedNow.nameToInfo[binding.identifier.name]
+                        }
+                      }
+                    } catch (err) {
+                      if (shouldPrintDebug) {
+                        logger.info(` - Failed to dynamically load ${resolved}: ${err}`)
+                      }
+                    } finally {
+                      dynamicLoadingInProgress.delete(resolved)
+                    }
+                  }
+                }
+              }
+
+              if (!dynamicComponent) {
+                if (shouldPrintDebug) {
+                  logger.info(
+                    ` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}\n`
+                  )
+                }
+                return
               }
-              return
             }
           }
         }
 
-        const component = getValidComponent(propsWithFileInfo, moduleName, node.name.name)
+        const component =
+          dynamicComponent ||
+          getValidComponent(propsWithFileInfo, moduleName, node.name.name)
         if (!component || !component.staticConfig) {
           if (shouldPrintDebug) {
             logger.info(`\n - No Tamagui conf for: ${node.name.name}\n`)
@@ -832,13 +1059,6 @@ export function createExtractor(
           const isTextView = staticConfig.isText || false
           const validStyles = staticConfig?.validStyles ?? {}
 
-          if (process.env.NODE_ENV === 'production') {
-            if (isTextView) {
-              // temporarily disabled - need to fix css nesting dix
-              return
-            }
-          }
-
           // find render="a" render="main" etc dom indicators
           let tagName = defaultProps.render ?? (isTextView ? 'span' : 'div')
           traversePath

package/src/extractor/detectModuleFormat.ts

@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs'
+import { dirname, extname, join } from 'node:path'
+
+type ModuleFormat = 'cjs' | 'esm'
+
+// cache per directory to avoid repeated fs reads
+const formatCache = new Map<string, ModuleFormat>()
+
+export function detectModuleFormat(filePath: string): ModuleFormat {
+  const ext = extname(filePath)
+
+  // definitive by extension
+  if (ext === '.mjs') return 'esm'
+  if (ext === '.cjs') return 'cjs'
+
+  // walk up to find nearest package.json with "type" field
+  let dir = dirname(filePath)
+  while (true) {
+    if (formatCache.has(dir)) {
+      return formatCache.get(dir)!
+    }
+
+    try {
+      const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'))
+      const format: ModuleFormat = pkg.type === 'module' ? 'esm' : 'cjs'
+      formatCache.set(dir, format)
+      return format
+    } catch {
+      // no package.json or malformed, keep walking
+    }
+
+    const parent = dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+
+  return 'cjs'
+}
+
+export function clearFormatCache() {
+  formatCache.clear()
+}

package/src/extractor/esbuildTsconfigPaths.ts

@@ -25,6 +25,11 @@ export function TsconfigPathsPlugin(): Plugin {
     name,
     setup({ onResolve }) {
       onResolve({ filter: /.*/ }, (args) => {
+        // skip @tamagui packages - they should be externalized, not resolved via tsconfig
+        if (args.path.startsWith('@tamagui/')) {
+          return null
+        }
+
         const paths = compilerOptions.paths || {}
         const hasMatchingPath = Object.keys(paths).some((p) =>
           new RegExp(p.replace('*', '\\w*')).test(args.path)
@@ -59,7 +64,7 @@ export function TsconfigPathsPlugin(): Plugin {
   }
 }
 
-function loadCompilerOptionsFromTsconfig(tsconfig?: Tsconfig | string) {
+export function loadCompilerOptionsFromTsconfig(tsconfig?: Tsconfig | string) {
   if (!tsconfig) {
     const configPath =
       findConfigFile(process.cwd(), sys.fileExists, 'tsconfig.json') ||

package/src/extractor/extractToClassNames.ts

@@ -107,7 +107,7 @@ export async function extractToClassNames({
     sourcePath,
     extractStyledDefinitions: true,
     onStyledDefinitionRule(identifier, rules) {
-      const css = rules.join(';')
+      const css = rules.join('\n')
       if (shouldPrintDebug) {
         console.info(`adding styled() rule: .${identifier} ${css}`)
       }
@@ -343,11 +343,18 @@ export async function extractToClassNames({
         baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
       }
 
-      let base = staticConfig.componentName
-        ? t.stringLiteral(
-            `is_${staticConfig.componentName}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
-          )
-        : t.stringLiteral(baseClassNameStr || '')
+      // add is_View or is_Text base class matching runtime behavior
+      const baseTypeClass = staticConfig.isText ? 'is_Text' : 'is_View'
+      baseClassNameStr = `${baseTypeClass}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
+
+      // add component name class (skip 'Text' since is_Text already covers it)
+      const componentNameFinal = staticConfig.componentName
+      let base =
+        componentNameFinal && componentNameFinal !== 'Text'
+          ? t.stringLiteral(
+              `is_${componentNameFinal}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
+            )
+          : t.stringLiteral(baseClassNameStr || '')
 
       attrClassName = attrClassName as t.Expression | null // actual typescript bug, flatMap doesn't update from never
 
@@ -616,10 +623,9 @@ function hoistClassName(path: NodePath<t.JSXElement>, str: string) {
 function cleanupClassName(inStr: string) {
   const out = new Set<string>()
   for (const part of inStr.split(' ')) {
-    if (part === ' ') continue
+    if (!part || part === ' ') continue
     if (part === 'font_') continue
     out.add(part)
   }
-  // always a space after for joining
-  return [...out].join(' ') + ' '
+  return [...out].join(' ')
 }

package/src/extractor/extractToNative.ts

@@ -22,13 +22,7 @@ const importStyleSheet = template(`
 const __ReactNativeStyleSheet = require('react-native').StyleSheet;
 `)
 
-const importWithStyle = template(`
-const __withStableStyle = require('@tamagui/core')._withStableStyle;
-`)
-
-const importReactUseMemo = template(`
-const __ReactUseMemo = require('react').useMemo;
-`)
+const importWithStyle = template.ast(`import { _withStableStyle } from '@tamagui/core';`)
 
 const extractor = createExtractor({ platform: 'native' })
 
@@ -161,6 +155,33 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                 'cursor',
                 'contain',
               ]),
+              // native props that should pass through without preventing extraction
+              inlineProps: new Set([
+                'testID',
+                'nativeID',
+                'accessibilityLabel',
+                'accessibilityHint',
+                'accessibilityRole',
+                'accessibilityState',
+                'accessibilityValue',
+                'accessibilityActions',
+                'accessibilityLabelledBy',
+                'accessibilityLiveRegion',
+                'accessibilityElementsHidden',
+                'accessibilityViewIsModal',
+                'importantForAccessibility',
+                'onAccessibilityAction',
+                'onAccessibilityEscape',
+                'onAccessibilityTap',
+                'onMagicTap',
+                'collapsable',
+                'needsOffscreenAlphaCompositing',
+                'removeClippedSubviews',
+                'renderToHardwareTextureAndroid',
+                'shouldRasterizeIOS',
+                'hitSlop',
+                'pointerEvents',
+              ]),
               shouldPrintDebug,
               ...finalOptions,
               // disable extracting variables as no native concept of them (only theme values)
@@ -306,8 +327,7 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                   hasDynamicStyle
                 ) {
                   if (!hasImportedViewWrapper) {
-                    root.unshiftContainer('body', importWithStyle())
-                    root.unshiftContainer('body', importReactUseMemo())
+                    root.unshiftContainer('body', importWithStyle)
                     hasImportedViewWrapper = true
                   }
 
@@ -323,25 +343,12 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                     t.variableDeclaration('const', [
                       t.variableDeclarator(
                         WrapperIdentifier,
-                        t.callExpression(t.identifier('__withStableStyle'), [
+                        t.callExpression(t.identifier('_withStableStyle'), [
                           t.identifier(name),
                           t.arrowFunctionExpression(
                             [t.identifier('theme'), t.identifier('_expressions')],
-                            t.blockStatement([
-                              t.returnStatement(
-                                t.callExpression(t.identifier('__ReactUseMemo'), [
-                                  t.arrowFunctionExpression(
-                                    [],
-                                    t.blockStatement([
-                                      t.returnStatement(
-                                        t.arrayExpression([...hocStylesExpr.elements])
-                                      ),
-                                    ])
-                                  ),
-                                  t.identifier('_expressions'),
-                                ])
-                              ),
-                            ])
+                            // return styles directly - no useMemo, theme changes must trigger style recalc
+                            t.arrayExpression([...hocStylesExpr.elements])
                           ),
                         ])
                       ),

package/src/extractor/loadTamagui.ts

@@ -15,7 +15,7 @@ import {
   getBundledConfig,
   getLoadedConfig,
   hasBundledConfigChanged,
-  loadComponents,
+  loadComponentsSync,
   writeTamaguiCSS,
 } from './bundleConfig'
 import { getTamaguiConfigPathFromOptionsConfig } from './getTamaguiConfigPathFromOptionsConfig'
@@ -288,7 +288,7 @@ export function loadTamaguiSync({
       }
 
       // components
-      const components = loadComponents(props, forceExports)
+      const components = loadComponentsSync(props, forceExports)
       if (!components) {
         throw new Error(`No components loaded`)
       }

package/src/getPragmaOptions.ts

@@ -7,8 +7,13 @@ export function getPragmaOptions({ source, path }: { source: string; path: strin
 
   let pragma = ''
   for (const line of firstLines.split('\n')) {
+    const trimmed = line.trim()
+    // only look at leading comments/empty lines, stop at first real code
+    if (trimmed && !trimmed.startsWith('//') && !trimmed.startsWith('/*')) {
+      break
+    }
     pragma =
-      line
+      trimmed
         .match(/(\/\/|\/\*)\s?!?\s?(tamagui-ignore|debug|debug-verbose)(\n|\s|$).*/)?.[2]
         .trim() || ''
     if (pragma) {