@tamagui/static 2.7.7 → 3.0.0-beta.643.1

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,170 @@
+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 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-v3-${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 }
+      } => Object.hasOwn(TAGS, element.component.name)
+    )
+    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 (!Object.hasOwn(TAGS, tagName)) {
+        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 =
+          (Object.hasOwn(ATTRIBUTES, entry.name) ? ATTRIBUTES[entry.name] : undefined) ??
+          (entry.name.startsWith('data-') ? ATTRIBUTES['data-*'] : undefined)
+        const event = Object.hasOwn(EVENTS, entry.name) ? 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
+      }
+      edits.push({
+        start: definition.span.start,
+        end: definition.span.end,
+        content: 'undefined',
+        origin: definition.span,
+      })
+    }
+
+    const nextModule: MaterializedModule = module
+    return {
+      module: nextModule,
+      edits,
+      imports: [],
+      diagnostics,
+      dependencies: [],
+    }
+  },
+}

package/src/exports.ts

@@ -1,16 +1,13 @@
 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 * 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,
@@ -134,6 +142,7 @@ function getESBuildConfig(
     logLevel: 'warning',
     plugins: [
       TsconfigPathsPlugin(),
+      staticEvaluationIgnorePlugin(dangerouslyIgnoreStaticEvaluationModules),
 
       // handle ESM-only features that can't be used with CJS output
       {
@@ -175,19 +184,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 +205,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 +225,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 +258,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,8 +274,11 @@ 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
+  // 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 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,