@tamagui/static 2.7.7 → 3.0.0-beta.643.1

package/src/extractor/regenerateConfig.ts

@@ -1,17 +1,17 @@
 import { dirname, join } from 'node:path'
+import { createRequire } from 'node:module'
 
 import { generateThemes, writeGeneratedThemes } from '@tamagui/generate-themes'
+import { stylePropsAll } from '@tamagui/helpers'
+import { grammarEntries } from '@tamagui/style-grammar'
 import type { TamaguiOptions } from '@tamagui/types'
-import * as FS from 'fs-extra'
+import FS from 'fs-extra'
 
 import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
 import type { TamaguiPlatform } from '../types'
 import type { BundledConfig } from './bundleConfig'
 import { getBundledConfig } from './bundleConfig'
 
-const tamaguiDir = join(process.cwd(), '.tamagui')
-const confFile = join(tamaguiDir, 'tamagui.config.json')
-
 /**
  * Sort of a super-set of bundleConfig(), this code needs some refactoring ideally
  */
@@ -27,6 +27,7 @@ export async function regenerateConfig(
     const config = configIn ?? (await getBundledConfig(tamaguiOptions, rebuild))
     if (!config) return
     const out = transformConfig(config, tamaguiOptions.platform || 'web')
+    const confFile = getConfigFile(tamaguiOptions)
 
     await FS.ensureDir(dirname(confFile))
     await FS.writeJSON(confFile, out, {
@@ -41,14 +42,15 @@ export async function regenerateConfig(
 }
 
 export function regenerateConfigSync(
-  _tamaguiOptions: TamaguiOptions,
+  tamaguiOptions: TamaguiOptions,
   config: BundledConfig
 ) {
   try {
+    const confFile = getConfigFile(tamaguiOptions)
     FS.ensureDirSync(dirname(confFile))
     FS.writeJSONSync(
       confFile,
-      transformConfig(config, _tamaguiOptions.platform || 'web'),
+      transformConfig(config, tamaguiOptions.platform || 'web'),
       {
         spaces: 2,
       }
@@ -70,8 +72,11 @@ export async function generateTamaguiThemes(
   }
 
   const { input, output } = tamaguiOptions.themeBuilder
-  const inPath = resolveRelativePath(input)
-  const outPath = resolveRelativePath(output)
+  const root = tamaguiOptions.root || process.cwd()
+  const tamaguiDir = join(root, '.tamagui')
+  const projectRequire = createRequire(join(root, 'package.json'))
+  const inPath = resolveRelativePath(input, root, projectRequire)
+  const outPath = resolveRelativePath(output, root, projectRequire)
   const generatedOutput = await generateThemes(inPath)
 
   // because this runs in parallel (its cheap) lets avoid logging a bunch, so check to see if changed:
@@ -96,8 +101,15 @@ export async function generateTamaguiThemes(
   return hasChanged
 }
 
-const resolveRelativePath = (inputPath: string) =>
-  inputPath.startsWith('.') ? join(process.cwd(), inputPath) : require.resolve(inputPath)
+const getConfigFile = (options: TamaguiOptions) =>
+  join(options.root || process.cwd(), '.tamagui', 'tamagui.config.json')
+
+const resolveRelativePath = (
+  inputPath: string,
+  root: string,
+  projectRequire: NodeRequire
+) =>
+  inputPath.startsWith('.') ? join(root, inputPath) : projectRequire.resolve(inputPath)
 
 function cloneDeepSafe(x: any, excludeKeys = {}) {
   if (!x) return x
@@ -110,6 +122,40 @@ function cloneDeepSafe(x: any, excludeKeys = {}) {
   )
 }
 
+/**
+ * Which token category each style prop draws its values from, emitted so the
+ * language server can offer `bg=""` colors and `p=""` spaces instead of every
+ * token in the config.
+ *
+ * Derived from the style-grammar registry rather than restated here: that
+ * registry is already the contract the runtime resolver is pinned to
+ * (see core-test/tokenCategoryParity.web.test.tsx), so a second table would be
+ * a second thing to keep true.
+ *
+ * A prefix shared by props of different categories (`border` is both
+ * borderWidth/space and borderColor/color) is left out rather than guessed at;
+ * an unmapped prop offers the whole vocabulary, which is the honest answer.
+ */
+function buildPropCategories(): Record<string, string> {
+  const out: Record<string, string> = {}
+  const byPrefix: Record<string, Set<string | undefined>> = {}
+
+  for (const entry of grammarEntries) {
+    if (entry.tokenCategory) out[entry.prop] = entry.tokenCategory
+    if (entry.prefix) (byPrefix[entry.prefix] ||= new Set()).add(entry.tokenCategory)
+  }
+
+  for (const [prefix, categories] of Object.entries(byPrefix)) {
+    // `out[prefix]` may already be set when a prop is its own prefix (`gap`,
+    // `color`); the registry agrees with itself there, so this is a no-op
+    if (categories.size !== 1) continue
+    const [only] = categories
+    if (only) out[prefix] = only
+  }
+
+  return out
+}
+
 function transformConfig(config: BundledConfig, platform: TamaguiPlatform) {
   if (!config) {
     return null
@@ -127,11 +173,9 @@ function transformConfig(config: BundledConfig, platform: TamaguiPlatform) {
 
   // reduce down to usable, smaller json
 
-  // slim themes, add name
+  // slim themes
   for (const key in themes) {
     const theme = themes[key]
-    // @ts-ignore
-    theme.id = key
     for (const tkey in theme) {
       theme[tkey] = getVariableValue(theme[tkey])
     }
@@ -177,10 +221,18 @@ function transformConfig(config: BundledConfig, platform: TamaguiPlatform) {
   return {
     components,
     nameToPaths,
+    tamaguiConfigMetadata: {
+      themeFields: 'values-only',
+    },
     tamaguiConfig: {
       ...cleanedConfig,
       // Output userShorthands as shorthands (excludes built-ins)
       shorthands: userShorthands,
+      propCategories: buildPropCategories(),
+      // every prop that can carry a style value. the shorthand tables alone
+      // miss any long-form prop with no shorthand (`gap`, `backgroundColor`),
+      // and the language server was silent inside exactly those.
+      styleProps: Object.keys(stylePropsAll),
     },
   }
 }

package/src/extractor/watchTamaguiConfig.ts

@@ -1,7 +1,12 @@
 import type { TamaguiOptions } from '@tamagui/types'
+import { createRequire } from 'node:module'
 import { esbuildWatchFiles, generateThemesAndLog, getOptions } from './loadTamagui'
 import { regenerateConfig } from './regenerateConfig'
 
+const nodeRequire = createRequire(
+  typeof __filename === 'string' ? __filename : import.meta.url
+)
+
 let isWatching = false
 
 export async function watchTamaguiConfig(tamaguiOptions: TamaguiOptions) {
@@ -43,7 +48,7 @@ export async function watchTamaguiConfig(tamaguiOptions: TamaguiOptions) {
   if (themeBuilderInput) {
     let inputPath = themeBuilderInput
     try {
-      inputPath = require.resolve(themeBuilderInput)
+      inputPath = nodeRequire.resolve(themeBuilderInput)
     } catch {
       // ok
     }

package/src/helpers/requireTamaguiCore.ts

@@ -1,10 +1,15 @@
 // this allows us to swap between core native and web in the same process:
 
 import type { TamaguiPlatform } from '../types'
+import { createRequire } from 'node:module'
+
+const nodeRequire = createRequire(
+  typeof __filename === 'string' ? __filename : import.meta.url
+)
 
 export function requireTamaguiCore(
   platform: TamaguiPlatform,
-  ogRequire: Function = require
+  ogRequire: Function = nodeRequire
 ): typeof import('@tamagui/core') {
   if (!platform) {
     throw new Error(`No platform given to requireTamaguiCore`)

package/src/registerRequire.ts

@@ -1,21 +1,43 @@
+import { dirname } from 'node:path'
+import { buildSync } from 'esbuild'
 import { register } from 'esbuild-register/dist/node'
+import { createRequire } from 'node:module'
 
 import { esbuildIgnoreFilesRegex } from './extractor/bundle'
 import { requireTamaguiCore } from './helpers/requireTamaguiCore'
+import {
+  getStaticEvaluationModuleReplacement,
+  isIgnoredStaticEvaluationModule,
+} from './staticEvaluationIgnoredModules'
 import type { TamaguiPlatform } from './types'
 
 const nameToPaths = {}
+const nodeRequire = createRequire(
+  typeof __filename === 'string' ? __filename : import.meta.url
+)
 
 export const getNameToPaths = () => nameToPaths
 
-const Module = require('node:module')
-const proxyWorm = require('@tamagui/proxy-worm')
+const Module = nodeRequire('node:module')
 
 let isRegistered = false
 let og: any
 
-const whitelisted = {
-  react: true,
+class StaticEvaluationError extends Error {
+  code = 'TAMAGUI_STATIC_EVALUATION_ERROR' as const
+
+  constructor(
+    readonly moduleName: string,
+    readonly importer: string,
+    readonly failedModule: string,
+    readonly reason: string,
+    options: ErrorOptions
+  ) {
+    super(
+      `[tamagui] Failed to evaluate module "${failedModule}" imported from "${importer}" while loading the Tamagui config and configured components.\nReason: ${reason}\nFix the module so it can run in Node during the build. If it is runtime-only and none of its exports create your Tamagui config or components, add "${moduleName}" to dangerouslyIgnoreStaticEvaluationModules in tamagui.build.ts.`,
+      options
+    )
+  }
 }
 
 const compiled = {}
@@ -48,6 +70,35 @@ function getStaticExtractionStub(path: string) {
         fetchUpdateAsync: async () => ({ isNew: false }),
         reloadAsync: async () => {},
       }
+    case 'react-native-reanimated': {
+      const identity = <T>(value: T) => value
+      const sharedValue = <T>(value: T) => ({
+        value,
+        get: () => value,
+        set: (next: T | ((current: T) => T)) => {
+          value = typeof next === 'function' ? (next as (current: T) => T)(value) : next
+        },
+      })
+      const Animated = {
+        createAnimatedComponent: identity,
+        View: () => null,
+        Text: () => null,
+      }
+      return {
+        __esModule: true,
+        default: Animated,
+        cancelAnimation: () => {},
+        runOnJS: identity,
+        runOnUI: identity,
+        useAnimatedReaction: () => {},
+        useAnimatedStyle: (callback: () => unknown) => callback(),
+        useDerivedValue: (callback: () => unknown) => sharedValue(callback()),
+        useSharedValue: sharedValue,
+        withDelay: (_delay: number, animation: unknown) => animation,
+        withSpring: identity,
+        withTiming: identity,
+      }
+    }
     default:
       return null
   }
@@ -55,14 +106,14 @@ function getStaticExtractionStub(path: string) {
 
 export function registerRequire(
   platform: TamaguiPlatform,
-  { proxyWormImports } = {
-    proxyWormImports: false,
+  { ignoredModules = [] }: { ignoredModules?: string[] } = {
+    ignoredModules: [],
   }
 ) {
   // already registered
   if (isRegistered) {
     return {
-      tamaguiRequire: require,
+      tamaguiRequire: nodeRequire,
       unregister: () => {},
     }
   }
@@ -122,12 +173,35 @@ export function registerRequire(
       })
     }
 
+    const staticEvaluationReplacement = getStaticEvaluationModuleReplacement(path)
+    if (staticEvaluationReplacement) {
+      if (!(path in compiled)) {
+        const replacementPath = nodeRequire.resolve(staticEvaluationReplacement)
+        const output = buildSync({
+          entryPoints: [replacementPath],
+          bundle: true,
+          format: 'cjs',
+          platform: 'node',
+          write: false,
+        }).outputFiles[0].text
+        const replacementModule = new Module(replacementPath, this)
+        replacementModule.filename = replacementPath
+        replacementModule.paths = Module._nodeModulePaths(dirname(replacementPath))
+        replacementModule._compile(output, replacementPath)
+        compiled[path] = replacementModule.exports
+      }
+      return compiled[path]
+    }
+
     if (
-      path in knownIgnorableModules ||
-      path.startsWith('react-native-reanimated') ||
-      esbuildIgnoreFilesRegex.test(path)
+      staticEvaluationReplacement === null ||
+      isIgnoredStaticEvaluationModule(path, ignoredModules)
     ) {
-      return proxyWorm
+      return {}
+    }
+
+    if (esbuildIgnoreFilesRegex.test(path)) {
+      return {}
     }
 
     if (path in compiled) {
@@ -156,141 +230,29 @@ export function registerRequire(
       }
     }
 
-    if (!whitelisted[path]) {
-      if (proxyWormImports && !path.includes('.tamagui-dynamic-eval')) {
-        // allow tamagui and its sub-packages through - they re-export components
-        // with staticConfig needed for dynamic eval optimization.
-        // also allow requires FROM within tamagui packages (relative imports like ./Separator.cjs)
-        const callerFile = this?.filename || this?.id || ''
-        const isFromTamaguiPkg =
-          callerFile.includes('@tamagui') ||
-          callerFile.includes('node_modules/tamagui/') ||
-          /\/tamagui\/code\/(core|ui|packages)\//.test(callerFile)
-        const isFromStaticLoader =
-          !callerFile ||
-          callerFile === '.' ||
-          callerFile === '[eval]' ||
-          callerFile.endsWith('/[eval]') ||
-          callerFile.includes('/code/compiler/static/') ||
-          callerFile.includes('/.tamagui/')
-        // relative requires from within a whitelisted package's own files
-        // (e.g. react/index.js does require('./cjs/react.development.js')).
-        // proxy-worming these breaks the package's own internals.
-        const isRelativeFromWhitelisted =
-          path.startsWith('.') &&
-          Object.keys(whitelisted).some((pkg) =>
-            callerFile.includes(`/node_modules/${pkg}/`)
-          )
-
-        if (
-          path === 'tamagui' ||
-          path.startsWith('@tamagui/') ||
-          isRelativeFromWhitelisted ||
-          isFromTamaguiPkg ||
-          isFromStaticLoader
-        ) {
-          return og.apply(this, [path])
-        }
-        return proxyWorm
-      }
-    }
-
     try {
       const out = og.apply(this, arguments)
-      // only for studio disable for now
-      // if (!nameToPaths[path]) {
-      //   if (out && typeof out === 'object') {
-      //     for (const key in out) {
-      //       try {
-      //         const conf = out[key]?.staticConfig as StaticConfig
-      //         if (conf) {
-      //           if (conf.componentName) {
-      //             nameToPaths[conf.componentName] ??= new Set()
-      //             const fullName = path.startsWith('.')
-      //               ? join(`${this.path.replace(/dist(\/cjs)?/, 'src')}`, path)
-      //               : path
-      //             nameToPaths[conf.componentName].add(fullName)
-      //           } else {
-      //             // console.log('no name component', path)
-      //           }
-      //         }
-      //       } catch {
-      //         // ok
-      //       }
-      //     }
-      //   }
-      // }
       return out
     } catch (err: any) {
-      if (
-        !process.env.TAMAGUI_ENABLE_WARN_DYNAMIC_LOAD &&
-        path.includes('tamagui-dynamic-eval')
-      ) {
-        // ok, dynamic eval fails
-        return
+      if (err?.code === 'TAMAGUI_STATIC_EVALUATION_ERROR') {
+        throw err
       }
-      if (allowedIgnores[path] || IGNORES === 'true') {
-        // ignore
-      } else if (!process.env.TAMAGUI_SHOW_FULL_BUNDLE_ERRORS && !process.env.DEBUG) {
-        if (hasWarnedForModules.has(path)) {
-          // ignore
-        } else {
-          hasWarnedForModules.add(path)
-        }
-      } else {
-        /**
-         * Allow errors to happen, we're just reading config and components but sometimes external modules cause problems
-         * We can't fix every problem, so just swap them out with proxyWorm which is a sort of generic object that can be read.
-         */
-
-        console.warn(
-          `  [tamagui] skipped "${path}" (set TAMAGUI_IGNORE_BUNDLE_ERRORS="${path}" to silence)`
-        )
-      }
-
-      return proxyWorm
+      const importer = this?.filename || this?.id || '<unknown module>'
+      const reason = err instanceof Error ? err.message : String(err)
+      const failedModule =
+        reason.match(/Cannot find native module ['"]([^'"]+)['"]/)?.[1] || path
+      throw new StaticEvaluationError(path, importer, failedModule, reason, {
+        cause: err,
+      })
     }
   }
 
   return {
     tamaguiRequire,
     unregister: () => {
-      if (hasWarnedForModules.size) {
-        console.info(
-          `  [tamagui] skipped loading ${hasWarnedForModules.size} module, see: https://tamagui.dev/docs/intro/errors#warning-001`
-        )
-        hasWarnedForModules.clear()
-      }
-
       unregister()
       isRegistered = false
       Module.prototype.require = og
     },
   }
 }
-
-const IGNORES = process.env.TAMAGUI_IGNORE_BUNDLE_ERRORS
-const extraIgnores =
-  IGNORES === 'true' ? [] : process.env.TAMAGUI_IGNORE_BUNDLE_ERRORS?.split(',')
-
-const knownIgnorableModules = {
-  '@gorhom/bottom-sheet': true,
-  'expo-modules': true,
-  solito: true,
-  'expo-linear-gradient': true,
-  '@expo/vector-icons': true,
-  'tamagui/linear-gradient': true,
-  // animation libraries not needed for static extraction
-  '@emotion/is-prop-valid': true,
-  'framer-motion': true,
-  motion: true,
-  ...Object.fromEntries(extraIgnores?.map((k) => [k, true]) || []),
-}
-
-const hasWarnedForModules = new Set<string>()
-
-const allowedIgnores = {
-  'expo-constants': true,
-  './ExpoHaptics': true,
-  './js/MaskedView': true,
-}

package/src/staticEvaluationIgnoredModules.ts

@@ -0,0 +1,74 @@
+import { readFile } from 'node:fs/promises'
+import { dirname } from 'node:path'
+import type { Plugin } from 'esbuild'
+
+export const tamaguiStaticEvaluationModules = Object.freeze({
+  // react-native-safe-area-context evaluates its native codegen spec in Node and
+  // calls codegenNativeComponent, which is unavailable during static evaluation.
+  'react-native-safe-area-context': null,
+  // react-native-worklets initializes native JSI in Node, so static evaluation
+  // inlines the package's own mock while preserving the authored animation config.
+  // the vendor mock mutates _WORKLET, __RUNTIME_KIND, _log,
+  // _getAnimationTimestamp, and requestAnimationFrame in the compiler process.
+  'react-native-worklets': 'react-native-worklets/lib/module/mock.js',
+} as const)
+
+export function getStaticEvaluationModuleReplacement(moduleName: string) {
+  return Object.hasOwn(tamaguiStaticEvaluationModules, moduleName)
+    ? tamaguiStaticEvaluationModules[
+        moduleName as keyof typeof tamaguiStaticEvaluationModules
+      ]
+    : undefined
+}
+
+export function isIgnoredStaticEvaluationModule(
+  moduleName: string,
+  userIgnoredModules: readonly string[] = []
+) {
+  return (
+    getStaticEvaluationModuleReplacement(moduleName) !== undefined ||
+    userIgnoredModules.includes(moduleName)
+  )
+}
+
+export function staticEvaluationIgnorePlugin(
+  userIgnoredModules: readonly string[] = []
+): Plugin {
+  return {
+    name: 'tamagui-static-evaluation-ignore',
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, (args) => {
+        if (isIgnoredStaticEvaluationModule(args.path, userIgnoredModules)) {
+          return { path: args.path, namespace: 'tamagui-static-evaluation-ignore' }
+        }
+        return null
+      })
+      build.onLoad(
+        { filter: /.*/, namespace: 'tamagui-static-evaluation-ignore' },
+        async (args) => {
+          const replacement = getStaticEvaluationModuleReplacement(args.path)
+          if (replacement) {
+            const resolved = await build.resolve(replacement, {
+              kind: 'require-call',
+              resolveDir: build.initialOptions.absWorkingDir || process.cwd(),
+            })
+            if (resolved.errors.length) {
+              return { errors: resolved.errors, warnings: resolved.warnings }
+            }
+            return {
+              contents: await readFile(resolved.path, 'utf8'),
+              loader: 'js',
+              resolveDir: dirname(resolved.path),
+              warnings: resolved.warnings,
+            }
+          }
+          return {
+            contents: 'module.exports = {}',
+            loader: 'js',
+            resolveDir: build.initialOptions.absWorkingDir || process.cwd(),
+          }
+        }
+      )
+    },
+  }
+}

package/src/types.ts

@@ -1,109 +1,4 @@
-import type { NodePath } from '@babel/traverse'
-import type * as t from '@babel/types'
-import type { PseudoStyles, StaticConfig, TamaguiConfig } from '@tamagui/core'
-import type { StyleObject } from '@tamagui/helpers'
-import type { TamaguiOptions } from '@tamagui/types'
-import type { ViewStyle } from 'react-native'
-
-import type { LoadedComponents } from './extractor/bundleConfig'
-
-export type TamaguiPlatform = 'native' | 'web'
-
-export type { TamaguiOptions, TamaguiBuildOptions } from '@tamagui/types'
-
+export type { TamaguiBuildOptions, TamaguiOptions } from '@tamagui/types'
 export type { StyleObject } from '@tamagui/helpers'
 
-export type ClassNameObject = t.StringLiteral | t.Expression
-
-export interface CacheObject {
-  [key: string]: any
-}
-
-export interface LogOptions {
-  clear?: boolean
-  timestamp?: boolean
-  error?: Error | null
-}
-
-export interface Logger {
-  info(msg: string, options?: LogOptions): void
-  warn(msg: string, options?: LogOptions): void
-  error(msg: string, options?: LogOptions): void
-}
-
-export type ExtractorOptions = {
-  logger?: Logger
-  platform?: TamaguiPlatform
-}
-
-export type ExtractedAttrAttr = {
-  type: 'attr'
-  value: t.JSXAttribute | t.JSXSpreadAttribute
-  extraClassNames?: string
-}
-
-export type ExtractedAttrStyle = {
-  type: 'style'
-  value: ViewStyle & PseudoStyles
-  attr?: t.JSXAttribute | t.JSXSpreadAttribute
-  name?: string
-  extraClassNames?: string
-}
-
-export type ExtractedTernaryAttr = {
-  type: 'ternary'
-  value: Ternary
-}
-
-export type ExtractedAttr = ExtractedAttrAttr | ExtractedTernaryAttr | ExtractedAttrStyle
-
-export type ExtractTagProps = {
-  parserProps: TamaguiOptionsWithFileInfo
-  attrs: ExtractedAttr[]
-  node: t.JSXOpeningElement
-  attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any
-  flatNodeName?: string
-  jsxPath: NodePath<t.JSXElement>
-  programPath: NodePath<t.Program>
-  originalNodeName: string
-  lineNumbers: string
-  filePath: string
-  completeProps: Record<string, any>
-  staticConfig: StaticConfig
-  config: TamaguiConfig
-}
-
-export type TamaguiOptionsWithFileInfo = TamaguiOptions & {
-  sourcePath?: string
-  allLoadedComponents: LoadedComponents[]
-}
-
-export type ExtractorParseProps = Omit<
-  TamaguiOptionsWithFileInfo,
-  'allLoadedComponents'
-> & {
-  platform: TamaguiPlatform
-  shouldPrintDebug?: boolean | 'verbose'
-  onExtractTag: (props: ExtractTagProps) => void
-  getFlattenedNode?: (props: { isTextView: boolean; tag: string }) => string
-  extractStyledDefinitions?: boolean
-  // identifer, rule
-  onStyledDefinitionRule?: (identifier: string, rules: string[]) => void
-}
-
-export interface Ternary {
-  test: t.Expression
-  remove: Function
-  consequent: object | null
-  alternate: object | null
-  fontFamily?: string
-  inlineMediaQuery?: string
-}
-
-export type ClassNameToStyleObj = {
-  [key: string]: StyleObject
-}
-
-export interface PluginContext {
-  write: (path: string, rules: { [key: string]: string }) => any
-}
+export type TamaguiPlatform = 'native' | 'web'