@tamagui/static 3.0.0-beta.1479.1 → 3.0.0-beta.1540.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "3.0.0-beta.1479.1",
+  "version": "3.0.0-beta.1540.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "source": "src/index.ts",
@@ -45,22 +45,22 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animation-helpers": "3.0.0-beta.1479.1",
-    "@tamagui/cli-color": "3.0.0-beta.1479.1",
-    "@tamagui/compiler-core": "3.0.0-beta.1479.1",
-    "@tamagui/config-default": "3.0.0-beta.1479.1",
-    "@tamagui/core": "3.0.0-beta.1479.1",
-    "@tamagui/dom": "3.0.0-beta.1479.1",
-    "@tamagui/fake-react-native": "3.0.0-beta.1479.1",
-    "@tamagui/generate-themes": "3.0.0-beta.1479.1",
-    "@tamagui/helpers": "3.0.0-beta.1479.1",
-    "@tamagui/helpers-node": "3.0.0-beta.1479.1",
-    "@tamagui/react-native-web-internals": "3.0.0-beta.1479.1",
-    "@tamagui/react-native-web-lite": "3.0.0-beta.1479.1",
-    "@tamagui/shorthands": "3.0.0-beta.1479.1",
-    "@tamagui/style-grammar": "3.0.0-beta.1479.1",
-    "@tamagui/types": "3.0.0-beta.1479.1",
-    "@tamagui/web": "3.0.0-beta.1479.1",
+    "@tamagui/animation-helpers": "3.0.0-beta.1540.1",
+    "@tamagui/cli-color": "3.0.0-beta.1540.1",
+    "@tamagui/compiler-core": "3.0.0-beta.1540.1",
+    "@tamagui/config-default": "3.0.0-beta.1540.1",
+    "@tamagui/core": "3.0.0-beta.1540.1",
+    "@tamagui/dom": "3.0.0-beta.1540.1",
+    "@tamagui/fake-react-native": "3.0.0-beta.1540.1",
+    "@tamagui/generate-themes": "3.0.0-beta.1540.1",
+    "@tamagui/helpers": "3.0.0-beta.1540.1",
+    "@tamagui/helpers-node": "3.0.0-beta.1540.1",
+    "@tamagui/react-native-web-internals": "3.0.0-beta.1540.1",
+    "@tamagui/react-native-web-lite": "3.0.0-beta.1540.1",
+    "@tamagui/shorthands": "3.0.0-beta.1540.1",
+    "@tamagui/style-grammar": "3.0.0-beta.1540.1",
+    "@tamagui/types": "3.0.0-beta.1540.1",
+    "@tamagui/web": "3.0.0-beta.1540.1",
     "browserslist": "^4.28.1",
     "check-dependency-version-consistency": "^4.1.0",
     "esbuild": "0.28.1",
@@ -73,7 +73,7 @@
     "react-native-web": "~0.21.0"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1479.1",
+    "@tamagui/build": "3.0.0-beta.1540.1",
     "@types/find-root": "^1.1.2",
     "@types/node": "^22.1.0",
     "@types/webpack": "^4.41.26",

package/src/compilerHost.ts

@@ -2,6 +2,7 @@ import type {
   BranchDecisionNode,
   CompilerLoweringHost,
   CompilerTarget,
+  DynamicEvaluation,
   LoweringCandidateInput,
   LoweringCandidateResult,
   LoweringComponent,
@@ -686,6 +687,61 @@ const nativePointerEventProps = new Set([
   'onPointerUp',
 ])
 
+// expandStyle writes every shorthand as four longhands, and fabric pays per prop
+// on mount (200 views: 8.8ms as longhands, 5.7ms as shorthands). when a hoisted
+// static style holds all four sides equal and no other key of that family, the
+// shorthand resolves identically in yoga, and any longhand in a later style
+// object still overrides it
+const nativeShorthandFamilies: [string, string[], RegExp][] = [
+  ['padding', ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'], /^padding/],
+  ['margin', ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'], /^margin/],
+  [
+    'borderWidth',
+    ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+    /^border.*Width$/,
+  ],
+  [
+    'borderColor',
+    ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+    /^border.*Color$/,
+  ],
+  [
+    'borderRadius',
+    [
+      'borderTopLeftRadius',
+      'borderTopRightRadius',
+      'borderBottomRightRadius',
+      'borderBottomLeftRadius',
+    ],
+    /^border.*Radius$/,
+  ],
+]
+
+function collapseNativeShorthands(style: unknown) {
+  if (!staticObject(style)) return style
+  const keys = Object.keys(style)
+  const collapsed = new Map<string, string>()
+  for (const [shorthand, sides, family] of nativeShorthandFamilies) {
+    const value = style[sides[0]]
+    if (
+      value !== undefined &&
+      !(shorthand in style) &&
+      sides.every((side) => style[side] === value) &&
+      keys.filter((key) => family.test(key)).length === sides.length
+    ) {
+      for (const side of sides) collapsed.set(side, shorthand)
+    }
+  }
+  if (!collapsed.size) return style
+  const out: Record<string, unknown> = {}
+  for (const key of keys) {
+    const shorthand = collapsed.get(key)
+    if (!shorthand) out[key] = style[key]
+    else if (!(shorthand in out)) out[shorthand] = style[key]
+  }
+  return out
+}
+
 function isSerializableNativeStyle(value: unknown): boolean {
   if (value == null || typeof value === 'number' || typeof value === 'boolean') {
     return true
@@ -1395,6 +1451,21 @@ export function createTamaguiCompilerHost(
     if (dynamic?.type !== 'string' || !dynamic.values?.length) return null
     return dynamic.values.map(String)
   }
+  // an opaque native value the compiler can still lower: a finite domain
+  // (a static array member, a template over one) resolves each value like a
+  // conditional branch and selects it by the runtime value; an unbounded
+  // number passes straight into the style key once probing proves the prop
+  // maps numbers to that one key unchanged
+  const nativeDynamicShape = (
+    name: string,
+    component: LoweringComponent,
+    dynamic: DynamicEvaluation | null | undefined
+  ): 'domain' | 'number' | null => {
+    if (!dynamic || !canLowerConditionalStyleProp(name, component)) return null
+    if (dynamic.values?.length) return 'domain'
+    if (dynamic.type === 'number' && directStyleName(name, component)) return 'number'
+    return null
+  }
   type DynamicStyleEntry = Extract<
     MaterializedElement['entries'][number],
     { kind: 'prop' }
@@ -1658,7 +1729,7 @@ export function createTamaguiCompilerHost(
   return {
     resolveComponent: resolve,
     isStyleProp,
-    canLowerDynamicStyleProp(name, component, valueKind) {
+    canLowerDynamicStyleProp(name, component, valueKind, dynamic) {
       // a conditional with static branches lowers per-branch on both
       // platforms: each side resolves at compile time, only the test survives
       if (
@@ -1684,7 +1755,10 @@ export function createTamaguiCompilerHost(
       return (
         !options.disablePartialExtraction &&
         ((platform === 'web' && !!directStyleName(name, component)) ||
-          (platform === 'native' && directStyleName(name, component) === 'opacity'))
+          (platform === 'native' &&
+            (directStyleName(name, component) === 'opacity' ||
+              (valueKind === 'bailout' &&
+                nativeDynamicShape(name, component, dynamic) !== null))))
       )
     },
     developmentDebugInstrumentation,
@@ -2331,7 +2405,9 @@ export function createTamaguiCompilerHost(
             entry.kind === 'prop' &&
             (directStyleName(entry.name, component) === 'opacity' ||
               (entry.value.kind === 'conditional' &&
-                canLowerConditionalStyleProp(entry.name, component)))
+                canLowerConditionalStyleProp(entry.name, component)) ||
+              (entry.value.kind === 'bailout' &&
+                nativeDynamicShape(entry.name, component, entry.value.dynamic) !== null))
         )
       if (
         dynamicStyleEntries.length > 0 &&
@@ -2743,9 +2819,15 @@ export function createTamaguiCompilerHost(
           input.source,
           `__TamaguiNativeStyle${input.element.span.start}`
         )
+        // the native style engine pushes the runtime's exact keys, so its base keeps them
+        const usesNativeFastPath =
+          !!themedStyleKeys &&
+          !!options.experimentalNativeFastPath &&
+          dynamicStyleEntries.length === 0 &&
+          !input.element.entries.some((entry) => entry.kind === 'spread')
         const nativeStyleImports = [
           {
-            content: `\nfunction ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(nativeStyle ?? {})}); } ${nativeStyleLocal}();`,
+            content: `\nfunction ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
             origin: input.element.component.span,
           },
         ]
@@ -2756,12 +2838,7 @@ export function createTamaguiCompilerHost(
               mappingLocal: string
             }
           | undefined
-        if (
-          themedStyleKeys &&
-          options.experimentalNativeFastPath &&
-          dynamicStyleEntries.length === 0 &&
-          !input.element.entries.some((entry) => entry.kind === 'spread')
-        ) {
+        if (usesNativeFastPath) {
           const mappingLocal = unusedIdentifier(
             input.source,
             `__TamaguiNativeMapping${input.element.span.start}`
@@ -3137,7 +3214,77 @@ export function createTamaguiCompilerHost(
           const baseStyleForDiff = staticObject(nativeStyleResolved)
             ? nativeStyleResolved
             : {}
+          // resolves the element with one value in place of the dynamic prop
+          // and returns what that value adds over the static style
+          const valueDiff = (
+            entry: DynamicStyleEntry,
+            value: unknown,
+            what: string
+          ): Record<string, unknown> | string => {
+            const { branchCompleteProps } = propsForConditional(entry, value)
+            const branchSplit = resolveSplitStyles(
+              branchCompleteProps,
+              component.staticConfig,
+              cssAnimationDriver,
+              component.displayName
+            )
+            const branchStyle = branchSplit?.viewProps?.style ?? {}
+            if (!staticObject(branchStyle)) {
+              return `${what} did not resolve to a static native style`
+            }
+            // a value (e.g. through a variant) may change viewProps beyond
+            // style; the style array cannot express those, so any non-style
+            // difference sends the element to the runtime path
+            for (const viewPropsKey of new Set([
+              ...Object.keys(branchSplit?.viewProps ?? {}),
+              ...Object.keys(split.viewProps ?? {}),
+            ])) {
+              if (viewPropsKey === 'style') continue
+              if (
+                JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !==
+                JSON.stringify((split.viewProps as any)?.[viewPropsKey])
+              ) {
+                return `${what} changes ${viewPropsKey}, which the compiled style array cannot express`
+              }
+            }
+            for (const key of Object.keys(baseStyleForDiff)) {
+              if (!(key in branchStyle)) {
+                return `${what} removes ${key}, which an additive style array cannot express`
+              }
+            }
+            const diff: Record<string, unknown> = {}
+            for (const [key, value] of Object.entries(branchStyle)) {
+              if (
+                JSON.stringify((baseStyleForDiff as any)[key]) !== JSON.stringify(value)
+              ) {
+                diff[key] = value
+              }
+            }
+            if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+              return `${what} style is not statically representable`
+            }
+            return diff
+          }
+          // each dynamic prop owns the keys it contributes; two props writing
+          // one key would need their source order resolved at runtime
+          const claimKeys = (entry: DynamicStyleEntry, keys: Iterable<string>) => {
+            for (const key of keys) {
+              if (conditionalKeys.has(key)) {
+                return bailout(
+                  input,
+                  'local/dynamic-style-value',
+                  `Multiple dynamic props contribute ${key}; their interaction cannot be resolved at compile time`,
+                  entry.value.span
+                )
+              }
+            }
+            return null
+          }
           for (const entry of dynamicStyleEntries) {
+            const shape =
+              entry.value.kind === 'bailout'
+                ? nativeDynamicShape(entry.name, component, entry.value.dynamic)
+                : null
             // opacity keeps the leaner inline-expression form even for
             // ternaries; per-branch lowering is for props that form cannot carry
             if (
@@ -3151,79 +3298,21 @@ export function createTamaguiCompilerHost(
                 Record<string, unknown>
               >()
               for (const leaf of leaves) {
-                const { branchCompleteProps } = propsForConditional(entry, leaf.value)
-                const branchSplit = resolveSplitStyles(
-                  branchCompleteProps,
-                  component.staticConfig,
-                  cssAnimationDriver,
-                  component.displayName
+                const diff = valueDiff(
+                  entry,
+                  leaf.value,
+                  `Conditional ${entry.name} branch`
                 )
-                const branchStyle = branchSplit?.viewProps?.style ?? {}
-                if (!staticObject(branchStyle)) {
+                if (typeof diff === 'string') {
                   return bailout(
                     input,
                     'local/dynamic-style-value',
-                    `Conditional ${entry.name} branch did not resolve to a static native style`,
+                    diff,
                     entry.value.span
                   )
                 }
-                // a branch (e.g. through a variant) may change viewProps
-                // beyond style; the style array cannot express those, so any
-                // non-style difference sends the element to the runtime path
-                for (const viewPropsKey of new Set([
-                  ...Object.keys(branchSplit?.viewProps ?? {}),
-                  ...Object.keys(split.viewProps ?? {}),
-                ])) {
-                  if (viewPropsKey === 'style') continue
-                  if (
-                    JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !==
-                    JSON.stringify((split.viewProps as any)?.[viewPropsKey])
-                  ) {
-                    return bailout(
-                      input,
-                      'local/dynamic-style-value',
-                      `Conditional ${entry.name} branch changes ${viewPropsKey}, which the compiled style array cannot express`,
-                      entry.value.span
-                    )
-                  }
-                }
-                for (const key of Object.keys(baseStyleForDiff)) {
-                  if (!(key in branchStyle)) {
-                    return bailout(
-                      input,
-                      'local/dynamic-style-value',
-                      `Conditional ${entry.name} branch removes ${key}, which an additive style array cannot express`,
-                      entry.value.span
-                    )
-                  }
-                }
-                const diff: Record<string, unknown> = {}
-                for (const [key, value] of Object.entries(branchStyle)) {
-                  if (
-                    JSON.stringify((baseStyleForDiff as any)[key]) !==
-                    JSON.stringify(value)
-                  ) {
-                    diff[key] = value
-                  }
-                }
-                if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
-                  return bailout(
-                    input,
-                    'local/dynamic-style-value',
-                    `Conditional ${entry.name} branch style is not statically representable`,
-                    entry.value.span
-                  )
-                }
-                for (const key of Object.keys(diff)) {
-                  if (conditionalKeys.has(key)) {
-                    return bailout(
-                      input,
-                      'local/dynamic-style-value',
-                      `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`,
-                      entry.value.span
-                    )
-                  }
-                }
+                const conflict = claimKeys(entry, Object.keys(diff))
+                if (conflict) return conflict
                 leafDiffs.set(leaf, diff)
               }
               for (const diff of leafDiffs.values()) {
@@ -3241,14 +3330,70 @@ export function createTamaguiCompilerHost(
               }
 
               conditionalParts.push(serializeNativeTree(tree))
-            } else {
+            } else if (shape === 'domain' && entry.value.kind === 'bailout') {
+              // a finite domain is a lookup from each runtime value to its diff
+              const lookup: string[] = []
+              const keys = new Set<string>()
+              for (const value of entry.value.dynamic!.values!) {
+                const diff = valueDiff(
+                  entry,
+                  value,
+                  `${entry.name} value ${JSON.stringify(value)}`
+                )
+                if (typeof diff === 'string') {
+                  return bailout(
+                    input,
+                    'local/dynamic-style-value',
+                    diff,
+                    entry.value.span
+                  )
+                }
+                for (const key of Object.keys(diff)) keys.add(key)
+                lookup.push(`${JSON.stringify(String(value))}: ${JSON.stringify(diff)}`)
+              }
+              const conflict = claimKeys(entry, keys)
+              if (conflict) return conflict
+              for (const key of keys) conditionalKeys.add(key)
               const index = expressions.length
               expressions.push(
                 input.source.slice(entry.value.span.start, entry.value.span.end)
               )
-              plainDynamicParts.push(
-                `${JSON.stringify(directStyleName(entry.name, component))}: expressions[${index}]`
+              conditionalParts.push(`({ ${lookup.join(', ')} })[expressions[${index}]]`)
+            } else {
+              const key = directStyleName(entry.name, component)!
+              if (shape === 'number') {
+                // two probes prove a number lands unchanged in exactly this key
+                for (const probe of [7.25, 1031]) {
+                  const diff = valueDiff(entry, probe, `${entry.name} number`)
+                  if (
+                    typeof diff === 'string' ||
+                    JSON.stringify(diff) !== JSON.stringify({ [key]: probe })
+                  ) {
+                    return bailout(
+                      input,
+                      'local/dynamic-style-value',
+                      `Style prop ${entry.name} transforms numbers on native, so its runtime value cannot pass through`,
+                      entry.value.span
+                    )
+                  }
+                }
+                if (key in baseStyleForDiff) {
+                  return bailout(
+                    input,
+                    'local/dynamic-style-value',
+                    `Style prop ${entry.name} overlaps a static ${key}`,
+                    entry.value.span
+                  )
+                }
+                const conflict = claimKeys(entry, [key])
+                if (conflict) return conflict
+                conditionalKeys.add(key)
+              }
+              const index = expressions.length
+              expressions.push(
+                input.source.slice(entry.value.span.start, entry.value.span.end)
               )
+              plainDynamicParts.push(`${JSON.stringify(key)}: expressions[${index}]`)
             }
           }
           const dynamicStyle = plainDynamicParts.join(', ')

package/types/compilerHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compilerHost.d.ts","sourceRoot":"","sources":["../src/compilerHost.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,oBAAoB,EACpB,cAAc,EAQf,MAAM,wBAAwB,CAAA;AAoC/B,OAAO,KAAK,EAAiC,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAExF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAIhE,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,+EAA+E;IAC/E,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;CAClD;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,SAAS,gBAAgB,EAAE,EACvC,gBAAgB,EAAE,SAAS,uBAAuB,EAAE,GACnD,yBAAyB,CAS3B;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,cAAc,CAAA;IACtB,aAAa,EAAE,qBAAqB,CAAA;IACpC,UAAU,EAAE,gBAAgB,EAAE,CAAA;IAC9B,gBAAgB,EAAE,uBAAuB,EAAE,CAAA;IAC3C,qFAAqF;IACrF,QAAQ,CAAC,EAAE,yBAAyB,CAAA;IACpC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,mEAAmE;IACnE,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAu5BD,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,0BAA0B,GAClC,oBAAoB,CA4vFtB"}
+{"version":3,"file":"compilerHost.d.ts","sourceRoot":"","sources":["../src/compilerHost.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,oBAAoB,EACpB,cAAc,EASf,MAAM,wBAAwB,CAAA;AAoC/B,OAAO,KAAK,EAAiC,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAExF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAIhE,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,+EAA+E;IAC/E,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;CAClD;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,SAAS,gBAAgB,EAAE,EACvC,gBAAgB,EAAE,SAAS,uBAAuB,EAAE,GACnD,yBAAyB,CAS3B;AAED,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,cAAc,CAAA;IACtB,aAAa,EAAE,qBAAqB,CAAA;IACpC,UAAU,EAAE,gBAAgB,EAAE,CAAA;IAC9B,gBAAgB,EAAE,uBAAuB,EAAE,CAAA;IAC3C,qFAAqF;IACrF,QAAQ,CAAC,EAAE,yBAAyB,CAAA;IACpC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,mEAAmE;IACnE,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AA88BD,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,0BAA0B,GAClC,oBAAoB,CAq1FtB"}